/* 基础样式重置 */
        body, h1, p {
            margin: 0;
            padding: 0;
            box-sizing: border-box; 
        }

        /* Banner 容器 */
        .banner-container {
            position: relative;
            width: 100%;
            /* 【PC/默认最小高度】：保持不变 */
            min-height: 250px; 
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            color: #ffffff; 
            overflow: hidden; /* 防止内容溢出 */
        }

        /* 【修改 1：20% 透黑遮罩】伪元素遮罩的基础样式 */
        .banner-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 默认修改为 20% 透明黑色 */
            background-color: rgba(0, 0, 0, 0.3); 
            z-index: 1; /* 确保在图片上，文字下 */
            pointer-events: none;
            transition: background-color 0.3s ease;
        }

        /* 图片标签和 picture 标签的 img */
        .banner-image {
            display: block;
            width: 100%; 
            height: auto; 
            /* 【PC/默认最小高度】：保持不变 */
            min-height: 250px;
            max-height: 600px; 
            object-fit: cover; 
            object-position: center;
        }

        /* 确保 picture 容器和 img 一样工作 */
        picture {
            display: block;
            width: 100%;
            min-height: 250px;
            max-height: 600px;
            overflow: hidden; 
        }

        /* 文字内容区域 */
        .banner-text {
            /* 关键修改 2：水平和垂直居中 */
            position: absolute;
            top: 50%; 
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%); /* 水平垂直居中 */
            z-index: 2; /* 确保文字内容在遮罩层之上 */

            /* 设置文字区域的宽度和内边距 */
            max-width: 70%; /* 调整最大宽度以适应居中布局 */
            padding: 2rem 3%; 

            /* 关键修改 3：文字内容居中对齐 */
            text-align: center;
        }

        .banner-text h1 {
            /* 【字体缩放优化】：使用 clamp() 限制字体最大/最小值 (PC 端) */
            font-size: clamp(24px, 2.5vw, 36px); 
            font-weight: 500; 
            line-height: 1.3;
            margin-bottom: 1rem; 
        }

        .banner-text p {
            /* 【字体缩放优化】：使用 clamp() 限制字体最大/最小值 (PC 端) */
            font-size: clamp(14px, 1.1vw, 18px); 
            line-height: 1.6;
        }

        /* ========== 按钮样式 (PC 端优化) ========== */

        /* 按钮容器，用于排列两个按钮 */
        .banner-buttons {
            display: flex;
            justify-content: center; /* 关键：按钮水平居中 */
            gap: 15px; /* 按钮之间的间距 */
            margin-top: 25px; /* 按钮与文字内容的间距 */
        }

        /* 基础按钮样式 (PC端默认样式) */
        .banner-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 25px;
            
            /* 【PC端按钮字体修改】：使用 clamp() 限制按钮字体大小 */
            font-size: clamp(14px, 0.8vw, 16px);
            
            font-weight: 600;
            text-decoration: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap; /* 防止按钮文字换行 */
        }

        /* 按钮 1: 纯色背景 */
        .btn-primary {
            background-color: #0f403f;
            color: #ffffff;
            border: 2px solid #0f403f;
        }

        .btn-primary:hover {
            background-color: #0c3332;
            border-color: #0c3332;
        }

        /* 按钮 2: 描边 + 半透明底色 */
        .btn-outline-trans {
            /* 为了配合整体美观和居中文案，将描边颜色改为白色以提升对比度 */
            background-color: rgba(255, 255, 255, 0.3); 
            color: #ffffff; /* 文字颜色改为白色，以适应深色背景 */
            border: 2px solid #ffffff; 
            backdrop-filter: blur(2px); 
        }

        .btn-outline-trans:hover {
            background-color: #0f403f;
            color: #ffffff;
            border-color: #0f403f;
        }

        /* ==================== 响应式设计 (手机端) ==================== */

        /* 当屏幕宽度小于 1200px 时 */
        @media (max-width: 1200px) {
            .banner-text h1 {
                font-size: 3vw;
            }
            .banner-text p {
                font-size: 1.5vw;
            }
            .banner-btn {
                font-size: 1.5vw; 
                padding: 10px 20px;
            }
        }

        /* 当屏幕宽度小于 768px (平板和手机) */
        @media (max-width: 768px) {
            /* 【优化 1：消除上下间隙】调整 Banner 容器高度 */
            .banner-container {
                min-height: 75vh;
                max-height: none;
            }

            /* 【优化 2：消除上下间隙】让图片撑满容器 */
            .banner-image {
                height: 100%;
                min-height: 0; 
                max-height: none;
            }

            /* 【优化 3：消除上下间隙】Picture 容器同步调整 */
            picture {
                height: 100%;
                min-height: 0;
                max-height: none;
            }
            
            /* 移除原有的 30% 遮罩覆盖，统一使用全局 20% 的设置 */

            .banner-text {
                max-width: 90%; /* 手机端使用更大的宽度 */
                padding: 1.5rem 5%;
                /* top: 50% 和 transform: translate(-50%, -50%) 保持居中 */
            }

            .banner-text h1 {
                font-size: 5vw; /* 调整字体大小使其在手机上更清晰 */
            }

            .banner-text p {
                font-size: 3vw;
            }

            .banner-buttons {
                flex-direction: column; /* 手机端按钮改为垂直堆叠 */
                gap: 10px;
                margin-top: 20px;
                justify-content: center; /* 按钮居中，与 flex-direction: column 兼容 */
            }

            .banner-btn {
                font-size: 3.5vw;
                width: 100%; /* 手机端按钮占满宽度 */
                padding: 12px 15px;
            }
        }

        /* 当屏幕宽度小于 480px (手机) */
        @media (max-width: 480px) {
            /* 可以微调高度，让 Banner 占据屏幕更多空间 */
            .banner-container {
                min-height: 50vh; 
            }
            
            .banner-text {
                max-width: 95%; /* 进一步增加宽度 */
            }

            .banner-text h1 {
                font-size: 6vw; /* 确保文字清晰可见 */
            }

            .banner-text p {
                font-size: 3vw;
            }
        }