/* ==========================================================================
           2. HERO SECTION (建筑美学图文错落布局)
           ========================================================================== */
        .material-hero {
            padding: 100px 0 80px 0;
        }

        .material-hero__grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 60px;
            align-items: center;
        }

        .material-hero__title {
            font-size: 52px;
            font-weight: 400;
            line-height: 1.15;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 30px;
        }

        .material-hero__divider {
            width: 45px;
            height: 1px;
            background-color: var(--color-text-dark);
            margin-bottom: 35px;
        }

        .material-hero__desc {
            color: var(--color-text-muted);
            font-size: 16px;
        }

        .material-hero__image-wrapper {
            position: relative;
            width: 100%;
        }

        .material-hero__img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

        /* ==========================================================================
           3. CORE APPLICATIONS (核心应用四栏网格)
           ========================================================================== */
        .applications-section {
            padding: 60px 0 100px 0;
        }

        .applications-section__tag {
            text-align: center;
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 4px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .applications-section__divider {
            width: 30px;
            height: 1px;
            background-color: var(--color-text-dark);
            margin: 0 auto 50px auto;
        }

        .applications-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .app-card {
            display: flex;
            flex-direction: column;
        }

        .app-card__image-container {
            width: 100%;
            aspect-ratio: 1 / 1; /* 完美的正方形网格 */
            overflow: hidden;
            margin-bottom: 25px;
        }

        .app-card__img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .app-card__number {
            font-size: 20px;
            color: var(--color-text-muted);
            text-decoration: underline;
            margin-bottom: 5px;
        }

        .app-card__title {
            font-size: 20px;
            font-weight: 400;
            text-transform: uppercase;
            line-height: 1.3;
            margin-bottom: 5px;
            min-height: 52px; /* 确保标题换行时段落依然对齐 */
        }

        .app-card__desc {
            color: var(--color-text-muted);
            font-size: 14px;
            line-height: 1.5;
        }

        /* ==========================================================================
           4. THE RESYSTA ADVANTAGE (核心优势：多重型材展示 & B2B优势列表)
           ========================================================================== */
        .advantage-section {
            padding: 40px 0 100px 0;
        }

        .advantage-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .advantage-section__showcase img {
            width: 100%;
            height: auto;
            display: block;
        }

        .advantage-content__title {
            font-size: 36px;
            font-weight: 400;
            text-transform: uppercase;
            margin-bottom: 40px;
        }

        /* B2B 优势列表架构 */
        .advantage-list {
            display: flex;
            flex-direction: column;
        }

        .advantage-item {
            display: flex;
            align-items: flex-start;
            padding: 24px 0;
            border-bottom: 1px solid #e5e7e5;
        }

        .advantage-item:first-child {
            padding-top: 0;
        }

        .advantage-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        /* 外圈圆环容器 (高度复用制造页面的规范) */
        .service-icon-container {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--color-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-right: 24px;
        }

        .advantage-item__text {
            flex-grow: 1;
            margin-left: 20px;
        }

        .advantage-item__label {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .advantage-item__desc {
            color: var(--color-text-muted);
            font-size: 14px;
            line-height: 1.5;
        }

        /* ==========================================================================
           5. CSS MASK VECTOR ICONS (精细剥离外圈路径 + 2倍速饱满放大)
           ========================================================================== */
        /* 水滴图标 - 100% Waterproof */
        .icon-waterproof {
            display: inline-block;
            width: 60px;
            height: 60px;
            /* 此时背景色控制整个图标（圆盘）的颜色 */
            background-color: #1b4332;

            /* 🌟 利用 SVG 的 fill-rule="evenodd" 算法，在一层路径内同时画出外圈和掏空的水滴 */
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 283.5'%3E%3Cpath fill-rule='evenodd' fill='black' d='M141.75,21.75 C75.48,21.75 21.75,75.48 21.75,141.75 C21.75,208.02 75.48,261.75 141.75,261.75 C208.02,261.75 261.75,208.02 261.75,141.75 C261.75,75.48 208.02,21.75 141.75,21.75 Z M141.8,70 C141.8,70 196.8,129.3 196.8,165.3 C196.8,195.7 172.2,220.3 141.8,220.3 C111.4,220.3 86.8,195.7 86.8,165.3 C86.8,129.3 141.8,70 141.8,70 Z M141.8,87.9 C134.3,96.8 99.6,139.5 99.6,164.6 C99.6,187.9 118.4,206.8 141.8,206.8 C165.2,206.8 184,187.9 184,164.6 C184,139.5 149.3,96.8 141.8,87.9 Z'/%3E%3C/svg%3E");

            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
        }

.icon-eco {
    display: block;
    width: 70px;  /* 精准对接卡片内部或右侧 Advantage 列表的标准尺寸 */
    height: 70px;
    margin-left: 2px;

    /* 使用您品牌的深绿 #1B4332 作为底色 */
    background-color: #1b4332;

    /* 🌟 完全采用您提供的高级 AI 原始路径进行复合裁剪，白线粗细、圆盘边缘绝对丝滑 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 283.5'%3E%3Cpath fill='black' d='M138,13c70.9-3.3,133.5,60,134.3,130.1c0.8,69.7-57.7,131.4-126.5,132.9c-78.6,1.7-133.9-60.9-135.6-126.6 C8.2,74.3,67.3,12.2,138,13z M195.6,145.5c-0.9-4.8-1.3-10.6-3.1-15.9c-3.1-8.9-6.7-17.7-11.1-26.1c-4.8-9.2-9.7-18.6-16.2-26.6 c-8.5-10.4-11.9-10.5-22.6-3.1c-17.5,12.1-36,23.5-46.3,43.2c-4.6,8.9-8.3,18.6-10.7,28.3c-3.1,12.7,2.8,24.5,8.5,35.2 c4.3,8.1,11,15.1,20.3,19.1c7.3,3.2,14.5,7.6,17.5,16.1c1.2,3.5-0.6,9.8,5.6,9.2c5.8-0.6,3.9-6.8,4.9-10.7c0.2-0.9-0.1-2.1,0.3-2.7 c1.5-2,2.9-4.5,5-5.6c4.9-2.7,10.5-4.2,15.3-7C183.1,187.3,193.2,169.3,195.6,145.5z'/%3E%3Cpath fill='none' d='M195.6,145.5c-2.4,23.8-12.5,41.8-32.6,53.5c-4.8,2.8-10.4,4.3-15.3,7c-2.1,1.1-3.5,3.6-5,5.6 c-0.5,0.6-0.1,1.8-0.3,2.7c-1,3.9,0.9,10.1-4.9,10.7c-6.1,0.6-4.3-5.7-5.6-9.2c-3-8.5-10.2-13-17.5-16.1c-9.4-4.1-16-11-20.3-19.1 c-5.7-10.7-11.5-22.5-8.5-35.2c2.4-9.8,6.1-19.4,10.7-28.3c10.2-19.7,28.8-31,46.3-43.2c10.7-7.4,14.2-7.3,22.6,3.1 c6.5,8,11.4,17.4,16.2,26.6c4.3,8.4,7.9,17.2,11.1,26.1C194.3,134.9,194.7,140.7,195.6,145.5z M141.3,160.1c0.9,0.1,1.8,0.2,2.7,0.4 c3-1.7,5.8-3.6,8.9-4.9c1.9-0.8,4.2-0.6,6.4-0.8c-0.3,2.9,0.3,6.4-1.1,8.6c-1.7,2.7-4.8,4.9-7.8,6.3c-7.7,3.7-8.9,10.4-9,17.8 c0,5,3.2,7.3,7.7,6.3c14.3-3.2,29.1-16,32.2-31c4-19.3,1-37.6-8.5-54.8c-3.5-6.3-7.4-12.5-11.9-18.1c-3.5-4.3-7.9-7.6-14.1-3.2 c-8.1,5.8-17,10.5-24.8,16.7c-9.4,7.5-18.9,16.2-21.6,28.1c-4.7,20.9-5.3,42,13.7,57.5c3.5,2.8,8.5,6.1,12.3,5.6 c5.7-0.8,5.2-7.2,5.1-12c-0.1-10.3-1.1-20.6-0.6-30.8c0.3-5.7,2.7-11.3,4.6-16.8c1.5-4.4,4.3-8.5,5.5-12.9c1.4-4.9,2.8-10.6,8.6-9.3 c5.4,1.3,3.9,7.3,3.1,11.8c-0.1,0.7-0.3,1.4-0.5,2c-3.1,6.8-6.7,13.4-9.2,20.4C141.5,151,141.8,155.7,141.3,160.1z'/%3E%3Cpath fill='black' d='M141.3,160.1c0.5-4.4,0.2-9.1,1.7-13.1c2.5-7,6.1-13.6,9.2-20.4c0.3-0.6,0.4-1.3,0.5-2c0.8-4.5,2.3-10.5-3.1-11.8 c-5.7-1.3-7.2,4.4-8.6,9.3c-1.2,4.5-4,8.5-5.5,12.9c-1.9,5.5-4.3,11.2-4.6,16.8c-0.5,10.2,0.5,20.5,0.6,30.8 c0.1,4.8,0.6,11.2-5.1,12c-3.8,0.5-8.8-2.7-12.3-5.6c-19-15.6-18.4-36.6-13.7-57.5c2.7-11.9,12.1-20.6,21.6-28.1 c7.8-6.2,16.7-10.9,24.8-16.7c6.2-4.4,10.6-1.1,14.1,3.2c4.5,5.6,8.5,11.8,11.9,18.1c9.4,17.2,12.5,35.5,8.5,54.8 c-3.1,15-17.9,27.8-32.2,31c-4.5,1-7.7-1.3-7.7-6.3c0.1-7.3,1.3-14.1,9-17.8c3-1.4,6.1-3.6,7.8-6.3c1.4-2.2,0.8-5.7,1.1-8.6 c-2.1,0.2-4.5,0-6.4,0.8c-3.1,1.3-5.9,3.2-8.9,4.9C143.1,160.4,142.2,160.2,141.3,160.1z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}


        /* 太阳图标 - UV & Weather Resilient */
.icon-uv {
    display: block;
    width: 75px;  /* 精准对接卡片内部或右侧 Advantage 列表的标准尺寸 */
    height: 75px;

    /* 使用品牌深绿 #1B4332 作为底色 */
    background-color: #1b4332;

    /* 🌟 核心重构：彻底消除断裂与折弯。斜向四个角度（45°, 135°, 225°, 315°）的圆角胶囊完全镜像对称 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 283.5'%3E%3Cpath fill-rule='evenodd' fill='black' d='M141.75,21.75 C75.48,21.75 21.75,75.48 21.75,141.75 C21.75,208.02 75.48,261.75 141.75,261.75 C208.02,261.75 261.75,208.02 261.75,141.75 C261.75,75.48 208.02,21.75 141.75,21.75 Z M141.75,96.75 C116.9,96.75 96.75,116.9 96.75,141.75 C96.75,166.6 116.9,186.75 141.75,186.75 C166.6,186.75 186.75,166.6 186.75,141.75 C186.75,116.9 166.6,96.75 141.75,96.75 Z M141.75,111.75 C158.32,111.75 171.75,125.18 171.75,141.75 C171.75,158.32 158.32,171.75 141.75,171.75 C125.18,171.75 111.75,158.32 111.75,141.75 C111.75,125.18 125.18,111.75 141.75,111.75 Z M136.75,46.75 C136.75,43.99 139,41.75 141.75,41.75 C144.5,41.75 146.75,43.99 146.75,46.75 L146.75,81.75 C146.75,84.51 144.5,86.75 141.75,86.75 C139,86.75 136.75,84.51 136.75,81.75 Z M136.75,201.75 C136.75,198.99 139,196.75 141.75,196.75 C144.5,196.75 146.75,198.99 146.75,201.75 L146.75,236.75 C146.75,239.51 144.5,241.75 141.75,241.75 C139,241.75 136.75,239.51 136.75,236.75 Z M46.75,136.75 L81.75,136.75 C84.51,136.75 86.75,139 86.75,141.75 C86.75,144.5 84.51,146.75 81.75,146.75 L46.75,146.75 C43.99,146.75 41.75,144.5 41.75,141.75 C41.75,139 43.99,136.75 46.75,136.75 Z M196.75,141.75 C196.75,139 198.99,136.75 201.75,136.75 L236.75,136.75 C239.51,136.75 241.75,139 241.75,141.75 C241.75,144.5 239.51,146.75 236.75,146.75 L201.75,146.75 C198.99,146.75 196.75,144.5 196.75,141.75 Z M74.47,74.47 C76.42,72.52 79.59,72.52 81.54,74.47 L106.29,99.22 C108.24,101.17 108.24,104.34 106.29,106.29 C104.34,108.24 101.17,108.24 99.22,106.29 L74.47,81.54 C72.52,79.59 72.52,76.42 74.47,74.47 Z M177.21,177.21 C179.16,175.26 182.33,175.26 184.28,177.21 L209.03,201.96 C210.98,203.91 210.98,207.08 209.03,209.03 C207.08,210.98 203.91,210.98 201.96,209.03 L177.21,184.28 C175.26,182.33 175.26,179.16 177.21,177.21 Z M201.96,74.47 C203.91,72.52 207.08,72.52 209.03,74.47 L209.03,74.47 C210.98,76.42 210.98,79.59 209.03,81.54 L184.28,106.29 C182.33,108.24 179.16,108.24 177.21,106.29 C175.26,104.34 175.26,101.17 177.21,99.22 L201.96,74.47 Z M74.47,209.03 C72.52,207.08 72.52,203.91 74.47,201.96 L99.22,177.21 C101.17,175.26 104.34,175.26 106.29,177.21 C108.24,179.16 108.24,182.33 106.29,184.28 L81.54,209.03 C79.59,210.98 76.42,210.98 74.47,209.03 Z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.icon-b2b {
    display: block;
    width: 73px;  /* 精准对接卡片内部或右侧 Advantage 列表的标准尺寸 */
    height: 73px;

    /* 使用您品牌的深绿 #1B4332 作为底色 */
    background-color: #1b4332;

    /* 🌟 100% 还原：完全内联您提供的 AI 导出的经纬线切割路径，确保网格间距和弧度绝对标准 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 283.5'%3E%3Cpath fill='black' d='M140.6,282.4c-76-0.2-137-61.6-136.8-137.8C4.1,68.4,65.3,7.5,142.4,8.7c77.8,1.2,135.8,63.9,135.1,138 C276.9,223.1,215.7,282.4,140.6,282.4z M153.9,184.6c1,0.1,1.8,0.2,2.7,0.2c14.2,0,28.3-0.1,42.5,0.1c2.5,0,3.3-0.8,3.8-3.1 c5.5-24,5.3-48,0.5-72c-0.4-2.2-1.3-2.9-3.6-2.9c-14.3,0.1-28.5,0-42.8,0.1c-1,0-2.1,0.1-3.1,0.2 C153.9,133.1,153.9,158.7,153.9,184.6z M134.1,106.9c-0.5-0.2-0.8-0.3-1.1-0.3c-15.2,0-30.5,0-45.7-0.1c-1.9,0-2.2,1-2.6,2.5 c-5,24.2-5.1,48.4,0.5,72.6c0.5,2.2,1.4,2.9,3.7,2.9c14-0.1,28.1-0.1,42.1-0.1c1,0,2.1-0.1,3.1-0.2 C134.1,158.2,134.1,132.5,134.1,106.9z M64.4,106.7c0,0-0.4-0.2-0.8-0.2c-10.7,0-21.4,0-32.1-0.1c-2.1,0-2.4,1.3-2.9,2.8 c-7.7,24.2-7.7,48.4-0.1,72.6c0.7,2.2,1.6,3.1,4,3c9.2-0.1,18.4-0.1,27.5-0.1c1.8,0,3.6,0,5,0c-1.2-13.3-3.1-26.1-3.2-39 C61.8,132.8,63.5,119.8,64.4,106.7z M222.1,184.4c9.8,0,19,0.1,28.2-0.1c0.9,0,2.2-1.5,2.5-2.6c7.9-24.3,7.7-48.6,0-72.8 c-0.6-1.9-1.5-2.7-3.6-2.7c-7.9,0.1-15.8,0-23.6,0.1c-0.8,0-1.6,0.2-2.7,0.3C227.4,132.5,227.9,158.3,222.1,184.4z M153.8,86.9 c14.6,0,28.8,0,43.3,0c-0.2-0.8-0.3-1.3-0.5-1.8c-4.2-12.3-9.7-24-17.4-34.5c-5.1-7.1-11-13.3-18.6-17.8c-2.1-1.2-4.4-2.1-6.9-3.3 C153.8,49,153.8,67.8,153.8,86.9z M134.1,87c0-19.3,0-38.1,0-57c-15.5,3.2-41.6,38-42.9,57C105.5,87,119.7,87,134.1,87z M91.5,204.2 c3.8,8.2,7.1,15.8,10.9,23.1c6.2,11.6,13.6,22.3,24.6,30c2.1,1.5,4.5,2.6,7.1,4.1c0-19.6,0-38.3,0-57.2 C120.1,204.2,106.3,204.2,91.5,204.2z M153.9,204.3c0,19,0,37.8,0,57.5c23.2-12.9,32.8-34.8,42.3-57.5 C181.8,204.3,168,204.3,153.9,204.3z M38.5,204.1c14,23.6,32.9,40.2,57.5,50.2c-1.3-2.5-3-4.8-4.5-7.1c-8-12.5-14.2-25.9-18.9-40 c-0.4-1.2-1.6-3-2.5-3C59.9,204,49.6,204.1,38.5,204.1z M38.5,87.5c10.3,0,19.6-0.1,29,0.1c2.3,0,3.2-0.8,3.8-2.9 c3.6-12,8.4-23.5,14.7-34.4c2.3-4,4.9-7.8,7.3-11.7C69.6,48.5,51.7,64.7,38.5,87.5z M195.2,249.2c20.3-10.3,36.1-25,47.7-45.1 c-8.3,0-15.7,0.1-23.2-0.1c-2.4-0.1-3.6,0.7-4.3,3.1c-3.9,12.2-9.1,23.8-15.7,34.8C198.2,244.3,196.7,246.7,195.2,249.2z M198.4,43.3c8.2,13.2,14.1,27.3,18.8,41.9c0.3,0.9,1.9,1.9,2.9,2c6.4,0.2,12.7,0.1,19.1,0.1c1,0,2-0.1,3.5-0.3 C231.6,68.1,217.1,53.7,198.4,43.3z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}


        /* ==========================================================================
           6. BOTTOM CTA SECTION (底部品味留白横幅)
           ========================================================================== */
        .material-cta {
            background-color: #8fa89b;      /* 完美还原设计稿的灰绿质感色底 */
            padding: 80px 0;
            text-align: center;
        }

        .material-cta__title {
            color: var(--color-bg-white);
            font-size: 32px;
            font-weight: 500;
            line-height: 1.3;
            margin-bottom: 35px;
            letter-spacing: 0.2px;
        }

        /* 精准映射 B2B 决策层表单调动按钮 */
        .material-cta__btn {
            display: inline-flex;
            align-items: center;
            background-color: var(--color-primary);
            color: var(--color-bg-white);
            text-decoration: none;
            padding: 16px 42px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .material-cta__btn:hover {
            background-color: #112a20;
        }

        .material-cta__btn-arrow {
            margin-left: 15px;
            font-size: 16px;
            font-weight: 300;
        }

        /* ==========================================================================
           7. RESPONSIVE DESIGN (响应式断点)
           ========================================================================== */
        @media (max-width: 1024px) {
            .applications-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;
            }
            .material-hero__title { font-size: 42px; }
            .advantage-grid { grid-template-columns: 1fr; gap: 50px; }
        }

        @media (max-width: 768px) {
            .material-hero__grid { grid-template-columns: 1fr; gap: 40px; }
            .applications-grid { grid-template-columns: 1fr; }
            .material-cta__title { font-size: 26px; }
        }