.hero { 
            min-height: 100vh; 
            height: 100vh; 
            display: flex; 
            align-items: center; 
            position: relative; 
            background: linear-gradient(135deg, #f8fafc 0%, #e7f3ff 50%, #f1f5ff 100%); 
            overflow: hidden; 
            padding-top: 70px; 
        }
        
        .hero::before { 
            content: ''; 
            position: absolute; 
            top: -50%; 
            left: -50%; 
            width: 200%; 
            height: 200%; 
            background: radial-gradient(circle at 20% 80%, rgba(59,130,246,0.1) 0%, transparent 50%), 
                        radial-gradient(circle at 80% 20%, rgba(6,182,212,0.15) 0%, transparent 50%), 
                        radial-gradient(circle at 40% 40%, rgba(139,92,246,0.1) 0%, transparent 50%); 
            animation: backgroundFloat 20s ease-in-out infinite; 
        }
        
        .hero::after { 
            content: ''; 
            position: absolute; 
            inset: 0; 
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="%233b82f6" opacity="0.1"/><circle cx="12" cy="8" r="0.5" fill="%2306b6d4" opacity="0.15"/><circle cx="18" cy="15" r="0.8" fill="%238b5cf6" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>') repeat; 
            animation: dotsFloat 25s infinite linear; 
        }

        /* Hero Decorations */
        .hero-decorations { 
            position: absolute; 
            inset: 0; 
            pointer-events: none; 
            overflow: hidden; 
        }
        
        .decoration-circle { 
            position: absolute; 
            border-radius: 50%; 
            background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(6,182,212,0.1)); 
            animation: float 15s ease-in-out infinite; 
        }
        
        .decoration-circle:nth-child(1) { 
            width: 300px; 
            height: 300px; 
            top: 10%; 
            left: 10%; 
            animation-delay: -2s; 
        }
        
        .decoration-circle:nth-child(2) { 
            width: 200px; 
            height: 200px; 
            top: 60%; 
            right: 10%; 
            animation-delay: -8s; 
            background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(59,130,246,0.12)); 
        }
        
        .decoration-circle:nth-child(3) { 
            width: 150px; 
            height: 150px; 
            top: 20%; 
            right: 25%; 
            animation-delay: -5s; 
        }

        .decoration-triangle { 
            position: absolute; 
            width: 0; 
            height: 0; 
            animation: triangleFloat 18s ease-in-out infinite; 
        }
        
        .decoration-triangle:nth-child(1) { 
            border-left: 40px solid transparent; 
            border-right: 40px solid transparent; 
            border-bottom: 70px solid rgba(59,130,246,0.06); 
            top: 15%; 
            left: 70%; 
            animation-delay: -3s; 
        }
        
        .decoration-triangle:nth-child(2) { 
            border-left: 25px solid transparent; 
            border-right: 25px solid transparent; 
            border-bottom: 45px solid rgba(6,182,212,0.08); 
            top: 70%; 
            left: 20%; 
            animation-delay: -7s; 
        }

        /* Hero Particles */
        .hero-particles { 
            position: absolute; 
            inset: 0; 
            pointer-events: none; 
        }
        
        .particle { 
            position: absolute; 
            width: 4px; 
            height: 4px; 
            background: linear-gradient(45deg, #3b82f6, #06b6d4); 
            border-radius: 50%; 
            animation: particleFloat 12s linear infinite; 
            opacity: 0.6; 
        }
        
        .particle:nth-child(1) { left: 10%; animation-delay: 0s; }
        .particle:nth-child(2) { left: 20%; animation-delay: -2s; }
        .particle:nth-child(3) { left: 30%; animation-delay: -4s; }
        .particle:nth-child(4) { left: 40%; animation-delay: -6s; }
        .particle:nth-child(5) { left: 50%; animation-delay: -8s; }
        .particle:nth-child(6) { left: 60%; animation-delay: -10s; }
        .particle:nth-child(7) { left: 70%; animation-delay: -1s; }
        .particle:nth-child(8) { left: 80%; animation-delay: -3s; }
        .particle:nth-child(9) { left: 90%; animation-delay: -5s; }

        /* Hero Content */
        .hero-content { 
            position: relative; 
            z-index: 10; 
            text-align: center; 
        }
        
        .hero h1 { 
            font-size: 3.5rem; 
            margin-bottom: 1rem; 
            background: linear-gradient(135deg, #3b82f6, #06b6d4, #8b5cf6); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            background-clip: text; 
            font-weight: 800; 
            letter-spacing: -0.02em; 
        }
        
        .hero p { 
            font-size: 1.2rem; 
            margin-bottom: 2rem; 
            color: #64748b; 
            max-width: 600px; 
            margin-left: auto; 
            margin-right: auto; 
        }

        /* Hero Motto */
        .hero-motto { 
            margin: 1.5rem auto 2.5rem; 
            text-align: center; 
            position: relative; 
            z-index: 2; 
        }
        
        .motto-text { 
            background: linear-gradient(135deg, #3b82f6, #06b6d4, #8b5cf6); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            background-clip: text; 
            font-size: 1.3rem; 
            font-weight: 500; 
            letter-spacing: 0.02em; 
            position: relative; 
            padding: 1rem 2rem; 
        }
        
        .motto-text::before { 
            content: ''; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            width: 130%; 
            height: 140%; 
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.1)); 
            border-radius: 20px; 
            z-index: -1; 
            animation: mottoGlow 3s ease-in-out infinite; 
        }
        
        .motto-text strong { 
            font-weight: 700; 
        }

        /* Scroll Indicator */
        .scroll-indicator { 
            position: absolute; 
            bottom: 30px; 
            left: 50%; 
            transform: translateX(-50%); 
            text-align: center; 
            color: #64748b; 
            z-index: 10; 
        }
        
        .scroll-arrow { 
            width: 30px; 
            height: 30px; 
            border: 2px solid #3b82f6; 
            border-radius: 50%; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            animation: bounce 2s infinite; 
            cursor: pointer; 
            transition: all 0.3s ease; 
        }
        
        .scroll-arrow:hover { 
            background: #3b82f6; 
            color: #fff; 
        }
        
        .scroll-arrow::after { 
            content: '↓'; 
            font-size: 1.2rem; 
            font-weight: bold; 
        }

        /* Solution Section - 简化版本 */
        .solution-section { 
            padding: 4rem 0; 
            background: transparent; 
        }
        
        .solution-section h2.section-title { 
            text-align: center;
            font-size: 2rem;
            color: #1e293b;
            margin-bottom: 1.5rem;
            font-weight: 700;
            position: relative;
        }
        
        .solution-section h2.section-title::before {
            display: none !important;
            content: none !important;
        }
        
        .solution-section h2.section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #06b6d4);
            border-radius: 2px;
        }
        
        .solution-section .sub { 
            text-align: center; 
            color: #64748b; 
            margin-top: 1rem;
            margin-bottom: 3rem; 
            font-size: 1rem; 
        }

        /* 对比容器 - 简化布局 */
        .hero-solution { 
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 2rem;
            max-width: 900px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: none;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* 左右面板 */
        .solution-problem,
        .solution-benefit {
            text-align: center;
            padding: 1.5rem;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }

        .solution-problem {
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
        }

        .solution-benefit {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        }

        .solution-problem h3 {
            color: #dc2626;
            font-size: 1.1rem;
            margin-bottom: 1rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .solution-benefit h3 {
            color: #16a34a;
            font-size: 1.1rem;
            margin-bottom: 1rem;
            font-weight: 600;
            white-space: nowrap;
        }

        /* 标签容器 */
        .problem-points,
        .benefit-points {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .problem-point,
        .benefit-point {
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            border: 1px solid;
        }

        .problem-point {
            background: #ffffff;
            color: #dc2626;
            border-color: #fca5a5;
        }

        .benefit-point {
            background: #ffffff;
            color: #16a34a;
            border-color: #86efac;
        }

        /* 中间箭头 */
        .solution-arrow {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .arrow-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #3b82f6, #06b6d4);
            color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .arrow-text {
            font-size: 0.85rem;
            color: #64748b;
            font-weight: 600;
            white-space: nowrap;
        }

        /* Features Section */
        #features.section { 
            background: rgba(255, 255, 255, 0.5) !important; 
        }
        
        #features.section::before {
            background:
                radial-gradient(circle at 80% 20%, rgba(139,92,246,0.04) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(59,130,246,0.03) 0%, transparent 50%) !important;
        }
        
        .features-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
            gap: 2rem; 
            margin-top: 3rem; 
        }
        
        .feature-card { 
            background: rgba(255, 255, 255, 0.9); 
            backdrop-filter: blur(10px);
            padding: 2.5rem 2rem; 
            border-radius: 20px; 
            text-align: center; 
            transition: all 0.3s ease; 
            border: 1px solid rgba(226, 232, 240, 0.6); 
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05); 
            position: relative; 
            overflow: hidden; 
        }
        
        .feature-card::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: -100%; 
            width: 100%; 
            height: 100%; 
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent); 
            transition: left 0.6s ease; 
        }
        
        .feature-card:hover::before { 
            left: 100%; 
        }
        
        .feature-card:hover { 
            transform: translateY(-8px); 
            box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15); 
            border-color: #3b82f6; 
        }
        
        .feature-icon { 
            width: 70px; 
            height: 70px; 
            background: linear-gradient(135deg, #3b82f6, #06b6d4); 
            border-radius: 20px; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            margin-bottom: 1.5rem; 
            font-size: 1.8rem; 
            color: #fff; 
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); 
        }
        
        .feature-card h3 { 
            font-size: 1.3rem; 
            margin-bottom: 1rem; 
            color: #1e293b; 
            font-weight: 600; 
        }
        
        .feature-card p { 
            color: #64748b; 
            line-height: 1.6; 
        }

        /* Membership Cards */
        .membership-cards { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
            gap: 2rem; 
            margin-top: 3rem; 
        }
        
        .membership-card { 
            background: #fff; 
            padding: 3rem 2.5rem; 
            border-radius: 25px; 
            border: 2px solid #e2e8f0; 
            position: relative; 
            transition: all 0.3s ease; 
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05); 
        }
        
        .membership-card.premium { 
            border-color: #3b82f6; 
            box-shadow: 0 8px 40px rgba(59, 130, 246, 0.15); 
            transform: scale(1.02); 
        }
        
        .membership-card.premium::before { 
            content: '推荐'; 
            position: absolute; 
            top: -1px; 
            right: 20px; 
            background: linear-gradient(135deg, #3b82f6, #06b6d4); 
            color: #fff; 
            padding: 8px 20px; 
            border-radius: 0 0 15px 15px; 
            font-size: 0.9rem; 
            font-weight: 600; 
        }
        
        .membership-card:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2); 
        }
        
        .membership-card.premium:hover { 
            transform: translateY(-5px) scale(1.02); 
        }
        
        .membership-title { 
            font-size: 1.8rem; 
            color: #1e293b; 
            margin-bottom: 1.5rem; 
            text-align: center; 
            font-weight: 700; 
        }
        
        .membership-features { 
            list-style: none; 
            margin-bottom: 2.5rem; 
        }
        
        .membership-features li { 
            padding: 0.8rem 0; 
            position: relative; 
            padding-left: 2rem; 
            color: #475569; 
        }
        
        .membership-features li::before { 
            content: '✓'; 
            position: absolute; 
            left: 0; 
            color: #10b981; 
            font-weight: bold; 
            font-size: 1.1rem; 
        }

        /* Cases Grid */
        .cases-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
            gap: 2rem; 
            margin-top: 3rem; 
        }
        
        .case-item { 
            background: #fff; 
            border-radius: 20px; 
            overflow: hidden; 
            transition: all 0.3s ease; 
            border: 1px solid #e2e8f0; 
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05); 
            position: relative; 
        }
        
        .case-item::before { 
            content: ''; 
            position: absolute; 
            inset: 0; 
            background: linear-gradient(135deg, transparent, rgba(59, 130, 246, 0.02), transparent, rgba(139, 92, 246, 0.02), transparent); 
            opacity: 0; 
            transition: opacity 0.3s ease; 
        }
        
        .case-item:hover::before { 
            opacity: 1; 
        }
        
        .case-item:hover { 
            transform: translateY(-8px); 
            box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15); 
        }
        
        .case-image { 
            width: 100%; 
            min-height: 220px; 
            background: linear-gradient(135deg, #e0f2fe, #f0f9ff, #e7f3ff); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 1.1rem; 
            color: #3b82f6; 
            font-weight: 600; 
            border-bottom: 1px solid #e2e8f0; 
            position: relative; 
            overflow: hidden; 
        }
        
        .case-image img { 
            max-width: 100%; 
            max-height: 300px; 
            object-fit: contain; 
            object-position: center; 
            transition: all 0.3s ease; 
            display: block; 
        }
        
        .case-item:hover .case-image img { 
            transform: scale(1.02); 
        }
        
        .case-image:has(img) { 
            min-height: 250px; 
            padding: 10px; 
        }
        
        .case-image img[src=""], .case-image img:not([src]) { 
            display: none; 
        }
        
        .case-image-placeholder { 
            position: absolute; 
            inset: auto; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: #64748b; 
            font-size: 0.9rem; 
            opacity: 0.7; 
            text-align: center; 
            pointer-events: none; 
        }
        
        .case-content { 
            padding: 2rem; 
        }
        
        .case-content h3 { 
            color: #1e293b; 
            margin-bottom: 1rem; 
            font-weight: 600; 
        }
        
        .case-content p { 
            color: #64748b; 
            line-height: 1.6; 
        }

        /* CTA Buttons */
        .cta-buttons { 
            display: flex; 
            gap: 1rem; 
            justify-content: center; 
            align-items: center; 
            margin-bottom: 3rem; 
            flex-wrap: wrap; 
        }

        /* Footer */
        .footer { 
            background: linear-gradient(135deg, #1e293b, #334155); 
            padding: 3rem 0; 
            text-align: center; 
            color: #fff; 
            position: relative; 
            overflow: hidden; 
        }
        
        .footer::before { 
            content: ''; 
            position: absolute; 
            inset: 0; 
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="footerPattern" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%2306b6d4" opacity="0.2"/><circle cx="12.5" cy="12.5" r="0.5" fill="%233b82f6" opacity="0.15"/><circle cx="37.5" cy="37.5" r="0.8" fill="%2306b6d4" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23footerPattern)"/></svg>') repeat; 
            animation: footerFloat 20s linear infinite; 
        }
        
        .footer .container { 
            position: relative; 
            z-index: 2; 
        }
        
        .footer p { 
            color: #cbd5e1; 
        }
        
        .footer p:last-child { 
            color: #06b6d4; 
            font-weight: 500; 
        }

        /* 淡入动画 */
        .fade-in { 
            animation: fadeInUp 0.6s ease both; 
        }
        
        @keyframes fadeInUp {
            from { 
                opacity: 0; 
                transform: translateY(10px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }

        /* Animations */
        @keyframes backgroundFloat { 
            0%, 100% { transform: rotate(0) scale(1); } 
            25% { transform: rotate(1deg) scale(1.02); } 
            50% { transform: rotate(0) scale(1.05); } 
            75% { transform: rotate(-1deg) scale(1.02); } 
        }
        
        @keyframes dotsFloat { 
            0% { transform: translateY(0) translateX(0); } 
            33% { transform: translateY(-10px) translateX(5px); } 
            66% { transform: translateY(5px) translateX(-5px); } 
            100% { transform: translateY(0) translateX(0); } 
        }
        
        @keyframes float { 
            0%, 100% { transform: translateY(0) translateX(0); } 
            25% { transform: translateY(-20px) translateX(10px); } 
            50% { transform: translateY(-10px) translateX(-15px); } 
            75% { transform: translateY(-30px) translateX(5px); } 
        }
        
        @keyframes triangleFloat { 
            0%, 100% { transform: translateY(0) rotate(0); } 
            33% { transform: translateY(-15px) rotate(5deg); } 
            66% { transform: translateY(10px) rotate(-3deg); } 
        }
        
        @keyframes particleFloat { 
            0% { transform: translateY(100vh) rotate(0); opacity: 0; } 
            10%, 90% { opacity: 0.6; } 
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; } 
        }
        
        @keyframes mottoGlow { 
            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 
            50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); } 
        }
        
        @keyframes bounce { 
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 
            40% { transform: translateY(-10px); } 
            60% { transform: translateY(-5px); } 
        }
        
        @keyframes footerFloat { 
            0% { transform: translateX(0); } 
            100% { transform: translateX(50px); } 
        }

        /* Responsive Design - 优化移动端对比布局 */
        @media (max-width: 768px) {
            .hero { 
                min-height: 100vh; 
                height: 100vh; 
                padding-top: 85px; 
                padding-bottom: 2rem; 
            }
            
            .hero h1 { 
                font-size: 2.5rem; 
                line-height: 1.2; 
            }
            
            .hero p { 
                font-size: 1.1rem; 
                margin-bottom: 1.5rem; 
                padding: 0 1rem; 
            }
            
            /* 移动端去掉标语背景 */
            .motto-text::before { 
                display: none; 
            }
            
            .motto-text {
                font-size: 1.1rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0.8rem 1rem;
            }
            
            .cta-buttons { 
                flex-direction: column; 
                gap: 1rem;
                width: 100%;
                align-items: stretch;
            }
            
            .cta-button {
                width: 100%;
                max-width: 280px;
                margin: 0 auto;
                text-align: center;
            }
            
            .solution-section {
                padding: 3rem 0;
            }

            .solution-section .section-title {
                font-size: 1.6rem;
            }

            /* 移动端优劣势对比 - 保持一行显示 */
            .hero-solution {
                grid-template-columns: 1fr auto 1fr;
                gap: 0.8rem;
                padding: 1.2rem;
                margin: 0 0.5rem;
                border-radius: 12px;
            }

            .solution-problem,
            .solution-benefit {
                padding: 1rem 0.8rem;
                min-width: 0; /* 允许收缩 */
            }

            .solution-problem h3,
            .solution-benefit h3 {
                font-size: 0.9rem;
                margin-bottom: 0.8rem;
                line-height: 1.2;
                white-space: normal; /* 允许换行 */
            }

            .solution-arrow {
                flex-direction: column;
                gap: 0.3rem;
                min-width: 50px;
            }

            .arrow-icon {
                width: 36px;
                height: 36px;
                font-size: 1.1rem;
            }

            .arrow-text {
                font-size: 0.7rem;
                text-align: center;
            }

            .problem-points,
            .benefit-points {
                gap: 0.4rem;
            }

            .problem-point,
            .benefit-point {
                padding: 0.4rem 0.6rem;
                font-size: 0.75rem;
                border-radius: 6px;
            }
        }

        @media (max-width: 480px) {
            .hero h1 { 
                font-size: 2rem; 
                margin-bottom: 0.8rem; 
                line-height: 1.1; 
            }
            
            .hero p { 
                font-size: 1rem; 
                margin-bottom: 1rem; 
                line-height: 1.4; 
                padding: 0 0.5rem; 
            }
            
            .motto-text {
                font-size: 1rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0.6rem 0.8rem;
            }
            
            /* 超小屏幕进一步优化 */
            .hero-solution {
                gap: 0.6rem;
                padding: 1rem 0.8rem;
                margin: 0 0.3rem;
            }

            .solution-problem,
            .solution-benefit {
                padding: 0.8rem 0.6rem;
            }

            .solution-problem h3,
            .solution-benefit h3 {
                font-size: 0.85rem;
                margin-bottom: 0.6rem;
            }

            .arrow-icon {
                width: 32px;
                height: 32px;
                font-size: 1rem;
            }

            .arrow-text {
                font-size: 0.65rem;
            }

            .problem-point,
            .benefit-point {
                padding: 0.3rem 0.5rem;
                font-size: 0.7rem;
            }

            .solution-section .section-title { 
                font-size: 1.4rem; 
            }
        }

        @media (max-width: 375px) {
            .motto-text {
                font-size: 0.9rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0.5rem 0.6rem;
            }
            
            /* iPhone SE 及类似尺寸优化 */
            .hero-solution {
                gap: 0.5rem;
                padding: 0.8rem 0.6rem;
                margin: 0 0.2rem;
            }

            .solution-problem,
            .solution-benefit {
                padding: 0.6rem 0.4rem;
            }

            .solution-problem h3,
            .solution-benefit h3 {
                font-size: 0.8rem;
                margin-bottom: 0.5rem;
                line-height: 1.1;
            }

            .arrow-icon {
                width: 28px;
                height: 28px;
                font-size: 0.9rem;
            }

            .arrow-text {
                font-size: 0.6rem;
            }

            .problem-point,
            .benefit-point {
                padding: 0.25rem 0.4rem;
                font-size: 0.65rem;
                line-height: 1.2;
            }
        }

        @media (max-width: 320px) {
            /* 最小屏幕尺寸优化 */
            .hero h1 { 
                font-size: 1.8rem; 
            }
            
            .hero p { 
                font-size: 0.9rem; 
                padding: 0 0.3rem; 
            }
            
            .motto-text {
                font-size: 0.8rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0.4rem 0.5rem;
            }
            
            .hero-solution { 
                gap: 0.4rem;
                padding: 0.7rem 0.5rem; 
                margin: 0 0.1rem;
                border-radius: 10px;
            }
            
            .solution-problem,
            .solution-benefit { 
                padding: 0.5rem 0.3rem;
            }
            
            .solution-problem h3, 
            .solution-benefit h3 { 
                font-size: 0.75rem; 
                margin-bottom: 0.4rem;
                line-height: 1.1; 
            }
            
            .arrow-icon { 
                width: 26px;
                height: 26px;
                font-size: 0.85rem; 
            }

            .arrow-text {
                font-size: 0.55rem;
                line-height: 1.1;
            }
            
            .problem-point, 
            .benefit-point { 
                font-size: 0.6rem; 
                padding: 0.2rem 0.3rem; 
                line-height: 1.1;
            }
            
            .solution-section .section-title { 
                font-size: 1.25rem; 
            }
        }