/* ===========================================================
   内页通用增强样式（inner.css）
   作用范围：aboutUs / contactUs / creditReport / customsData / solution
   设计原则：只增强"动效 / hover / 响应式"，不覆盖任何内页专属布局
   （index.css 的样式全部留在首页，避免误伤内页）
   =========================================================== */

/* 兜底变量：内页已加载 reset.css 的 :root，这里仅作兼容兜底 */
:root{
  --ease: cubic-bezier(.215,.61,.355,1);
  --c-primary: #1664FF;
  --shadow-card: 0 10px 28px rgba(22,100,255,.12);
}

/* 产品详情页：面包屑承接下方内容背景，避免横幅与主区之间露出白带 */
.page-product-detail .site-breadcrumb{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 0 16px;
  box-sizing: border-box;
}
.page-product-detail .site-breadcrumb ol{
  width: min(var(--maxw, 1200px), calc(100% - 40px));
  margin: 0 auto;
  padding: 0;
}
.page-product-detail.page-credit-report .site-breadcrumb{
  background-color: #f5f8fd;
}
.page-product-detail.page-credit-report .report-sample{
  border-top: 0;
}
.page-product-detail.page-customs-data .site-breadcrumb{
  background-color: #F2F5FA;
}

/* ---------- 1. 响应式：去写死高度，窄屏自适应 ---------- */
@media (max-width: 1024px){
  .head-img{
    height: auto !important;
    padding: 64px 24px !important;
  }
  .head-img .content h2{ font-size: 34px !important; }
  .main .w1200,
  .main-content.w1200,
  .introduction.w1200,
  .service-box.w1200,
  .contact-us.w1200,
  .orderBox.w1200,
  .sampleBox.w1200,
  .includeBox.w1200,
  .customsContent.w1200{
    width: auto !important;
    max-width: 100%;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 768px){
  .head-img{
    padding: 48px 16px !important;
  }
  .head-img .content h2{ font-size: 26px !important; }
  .head-img .content p{ font-size: 15px !important; }
  .introduction, .service-box, .contact-us,
  .orderBox, .sampleBox, .includeBox{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* 海关数据：图文堆叠，去掉写死左距与固定宽 */
  .descriptionWord{ margin-left: 0 !important; }
  .imgs01, .imgs02{ width: 100% !important; }
  .imgs01 img, .imgs02 img{ width: 100% !important; height: auto !important; }
  /* 解决方案：卡片纵向堆叠 */
  .solution-first, .solution-second{ display: block !important; }
  .solution-item{ width: 100% !important; margin-bottom: 20px; }
  .solution-item img{ width: 100% !important; height: auto !important; }
  .customsContent li{ display: block !important; }
  /* 海关数据：描述区固定宽 725px → 100% */
  .descriptionWord{ width: 100% !important; }
  /* 关于我们：图文改为纵向堆叠 */
  .introduce-box{ flex-direction: column !important; gap: 30px !important; }
  .introduce-box-right{ width: 100% !important; }
  .introduce-box-right img{ width: 100% !important; height: auto !important; }
  .introductory-list{ flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; }
  .service-list{ flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; }
  .service-list li{ width: 100% !important; max-width: 360px !important; height: auto !important; }
  /* 联系我们：地图与联系信息自适应 */
  .map img{ width: 100% !important; height: auto !important; }
  .particulars{ padding-left: 20px !important; }
  .headquarters > li{ gap: 20px !important; flex-wrap: wrap !important; }
  /* 资信报告：标签盒占满宽度 */
  .tab-box{ width: 100% !important; flex: none !important; }
  /* 资信报告：样本列表换行、在线提交表单纵向堆叠 */
  .sample-list{ flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }
  .sample-list li{ width: 100% !important; max-width: 300px !important; }
  .form-box{ flex-direction: column !important; gap: 30px !important; }
  .submit-background{ width: 100% !important; max-width: 100% !important; height: auto !important; padding: 40px 24px !important; }
  .submit-text{ white-space: normal !important; font-size: 34px !important; line-height: 42px !important; }
  .arrows{ right: 10px !important; }
  .tab-head{ gap: 20px !important; flex-wrap: wrap !important; }
  /* 资信报告：提交按钮去掉左距并占满宽度 */
  .mess-from .btn-box{ padding-left: 0 !important; }
  .mess-from .btn-box button{ width: 100% !important; max-width: 100% !important; font-size: 20px !important; }
}

/* ---------- 2. 按钮 hover 微交互 ---------- */
.knowBtn,
.cooperationBtn,
.btn-primary{
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
  will-change: transform;
}
.knowBtn:hover,
.cooperationBtn:hover,
.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(22,100,255,.25);
}

/* ---------- 3. 图片 hover 轻放大 ---------- */
.imgs01 img,
.imgs02 img,
.solution-item img{
  transition: transform .5s var(--ease);
  will-change: transform;
}
.imgs01:hover img,
.imgs02:hover img,
.solution-item:hover img{
  transform: scale(1.03);
}

/* ---------- 4. 卡片 hover 上浮 ---------- */
.solution-item,
.service-item-box li,
.introductory-list li,
.orderList li,
.sample-list li,
.headquarters > li{
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.solution-item:hover,
.service-item-box li:hover,
.introductory-list li:hover,
.orderList li:hover,
.sample-list li:hover,
.headquarters > li:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

/* 联系方式行：柔和 hover，不做浮起方块，避免割裂感
   - 基础：圆角 + 内缩 padding 用负 margin 抵消，视觉位置不变
   - hover：背景微染 + 文字/图标转主色 + 图标轻微放大 */
.particulars li{
  border-radius: 8px;
  padding: 4px 12px;
  margin: 0 -12px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.particulars li img{
  transition: transform .3s var(--ease);
  will-change: transform;
}
.particulars li:hover{
  background-color: var(--c-bg-soft);
  color: var(--c-primary);
}
.particulars li:hover span{
  color: var(--c-primary);
}
.particulars li:hover img{
  transform: scale(1.12);
}

/* ---------- 5. Hero 视差（内页 head-img） ---------- */
.head-img{
  position: relative;
  overflow: hidden;
}
/* 装饰光斑层：随滚动做视差位移（位移量由 hero-parallax.js 写入 --hero-py） */
.head-img::before{
  content: "";
  position: absolute;
  left: -10%; right: -10%; top: -15%; bottom: -15%;
  background:
    radial-gradient(48% 42% at 80% 18%, rgba(32,157,217,.30), rgba(32,157,217,0) 70%),
    radial-gradient(46% 40% at 16% 82%, rgba(22,100,255,.24), rgba(22,100,255,0) 70%);
  transform: translate3d(0, var(--hero-py, 0px), 0);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
.head-img .content{ position: relative; z-index: 1; }
/* 桌面端：背景图固定形成真实视差；移动端关闭，避免 iOS 抖动 */
@media (min-width: 769px){
  .head-img{ background-attachment: fixed; }
}
@media (prefers-reduced-motion: reduce){
  .head-img::before{ display: none; }
  .head-img{ background-attachment: scroll; }
}

/* ---------- 6. 三页独立头图（AI 生成，同色系品牌色）---------- */
/* 用 div.head-img--xxx 提升权重，压住 reset.css 里 .head-img 的 background 简写 */
div.head-img.head-img--solution,
div.head-img.head-img--about,
div.head-img.head-img--contact{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
div.head-img.head-img--solution{ background-image: linear-gradient(rgba(10,22,45,.50), rgba(10,22,45,.42)), url(../images/head-solution.png); }
div.head-img.head-img--solution .content p{
    max-width: 680px;
    line-height: 1.9;
}
div.head-img.head-img--about{ background-image: linear-gradient(rgba(10,22,45,.32), rgba(10,22,45,.24)), url(../images/about-bg.png); background-size: cover; background-position: center; background-attachment: scroll; height: auto; aspect-ratio: 2 / 1; }
div.head-img.head-img--contact{ background-image: linear-gradient(90deg, rgba(10,22,45,.46) 0%, rgba(10,22,45,.32) 16%, rgba(10,22,45,.15) 30%, rgba(10,22,45,.03) 42%, rgba(10,22,45,0) 50%), url(../images/head-contact.png); }
/* 联系首图：关闭装饰蓝晕，右侧女生区零遮挡，原图肤色不偏色 */
div.head-img.head-img--contact::before{ display: none; }
/* 头图文字白化 + 投影，仅作用于三页独立头图，避免误伤 creditReport/customsData 等旧头图 */
div.head-img.head-img--solution .content h2,
div.head-img.head-img--about .content h2,
div.head-img.head-img--contact .content h2{ color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35); }
div.head-img.head-img--solution .content p,
div.head-img.head-img--about .content p,
div.head-img.head-img--contact .content p{ color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,0,0,.30); }
@media (max-width:768px){
  div.head-img.head-img--solution, div.head-img.head-img--about, div.head-img.head-img--contact{ background-attachment: scroll; }
}