/* ============================================================
   企业数字化服务中心 · 服务流程页
   main.css
   — 时间轴 / 阶段卡片 / 服务承诺 / 悬浮进度条
   ============================================================ */

:root {
/* 主色系：统一为红色系 + 深墨色系，去除橙色/蓝色/深色残留 */
--red: #e63946;
--red-deep: #c1121f;
--red-light: #fef2f2;
--red-mid: #fde8e8;
--dark: #15181d;        /* 原为 #0d1b2a 偏蓝 */
--dark-2: #1f2329;      /* 原为 #1b263b 偏蓝 */
--ink: #2b2d42;
--gray: #6c757d;
--gray-light: #adb5bd;
--line: #e9ecef;
--bg: #ffffff;
--bg-soft: #f6f7f9;     /* 原为 #f8f9fa */
--bg-dark: #111418;     /* 原为 #0a1628 偏蓝 */

/* 渐变：全部改为红系，去除橙色 */
--grad-red: linear-gradient(135deg, #e63946 0%, #c1121f 100%);
--grad-red-dark: linear-gradient(135deg, #c1121f 0%, #e63946 100%);
--grad-dark: linear-gradient(160deg, #15181d 0%, #2b323b 100%);  /* 去除蓝相 #1b3a5c */
--grad-accent: linear-gradient(135deg, #e63946 0%, #ff6b6b 100%); /* 替代原金色渐变 */

/* 字体 */
--font: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;

/* 缓动 */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);

/* Logo 齿轮 */
--ico-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v4M12 19v4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M1 12h4M19 12h4M4.2 19.8l2.8-2.8M17 7l2.8-2.8'/%3E%3C/svg%3E");

/* 导航图标（激活态白色版） */
--ico-nav-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
--ico-nav-home-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
--ico-nav-flow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='12' r='2.5'/%3E%3Cpath d='M6 8.5v7M8.5 6h5a3 3 0 0 1 3 3v0a3 3 0 0 1-3 3h-5'/%3E%3C/svg%3E");
--ico-nav-flow-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='12' r='2.5'/%3E%3Cpath d='M6 8.5v7M8.5 6h5a3 3 0 0 1 3 3v0a3 3 0 0 1-3 3h-5'/%3E%3C/svg%3E");
--ico-nav-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
--ico-nav-shield-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
--ico-nav-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='2 7 12 14 22 7'/%3E%3C/svg%3E");
--ico-nav-mail-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='2 7 12 14 22 7'/%3E%3C/svg%3E");

/* 服务类型 Tab 图标 */
--ico-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='15' rx='2'/%3E%3Cpath d='M2 8h20M8 4v4M4 4v4'/%3E%3C/svg%3E");
--ico-web-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='15' rx='2'/%3E%3Cpath d='M2 8h20M8 4v4M4 4v4'/%3E%3C/svg%3E");
--ico-mp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3Cpath d='M9 6h.01M12 6h.01M15 6h.01M9 10h.01M12 10h.01M15 10h.01'/%3E%3C/svg%3E");
--ico-mp-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3Cpath d='M9 6h.01M12 6h.01M15 6h.01M9 10h.01M12 10h.01M15 10h.01'/%3E%3C/svg%3E");
--ico-app: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2.5'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
--ico-app-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2.5'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");

/* 按钮箭头 */
--ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
--ico-arrow-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");

/* ===================== SVG 图标库 ===================== */
/* 阶段卡片展开箭头 */
--ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
--ico-chevron-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
/* 信息块图标 */
--ico-we: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
--ico-you: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
/* 交付成果图标 */
--ico-deliver: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
/* 避坑/警示图标 */
--ico-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
/* 服务承诺图标 */
--ico-fund: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M6 6V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
--ico-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
--ico-secret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
--ico-service: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* ===================== 服务类型切换 ===================== */
.service-type-bar { 
   position: relative;
    z-index: 5;
    padding: 44px;
    background: var(--bg-soft);
 }
.type-tabs {
max-width: 1000px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
background: #fff; border-radius: 16px; padding: 14px;
box-shadow: 0 12px 48px rgba(0,0,0,0.12);
}
.type-tab {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 18px 16px; border-radius: 11px; cursor: pointer;
border: 1.5px solid transparent; transition: all .3s var(--ease);
text-align: center;
}
.type-tab:hover { background: var(--bg-soft); }
.type-tab.active { background: var(--red-light); border-color: var(--red); }
.type-ico { width: 42px; height: 42px; margin-bottom: 6px; }
.type-tab[data-type="web"] .type-ico { background-image: var(--ico-web); }
.type-tab[data-type="mp"] .type-ico { background-image: var(--ico-mp); }
.type-tab[data-type="app"] .type-ico { background-image: var(--ico-app); }
.type-tab.active .type-ico { background-color: var(--red); border-radius: 10px; border: 4px solid var(--red);}
.type-tab.active[data-type="web"] .type-ico { background-image: var(--ico-web-w); }
.type-tab.active[data-type="mp"] .type-ico { background-image: var(--ico-mp-w); }
.type-tab.active[data-type="app"] .type-ico { background-image: var(--ico-app-w); }
.type-name { font-size: 16px; font-weight: 700; color: var(--dark); }
.type-desc { font-size: 12.5px; color: var(--gray); }



/* ===================== 区块标题 ===================== */
.timeline-section { padding: 80px 0 70px; background: var(--bg-soft); position: relative; padding-top: 10px;}
.section-head { text-align: center; margin-bottom: 48px; display: block; }
.sec-title { font-size: 32px; font-weight: 800; color: var(--dark); letter-spacing: -.5px; }
.sec-title.light { color: #fff; }
.sec-desc { font-size: 15px; color: var(--gray); margin-top: 10px; }
.sec-desc.light { color: rgba(255,255,255,0.6); }

/* ===================== 时间轴主体 ===================== */
.stage-list { position: relative; }
.stage-card {
background: #fff; border-radius: 16px; margin-bottom: 18px;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
border: 1px solid var(--line); overflow: hidden;
transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.stage-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.stage-card.open { border-color: var(--red); box-shadow: 0 8px 34px rgba(230,57,70,0.1); }

.stage-head {
display: flex; align-items: center; justify-content: space-between;
padding: 26px 32px; cursor: pointer; user-select: none;
transition: background .3s var(--ease);
}
.stage-head:hover { background: #fafafa; }
.stage-card.open .stage-head { background: var(--red-light); }

.stage-index { display: flex; align-items: center; gap: 18px; }
.stage-index i {
display: flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 12px;
background: var(--grad-red); color: #fff; font-size: 17px; font-weight: 800;
font-style: normal; flex-shrink: 0;
box-shadow: 0 4px 14px rgba(230,57,70,0.3);
}
.stage-index b { display: block; font-size: 18px; font-weight: 700; color: var(--dark); }
.stage-index em { display: block; font-size: 12.5px; color: var(--gray-light); font-style: normal; margin-top: 2px; }

.stage-toggle {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--bg-soft); transition: all .3s var(--ease);
}
.stage-card.open .stage-toggle { background: var(--red); transform: rotate(180deg); }
.toggle-icon {
width: 18px; height: 18px;
background-image: var(--ico-chevron);
background-size: contain; background-repeat: no-repeat;
}
.stage-card.open .toggle-icon { background-image: var(--ico-chevron-red); }

/* 展开内容：grid 0fr->1fr，无 JS 高度计算 */
.stage-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.stage-card.open .stage-body { grid-template-rows: 1fr;
    margin-top: -14px;
    border-radius: 17px;
    padding: 30px;
    background: #fff;
    position: relative;
    z-index: 999; }
.stage-body-inner { min-height: 0; overflow: hidden; }
.stage-body-inner > * { padding-left: 32px; padding-right: 32px; }
.stage-body-inner > .pitfall-banner {  padding-left: 40px; }

/* 行业潜规则横幅 */
.pitfall-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 12px;
    background: var(--red-light);
    border-left: 4px solid var(--red);
    margin-bottom: 20px;
}
.pitfall-ico {
width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px;
background-image: var(--ico-warning);
background-size: contain; background-repeat: no-repeat;
}
.pitfall-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--red-deep); margin-bottom: 4px; }
.pitfall-text p { font-size: 14px; color: #7a3037; line-height: 1.7; }

/* 两列信息块 */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.info-block {
background: var(--bg-soft); border-radius: 12px; padding: 22px 24px;
}
.info-block h4 {
display: flex; align-items: center; gap: 8px;
font-size: 15.5px; font-weight: 700; color: var(--dark); margin-bottom: 14px;
}
.blk-ico { width: 20px; height: 20px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; }
.blk-ico.ico-we { background-image: var(--ico-we); }
.blk-ico.ico-you { background-image: var(--ico-you); }

.dot-list { padding-left: 2px; }
.dot-list li {
position: relative; padding-left: 18px; font-size: 14px; color: var(--ink);
line-height: 1.8; margin-bottom: 6px;
list-style: none;
}
.dot-list li::before {
content: ""; position: absolute; left: 0; top: 10px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--red);
}

/* 交付成果 */
.deliver-block {
display: flex; align-items: center; gap: 16px;
padding: 20px 24px; border-radius: 12px;
background: var(--red-light); margin-bottom: 20px;
border: 1px dashed var(--red);
}
.deliver-ico {
width: 28px; height: 28px; flex-shrink: 0;
background-image: var(--ico-deliver);
background-size: contain; background-repeat: no-repeat;
}
.deliver-content { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.deliver-content strong {
font-size: 14px; font-weight: 700; color: var(--red); margin-right: 8px;
}
.deliver-content span {
font-size: 13px; color: var(--dark); padding: 5px 14px;
background: #fff; border-radius: 20px;
border: 1px solid var(--line); font-weight: 500;
}

/* 避坑指南 */
.pitfall-tips {
display: flex; align-items: flex-start; gap: 14px;
padding: 20px 24px; border-radius: 12px; background: #fff6f6;
border: 1px solid #f7d6d9;
/* margin-bottom: 28px; */
}
.tips-badge {
flex-shrink: 0; font-size: 12px; font-weight: 700; color: #fff;
background: var(--red); padding: 5px 12px; border-radius: 6px; white-space: nowrap;
}
.pitfall-tips p { font-size: 14px; color: #4a3033; line-height: 1.8; margin: 0; }

/* ===================== 服务承诺 ===================== */
.commit-section { padding: 80px 0; background: var(--grad-dark); position: relative; overflow: hidden; }
.commit-section::before {
content: ""; position: absolute; top: -100px; right: -100px;
width: 400px; height: 400px; border-radius: 50%;
background: var(--red); filter: blur(120px); opacity: .15;
}
.commit-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; z-index: 2;
}
.commit-card {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px; padding: 32px 26px;
transition: all .35s var(--ease);
position: relative; overflow: hidden;
}
.commit-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--grad-red); transform: scaleX(0); transform-origin: left;
transition: transform .4s var(--ease);
}
.commit-card:hover { background: rgba(255,255,255,0.09); transform: translateY(-4px); }
.commit-card:hover::before { transform: scaleX(1); }
.commit-ico { width: 44px; height: 44px; margin-bottom: 18px; }
.ico-fund { background-image: var(--ico-fund); background-size: contain; background-repeat: no-repeat; }
.ico-source { background-image: var(--ico-source); background-size: contain; background-repeat: no-repeat; }
.ico-secret { background-image: var(--ico-secret); background-size: contain; background-repeat: no-repeat; }
.ico-service { background-image: var(--ico-service); background-size: contain; background-repeat: no-repeat; }
.commit-num {
position: absolute; top: 24px; right: 24px;
font-size: 40px; font-weight: 800; color: rgba(255,255,255,0.06);
line-height: 1;
}
.commit-card h4 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; position: relative; }
.commit-card p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.8; position: relative; }

/* ===================== 悬浮进度条 ===================== */
.float-progress {
position: fixed; left: 12px; top: 50%; transform: translateY(-50%);
z-index: 100; display: flex; gap: 14px; align-items: flex-start;
}
.fp-track {
width: 4px; height: 280px; background: rgba(17,20,24,0.08); border-radius: 2px;
position: relative; overflow: hidden; margin-top: 6px;
}
.fp-fill {
position: absolute; top: 0; left: 0; width: 100%; height: 0;
background: var(--grad-red); border-radius: 2px;
transition: height .3s var(--ease);
}
.fp-list { display: flex; flex-direction: column; gap: 16px; padding-left: 0; }
.fp-item {
display: flex; align-items: center; gap: 10px; cursor: pointer;
font-size: 13px; color: var(--gray-light); font-weight: 500;
transition: all .25s var(--ease); white-space: nowrap;
}
.fp-item span {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 8px;
background: #fff; border: 1.5px solid var(--line);
font-size: 12px; font-weight: 700; color: var(--gray);
transition: all .3s var(--ease);
}
.fp-item .fp-name { width: auto; background: none; border: 0; }
.fp-item:hover { color: var(--red); }
.fp-item:hover span { border-color: var(--red); color: var(--red); }
.fp-item.active { color: var(--red); font-weight: 700; }
.fp-item.active span { background: var(--grad-red); border-color: var(--red); color: #fff; box-shadow: 0 3px 12px rgba(230,57,70,0.3);padding: 0 9px; }

/* ===================== 响应式 ===================== */
@media (max-width: 1000px) {
.float-progress { display: none; }
.commit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.grid-2col { grid-template-columns: 1fr; }
.commit-grid { grid-template-columns: 1fr; }
.stage-head { padding: 20px; }
.stage-body-inner > * { padding-left: 20px; padding-right: 20px; }
.stage-body-inner > .pitfall-banner { padding-left: 42px; padding-right: 42px; }
.pitfall-banner, .deliver-block, .pitfall-tips { flex-direction: column; gap: 10px; }
.cta-actions { flex-direction: column; width: 100%; }
.btn-primary, .btn-outline { width: 100%; justify-content: center; }
}

/* ===================== 响应式 ===================== */
@media (max-width: 900px) {
.hero-title { font-size: 34px; }
.hero-stats { flex-wrap: wrap; gap: 16px; }
.h-stat-sep { display: none; }
.type-tabs { grid-template-columns: 1fr; }
.cta-inner { flex-direction: column; text-align: center; padding: 36px 28px; }
.foot-top { flex-direction: column; gap: 32px; }
.foot-links { gap: 32px; flex-wrap: wrap; }
}
@media (max-width: 600px) {
.main-nav { display: none; }
.hero-title { font-size: 28px; }
.hero { padding: 130px 0 60px; min-height: auto; }
}