/* ==================== Process 详情页样式 ==================== */
/* 使用统一 calc 固定值，与 home.css 保持一致的缩放逻辑 */

.process-detail-page {
    background: var(--bg-white);
    position: relative;
    width: 100%;
    height: calc(67.5rem); /* 1080px 设计稿高度，随 rem 缩放 */
    max-height: calc(67.5rem);
    overflow: hidden !important;
}

/* ==================== 主内容容器：统一 1920×1080 画布 ==================== */
.main-content {
    position: relative;
    width: 100%;
    height: calc(67.5rem); /* 1080px 设计稿高度 */
    overflow: hidden !important;
    padding: calc(3.125rem);
    max-width: calc(120rem); /* 1920px */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ==================== 页面标题 ==================== */
.page-title {
    position: absolute;
    left: 50%;
    top: calc(5.5rem); /* 下沉约2rem */
    transform: translateX(-50%);
    font-family: var(--font-family);
    font-size: calc(1.5rem);
    line-height: calc(2rem);
    letter-spacing: calc(0.06rem);
    text-transform: none;
    color: var(--primary-black);
    margin: 0;
    font-weight: 700;
    z-index: 1000;
    text-align: center;
    pointer-events: none;
}

/* ==================== 轮播容器 ==================== */
.carousel-container {
    /* Keep visual spacing but participate in normal flow so steps-grid sits below */
    position: relative;
    /* 顶部间距：为页面标题和顶部导航留出空间 - 继续上移 */
    margin: calc(6rem) auto 0;
    width: calc(56rem);
    height: calc(18.4375rem);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(1.875rem);
}

/* 轮播项基础样式 - 默认淡化显示 */
.carousel-item {
    position: relative;
    width: calc(56rem);
    height: calc(18.4375rem);
    opacity: 0.3;
    transition: all 0.6s ease-in-out, order 0s;
    pointer-events: none;
    flex-shrink: 0;
    order: 0;
}

/* 所有轮播项的遮罩默认显示 */
.carousel-item .bg-overlay {
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}

/* 活跃项：完全不透明，无遮罩 */
.carousel-item.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-item.active .bg-overlay {
    opacity: 0;
}

/* ==================== 轮播背景图 ==================== */
.carousel-bg {
    position: relative;
    width: calc(56rem);
    height: calc(18.4375rem);
    margin: 0 auto;
    overflow: hidden;
}

.carousel-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
}

/* ==================== 轮播内容 ==================== */
.carousel-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: calc(3rem);
}

.phase-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.625rem);
    width: calc(30.25rem);
}

.phase-logo {
    width: calc(3.5rem);
    height: calc(3.5rem);
    object-fit: contain;
}

.phase-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.625rem);
}

.phase-title {
    font-family: DIN-bold;
    font-size: calc(1.75rem);
    line-height: calc(2.25rem);
    letter-spacing: calc(0.1rem);
    text-transform: none;
    color: var(--primary-black);
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
}

.phase-description {
    font-family: Din-regular;
    font-size: calc(0.8rem);
    line-height: calc(1.25rem);
    letter-spacing: calc(0.075rem);
    text-transform: none;
    color: #404040;
    text-align: center;
    margin: 0;
}

/* ==================== 详细步骤网格 ==================== */
.steps-grid {
    /* Place steps grid in normal document flow so pagination and decorative line follow directly */
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(1.25rem) calc(1.25rem);
    width: calc(57.875rem);
    max-width: calc(57.875rem);
    box-sizing: border-box;
    margin: calc(2rem) auto 0; /* 减少顶部间距 */
}

每个步骤卡片固定宽度，每行显示3个
.steps-grid .step-card {
    /* target design width but cap to available container space to avoid single-column wrap */
    /* compute card width as a quarter of the steps-grid minus gaps so rows keep 4 items */
    flex: 0 0 calc((100% - 3 * calc(1.25rem)) / 4);
    width: calc((100% - 3 * calc(1.25rem)) / 4);
    max-width: calc((100% - 3 * calc(1.25rem)) / 4);
    box-sizing: border-box;
}

/* ==================== 6个卡片特殊布局（概念设计阶段） ==================== */
.steps-container.six-cards {
    display: flex;
    flex-direction: column;
    gap: calc(4rem);
    width: auto;
    max-width: none;
    margin: calc(2rem) auto calc(6rem); /* 底部留出分页导航空间 */
    position: relative;
    padding-left: calc(8rem); /* 左移 */
    /* 取消容器设计 */
    background: none;
    border: none;
    box-shadow: none;
}

/* 每行的通用样式 */
.steps-container.six-cards .steps-row {
    display: flex;
    gap: calc(3.5rem); /* 减小间距适应更宽的卡片 */
}

/* 第一行 - 左对齐 */
.steps-container.six-cards .steps-row-1 {
    padding-left: 0;
}

/* 第二行 - 右移形成锯齿效果 */
.steps-container.six-cards .steps-row-2 {
    padding-left: calc(12rem); /* 调整偏移 */
}

/* 6个卡片时，每个卡片固定宽高 */
.steps-container.six-cards .step-card {
    flex: 0 0 calc(28rem); /* 增大卡片宽度 */
    width: calc(28rem);
    max-width: calc(28rem);
    min-width: auto;
    text-align: center;
    height: calc(7rem); /* 固定高度，保证不同语言间距一致 */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 取消卡片容器设计 */
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* 6个卡片时，subtitle最多两行 */
.steps-container.six-cards .step-subtitle {
    min-height: calc(2.2rem); /* 两行高度 */
    max-height: calc(2.2rem);
    overflow: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: horizontally;
}

/* 斜向连接线样式 */
.connector-line-diagonal {
    position: absolute;
    border: none;
    border-top: 1px dashed #D9D9D9;
    transform-origin: left center;
    z-index: 1;
    /* 绘制动画 */
    animation: drawLineDiagonal 0.5s ease-out both;
    /* 过渡效果 */
    transition: opacity 0.3s ease;
}

/* 斜向连接线绘制动画 */
@keyframes drawLineDiagonal {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* 斜向连接线交错延迟动画 */
.connector-line-diagonal:nth-child(1) { animation-delay: 0.3s; }
.connector-line-diagonal:nth-child(2) { animation-delay: 0.5s; }
.connector-line-diagonal:nth-child(3) { animation-delay: 0.7s; }
.connector-line-diagonal:nth-child(4) { animation-delay: 0.9s; }
.connector-line-diagonal:nth-child(5) { animation-delay: 1.1s; }

/* 连接线容器 - 用于整体控制 */
.steps-grid-connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 重新渲染时的淡入效果 */
.steps-grid-connectors.refreshing .connector-line-diagonal {
    animation: none;
    opacity: 0;
}

/* 鼠标悬停在卡片区域时，连接线高亮 */
.steps-container:hover .connector-line-diagonal {
    border-top-color: #999;
    transition: border-top-color 0.3s ease;
}

/* ==================== 5个卡片特殊布局（详细设计阶段）==================== */
/* 新版两行锯齿布局 */
.steps-container.five-cards {
    display: flex;
    flex-direction: column;
    gap: calc(3rem);
    width: auto;
    max-width: none;
    margin: calc(2rem) auto calc(6rem); /* 底部留出分页导航空间 */
    position: relative;
    padding-left: calc(9.5rem); /* 左移 */
}

.steps-container.five-cards .steps-row {
    display: flex;
    gap: calc(3.5rem); /* 减小间距适应更宽的卡片 */
}

/* 第一行 - 3个卡片 */
.steps-container.five-cards .steps-row-1 {
    padding-left: 0;
}

/* 第二行 - 2个卡片，向右偏移 */
.steps-container.five-cards .steps-row-2 {
    padding-left: calc(16rem);
}

.steps-container.five-cards .step-card {
    flex: 0 0 calc(29rem); /* 增大卡片宽度 */
    width: calc(29rem);
    max-width: calc(29rem);
    text-align: center;
    min-height: calc(9rem); /* 最小高度，允许内容撑开 */
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 5个卡片时，subtitle最多两行 */
.steps-container.five-cards .step-subtitle {
    min-height: calc(3rem);
    overflow: visible; /* 允许完整显示文本 */
}

/* ==================== 4个卡片特殊布局（生产制造阶段）==================== */
/* 绝对定位精确布局 - 严格按照 Figma 设计稿 */
.steps-container.four-cards-absolute {
    position: relative;
    left: calc(-17rem); /* 16.67% + 39.83px */
    width: calc(150rem);
    height: calc(21.4375rem); /* 343px */
    margin: calc(2rem) auto calc(6rem); /* 底部留出分页导航空间 */
}

.steps-container.four-cards-absolute .step-card {
    position: absolute;
    width: calc(50rem); /* 增大卡片宽度，减少折行次数 */
    text-align: center;
    height: calc(8rem); /* 固定高度，保证不同语言间距一致 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 4个卡片绝对定位时，标题允许折行 */
.steps-container.four-cards-absolute .step-title {
    white-space: normal; /* 允许折行 */
}

/* 4个卡片绝对定位时，subtitle固定高度但允许溢出显示 */
.steps-container.four-cards-absolute .step-subtitle {
    min-height: calc(3.5rem); /* 最小高度，用于布局计算 */
    overflow: visible; /* 允许文字溢出显示 */
}

/* 卡片1 - 量产工程文件包 */
.steps-container.four-cards-absolute .card-1 {
    left: calc(16.67% + 2.489rem); /* 16.67% + 39.83px */
    top: 0;
}

/* 卡片2 - 试生产验证 */
.steps-container.four-cards-absolute .card-2 {
    left: calc(33.33% + 1.792rem); /* 33.33% + 28.67px */
    top: calc(3.25rem); /* 77px - 25px = 52px ≈ 3.25rem */
}

/* 卡片3 - 产品可靠性测试报告 */
.steps-container.four-cards-absolute .card-3 {
    left: calc(50% + 1.094rem); /* 50% + 17.5px */
    top: 0;
}

/* 卡片4 - 异常响应与客诉管理 */
.steps-container.four-cards-absolute .card-4 {
    left: calc(66.67% + 0.396rem); /* 66.67% + 6.33px */
    top: calc(3.25rem); /* 77px - 25px = 52px ≈ 3.25rem */
}

/* 旧版布局（兼容） */
.steps-grid.five-cards {
    gap: calc(1.25rem) calc(1.25rem);
    width: calc(57.875rem);
}

/* For multi-row layouts (four/five cards), align items to the left so rows line up */
.steps-grid.five-cards,
.steps-grid.four-cards {
    justify-content: flex-start;
}

/* 5个卡片时，每个卡片仍然按3列布局 */
.steps-grid.five-cards .step-card {
    flex: 0 0 calc(17.375rem);
    width: calc(17.375rem);
    max-width: calc(17.375rem);
}

/* 5个卡片时，第4个卡片（第二行第1个）添加左边距实现右对齐 */
.steps-grid.five-cards .step-card:nth-child(4) {
    margin-left: calc(18.625rem); /* 一个卡片宽度 + 一个间隙 */
}

/* ==================== 4个卡片特殊布局（第三阶段） ==================== */
.steps-grid.four-cards {
    flex-wrap: nowrap;
    gap: 0 calc(1.25rem);
    width: calc(80rem);
    /* center four-card grid to correct left offset and ensure symmetric side gaps */
    margin: calc(5rem) calc(3.125rem) 0 calc(18.75rem);
}

/* 4个卡片时，每个卡片宽度与普通卡片一致，水平显示3个 */
.four-cards .step-card {
    flex: 0 0 calc(17.375rem);
    width: calc(24rem);
    max-width: calc(24rem);
    padding-left: calc(1.875rem);
}

/* .four-cards .step-icon - 已移除，使用统一的 2.5rem 尺寸 */

/* ==================== 步骤卡片 ==================== */
.step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.625rem);
    width: calc(17.375rem);
    left: calc(0.396rem); /* 66.67% + 6.33px */
    /* 取消卡片容器设计 */
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* .four-cards .step-card 宽度已在上方定义 */

.step-icon {
    width: calc(2.5rem);
    height: calc(2.5rem);
    position: relative;
    z-index: 2;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.step-title {
    font-family: var(--font-family);
    font-size: calc(1rem);
    line-height: calc(1.6rem);
    font-weight: 700;
    text-transform: none;
    word-wrap: break-word; /* 新增：英文超长单词智能拆分换行，不撑破容器 */
    word-break: break-word; /* 新增：优先单词间换行，保留英文阅读习惯 */
    color: #000000;
    margin: 0;
    text-align: left;
}

.step-subtitle {
    font-family:DIN-regular;
    font-size: calc(0.8rem);
    line-height: calc(1.5rem);
    letter-spacing: calc(0.1rem);
    text-transform: none;
    color: #404040;
    margin: 0;
    text-align: left;
    word-wrap: break-word;
    white-space: normal; /* 允许折行 */
    word-break: break-all; 
}

/* .four-cards 字体样式 - 已移除，使用统一的 Noto Sans SC 字体 */

/* ==================== 虚线连接器（阶段1专用） ==================== */
.step-connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 垂直虚线 - 卡片1到卡片4 */
/* 基于 steps-grid 宽度 57.875rem，使用固定 rem 定位 */
.connector-vertical-1-4 {
    position: absolute;
    left: calc(14.75rem);
    top: calc(50% + 4.25rem);
    width: 0;
    height: calc(7.6875rem);
    border-left: 1px dashed #D9D9D9;
    transform: translateX(-50%);
    animation: drawLineVertical 0.6s ease-out 0.8s both;
}

/* 垂直虚线 - 卡片5到卡片2 */
.connector-vertical-5-2 {
    position: absolute;
    left: calc(24.125rem);
    top: calc(50% + 4.25rem);
    width: 0;
    height: calc(7.6875rem);
    border-left: 1px dashed #D9D9D9;
    transform: translateX(-50%);
    animation: drawLineVertical 0.6s ease-out 1.0s both;
}

/* 垂直虚线 - 卡片3到卡片6 */
.connector-vertical-3-6 {
    position: absolute;
    left: calc(33.625rem);
    top: calc(50% + 4.4375rem);
    width: 0;
    height: calc(7.5rem);
    border-left: 1px dashed #D9D9D9;
    transform: translateX(-50%);
    animation: drawLineVertical 0.6s ease-out 1.2s both;
}

/* 水平虚线 - 卡片4到卡片5 */
.connector-horizontal-4-5 {
    position: absolute;
    left: calc(19.375rem);
    top: calc(66.67% + 1.9375rem);
    width: calc(16.375rem);
    height: 0;
    border-top: 1px dashed #D9D9D9;
    transform: translateX(-50%);
    animation: drawLineHorizontal 0.6s ease-out 0.9s both;
}

/* 水平虚线 - 卡片2到卡片3 */
.connector-horizontal-2-3 {
    position: absolute;
    left: calc(28.5rem);
    top: calc(50% + 2.8125rem);
    width: calc(16.375rem);
    height: 0;
    border-top: 1px dashed #D9D9D9;
    transform: translateX(-50%);
    animation: drawLineHorizontal 0.6s ease-out 1.1s both;
}

/* 基于steps-grid相对定位的连接器样式 */
.steps-grid-wrapper {
    position: relative;
}

.steps-grid-connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 垂直连接线 */
.connector-line-v {
    position: absolute;
    width: 0;
    border-left: 1px dashed #CCCCCC;
    animation: drawLineVertical 0.6s ease-out both;
}

/* 水平连接线 */
.connector-line-h {
    position: absolute;
    height: 0;
    border-top: 1px dashed #CCCCCC;
    animation: drawLineHorizontal 0.6s ease-out both;
}

/* 连接线绘制动画 - 垂直方向 */
@keyframes drawLineVertical {
    from {
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* 连接线绘制动画 - 水平方向 */
@keyframes drawLineHorizontal {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* 连接线动画延迟 - 在步骤卡片之后依次出现 */
.connector-line-v:nth-child(1),
.connector-line-h:nth-child(1) { animation-delay: 0.8s; }
.connector-line-v:nth-child(2),
.connector-line-h:nth-child(2) { animation-delay: 0.9s; }
.connector-line-v:nth-child(3),
.connector-line-h:nth-child(3) { animation-delay: 1.0s; }
.connector-line-v:nth-child(4),
.connector-line-h:nth-child(4) { animation-delay: 1.1s; }
.connector-line-v:nth-child(5),
.connector-line-h:nth-child(5) { animation-delay: 1.2s; }

/* ==================== 分页导航 ==================== */
.pagination {
    /* 绝对定位在页面容器底部，随 rem 缩放 */
    position: absolute;
    bottom: calc(11rem); /* 50px - 距离页面底部 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(55.9375rem);
    height: calc(1.75rem);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(2.5rem); /* larger touch target */
    min-height: calc(2.5rem);
    width: auto;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: calc(0.5rem);
    transition: opacity 0.3s ease, background 0.2s ease;
    border-radius: calc(0.25rem);
    margin: 0 calc(1.125rem); /* symmetric gap around buttons (increased) */
    position: relative; /* allow override for absolute placement */
}

.pagination-btn svg,
.pagination-btn img {
    width: calc(1rem);
    height: calc(1rem);
}

.pagination-btn:hover {
    opacity: 0.7;
}

.pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    background: transparent;
}

.pagination-text {
    font-family: var(--font-family);
    font-size: calc(1rem);
    line-height: calc(1.75rem);
    letter-spacing: calc(0.08rem);
    text-transform: none;
    color: var(--primary-black);
    margin: 0 calc(1.125rem); /* match button gap so spacing is equal (increased) */
}

/* Position prev/next buttons exactly at decorative-line edges */
.pagination .prev-btn,
.pagination .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0; /* reset inline margin */
}
.pagination .prev-btn { left: calc(-1.625rem); } /* nudge further left for pixel-perfect alignment */
.pagination .next-btn { right: calc(-1.625rem); } /* nudge further right for pixel-perfect alignment */

/* ==================== 装饰线条 ==================== */
.decorative-line {
    /* 绝对定位在页面容器底部，pagination 下方，随 rem 缩放 */
    position: absolute;
    bottom: calc(10.5rem); /* 30px - 距离页面底部 */
    left: 50%;
    transform: translateX(-50%);
    width: calc(55.9375rem);
    height: calc(0.0625rem);
    margin: 0;
    z-index: 100;
    background-color: #D9D9D9;
}

/* ==================== 返回按钮 ==================== */
.back-button {
    display: flex;
    align-items: center;
    gap: calc(0.3125rem);
    font-family: var(--font-family);
    font-size: calc(1rem);
    line-height: calc(1rem);
    color: #000000;
    text-decoration: none;
    transition: opacity 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    pointer-events: auto;
}

.back-button:hover {
    opacity: 0.7;
}

.back-button img {
    width: calc(1rem);
    height: calc(1rem);
}

/* ==================== 顶部导航栏 ==================== */
.product-header {
    position: fixed;
    top: calc(3.125rem);
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: transparent;
    /* background-color: #FFFFFF; */
    height: calc(1.5rem); /* match project/product header height */
    padding: 0 calc(3.125rem); /* horizontal distance consistent with project-detail */
    pointer-events: auto;
}

.header-left {
    flex-shrink: 0;
    pointer-events: auto;
}

.header-right {
    display: flex;
    align-items: center;
    gap: calc(1.25rem);
    margin-left: auto;
    flex-shrink: 0;
    pointer-events: auto;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    width: calc(1.25rem);
    height: calc(1.25rem);
    pointer-events: auto;
}

.icon-btn:hover {
    opacity: 0.7;
}

.icon-btn svg {
    width: calc(1.25rem);
    height: calc(1.25rem);
}

.shop-link {
    /* 纯图标模式 */
    display: inline-block;
    width: calc(1.25rem); /* 24px */
    height: calc(1.25rem); /* 24px */
    padding: 0 !important;
    background: none;
    border: none;
}

/* 隐藏所有文字 */
.shop-link span {
    display: none;
}

/* 图片填满容器 */
.shop-link img {
    width: 100%;
    height: 100%;
    display: block;
    filter: none; /* 保持原色 */
}

.shop-link:hover {
    opacity: 0.8;
}

/* ==================== 动画 ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(calc(1.25rem));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(calc(-2.5rem));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 取消页面标题载入动画 */
/* .page-title {
    animation: slideIn 0.6s ease-out;
} */

.step-card {
    animation: fadeIn 0.8s ease-out both;
}

.step-card:nth-child(1) { animation-delay: 0.2s; }
.step-card:nth-child(2) { animation-delay: 0.3s; }
.step-card:nth-child(3) { animation-delay: 0.4s; }
.step-card:nth-child(4) { animation-delay: 0.5s; }
.step-card:nth-child(5) { animation-delay: 0.6s; }
.step-card:nth-child(6) { animation-delay: 0.7s; }

/* ==================== 响应式 ==================== */
/* 与一级页面（home.css）保持一致：不使用媒体查询断点，完全依赖 rem 等比缩放 */
/* 当视口宽度变化时，html font-size 会按比例调整，所有 rem 值自动等比缩放 */
/* 这样可以避免断点处的布局跳变和元素堆叠问题 */