/* 全局基础样式 */
        body { 
            margin: 0;
            padding: clamp(15px, 4vw, 20px); 
            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #f8f9fa; /* 浅背景突出内容 */
        }
        .hero {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 0;
        }
        .hero h1 {
            font-size: clamp(26px, 5vw, 32px);
            color: #2d3748;
            line-height: 1.2;
            margin: 0 0 20px 0;
            font-weight: 700;
        }
        .hero p {
            font-size: clamp(16px, 3vw, 18px);
            color: #4a5568;
            line-height: 1.7;
            margin: 0 0 30px 0;
            max-width: 800px;
        }

        /* ========== 核心亮点列表（重点优化） ========== */
        .hero-features {
            list-style: none;
            padding: 0;
            margin: 0 0 35px 0;
            display: grid; /* 网格布局，适配多端 */
            gap: 16px; /* 项间距，更透气 */
        }
        .hero-features li {
            padding: 20px 24px;
            background-color: #ffffff; /* 白色卡片突出 */
            border-radius: 12px; /* 圆角更现代 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 轻微阴影提升层级 */
            display: flex;
            align-items: center;
            gap: 16px; /* 图标和文字间距 */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        /* 鼠标悬浮动效，增强交互 */
        .hero-features li:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        }
        /* 图标样式强化 */
        .hero-features li::before {
            content: '';
            font-size: 28px;
            line-height: 1;
            display: block;
            width: 40px;
            text-align: center;
        }
        /* 给每个亮点定制图标背景/样式（强化视觉） */
        .hero-features li:nth-child(1)::before {
            content: '☀';
            color: #ed8936; /* 暖黄色，匹配阳光 */
        }
        .hero-features li:nth-child(2)::before {
            content: '🌧';
            color: #4299e1; /* 蓝色，匹配雨水 */
        }
        .hero-features li:nth-child(3)::before {
            content: '🛡';
            color: #9f7aea; /* 紫色，匹配防护 */
        }
        .hero-features li:nth-child(4)::before {
            content: '🕒';
            color: #38b2ac; /* 青绿色，匹配时间 */
        }
        /* 亮点文字样式 */
        .hero-features li span {
            font-size: clamp(16px, 2.8vw, 18px);
            color: #2d3748;
            font-weight: 500; /* 加粗，突出重点 */
        }

        /* 按钮样式（强化视觉） */
        .recommend-btn {
            padding: 16px 36px;
            font-size: clamp(16px, 2.8vw, 18px);
            background-color: #4299e1;
            color: #fff;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 0 0 30px 0;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(66, 153, 225, 0.25);
        }
        .recommend-btn:hover {
            background-color: #2b6cb0;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(66, 153, 225, 0.35);
        }

        .outdoor-image img {
            max-width: 100%;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }

        /* 手机端适配 */
        @media (max-width: 768px) {
            .hero-features li {
                padding: 16px 20px;
                gap: 12px;
            }
            .hero-features li::before {
                font-size: 24px;
                width: 32px;
            }
            .recommend-btn {
                width: 100%;
                padding: 14px 24px;
            }
            .hero {
                padding: 20px 0;
            }
        }