
.qf-strength,
.qf-strength *{
  box-sizing:border-box;
  font-family:"Montserrat-Light","Montserrat",Arial,sans-serif;
}

.qf-strength{
  padding:52px 18px;
  background:#f6f6f8;
  color:#111;
}

.qf-strength__in{
  max-width:1440px;
  margin:auto;
}

.qf-strength h2{
  margin:0 0 34px;
  font-size:40px;
  font-weight:300;
}


/* =========================
   顶部大图
========================= */

.qf-strength__hero{
  overflow:hidden;
  border-radius:6px 6px 0 0;
}

.qf-strength__hero img{
  display:block;
  width:100%;
  aspect-ratio:2.45/1;
  object-fit:cover;
}


/* =========================
   六项工厂实力
========================= */

.qf-strength__facts{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
  padding:24px 18px;

  background:
    linear-gradient(
      135deg,
      #1268ec,
      #0738bd
    );

  color:#fff;
  border-radius:0 0 6px 6px;
  overflow:visible;
}

.qf-strength__fact{
  position:relative;
  text-align:center;
  padding:4px 18px;
  z-index:1;
}


/* 每项之间白色分隔线 */

.qf-strength__fact:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:10%;
  width:1px;
  height:80%;
  background:rgba(255,255,255,.45);
}


/* 标题 */

.qf-strength__fact b{
  display:block;
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
}


/* 描述 */

.qf-strength__fact span{
  display:block;
  font-size:15px;
  line-height:1.4;
  font-weight:300;
}


/* =========================================
   六项实力 Hover 联动
========================================= */

@media (min-width:901px) and (hover:hover) and (pointer:fine){

  .qf-strength__fact{
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      opacity .32s ease,
      filter .32s ease;

    transform-origin:center center;
  }

  .qf-strength__fact b{
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      opacity .32s ease;
  }

  .qf-strength__fact span{
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      opacity .32s ease;
  }

  .qf-strength__facts:hover
  .qf-strength__fact{
    transform:scale(.91);
    opacity:.48;
    filter:saturate(.85);
  }

  .qf-strength__facts
  .qf-strength__fact:hover{
    transform:scale(1.12);
    opacity:1;
    filter:none;
    z-index:10;
  }

  .qf-strength__facts
  .qf-strength__fact:hover b{
    transform:scale(1.06);
  }

  .qf-strength__facts
  .qf-strength__fact:hover span{
    transform:scale(1.02);
  }
}


/* =========================
   下方四张图片
========================= */

.qf-strength__gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:14px;
}

.qf-strength__card{
  overflow:hidden;
  border-radius:6px;
  background:#fff;
}

.qf-strength__photo{
  width:100%;
  aspect-ratio:.9/1;
  overflow:hidden;
  background:#eee;
}

.qf-strength__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.qf-strength__card:hover
.qf-strength__photo img{
  transform:scale(1.04);
}

.qf-strength__label{
  padding:13px 8px;
  text-align:center;
  color:#0759ff;
  font-size:16px;
  font-weight:700;
}


/* =========================
   01 → 06 文字顺序聚焦
   只放大文字，不移动蓝色区域
========================= */

@media (min-width:901px) and (prefers-reduced-motion:no-preference){

  .qf-strength__fact b,
  .qf-strength__fact span{
    transform-origin:center center;
    will-change:transform,opacity,filter;
  }

  /* 播放时只弱化文字，不改变每个 fact 的位置和尺寸 */
  .qf-strength.is-text-sequence .qf-strength__fact{
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
  }

  .qf-strength.is-text-sequence .qf-strength__fact b,
  .qf-strength.is-text-sequence .qf-strength__fact span{
    transform:scale(1);
    opacity:.34;
    filter:saturate(.72);
    transition:
      transform .22s cubic-bezier(.22,.61,.36,1),
      opacity .18s ease,
      filter .18s ease !important;
  }

  /* 当前 01 → 06 的文字轻微放大到 105% */
  .qf-strength.is-text-sequence
  .qf-strength__fact.is-text-active b,
  .qf-strength.is-text-sequence
  .qf-strength__fact.is-text-active span{
    transform:scale(1.05);
    opacity:1;
    filter:none;
  }

  /*
    播放期间禁止原 Hover 把整个 fact 放大，
    避免和 01→06 的文字动画打架。
  */
  .qf-strength.is-text-sequence
  .qf-strength__facts:hover
  .qf-strength__fact,
  .qf-strength.is-text-sequence
  .qf-strength__facts
  .qf-strength__fact:hover{
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
  }

  .qf-strength.is-text-sequence
  .qf-strength__fact:hover b,
  .qf-strength.is-text-sequence
  .qf-strength__fact:hover span{
    transform:scale(1) !important;
  }

  .qf-strength.is-text-sequence
  .qf-strength__fact.is-text-active:hover b,
  .qf-strength.is-text-sequence
  .qf-strength__fact.is-text-active:hover span{
    transform:scale(1.05) !important;
  }
}


/* =========================
   平板
========================= */

@media(max-width:900px){

  .qf-strength__facts{
    grid-template-columns:repeat(3,1fr);
  }

  .qf-strength__fact::after{
    display:block;
  }

  .qf-strength__fact:nth-child(3n)::after{
    display:none;
  }

  .qf-strength__gallery{
    grid-template-columns:repeat(2,1fr);
  }
}


/* =========================
   手机
========================= */

@media(max-width:600px){

  .qf-strength{
    padding:34px 14px;
  }

  .qf-strength h2{
    margin-bottom:22px;
    font-size:30px;
  }

  .qf-strength__hero img{
    aspect-ratio:1.45/1;
  }

  .qf-strength__facts{
    grid-template-columns:repeat(2,1fr);
    padding:16px 8px;
  }

  .qf-strength__fact{
    padding:8px 12px;
  }

  .qf-strength__fact::after{
    display:none;
  }

  .qf-strength__fact:nth-child(odd)::after{
    content:"";
    display:block;
    position:absolute;
    right:0;
    top:10%;
    width:1px;
    height:80%;
    background:rgba(255,255,255,.45);
  }

  .qf-strength__fact b,
  .qf-strength__label{
    font-size:16px;
  }

  .qf-strength__fact span{
    font-size:16px;
  }

  .qf-strength__gallery{
    gap:8px;
  }

  .qf-strength__label{
    padding:10px 5px;
    min-height:58px;
  }
}
