/* ============================================
   巨鼎包装 · 首页（Hero/数据带/关于/产品/设备/资讯/CTA）
   依赖 tokens.css + site.css
   ============================================ */

/* ===== Hero ===== */
.hero { padding: 96px 0 0; overflow: hidden; }
.hero .en { font-size: 12px; letter-spacing: .42em; color: var(--jd-red); font-weight: 700; }
.hero h1 {
  font-size: var(--jd-text-hero); font-weight: 900; line-height: 1.08;
  margin: 26px 0 30px; letter-spacing: .01em;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line span { display: block; transform: translateY(110%); transition: transform var(--jd-dur-slow) var(--jd-ease); }
.hero.in h1 .line span { transform: none; }
.hero h1 .line:nth-child(2) span { transition-delay: .12s; }
.hero h1 em { font-style: normal; color: var(--jd-red); }
.hero .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.hero p { font-size: 15px; line-height: 2.1; color: var(--jd-soft); max-width: 52ch; }
.hero .mark { position: relative; margin-top: 70px; }
.hero .mark .wm {
  position: absolute; right: -8px; top: -52px; font-size: 120px; font-weight: 900;
  color: #f4f4f4; letter-spacing: .04em; z-index: 0; user-select: none; font-family: Arial, sans-serif;
}
.hero .mark img { position: relative; z-index: 1; width: 100%; height: 460px; object-fit: cover; }
.hero .mark .cap {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--jd-ink); color: #fff; font-size: 12px; letter-spacing: .2em; padding: 12px 22px;
}

/* ===== 数据带 ===== */
.facts { border-left: 1px solid var(--jd-hair); border-right: 1px solid var(--jd-hair); border-bottom: 1px solid var(--jd-hair); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.fact { padding: 42px 20px; text-align: center; border-right: 1px solid var(--jd-hair); }
.fact:last-child { border: none; }
.fact b { font-size: 44px; font-weight: 900; font-variant-numeric: tabular-nums; }
.fact b i { font-style: normal; color: var(--jd-red); font-size: 20px; margin-left: 2px; }
.fact span { display: block; font-size: 12px; color: var(--jd-faint); margin-top: 10px; letter-spacing: .24em; }

/* ===== 关于 ===== */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.about .tx h3 { font-size: 32px; font-weight: 900; margin: 12px 0 22px; }
.about .tx p { font-size: 14.5px; line-height: 2.1; color: var(--jd-soft); margin-bottom: 16px; }
.about .tx .more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  color: var(--jd-ink); font-size: 13px; font-weight: 700; text-decoration: none;
}
.about .tx .more i { font-style: normal; color: var(--jd-red); transition: transform .3s var(--jd-ease); }
.about .tx .more:hover i { transform: translateX(6px); }
.about .im { position: relative; }
.about .im::before {
  content: ""; position: absolute; left: -18px; top: -18px; width: 110px; height: 110px;
  border-top: 2px solid var(--jd-ink); border-left: 2px solid var(--jd-ink);
}
.about .im img { width: 100%; height: 400px; object-fit: cover; position: relative; }
.about .im .lg-badge {
  position: absolute; right: -20px; bottom: -20px; z-index: 2;
  background: #fff; border: 1px solid var(--jd-ink); padding: 14px;
  display: flex; align-items: center; gap: 10px;
}
.about .im .lg-badge img { width: 34px; height: 34px; object-fit: contain; }
.about .im .lg-badge b { font-size: 13px; letter-spacing: .08em; }

/* ===== 产品 ===== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card { text-decoration: none; color: var(--jd-ink); }
.card .im { overflow: hidden; position: relative; }
.card .im img {
  width: 100%; height: 260px; object-fit: cover;
  filter: grayscale(20%); transition: transform var(--jd-dur-normal) var(--jd-ease), filter .5s;
}
.card:hover .im img { transform: scale(1.06); filter: none; }
.card .im .idx {
  position: absolute; top: 0; left: 0; background: var(--jd-ink); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; padding: 8px 14px;
  transition: background var(--jd-dur-fast);
}
.card:hover .im .idx { background: var(--jd-red); }
.card h4 {
  font-size: 19px; font-weight: 800; margin-top: 20px; padding-top: 16px;
  border-top: 2px solid var(--jd-ink); display: flex; justify-content: space-between; align-items: center;
}
.card h4 i { font-style: normal; color: var(--jd-red); opacity: 0; transform: translateX(-8px); transition: .35s var(--jd-ease); }
.card:hover h4 i { opacity: 1; transform: none; }
.card p { font-size: 13px; color: #777; margin-top: 10px; line-height: 1.8; }

/* ===== 设备（深色反转型）===== */
.equip { background: var(--jd-bg-dark); color: #fff; }
.equip .tt h2 { color: #fff; }
.equip .tt a { color: #fff; border-color: #fff; }
.equip .tt a:hover { color: var(--jd-red); border-color: var(--jd-red); }
.eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #333; }
.eq { background: var(--jd-bg-dark); text-decoration: none; color: #fff; padding-bottom: 28px; transition: background .3s; }
.eq:hover { background: #1c1c1c; }
.eq .im { overflow: hidden; }
.eq img { width: 100%; height: 220px; object-fit: cover; opacity: .85; transition: transform var(--jd-dur-normal) var(--jd-ease), opacity .4s; }
.eq:hover img { transform: scale(1.05); opacity: 1; }
.eq h4 { font-size: 16px; font-weight: 700; margin: 22px 26px 0; padding-left: 14px; border-left: 3px solid var(--jd-red); }
.eq p { font-size: 12.5px; color: #888; margin: 10px 26px 0; line-height: 1.8; }

/* ===== 资讯 ===== */
.news { border-top: 1px solid var(--jd-hair); }
.n-item {
  display: grid; grid-template-columns: 110px 1fr 40px; gap: 32px; align-items: center;
  padding: 28px 6px; border-bottom: 1px solid var(--jd-hair);
  text-decoration: none; color: var(--jd-ink);
  transition: transform .35s var(--jd-ease), background .3s;
}
.n-item:hover { background: #fafafa; transform: translateX(16px); }
.n-item .dt b { font-size: 28px; font-weight: 900; display: block; }
.n-item .dt span { font-size: 12px; color: var(--jd-faint); }
.n-item h4 { font-size: 17px; font-weight: 700; transition: color .3s; }
.n-item:hover h4 { color: var(--jd-red); }
.n-item p { font-size: 13px; color: var(--jd-faint); margin-top: 6px; }
.n-item .arr { font-size: 18px; color: var(--jd-faint); transition: .35s var(--jd-ease); }
.n-item:hover .arr { color: var(--jd-red); transform: translateX(6px); }

/* ===== 底部 CTA ===== */
.cta-sec { border-top: 1px solid var(--jd-ink); padding: 110px 0; text-align: center; position: relative; overflow: hidden; }
.cta-sec .bg-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 420px; opacity: .05; z-index: 0; }
.cta-sec .in { position: relative; z-index: 1; }
.cta-sec h2 { font-size: var(--jd-text-cta); font-weight: 900; line-height: 1.25; }
.cta-sec h2 em { font-style: normal; color: var(--jd-red); }
.cta-sec p { color: var(--jd-soft); margin: 20px 0 36px; font-size: 15px; }
.cta-sec .tel { display: inline-block; margin-top: 26px; font-size: 13px; color: var(--jd-faint); letter-spacing: .1em; }
.cta-sec .tel b { font-size: 22px; color: var(--jd-ink); letter-spacing: .04em; margin-left: 8px; }

/* ===== 响应式 ===== */
@media (max-width: 900px) {
  .hero { padding-top: 56px; }
  .hero .row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero .mark img { height: 300px; }
  .hero .mark .wm { font-size: 64px; top: -30px; }
  .facts .wrap { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2) { border-right: none; }
  .fact:nth-child(1), .fact:nth-child(2) { border-bottom: 1px solid var(--jd-hair); }
  .about { grid-template-columns: 1fr; gap: 40px; }
  .cards { grid-template-columns: 1fr; }
  .eq-grid { grid-template-columns: 1fr; }
  .n-item { grid-template-columns: 80px 1fr 24px; gap: 16px; }
  .cta-sec .bg-logo { width: 280px; }
}