/* --- 核心基础样式 (与首页统一) --- */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        

        /* Hero Header */
        .page-hero {
            height: 400px;
            /* 背景图：Pixabay 货船 */
            background: linear-gradient(rgba(0,51,102,0.8), rgba(0,51,102,0.6)), url('https://cdn.pixabay.com/photo/2016/11/22/21/57/logistics-1850810_1280.jpg');
            background-size: cover; background-position: center;
            color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
        }
        .page-hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
        .page-hero p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; }

        /* 核心内容区 */
        .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
        
        /* 视觉组件：流程图 */
        .process-flow { display: flex; justify-content: space-between; margin-bottom: 50px; flex-wrap: wrap; gap: 20px; }
        .step { flex: 1; background: var(--white); padding: 20px; border-radius: 8px; text-align: center; position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-bottom: 3px solid var(--theme-color); min-width: 150px; }
        .step i { font-size: 2rem; color: var(--theme-color); margin-bottom: 10px; display: block; }
        .step::after { content: "f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: #ddd; font-size: 1.2rem; }
        .step:last-child::after { content: ""; }

        /* 知识卡片网格 */
        .grid-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; }
        .card { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; }
        .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .card-header { background: var(--theme-light); padding: 20px; color: var(--primary); font-weight: 700; display: flex; align-items: center; gap: 10px; border-left: 5px solid var(--theme-color); }
        .card-body { padding: 25px; }
        .card-body ul { padding-left: 20px; }
        .card-body li { margin-bottom: 8px; color: #555; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
        .card-body li:hover { color: var(--theme-color); text-decoration: underline; }

        @media(max-width: 768px) { .process-flow { flex-direction: column; } .step::after { content: "f078"; right: 50%; top: auto; bottom: -25px; transform: translateX(50%); } .step { margin-bottom: 20px; } }