/* ============================================================
   产品详情页 V2（升级版）—— 参照 tank.cn 结构重构
   结构：概览 / 视频 / 作业方式 / 应用场景 / 亮点 / 参数 / 配件 / FAQ / 关联方案
   视觉沿用全站设计语言（--rj-* 变量、圆角 12/6、深蓝科技感）
   ============================================================ */

/* 锚点跳转时避开吸顶导航 */
.rjv2-hero[id],
.rjv2-sec[id] { scroll-margin-top: calc(var(--rj-nav-h) + 20px); }

/* ---------- 左侧贴边锚点导航（PC 端） ---------- */
.rjv2-nav {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 30;
}
.rjv2-nav__inner {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0;
}
.rjv2-nav__link {
  display: block; padding: 9px 12px 9px 14px; font-size: 13px; font-weight: 600;
  color: var(--rj-muted); text-decoration: none;
  border-left: 3px solid transparent;
  background: rgba(255,255,255,.6); backdrop-filter: blur(6px);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  border-radius: 0 var(--rj-radius-sm) var(--rj-radius-sm) 0;
}
.rjv2-nav__link:hover { color: var(--rj-primary); background: rgba(255,255,255,.95); }
.rjv2-nav__link.is-active { color: var(--rj-primary); border-left-color: var(--rj-primary); background: #fff; box-shadow: 0 4px 14px rgba(30,24,207,.12); }

/* 移动端：左侧导航退化为顶部横向滚动条 */
@media (max-width: 900px) {
  .rjv2-nav { position: sticky; top: var(--rj-nav-h); left: 0; right: 0; transform: none; width: 100%; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--rj-line); }
  .rjv2-nav__inner { flex-direction: row; overflow-x: auto; padding: 0 12px; scrollbar-width: none; }
  .rjv2-nav__inner::-webkit-scrollbar { display: none; }
  .rjv2-nav__link { flex: 0 0 auto; padding: 13px 14px; border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; }
  .rjv2-nav__link.is-active { border-bottom-color: var(--rj-primary); box-shadow: none; }
}

/* ---------- 通用区块头 ---------- */
.rjv2-sec { padding: 88px 0; }
.rjv2-sec--dark { background: var(--rj-deep); color: #fff; }
.rjv2-sec--tint { background: var(--rj-tint); }
.rjv2-sec--gray { background: #EEF1F6; }
.rjv2-sec__head { max-width: 760px; }
.rjv2-sec__kicker { font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--rj-primary); }
.rjv2-sec--dark .rjv2-sec__kicker { color: #8ab6ff; }
.rjv2-sec__title { margin-top: 12px; font-size: 34px; font-weight: 800; color: var(--rj-navy); }
.rjv2-sec--dark .rjv2-sec__title { color: #fff; }
.rjv2-sec__lead { margin-top: 14px; font-size: 16px; line-height: 1.8; color: var(--rj-muted); }
.rjv2-sec--dark .rjv2-sec__lead { color: rgba(255,255,255,.72); }

/* ---------- 1. 产品概览（完整首屏） ---------- */
.rjv2-hero {
  background:
    radial-gradient(1100px 500px at 88% -10%, rgba(64,158,255,.22), transparent 60%),
    linear-gradient(150deg, #18246F 0%, var(--rj-navy) 55%, var(--rj-deep) 100%);
  color: #fff; padding: 48px 0 56px; position: relative; overflow: hidden;
  min-height: calc(100vh - var(--rj-nav-h));
  display: flex; align-items: center;
}
/* 首屏底图：品牌氛围图（静态） */
.rjv2-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url('../img/banners/banner-2.jpg') center / cover no-repeat;
}
/* 遮罩：左侧压深保证文字对比度，右侧渐弱露出底图；整体透明度缓慢呼吸 */
.rjv2-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(90deg, rgba(13,21,75,.96) 0%, rgba(13,21,75,.82) 48%, rgba(13,21,75,.60) 100%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
  will-change: opacity;
  animation: rjv2-hero-breathe 12s ease-in-out infinite alternate;
}
@keyframes rjv2-hero-breathe {
  from { opacity: 1; }
  to   { opacity: .58; }
}
.rjv2-hero__inner { max-width: var(--rj-maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; width: 100%; }
.rjv2-hero__crumb { font-size: 13px; color: rgba(255,255,255,.62); }
.rjv2-hero__crumb a { color: #8ab6ff; }
.rjv2-hero__crumb a:hover { color: #fff; }
.rjv2-hero__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; margin-top: 36px; }
.rjv2-hero__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--rj-radius-sm);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #cfe3ff;
}
.rjv2-hero__title { margin-top: 18px; font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.2; letter-spacing: .01em; }
.rjv2-hero__sub { margin-top: 16px; font-size: 20px; font-weight: 600; color: #bcd6ff; }
.rjv2-hero__desc { margin-top: 20px; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.78); max-width: 640px; }
.rjv2-hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
.rjv2-hero__chips { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rjv2-hero__chip {
  padding: 14px 16px; border-radius: var(--rj-radius);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600;
}
.rjv2-hero__chip svg { color: #8ab6ff; flex: none; }
.rjv2-hero__media { position: relative; }
.rjv2-hero__main { position: relative; background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 30px 80px rgba(5,10,40,.45); aspect-ratio: 1/1; width: min(52vh, 100%); max-width: 520px; margin: 0 auto; }
.rjv2-hero__media-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .35s ease; padding: 22px;
}
.rjv2-hero__media-img.is-active { opacity: 1; }
.rjv2-hero__thumbs { display: flex; gap: 10px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.rjv2-hero__thumb {
  width: 56px; height: 56px; padding: 0; border-radius: var(--rj-radius-sm);
  border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12);
  cursor: pointer; overflow: hidden; transition: border-color .2s ease, background .2s ease;
}
.rjv2-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rjv2-hero__thumb.is-active { border-color: #fff; background: rgba(255,255,255,.28); }
.rjv2-hero__badge {
  position: absolute; left: 20px; bottom: 20px; padding: 10px 18px; border-radius: var(--rj-radius-sm);
  background: rgba(13,21,75,.85); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18);
  font-size: 13px; color: #cfe3ff;
}
.rjv2-hero__badge b { display: block; font-size: 22px; font-weight: 800; color: #fff; }

/* ---------- 2. 产品视频 ---------- */
.rjv2-video { position: relative; }
.rjv2-video__frame {
  margin-top: 36px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(13,21,75,.12); aspect-ratio: 16/8.4;
  background: #000; box-shadow: 0 18px 44px rgba(13,21,75,.14);
}
.rjv2-video__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 3. 作业方式 ---------- */
.rjv2-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; counter-reset: step; }
.rjv2-work__item {
  position: relative; background: #fff; border: 1px solid var(--rj-line);
  border-radius: var(--rj-radius); padding: 34px 26px 30px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.rjv2-work__item:hover { transform: translateY(-4px); box-shadow: var(--rj-shadow); }
.rjv2-work__num {
  position: absolute; right: 18px; top: 8px; font-size: 72px; font-weight: 800;
  line-height: 1; color: rgba(30,24,207,.08); counter-increment: step;
}
.rjv2-work__num::before { content: '0' counter(step); }
.rjv2-work__icon {
  width: 52px; height: 52px; border-radius: var(--rj-radius);
  background: var(--rj-tint); border: 1px solid var(--rj-line);
  display: flex; align-items: center; justify-content: center; color: var(--rj-primary);
}
.rjv2-work__title { margin-top: 20px; font-size: 18px; font-weight: 700; color: var(--rj-navy); }
.rjv2-work__desc { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--rj-muted); }

/* ---------- 4. 应用场景 ---------- */
.rjv2-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.rjv2-scene {
  overflow: hidden; background: #fff; border: 1px solid var(--rj-line);
  border-radius: var(--rj-radius); transition: transform .25s ease, box-shadow .25s ease;
}
.rjv2-scene:hover { transform: translateY(-4px); box-shadow: var(--rj-shadow); }
.rjv2-scene__media { height: 190px; overflow: hidden; background: var(--rj-tint); }
.rjv2-scene__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.rjv2-scene:hover .rjv2-scene__media img { transform: scale(1.06); }
.rjv2-scene__body { padding: 20px 22px 24px; }
.rjv2-scene__name { font-size: 17px; font-weight: 700; color: var(--rj-navy); }
.rjv2-scene__desc { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--rj-muted); }

/* ---------- 5. 产品亮点 ---------- */
.rjv2-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.rjv2-feat {
  display: flex; gap: 18px; background: #fff; border: 1px solid var(--rj-line);
  border-radius: var(--rj-radius); padding: 26px; transition: transform .25s ease, box-shadow .25s ease;
}
.rjv2-feat:hover { transform: translateY(-4px); box-shadow: var(--rj-shadow); }
.rjv2-feat__icon {
  flex: none; width: 52px; height: 52px; border-radius: var(--rj-radius);
  background: linear-gradient(135deg, var(--rj-primary), var(--rj-primary-soft));
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.rjv2-feat__title { font-size: 17px; font-weight: 700; color: var(--rj-navy); }
.rjv2-feat__desc { margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--rj-muted); }

/* ---------- 6. 产品参数 ---------- */
.rjv2-specs { margin-top: 44px; border: 1px solid var(--rj-line); border-radius: var(--rj-radius); overflow: hidden; }
.rjv2-specs__row {
  display: grid; grid-template-columns: 280px 1fr; gap: 0;
}
.rjv2-specs__row:nth-child(odd) { background: #fff; }
.rjv2-specs__row:nth-child(even) { background: var(--rj-tint); }
.rjv2-specs__k {
  padding: 16px 22px; font-size: 14px; font-weight: 600; color: var(--rj-navy);
  border-right: 1px solid var(--rj-line); display: flex; align-items: center;
}
.rjv2-specs__v { padding: 16px 22px; font-size: 14px; line-height: 1.7; color: var(--rj-muted); }
.rjv2-specs__note { margin-top: 14px; font-size: 12px; color: var(--rj-muted); }

/* ---------- 7. 配件清单 ---------- */
.rjv2-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.rjv2-part {
  background: #fff; border: 1px solid var(--rj-line); border-radius: var(--rj-radius);
  padding: 26px 22px 24px; text-align: left; transition: transform .25s ease, box-shadow .25s ease;
}
.rjv2-part:hover { transform: translateY(-4px); box-shadow: var(--rj-shadow); }
.rjv2-part__name { font-size: 17px; font-weight: 700; color: var(--rj-navy); }
.rjv2-part__desc { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--rj-muted); }
.rjv2-part__tag {
  display: inline-block; margin-top: 14px; padding: 3px 10px; border-radius: var(--rj-radius-sm);
  font-size: 12px; font-weight: 600; color: var(--rj-primary); background: var(--rj-tint);
}

/* ---------- 8. 常见问题 ---------- */
.rjv2-faq { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rjv2-faq__item { background: #fff; border: 1px solid var(--rj-line); border-radius: var(--rj-radius); overflow: hidden; }
.rjv2-faq__q {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 20px 24px; cursor: pointer; background: none; border: 0;
  font-size: 16px; font-weight: 700; color: var(--rj-navy); font-family: inherit;
}
.rjv2-faq__q .rjv2-faq__mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--rj-tint); color: var(--rj-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; transition: transform .25s ease, background .25s ease, color .25s ease;
}
.rjv2-faq__item.is-open .rjv2-faq__mark { transform: rotate(45deg); background: var(--rj-primary); color: #fff; }
.rjv2-faq__a {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.rjv2-faq__a p { padding: 0 24px 22px 64px; font-size: 14px; line-height: 1.9; color: var(--rj-muted); }

/* ---------- 9. 关联解决方案 ---------- */
.rjv2-sols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 44px; }
.rjv2-sol {
  display: flex; align-items: center; gap: 22px; background: #fff;
  border: 1px solid var(--rj-line); border-radius: var(--rj-radius); padding: 24px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.rjv2-sol:hover { transform: translateY(-4px); box-shadow: var(--rj-shadow); }
.rjv2-sol__media { flex: none; width: 150px; height: 96px; border-radius: var(--rj-radius-sm); overflow: hidden; background: var(--rj-tint); }
.rjv2-sol__media img { width: 100%; height: 100%; object-fit: cover; }
.rjv2-sol__name { font-size: 17px; font-weight: 700; color: var(--rj-navy); }
.rjv2-sol__desc { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--rj-muted); }
.rjv2-sol__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--rj-primary); }
.rjv2-sol:hover .rjv2-sol__more { gap: 10px; }

/* ---------- CTA 大横幅 ---------- */
.rjv2-cta {
  background:
    radial-gradient(900px 420px at 12% 120%, rgba(64,158,255,.28), transparent 60%),
    linear-gradient(135deg, var(--rj-navy), var(--rj-deep));
  color: #fff; text-align: center; padding: 84px 24px;
}
.rjv2-cta__title { font-size: 34px; font-weight: 800; }
.rjv2-cta__desc { margin: 16px auto 0; max-width: 640px; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.75); }
.rjv2-cta__btns { margin-top: 30px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.rjv2-cta__btns button.rj-btn { cursor: pointer; font-family: inherit; }

/* ---------- 响应式 ---------- */
/* PC 端首屏文案整体右移，避开左侧贴边锚点导航 */
@media (min-width: 901px) {
  .rjv2-hero__text { padding-left: 88px; }
}
/* PC 端视频区收窄至约一半宽度并左对齐，避免占满整屏 */
@media (min-width: 961px) {
  .rjv2-video__frame { max-width: 50%; margin-right: auto; }
}
@media (max-width: 1100px) {
  .rjv2-hero__media { max-width: 480px; width: 100%; margin: 0 auto; }
  .rjv2-hero__chips { grid-template-columns: repeat(2, 1fr); }
  .rjv2-scenes, .rjv2-feats { grid-template-columns: repeat(2, 1fr); }
  .rjv2-parts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .rjv2-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  /* 单列堆叠时产品图优先，先看图再看文字 */
  .rjv2-hero__media { order: -1; }
}
/* ---------- 移动端专项适配：按手机重排，不做等比缩放 ---------- */
@media (max-width: 760px) {
  /* 区块留白与标题层级整体下沉一档 */
  .rjv2-sec { padding: 40px 0; }
  .rjv2-sec__kicker { font-size: 12px; }
  .rjv2-sec__title { margin-top: 8px; font-size: 22px; }
  .rjv2-sec__lead { margin-top: 10px; font-size: 13px; line-height: 1.7; }

  /* 首屏：图 → 标题 → 亮点 → 按钮，字号与留白收窄 */
  .rjv2-hero { padding: 20px 0 28px; }
  .rjv2-hero__inner { padding: 0 16px; }
  .rjv2-hero__main { padding: 12px; }
  .rjv2-hero__media-img { padding: 12px; }
  .rjv2-hero__thumb { width: 48px; height: 48px; }
  .rjv2-hero__title { margin-top: 12px; font-size: 25px; }
  .rjv2-hero__sub { margin-top: 10px; font-size: 15px; }
  .rjv2-hero__desc { margin-top: 12px; font-size: 14px; line-height: 1.75; }
  /* 产品卖点：标签化排版，两列一行，字号与勾标同步收小 */
  .rjv2-hero__chips { margin-top: 18px; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rjv2-hero__chip { padding: 9px 10px; gap: 6px; font-size: 12px; line-height: 1.4; border-radius: var(--rj-radius-sm); }
  .rjv2-hero__chip svg { width: 14px; height: 14px; }
  .rjv2-hero__cta { margin-top: 20px; gap: 10px; }
  .rjv2-hero__cta .rj-btn { flex: 1; }

  /* 视频：手机上按 16:9 展现，避免过扁 */
  .rjv2-video__frame { margin-top: 22px; aspect-ratio: 16/9; border-radius: var(--rj-radius); }

  /* 作业方式：左图标、右标题与说明 */
  .rjv2-work { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .rjv2-work__item {
    display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px;
    align-items: center; padding: 14px;
  }
  .rjv2-work__icon { grid-row: 1 / 3; width: 44px; height: 44px; }
  .rjv2-work__title { grid-column: 2; margin-top: 0; font-size: 15px; }
  .rjv2-work__desc { grid-column: 2; margin-top: 0; font-size: 12.5px; line-height: 1.6; }
  .rjv2-work__num { font-size: 40px; right: 12px; top: 4px; }

  /* 应用场景：两列紧凑卡 */
  .rjv2-scenes { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
  .rjv2-scene__media { height: 104px; }
  .rjv2-scene__body { padding: 10px 12px 12px; }
  .rjv2-scene__name { font-size: 14px; }
  .rjv2-scene__desc { margin-top: 4px; font-size: 12px; line-height: 1.55; }

  /* 产品亮点：左图标、右文字紧凑行 */
  .rjv2-feats { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .rjv2-feat { gap: 12px; padding: 14px; }
  .rjv2-feat__icon { width: 44px; height: 44px; }
  .rjv2-feat__title { font-size: 15px; }
  .rjv2-feat__desc { margin-top: 4px; font-size: 12.5px; line-height: 1.65; }

  /* 产品参数：保留「左项右值」，像原生信息表 */
  .rjv2-specs { margin-top: 22px; }
  .rjv2-specs__row { grid-template-columns: 96px 1fr; }
  .rjv2-specs__k { padding: 11px 12px; font-size: 13px; border-right: 1px solid var(--rj-line); border-bottom: 0; }
  .rjv2-specs__v { padding: 11px 12px; font-size: 13px; }
  .rjv2-specs__note { margin-top: 10px; }

  /* 配件清单：标配/选配标签移到卡片右上角 */
  .rjv2-parts { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .rjv2-part { position: relative; padding: 14px 64px 14px 14px; }
  .rjv2-part__name { font-size: 15px; }
  .rjv2-part__desc { margin-top: 4px; font-size: 12.5px; line-height: 1.65; }
  .rjv2-part__tag { position: absolute; top: 13px; right: 12px; margin-top: 0; }

  /* 常见问题 */
  .rjv2-faq { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  .rjv2-faq__q { padding: 14px 16px; gap: 10px; font-size: 14.5px; }
  .rjv2-faq__q .rjv2-faq__mark { width: 22px; height: 22px; font-size: 14px; }
  .rjv2-faq__a p { padding: 0 16px 14px; font-size: 13px; line-height: 1.75; }

  /* 关联方案：左图右文紧凑行 */
  .rjv2-sols { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .rjv2-sol { gap: 12px; padding: 12px; }
  .rjv2-sol__media { width: 104px; height: 74px; }
  .rjv2-sol__name { font-size: 15px; }
  .rjv2-sol__desc { margin-top: 4px; font-size: 12.5px; line-height: 1.6; }
  .rjv2-sol__more { margin-top: 6px; font-size: 12.5px; }

  /* 底部 CTA：文案收窄，按钮整行 */
  .rjv2-cta { padding: 44px 16px; }
  .rjv2-cta__title { font-size: 22px; }
  .rjv2-cta__desc { margin-top: 10px; font-size: 13px; line-height: 1.7; }
  .rjv2-cta__btns { margin-top: 20px; flex-direction: column; gap: 10px; }
  .rjv2-cta__btns .rj-btn { width: 100%; }

  /* 触摸端取消 hover 位移与重投影 */
  .rjv2-work__item:hover, .rjv2-scene:hover, .rjv2-feat:hover,
  .rjv2-part:hover, .rjv2-sol:hover { transform: none; box-shadow: none; }
  .rjv2-scene:hover .rjv2-scene__media img { transform: none; }
}