/* ===================== Hero 轮播文字：hover跑马灯【匹配你当前HTML结构】 ===================== */
.hero.subhero .eyebrow {
  font-size: 0.9rem;
  letter-spacing: 1.2px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  margin-bottom: 8px;
  opacity: 0.88;
  font-weight: 400;
}
.hero.subhero h1 {
  font-size: clamp(1.6rem,3.5vw,2.6rem);
  font-weight: 600;
  /* 渐变，背景2倍宽，跑马灯基础 */
  background: linear-gradient(90deg, #ffffff, #e0e7ff, #ddd6fe, #ffffff);
  background-size: 200% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.3;
  margin-bottom:12px;
}
.hero.subhero p {
  font-size: clamp(0.88rem,1.5vw,1.05rem);
  color: #f8faff;
  max-width:550px;
  line-height:1.6;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity:0.9;
}
/* 重点：匹配你的HTML结构，hover外层subhero触发h1动画 */
.hero.subhero:hover h1{
  animation: heroMarquee 2.4s linear infinite;
}
@keyframes heroMarquee{
  0%{background-position: 0% 0;}
  100%{background-position: 200% 0;}
}

/* ===================== 【我们的服务】卡片：只修改hover流光、图标旋转，背景跟随内容自适应 ===================== */
.service-card-wrap .card {
  position: relative;
  overflow:hidden;
  /* 删除固定背景色，沿用页面原有白色卡片底色，背景自动随内容高度 */
  transition: 0.35s ease;
  
}
.service-card-wrap .card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg,#9333EA22,#3b82f622,#ec489922);
  background-size:200% 200%;
  opacity:0;
  transition:opacity .4s ease;
  z-index:0;
}
.service-card-wrap .card:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 30px rgba(147, 51, 234, 0.2);
  border-color:rgba(147,51,234,0.4);
}
.service-card-wrap .card:hover::before{
  opacity:1;
  animation: serviceFlow 3s linear infinite;
}
.service-card-wrap .card .icon{
  transition: 0.4s ease;
}
.service-card-wrap .card:hover .icon{
  transform: rotate(10deg) scale(1.15);
}
.service-card-wrap .card > *{position:relative;z-index:1;}

/* ===================== 【服务对象】卡片：磨砂玻璃 + 边框扫光，和上面完全区分 ===================== */
.target-card-wrap .grid-4 .card {
  position: relative;
  overflow: hidden;
  border-radius:16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  padding:2rem;
  transition: 0.35s ease;
}
.target-card-wrap .grid-4 .card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(120deg, #3b82f6, #9333EA, #ffffff22, #3b82f6);
  background-size: 300% 300%;
  border-radius: 18px;
  z-index: -1;
  opacity: 0;
  transition: .35s;
}
.target-card-wrap .grid-4 .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(59,130,246,0.15);
  border-color: transparent;
}
.target-card-wrap .grid-4 .card:hover::before {
  opacity: 1;
  animation: borderShine 2.5s linear infinite;
}
.target-card-wrap .card .icon{
  transition:0.4s ease;
}
.target-card-wrap .card:hover .icon{
  transform: scale(1.18) translateY(-3px);
}
.target-card-wrap .card > *{position:relative;z-index:1;}

/* ===================== 服务流程时间轴【修复！兼容你现有页面布局，主线+圆点+流光】 ===================== */
.timeline {
  position:relative;
  margin-top:40px;
}
/* 底层灰色基准横线 */
.timeline::before {
  content:"";
  position:absolute;
  left:0;
  top:22px;
  width:100%;
  height:4px;
  background:#e2e8f0;
  z-index:1;
  border-radius:99px;
}
/* 主线流光跑马灯 */
.timeline::after {
  content:"";
  position:absolute;
  left:0;
  top:22px;
  width:30%;
  height:4px;
  background: linear-gradient(90deg, #3b82f6, #9333EA);
  border-radius:99px;
  z-index:2;
  animation: timelineMainFlow 4s linear infinite;
}
.timeline .time{
  position:relative;
  z-index:3;
  overflow:hidden;
  padding-top:48px;
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(59,130,246,0.1);
  transition: all .3s ease;
  text-align: center;
}
/* 时间节点圆点，紫色醒目 */
.timeline .time::before{
  content:"";
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  width:20px;
  height:20px;
  border-radius:50%;
  background:#9333EA;
  border:3px solid #fff;
  box-shadow:0 0 0 2px #9333EA;
  z-index:4;
}
.timeline .time::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#3b82f618,#ec489918,#9333EA18);
  background-size:200% 200%;
  opacity:0;
  transition:opacity .35s ease;
  z-index:0;
}
.timeline .time:hover{
  transform:scale(1.015);
  border-color:rgba(59,130,246,0.28);
  box-shadow:0 8px 24px rgba(59,130,246,0.14);
}
.timeline .time:hover::after{
  opacity:1;
  animation:timelineFlow 2.8s linear infinite;
}
.timeline .time > *{position:relative;z-index:1;}

/* 响应式：平板、手机自动切换竖版时间轴 */
@media (max-width:1024px){
  .timeline::before,.timeline::after {
    top:0;
    left:22px;
    width:4px;
    height:100%;
  }
  @keyframes timelineMainFlow {
    0% { top:0; }
    100% { top:70%; }
  }
  .timeline .time {
    padding-left:50px;
    padding-top:1.5rem;
  }
  .timeline .time::before {
    left:22px;
    top:1.5rem;
    transform:none;
  }
}

/* ===================== 动画关键帧 ===================== */
@keyframes serviceFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@keyframes borderShine{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}
@keyframes timelineFlow{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}
@keyframes timelineMainFlow {
  0% { left:0; }
  100% { left:70%; }
}
@keyframes heroMarquee{
  0%{background-position: 0% 0;}
  100%{background-position: 200% 0;}
}
.icon {
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 48px;
  line-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e8f2ff, #ecfbff);
  color: #1677ff;
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 15px;
  white-space: nowrap;
  box-sizing: border-box;
}