/* ============================================================
   shiyou.css · 石油天然气安全作业 · 原型 L8 圆润错位
   ============================================================ */

/* ---------- Hero ---------- */
.hero-l8{
  position:relative; padding:calc(var(--header-h) + 50px) 0 90px; overflow:hidden;
  background:var(--cream-50);
}
.hero-l8__dot{
  position:absolute; border-radius:50%; background:rgba(176,141,102,.25);
}
.hero-l8__dot--1{ width:120px; height:120px; top:18%; right:12%; }
.hero-l8__dot--2{ width:46px; height:46px; bottom:14%; right:26%; background:rgba(76,114,90,.25); }
.hero-l8__inner{ position:relative; z-index:2; max-width:760px; }
.hero-l8 .breadcrumb{ margin-bottom:24px; }
.hero-l8__eyebrow{ font-size:13px; letter-spacing:.34em; color:var(--brown-600); margin-bottom:18px; }
.hero-l8__title{ margin-bottom:20px; }
.hero-l8__lead{ font-size:16.5px; max-width:560px; margin-bottom:30px; }
.hero-l8__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:40px; }
.hero-l8__pic{
  position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-lg);
}
.hero-l8__pic img{ width:100%; }
.hero-l8__badge{
  position:absolute; right:22px; bottom:22px; background:var(--green-900); color:var(--cream-100);
  padding:14px 20px; border-radius:var(--radius-m); font-size:13.5px; line-height:1.6;
  border-left:3px solid var(--brown-500);
}

/* ---------- 作业范围：圆角卡片 + 叠放 ---------- */
.scope-l8__card{
  background:var(--cream-100); border-radius:var(--radius-l); padding:clamp(28px,4vw,48px);
  max-width:820px; margin:0 auto 40px; box-shadow:var(--shadow-sm);
}
.scope-l8__card h2{ margin:8px 0 14px; }
.scope-l8__stack{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,3vw,40px);
  align-items:center; margin-top:20px;
}
.scope-l8__pic img{ border-radius:var(--radius-l); box-shadow:var(--shadow-md); }
.scope-l8__text{ margin-top:-30px; }
.scope-l8__text h3{ margin-bottom:16px; }
.scope-l8__text ul{ display:grid; gap:12px; }
.scope-l8__text li{ padding-left:20px; position:relative; color:var(--ink-soft); font-size:14.5px; }
.scope-l8__text li::before{
  content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border-radius:50%; background:var(--brown-500);
}
.scope-l8__text li b{ color:var(--green-800); }

/* ---------- 适用场景 ---------- */
.scene-l8__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.sc-l8{
  background:var(--cream-50); border-radius:var(--radius-l); padding:28px 22px;
  border:1px solid var(--line); transition:transform .35s var(--ease);
}
.sc-l8:hover{ transform:translateY(-8px); }
.sc-l8 h3{ font-size:18px; margin-bottom:10px; }
.sc-l8 p{ font-size:14px; }

/* ---------- 报考条件 ---------- */
.cond-l8__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,56px); align-items:center; }
.cond-l8__copy h2{ margin:10px 0 14px; }
.cond-l8__list{ display:grid; gap:14px; }
.cond-l8__list li{
  display:flex; gap:14px; padding:16px 18px; background:var(--cream-100);
  border-radius:var(--radius-m); align-items:baseline;
}
.cond-l8__list b{ flex:none; color:var(--green-800); font-family:var(--font-serif); }
.cond-l8__list span{ color:var(--ink-soft); font-size:14.5px; }
.cond-l8__note{ margin-top:22px; font-size:14.5px; }
.cond-l8__note a{ color:var(--green-700); font-weight:600; }

/* ---------- 考试内容（深底） ---------- */
.exam-l8__wrap{ border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-md); }
.exam-l8 .tbl td{ color:rgba(251,248,241,.78); }
.exam-l8 .tbl tbody tr:hover{ background:rgba(176,141,102,.12); }
.exam-l8__note{ margin-top:18px; font-size:14.5px; color:rgba(251,248,241,.7); }
.exam-l8__note a{ color:var(--brown-500); font-weight:600; }

/* ---------- 复审：圆 orb ---------- */
.review-l8__inner{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.review-l8__orb{
  width:220px; height:220px; border-radius:50%; background:var(--green-800);
  color:var(--cream-100); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:var(--shadow-lg);
}
.review-l8__orb b{ font-family:var(--font-serif); font-size:46px; color:var(--brown-500); line-height:1; }
.review-l8__orb span{ margin-top:10px; font-size:13.5px; color:rgba(251,248,241,.78); line-height:1.7; }
.review-l8__copy h2{ margin:8px 0 14px; }
.review-l8__copy p{ margin-bottom:12px; }
.review-l8__copy a{ color:var(--green-700); font-weight:600; }

/* ---------- 行业要求 ---------- */
.ind-l8__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ind-l8__item{
  background:var(--cream-50); border-radius:var(--radius-l); padding:30px 26px;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.ind-l8__item b{ font-family:var(--font-serif); font-size:19px; color:var(--green-800); display:block; margin-bottom:12px; }
.ind-l8__item p{ font-size:14.5px; }

/* ---------- FAQ ---------- */
.faq-l8__list{ max-width:820px; margin:0 auto; display:grid; gap:14px; }
.faq-l8__item{
  background:var(--cream-100); border-radius:var(--radius-l); padding:4px 26px;
}
.faq-l8__item summary{
  cursor:pointer; list-style:none; padding:20px 0; font-family:var(--font-serif);
  font-weight:700; font-size:16.5px; color:var(--green-900);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-l8__item summary::-webkit-details-marker{ display:none; }
.faq-l8__item summary::after{
  content:"－"; flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--green-800); color:var(--cream-50); display:flex; align-items:center; justify-content:center;
  font-size:16px; transition:transform .3s var(--ease);
}
.faq-l8__item[open] summary::after{ content:"+"; }
.faq-l8__item p{ padding:0 0 20px; font-size:14.5px; }

/* ---------- 预约 CTA：圆角大卡片 ---------- */
.booking-l8{ background:var(--cream-50); }
.booking-l8__card{
  background:var(--green-950); border-radius:var(--radius-l); padding:clamp(30px,5vw,56px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,48px); align-items:center;
}
.booking-l8__head h2{ color:var(--cream-100); margin:10px 0 14px; }
.booking-l8__head p{ color:rgba(251,248,241,.74); }
.booking-l8__phone{ margin-top:16px; }
.booking-l8__phone a{ color:var(--brown-500); font-weight:700; font-size:20px; }
.booking-l8__form{
  background:var(--cream-50); padding:26px; border-radius:var(--radius-l); display:grid; gap:14px;
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .scope-l8__stack, .cond-l8__grid, .review-l8__inner, .booking-l8__card{ grid-template-columns:1fr; }
  .scope-l8__text{ margin-top:0; }
  .scene-l8__grid, .ind-l8__grid{ grid-template-columns:repeat(2,1fr); }
  .hero-l8__dot{ display:none; }
}
@media (max-width:640px){
  .scene-l8__grid, .ind-l8__grid{ grid-template-columns:1fr; }
  .review-l8__orb{ width:180px; height:180px; }
}