:root {
            --color-primary: #2563eb;
            --color-primary-deep: #1d4ed8;
            --color-primary-light: #60a5fa;
            --color-accent: #0d9488;
            --color-accent-warm: #f97316;
            --color-accent-soft: #fbbf24;
            --color-surface: #f8fafc;
            --color-surface-alt: #f1f5f9;
            --color-card: #ffffff;
            --color-text: #1e293b;
            --color-text-muted: #475569;
            --color-text-light: #64748b;
            --color-border: #e2e8f0;
            --color-border-hover: #cbd5e1;
            --color-shadow: rgba(30,64,175,0.06);
            --color-shadow-hover: rgba(37,99,235,0.14);
            --color-footer-bg: #0f172a;
            --color-footer-text: #cbd5e1;
            --color-tag-bg: #eff6ff;
            --color-tag-text: #1d4ed8;
            --color-success: #10b981;
            --gradient-hero: linear-gradient(135deg, #1e40af 0%, #2563eb 28%, #0d9488 62%, #0891b2 100%);
            --gradient-btn: linear-gradient(135deg, #2563eb, #0d9488);
            --gradient-btn-hover: linear-gradient(135deg, #1d4ed8, #0f766e);
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 20px;
            --radius-full: 50px;
            --transition: 0.2s ease;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans SC', sans-serif;
            background: var(--color-surface); color: var(--color-text); line-height:1.6;
            scroll-behavior: smooth; -webkit-font-smoothing: antialiased; font-display: swap;
        }
        .container { max-width:1240px; margin:0 auto; padding:0 20px; }
        /* 导航 */
        .header {
            background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 1px 3px var(--color-shadow); position: sticky; top:0; z-index:50;
            border-bottom:1px solid var(--color-border);
        }
        .navbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px 0; gap:12px; }
        .logo {
            font-size:1.55rem; font-weight:750; background:var(--gradient-hero); background-clip:text;
            -webkit-background-clip:text; color:transparent; letter-spacing:-0.02em; text-decoration:none; white-space:nowrap;
        }
        .nav-links { display:flex; gap:18px; align-items:center; flex-wrap:wrap; list-style:none; }
        .nav-links a {
            text-decoration:none; font-weight:520; color:#334155; transition:color var(--transition);
            font-size:0.9rem; white-space:nowrap; position:relative; padding:4px 0;
        }
        .nav-links a::after {
            content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
            background:var(--color-primary); border-radius:2px; transition:width var(--transition);
        }
        .nav-links a:hover::after, .nav-links a.active::after { width:100%; }
        .nav-links a:hover, .nav-links a.active { color:var(--color-primary); }
        .nav-links .btn-nav-cta {
            background:var(--gradient-btn); color:#fff !important; padding:7px 18px; border-radius:var(--radius-full);
            font-weight:600; transition:all var(--transition); font-size:0.85rem; letter-spacing:0.02em;
        }
        .nav-links .btn-nav-cta::after { display:none; }
        .nav-links .btn-nav-cta:hover { background:var(--gradient-btn-hover); transform:translateY(-1px); box-shadow:0 4px 14px -4px rgba(37,99,235,0.4); }
        .nav-toggle { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--color-text); padding:4px 8px; }
        @media (max-width:860px) {
            .nav-links { display:none; flex-direction:column; width:100%; gap:6px; padding-top:8px; }
            .nav-links.open { display:flex; }
            .nav-toggle { display:block; }
            .nav-links a { padding:8px 4px; font-size:0.88rem; width:100%; }
            .nav-links .btn-nav-cta { text-align:center; margin-top:4px; }
        }
        /* Hero */
        .page-hero {
            padding:56px 0 32px; text-align:center;
            background: linear-gradient(170deg, #f8fafc 0%, #eff6ff 35%, #f0fdfa 70%, #fff 100%);
        }
        .page-hero h1 {
            font-size:clamp(1.8rem,4.5vw,2.4rem); font-weight:800; background:var(--gradient-hero);
            background-clip:text; -webkit-background-clip:text; color:transparent; margin-bottom:10px; letter-spacing:-0.02em;
        }
        .page-hero .sub { color:var(--color-text-muted); font-size:1rem; max-width:620px; margin:0 auto 16px; }
        .section-title { text-align:center; font-size:1.5rem; font-weight:720; margin-bottom:6px; }
        .section-desc { text-align:center; color:var(--color-text-muted); margin-bottom:26px; font-size:0.9rem; }
        /* 对比表 */
        .compare-table-wrap { overflow-x:auto; margin:20px auto; max-width:900px; }
        .compare-table { width:100%; border-collapse:collapse; font-size:0.82rem; min-width:600px; }
        .compare-table th { background:#f1f5f9; padding:12px 8px; text-align:left; font-weight:600; }
        .compare-table td { padding:12px 8px; border-bottom:1px solid var(--color-border); }
        .compare-table tr:hover td { background:#f8fafc; }
        .badge {
            display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.65rem; font-weight:700;
            letter-spacing:0.03em; vertical-align:middle; margin-left:4px;
        }
        .badge-rec { background:#dcfce7; color:#166534; }
        .badge-adv { background:#ede9fe; color:#5b21b6; }
        .badge-ios { background:#fce7f3; color:#9d174d; }
        .badge-dev { background:#e0e7ff; color:#3730a3; }
        /* 详细对比卡片 */
        .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:0 auto; }
        .detail-card {
            background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md);
            padding:20px; transition:all var(--transition);
        }
        .detail-card:hover { border-color:var(--color-primary-light); box-shadow:0 6px 18px -4px var(--color-shadow-hover); }
        .detail-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
        .detail-card p, .detail-card li { font-size:0.84rem; color:var(--color-text-muted); line-height:1.5; }
        .detail-card ul { list-style:none; padding-left:0; }
        .detail-card ul li::before { content:'▪'; color:var(--color-primary); margin-right:6px; }
        /* 场景推荐 */
        .scene-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; max-width:800px; margin:0 auto; }
        .scene-card {
            background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md);
            padding:18px; text-align:center; transition:all var(--transition);
        }
        .scene-card:hover { transform:translateY(-2px); box-shadow:0 8px 18px -6px var(--color-shadow-hover); }
        .scene-icon { font-size:1.8rem; margin-bottom:6px; }
        .scene-name { font-weight:700; font-size:0.95rem; }
        .scene-tool { font-size:0.8rem; color:var(--color-primary); margin:4px 0; }
        .scene-reason { font-size:0.72rem; color:var(--color-text-muted); }
        /* 底部CTA */
        .cta-bottom {
            background:var(--color-footer-bg); color:#e2e8f0; padding:40px 0; text-align:center;
        }
        .cta-bottom h2 { color:#fff; font-size:1.6rem; margin-bottom:8px; }
        .cta-bottom p { color:#cbd5e1; margin-bottom:18px; font-size:0.9rem; }
        .btn-cta-big {
            display:inline-block; background:var(--gradient-btn); color:#fff; font-weight:700; padding:14px 34px;
            border-radius:var(--radius-full); text-decoration:none; font-size:1.05rem; transition:all 0.25s ease;
            box-shadow:0 8px 20px -6px rgba(37,99,235,0.5);
        }
        .btn-cta-big:hover { background:var(--gradient-btn-hover); transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(37,99,235,0.6); }
        .btn-outline-sm {
            display:inline-block; border:1px solid var(--color-border); padding:6px 14px; border-radius:var(--radius-full);
            font-size:0.8rem; text-decoration:none; color:var(--color-text); transition:all var(--transition);
        }
        .btn-outline-sm:hover { border-color:var(--color-primary); color:var(--color-primary); }
        /* 页脚 */
        .footer {
            background:#0a0f1a; color:#cbd5e1; padding:44px 0 24px; font-size:0.82rem; border-top:1px solid #1e293b;
        }
        .footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:30px; margin-bottom:30px; }
        .footer-col h4 { color:#fff; margin-bottom:12px; font-weight:620; font-size:0.85rem; }
        .footer-col a { display:block; color:#94a3b8; text-decoration:none; margin-bottom:7px; transition:color var(--transition); font-size:0.78rem; }
        .footer-col a:hover { color:#fff; }
        .copyright { text-align:center; padding-top:22px; border-top:1px solid #1e293b; color:#64748b; font-size:0.72rem; }
        @media (max-width:768px) {
            .detail-grid { grid-template-columns:1fr; }
            .scene-grid { grid-template-columns:1fr 1fr; }
        }