/* ============================================================
   卓阳教育官网 · 全站样式表（纯静态原型）
   组织结构：变量 → 重置 → 布局 → 组件 → 页面 → 响应式
   用色纪律：深蓝为骨架，红色仅作强调（整屏红色面积 < 10%）
   ============================================================ */

/* ---------------- 1. 变量 ---------------- */
:root{
  /* 品牌色（取自 LOGO） */
  --navy:      #16357E;   /* 主色：LOGO 深蓝 */
  --navy-deep: #0D2255;   /* 深色区块 / 页脚 */
  --navy-mid:  #1E4295;
  --navy-soft: #2F5BB7;
  --navy-tint: #EEF2FB;   /* 浅蓝底 */
  --red:       #D6202A;   /* 强调色：仅用于 CTA / 强调 */
  --red-deep:  #A8181F;
  --red-tint:  #FDEEEF;
  --ink:       #23262E;   /* 正文标题 */
  --ink-2:     #4A4F5A;   /* 正文 */
  --ink-3:     #7C828E;   /* 辅助文字 */
  --line:      #E2E7F1;   /* 分割线 */
  --bg:        #FFFFFF;
  --bg-soft:   #F5F7FC;   /* 浅灰蓝底 */
  --gold:      #C9A227;   /* 极少量点缀 */

  /* 垂直节奏 */
  --sp-s: 16px;
  --sp-m: 32px;
  --sp-l: 64px;
  --sp-xl: 96px;

  /* 布局 */
  --container: 1200px;
  --gutter: 24px;

  /* 圆角 / 阴影 */
  --radius-card: 8px;
  --radius-btn: 4px;
  --shadow: 0 2px 8px rgba(22,53,126,.06);
  --shadow-hover: 0 8px 24px rgba(22,53,126,.14);

  /* 字体 */
  --font-stack: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC","Helvetica Neue",Arial,sans-serif;

  /* 页头高度（滚动定位用） */
  --header-h: 76px;
}

/* ---------------- 2. 重置 ---------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--navy); }
ul,ol{ list-style:none; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; }
input,select,textarea{ font-family: inherit; font-size: 1rem; color: var(--ink); }
h1,h2,h3,h4,h5{ color: var(--ink); font-weight:700; line-height:1.35; letter-spacing:.5px; }
strong,b{ color: var(--ink); }

/* 无障碍：键盘焦点轮廓 */
:focus-visible{ outline: 2px solid var(--navy-soft); outline-offset: 2px; }

/* 屏幕阅读器专用 */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* 滚动淡入（配合 IntersectionObserver） */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------------- 3. 布局 ---------------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section{ padding: var(--sp-xl) 0; }
.section--soft{ background: var(--bg-soft); }
.section--navy{ background: var(--navy-deep); color: rgba(255,255,255,.85); }
.section--navy h2, .section--navy h3{ color:#fff; }

/* 两栏布局（列表 + 侧栏） */
.layout-2col{
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: var(--sp-m);
  align-items: start;
}

/* ---------------- 4. 组件 ---------------- */

/* 4.1 顶部信息条 */
.topbar{
  background: var(--navy-deep);
  color: rgba(255,255,255,.75);
  font-size: 13px;
}
.topbar .container{
  display:flex; justify-content: space-between; align-items:center;
  min-height: 36px; gap: 16px;
}
.topbar-item{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar-item svg{ width:14px; height:14px; flex:none; fill:currentColor; opacity:.8; }
.topbar-item a:hover{ color:#fff; }
.topbar-slogan{ color: var(--gold); letter-spacing:1px; }
@media (max-width:768px){ .topbar-slogan{ display:none; } }
@media (max-width:480px){ .topbar .topbar-item:nth-child(3){ display:none; } }

/* 4.2 页头主导航 */
.site-header{
  position: sticky; top:0; z-index: 100;
  background:#fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled{ box-shadow: 0 4px 16px rgba(13,34,85,.10); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--header-h); gap: var(--sp-m);
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand img{ height:48px; width:auto; }
.main-nav ul{ display:flex; align-items:center; gap: 4px; }
.main-nav a{
  display:block; padding: 10px 16px;
  font-size: 16px; color: var(--ink); font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.main-nav a:hover{ color: var(--navy); }
.main-nav a.is-active{ color: var(--navy); border-bottom-color: var(--red); font-weight:700; }
/* 下拉导航（顶级栏目 → 子栏目，由原生嵌套 nav 生成） */
.main-nav li.has-dropdown{ position:relative; }
.main-nav li.has-dropdown > a{ display:flex; align-items:center; gap:4px; }
.main-nav .caret{ display:inline-block; width:0; height:0; margin-left:3px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; transition: transform .2s ease; }
.main-nav li.has-dropdown:hover > a .caret{ transform: rotate(180deg); }
/* 必须用 .main-nav .sub-menu 提高优先级，覆盖 .main-nav ul{display:flex}，否则子菜单会横排 */
.main-nav .sub-menu{
  display:block; position:absolute; top:100%; left:0; min-width:172px; z-index:60;
  list-style:none; margin:0; padding:8px 0;
  background:#fff; border-radius:0 0 var(--radius-card) var(--radius-card);
  box-shadow: 0 14px 30px rgba(13,34,85,.18);
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.main-nav .sub-menu li{ display:block; }
.main-nav .sub-menu a{ display:block; padding:11px 20px; font-size:15px; color: var(--ink); border-bottom:none; white-space:nowrap; }
.main-nav .sub-menu a:hover,
.main-nav .sub-menu a.is-active{ color: var(--navy); background: var(--navy-tint); font-weight:700; }
.main-nav li.has-dropdown:hover > .sub-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.header-cta{ flex:none; }

/* 汉堡按钮（移动端） */
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px;
}
.hamburger span{
  display:block; height:2px; background: var(--navy); border-radius:2px;
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* 移动端抽屉导航 + 遮罩 */
.nav-mask{
  display:none; position:fixed; inset:0; z-index:98;
  background: rgba(13,34,85,.5); opacity:0; transition: opacity .25s ease;
}
.nav-mask.is-visible{ opacity:1; }
@media (max-width:992px){
  .hamburger{ display:flex; }
  .main-nav{
    position: fixed; top:0; right:-280px; bottom:0; z-index:99;
    width:280px; max-width:80vw;
    background:#fff; box-shadow:-4px 0 24px rgba(13,34,85,.15);
    transition: right .3s ease;
    overflow-y:auto;
  }
  .main-nav.is-open{ right:0; }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:0; padding: 16px 0; }
  .main-nav a{ padding: 14px 24px; border-bottom:none; border-left:3px solid transparent; }
  .main-nav a.is-active{ border-left-color: var(--red); background: var(--navy-tint); }
  .header-cta{ display:none; }
  .nav-mask.is-visible{ display:block; }
}
@media (max-width:480px){ .brand img{ height:40px; } }

/* 4.3 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 28px; min-height:44px;
  font-size: 16px; font-weight:700; letter-spacing:1px;
  border-radius: var(--radius-btn);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  line-height:1.35; white-space:nowrap;
}
.btn svg{ width:18px; height:18px; fill:currentColor; flex:none; }
.btn--primary{ background: var(--red); color:#fff; }
.btn--primary:hover{ background: var(--red-deep); color:#fff; box-shadow: 0 6px 16px rgba(214,32,42,.30); }
.btn--navy{ background: var(--navy); color:#fff; }
.btn--navy:hover{ background: var(--navy-mid); color:#fff; }
.btn--outline{ border:1px solid var(--navy); color: var(--navy); background:transparent; }
.btn--outline:hover{ background: var(--navy); color:#fff; }
.btn--ghost{ border:1px solid rgba(255,255,255,.6); color:#fff; background:transparent; }
.btn--ghost:hover{ background:#fff; color: var(--navy); }
.btn--lg{ padding: 15px 40px; font-size:17px; }
.btn--block{ width:100%; }

/* 4.4 区块标题 */
.section-head{ text-align:center; max-width:720px; margin: 0 auto var(--sp-l); }
.section-head .eyebrow{
  display:inline-block; font-size:14px; letter-spacing:3px;
  color: var(--red); font-weight:700; margin-bottom: 8px;
}
.section-head h2{ font-size: 32px; margin-bottom: 12px; }
.section-head p{ color: var(--ink-3); }
.section-head--left{ text-align:left; margin-left:0; }

/* 4.5 页头 banner（内页） */
.page-banner{
  position:relative;
  background: linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-mid) 100%);
  color:#fff;
  padding: 72px 0;
  overflow:hidden;
}
.page-banner::after{
  content:""; position:absolute; right:-80px; top:-80px;
  width:320px; height:320px; border-radius:50%;
  background: rgba(255,255,255,.05);
}
.page-banner h1{ color:#fff; font-size: 34px; margin-bottom:8px; }
.page-banner p{ color: rgba(255,255,255,.75); font-size:15px; }
@media (max-width:768px){ .page-banner{ padding:48px 0; } .page-banner h1{ font-size:26px; } }

/* 4.6 面包屑 */
.breadcrumb{
  padding: 16px 0; font-size:14px; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.breadcrumb li{ display:flex; align-items:center; }
.breadcrumb li + li::before{ content:"/"; margin: 0 8px; color: var(--line); }
.breadcrumb a:hover{ color: var(--navy); }
.breadcrumb [aria-current]{ color: var(--ink-2); }

/* 4.7 数据条 */
.stat-bar{
  display:grid; grid-template-columns: repeat(4,1fr);
  background:#fff; border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.stat-item{
  padding: 32px 16px; text-align:center;
  border-right:1px solid var(--line);
}
.stat-item:last-child{ border-right:none; }
.stat-item .num{
  display:block; font-size: 44px; font-weight:700; color: var(--navy);
  line-height:1.2; font-variant-numeric: tabular-nums;
}
.stat-item .num .unit{ font-size:18px; margin-left:2px; }
.stat-item .label{ display:block; margin-top:6px; color: var(--ink-3); font-size:14px; }
@media (max-width:768px){
  .stat-bar{ grid-template-columns: repeat(2,1fr); }
  .stat-item:nth-child(2n){ border-right:none; }
  .stat-item:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .stat-item .num{ font-size:34px; }
}

/* 4.8 工种卡片 */
.trade-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-m);
}
.trade-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-card);
  padding: 28px 24px;
  display:flex; flex-direction:column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.trade-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--navy-soft); }
.trade-icon{
  width:56px; height:56px; border-radius: var(--radius-card);
  background: var(--navy-tint); color: var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.trade-icon svg{ width:30px; height:30px; fill:currentColor; }
.trade-card h3{ font-size:19px; margin-bottom:8px; }
.trade-card h3 .badge{
  display:inline-block; vertical-align:3px; margin-left:8px;
  font-size:12px; font-weight:400; color: var(--red);
  background: var(--red-tint); border-radius:3px; padding:1px 8px; letter-spacing:0;
}
.trade-card p{
  font-size:14px; color: var(--ink-3); line-height:1.75; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.trade-card p:empty{ display:none; }
.trade-card .trade-link{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:14px; font-weight:700; color: var(--navy);
  display:inline-flex; align-items:center; gap:4px;
}
.trade-card .trade-link svg{ width:14px; height:14px; fill:currentColor; transition: transform .2s; }
.trade-card:hover .trade-link svg{ transform: translateX(4px); }
.trade-card:hover .trade-link{ color: var(--red); }

/* 4.9 三栏价值/图标区 */
.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-m); }
.feature-item{
  background:#fff; border-radius: var(--radius-card); padding: 36px 28px;
  box-shadow: var(--shadow); text-align:center;
}
.feature-item .feature-icon{
  width:64px; height:64px; margin: 0 auto 18px; border-radius:50%;
  background: var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.feature-item .feature-icon svg{ width:30px; height:30px; fill:currentColor; }
.feature-item h3{ font-size:19px; margin-bottom:10px; }
.feature-item p{ font-size:14px; color: var(--ink-3); }

/* 4.10 法规卡片（为什么必须持证） */
.law-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-m); }
.law-card{
  background:#fff; border-left: 4px solid var(--navy);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 24px 26px; box-shadow: var(--shadow);
}
.law-card .law-no{
  display:inline-block; font-size:13px; font-weight:700; color: var(--navy-soft);
  letter-spacing:2px; margin-bottom:8px;
}
.law-card blockquote{ font-size:15px; color: var(--ink-2); }
.law-card blockquote::before{ content:"「"; color: var(--line); font-size:20px; }
.law-card blockquote::after{ content:"」"; color: var(--line); font-size:20px; }
.law-card .law-warn{
  margin-top:10px; font-size:14px; font-weight:700; color: var(--red);
  display:flex; align-items:center; gap:6px;
}
.law-card .law-warn svg{ width:16px; height:16px; fill:currentColor; flex:none; }
.law-highlight{
  margin-top: var(--sp-m); text-align:center;
  background: var(--navy-tint); border-radius: var(--radius-card); padding: 20px;
  color: var(--navy); font-size:15px;
}
.law-highlight strong{ color: var(--red); font-size:20px; }

/* 4.11 步骤流程（7 步） */
.step-grid{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: var(--sp-m) var(--sp-s);
  counter-reset: step;
}
.step-item{ position:relative; background:#fff; border-radius: var(--radius-card); padding: 26px 20px; box-shadow: var(--shadow); }
.step-item .step-no{
  position:absolute; top:-14px; left:20px;
  width:32px; height:32px; border-radius:50%;
  background: var(--navy); color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 6px rgba(13,34,85,.3);
}
.step-item h3{ font-size:16px; margin: 10px 0 8px; }
.step-item p{ font-size:13px; color: var(--ink-3); line-height:1.7; }
/* 时间轴竖排（process.html 用） */
.step-timeline{ position:relative; padding-left: 56px; }
.step-timeline::before{
  content:""; position:absolute; left:19px; top:8px; bottom:8px;
  width:2px; background: var(--line);
}
.step-timeline .step-item{
  position:relative; margin-bottom: var(--sp-m);
  padding: 24px 26px; box-shadow: var(--shadow); border-radius: var(--radius-card); background:#fff;
}
.step-timeline .step-item::before{
  content:""; position:absolute; left:-45px; top:30px;
  width:12px; height:12px; border-radius:50%;
  background: var(--navy); border:3px solid #fff; box-shadow: 0 0 0 2px var(--navy-soft);
}
.step-timeline .step-item:last-child{ margin-bottom:0; }
@media (max-width:768px){
  .step-grid{ grid-template-columns: repeat(2,1fr); }
}

/* 4.12 案例卡片 */
.case-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-m); }
.case-card{
  display:flex; flex-direction:column;
  background:#fff; border-radius: var(--radius-card); overflow:hidden;
  box-shadow: var(--shadow); border:1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.case-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.case-card .case-thumb{ position:relative; aspect-ratio: 16/9; overflow:hidden; background: var(--navy-tint); }
.case-card .case-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.case-card:hover .case-thumb img{ transform: scale(1.04); }
.case-card .case-tag{
  position:absolute; left:14px; top:14px;
  background: var(--navy); color:#fff; font-size:12px; padding:2px 10px; border-radius:3px;
}
.case-card .case-body{ padding: 22px 24px 24px; flex:1; display:flex; flex-direction:column; }
.case-card h3{ font-size:18px; margin-bottom:8px; line-height:1.5; }
.case-card p{
  font-size:14px; color: var(--ink-3); flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.case-card .case-meta{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color: var(--ink-3);
}
.case-card .case-meta .more{ color: var(--navy); font-weight:700; }

/* 4.13 学员好评墙（review 图裁剪 + 遮罩弱化） */
.review-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-s);
}
.review-item{
  position:relative; border-radius: var(--radius-card); overflow:hidden;
  aspect-ratio: 3/4; background: var(--navy-tint);
  box-shadow: var(--shadow);
}
.review-item img{
  width:100%; height:100%; object-fit:cover; object-position: top;
  filter: blur(1.5px) saturate(.9);
  transform: scale(1.08);
}
.review-item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.35) 70%, rgba(255,255,255,.55) 100%);
}
.review-item .review-note{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  background: rgba(255,255,255,.94); border-radius:6px;
  padding: 10px 12px; font-size:12px; line-height:1.6; color: var(--ink-2);
  box-shadow: 0 2px 8px rgba(13,34,85,.12);
}
.review-item .review-note .stars{ color: var(--gold); letter-spacing:2px; display:block; }
.review-more-tip{
  margin-top: var(--sp-m); text-align:center; font-size:13px; color: var(--ink-3);
}
@media (max-width:768px){ .review-grid{ grid-template-columns: repeat(2,1fr); } }

/* 4.14 CTA 条 */
.cta-band{
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--radius-card);
  padding: 40px 48px;
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-m);
  color:#fff; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; font-size:26px; margin-bottom:6px; }
.cta-band p{ color: rgba(255,255,255,.8); font-size:15px; }
.cta-band .cta-actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.cta-band .cta-phone{
  font-size:24px; font-weight:700; color:#fff;
  display:inline-flex; align-items:center; gap:10px;
  font-variant-numeric: tabular-nums; letter-spacing:1px;
}
.cta-band .cta-phone svg{ width:24px; height:24px; fill: var(--red); background:#fff; border-radius:50%; padding:4px; }

/* 4.15 常见问题（FAQ） */
.faq-list{ max-width: 880px; margin: 0 auto; }
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-card);
  margin-bottom: 12px; overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding: 18px 56px 18px 22px;
  font-weight:700; color: var(--ink); position:relative; font-size:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--navy-soft); border-bottom:2px solid var(--navy-soft);
  transform: rotate(45deg); transition: transform .2s;
}
.faq-item[open] summary::after{ transform: rotate(225deg); margin-top:-2px; }
.faq-item .faq-a{ padding: 0 22px 20px; font-size:15px; color: var(--ink-2); border-top:1px dashed var(--line); padding-top:14px; margin-top:0; }
.faq-item .faq-a p + p{ margin-top:8px; }

/* 4.16 侧边栏 */
.sidebar-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-card);
  padding: 24px; margin-bottom: var(--sp-m); box-shadow: var(--shadow);
}
.sidebar-card h3{
  font-size:17px; padding-bottom:12px; margin-bottom:16px;
  border-bottom:2px solid var(--navy);
  position:relative;
}
.sidebar-card h3::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:44px; height:2px; background: var(--red);
}
.consult-card{ background: var(--navy-deep); border:none; color: rgba(255,255,255,.85); }
.consult-card h3{ color:#fff; border-bottom-color: rgba(255,255,255,.2); }
.consult-card h3::after{ background: var(--red); }
.consult-card .consult-phone{
  display:block; font-size:22px; font-weight:700; color:#fff;
  font-variant-numeric: tabular-nums; letter-spacing:1px; margin: 8px 0 2px;
}
.consult-card .consult-phone--sub{ font-size:16px; color: rgba(255,255,255,.75); font-weight:500; }
.consult-card p{ font-size:13px; }
.hot-list li{
  display:flex; gap:10px; align-items:baseline;
  padding: 9px 0; border-bottom:1px dashed var(--line); font-size:14px;
}
.hot-list li:last-child{ border-bottom:none; }
.hot-list .rank{
  flex:none; width:20px; height:20px; border-radius:3px;
  background: var(--navy-tint); color: var(--navy);
  font-size:12px; font-weight:700; text-align:center; line-height:20px;
}
.hot-list li:nth-child(-n+3) .rank{ background: var(--red-tint); color: var(--red); }
.hot-list a{ color: var(--ink-2); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.hot-list a:hover{ color: var(--navy); }
.side-links li a{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 0; font-size:14px; color: var(--ink-2);
  border-bottom:1px dashed var(--line);
}
.side-links li:last-child a{ border-bottom:none; }
.side-links a:hover{ color: var(--navy); }
.side-links svg{ width:12px; height:12px; fill: var(--ink-3); }

/* 4.17 详情页正文 */
.article{ background:#fff; }
.article-header{ padding: 40px 0 24px; border-bottom:1px solid var(--line); }
.article-header h1{ font-size: 28px; line-height:1.5; margin-bottom:14px; }
.article-meta{ display:flex; flex-wrap:wrap; gap:20px; font-size:13px; color: var(--ink-3); }
.article-meta span{ display:inline-flex; align-items:center; gap:6px; }
.article-meta svg{ width:14px; height:14px; fill:currentColor; }
.article-body{ padding: 28px 0 40px; font-size:16px; }
.article-body h2{
  font-size:21px; margin: 32px 0 14px; padding-left:14px;
  border-left:4px solid var(--red); line-height:1.4;
}
.article-body h3{ font-size:18px; margin: 24px 0 10px; }
.article-body p{ margin-bottom: 14px; }
.article-body ul,.article-body ol{ margin: 0 0 16px; padding-left: 4px; }
.article-body ul li{ position:relative; padding-left: 22px; margin-bottom: 8px; }
.article-body ul li::before{
  content:""; position:absolute; left:4px; top:.72em;
  width:6px; height:6px; border-radius:50%; background: var(--navy-soft);
}
.article-body ol{ counter-reset: oli; }
.article-body ol li{ position:relative; padding-left: 28px; margin-bottom: 10px; counter-increment: oli; }
.article-body ol li::before{
  content: counter(oli); position:absolute; left:0; top:.28em;
  width:20px; height:20px; border-radius:3px;
  background: var(--navy-tint); color: var(--navy);
  font-size:13px; font-weight:700; text-align:center; line-height:20px;
}
.article-body blockquote{
  margin: 18px 0; padding: 16px 20px;
  background: var(--navy-tint); border-left:4px solid var(--navy);
  border-radius: 0 6px 6px 0; color: var(--ink-2); font-size:15px;
}
.article-body table{
  width:100%; border-collapse: collapse; margin: 18px 0; font-size:14px;
}
.article-body th,.article-body td{
  border:1px solid var(--line); padding: 10px 14px; text-align:left; vertical-align:top;
}
.article-body th{ background: var(--navy-tint); color: var(--navy); font-weight:700; white-space:nowrap; }
.article-body img{ border-radius: var(--radius-card); margin: 18px auto; }
.article-body .article-figure figcaption{
  text-align:center; font-size:13px; color: var(--ink-3); margin-top:8px;
}
.article-footer{ border-top:1px solid var(--line); padding: 20px 0 40px; }
.pager-nav{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pager-nav a{
  display:block; padding: 14px 18px; font-size:14px; color: var(--ink-2);
  background: var(--bg-soft); border-radius: var(--radius-card); line-height:1.6;
}
.pager-nav a:hover{ background: var(--navy-tint); color: var(--navy); }
.pager-nav .dir{ display:block; font-size:12px; color: var(--ink-3); margin-bottom:2px; }
.pager-nav .next{ text-align:right; }

/* 4.18 新闻列表 */
.news-list .news-item{
  display:flex; gap: 20px; padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.news-item .news-thumb{ flex:none; width: 150px; aspect-ratio: 16/10; border-radius: var(--radius-card); overflow:hidden; background: var(--navy-tint); }
.news-item .news-thumb img{ width:100%; height:100%; object-fit:contain; background: var(--bg-soft); transition: transform .4s; }
.news-item:hover .news-thumb img{ transform: scale(1.05); }
.news-item .news-body{ flex:1; min-width:0; }
.news-item .news-date{
  display:inline-block; font-size:12px; color: var(--navy-soft);
  background: var(--navy-tint); padding: 2px 10px; border-radius:3px; margin-bottom:8px;
}
.news-item h3{ font-size:18px; margin-bottom:8px; line-height:1.5; }
.news-item h3 a:hover{ color: var(--navy-soft); }
.news-item p{
  font-size:14px; color: var(--ink-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-item .news-more{ font-size:13px; color: var(--navy); font-weight:700; }
@media (max-width:600px){
  .news-item{ flex-direction:column; }
  .news-item .news-thumb{ width:100%; }
}

/* 分页（静态占位） */
.pagination{ display:flex; justify-content:center; gap:8px; margin-top: var(--sp-l); }
.pagination a,.pagination span{
  min-width:38px; height:38px; padding: 0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:4px; font-size:14px; color: var(--ink-2);
  background:#fff;
}
.pagination .is-current{ background: var(--navy); border-color: var(--navy); color:#fff; font-weight:700; }
.pagination a:hover{ border-color: var(--navy); color: var(--navy); }

/* 4.19 筛选 tab */
.filter-tabs{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom: var(--sp-l); }
.filter-tabs button{
  padding: 9px 26px; border-radius: var(--radius-btn);
  border:1px solid var(--line); background:#fff; color: var(--ink-2);
  font-size:15px; transition: all .2s;
}
.filter-tabs button:hover{ border-color: var(--navy); color: var(--navy); }
.filter-tabs button.is-active{ background: var(--navy); border-color: var(--navy); color:#fff; font-weight:700; }
.filter-hide{ display:none !important; }

/* 4.20 联系页 */
.contact-cards{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-m); }
.contact-card{
  background:#fff; border-radius: var(--radius-card); padding: 30px 22px;
  text-align:center; box-shadow: var(--shadow); border-top:3px solid var(--navy);
}
.contact-card .contact-icon{
  width:56px; height:56px; margin: 0 auto 16px; border-radius:50%;
  background: var(--navy-tint); color: var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.contact-card .contact-icon svg{ width:26px; height:26px; fill:currentColor; }
.contact-card h3{ font-size:16px; margin-bottom:6px; }
.contact-card .contact-value{
  font-size:19px; font-weight:700; color: var(--navy);
  font-variant-numeric: tabular-nums; word-break:break-all;
}
.contact-card .contact-value--sm{ font-size:15px; }
.contact-card .contact-tip{ font-size:12px; color: var(--ink-3); margin-top:4px; }
.contact-card--red{ border-top-color: var(--red); }
.contact-card--red .contact-icon{ background: var(--red-tint); color: var(--red); }
.contact-card--red .contact-value{ color: var(--red); }
@media (max-width:992px){ .contact-cards{ grid-template-columns: repeat(2,1fr); } }

/* 联系我们 - 左右结构（信息左 / 表单右） */
.contact-2col{ display:grid; grid-template-columns: minmax(0,1fr) 440px; gap: var(--sp-l); align-items:start; }
.contact-info-col > * + *{ margin-top: var(--sp-m); }
.contact-info-col .contact-cards{ grid-template-columns: repeat(2,1fr); }
.contact-form-col .form-panel{ margin:0; max-width:none; }
@media (max-width:900px){ .contact-2col{ grid-template-columns:1fr; } }

/* 地图占位 */
.map-placeholder{
  position:relative; border-radius: var(--radius-card); overflow:hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--line) 39px 40px),
    var(--bg-soft);
  min-height: 340px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; color: var(--ink-3); padding: 24px;
}
.map-placeholder .map-pin{ width:56px; height:56px; color: var(--red); }
.map-placeholder .map-pin svg{ width:100%; height:100%; fill:currentColor; }
.map-placeholder strong{ font-size:18px; color: var(--ink); }
.map-placeholder .map-badge{
  position:absolute; top:16px; right:16px;
  font-size:12px; color: var(--ink-3);
  background:#fff; border:1px dashed var(--line); border-radius:4px; padding:4px 10px;
}

/* 留言表单 */
.form-panel{
  background:#fff; border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: 40px; max-width: 760px; margin: 0 auto;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap: 20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field--full{ grid-column: 1 / -1; }
.form-field label{ font-size:14px; font-weight:700; color: var(--ink); }
.form-field label .req{ color: var(--red); margin-left:2px; }
.form-field input,.form-field select,.form-field textarea{
  border:1px solid var(--line); border-radius: var(--radius-btn);
  padding: 12px 14px; background: var(--bg-soft);
  transition: border-color .2s, background .2s;
  width:100%;
}
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none; border-color: var(--navy-soft); background:#fff;
}
.form-field .field-error{ font-size:12px; color: var(--red); display:none; }
.form-field.has-error input,.form-field.has-error select,.form-field.has-error textarea{ border-color: var(--red); }
.form-field.has-error .field-error{ display:block; }
.form-actions{ grid-column: 1 / -1; text-align:center; margin-top: 8px; }
.form-tip{ font-size:13px; color: var(--ink-3); margin-top: 12px; }
.form-alert{
  display:none; margin-bottom: 20px; padding: 14px 18px;
  border-radius: var(--radius-btn); font-size:14px;
  background: var(--navy-tint); color: var(--navy); border:1px solid var(--navy-soft);
}
.form-alert.is-visible{ display:block; }
.form-alert.is-error{ background: var(--red-tint); color: var(--red-deep); border-color: var(--red); }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } .form-panel{ padding: 24px 20px; } }

/* 4.21 图集（关于我们） */
.gallery-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-s);
}
.gallery-grid .g-item{
  border-radius: var(--radius-card); overflow:hidden; position:relative;
  aspect-ratio: 3/4; background: var(--navy-tint);
}
.gallery-grid .g-item--wide{ grid-column: span 2; aspect-ratio: 3/4; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.gallery-grid .g-item:hover img{ transform: scale(1.05); }
.gallery-grid .g-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 24px 16px 12px; font-size:13px; color:#fff;
  background: linear-gradient(180deg, transparent, rgba(13,34,85,.75));
}
@media (max-width:768px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }

/* 4.22 双栏图文（关于我们简介等） */
.split{
  display:grid; grid-template-columns: 5fr 6fr; gap: var(--sp-l); align-items:center;
}
.split--rev{ grid-template-columns: 6fr 5fr; }
.split .split-img{ border-radius: var(--radius-card); overflow:hidden; box-shadow: var(--shadow-hover); }
.split .split-body h2{ font-size:28px; margin-bottom:18px; }
.split .split-body p{ margin-bottom: 12px; }
@media (max-width:992px){
  .split,.split--rev{ grid-template-columns:1fr; gap: var(--sp-m); }
  .split--rev .split-img{ order:-1; }
}

/* 4.23 实景展示条（首页） */
.scene-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-s); }
.scene-grid .s-item{ position:relative; border-radius: var(--radius-card); overflow:hidden; aspect-ratio: 4/3; background: var(--navy-tint); }
.scene-grid .s-item--tall{ grid-row: span 2; aspect-ratio: auto; }
.scene-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.scene-grid .s-item:hover img{ transform: scale(1.04); }
.scene-grid .s-cap{
  position:absolute; left:0; right:0; bottom:0; padding: 30px 16px 12px;
  color:#fff; font-size:14px; font-weight:700;
  background: linear-gradient(180deg, transparent, rgba(13,34,85,.8));
}
@media (max-width:768px){
  .scene-grid{ grid-template-columns:1fr 1fr; }
  .scene-grid .s-item--tall{ grid-row:auto; aspect-ratio: 4/3; grid-column: span 2; }
}

/* 4.24 悬浮侧边 / 移动端咨询条 */
.float-side{
  position:fixed; right:18px; bottom:100px; z-index:90;
  display:flex; flex-direction:column; gap:10px;
}
.float-btn{
  width:48px; height:48px; border-radius:8px;
  background:#fff; color: var(--navy);
  box-shadow: 0 4px 14px rgba(13,34,85,.18);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s, color .2s, opacity .3s;
  border:1px solid var(--line);
}
.float-btn svg{ width:22px; height:22px; fill:currentColor; }
.float-btn:hover{ background: var(--navy); color:#fff; }
#backTop{ opacity:0; pointer-events:none; }
#backTop.is-visible{ opacity:1; pointer-events:auto; }

.mobile-consult{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:#fff; border-top:1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(13,34,85,.08);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
.mobile-consult .mc-inner{ display:flex; gap:10px; }
.mobile-consult .btn{ flex:1; min-height:44px; padding: 8px 10px; font-size:15px; }
@media (max-width:768px){
  .mobile-consult{ display:block; }
  .float-side{ bottom: 84px; }            /* 保留右侧浮动列：返回顶部按钮恢复显示，上移避开底部咨询条 */
  .float-side > a{ display:none; }         /* 隐藏冗余电话按钮（移动端咨询条已含「电话咨询」） */
  .site-footer .footer-main{ display:none; }
  body{ padding-bottom: 64px; }
}

/* 4.25 页脚 */
.site-footer{ background: var(--navy-deep); color: rgba(255,255,255,.65); font-size:14px; }
.footer-main{
  display:grid; grid-template-columns: 4fr 3fr 3fr;
  gap: var(--sp-m); padding: 56px 0 40px;
}
.footer-col h3{
  color:#fff; font-size:16px; margin-bottom:18px; letter-spacing:1px;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.12);
  position:relative;
}
.footer-col h3::after{
  content:""; position:absolute; left:0; bottom:-1px; width:36px; height:2px; background: var(--red);
}
.footer-col .footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-col .footer-brand img{ height:40px; width:auto; }
.footer-col p{ line-height:1.9; }
.footer-col ul li{ margin-bottom:9px; }
.footer-col a{ color: rgba(255,255,255,.65); transition: color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg{ width:15px; height:15px; fill:currentColor; flex:none; margin-top:6px; opacity:.7; }
.footer-contact .f-phone{ font-size:17px; font-weight:700; color:#fff; font-variant-numeric: tabular-nums; }
.footer-report{ display:flex; gap:10px; align-items:flex-start; color: rgba(255,255,255,.9); margin-top:4px; }
.footer-report svg{ color: var(--red); opacity:1; flex:none; margin-top:4px; }
.footer-report .f-phone{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding: 18px 0; text-align:center; font-size:13px; color: rgba(255,255,255,.4);
}
.footer-bottom .icp{ margin-left: 12px; }
@media (max-width:992px){ .footer-main{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer-main{ grid-template-columns:1fr; padding: 40px 0 28px; } }

/* ---------------- 5. 页面专属 ---------------- */

/* 5.1 首页 Hero */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background: var(--navy-deep);
}
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(13,34,85,.92) 18%, rgba(22,53,126,.78) 55%, rgba(30,66,149,.45) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding: 110px 0 120px; max-width: 640px;
}
.hero .hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; letter-spacing:2px; color:#fff;
  border:1px solid rgba(255,255,255,.35); border-radius:3px;
  padding: 4px 14px; margin-bottom: 22px; background: rgba(255,255,255,.06);
}
.hero .hero-tag .dot{ width:8px; height:8px; border-radius:50%; background: var(--red); }
.hero h1{
  color:#fff; font-size: 42px; line-height:1.4; margin-bottom: 10px;
  text-shadow: 0 2px 12px rgba(13,34,85,.5);
}
.hero h1 .hero-sub{
  display:block; font-size: 20px; font-weight:500; color: rgba(255,255,255,.85);
  letter-spacing:2px; margin-top: 14px;
}
.hero h1 .hero-sub .sep{ color: var(--gold); margin: 0 10px; }
.hero .hero-desc{ margin: 18px 0 30px; color: rgba(255,255,255,.78); font-size:16px; max-width: 520px; }
.hero .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 34px; }
.hero .hero-phones{ display:flex; gap: 36px; flex-wrap:wrap; }
.hero .hero-phones .hp{ display:flex; flex-direction:column; gap:2px; }
.hero .hero-phones .hp small{ font-size:13px; color: rgba(255,255,255,.6); letter-spacing:1px; }
.hero .hero-phones .hp strong{
  font-size:24px; color:#fff; font-variant-numeric: tabular-nums; letter-spacing:1px;
  display:inline-flex; align-items:center; gap:8px;
}
.hero .hero-phones .hp strong svg{ width:20px; height:20px; fill: var(--red); background:#fff; border-radius:50%; padding:3px; }
@media (max-width:768px){
  .hero-inner{ padding: 64px 0 72px; }
  .hero h1{ font-size: 28px; }
  .hero h1 .hero-sub{ font-size:16px; }
  .hero .hero-phones{ gap: 20px; }
  .hero .hero-phones .hp strong{ font-size:20px; }
}

/* 5.2 业务范围页头图卡 */
.biz-hero{
  background: var(--navy); color:#fff; border-radius: var(--radius-card);
  padding: 36px 40px; margin-bottom: var(--sp-l);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.biz-hero h2{ color:#fff; font-size:24px; margin-bottom:6px; }
.biz-hero p{ color: rgba(255,255,255,.75); font-size:14px; }

/* 5.3 证书查验区 */
.verify-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-m); }
.verify-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-card);
  padding: 28px 24px; box-shadow: var(--shadow);
}
.verify-card .v-icon{
  width:50px; height:50px; border-radius:8px; background: var(--navy-tint);
  color: var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.verify-card .v-icon svg{ width:26px; height:26px; fill:currentColor; }
.verify-card h3{ font-size:17px; margin-bottom:8px; }
.verify-card p{ font-size:14px; color: var(--ink-3); }
.verify-card .v-link{
  display:inline-block; margin-top:10px; font-size:14px; font-weight:700; color: var(--navy);
}
.verify-card .v-link:hover{ color: var(--red); }
.verify-warn{
  margin-top: var(--sp-m);
  background: var(--red-tint); border:1px solid rgba(214,32,42,.25);
  border-radius: var(--radius-card); padding: 18px 22px;
  font-size:14px; color: var(--red-deep);
  display:flex; gap:12px; align-items:flex-start;
}
.verify-warn svg{ width:20px; height:20px; fill: var(--red); flex:none; margin-top:3px; }
.verify-warn strong{ color: var(--red-deep); }
@media (max-width:768px){ .verify-grid{ grid-template-columns:1fr; } }

/* 5.4 详情页工种头部 */
.trade-hero{
  background: linear-gradient(115deg, var(--navy-deep), var(--navy-mid));
  color:#fff; border-radius: var(--radius-card);
  padding: 36px 40px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.trade-hero .trade-icon{ background: rgba(255,255,255,.12); color:#fff; margin:0; width:64px; height:64px; }
.trade-hero h1{ color:#fff; font-size:28px; }
.trade-hero .th-sub{ color: rgba(255,255,255,.75); font-size:14px; margin-top:4px; }
.trade-hero .th-btn{ margin-left:auto; }

/* 5.5 报考资料对比表 */
.doc-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-m); }
.doc-card{ background:#fff; border-radius: var(--radius-card); box-shadow: var(--shadow); overflow:hidden; }
.doc-card .doc-head{
  background: var(--navy); color:#fff; padding: 14px 24px;
  font-weight:700; letter-spacing:1px; display:flex; align-items:center; gap:10px;
}
.doc-card .doc-head svg{ width:18px; height:18px; fill:currentColor; }
.doc-card .doc-head--red{ background: var(--red); }
.doc-card ul{ padding: 20px 24px; }
.doc-card ul li{
  position:relative; padding-left: 26px; margin-bottom: 12px; font-size:15px;
}
.doc-card ul li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color: var(--navy); font-weight:700;
}
@media (max-width:768px){ .doc-grid{ grid-template-columns:1fr; } }

/* ---------------- 6. 响应式 ---------------- */
@media (max-width:1200px){
  :root{ --sp-xl: 80px; }
  .trade-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:992px){
  :root{ --sp-xl: 64px; }
  .section-head h2{ font-size: 28px; }
  .trade-grid{ grid-template-columns: repeat(2,1fr); }
  .feature-grid{ grid-template-columns: repeat(3,1fr); }
  .layout-2col{ grid-template-columns: 1fr; }
  .law-grid{ grid-template-columns:1fr; }
  .verify-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-cards{ grid-template-columns: repeat(2,1fr); }
  .cta-band{ padding: 30px; }
}
@media (max-width:768px){
  :root{ --sp-xl: 48px; --sp-l: 40px; }
  .section{ padding: var(--sp-xl) 0; }
  .section-head{ margin-bottom: var(--sp-m); }
  .section-head h2{ font-size: 24px; }
  .trade-grid{ grid-template-columns: repeat(2,1fr); gap: 16px; }
  .trade-card{ padding: 20px 16px; }
  .feature-grid{ grid-template-columns:1fr; }
  .case-grid{ grid-template-columns:1fr; }
  .verify-grid{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns: repeat(2,1fr); gap:16px; }
  .step-grid{ grid-template-columns: repeat(2,1fr); }
  .step-timeline{ padding-left: 44px; }
  .step-timeline .step-item::before{ left:-33px; }
  .filter-tabs{ gap:8px; margin-bottom: var(--sp-m); }
  .filter-tabs button{ padding: 7px 16px; font-size:14px; }
  .pager-nav{ grid-template-columns:1fr; }
  .pager-nav .next{ text-align:left; }
  .article-header h1{ font-size:22px; }
  .form-panel{ padding: 28px 20px; }
  .biz-hero,.trade-hero{ padding: 24px; }
  .trade-hero .th-btn{ margin-left:0; }
}
@media (max-width:480px){
  :root{ --gutter: 16px; }
  .trade-grid{ grid-template-columns:1fr; }
  .step-grid{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:1fr; }
  .review-grid{ gap: 10px; }
  .stat-item .num{ font-size:30px; }
  .hero .hero-actions .btn{ width:100%; }
  .cta-band{ padding: 24px 20px; }
  .cta-band .cta-phone{ font-size:20px; }
  .pagination{ flex-wrap:wrap; }
}

/* 打印：隐藏交互组件 */
@media print{
  .site-header,.float-side,.mobile-consult,.site-footer,.hero-actions{ display:none !important; }
}

/* ===== 小屏兜底补丁（2026-09-22 追加，纯新增不改动既有规则）=====
   问题：375px 视口下，表格表头 white-space:nowrap 与 1fr 网格轨道的 min-content
   会撑破容器，配合 body{overflow-x:hidden} 造成内容被静默裁切。 */
@media (max-width: 992px){
  /* 1) 表格单元格允许换行，消除 min-content 撑宽 */
  .article-body th,
  .article-body td{ white-space: normal; }
  /* 2) 两栏网格轨道改为 minmax(0,1fr)，杜绝被内容撑破 */
  .layout-2col{ grid-template-columns: minmax(0,1fr); }
  /* 3) 表格自身作为可横向滚动容器，兜底更宽的表格（可滑动优于被截断） */
  .article-body table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ===== 列表空状态（2026-09-22 追加，纯新增不改动既有规则）===== */
.empty-state{
  text-align:center; padding: 48px 20px; margin-top: var(--sp-m);
  color: var(--ink-3); font-size:15px; line-height:1.8;
  background: var(--bg-soft); border:1px dashed var(--line); border-radius: var(--radius-card);
}
.empty-state a{ color: var(--navy); font-weight:700; }

/* 工种专题页专用（由静态原型内联样式迁出，避免模板内联 <style>） */
.trade-hero h2{ color:#fff; font-size:28px; }
.quick-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
.quick-facts .qf{
  background: var(--navy-tint); border-left:3px solid var(--navy);
  border-radius:0 6px 6px 0; padding:16px 18px;
}
.quick-facts .qf strong{ display:block; font-size:18px; color: var(--navy); line-height:1.5; }
.quick-facts .qf span{ font-size:13px; color: var(--ink-3); }
.blk{ margin-bottom: 56px; }
.blk:last-child{ margin-bottom: 0; }
.detail-aside{ position: sticky; top: 100px; }
@media (max-width:992px){
  .quick-facts{ grid-template-columns:1fr; }
  .detail-aside{ position: static; }
  .blk{ margin-bottom: 40px; }
}

/* ===== 首页新闻卡片（2026-09-24 追加）===== */
.news-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-m); }
.news-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius: var(--radius-card); overflow:hidden;
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.news-card__thumb{ display:block; aspect-ratio:16/9; overflow:hidden; background: var(--navy-tint); }
.news-card__thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.news-card:hover .news-card__thumb img{ transform: scale(1.04); }
.news-card__body{ padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.news-card__date{
  display:inline-block; align-self:flex-start; font-size:12px; color: var(--navy-soft);
  background: var(--navy-tint); padding:2px 10px; border-radius:3px; margin-bottom:8px;
}
.news-card__body h3{ font-size:17px; margin-bottom:8px; line-height:1.5; }
.news-card__body p{
  font-size:13px; color: var(--ink-3); flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:1024px){ .news-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .news-grid{ grid-template-columns:1fr; } }

/* 公司简介视频（2026-09-25 修正：锁定 16:9 显示框，消除海报 3:4 与视频 16:9 的尺寸跳动） */
.company-video{ width:100%; max-width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; object-position:center; display:block; margin:0 auto; border-radius: var(--radius-card); background:#000; box-shadow: var(--shadow); }

/* 公司简介 - 考生合影 / 荣誉殿堂 切换标签页 */
.about-tabs{ margin-top: 4px; }
.tab-nav{ display:flex; flex-wrap:wrap; gap:0; border-bottom:2px solid var(--line); }
.tab-nav .tab-btn{
  appearance:none; cursor:pointer; background:transparent; border:none;
  padding:14px 30px; font-size:17px; font-weight:700; color: var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition: color .2s ease, border-color .2s ease;
}
.tab-nav .tab-btn:hover{ color: var(--navy); }
.tab-nav .tab-btn.is-active{ color: var(--navy); border-bottom-color: var(--red); }
.tab-panel{ display:none; padding-top:28px; }
.tab-panel.is-active{ display:block; }
.tab-panel .reveal{ opacity:1; transform:none; }
@media (max-width:560px){ .tab-nav .tab-btn{ padding:12px 18px; font-size:15px; } }

/* 移动端：下拉改为纵向展开（不依赖 hover） */
@media (max-width:992px){
  .main-nav li.has-dropdown{ position:static; }
  .main-nav .sub-menu{
    position:static; z-index:auto; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border-radius:0; background: var(--navy-tint);
    padding:0 0 8px 0;
  }
  .main-nav .sub-menu a{ padding:11px 24px 11px 40px; }
  .main-nav .caret{ border-top-color: var(--navy); }
}

/* 图集（考生合影 / 荣誉殿堂）统一高度 + 点击放大（2026-09-21 追加） */
.gallery-grid .g-item{ height:220px; aspect-ratio:auto; cursor:zoom-in; }
.gallery-grid .g-item--wide{ aspect-ratio:auto; }
@media (max-width:768px){ .gallery-grid .g-item{ height:160px; } }

/* 灯箱 */
.lightbox{
  position:fixed; inset:0; background:rgba(7,15,35,.88);
  display:none; align-items:center; justify-content:center; z-index:9999; padding:24px;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:8px; box-shadow:0 12px 48px rgba(0,0,0,.55); }
.lightbox .lb-close{ position:absolute; top:16px; right:24px; color:#fff; font-size:42px; line-height:1; cursor:pointer; opacity:.85; }
.lightbox .lb-close:hover{ opacity:1; }

/* 表单验证码（2026-09-24 追加） */
.form-code{ display:flex; align-items:center; gap:12px; }
.form-code input{ flex:1; }
.form-code .code-img{ height:42px; border-radius:6px; border:1px solid var(--line); cursor:pointer; }

/* 案例网格平板断点（2026-09-24 追加） */
@media (max-width:900px){ .case-grid{ grid-template-columns: repeat(2,1fr); } }