/* ============================================================
   龙铭特种作业 · 考证避坑指南 bikeng.css
   签名 S12：170° 对角渐变，内容居右，装饰=底部斜向跑马灯字幕条
   ============================================================ */

/* ---------- 首屏 S12 ---------- */
.hero{position:relative;min-height:96vh;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:25% center;opacity:.5;transform:scale(1.04)}
.hero-fade{
  position:absolute;inset:0;
  background:linear-gradient(170deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,.72) 55%,rgba(11,11,12,.96) 100%);
}
.hero-inner{position:relative;z-index:3;max-width:620px;padding:150px 0 110px;text-align:left}
.hero-crumbs{margin-bottom:22px}
.hero-title{font-size:clamp(32px,5vw,58px);line-height:1.2;font-weight:900;margin-bottom:20px}
.hero-title .hl{color:#fff}
.hero-lead{max-width:540px;font-size:16.5px;color:var(--muted-dark);margin-bottom:30px;line-height:1.9}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
/* 跑马灯条（S12 装饰） */
.marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:3;overflow:hidden;
  background:#fff;color:#0b0b0c;padding:13px 0;border-top:2px solid #000;
  transform:rotate(-1.2deg) scale(1.02);
}
.marquee-inner{display:flex;gap:26px;white-space:nowrap;font-size:13.5px;font-weight:700;letter-spacing:.08em;animation:mq 26s linear infinite;width:max-content}
.marquee-inner span:nth-child(even){opacity:.4}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 八大坑 ---------- */
.pit-sec{background:var(--ink)}
.pit-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pit-item{
  position:relative;padding:30px 28px;border-radius:14px;background:var(--ink-2);
  border:1px solid var(--line);transition:.4s var(--ease);
}
.pit-item:hover{border-color:rgba(255,255,255,.3);transform:translateY(-4px)}
.pit-no{
  display:inline-block;font-size:12px;font-weight:900;letter-spacing:.2em;color:#000;
  background:#fff;border-radius:4px;padding:5px 12px;margin-bottom:16px;
}
.pit-item h3{font-size:19px;font-weight:800;margin-bottom:10px;line-height:1.4}
.pit-item p{font-size:14px;color:var(--muted-dark);line-height:1.85}
.pit-item a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.pit-guard{
  margin-top:12px;padding:12px 14px;border-radius:8px;background:var(--ink-3);
  border-left:2px solid #fff;font-size:13.5px!important;color:var(--txt-on-dark)!important;line-height:1.85;
}

/* ---------- 真假对比 ---------- */
.compare-sec{background:var(--ink-2)}
.compare-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:stretch}
.cmp-col{padding:32px 30px;border-radius:14px}
.cmp-col h3{font-size:19px;font-weight:900;margin-bottom:18px}
.cmp-col ul{display:flex;flex-direction:column;gap:12px}
.cmp-col li{font-size:14.5px;line-height:1.7;padding-left:22px;position:relative}
.cmp-bad{background:var(--ink-3);border:1px solid rgba(255,90,90,.35)}
.cmp-bad h3{color:#ff8080}
.cmp-bad li{color:var(--muted-dark)}
.cmp-bad li::before{content:"×";position:absolute;left:0;color:#ff5a5a;font-weight:900}
.cmp-good{background:#fff;color:#0b0b0c}
.cmp-good h3{color:#000}
.cmp-good li{color:#2a2a2e}
.cmp-good li::before{content:"✓";position:absolute;left:0;color:#000;font-weight:900}
.cmp-vs{align-self:center;font-size:20px;font-weight:900;color:var(--muted-dark)}

/* ---------- 费用材料 ---------- */
.fee-sec{background:var(--paper);color:var(--txt-on-light)}
.fee-sec .t-en{color:var(--muted-light)}
.fee-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center}
.fee-media img{border-radius:14px;width:100%;height:340px;object-fit:cover}
.fee-body .sec-title{margin-bottom:18px}
.fee-body p{font-size:15px;color:var(--muted-light);line-height:1.95;margin-bottom:13px}
.fee-body a{color:#000;border-bottom:1px solid rgba(11,11,12,.4)}

/* ---------- 红线横幅 ---------- */
.line-sec{position:relative;overflow:hidden;padding:0}
.line-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.line-veil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(11,11,12,.95) 30%,rgba(11,11,12,.6))}
.line-inner{position:relative;z-index:1;padding:110px 0;text-align:center}
.line-inner h2{font-size:clamp(26px,3.4vw,42px);font-weight:900;margin-bottom:30px}
.line-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.line-row span{
  font-size:17px;font-weight:800;color:#000;background:#fff;border-radius:999px;padding:12px 28px;
}
.line-inner p{color:var(--muted-dark);max-width:560px;margin:0 auto;font-size:14.5px}

/* ---------- FAQ ---------- */
.faq-sec{background:var(--ink-2)}
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:880px}
.faq-item{border:1px solid var(--line);border-radius:10px;background:var(--ink-3);padding:20px 26px}
.faq-item summary{font-size:16.5px;font-weight:800;cursor:pointer;list-style:none;position:relative;padding-right:30px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:#fff;transition:.3s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item p{margin-top:12px;font-size:14.5px;color:var(--muted-dark);line-height:1.9}
.faq-more{margin-top:24px;font-size:14.5px;color:var(--muted-dark)}
.faq-more a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}

/* ---------- CTA ---------- */
.cta-sec{background:var(--ink)}
.cta-strip{
  background:var(--paper);color:#0b0b0c;border-radius:18px;padding:48px 54px;
  display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;
}
.cta-strip h2{font-size:clamp(22px,2.6vw,30px);font-weight:900;margin-bottom:10px}
.cta-strip p{color:var(--muted-light);font-size:14.5px}
.cta-form .form-item input{background:#fff;border-color:var(--line-dark);color:#000}
.cta-form .form-item input::placeholder{color:#9c9c96}
.cta-form .btn{grid-column:1/-1;background:#0b0b0c;color:#fff}

/* ---------- 响应式 ---------- */
@media (max-width:1280px){
  .pit-list{grid-template-columns:1fr}
}
@media (max-width:1024px){
  .compare-wrap{grid-template-columns:1fr}
  .cmp-vs{display:none}
  .fee-wrap{grid-template-columns:1fr;gap:30px}
  .cta-strip{grid-template-columns:1fr;padding:36px 30px}
  .hero-inner{padding:130px 0 90px}
}
@media (max-width:768px){
  .line-row{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
}
@media (max-width:480px){
  .marquee{transform:none}
}