:root {
            --violet-950: #1e0a3c;
            --violet-900: #2e1065;
            --violet-800: #4c1d95;
            --violet-700: #6d28d9;
            --violet-600: #7c3aed;
            --violet-500: #8b5cf6;
            --violet-400: #a78bfa;
            --violet-200: #ddd6fe;
            --violet-100: #ede9fe;
            --violet-50: #f5f3ff;

            --ink: #111114;
            --ink-2: #3f3f46;
            --muted: #71717a;
            --line: #e7e5eb;
            --bg: #ffffff;
            --bg-soft: #faf9fc;
            --radius: 14px;
            --radius-sm: 10px;
            --maxw: 1120px;
            --shadow-sm: 0 1px 2px rgba(17,17,20,.04);
            --shadow-md: 0 6px 20px -8px rgba(76,29,149,.16), 0 2px 6px -2px rgba(17,17,20,.05);
            --shadow-lg: 0 20px 40px -18px rgba(76,29,149,.28), 0 6px 16px -8px rgba(17,17,20,.06);
            --ease: cubic-bezier(.4, 0, .2, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 72px; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: var(--ink);
            background: var(--bg);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        a { color: var(--violet-700); text-decoration: none; transition: color .2s var(--ease); }
        a:hover { color: var(--violet-900); text-decoration: underline; }

        .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

        /* ===== NAV ===== */
        nav {
            position: sticky; top: 0; z-index: 60;
            background: rgba(255,255,255,.9);
            backdrop-filter: saturate(180%) blur(16px);
            -webkit-backdrop-filter: saturate(180%) blur(16px);
            border-bottom: 1px solid var(--line);
        }
        nav .wrap {
            display: flex; align-items: center; justify-content: space-between;
            height: 60px;
        }
        .logo {
            display: flex; align-items: center; gap: 10px;
            font-weight: 700; font-size: 16px; letter-spacing: -.3px;
            color: var(--ink); text-decoration: none;
        }
        .logo:hover { text-decoration: none; color: var(--ink); }
        .logo img {
            width: 30px; height: 30px; display: block;
            border-radius: 9px;
            box-shadow: 0 4px 10px -3px rgba(109,40,217,.5);
        }
        .logo em {
            font-style: normal; font-weight: 400;
            color: var(--muted); font-size: 12.5px;
        }
        .nav-links { display: flex; gap: 2px; font-size: 14px; }
        .nav-links a {
            color: var(--ink-2); padding: 6px 13px; border-radius: 8px;
            transition: background .18s var(--ease), color .18s var(--ease);
        }
        .nav-links a:hover { color: var(--violet-800); background: var(--violet-50); text-decoration: none; }

        /* ===== HERO ===== */
        .hero {
            padding: 56px 0 44px;
            background:
                radial-gradient(720px 380px at 88% -10%, rgba(139,92,246,.13), transparent 60%),
                radial-gradient(560px 320px at 4% 8%, rgba(167,139,250,.10), transparent 55%),
                var(--bg);
            border-bottom: 1px solid var(--line);
        }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 12px; font-weight: 600;
            color: var(--violet-700);
            background: var(--violet-50);
            border: 1px solid var(--violet-200);
            padding: 5px 13px; border-radius: 999px; margin-bottom: 20px;
        }
        .hero-badge::before {
            content: ""; width: 6px; height: 6px; border-radius: 50%;
            background: var(--violet-500);
            box-shadow: 0 0 0 3px rgba(139,92,246,.18);
        }
        .hero h1 {
            font-size: clamp(32px, 4.6vw, 50px);
            line-height: 1.14; letter-spacing: -1.6px;
            max-width: 820px; margin-bottom: 18px; font-weight: 800;
        }
        .hero h1 .hl {
            background: linear-gradient(110deg, var(--violet-600) 0%, #a21caf 100%);
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent; color: transparent;
        }
        .hero p.lead {
            font-size: 17px; color: var(--ink-2); max-width: 640px;
            margin-bottom: 28px; line-height: 1.8;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 8px; height: 46px; padding: 0 26px;
            border-radius: 11px; font-size: 15px; font-weight: 600;
            cursor: pointer; text-decoration: none;
            transition: transform .18s var(--ease), box-shadow .24s var(--ease), background .18s var(--ease);
        }
        .btn:hover { text-decoration: none; transform: translateY(-1px); }
        .btn-primary {
            background: linear-gradient(135deg, var(--violet-600), var(--violet-800));
            color: #fff;
            box-shadow: 0 10px 22px -8px rgba(109,40,217,.6), inset 0 1px 0 rgba(255,255,255,.2);
        }
        .btn-primary:hover { color: #fff; box-shadow: 0 14px 28px -8px rgba(109,40,217,.75); }
        .btn-ghost {
            background: #fff; border: 1px solid var(--line); color: var(--ink);
            box-shadow: var(--shadow-sm);
        }
        .btn-ghost:hover { border-color: #c4b5fd; background: var(--violet-50); color: var(--violet-800); }

        .hero-stats {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 1px; max-width: 860px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
        }
        .stat { background: #fff; padding: 16px 20px; transition: background .2s var(--ease); }
        .stat:hover { background: var(--violet-50); }
        .stat strong {
            display: block; font-size: 22px; font-weight: 800;
            letter-spacing: -.6px; line-height: 1.3; color: var(--violet-800);
        }
        .stat span { font-size: 12px; color: var(--muted); }

        /* ===== SECTIONS ===== */
        section { padding: 48px 0; }
        section.soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

        .section-head { margin-bottom: 26px; max-width: 720px; }
        .kicker {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 11.5px; font-weight: 700; color: var(--violet-700);
            letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px;
        }
        .kicker::before {
            content: ""; width: 18px; height: 2.5px; border-radius: 2px;
            background: linear-gradient(90deg, var(--violet-500), var(--violet-800));
        }
        .section-head h2 {
            font-size: clamp(23px, 2.8vw, 29px); letter-spacing: -.8px;
            line-height: 1.3; margin-bottom: 8px; font-weight: 800;
        }
        .section-head p { color: var(--ink-2); font-size: 15px; }

        .grid { display: grid; gap: 14px; }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }
        .grid-2 { grid-template-columns: repeat(2, 1fr); }

        .card {
            background: #fff; border: 1px solid var(--line);
            border-radius: var(--radius); padding: 22px;
            box-shadow: var(--shadow-sm);
            transition: transform .22s var(--ease), box-shadow .28s var(--ease), border-color .22s var(--ease);
        }
        .card:hover {
            transform: translateY(-3px);
            border-color: var(--violet-200);
            box-shadow: var(--shadow-lg);
        }
        .card h3 { font-size: 16px; margin-bottom: 8px; letter-spacing: -.2px; font-weight: 700; }
        .card p { font-size: 14px; color: var(--ink-2); line-height: 1.72; }

        .tag {
            display: inline-block; font-size: 11px; font-weight: 700;
            color: var(--violet-700); background: var(--violet-50);
            border: 1px solid var(--violet-100);
            padding: 2px 9px; border-radius: 6px; margin-bottom: 11px;
        }

        .feature-icon {
            width: 40px; height: 40px; border-radius: 11px;
            display: flex; align-items: center; justify-content: center;
            background: var(--violet-50);
            border: 1px solid var(--violet-100);
            color: var(--violet-700);
            margin-bottom: 13px;
            transition: background .22s var(--ease), color .22s var(--ease);
        }
        .card:hover .feature-icon {
            background: linear-gradient(135deg, var(--violet-600), var(--violet-800));
            border-color: transparent; color: #fff;
        }
        .feature-icon svg { width: 20px; height: 20px; display: block; }

        /* ===== REASONS ===== */
        .reason-list { display: grid; gap: 10px; }
        .reason {
            display: flex; gap: 18px; align-items: flex-start;
            padding: 20px 22px; background: #fff;
            border: 1px solid var(--line); border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            transition: border-color .22s var(--ease), box-shadow .28s var(--ease);
            position: relative; overflow: hidden;
        }
        .reason::before {
            content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
            background: linear-gradient(180deg, var(--violet-400), var(--violet-800));
            opacity: 0; transition: opacity .25s var(--ease);
        }
        .reason:hover { border-color: var(--violet-200); box-shadow: var(--shadow-md); }
        .reason:hover::before { opacity: 1; }
        .reason-num {
            flex: 0 0 34px; height: 34px; border-radius: 9px;
            background: linear-gradient(140deg, var(--violet-500), var(--violet-800));
            color: #fff; display: flex; align-items: center; justify-content: center;
            font-weight: 800; font-size: 13px;
            box-shadow: 0 5px 12px -5px rgba(109,40,217,.6);
        }
        .reason h3 { font-size: 15.5px; margin-bottom: 5px; font-weight: 700; letter-spacing: -.2px; }
        .reason p { font-size: 14px; color: var(--ink-2); }
        .score {
            font-weight: 700; color: var(--violet-800);
            background: var(--violet-50); padding: 0 6px; border-radius: 5px;
            white-space: nowrap; font-size: 13px;
        }

        /* ===== CASES ===== */
        .case { display: flex; flex-direction: column; }
        .case .delta {
            font-size: 19px; font-weight: 800; letter-spacing: -.4px;
            color: var(--violet-800); margin-top: auto; padding-top: 13px;
            display: inline-flex; align-items: center; gap: 7px;
        }
        .case .delta::before {
            content: ""; width: 6px; height: 6px; border-radius: 2px;
            background: linear-gradient(135deg, var(--violet-500), var(--violet-800));
            flex: 0 0 auto;
        }
        .case small { color: var(--muted); font-size: 11.5px; display: block; padding-top: 3px; }

        /* ===== STEPS ===== */
        .steps { display: grid; gap: 10px; }
        .step {
            display: flex; gap: 18px; align-items: flex-start;
            padding: 20px 22px; background: #fff;
            border: 1px solid var(--line); border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            transition: border-color .22s var(--ease), box-shadow .28s var(--ease);
        }
        .step:hover { border-color: var(--violet-200); box-shadow: var(--shadow-md); }
        .step-num {
            flex: 0 0 32px; height: 32px; border-radius: 8px;
            background: var(--ink); color: #fff; font-weight: 800; font-size: 13px;
            display: flex; align-items: center; justify-content: center;
        }
        .step h3 { font-size: 15.5px; margin-bottom: 4px; font-weight: 700; }
        .step p { font-size: 14px; color: var(--ink-2); }

        .callout {
            margin-top: 12px;
            background: linear-gradient(135deg, var(--violet-50) 0%, #fdf4ff 100%);
            border: 1px solid var(--violet-200);
            border-radius: var(--radius);
            padding: 22px;
            position: relative; overflow: hidden;
        }
        .callout::after {
            content: ""; position: absolute; right: -50px; top: -50px;
            width: 180px; height: 180px; border-radius: 50%;
            background: radial-gradient(circle, rgba(139,92,246,.13), transparent 68%);
        }
        .callout h3 {
            font-size: 15.5px; margin-bottom: 6px; font-weight: 700;
            color: var(--violet-900);
            display: flex; align-items: center; gap: 9px;
        }
        .callout h3::before {
            content: "⌘"; font-size: 12px; width: 24px; height: 24px;
            display: inline-flex; align-items: center; justify-content: center;
            background: #fff; border: 1px solid var(--violet-200);
            border-radius: 7px; color: var(--violet-700);
            box-shadow: var(--shadow-sm);
        }
        .callout p { font-size: 14px; color: var(--ink-2); position: relative; z-index: 1; }

        /* ===== FAQ ===== */
        .faq-list { display: grid; gap: 8px; }
        details {
            background: #fff; border: 1px solid var(--line);
            border-radius: var(--radius-sm); overflow: hidden;
            transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
        }
        details:hover { border-color: var(--violet-200); }
        details[open] { border-color: var(--violet-400); box-shadow: 0 0 0 3px rgba(139,92,246,.08); }
        details summary {
            cursor: pointer; padding: 16px 52px 16px 22px;
            font-weight: 650; font-size: 15px; list-style: none;
            position: relative; color: var(--ink);
            transition: color .18s var(--ease);
        }
        details summary::-webkit-details-marker { display: none; }
        details summary:hover { color: var(--violet-800); }
        details summary::after {
            content: ""; position: absolute; right: 22px; top: 50%;
            width: 8px; height: 8px;
            border-right: 2px solid var(--violet-500);
            border-bottom: 2px solid var(--violet-500);
            transform: translateY(-70%) rotate(45deg);
            transition: transform .25s var(--ease);
        }
        details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
        details .answer {
            padding: 14px 22px 18px; font-size: 14px; color: var(--ink-2);
            border-top: 1px solid var(--violet-100);
        }

        /* ===== NEWS ===== */
        .timeline { position: relative; padding-left: 26px; }
        .timeline::before {
            content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
            width: 2px; border-radius: 2px;
            background: linear-gradient(180deg, var(--violet-400), var(--violet-100));
        }
        .news-item { position: relative; padding-bottom: 20px; }
        .news-item:last-child { padding-bottom: 0; }
        .news-item::before {
            content: ""; position: absolute; left: -26px; top: 6px;
            width: 11px; height: 11px; border-radius: 50%;
            background: #fff; border: 2.5px solid var(--violet-500);
            box-shadow: 0 0 0 4px rgba(139,92,246,.1);
        }
        .news-date {
            display: inline-block; font-size: 11.5px; font-weight: 700;
            color: var(--violet-700); background: var(--violet-50);
            border: 1px solid var(--violet-100);
            padding: 1px 8px; border-radius: 5px; margin-bottom: 6px;
        }
        .news-item h3 { font-size: 15px; margin-bottom: 4px; font-weight: 700; letter-spacing: -.2px; }
        .news-item p { font-size: 13.5px; color: var(--ink-2); }

        /* ===== FOOTER ===== */
        footer {
            background: var(--violet-950);
            color: #c4b5d9; padding: 36px 0 24px; font-size: 13.5px;
        }
        footer .wrap {
            display: flex; justify-content: space-between;
            align-items: flex-start; flex-wrap: wrap; gap: 24px;
        }
        .footer-brand { display: flex; align-items: flex-start; gap: 12px; }
        .footer-brand img {
            width: 34px; height: 34px; border-radius: 10px; display: block;
            box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
        }
        footer strong { color: #fff; font-size: 15.5px; display: inline-block; margin-bottom: 4px; }
        footer a { color: #c4b5fd; }
        footer a:hover { color: #fff; }
        .footer-links { text-align: right; font-size: 13px; line-height: 2; }
        .footer-links a { margin-left: 18px; }
        .footer-meta {
            color: #6b5f82; margin-top: 24px; font-size: 12px;
            border-top: 1px solid rgba(255,255,255,.07); padding-top: 18px;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 940px) {
            .grid-3 { grid-template-columns: repeat(2, 1fr); }
            .nav-links { display: none; }
        }
        @media (max-width: 720px) {
            .hero { padding: 44px 0 36px; }
            .hero-stats { grid-template-columns: repeat(2, 1fr); }
            section { padding: 40px 0; }
            .footer-links { text-align: left; }
            .footer-links a { margin-left: 0; margin-right: 16px; }
        }
        @media (max-width: 580px) {
            .grid-3, .grid-2 { grid-template-columns: 1fr; }
            .reason, .step { flex-direction: column; gap: 10px; }
            .card, .reason, .step { padding: 18px; }
            .wrap { padding: 0 20px; }
        }
        @media (prefers-reduced-motion: reduce) {
            * { animation: none !important; transition-duration: .01ms !important; }
            html { scroll-behavior: auto; }
        }