/* ============================================================
   qianjing.html · 八大员就业前景
   题头⑥ 深色题头 + 统计数字
   区块：zigzag 图文 / 3 列需求卡 / 时间轴 / 数字大卡 / FAQ / 行动带
   ============================================================ */

/* ---------- 题头：深色 + 背景图 + 统计数字 ---------- */
.qj-hero{
  position:relative; padding:150px 0 90px;
  background:#0F1F17; color:#fff; overflow:hidden;
}
.qj-hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.32;
}
.qj-hero-mask{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(15,31,23,.92) 0%, rgba(15,31,23,.72) 55%, rgba(22,72,48,.88) 100%);
}
.qj-hero-inner{ position:relative; }
.qj-crumbs{ color:#9FB7A8; padding:0 0 22px; }
.qj-crumbs a{ color:#D7E5DC; }
.qj-crumbs span.sep{ color:rgba(255,255,255,.25); }
.qj-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:3px; color:var(--orange-2);
  margin-bottom:16px;
}
.qj-kicker::before{ content:""; width:26px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--orange),var(--green-2)); }
.qj-title{ font-size:44px; font-weight:800; line-height:1.28; letter-spacing:.5px; }
.qj-sub{ margin-top:18px; max-width:720px; color:#C6D6CC; font-size:16px; line-height:1.9; }

.qj-stats{
  margin-top:46px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.qj-stat{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:20px 22px; backdrop-filter:blur(6px);
}
.qj-stat b{
  display:block; font-size:36px; font-weight:800; line-height:1;
  background:linear-gradient(120deg,var(--orange-2),var(--green-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.qj-stat span{ display:block; margin-top:10px; font-size:13px; color:#BCCDC2; line-height:1.6; }

/* ---------- 通用区块 ---------- */
.qj-sec{ padding:80px 0; }
.qj-head{ margin-bottom:42px; max-width:760px; }
.qj-head.ta-c{ margin-left:auto; margin-right:auto; text-align:center; }
.qj-head.ta-c .sec-sub{ margin-left:auto; margin-right:auto; }
.qj-head .sec-title{ margin-top:6px; }

/* ---------- 区块1 zigzag ---------- */
.qj-value{ background:var(--bg-soft); }
.qj-zig{
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;
}
.qj-zig-text .qj-tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.5px;
  color:var(--orange-deep); background:var(--orange-soft);
  padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.qj-zig-text h3{ font-size:26px; font-weight:800; margin-bottom:16px; }
.qj-zig-text p{ color:var(--ink-2); margin-bottom:14px; line-height:1.95; }
.qj-zig-text a{ color:var(--green-deep); font-weight:600; border-bottom:1px dashed var(--green-2); }
.qj-zig-text a:hover{ color:var(--orange-deep); border-color:var(--orange); }
.qj-zig-img{ position:relative; }
.qj-zig-img img{
  border-radius:20px; width:100%; height:380px; object-fit:cover;
  box-shadow:var(--shadow-md);
}
.qj-zig-badge{
  position:absolute; left:-18px; bottom:-22px;
  background:#fff; border-left:5px solid var(--orange);
  border-radius:12px; padding:14px 20px; font-size:14px; font-weight:600;
  box-shadow:var(--shadow-md); max-width:280px; line-height:1.6;
}

/* ---------- 区块2 需求 3 列卡 ---------- */
.qj-demand{ background:#fff; }
.qj-demand-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.qj-dcard{
  position:relative; background:var(--bg-orange);
  border-radius:20px; padding:34px 28px 28px; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.qj-dcard:nth-child(2){ background:var(--bg-green); }
.qj-dcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.qj-dnum{
  font-size:52px; font-weight:800; line-height:1; opacity:.16;
  position:absolute; right:20px; top:18px;
}
.qj-dcard h3{ font-size:20px; font-weight:800; margin-bottom:12px; }
.qj-dcard p{ font-size:14.5px; color:var(--ink-2); line-height:1.85; }
.qj-dcard p a{ color:var(--green-deep); font-weight:600; }
.qj-dlink{
  display:inline-block; margin-top:18px; font-size:14px; font-weight:700;
  color:var(--orange-deep);
}
.qj-dlink::after{ content:" →"; transition:transform .25s ease; display:inline-block; }
.qj-dcard:hover .qj-dlink::after{ transform:translateX(4px); }

/* ---------- 区块3 时间轴 ---------- */
.qj-path{ background:var(--bg-green); }
.qj-timeline{
  position:relative; max-width:820px; margin:0 auto; padding-left:36px;
}
.qj-timeline::before{
  content:""; position:absolute; left:9px; top:8px; bottom:8px; width:3px;
  border-radius:3px; background:linear-gradient(180deg,var(--orange),var(--green));
}
.qj-timeline li{ position:relative; padding-bottom:42px; }
.qj-timeline li:last-child{ padding-bottom:0; }
.qj-t-dot{
  position:absolute; left:-36px; top:6px; width:21px; height:21px;
  border-radius:50%; background:#fff; border:5px solid var(--orange);
  box-shadow:0 0 0 4px rgba(255,122,28,.18);
}
.qj-timeline li:nth-child(2) .qj-t-dot{ border-color:var(--green); box-shadow:0 0 0 4px rgba(18,183,106,.18); }
.qj-timeline li:nth-child(3) .qj-t-dot{ border-color:var(--green-deep); box-shadow:0 0 0 4px rgba(11,143,86,.18); }
.qj-t-step{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:1px;
  color:var(--green-deep); background:#fff; border-radius:999px; padding:5px 14px;
  margin-bottom:10px; box-shadow:var(--shadow-sm);
}
.qj-t-body h3{ font-size:21px; font-weight:800; margin-bottom:8px; }
.qj-t-body p{ color:var(--ink-2); line-height:1.9; font-size:15px; }
.qj-t-body a{ color:var(--orange-deep); font-weight:600; border-bottom:1px dashed var(--orange-2); }

/* ---------- 区块4 长期价值 数字大卡 ---------- */
.qj-long{ background:#fff; }
.qj-long-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.qj-lcard{
  border:1px solid var(--line); border-radius:18px; padding:28px 24px;
  background:linear-gradient(180deg,#fff 0%, var(--bg-soft) 100%);
  transition:transform .3s ease, border-color .3s ease;
}
.qj-lcard:hover{ transform:translateY(-5px); border-color:var(--orange-2); }
.qj-lcard b{
  display:block; font-size:20px; font-weight:800; margin-bottom:10px;
  color:var(--ink); padding-left:14px; position:relative;
}
.qj-lcard b::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:5px;
  border-radius:3px; background:linear-gradient(180deg,var(--orange),var(--green));
}
.qj-lcard p{ font-size:14px; color:var(--ink-2); line-height:1.8; }
.qj-long-note{
  margin-top:30px; padding:18px 24px; background:var(--orange-soft);
  border-radius:14px; color:var(--ink-2); font-size:14.5px;
}
.qj-long-note a{ color:var(--orange-deep); font-weight:700; }

/* ---------- 区块5 FAQ ---------- */
.qj-faq{ background:var(--bg-soft); }
.qj-faq-list{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.qj-faq{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:0 24px; transition:border-color .25s ease, box-shadow .25s ease;
}
.qj-faq[open]{ border-color:var(--green-2); box-shadow:var(--shadow-sm); }
.qj-faq summary{
  list-style:none; cursor:pointer; padding:20px 0;
  font-size:16.5px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.qj-faq summary::-webkit-details-marker{ display:none; }
.qj-faq summary::after{
  content:"+"; font-size:22px; font-weight:400; color:var(--orange-deep);
  transition:transform .3s ease; flex-shrink:0;
}
.qj-faq[open] summary::after{ transform:rotate(45deg); }
.qj-faq p{ padding:0 0 22px; color:var(--ink-2); line-height:1.95; font-size:15px; }
.qj-faq p a{ color:var(--green-deep); font-weight:600; }

/* ---------- 行动带 ---------- */
.qj-cta{
  background:linear-gradient(120deg, var(--orange-deep) 0%, var(--orange) 55%, var(--green) 130%);
  color:#fff; padding:64px 0;
}
.qj-cta-inner{
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
}
.qj-cta-kicker{ font-size:12px; font-weight:700; letter-spacing:3px; opacity:.85; margin-bottom:10px; }
.qj-cta-copy h2{ font-size:30px; font-weight:800; margin-bottom:10px; }
.qj-cta-copy p{ font-size:15px; opacity:.92; line-height:1.85; }
.qj-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
.qj-cta-actions .btn-white{ color:var(--ink); }
.qj-cta-actions .btn-ghost-white{
  border-color:rgba(255,255,255,.7); color:#fff; background:transparent;
}
.qj-cta-actions .btn-ghost-white:hover{ background:rgba(255,255,255,.15); }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .qj-hero{ padding:130px 0 70px; }
  .qj-title{ font-size:32px; }
  .qj-stats{ grid-template-columns:repeat(2,1fr); }
  .qj-zig{ grid-template-columns:1fr; gap:36px; }
  .qj-zig-img img{ height:280px; }
  .qj-zig-badge{ left:12px; bottom:-18px; }
  .qj-demand-grid{ grid-template-columns:1fr; }
  .qj-long-grid{ grid-template-columns:repeat(2,1fr); }
  .qj-cta-inner{ grid-template-columns:1fr; }
  .qj-cta-actions{ justify-content:flex-start; }
}
@media (max-width:640px){
  .qj-stats{ grid-template-columns:1fr; }
  .qj-long-grid{ grid-template-columns:1fr; }
  .qj-timeline{ padding-left:28px; }
  .qj-t-dot{ left:-28px; width:19px; height:19px; }
}