:root {
            --bg-deep: #060b14;
            --bg-card: rgba(14, 22, 40, 0.72);
            --bg-elevated: rgba(20, 32, 56, 0.82);
            --accent-sky: #38bdf8;
            --accent-glow: rgba(56, 189, 248, 0.28);
            --accent-purple: #a78bfa;
            --accent-emerald: #34d399;
            --text-primary: #edf2f9;
            --text-secondary: #b0bec5;
            --text-tertiary: #6b7c93;
            --border-subtle: rgba(255, 255, 255, 0.07);
            --border-active: rgba(56, 189, 248, 0.45);
            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 22px;
            --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.35);
            --shadow-glow-sky: 0 0 36px rgba(56, 189, 248, 0.16);
            --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
        }

        body {
            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
            color: var(--text-primary);
            background-color: var(--bg-deep);
            line-height: 1.65;
            overflow-x: hidden;
            letter-spacing: 0.01em;
        }

        .ambient-glow-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        .ambient-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(130px);
            opacity: 0.11;
            animation: orbDrift 22s ease-in-out infinite;
        }
        .ambient-orb.orb-sky {
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(56,189,248,0.6) 0%, transparent 70%);
            top: -220px;
            right: -180px;
        }
        .ambient-orb.orb-purple {
            width: 480px;
            height: 480px;
            background: radial-gradient(circle, rgba(167,139,250,0.5) 0%, transparent 70%);
            bottom: -160px;
            left: -150px;
            animation-delay: -9s;
        }
        @keyframes orbDrift {
            0%,100%{ transform: translate(0,0) scale(1); }
            25%{ transform: translate(45px,-35px) scale(1.06); }
            50%{ transform: translate(-50px,45px) scale(0.93); }
            75%{ transform: translate(-30px,-25px) scale(1.05); }
        }
        .grid-texture {
            position: fixed;
            top:0;left:0;width:100%;height:100%;
            pointer-events: none;
            z-index:0;
            opacity:0.023;
            background-image:
                linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size: 56px 56px;
        }

        header {
            background: rgba(6,11,20,0.82);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--border-subtle);
            position: sticky;
            top:0; z-index:100;
            transition: background 0.35s;
        }
        .nav-container {
            max-width:1260px; margin:0 auto; padding:1.1rem 2rem;
            display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
        }
        .logo {
            font-size:1.55rem; font-weight:800; color:#fff; text-decoration:none;
            display:flex; align-items:center; gap:0.7rem; letter-spacing:-0.4px; white-space:nowrap;
        }
        .logo svg {
            width:34px; height:34px; fill:none; stroke:var(--accent-sky); stroke-width:2;
            stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 10px var(--accent-glow));
        }
        .nav-links {
            display:flex; gap:2.2rem; list-style:none; align-items:center;
        }
        .nav-links a {
            text-decoration:none; color:var(--text-secondary); font-weight:540; font-size:0.93rem;
            transition:all 0.25s; position:relative; padding:0.35rem 0; white-space:nowrap;
        }
        .nav-links a::after {
            content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
            background:var(--accent-sky); border-radius:2px; transition:width 0.28s ease;
        }
        .nav-links a:hover, .nav-links a.active { color:#fff; }
        .nav-links a:hover::after, .nav-links a.active::after { width:100%; }
        .nav-links a.active { color:var(--accent-sky); }

        .nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:0.5rem; z-index:101; }
        .nav-toggle span { display:block; width:26px; height:2.5px; background:var(--text-primary); margin:6px 0; border-radius:2px; transition:0.3s; }
        @media (max-width:860px) {
            .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(6,11,20,0.96); backdrop-filter:blur(20px); flex-direction:column; gap:0; padding:1rem 0; border-bottom:1px solid var(--border-subtle); box-shadow:0 12px 32px rgba(0,0,0,0.5); }
            .nav-links.open { display:flex; }
            .nav-links a { padding:1rem 2rem; width:100%; border-bottom:1px solid rgba(255,255,255,0.04); }
            .nav-links a::after { display:none; }
            .nav-toggle { display:block; }
        }

        .hero {
            position:relative; padding:5.5rem 2rem 3.5rem 2rem; text-align:center; z-index:1;
        }
        .hero-container { max-width:800px; margin:0 auto; }
        .hero h1 {
            font-size:2.8rem; font-weight:850; margin-bottom:1.2rem; line-height:1.18;
            background:linear-gradient(140deg, #ffffff 0%, #cbd5e1 45%, #94a3b8 100%);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
            letter-spacing:-0.6px;
        }
        .hero p { font-size:1.15rem; color:var(--text-secondary); max-width:620px; margin:0 auto; }

        .section-container { max-width:1200px; margin:0 auto; padding:4rem 2rem; position:relative; z-index:1; }

        /* 创意版块：互动学习路径卡片 */
        .learning-path-grid {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.5rem; margin-bottom:4rem;
        }
        .path-card {
            background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
            padding:2rem 1.8rem; backdrop-filter:blur(10px); transition:all var(--transition-smooth);
            text-align:center; cursor:default;
        }
        .path-card:hover { border-color:var(--border-active); transform:translateY(-6px); box-shadow:var(--shadow-glow-sky); }
        .path-icon { font-size:2.2rem; margin-bottom:1rem; }
        .path-card h3 { font-size:1.2rem; color:#fff; margin-bottom:0.5rem; font-weight:650; }
        .path-card p { color:var(--text-secondary); font-size:0.92rem; }

        /* 步骤时间线 */
        .timeline {
            display:flex; flex-direction:column; gap:1.8rem; margin-bottom:4rem; position:relative;
        }
        .timeline::before {
            content:''; position:absolute; left:36px; top:10px; bottom:10px; width:2px;
            background:var(--border-subtle); z-index:0;
        }
        .timeline-step {
            display:flex; gap:1.5rem; position:relative; z-index:1;
        }
        .timeline-marker {
            width:60px; height:60px; border-radius:50%; background:rgba(56,189,248,0.08);
            border:2px solid var(--accent-sky); display:flex; align-items:center; justify-content:center;
            font-weight:800; font-size:1.3rem; color:var(--accent-sky); flex-shrink:0;
            box-shadow:0 0 18px rgba(56,189,248,0.12);
        }
        .timeline-content {
            background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
            padding:1.8rem; backdrop-filter:blur(10px); flex:1;
        }
        .timeline-content h3 { font-size:1.2rem; color:#fff; margin-bottom:0.5rem; }
        .timeline-content p { color:var(--text-secondary); font-size:0.95rem; margin-bottom:0.8rem; }
        .timeline-content .tip {
            background:rgba(167,139,250,0.07); border-left:3px solid var(--accent-purple); padding:0.6rem 1rem;
            border-radius:0 8px 8px 0; font-size:0.85rem; color:#cbd5e1;
        }

        /* 创意版块：安全自查清单 */
        .checklist-grid {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; margin-bottom:4rem;
        }
        .checklist-card {
            background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
            padding:1.8rem; backdrop-filter:blur(10px);
        }
        .checklist-card h4 { color:#fff; font-size:1.05rem; margin-bottom:0.8rem; display:flex; align-items:center; gap:0.5rem; }
        .checklist-item { display:flex; align-items:center; gap:0.7rem; color:var(--text-secondary); font-size:0.9rem; margin-bottom:0.6rem; }
        .checklist-item input[type="checkbox"] { accent-color:var(--accent-sky); width:18px; height:18px; }

        /* 双栏对比设置 */
        .split-guide {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.6rem; margin-bottom:4rem;
        }
        .guide-card {
            background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
            padding:2rem; backdrop-filter:blur(10px);
        }
        .guide-card h3 { color:#fff; font-size:1.2rem; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }
        .guide-card ul { list-style:none; color:var(--text-secondary); font-size:0.93rem; }
        .guide-card ul li { margin-bottom:0.6rem; padding-left:1.3rem; position:relative; }
        .guide-card ul li::before { content:"›"; position:absolute; left:0; color:var(--accent-sky); font-weight:bold; }

        /* FAQ 折叠 */
        .faq-list { display:flex; flex-direction:column; gap:1rem; max-width:860px; margin:0 auto; }
        .faq-item {
            background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
            padding:1.5rem 1.8rem; backdrop-filter:blur(10px); transition:all var(--transition-smooth);
        }
        .faq-item:hover { border-color:var(--border-active); }
        .faq-item h3 { font-size:1.05rem; color:#fff; display:flex; align-items:center; gap:0.6rem; }
        .faq-item p { color:var(--text-secondary); font-size:0.93rem; margin-top:0.6rem; padding-left:1.6rem; }

        footer {
            background:rgba(4,8,16,0.92); color:var(--text-tertiary); padding:4rem 2rem 2.2rem 2rem;
            border-top:1px solid var(--border-subtle); position:relative; z-index:1;
        }
        .footer-container { max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:2.2rem; }
        .footer-links { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }
        .footer-links a { color:var(--text-tertiary); text-decoration:none; font-size:0.88rem; transition:color 0.25s; }
        .footer-links a:hover { color:var(--accent-sky); }
        .footer-copyright { text-align:center; font-size:0.83rem; border-top:1px solid var(--border-subtle); padding-top:2rem; color:#556278; }

        @media (max-width:600px) {
            .hero h1 { font-size:2rem; }
            .timeline-marker { width:48px; height:48px; font-size:1rem; }
        }