/*
 * 首页专属样式（index.html）
 * 设计 token（来自设计稿）：
 *   主色蓝 #0971CE / 强调橙 #F18903 / 深色 #010C25 / 页脚底 #01091A
 *   文字 #333 #3D3D3D #666 #999 / 边框 #D8D8D8 / 页面底 #F2F2F2
 *   字体：Alibaba PuHuiTi 3.0 / MiSans（客户端按系统字体栈回退）
 */

/* ---------- 通用小组件 ---------- */

/* 橙色胶囊按钮（查看更多 / 立即提交 / 了解更多产品） */
.btn-accent {
  border-radius: 80px;
  background-color: #F18903;
  color: #FFFFFF;
  transition: background-color 0.2s;
}
.btn-accent:hover {
  background-color: #d97b00;
}

/* 报价表单输入框：200×40 圆角5 边框#999 */
.form-input {
  width: 100%;
  max-width: 200px;
  height: 40px;
  border: 1px solid #999999;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.9);
}
.form-input:focus {
  outline: none;
  border-color: #0971CE;
}

/* 报价表单提交提示（.price-tip）：居中显示，提交中/成功/失败统一 */
.price-tip {
  text-align: center;
}

/* ---------- Banner 轮播（Swiper 11，库在 askin/swiper/，初始化在 index.html 页尾内联脚本） ---------- */

/* 圆点指示器：15px 圆点、净距 33px（Swiper 11 分页变量），几何与设计稿 111×15 SVG 一致；
   设计稿静态帧三点全白等大 → 覆盖 Swiper 默认未激活态（缩小 0.33 / 半透明 0.2）；激活色取强调橙 #F18903 */
.banner-swiper {
  --swiper-pagination-bullet-size: 15px;
  /* 该变量作用于每个圆点的左右 margin（两侧叠加）→ 16.5×2=33px 净距、48px 中心距，与设计稿 111×15 SVG 一致 */
  --swiper-pagination-bullet-horizontal-gap: 16.5px;
}
.banner-swiper .swiper-pagination {
  bottom: 55px;
}
.banner-swiper .swiper-pagination-bullet {
  background-color: #FFFFFF;
  opacity: 1;
  transform: scale(1);
  transition: background-color 0.3s, transform 0.3s;
}
.banner-swiper .swiper-pagination-bullet:hover {
  transform: scale(1.15);
}
.banner-swiper .swiper-pagination-bullet-active {
  background-color: #F18903;
}
.swiper-button-next,.swiper-button-prev {
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #F18903;
}
.swiper-button-prev {
  left: 40px;
}
.swiper-button-next {
    right: 40px;
}
.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 20px;
  font-weight: 900;
}

/* ---------- WOW 滚动入场动画（库在 askin/wow/，初始化在 common.js，元素加 wow animate__xxx 类） ---------- */

/* 动画时长统一 0.8s 的规则已迁至 common.css（全站接入 WOW 后共用），本页不再单独设置 */

/* ---------- 背景图视差（报价 / 公司简介，位移在 index.js） ---------- */

/* 报价区背景随滚动位移需裁掉溢出（公司简介区模板已带 overflow-hidden） */
.price {
  overflow: hidden;
}
.price > img {
  will-change: transform;
}

/* ---------- 产品分类 ---------- */

/* 分类图标：80×80 蓝色圆，内部元素绝对居中 */
.cat-icon {
  position: relative;
  display: flex;
  height: 80px;
  width: 80px;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background-color: #0971CE;
  transition: transform 0.2s;
}
.cat-icon > svg,
.cat-icon > img {
  position: relative;
  z-index: 1;
}
/* 智能影像类：摄像机白色机身（矩形238 35×25 圆角5） */
.cat-icon .cam-body {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 25px;
  margin: -12.5px 0 0 -17.5px;
  border: 3px solid #FFFFFF;
  border-radius: 5px;
}
/* 岗前检测类：盾牌上的橙色 + 号 */
.cat-icon .plus {
  position: absolute;
  right: 8px;
  top: -6px;
  color: #F18903;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}
/* 酒检毒检类：橙色小圆点（圆形21 4×4） */
.cat-icon .dot-4 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -8px 0 0 -5px;
  border-radius: 50%;
  background-color: #F18903;
}
/* 装备管理类：橙色圆形徽章（圆形14 17×17） */
.cat-icon .badge-circle {
  position: absolute;
  right: 2px;
  top: 18px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #F18903;
  z-index: 2;
}
.cat-item a:hover .cat-icon,
.cat-item button:hover .cat-icon {
  transform: translateY(-4px);
}
/* 激活的分类项：底部白色等腰三角（衔接下方白色产品卡的尖角造型），随 tab 激活态切换 */
.cat-item {
  position: relative;
}
.cat-item::after {
  content: '';
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 60px solid #FFFFFF;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
/* 分类项内的 tab 处于激活态（is-active 在 button 上）时显示三角；「更多产品」为链接不参与 */
.cat-item:has(.is-active)::after {
  opacity: 1;
}
/* 分类 tab 按钮：reset 默认按钮样式，视觉与「更多产品」链接项一致 */
.cat-item button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* 激活分类：文字为品牌蓝，其余 #333 */
.cat-name {
  font-size: 22px;
  line-height: 39px;
  color: #333333;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .cat-name {
    font-size: 28px;
  }
}
.cat-item .is-active .cat-name {
  color: #0971CE;
}
/* ≥3xl：6 个分类卡片自动分散对齐（覆盖页面 class 里的 3xl:justify-center + 3xl:gap-[60px]，
   首尾卡片贴齐内容区两侧，中间间距随容器宽度自适应均分；ul.cat-list 特异性高于单个工具类）。
   ul 在父级 md:flex-row 里默认收缩到内容宽、无空间可分，须 flex:1 撑满标题右侧剩余行宽 */
@media (min-width: 1900px) {
  ul.cat-list {
    flex: 1 1 0%;
    min-width: 0;
    justify-content: space-between;
    gap: 0;
  }
}

/* ---------- 产品卡 ---------- */

/* 产品分类面板切换动画：淡入 + 轻微上移（hover 即切时过场更柔和）。
   面板内产品卡的"从下往上飞入"用 WAAPI 由 index.js 驱动（每次切换重放），不走 CSS 类重启 */
.prod-panel:not([hidden]) {
  animation: panel-in 0.3s ease-out;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* 系统开启"减少动态效果"时关闭过场动画（解决方案轮播帧淡入 + Banner Swiper 淡入；Swiper 的
   transition-duration 为内联样式，需 !important 覆盖） */
@media (prefers-reduced-motion: reduce) {
  .prod-panel:not([hidden]) {
    animation: none;
  }
  .slide {
    transition: none;
  }
  .banner-swiper .swiper-slide {
    transition-duration: 0.01ms !important;
  }
}

.product-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  border: 1px solid #D8D8D8;
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}
.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.product-card span {
  display: block;
  padding: 14px 10px 24px;
  text-align: center;
  font-size: 18px;
  line-height: 31px;
  color: #3D3D3D;
}
@media (min-width: 1024px) {
  .product-card span {
    padding: 6px 10px 24px;
    font-size: 22px;
  }
}
.product-card:hover {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* ---------- 解决方案轮播 ---------- */

/* 帧淡入切换 */
.slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* tab：高64/80、宽度随内容；激活态深底白字，默认透明底灰字灰边 */
.sol-tab {
  height: 64px;
  padding: 0 30px;
  border-radius: 10px;
  border: 1px solid rgba(102, 102, 102, 0.5);
  font-size: 20px;
  color: #666666;
  transition: all 0.2s;
}
@media (min-width: 1024px) {
  .sol-tab {
    height: 80px;
    padding: 0 40px;
  }
}
.sol-tab:hover {
  color: #010C25;
  border-color: #010C25;
}
.sol-tab.is-active {
  background-color: #010C25;
  border-color: #010C25;
  color: #FFFFFF;
}
/* 激活指示箭头位置随帧移动（left 由 JS 控制） */
.sol-arrow {
  transition: left 0.3s ease;
}
.sol-nav {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
}
/* 在全局 .swiper-button-prev/next 的 40px 基础上各向外移 60px */
.sol-nav.sol-prev {
  left: -90px;
}
.sol-nav.sol-next {
  right: -90px;
}

/* ---------- 公司简介 ---------- */

/* 贴边大图裁切 img.about-bleed-* / 数据条 .stat-* / 资质列表 .qual-list / 专利数字 .patent-*
   与企业简介页（index_about-intro.htm 同款 section）共用，均在 common.css */

/* ---------- 新闻卡片 ---------- */

.news-card {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.news-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .news-card img {
    height: 300px;
  }
}
.news-card h3 {
  padding: 25px 25px 0;
  font-size: 18px;
  line-height: 36px;
  color: #333333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card p {
  padding: 0 25px;
  margin-top: 6px;
  font-weight: 300;
  font-size: 16px;
  line-height: 32px;
  color: #666666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px 20px;
  margin-top: 30px;
}
.news-card time {
  font-size: 14px;
  color: #999999;
}
.news-card div span {
  font-size: 14px;
  color: #999999;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.3);
}