/* =================================================
   Services Page
   ✔ 不用卡片
   ✔ 左右结构清晰
   ✔ 时间轴：一条完整渐变竖线 + 数字必定压线
================================================= */

/* ================= 页面整体 ================= */

 

/* =================================================
   Services Hero（服务页顶部标题区）
   ✔ 不用大 Banner
   ✔ 偏咨询 / SI 公司气质
   ✔ 与下面 services-core 自然衔接
================================================= */

.services-hero {
    padding-top: 200px;
    /* 核心：让标题整体往下沉 */
    padding-bottom: 120px;
    padding-left: 80px;
    padding-right: 80px;

    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.services-hero h1,
.process-section h2 {
    letter-spacing: -0.02em;
    transform: translateY(4px);
}


/* =========================================================
   Services Hero 主标题（统一渐变｜不抖渐入）
========================================================= */
.services-hero h1 {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.015em;

    /* 🎨 渐变文字 */
    background: linear-gradient(90deg,
            #2e1065 0%,
            #33206f 50%,
            #3b1a80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* ✨ 轻微发光 */
    text-shadow: 0 0 4px rgba(122, 108, 255, 0.25);

    /* ✅ 多行显示并居中 */
    white-space: normal;      /* 允许换行 */
    word-break: break-word;   /* 超长单词自动换行 */
    text-align: center;       /* 居中 */

    margin: 0;

    /* ✅ 动画 */
    opacity: 0;
    transform: translateY(28px);
    animation: fadeSlideSoft 0.9s cubic-bezier(.22, 1, .36, 1) forwards;

    will-change: opacity, transform;
}






/* 左侧强调竖线（呼应下面 service-left） */
/* .services-hero h1::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 0.15em;
    width: 4px;
    height: 1.1em;
    background: linear-gradient(to bottom,
            #7c3aed,
            #c4b5fd);
    border-radius: 2px;
} */








/* =================================================
   Services · Core Section（按参考图还原版）
================================================= */

.services-core {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
}

/* ================= 每一行 ================= */

.service-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 80px;

    padding: 32px 0;

    /* 顶部分隔线（紫色渐变） */
    border-top: 1px solid transparent;
    /* border-image: linear-gradient(to right,
            transparent 0%,
            #a78bfa 20%,
            #c4b5fd 50%,
            #a78bfa 80%,
            transparent 100%) 1; */
    border-image: linear-gradient(to right,
            transparent 0%,
            #7A6CFF,
            #9B5CFF,
            transparent 100%) 1;
}

/* 第一个模块不要顶线 */
/* .service-row:first-child {
    border-top: none;
    padding-top: 40px;
} */

/* 最后一个模块（WEB）底部也加分隔线 */
.service-row:last-child {
    border-bottom: 1px solid transparent;
    /* border-image: linear-gradient(to right,
            transparent 0%,
            #a78bfa 20%,
            #c4b5fd 50%,
            #a78bfa 80%,
            transparent 100%) 1; */
    border-image: linear-gradient(to right,
            transparent 0%,
            /* rgba(122,108,255,0), */
            #7A6CFF,
            #9B5CFF,
            /* rgba(155,92,255,0) */
            transparent 100%) 1;
    padding-bottom: 32px;
    /* 让 WEB 收得住 */
}

.services-section {
    padding-left: 80px;
    padding-right: 80px;
}



/* ================= 左侧标题区 ================= */

.service-left {
    position: relative;
    padding-left: 22px;
}

.service-bar {
    position: absolute;
    left: 0;
    top: 6px;
    width: 3px;
    height: 28px;

    /* background: #7c3aed;
    border-radius: 2px; */

    /* 高级紫色渐变 */
    /* background: linear-gradient(to bottom,
            #7c3aed 0%,
            #a78bfa 55%,
            #c4b5fd 100%); */
    background: linear-gradient(to bottom,
            #7A6CFF 0%,
            #a78bfa 55%,
            #c4b5fd 100%);
    border-radius: 2px;

}

/* =========================================================
   Services 左侧标题（左 → 右渐入｜不抖）
========================================================= */
.service-left h2 {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;

    margin-top: 0;
    margin-bottom: 4px;

    /* 🎨 深紫渐变（偏 #2e1065） */
    background: linear-gradient(90deg,
        #2e1065 0%,
        #33206f 50%,
        #3b1a80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 3px rgba(122, 108, 255, 0.25);

    /* ✅ 左侧渐入（稳定） */
    opacity: 0;
    transform: translateX(-14px);
    animation: fadeSlideLeft 0.6s cubic-bezier(.22, 1, .36, 1) forwards;

    /* 🔒 防抖 */
    will-change: opacity, transform;
}



/* 英文副标题（SYSTEM INTEGRATION 那行） */
.service-left h2 span {
    display: block;

    margin-top: 4px;
    /* 原来太远，这里收紧 */
    margin-bottom: 0;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    /* 渐变文字 + 微 glow */
    background: linear-gradient(90deg, #7A6CFF, #9CA3AF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 2px rgba(155, 92, 255, 0.3);
}

/* =========================================================
   Services 右侧文字（左→右渐入｜不抖）
========================================================= */
.service-right p {
    font-size: 15.5px;          /* 文字大小 */
    line-height: 1.9;           /* 行高 */
    max-width: 760px;           /* 宽度限制，可选 */
    margin-bottom: 18px;        /* 段落下间距 */

    /* 🎨 文字颜色 + 微光效果（跟 Overview 一样） */
    color: #6b6484;
    text-shadow: 0 0 2px rgba(122, 108, 255, 0.15);

    /* ✅ 初始状态：左偏移 + 透明 */
    opacity: 0;
    transform: translateX(-14px);

    /* 🎬 动画：从左向右渐入 */
    animation: fadeSlideLeft 0.9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 0.45s;     /* 可以调节入场延迟 */

    /* 🔒 防抖补强 */
    will-change: opacity, transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}







/* =========================================================
   Services 右侧 strong 文字（左→右渐入｜不抖）
========================================================= */
.service-right strong {
    display: inline-block;
    margin: 22px 0 10px;
    font-size: 15px;
    font-weight: 600;

    /* 🎨 文字颜色 + 微光效果（跟 Overview 一致） */
    color: #6b6484;
    text-shadow: 0 0 2px rgba(122, 108, 255, 0.15);

    padding-left: 10px;

    /* ✅ 保留左边框颜色 */
    border-left: 3px solid #c4b5fd;

    /* ✅ 初始状态：左偏移 + 透明 */
    opacity: 0;
    transform: translateX(-14px);

    /* 🎬 动画：从左向右渐入 */
    animation: fadeSlideLeft 0.9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 0.45s;  /* 可根据需要调整延迟 */

    /* 🔒 防抖处理 */
    will-change: opacity, transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.service-right ul {
    padding-left: 18px;
}

/* =========================================================
   Services 右侧 li 列表文字（左→右渐入｜不抖｜与 Overview 文字颜色一致）
========================================================= */
.service-right li {
    font-size: 14px;            /* 字体大小 */
    line-height: 1.7;           /* 行高 */
    margin-bottom: 6px;         /* 列表间距 */

    /* 🎨 文字颜色 + 微光效果（与 Overview 一致） */
    color: #6b6484;
    text-shadow: 0 0 2px rgba(122, 108, 255, 0.15);

    /* ✅ 初始状态：左偏移 + 透明 */
    opacity: 0;
    transform: translateX(-14px);

    /* 🎬 动画：从左向右渐入 */
    animation: fadeSlideLeft 0.9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 0.45s;     /* 可根据需要调整延迟 */

    /* 🔒 防抖处理 */
    will-change: opacity, transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}






.reveal {
    opacity: 1;
    transform: translateY(16px);
    transition: opacity .8s ease, transform .8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================= 动画延迟（层级感） ================= */

.reveal--block:nth-of-type(1) {
    transition-delay: 0.1s;
}

.reveal--block:nth-of-type(2) {
    transition-delay: 0.2s;
}

.reveal--block:nth-of-type(3) {
    transition-delay: 0.3s;
}

.process-list li:nth-child(1) {
    transition-delay: 0.1s;
}

.process-list li:nth-child(2) {
    transition-delay: 0.2s;
}

.process-list li:nth-child(3) {
    transition-delay: 0.3s;
}

.process-list li:nth-child(4) {
    transition-delay: 0.4s;
}





/* ================= Process Section ================= */
/* ================= 区块 ================= */

.process-section {
    max-width: 900px;
    margin: 30px auto;
    padding: 32px 60px 160px;
    /* ← 加左右 80px */
    /* ↑↑↑ 底部额外 180px，给时间线 + footer 缓冲 */
}

/* ================= Process Section 主标题（下→上渐入｜不抖｜渐变文字） ================= */
.process-section h2 {
    text-align: center;        /* 居中对齐 */
    font-size: 32px;           /* 字体大小 */
    font-weight: 800;          /* 粗体 */
    letter-spacing: -0.02em;   /* 字母间距微调 */
    margin-bottom: 100px;      /* 底部间距 */

    /* 🎨 渐变文字颜色 + 微光效果 */
    background: linear-gradient(90deg,
        #2e1065 0%,    /* 深紫色 */
        #33206f 50%,   /* 稍浅紫色 */
        #3b1a80 100%); /* 中紫色 */
    -webkit-background-clip: text;  /* 文字裁剪显示背景渐变 */
    -webkit-text-fill-color: transparent; /* 文字透明，只显示渐变 */
    text-shadow: 0 0 4px rgba(122, 108, 255, 0.25); /* 微光效果 */

    /* ✅ 初始状态：透明 + 下移 */
    opacity: 0;
    transform: translateY(32px); /* 下移 32px，渐入时会向上移动 */

    /* 🎬 动画：淡入上浮 */
    animation: fadeSlideSoft 1s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 0.25s;      /* 可根据需要调整延迟 */

    /* 🔒 防抖处理 */
    will-change: opacity, transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}


/* 高级感列表 */
.process-list {
    margin-top: 14px;
    padding-left: 0;
    list-style: none;
}

/* ================= Process 列表文字（高级灰｜静态不动画） ================= */
.process-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;

    font-size: 15px;
    line-height: 1.6;

    /* 🎨 高级灰文字颜色（与 Overview / Services / Timeline 统一） */
    color: #6b6484;
    text-shadow: 0 0 2px rgba(122, 108, 255, 0.15);

    /* ✅ 去掉所有入场动画和位移（完全不抖） */
    opacity: 1;
    transform: none;

    /* ❌ 不需要过渡动画 */
    transition: none;
}


/* 当父级 reveal 激活后 */
.reveal.active .process-list li {
    opacity: 1;
    transform: translateY(0);
}

/* 逐条延迟（高级感核心） */
.reveal.active .process-list li:nth-child(1) {
    transition-delay: .15s;
}

.reveal.active .process-list li:nth-child(2) {
    transition-delay: .25s;
}

.reveal.active .process-list li:nth-child(3) {
    transition-delay: .35s;
}

.reveal.active .process-list li:nth-child(4) {
    transition-delay: .45s;
}

/* 小竖点，不是圆点（更高级） */
.process-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7c3aed;
    opacity: 0.8;
}

.process-note {
    margin-top: 12px;
    padding-left: 14px;
    border-left: 3px solid #c4b5fd;
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    opacity: 1;
    transform: translateY(6px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: .45s;
}

.reveal.active .process-note {
    opacity: 1;
    transform: translateY(0);
}




/* ================= 时间线容器 ================= */

/* ===== 时间轴容器 ===== */
.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-left: 0;
}

/* ===== 竖线：放在第一列正中 ===== */
.timeline-line {
    position: absolute;
    left: 32px;
    /* = 第 1 列宽度的一半 */
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
            transparent 0%,
            #7A6CFF 40px,
            #9B5CFF 30%,
            rgba(196, 181, 253, 0) 100%);


    /* background: linear-gradient(
        90deg,
        rgba(122,108,255,0),
        #7A6CFF,
        #9B5CFF,
        rgba(155,92,255,0)
    ); */
}





/* ===== 每一项：两列 Grid ===== */
.timeline-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    /* ← 第 1 列就是“时间轴列” */
    align-items: flex-start;
}

/* ===== 圆点：第 1 列居中 ===== */
.timeline-dot {
    grid-column: 1;
    justify-self: center;

    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #7A6CFF;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 700;
    z-index: 2;
}

/* ===== 内容 ===== */
.timeline-content {
    grid-column: 2;
}


/* ================= Timeline 内容标题 h3（静态渐变文字，不动画） ================= */
.timeline-content h3 {
    font-size: 17px;
    font-weight: 700;         /* 粗体 */
    margin-bottom: 8px;

    /* 🎨 渐变文字 + 微光 */
    background: linear-gradient(90deg,
        #2e1065 0%,    /* 深紫色 */
        #33206f 50%,   /* 中紫色 */
        #3b1a80 100%); /* 浅紫色 */
    -webkit-background-clip: text;      /* 文字裁剪显示背景渐变 */
    -webkit-text-fill-color: transparent; /* 文字透明，只显示渐变 */
    text-shadow: 0 0 4px rgba(122, 108, 255, 0.25); /* 微光效果 */

    /* ✅ 移除动画相关属性 */
    /* opacity、transform、animation 都不需要了 */

    /* 保持文本正常布局 */
    transform: none;
    opacity: 1;
    will-change: auto;
}



/* ================= Timeline 内容正文 p（静态灰紫色文字） ================= */
.timeline-content p {
    font-size: 14px;
    line-height: 1.8;

    /* 🎨 文字颜色 + 微光效果 */
    color: #6b6484;
    text-shadow: 0 0 2px rgba(122, 108, 255, 0.15);

    /* ✅ 移除动画相关属性 */
    /* opacity、transform、animation 都不需要了 */

    /* 保持文本正常布局 */
    margin: 0 0 8px 0; /* 如果需要下间距，可保留 */
}





/* =================================================
   Scroll Reveal · Service 模块
   ✔ 轻微位移
   ✔ 克制淡入
================================================= */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================
   Reveal 动画等级
======================================== */

/* 标题级（h1 / section title） */
.reveal--title {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 1.1s ease,
        transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

/* 内容块（SI / SM / WEB 模块） */
.reveal--block {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

/* 列表 / 流程 */
.reveal--item {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(.22, 1, .36, 1);
}

.reveal--title.active,
.reveal--block.active,
.reveal--item.active {
    opacity: 1;
    transform: translateY(0);
}






/* ================= 移动端 ================= */

@media (max-width: 768px) {


    .service-row {
        padding: 72px 0;
    }

    .service-row:last-child {
        padding-bottom: 32px;
    }


    .services-hero {
        padding-top: 120px;
        /* 移动端同步下移 */
        padding-bottom: 60px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Services 顶部标题 */
    .services-hero h1 {
        font-size: 24px;
        /* 原 22px → 放大一号 */
        line-height: 1.3;
        letter-spacing: -0.02em;
    }

    /* Process 区块标题（只改这一处 h2） */
    section.process-section>h2 {
        font-size: 24px;
        line-height: 1.3;
        letter-spacing: -0.02em;
        margin-bottom: 64px;
    }

    /* ❗明确声明：SI / SM / WEB 的 h2 不变 */
    .services-core .service-left h2 {
        font-size: 20px;
        line-height: 1.3;
    }


    /* 各模块标题（SI / SM / WEB） */
    .service-left h2 {
        font-size: 20px;
        /* 与 h1 完全一致 */
        line-height: 1.3;
    }

    /* 英文副标题保持小号，不抢主标题 */
    .service-left h2 span {
        font-size: 12px;
        margin-top: 4px;
    }

    /* Process Section 标题 */
    .process-section h2 {
        font-size: 24px;
        /* 与 h1 完全一致 */
        line-height: 1.3;
        letter-spacing: -0.02em;
        margin-bottom: 64px;
        /* 防止标题变大后挤流程 */
    }




    .timeline-line {
        left: 24px;
        /* 48px 列的一半 */
    }

    .timeline-item {
        grid-template-columns: 48px 1fr;
    }

    .timeline-dot {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .process-section {
        padding-bottom: 140px;
        padding-left: 20px;
        padding-right: 20px;

    }


    .service-row {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 56px 0;
    }

    .service-left {
        padding-left: 18px;
    }

    .service-bar {
        height: 24px;
    }

    .services-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .services-core {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* 移动端专属（不晃、不累） */
    .reveal--title {
        transform: translateY(24px);
        transition-duration: 0.9s;
    }

    .reveal--block {
        transform: translateY(16px);
    }

    .reveal--item {
        transform: translateY(10px);
    }

   /* 文字不参与位移动画（核心） */
   /* .service-right p,
   .service-right strong,
   .service-right li,
   .timeline-content p,
   .process-list li {
       transform: none !important;
       text-shadow: none;
       color: #56506f;
       animation: fadeOnly 0.6s ease forwards;
       will-change: opacity;
   } */

   /* 标题降级为纯色（极大提升清晰度） */
   /* .services-hero h1,
   .service-left h2,
   .process-section h2,
   .timeline-content h3 {
       background: none;
       -webkit-text-fill-color: initial;
       color: #2e1065;
       text-shadow: none;
   } */


}

/* @keyframes fadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
} */



@keyframes fadeSlideSoft {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================= 左→右渐入关键帧动画 ================= */
@keyframes fadeSlideLeft {
    0% {
        opacity: 0;
        transform: translateX(-14px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}