/* ============================================================
   mhpq.cn 特种作业考证咨询站 · 全站基础样式
   摄影奶油风：奶白 / 浅黄 / 柔粉
   本文件为全站公共层：设计变量、重置、排版、导航、页脚、
   通用组件与动效。各页面独立样式见 css/ 下对应文件。
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root{
  --bg:      #FBF7F0;   /* 奶白主背景 */
  --bg-2:    #F6F0E3;   /* 浅杏米 */
  --bg-3:    #FFF9F0;   /* 提亮背景 */
  --cream:   #FAF3E7;
  --yellow:  #F0DFA6;   /* 浅黄 */
  --yellow-2:#E9CD84;
  --pink:    #F6D8CE;   /* 柔粉 */
  --pink-2:  #EFBFB0;
  --ink:     #3D362C;   /* 暖深棕正文 */
  --ink-2:   #6B6253;
  --ink-3:   #9C927F;
  --amber:   #C89B4A;   /* 主强调杏金 */
  --rose:    #C97B6A;   /* 次强调柔玫 */
  --line:    #EAE0D0;
  --white:   #FFFFFF;
  --shadow-s:0 12px 30px rgba(200,155,74,.12);
  --shadow-c:0 12px 28px rgba(93,79,52,.09);
  --shadow-l:0 26px 60px rgba(93,79,52,.16);
  --radius:  18px;
  --radius-s:12px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Helvetica Neue",Arial,sans-serif;
}

/* ---------- 重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.2px;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color .25s; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; }
::selection{ background:var(--yellow); color:var(--ink); }

/* ---------- 版心 ---------- */
.container{ width:min(1200px,92%); margin:0 auto; }

/* ---------- 排版 ---------- */
h1,h2,h3,h4{ line-height:1.3; font-weight:700; color:var(--ink); }
h1{ font-size:clamp(28px,4.6vw,46px); }
h2{ font-size:clamp(24px,3.2vw,34px); }
h3{ font-size:clamp(18px,2.2vw,22px); }
h4{ font-size:17px; }
p{ color:var(--ink-2); }
em{ font-style:normal; color:var(--amber); font-weight:700; }
strong{ color:var(--ink); }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px;
  font-size:15px; font-weight:600; line-height:1;
  transition:all .3s ease; white-space:nowrap;
}
.btn-amber{
  background:linear-gradient(135deg,#E7C878,#C89B4A);
  color:#FFF; box-shadow:0 10px 22px rgba(200,155,74,.35);
}
.btn-amber:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(200,155,74,.42); }
.btn-rose{
  background:linear-gradient(135deg,#F4C8BA,#C97B6A);
  color:#FFF; box-shadow:0 10px 22px rgba(201,123,106,.32);
}
.btn-rose:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(201,123,106,.4); }
.btn-ghost{
  border:1.5px solid var(--line); color:var(--ink); background:rgba(255,255,255,.55);
  backdrop-filter:blur(4px);
}
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-3px); }
.btn-white{
  background:#FFF; color:var(--ink); box-shadow:0 10px 24px rgba(93,79,52,.18);
}
.btn-white:hover{ transform:translateY(-3px); color:var(--amber); }
.btn-lg{ padding:16px 34px; font-size:16px; }
.btn .arr{ transition:transform .3s; }
.btn:hover .arr{ transform:translateX(4px); }

/* ---------- 顶部导航 ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:999;
  transition:background .35s,box-shadow .35s,backdrop-filter .35s;
}
.site-header .nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; transition:height .35s;
}
.header-logo{ display:flex; align-items:center; gap:12px; }
.header-logo img{ width:46px; height:46px; border-radius:12px; box-shadow:var(--shadow-s); }
.header-logo .logo-txt{ line-height:1.15; }
.header-logo .logo-txt strong{ display:block; font-size:19px; letter-spacing:.5px; }
.header-logo .logo-txt span{ font-size:12px; color:var(--ink-3); letter-spacing:2px; }

.main-nav ul{ display:flex; align-items:center; gap:6px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:block; padding:10px 14px; font-size:15px; font-weight:600;
  color:var(--ink); border-radius:10px; position:relative;
}
.main-nav > ul > li > a .caret{ display:inline-block; margin-left:4px; font-size:10px; transition:transform .3s; }
.main-nav > ul > li:hover > a .caret{ transform:rotate(180deg); }
.main-nav > ul > li > a:hover, .main-nav > ul > li.active > a{ color:var(--amber); }
.has-drop .drop{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,8px);
  min-width:230px; background:#FFF; border:1px solid var(--line); border-radius:16px;
  padding:10px; box-shadow:var(--shadow-l); opacity:0; visibility:hidden; transition:all .3s;
  z-index:50;
}
.has-drop:hover .drop{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.drop a{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; font-size:14px; color:var(--ink-2); }
.drop a:hover{ background:var(--bg-3); color:var(--amber); }
.drop a i{ font-style:normal; font-size:11px; color:var(--amber); }

.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-tel{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--ink); }
.nav-tel svg{ color:var(--amber); }

/* 滚动后状态 */
.site-header.scrolled{ background:rgba(251,247,240,.92); backdrop-filter:blur(14px); box-shadow:0 8px 28px rgba(93,79,52,.10); }
.site-header.scrolled .nav-inner{ height:64px; }
.site-header.scrolled .header-logo img{ width:40px; height:40px; }

/* 移动端汉堡 */
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:12px;
  background:#FFF; box-shadow:var(--shadow-c);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:all .3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* 移动导航面板 */
.mobile-nav{
  position:fixed; inset:0; background:rgba(251,247,240,.98); z-index:998;
  padding:110px 24px 40px; overflow-y:auto; display:none;
}
.mobile-nav.open{ display:block; }
.mobile-nav a{ display:block; padding:14px 6px; font-size:17px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); }
.mobile-nav .mn-sub a{ font-size:15px; font-weight:500; color:var(--ink-2); padding:10px 6px 10px 20px; border-bottom:none; }
.mobile-nav .mn-tel{ margin-top:24px; padding:14px; border-radius:14px; background:var(--yellow); font-weight:700; text-align:center; }

/* ---------- 页脚 ---------- */
.site-footer{ background:linear-gradient(180deg,#F3EAD8,#EFE2C8); margin-top:0; }
.footer-top{ padding:64px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr 1.4fr; gap:34px; }
.foot-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.foot-brand img{ width:48px; height:48px; border-radius:12px; }
.foot-brand strong{ font-size:18px; }
.footer-grid h4{ font-size:15px; margin-bottom:16px; letter-spacing:1px; }
.footer-grid ul li{ margin-bottom:9px; }
.footer-grid ul a{ font-size:14px; color:var(--ink-2); }
.footer-grid ul a:hover{ color:var(--amber); }
.foot-contact li{ font-size:14px; color:var(--ink-2); margin-bottom:11px; display:flex; gap:8px; align-items:flex-start; }
.foot-contact svg{ flex:none; margin-top:4px; color:var(--amber); }
.foot-desc{ font-size:14px; color:var(--ink-2); }
.footer-bottom{
  border-top:1px solid rgba(93,79,52,.12); padding:18px 0;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-3);
}
.footer-bottom a{ color:var(--ink-3); }
.footer-bottom a:hover{ color:var(--amber); }

/* ---------- 通用 Hero 基座（各页面族在此基础上定制） ---------- */
.hero{ position:relative; overflow:hidden; }
.hero .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero .hero-overlay{ position:absolute; inset:0; z-index:1; }
.hero .hero-overlay.dark{ background:linear-gradient(100deg,rgba(61,54,44,.72) 0%,rgba(61,54,44,.42) 55%,rgba(61,54,44,.18) 100%); }
.hero .hero-overlay.mid{ background:linear-gradient(120deg,rgba(61,54,44,.62),rgba(61,54,44,.25) 60%,rgba(246,216,206,.25)); }
.hero .hero-overlay.light{ background:linear-gradient(115deg,rgba(251,247,240,.95) 0%,rgba(251,247,240,.78) 45%,rgba(251,247,240,.25) 100%); }
.hero .container{ position:relative; z-index:2; }
.sec-alt{ background:var(--bg-2); }
.sec-blob{ background:var(--bg-3); }

/* ---------- 通用区块标题 ---------- */
.sec{ padding:88px 0; }
.sec-tight{ padding:64px 0; }
.sec-head{ text-align:center; margin-bottom:52px; }
.sec-head.left{ text-align:left; }
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:3px; color:var(--amber); font-weight:700; margin-bottom:12px;
}
.kicker::before,.kicker::after{ content:""; width:26px; height:1.5px; background:var(--yellow-2); }
.sec-head.left .kicker::before{ display:none; }
.sec-title{ margin-bottom:14px; }
.sec-sub{ max-width:720px; margin:0 auto; color:var(--ink-2); font-size:15px; }
.sec-head.left .sec-sub{ margin:0; }

/* ---------- 通用卡片 ---------- */
.card{
  background:#FFF; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-c); transition:transform .35s,box-shadow .35s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-l); }

/* 标签 / 徽章 */
.tag{
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--yellow); color:var(--amber);
}
.tag.pink{ background:var(--pink); color:var(--rose); }
.tag.plain{ background:var(--bg-2); color:var(--ink-2); }

/* ---------- 面包屑 ---------- */
.crumb{ padding:20px 0 0; font-size:13px; color:var(--ink-3); }
.crumb a{ color:var(--ink-3); }
.crumb a:hover{ color:var(--amber); }
.crumb .sep{ margin:0 8px; opacity:.5; }

/* ---------- 表格 ---------- */
.tbl-wrap{ overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow-c); background:#FFF; border:1px solid var(--line); }
.tbl{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.tbl th{ background:var(--bg-2); color:var(--ink); font-weight:700; padding:14px 18px; text-align:left; white-space:nowrap; }
.tbl td{ padding:13px 18px; border-top:1px solid var(--line); color:var(--ink-2); }
.tbl tr:hover td{ background:var(--bg-3); }
.tbl .ok{ color:var(--amber); font-weight:700; }

/* ---------- 表单基础 ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.field label .req{ color:var(--rose); }
.field input,.field select,.field textarea{
  width:100%; padding:12px 15px; border-radius:12px; border:1.5px solid var(--line);
  background:#FFF; font-size:14px; color:var(--ink); outline:none; transition:border .25s,box-shadow .25s;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--amber); box-shadow:0 0 0 4px rgba(200,155,74,.12); }
.field input.err,.field select.err{ border-color:var(--rose); }
.form-msg{ font-size:13px; color:var(--rose); margin-top:-10px; margin-bottom:12px; min-height:18px; }

/* ---------- 滚动渐入 ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease,transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; }
.reveal.d2{ transition-delay:.2s; }
.reveal.d3{ transition-delay:.3s; }

/* ---------- 通用 CTA 横幅 ---------- */
.cta-band{
  position:relative; border-radius:24px; overflow:hidden; padding:64px 48px; text-align:center;
  background:linear-gradient(135deg,#F6E7C8,#F3D3C7);
  box-shadow:var(--shadow-l);
}
.cta-band h2{ margin-bottom:14px; }
.cta-band p{ max-width:640px; margin:0 auto 26px; color:var(--ink-2); }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band .deco{ position:absolute; border-radius:50%; background:rgba(255,255,255,.35); }
.cta-band .deco.d1{ width:180px; height:180px; top:-60px; left:-40px; }
.cta-band .deco.d2{ width:120px; height:120px; bottom:-40px; right:60px; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:920px){
  .main-nav, .nav-tel{ display:none; }
  .nav-toggle{ display:flex; }
  .sec{ padding:64px 0; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:26px; }
}
@media (max-width:600px){
  body{ font-size:15px; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .cta-band{ padding:44px 22px; }
  .header-logo .logo-txt span{ display:none; }
}