:root {
            --primary: #1E88E5;
            --primary-dark: #0D47A1;
            --secondary: #00BCD4;
            --accent: #FF5722;
            --success: #4CAF50;
            --warning: #FFC107;
            --danger: #F44336;
            --dark: #1A237E;
            --light: #E3F2FD;
            --gray: #5D6979;
            --gray-light: #E8ECF1;
            --border-radius: 16px;
            --shadow: 0 12px 36px rgba(30, 136, 229, 0.12);
            --shadow-hover: 0 20px 50px rgba(30, 136, 229, 0.2);
            /* 明确指定过渡属性，避免 all 触发无关属性的重排开销 */
            --transition: color .3s ease, background-color .3s ease,
                          border-color .3s ease, box-shadow .3s ease,
                          transform .3s ease, opacity .3s ease;
            --gradient-primary: linear-gradient(135deg, var(--primary), var(--secondary));
            --gradient-dark: linear-gradient(135deg, var(--primary-dark), var(--dark));
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 表单控件默认不继承页面字体，统一重置，避免按钮文字落到 Arial */
        button,
        input,
        select,
        textarea {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            color: inherit;
        }
        
        button {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
        }
        
        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.7;
            color: var(--dark);
            background-color: #FAFCFE;
            overflow-x: hidden;
        }
        
        .container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        section {
            padding: 100px 0;
        }
        
        /* 导航栏 - 全新设计 */
        header {
            background-color: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 6px 25px rgba(30, 136, 229, 0.08);
            border-bottom: 1px solid rgba(30, 136, 229, 0.1);
            transition: box-shadow 0.3s ease, background-color 0.3s ease;
        }

        /* 滚动后收紧内边距，navbar 承担实际高度变化 */
        .header-scrolled {
            box-shadow: 0 8px 30px rgba(30, 136, 229, 0.14);
        }

        .header-scrolled .navbar {
            padding: 11px 0;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding: 20px 0;
            transition: padding 0.3s ease;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 800;
            font-size: 1.35rem;
            color: var(--primary-dark);
            text-decoration: none;
            transition: var(--transition);
            white-space: nowrap;
        }

        .logo-icon {
            background: var(--gradient-primary);
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.4rem;
            transition: var(--transition);
            flex-shrink: 0;
            overflow: hidden;
        }

        /* logo.png 原始尺寸 55x55，需缩放到容器内，避免溢出 */
        .logo-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .logo-text {
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: -0.2px;
            line-height: 1.2;
        }
        
        .logo:hover .logo-icon {
            transform: rotate(10deg) scale(1.05);
        }
        
        .nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }
        
        .nav-links a {
            color: var(--dark);
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: var(--transition);
            position: relative;
            padding: 8px 0;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: var(--gradient-primary);
            border-radius: 3px;
            transition: width 0.4s ease;
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        
        .nav-cta {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            white-space: nowrap;
            flex-shrink: 0;
            box-shadow: 0 8px 25px rgba(30, 136, 229, 0.3);
        }
        
        .nav-cta:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 35px rgba(30, 136, 229, 0.4);
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.8rem;
            color: var(--primary-dark);
            cursor: pointer;
            position: relative;
            z-index: 1001;
            flex-shrink: 0;
            width: 42px;
            height: 42px;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            transition: var(--transition);
        }
        .mobile-menu-btn:hover {
            background: #EAF4FD;
        }
        /* 英雄区域 - 全新华丽设计 */
        .hero {
            background: linear-gradient(145deg, #E3F2FD 0%, #F5FAFF 30%, #FFFFFF 100%);
            padding-top: 160px;
            padding-bottom: 120px;
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: -300px;
            right: -300px;
            width: 900px;
            height: 900px;
            background: radial-gradient(circle, rgba(30, 136, 229, 0.08) 0%, rgba(30, 136, 229, 0) 70%);
            border-radius: 50%;
            z-index: 0;
        }
        
        .hero::after {
            content: '';
            position: absolute;
            bottom: -200px;
            left: -200px;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(0, 188, 212, 0.06) 0%, rgba(0, 188, 212, 0) 70%);
            border-radius: 50%;
            z-index: 0;
        }
        
        .hero-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 1;
            gap: 60px;
        }
        
        .hero-text {
            flex: 1;
            max-width: 620px;
        }
        
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(30, 136, 229, 0.12);
            color: var(--primary);
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.95rem;
            margin-bottom: 30px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(30, 136, 229, 0.15);
        }
        
        .hero-title {
            font-size: 4rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 28px;
            color: var(--dark);
            letter-spacing: -0.5px;
        }
        
        .hero-title span {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
        }
        
        .hero-title span::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 8px;
            background: rgba(30, 136, 229, 0.15);
            border-radius: 4px;
            z-index: -1;
        }
        
        .hero-description {
            font-size: 1.3rem;
            color: var(--gray);
            margin-bottom: 45px;
            max-width: 540px;
            line-height: 1.8;
        }
        
        /* 修复对比可视化 */
        .fix-comparison {
            display: flex;
            gap: 24px;
            /* 原样式只有 margin-bottom，导致对比卡片红色顶边直接贴着上方按钮 */
            margin-top: 56px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }
        
        .comparison-card {
            flex: 1;
            min-width: 280px;
            background: white;
            border-radius: var(--border-radius);
            padding: 35px 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 1px solid rgba(30, 136, 229, 0.1);
        }
        
        .comparison-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }
        
        .comparison-card.manual {
            border-top: 5px solid var(--danger);
        }
        
        .comparison-card.auto {
            border-top: 5px solid var(--success);
        }
        
        .comparison-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .comparison-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }
        
        .comparison-icon.manual {
            background: rgba(244, 67, 54, 0.12);
            color: var(--danger);
        }
        
        .comparison-icon.auto {
            background: rgba(76, 175, 80, 0.12);
            color: var(--success);
        }
        
        .comparison-header h3 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--dark);
        }
        
        .comparison-steps {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        
        .comparison-step {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        
        .step-number {
            width: 28px;
            height: 28px;
            background: var(--gray-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--gray);
            flex-shrink: 0;
        }
        
        .comparison-card.auto .step-number {
            background: rgba(30, 136, 229, 0.12);
            color: var(--primary);
        }
        
        .comparison-card.manual .step-number {
            background: rgba(244, 67, 54, 0.12);
            color: var(--danger);
        }
        
        .step-text {
            color: var(--gray);
            line-height: 1.6;
        }
        
        .time-badge {
            display: inline-block;
            margin-top: 25px;
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1.1rem;
        }
        
        .time-slow {
            background: rgba(244, 67, 54, 0.1);
            color: var(--danger);
        }
        
        .time-fast {
            background: rgba(76, 175, 80, 0.1);
            color: var(--success);
        }
        
        .hero-stats {
            display: flex;
            gap: 50px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 3rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 8px;
            line-height: 1;
        }
        
        .stat-label {
            color: var(--gray);
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .hero-buttons {
            display: flex;
            gap: 16px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        /* 主副按钮共用同一套盒模型，避免描边按钮因 border 多出 4px 而高度错位 */
        .btn-primary,
        .btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-width: 196px;
            min-height: 64px;
            padding: 0 36px;
            border-radius: 16px;
            box-sizing: border-box;
            font-weight: 800;
            font-size: 1.06rem;
            line-height: 1.2;
            white-space: nowrap;
            cursor: pointer;
            text-decoration: none;
            transition: var(--transition);
        }
        
        .btn-primary {
            background: var(--gradient-primary);
            color: #fff;
            border: none;
            box-shadow: 0 10px 26px rgba(30, 136, 229, 0.28);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 34px rgba(30, 136, 229, 0.38);
        }
        
        .btn-secondary {
            background: #fff;
            color: var(--primary-dark);
            /* 1.5px 细描边 + 极浅投影，减轻与主按钮抢视觉的问题 */
            border: 1.5px solid rgba(30, 136, 229, 0.45);
            box-shadow: 0 2px 10px rgba(30, 136, 229, 0.06);
        }
        
        .btn-secondary:hover {
            background: #F2F8FF;
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 12px 26px rgba(30, 136, 229, 0.16);
        }
        
        .hero-visual {
            flex: 1;
            max-width: 540px;
            position: relative;
        }
        
        .software-preview {
            background: white;
            border-radius: 24px;
            padding: 40px;
            box-shadow: var(--shadow);
            transform: perspective(1200px) rotateY(-12deg) rotateX(5deg);
            transition: var(--transition);
            border: 1px solid rgba(30, 136, 229, 0.15);
            position: relative;
            overflow: hidden;
        }
        
        .software-preview:hover {
            transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
        }
        
        .preview-glow {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(30, 136, 229, 0.2) 0%, rgba(30, 136, 229, 0) 70%);
            border-radius: 50%;
            z-index: 0;
        }
        
        .scan-indicator {
            position: absolute;
            top: 25px;
            right: 25px;
            background: var(--accent);
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 800;
            z-index: 1;
            box-shadow: 0 6px 20px rgba(255, 87, 34, 0.3);
        }
        
        .preview-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
        }
        
        .preview-header h4 {
            font-weight: 800;
            color: var(--dark);
            font-size: 1.4rem;
        }
        
        .preview-body {
            background: linear-gradient(145deg, #F5F9FF, #F0F7FF);
            border-radius: 16px;
            padding: 25px;
            font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
            color: var(--dark);
            font-size: 0.95rem;
            line-height: 1.9;
            position: relative;
            z-index: 1;
            border: 1px solid rgba(30, 136, 229, 0.1);
        }
        
        .preview-highlight {
            color: var(--primary);
            font-weight: 700;
        }
        
        .preview-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
        }
        
        .status-ok {
            background: rgba(76, 175, 80, 0.15);
            color: var(--success);
        }
        
        .status-fix {
            background: rgba(255, 87, 34, 0.15);
            color: var(--accent);
        }
        
        /* 核心功能 - 全新交互式诊断器 */
        .features {
            background: white;
            position: relative;
        }
        
        .features::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 80%, rgba(0, 188, 212, 0.03) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(30, 136, 229, 0.03) 0%, transparent 50%);
            z-index: 0;
        }
        
        .section-title {
            text-align: center;
            font-size: 3rem;
            font-weight: 900;
            margin-bottom: 20px;
            color: var(--dark);
            position: relative;
            z-index: 1;
        }
        
        .section-subtitle {
            text-align: center;
            color: var(--gray);
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 80px;
            line-height: 1.7;
            position: relative;
            z-index: 1;
        }
        
        .diagnosis-container {
            background: white;
            border-radius: var(--border-radius);
            padding: 50px;
            box-shadow: var(--shadow);
            margin-bottom: 80px;
            position: relative;
            z-index: 1;
            border: 1px solid rgba(30, 136, 229, 0.1);
            overflow: hidden;
        }
        
        .diagnosis-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: var(--gradient-primary);
        }
        
        .diagnosis-title {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 30px;
            color: var(--dark);
            text-align: center;
        }
        
        .diagnosis-subtitle {
            text-align: center;
            color: var(--gray);
            margin-bottom: 40px;
            font-size: 1.1rem;
        }
        
        .diagnosis-flow {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 50px;
            flex-wrap: wrap;
            gap: 30px;
        }
        
        .flow-step {
            flex: 1;
            min-width: 200px;
            text-align: center;
            position: relative;
        }
        
        .flow-step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 40px;
            right: -60px;
            width: 60px;
            height: 2px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            border-radius: 1px;
        }
        
        .step-circle {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--light), white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2rem;
            color: var(--primary);
            box-shadow: 0 10px 30px rgba(30, 136, 229, 0.15);
            border: 2px solid rgba(30, 136, 229, 0.1);
        }
        
        .flow-step h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--dark);
        }
        
        .flow-step p {
            color: var(--gray);
            font-size: 0.95rem;
            line-height: 1.6;
        }
        
        .error-selector {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .error-option {
            background: linear-gradient(145deg, #F8FBFF, #F0F7FF);
            border-radius: 14px;
            padding: 25px;
            cursor: pointer;
            transition: var(--transition);
            border: 2px solid transparent;
            text-align: center;
        }
        
        .error-option:hover {
            transform: translateY(-8px);
            border-color: rgba(30, 136, 229, 0.3);
            box-shadow: 0 15px 35px rgba(30, 136, 229, 0.15);
        }
        
        .error-option.selected {
            border-color: var(--primary);
            background: linear-gradient(145deg, #E8F4FF, #E0F0FF);
            box-shadow: 0 15px 35px rgba(30, 136, 229, 0.2);
        }
        
        .error-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 20px;
        }
        
        .error-option h4 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--dark);
        }
        
        .error-option p {
            color: var(--gray);
            font-size: 0.9rem;
            line-height: 1.6;
        }
        
        .diagnosis-result {
            background: var(--gradient-dark);
            color: white;
            border-radius: 16px;
            padding: 40px;
            text-align: center;
            margin-top: 40px;
            box-shadow: 0 15px 40px rgba(26, 35, 126, 0.25);
            transform: translateY(0);
            transition: var(--transition);
        }
        
        .diagnosis-result:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(26, 35, 126, 0.3);
        }
        
        .result-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            opacity: 0.9;
        }
        
        .result-solution {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 15px;
            line-height: 1.3;
        }
        
        .result-details {
            font-size: 1.1rem;
            opacity: 0.85;
            line-height: 1.6;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 40px;
            margin-top: 80px;
            position: relative;
            z-index: 1;
        }
        
        .feature-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 45px 35px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 1px solid rgba(30, 136, 229, 0.1);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: var(--gradient-primary);
            opacity: 0;
            transition: var(--transition);
        }
        
        .feature-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }
        
        .feature-card:hover::before {
            opacity: 1;
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--light), white);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            font-size: 2.2rem;
            color: var(--primary);
            box-shadow: 0 10px 30px rgba(30, 136, 229, 0.15);
            border: 2px solid rgba(30, 136, 229, 0.1);
        }
        
        .feature-card h3 {
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: 20px;
            color: var(--dark);
        }
        
        .feature-card p {
            color: var(--gray);
            line-height: 1.8;
            font-size: 1.05rem;
        }
        
        /* 文件支持展示 */
        .file-support {
            background: linear-gradient(145deg, #F0F8FF, #E8F5FF);
            position: relative;
            overflow: hidden;
        }
        
        .file-support::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(30, 136, 229, 0.08) 0%, transparent 70%);
            border-radius: 50%;
        }
        
        .support-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 30px;
            margin-top: 60px;
            position: relative;
            z-index: 1;
        }
        
        .support-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 30px;
            text-align: center;
            box-shadow: 0 12px 30px rgba(30, 136, 229, 0.1);
            transition: var(--transition);
            border: 2px solid transparent;
        }
        
        .support-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 45px rgba(30, 136, 229, 0.2);
            border-color: rgba(30, 136, 229, 0.2);
        }
        
        .support-card.system {
            border-top: 6px solid var(--primary);
        }
        
        .support-card.game {
            border-top: 6px solid var(--accent);
        }
        
        .support-card.app {
            border-top: 6px solid var(--success);
        }
        
        .support-card.driver {
            border-top: 6px solid #9C27B0;
        }
        
        .support-icon {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 25px;
        }
        
        .support-card h3 {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 15px;
            color: var(--dark);
        }
        
        .support-card p {
            color: var(--gray);
            line-height: 1.7;
            margin-bottom: 25px;
        }
        
        .support-examples {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
            background: rgba(30, 136, 229, 0.05);
            border-radius: 12px;
            padding: 10px;
            font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
            font-size: 0.78rem;
            color: var(--primary);
            text-align: left;
            line-height: 1.4;
        }
        
        /* 文件名标签各自独立成块，避免多个 span 首尾相连挤成一行溢出 */
        .support-examples span {
            display: inline-block;
            max-width: 100%;
            padding: 3px 7px;
            background: #fff;
            border: 1px solid rgba(30, 136, 229, 0.18);
            border-radius: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* 对比表格 - 全新设计 */
        .comparison-section {
            background: white;
            position: relative;
        }
        
        .comparison-table-container {
            overflow-x: auto;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            margin-top: 50px;
            position: relative;
            z-index: 1;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }
        
        .comparison-table thead {
            background: var(--gradient-dark);
            color: white;
        }
        
        .comparison-table th {
            padding: 28px 24px;
            text-align: left;
            font-weight: 700;
            font-size: 1.1rem;
        }
        
        .comparison-table th:first-child {
            border-radius: var(--border-radius) 0 0 0;
        }
        
        .comparison-table th:last-child {
            border-radius: 0 var(--border-radius) 0 0;
        }
        
        .comparison-table tbody tr {
            border-bottom: 1px solid rgba(30, 136, 229, 0.1);
            transition: var(--transition);
        }
        
        .comparison-table tbody tr:hover {
            background: rgba(30, 136, 229, 0.03);
        }
        
        .comparison-table tbody tr:last-child {
            border-bottom: none;
        }
        
        .comparison-table td {
            padding: 24px;
            vertical-align: middle;
        }
        
        .comparison-table .highlight {
            background: rgba(30, 136, 229, 0.05);
            font-weight: 700;
            position: relative;
        }
        
        .comparison-table .highlight::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: var(--primary);
        }
        
        .checkmark {
            color: var(--success);
            font-size: 1.4rem;
        }
        
        .xmark {
            color: var(--danger);
            font-size: 1.4rem;
        }
        
        .rating-stars {
            color: #FFC107;
            font-size: 1.2rem;
            letter-spacing: 2px;
        }
        
        /* 信任与安全 */
        .trust-section {
            background: linear-gradient(145deg, #1A237E, #0D47A1);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .trust-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%231E88E5' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 0.3;
        }
        
        .section-title-light {
            color: white;
            text-align: center;
            font-size: 3rem;
            font-weight: 900;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        
        .section-subtitle-light {
            color: rgba(255, 255, 255, 0.85);
            text-align: center;
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 80px;
            line-height: 1.7;
            position: relative;
            z-index: 1;
        }
        
        .trust-grid {
            /* 固定 4 列等宽。原先 auto-fit + minmax(280px) 在 1232px 容器里只排得下 3 列，
               第 4 张会单独落到下一行并留下大片空白。 */
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 22px;
            margin-top: 48px;
            position: relative;
            z-index: 1;
        }
        
        .trust-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 32px 24px 30px;
            text-align: center;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .trust-card:hover {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-6px);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
        }
        
        .trust-icon {
            font-size: 2.35rem;
            line-height: 1;
            color: white;
            margin-bottom: 20px;
            opacity: 0.92;
        }
        
        .trust-card h3 {
            font-size: 1.22rem;
            font-weight: 800;
            line-height: 1.4;
            margin-bottom: 14px;
            color: white;
        }
        
        .trust-card p {
            color: rgba(255, 255, 255, 0.82);
            line-height: 1.75;
            font-size: 0.9rem;
            margin: 0;
        }
        
        /* 平板两列、手机单列，避免 4 列在窄屏被挤成竖条 */
        @media (max-width: 1240px) {
            .trust-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 20px;
            }
        }
        
        @media (max-width: 640px) {
            .trust-grid {
                grid-template-columns: 1fr;
                gap: 16px;
                margin-top: 36px;
            }
            .trust-card {
                padding: 26px 22px;
                text-align: left;
            }
            .trust-icon {
                margin-bottom: 14px;
            }
        }
        
        /* CTA区域 */
        .cta-section {
            background: linear-gradient(145deg, #FF5722, #FF9800);
            color: white;
            text-align: center;
            padding: 120px 0;
            position: relative;
            overflow: hidden;
        }
        
        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
        }
        
        .cta-title {
            font-size: 3.5rem;
            font-weight: 900;
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
            text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .cta-description {
            font-size: 1.4rem;
            max-width: 800px;
            margin: 0 auto 60px;
            opacity: 0.95;
            position: relative;
            z-index: 1;
            line-height: 1.8;
        }
        
        .cta-button {
            background: white;
            color: #FF5722;
            border: none;
            padding: 24px 60px;
            border-radius: 16px;
            font-weight: 900;
            font-size: 1.4rem;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 20px;
            text-decoration: none;
            position: relative;
            z-index: 1;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
        }
        
        .cta-button:hover {
            transform: translateY(-8px) scale(1.05);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
        }
        
        /* 下载区域 */
        .download-section {
            background: white;
            text-align: center;
            position: relative;
        }
        
        .download-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
            margin-top: 80px;
            position: relative;
            z-index: 1;
        }
        
        .download-card {
            margin: 0 auto;
            background: white;
            border-radius: var(--border-radius);
            /* 原 60px 上下留白让卡片内部显得空旷，收紧到 38px */
            padding: 38px 34px 34px;
            box-shadow: var(--shadow);
            border: 2px solid transparent;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        .download-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
        }
        
        .download-card.recommended {
            border-color: var(--primary);
            box-shadow: 0 20px 50px rgba(30, 136, 229, 0.25);
        }
        
        .download-card.recommended::before {
            content: '倍受欢迎';
            position: absolute;
            top: 20px;
            right: -35px;
            background: var(--gradient-primary);
            color: white;
            padding: 8px 40px;
            font-weight: 800;
            font-size: 0.9rem;
            transform: rotate(45deg);
            box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3);
        }
        
        .download-icon {
            font-size: 2.6rem;
            line-height: 1;
            color: var(--primary);
            margin-bottom: 14px;
        }
        
        .download-card h3 {
            font-size: 1.55rem;
            font-weight: 900;
            line-height: 1.35;
            margin-bottom: 10px;
            color: var(--dark);
        }
        
        .download-card p {
            color: var(--gray);
            margin-bottom: 22px;
            line-height: 1.7;
            font-size: 0.96rem;
        }
        
        .download-features {
            text-align: left;
            margin-bottom: 24px;
        }
        
        .download-features li {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
            font-size: 0.94rem;
            color: var(--gray);
            border-bottom: 1px solid rgba(30, 136, 229, 0.1);
        }
        
        .download-features li:last-child {
            border-bottom: none;
        }
        
        .download-features li i {
            color: var(--success);
            font-size: 1.2rem;
        }
        
        .download-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 20px;
            background: var(--gradient-primary);
            color: white;
            /* 作为 <button> 渲染时会带浏览器默认边框，显式清零 */
            border: none;
            outline: none;
            border-radius: 12px;
            font-family: inherit;
            font-weight: 800;
            font-size: 1.2rem;
            line-height: 1.3;
            text-decoration: none;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            transition: var(--transition);
            box-shadow: 0 10px 30px rgba(30, 136, 229, 0.3);
        }

        .download-btn:focus-visible {
            outline: 3px solid #0D47A1;
            outline-offset: 3px;
        }
        
        .download-btn:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 40px rgba(30, 136, 229, 0.4);
        }
        
        .download-size {
            font-size: 0.86rem;
            color: var(--gray);
            margin-top: 15px;
            font-weight: 600;
        }
        
        /* 系统要求 */
        .requirements {
            background: rgba(30, 136, 229, 0.03);
            border-radius: var(--border-radius);
            padding: 50px;
            margin-top: 80px;
            text-align: center;
        }
        
        .requirements h3 {
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 40px;
            color: var(--dark);
        }
        
        .requirements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }
        
        .requirement-item {
            background: white;
            border-radius: 14px;
            padding: 30px;
            box-shadow: 0 8px 25px rgba(30, 136, 229, 0.1);
        }
        
        .requirement-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 20px;
        }
        
        .requirement-item h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--dark);
        }
        
        .requirement-item p {
            color: var(--gray);
            line-height: 1.6;
        }
        
        /* 页脚 */
        footer {
            background: var(--dark);
            color: white;
            padding: 72px 0 40px;
            position: relative;
        }

        .footer-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            gap: 44px;
            margin-bottom: 52px;
        }

        .footer-col {
            flex: 1 1 0;
            min-width: 200px;
        }

        /* 站点说明列占更宽，避免与链接列挤压 */
        .footer-about {
            flex: 1.6 1 0;
            min-width: 280px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 900;
            font-size: 1.35rem;
            color: white;
            margin-bottom: 20px;
        }

        .footer-logo .logo-icon {
            flex-shrink: 0;
        }

        .footer-logo .logo-text {
            font-size: 1.35rem;
        }

        .footer-description {
            opacity: 0.78;
            line-height: 1.8;
            margin-bottom: 24px;
            font-size: 0.98rem;
        }

        .footer-cta {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 12px 26px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            transition: var(--transition);
            font-family: inherit;
        }

        .footer-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 24px rgba(0, 188, 212, 0.28);
        }

        .social-links {
            display: flex;
            gap: 20px;
        }

        .social-links a {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.3rem;
            transition: var(--transition);
        }

        .social-links a:hover {
            background: var(--primary);
            transform: translateY(-5px);
        }

        /* 列标题在 .footer-col 内，不是 .footer-links 内 —— 修正选择器 */
        .footer-col h4 {
            font-size: 1.1rem;
            font-weight: 800;
            margin-bottom: 22px;
            color: white;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 14px;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.75);
            text-decoration: none;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .footer-links a:hover {
            color: white;
        }

        .copyright {
            text-align: center;
            padding-top: 34px;
            margin-top: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            opacity: 0.75;
            font-size: 0.92rem;
            line-height: 1.8;
        }

        .copyright-sub {
            margin-top: 8px;
            font-size: 0.86rem;
            opacity: 0.85;
        }
         .open-btn {
             background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 14px 40px;
            font-size: 1.2rem;
            font-weight: 500;
            border-radius: 60px;
            cursor: pointer;
            box-shadow: 0 10px 20px -8px rgba(0,20,40,0.3);
            transition: all 0.2s ease;
            border: 1px solid rgba(255,255,255,0.2);
            letter-spacing: 0.3px;
        }
        
          /* ---------- 模态框（弹窗）样式 ---------- */
        .modal {
            display: none;
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(10, 20, 30, 0.62);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            align-items: center;
            justify-content: center;
            z-index: 2000;
            padding: 24px 16px;
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .modal.show {
            display: flex;
        }

        /* 弹窗内容卡片 — 调整内边距，适应两列布局 */
        .modal-content {
            background: #fff;
            position: relative;
            width: 90%;
            max-width: 600px;
            border-radius: 28px;
            box-shadow: 0 30px 60px rgba(0, 10, 20, 0.4);
            animation: fadeScale 0.25s ease-out;
            padding: 28px 30px 24px;
            margin: auto;
        }

        @keyframes fadeScale {
            0% { opacity: 0; transform: scale(0.92); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* 双列容器：使用 grid 实现并排，间隙20px */
        .image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-top: 10px;           /* 与关闭按钮保持距离 */
        }

        /* 每个图片卡片 */
        .image-card {
            display: flex;
            flex-direction: column;
            background: #fafcff;         /* 极浅底色，柔和区分 */
            border-radius: 20px;
            overflow: hidden;            /* 圆角裁切图片 */
            box-shadow: 0 6px 14px rgba(0,0,0,0.02);
            transition: transform 0.2s ease;
        }

        .image-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0,20,30,0.1);
        }

        /* 图片设置：固定宽高比，让所有图片高度一致 */
        .image-card img {
            display: block;
            width: 100%;
            max-width: 200px;
            height: auto;
            aspect-ratio: 1 / 1;
            margin: 0 auto;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            background-color: #eef2f6;     /* 加载中的占位色 */
        }

        /* 图片下方的文字说明 */
        .image-caption {
            padding: 14px 10px 16px;
            text-align: center;
            font-size: 0.92rem;
            line-height: 1.5;
            color: #1e2b3a;
            font-weight: 400;
            background: #ffffff;
            border-radius: 0 0 20px 20px;
        }

        /* 说明文字与链接各占一行，避免在窄卡片里被拆成「链接 / 接」 */
        .image-caption strong {
            display: block;
            font-size: 0.92rem;
            font-weight: 700;
            color: #1e2b3a;
            margin-bottom: 6px;
            white-space: nowrap;
        }

        .image-caption a {
            display: inline-block;
            font-size: 0.86rem;
            color: #1565C0;
            text-decoration: none;
            white-space: nowrap;
            word-break: keep-all;
            padding: 2px 0;
            /* 常显细下划线，明确这是可点击链接 */
            border-bottom: 1px solid rgba(21, 101, 192, 0.35);
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .image-caption a:hover {
            color: #0D47A1;
            border-bottom-color: currentColor;
        }

        .image-caption span {
            display: block;
            font-size: 0.9rem;
            color: #5b6f82;
            margin-top: 4px;
            font-weight: 400;
            opacity: 0.8;
        }

        /* 关闭按钮 — 调整为绝对定位在卡片右上角，不覆盖内容 */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: none;
            border-radius: 50%;
            font-size: 32px;
            line-height: 1;
            color: #1e2b3a;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255,255,255,0.8);
            transition: all 0.15s;
            z-index: 20;
            padding: 0;
        }

        .close-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.1) rotate(90deg);
            color: #000;
            box-shadow: 0 12px 22px rgba(0, 0, 0, 0.15);
        }

        /* 小提示 (底部装饰) */
        .hint {
            margin-top: 30px;
            font-size: 0.9rem;
            color: #4a5e71;
            opacity: 0.6;
            display: flex;
            gap: 6px;
            align-items: center;
            justify-content: center;
        }

        .hint i {
            font-style: normal;
            background: #d0dbe8;
            border-radius: 30px;
            padding: 4px 12px;
        }
        
        
        
        
        
        
        /* 响应式设计 */
        @media (max-width: 1100px) {
            .hero-content {
                flex-direction: column;
                text-align: center;
            }
            
            .hero-text, .hero-visual {
                max-width: 100%;
            }
            
            .hero-visual {
                order: -1;
                margin-bottom: 60px;
            }
            
            .software-preview {
                transform: none;
            }
            
            .software-preview:hover {
                transform: translateY(-10px);
            }
            
            .flow-step:not(:last-child)::after {
                display: none;
            }
            
            .diagnosis-flow {
                justify-content: center;
            }
        }
        
        @media (max-width: 768px) {
            section {
                padding: 80px 0;
            }
            
            .hero-title {
                font-size: 3rem;
            }
            
            .section-title, .section-title-light {
                font-size: 2.5rem;
            }
            
            .cta-title {
                font-size: 2.8rem;
            }
            
            .nav-links {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                height: 100dvh;
                background: white;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 40px;
                /* 菜单层需在 header 之下，header 内的汉堡按钮才能保持在最上层 */
                z-index: 999;
            }
            
            .nav-links.active {
                display: flex;
            }
            
            .mobile-menu-btn {
                display: flex;
            }

            /* 移动端收紧导航栏，保证 logo / CTA / 汉堡按钮均在一屏内 */
            .navbar {
                gap: 10px;
                padding: 14px 0;
            }
            .logo {
                font-size: 1.05rem;
                gap: 8px;
            }
            .logo-text {
                font-size: 1.05rem;
            }
            .logo-icon {
                width: 40px;
                height: 40px;
                border-radius: 12px;
            }
            .nav-cta {
                padding: 10px 18px;
                font-size: 0.88rem;
                gap: 6px;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn-primary, .btn-secondary {
                width: 100%;
                max-width: 350px;
                justify-content: center;
            }
            
            .fix-comparison {
                flex-direction: column;
            }
            
            .comparison-card {
                width: 100%;
            }
            
            .diagnosis-container {
                padding: 30px 20px;
            }
            
            .download-grid {
                grid-template-columns: 1fr;
            }
        }
                           /* 移动端适配：小于600px时两列堆叠为一列 */
        @media (max-width: 600px) {
            .modal-content {
                padding: 22px 14px 16px;
                max-width: 400px;
                border-radius: 20px;
            }
            .image-grid {
                grid-template-columns: 1fr;
                gap: 14px;
                margin-top: 16px;
            }
            /* 移动端竖屏单列堆叠后总高容易超屏，缩小二维码与说明留白 */
            .image-card img {
                max-width: 156px;
            }
            .image-caption {
                padding: 10px 8px 12px;
            }
            .image-caption strong {
                font-size: 0.86rem;
                margin-bottom: 4px;
            }
            .image-caption a {
                font-size: 0.82rem;
            }
            .close-btn {
                top: 12px;
                right: 12px;
                width: 40px;
                height: 40px;
                font-size: 30px;
            }
        }
        @media (max-width: 360px) {
    .logo-text {
        font-size: 0.88rem;
    }
    .nav-cta {
        padding: 8px 11px;
        font-size: 0.76rem;
    }
    .container {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
            .navbar {
                gap: 8px;
            }
            .logo-text {
                font-size: 0.95rem;
            }
            .logo {
                gap: 7px;
            }
            .logo-icon {
                width: 36px;
                height: 36px;
            }
            .nav-cta {
                padding: 9px 13px;
                font-size: 0.8rem;
            }
            .nav-cta .ic {
                display: none;
            }
            .mobile-menu-btn {
                width: 38px;
                height: 38px;
            }
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title, .section-title-light {
                font-size: 2rem;
            }
            
            .hero-description {
                font-size: 1.1rem;
            }
            
            .cta-title {
                font-size: 2.2rem;
            }
            
            .cta-button {
                padding: 20px 30px;
                font-size: 1.2rem;
            }
            
            .error-selector {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                flex-direction: column;
                gap: 50px;
            }
        }
/* ==========================================================================
   新增：文章正文排版系统（原先缺失，导致教程页正文为裸 HTML）
   ========================================================================== */
.dll-content {
    max-width: 860px;
    margin: 0 auto;
    font-size: 16.5px;
    line-height: 1.95;
    color: #2C3E50;
}
.dll-content h1 {
    font-size: 2.05rem;
    line-height: 1.4;
    font-weight: 800;
    color: #1A237E;
    margin: 0 0 22px;
    letter-spacing: -0.4px;
    padding-bottom: 18px;
    border-bottom: 3px solid #1E88E5;
}
.dll-content .lead {
    font-size: 1.08rem;
    line-height: 1.9;
    color: #44546A;
    background: #F3F8FE;
    border-left: 4px solid #1E88E5;
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    margin: 0 0 30px;
}
.dll-content h2 {
    font-size: 1.48rem;
    font-weight: 700;
    color: #1A237E;
    margin: 44px 0 18px;
    padding-left: 14px;
    border-left: 5px solid #1E88E5;
    line-height: 1.45;
}
.dll-content h3 {
    font-size: 1.16rem;
    font-weight: 700;
    color: #0D47A1;
    margin: 30px 0 12px;
}
.dll-content h4 {
    font-size: 1.03rem;
    font-weight: 700;
    color: #1A237E;
    margin: 22px 0 10px;
}
.dll-content p { margin: 0 0 17px; }
.dll-content ul, .dll-content ol {
    margin: 0 0 20px;
    padding-left: 26px;
}
.dll-content ul li { list-style: none; position: relative; margin-bottom: 10px; }
.dll-content ul li::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1E88E5;
}
.dll-content ol { padding-left: 26px; }
.dll-content ol li { margin-bottom: 11px; padding-left: 4px; }
.dll-content ol li::marker { color: #1E88E5; font-weight: 700; }
.dll-content strong { color: #0D47A1; font-weight: 700; }
.dll-content a {
    color: #1565C0;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .2s;
}
.dll-content a:hover { color: #0D47A1; }
.dll-content code {
    font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
    background: #EEF3F9;
    color: #B02A37;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: .92em;
    border: 1px solid #DCE6F1;
}
.dll-content pre {
    background: #12203A;
    color: #D6E4FF;
    padding: 20px 24px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 0 0 22px;
    font-size: .93rem;
    line-height: 1.75;
    border: 1px solid #1E3057;
}
.dll-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    border: none;
    font-size: inherit;
}
.dll-content {
    /* 长英文标识符、注册表路径等不可断 token 需要允许断行，否则会顶破正文宽度 */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.dll-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 26px;
    font-size: .95rem;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(26,35,126,.07);
}
.dll-content table th {
    background: #1E88E5;
    color: #fff;
    font-weight: 600;
    padding: 13px 15px;
    text-align: left;
    border: none;
    font-size: .95rem;
}
.dll-content table td {
    padding: 12px 15px;
    border-bottom: 1px solid #E8ECF1;
    color: #3E4C59;
    vertical-align: top;
}
.dll-content table tbody tr:last-child td { border-bottom: none; }
.dll-content table tbody tr:nth-child(even) { background: #F8FAFD; }
.dll-content table tbody tr:hover { background: #EFF6FE; }
.dll-content .warning-box {
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-left: 5px solid #FFA000;
    border-radius: 10px;
    padding: 20px 24px;
    margin: 0 0 26px;
}
.dll-content .warning-box h4 {
    color: #E65100;
    margin: 0 0 9px;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dll-content .warning-box p { margin: 0; color: #5D4037; font-size: .96rem; }
.dll-content .cta-box {
    background: linear-gradient(135deg, #1E88E5, #00BCD4);
    border-radius: 14px;
    padding: 28px 30px;
    margin: 32px 0;
    color: #fff;
}
.dll-content .cta-box h3 {
    color: #fff;
    margin: 0 0 10px;
    font-size: 1.22rem;
}
.dll-content .cta-box p { margin: 0; color: rgba(255,255,255,.94); font-size: .97rem; }
.dll-content .cta-box a { color: #fff; font-weight: 700; }

/* 文章元信息条 */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    max-width: 860px;
    margin: 0 auto 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8ECF1;
    font-size: .88rem;
    color: #6B7A8C;
}
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .meta-icon { width: 15px; height: 15px; fill: currentColor; opacity: .75; }

/* 面包屑导航 */
.breadcrumb {
    max-width: 860px;
    margin: 0 auto 24px;
    font-size: .86rem;
    color: #6B7A8C;
}
.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before {
    content: "/";
    color: #B9C4D0;
}
.breadcrumb a { color: #1565C0; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: #8A97A6; }

/* 目录（TOC） */
.toc {
    max-width: 860px;
    margin: 0 auto 32px;
    background: #F7FAFD;
    border: 1px solid #E3EBF3;
    border-radius: 12px;
    padding: 22px 26px;
}
.toc-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1A237E;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: 8px; break-inside: avoid; }
.toc li::marker { color: #1E88E5; font-weight: 700; }
.toc a { color: #3E4C59; text-decoration: none; font-size: .93rem; }
.toc a:hover { color: #1565C0; text-decoration: underline; }

/* 相关阅读 */
.related-posts {
    max-width: 860px;
    margin: 36px auto 0;
    padding-top: 26px;
    border-top: 1px solid #E8ECF1;
}
.related-posts h2 {
    font-size: 1.2rem;
    color: #1A237E;
    margin: 0 0 16px;
    padding: 0;
    border: none;
}
.related-posts ul { list-style: none; padding: 0; margin: 0; }
.related-posts li {
    margin-bottom: 12px;
    padding: 13px 16px;
    background: #F7FAFD;
    border: 1px solid #E3EBF3;
    border-radius: 9px;
    font-size: .93rem;
}
.related-posts li a { color: #1565C0; text-decoration: none; font-weight: 600; }
.related-posts li a:hover { text-decoration: underline; }
.related-posts .rel-desc {
    display: block;
    color: #7A8798;
    font-weight: 400;
    font-size: .87rem;
    margin-top: 5px;
}

/* 文章底部操作条 */
.article-footer-bar {
    max-width: 860px;
    margin: 34px auto 0;
    padding: 22px 24px;
    background: #F7FAFD;
    border: 1px solid #E3EBF3;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}
.article-footer-bar p { margin: 0; font-size: .9rem; color: #6B7A8C; }

/* FAQ 折叠块 */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
    background: #fff;
    border: 1px solid #E3EBF3;
    border-radius: 11px;
    margin-bottom: 12px;
    overflow: hidden;
}
.faq-item > summary {
    padding: 17px 22px;
    font-weight: 600;
    color: #1A237E;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 1rem;
    transition: background .2s;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: "+";
    font-size: 1.45rem;
    font-weight: 400;
    color: #1E88E5;
    line-height: 1;
    flex-shrink: 0;
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > summary:hover { background: #F7FAFD; }
.faq-answer {
    padding: 0 22px 20px;
    color: #3E4C59;
    font-size: .96rem;
    line-height: 1.85;
    border-top: 1px solid #EDF2F7;
    padding-top: 16px;
    margin-top: 2px;
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin: 0; }
.faq-answer ul { padding-left: 22px; margin: 0 0 12px; }
.faq-answer li { margin-bottom: 6px; }

/* ==========================================================================
   内联 SVG 图标系统（替换 1.4MB Font Awesome）
   ========================================================================== */
.ic {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
    vertical-align: -0.125em;
}
.ic-sm { width: .92em; height: .92em; }
.ic-lg { width: 1.25em; height: 1.25em; }
button.ic, a.ic { border: 0; background: none; padding: 0; }

/* ==========================================================================
   通用页面（关于/下载/联系/FAQ 列表页）
   ========================================================================== */
.page-hero {
    padding: 68px 0 44px;
    background: linear-gradient(160deg, #F3F8FE 0%, #FAFCFE 60%, #EAF6FA 100%);
    border-bottom: 1px solid #E3EBF3;
}
.page-hero h1 {
    font-size: 2.05rem;
    font-weight: 800;
    color: #1A237E;
    line-height: 1.38;
    margin: 0 0 14px;
    letter-spacing: -0.3px;
}
.page-hero .lead {
    font-size: 1.05rem;
    color: #4A5A6D;
    max-width: 780px;
    line-height: 1.85;
    margin: 0;
}
.page-hero .breadcrumb { margin-bottom: 20px; max-width: none; }

.doc-section { padding: 52px 0; }
.doc-section + .doc-section { padding-top: 0; }
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.doc-card {
    background: #fff;
    border: 1px solid #E3EBF3;
    border-radius: 14px;
    padding: 26px 24px;
    transition: var(--transition);
}
.doc-card:hover {
    border-color: #1E88E5;
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}
.doc-card h3 {
    font-size: 1.1rem;
    color: #1A237E;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.doc-card h3 .ic { color: #1E88E5; }
.doc-card p { color: #5A6B7D; font-size: .95rem; margin: 0; line-height: 1.8; }
.doc-card ul { padding-left: 20px; margin: 10px 0 0; color: #5A6B7D; font-size: .93rem; }
.doc-card li { margin-bottom: 7px; }

/* 定义列表（版本/规格表） */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(26,35,126,.06);
    font-size: .95rem;
}
.spec-table th, .spec-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid #EDF2F7;
}
.spec-table th {
    background: #F3F8FE;
    color: #1A237E;
    font-weight: 600;
    width: 190px;
}
.spec-table td { color: #3E4C59; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
.spec-table code {
    font-family: 'Cascadia Code', Consolas, monospace;
    background: #EEF3F9;
    color: #B02A37;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .9em;
}

/* 步骤列表（功能页） */
.steps-list { counter-reset: step; }
.steps-list > div {
    position: relative;
    padding: 0 0 26px 54px;
    counter-increment: step;
}
.steps-list > div::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E88E5, #00BCD4);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.steps-list h3 { margin: 0 0 7px; font-size: 1.06rem; color: #1A237E; }
.steps-list p { margin: 0; color: #5A6B7D; font-size: .95rem; line-height: 1.8; }

/* 提示条 */
.notice {
    padding: 16px 20px;
    border-radius: 10px;
    font-size: .93rem;
    line-height: 1.8;
    margin: 0 0 22px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.notice .ic { margin-top: 4px; }
.notice-info { background: #EAF4FD; border: 1px solid #BBDEFB; color: #0D47A1; }
.notice-warn { background: #FFF8E1; border: 1px solid #FFE082; color: #8D6E00; }
.notice-danger { background: #FFEBEE; border: 1px solid #FFCDD2; color: #B71C1C; }
.notice-ok { background: #E8F5E9; border: 1px solid #C8E6C9; color: #1B5E20; }

/* 通用内容区 */
.prose { max-width: 860px; margin: 0 auto; }
.prose h2 {
    font-size: 1.42rem;
    color: #1A237E;
    margin: 40px 0 16px;
    padding-left: 13px;
    border-left: 5px solid #1E88E5;
}
.prose h3 { font-size: 1.12rem; color: #0D47A1; margin: 26px 0 10px; }
.prose p { color: #3E4C59; line-height: 1.9; margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 24px; color: #3E4C59; margin: 0 0 18px; }
.prose li { margin-bottom: 9px; line-height: 1.85; }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1E88E5;
}
.prose a { color: #1565C0; }
.prose strong { color: #0D47A1; }

/* 目录列表页（资讯/文章列表） */
.post-list { display: grid; gap: 18px; }
.post-item {
    background: #fff;
    border: 1px solid #E3EBF3;
    border-radius: 13px;
    padding: 24px 26px;
    display: flex;
    gap: 20px;
    transition: var(--transition);
}
.post-item:hover { border-color: #1E88E5; box-shadow: var(--shadow); transform: translateY(-2px); }
.post-date {
    flex-shrink: 0;
    width: 82px;
    text-align: center;
    padding-top: 3px;
}
.post-date .d { display: block; font-size: 1.5rem; font-weight: 800; color: #1E88E5; line-height: 1.1; }
.post-date .m { display: block; font-size: .8rem; color: #8A97A6; margin-top: 3px; }
.post-body h3 { margin: 0 0 9px; font-size: 1.14rem; line-height: 1.5; }
.post-body h3 a { color: #1A237E; text-decoration: none; }
.post-body h3 a:hover { color: #1565C0; }
.post-body p { margin: 0 0 11px; color: #5A6B7D; font-size: .94rem; line-height: 1.8; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.post-tag {
    font-size: .78rem;
    color: #1565C0;
    background: #EAF4FD;
    border: 1px solid #D3E7FA;
    padding: 3px 10px;
    border-radius: 20px;
}

/* 资讯列表分类筛选条 */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid #E3EBF3;
}
.filter-bar button {
    font-size: .9rem;
    padding: 7px 16px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #E3EBF3;
    color: #5A6B7D;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.6;
}
.filter-bar button:hover { border-color: #1E88E5; color: #1565C0; }
.filter-bar button.active {
    background: #1E88E5;
    border-color: #1E88E5;
    color: #fff;
}

/* 筛选结果提示 */
.filter-status {
    font-size: .86rem;
    color: #7A8798;
    margin-bottom: 24px;
    min-height: 1.2em;
}

/* 被筛掉的文章条目 */
.post-item[hidden] {
    display: none;
}

/* 联系表单 */
.contact-form { max-width: 720px; }
.form-row { margin-bottom: 18px; }
.form-row label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: #1A237E;
    margin-bottom: 7px;
}
.form-row label .req { color: #E53935; margin-left: 3px; }
.form-row input, .form-row textarea, .form-row select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #D6E0EA;
    border-radius: 9px;
    font-size: .95rem;
    font-family: inherit;
    color: #2C3E50;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
    outline: none;
    border-color: #1E88E5;
    box-shadow: 0 0 0 3px rgba(30,136,229,.12);
}
.form-row textarea { min-height: 130px; resize: vertical; }
.form-hint { font-size: .82rem; color: #8A97A6; margin-top: 6px; }
.form-row input::placeholder, .form-row textarea::placeholder { color: #A9B4C0; }

/* 联系方式卡 */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 34px;
}
.contact-card {
    background: #fff;
    border: 1px solid #E3EBF3;
    border-radius: 13px;
    padding: 24px 22px;
}
.contact-card h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    color: #1A237E;
    display: flex;
    align-items: center;
    gap: 9px;
}
.contact-card h3 .ic { color: #1E88E5; }
.contact-card p { margin: 0; font-size: .93rem; color: #5A6B7D; line-height: 1.8; }
.contact-card a { color: #1565C0; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

/* 版本时间线 */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #DCE6F1;
}
.timeline-item { position: relative; padding-bottom: 26px; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #1E88E5;
}
.timeline-item .tl-date {
    font-size: .84rem;
    color: #8A97A6;
    font-weight: 600;
    margin-bottom: 5px;
}
.timeline-item h3 { margin: 0 0 6px; font-size: 1.02rem; color: #1A237E; }
.timeline-item p { margin: 0; font-size: .93rem; color: #5A6B7D; line-height: 1.8; }
.timeline-item ul { margin: 7px 0 0; padding-left: 20px; font-size: .92rem; color: #5A6B7D; }
.timeline-item li { margin-bottom: 4px; }

/* 响应式补充 */
@media (max-width: 860px) {
    .toc ol { columns: 1; }
    .article-footer-bar { flex-direction: column; align-items: flex-start; }
    .post-item { flex-direction: column; gap: 12px; }
    .post-date { width: auto; text-align: left; display: flex; align-items: baseline; gap: 7px; }
    .post-date .d { font-size: 1.15rem; }
    .post-date .m { margin-top: 0; }
    .spec-table th { width: auto; }
}
@media (max-width: 600px) {
    .dll-content { font-size: 16px; }
    .dll-content h1 { font-size: 1.62rem; }
    .dll-content h2 { font-size: 1.24rem; }
    .page-hero { padding: 44px 0 32px; }
    .page-hero h1 { font-size: 1.55rem; }
    .dll-content table { font-size: .88rem; }
    .dll-content table th, .dll-content table td {
    padding: 10px 11px;
    /* 仅在超长单词无处可放时才断，不参与最小内容宽度计算，避免列被压扁 */
    overflow-wrap: break-word;
}
}


/* ==========================================================================
   可访问性：键盘焦点可见性
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1E88E5;
    outline-offset: 3px;
    border-radius: 4px;
}

/* 弹窗内的焦点环在深色遮罩上需加亮色描边 */
.modal:focus-visible,
.modal-content:focus-visible {
    outline-color: #4FC3F7;
}

/* 移除鼠标点击时的默认焦点环，仅保留键盘导航可见 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   尊重系统「减少动效」设置
   ========================================================================== */
/* ==========================================================================
   窄屏表格：转为堆叠卡片
   3~4 列的数据表在 320~390px 宽度下无论怎么压缩都会出现断词与裁切，
   因此窄屏下改为「每行一张卡片、字段名以 data-label 显示」的形态。
   data-label 由 main.js 的 initTableLabels() 自动注入。
   ========================================================================== */
@media (max-width: 640px) {
    .dll-content table {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        font-size: .92rem;
    }

    /* 表头行在卡片形态下没有意义，隐藏 */
    .dll-content table tr.tbl-head-row {
        display: none;
    }

    .dll-content table tbody,
    .dll-content table tr {
        display: block;
        width: 100%;
    }

    .dll-content table tr {
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #E3EBF3;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(26, 35, 126, 0.05);
    }

    /* 原斑马纹与悬停底色在卡片形态下会破坏卡片边界，统一为白底 */
    .dll-content table tbody tr:nth-child(even),
    .dll-content table tbody tr:hover {
        background: #fff;
    }

    .dll-content table td {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: auto;
        padding: 9px 12px;
        border-bottom: 1px solid #F0F4F8;
        white-space: normal;
        overflow-wrap: break-word;
        text-align: left;
        vertical-align: top;
    }

    .dll-content table tr td:last-child {
        border-bottom: none;
    }

    .dll-content table td::before {
        content: attr(data-label);
        flex: 0 0 68px;
        color: #7A8A9A;
        font-weight: 600;
        font-size: .8rem;
        line-height: 1.7;
    }

    /* 没有注入列名的单元格不显示前缀，避免出现空标签 */
    .dll-content table td:not([data-label])::before {
        content: none;
    }

    /* 首列通常是文件名或类别，加粗强调 */
    .dll-content table tr td:first-child {
        font-weight: 600;
        color: #1A237E;
    }

    /* 行头表（左列 th）：th 与 td 上下堆叠 */
    .spec-table,
    .spec-table tbody,
    .spec-table tr,
    .spec-table th,
    .spec-table td {
        display: block;
        width: 100%;
    }

    .spec-table tr.tbl-head-row {
        display: none;
    }

    .spec-table tr {
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #E3EBF3;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(26, 35, 126, 0.05);
    }

    .spec-table th {
        background: #F3F8FE;
        color: #1A237E;
        font-size: .86rem;
        padding: 8px 12px;
        text-align: left;
        border-bottom: 1px solid #E3EBF3;
    }

    .spec-table td {
        padding: 9px 12px;
        text-align: left;
        border-bottom: none;
        overflow-wrap: break-word;
    }
}

/* 极窄屏（<=360px）细节收敛 */
@media (max-width: 360px) {
    .requirements-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    /* post-item 左右各 26px 内边距在 320px 下挤压正文，导致列表右边界溢出 */
    .post-item {
        padding: 18px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .post-item,
    .feature-card,
    .doc-card,
    .download-card {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   404 页面
   ========================================================================== */
.error-hero {
    text-align: center;
}
.error-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    padding-top: 76px;
    padding-bottom: 56px;
}
.error-code {
    font-size: 5rem;
    font-weight: 800;
    color: #1E88E5;
    line-height: 1;
    letter-spacing: -2px;
}
.error-hero h1 {
    margin-top: 18px;
    font-size: 2.4rem;
    font-weight: 800;
    color: #1A237E;
}
.error-hero .lead {
    margin: 14px auto 0;
    max-width: 560px;
    text-align: left;
}
.error-hero-buttons {
    margin-top: 30px;
    justify-content: center;
}

@media (max-width: 480px) {
    .error-code {
        font-size: 3.6rem;
    }
    .error-hero h1 {
        font-size: 1.7rem;
    }
}

/* FAQ 页问题反馈区块 */
.faq-contact {
    max-width: 860px;
    margin: 44px auto 0;
    padding: 32px 34px;
    background: #F3F8FE;
    border: 1px solid #D9E7F7;
    border-left: 5px solid #1E88E5;
    border-radius: 0 16px 16px 0;
}
.faq-contact h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1A237E;
    margin-bottom: 14px;
}
.faq-contact p {
    color: #44546A;
    line-height: 1.85;
    margin-bottom: 14px;
}
.faq-contact ul {
    margin: 0 0 22px;
    padding-left: 24px;
    color: #44546A;
    line-height: 1.9;
}
.faq-contact .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
@media (max-width: 600px) {
    .faq-contact {
        padding: 24px 20px;
    }
}