/* ==========================================================================
   周口八大员人才网 · pzsr.cn
   全站基础样式 base.css —— 设计令牌 / 排版 / 导航 / 页脚 / 通用组件 / 动画 / 响应式
   风格：香水潮流风（浅紫 + 亮粉 + 浅蓝）
   说明：本文件为全站共享基础样式，各页面独有的布局样式请写在 css/pages/*.css 中
   ========================================================================== */

/* ========== 1. 设计令牌 ========== */
:root{
  /* 品牌色板 */
  --purple-deep:#7C6CD9;          /* 主紫 */
  --purple:#9B8AEA;               /* 亮紫 */
  --purple-soft:#C9B8F5;          /* 浅紫 */
  --purple-mist:#EDE6FC;          /* 雾紫 */
  --pink:#FF7EBC;                 /* 亮粉 */
  --pink-deep:#FF5FA2;            /* 深粉 */
  --pink-soft:#FFD6EA;            /* 浅粉 */
  --blue:#6FBFF3;                 /* 天蓝 */
  --blue-soft:#8FD0F7;            /* 浅蓝 */
  --blue-mist:#DDF1FD;            /* 雾蓝 */

  /* 中性色 */
  --ink:#3A3550;                  /* 主文字：深紫灰 */
  --ink-2:#55516B;                /* 次级文字 */
  --ink-3:#6E6A85;                /* 弱文字 */
  --line:rgba(201,184,245,.38);   /* 通用描边 */
  --line-2:rgba(143,208,247,.35);

  /* 渐变 */
  --grad-brand:linear-gradient(120deg,#9B8AEA 0%,#FF7EBC 55%,#8FD0F7 100%);
  --grad-pink:linear-gradient(120deg,#FF7EBC,#FF5FA2);
  --grad-purple:linear-gradient(120deg,#9B8AEA,#C9B8F5);
  --grad-blue:linear-gradient(120deg,#8FD0F7,#6FBFF3);
  --grad-soft:linear-gradient(160deg,#F4EEFF 0%,#FDF1F8 45%,#EAF6FF 100%);

  /* 表面与阴影 */
  --surface:#FFFFFF;
  --glass:rgba(255,255,255,.78);
  --shadow-sm:0 6px 18px rgba(124,108,217,.10);
  --shadow-md:0 14px 34px rgba(124,108,217,.14);
  --shadow-lg:0 24px 60px rgba(124,108,217,.18);
  --shadow-pink:0 14px 34px rgba(255,126,188,.22);

  /* 圆角 */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;
  --r-full:999px;

  /* 字体 */
  --font:'Microsoft YaHei','PingFang SC','Hiragino Sans GB','Noto Sans SC','WenQuanYi Micro Hei',sans-serif;

  /* 导航高度 */
  --nav-h:74px;

  /* 间距 */
  --gap:24px;
  --sec-pad:clamp(52px,7vw,104px);
}

/* ========== 2. Reset 与基础 ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--grad-soft);
  line-height:1.75;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
::selection{background:var(--purple-soft);color:var(--ink)}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#F2EDFC}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple-soft),var(--blue-soft));border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--purple),var(--blue))}

/* ========== 3. 排版 ========== */
h1,h2,h3,h4,h5,h6{line-height:1.35;font-weight:700;color:var(--ink)}
p{color:var(--ink-2)}
strong{color:var(--ink);font-weight:600}

.grad-text{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ========== 4. 通用组件 ========== */
.container{width:min(1200px,92%);margin-inline:auto}

/* 分区头 */
.sec-head{text-align:center;max-width:720px;margin:0 auto clamp(38px,5vw,56px)}
.sec-head .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;letter-spacing:2px;color:var(--purple-deep);
  font-weight:600;padding:6px 18px;border-radius:var(--r-full);
  background:var(--purple-mist);border:1px solid var(--line);
}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);margin:16px 0 12px;letter-spacing:.5px}
.sec-head h2 .grad-text{display:inline}
.sec-head p{font-size:clamp(14px,1.3vw,16px);color:var(--ink-3)}
.sec-head.left{text-align:left;margin-left:0}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:var(--r-full);
  font-size:15px;font-weight:600;letter-spacing:.5px;
  transition:transform .3s ease,box-shadow .3s ease,filter .3s ease,background .3s ease;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn-pink{background:var(--grad-pink);color:#fff;box-shadow:var(--shadow-pink)}
.btn-pink:hover{box-shadow:0 18px 40px rgba(255,126,188,.35);filter:saturate(1.06)}
.btn-purple{background:var(--grad-purple);color:#fff;box-shadow:var(--shadow-sm)}
.btn-purple:hover{box-shadow:0 18px 40px rgba(155,138,234,.34)}
.btn-blue{background:var(--grad-blue);color:#fff;box-shadow:var(--shadow-sm)}
.btn-blue:hover{box-shadow:0 18px 40px rgba(111,191,243,.34)}
.btn-ghost{background:var(--glass);color:var(--purple-deep);border-color:var(--line);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--purple);box-shadow:var(--shadow-sm)}
.btn-lg{padding:16px 40px;font-size:16px}
.btn-sm{padding:9px 20px;font-size:13px}

/* 标签 */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;padding:5px 14px;border-radius:var(--r-full);
  background:var(--purple-mist);color:var(--purple-deep);border:1px solid var(--line);
  transition:all .3s ease;
}
.tag.pink{background:var(--pink-soft);color:var(--pink-deep);border-color:rgba(255,126,188,.35)}
.tag.blue{background:var(--blue-mist);color:#3E8BC7;border-color:var(--line-2)}
.tag:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* 卡片 */
.card{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--purple-soft)}

/* 面包屑 */
.crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:13px;color:var(--ink-3);
}
.crumbs a{color:var(--purple-deep);transition:color .25s}
.crumbs a:hover{color:var(--pink-deep)}
.crumbs .sep{opacity:.5}

/* 内页横幅（统一但各页可叠加个性化元素） */
.page-hero{
  position:relative;overflow:hidden;
  padding:clamp(96px,12vw,150px) 0 clamp(56px,7vw,90px);
  background:linear-gradient(150deg,#EDE6FC 0%,#FDF1F8 48%,#DDF1FD 100%);
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(640px 340px at 12% 18%,rgba(201,184,245,.5),transparent 65%),
    radial-gradient(560px 300px at 86% 30%,rgba(143,208,247,.45),transparent 65%),
    radial-gradient(420px 260px at 55% 100%,rgba(255,214,234,.55),transparent 65%);
  pointer-events:none;
}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{
  font-size:clamp(28px,4.4vw,48px);
  margin:14px 0 12px;letter-spacing:1px;
}
.page-hero .sub{font-size:clamp(14px,1.6vw,17px);color:var(--ink-3);max-width:640px}

/* 分隔 */
.sec{padding-block:var(--sec-pad);position:relative}
.sec-tint{background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.25))}

/* 装饰圆 */
.orb{
  position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px);opacity:.5;
}

/* ========== 5. 顶部导航 ========== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  height:var(--nav-h);
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 30px rgba(124,108,217,.12);
  border-bottom-color:var(--line);
}
.header-inner{
  width:min(1240px,94%);margin-inline:auto;height:100%;
  display:flex;align-items:center;gap:22px;
}
/* 品牌 */
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:150px;height:auto;border-radius:12px}
.brand .brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand .brand-txt b{font-size:17px;letter-spacing:1px;color:var(--ink)}
.brand .brand-txt small{font-size:11px;letter-spacing:3px;color:var(--purple-deep);font-weight:600}
/* 主导航 */
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.main-nav > a,.main-nav .nav-item > a{
  position:relative;display:flex;align-items:center;gap:5px;
  padding:10px 15px;font-size:15px;font-weight:500;color:var(--ink-2);
  border-radius:var(--r-sm);transition:color .25s,background .25s;
}
.main-nav > a:hover,.main-nav .nav-item > a:hover,
.main-nav > a.active,.main-nav .nav-item.active > a{color:var(--purple-deep);background:var(--purple-mist)}
.main-nav .nav-item{position:relative}
.nav-item .drop-icon{width:11px;height:11px;transition:transform .3s}
.nav-item:hover .drop-icon{transform:rotate(180deg)}
/* 下拉 */
.drop-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(10px);
  min-width:230px;padding:12px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s;
  display:grid;gap:2px;
}
.drop-menu::before{
  content:"";position:absolute;top:-14px;left:0;right:0;height:14px;
}
.nav-item:hover .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-menu a{
  display:flex;align-items:center;gap:9px;padding:9px 13px;
  font-size:14px;color:var(--ink-2);border-radius:var(--r-sm);
  transition:background .25s,color .25s,transform .25s;
}
.drop-menu a svg{width:15px;height:15px;color:var(--purple);flex:none}
.drop-menu a:hover{background:var(--purple-mist);color:var(--purple-deep);transform:translateX(4px)}
/* 右侧 CTA */
.header-cta{display:flex;align-items:center;gap:10px;flex:none}
.header-cta .btn{padding:10px 20px;font-size:14px}
/* 汉堡 */
.nav-toggle{
  display:none;flex:none;width:44px;height:44px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:var(--purple-mist);border:1px solid var(--line);
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--purple-deep);border-radius:2px;transition:transform .3s,opacity .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)}

/* ========== 6. 页脚 ========== */
.site-footer{
  position:relative;margin-top:auto;
  background:linear-gradient(160deg,#EFE9FB 0%,#FDF1F8 55%,#E8F5FE 100%);
  border-top:1px solid var(--line);
  padding:clamp(46px,6vw,72px) 0 30px;
  overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(480px 260px at 8% 0%,rgba(201,184,245,.35),transparent 60%),
             radial-gradient(420px 240px at 94% 10%,rgba(143,208,247,.35),transparent 60%);
  pointer-events:none;
}
.footer-grid{
  position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,48px);
}
.footer-brand .brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-brand .brand img{width:180px}
.footer-brand p{font-size:14px;color:var(--ink-3);max-width:320px;margin-top:6px}
.footer-col h4{font-size:16px;margin-bottom:18px;letter-spacing:1px;position:relative;padding-bottom:10px}
.footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:var(--grad-pink)}
.footer-col ul{display:grid;gap:9px}
.footer-col ul a{font-size:14px;color:var(--ink-3);display:inline-flex;align-items:center;gap:7px;transition:color .25s,transform .25s}
.footer-col ul a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--purple-soft);transition:background .25s}
.footer-col ul a:hover{color:var(--purple-deep);transform:translateX(3px)}
.footer-col ul a:hover::before{background:var(--pink)}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-3)}
.footer-contact li svg{width:17px;height:17px;color:var(--pink-deep);flex:none;margin-top:4px}
.footer-contact li a:hover{color:var(--purple-deep)}
.footer-bottom{
  position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:clamp(30px,4vw,46px);padding-top:22px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--ink-3);
}
.footer-bottom .icp{display:inline-flex;align-items:center;gap:8px}
.footer-bottom a:hover{color:var(--purple-deep)}

/* ========== 7. 滚动渐入动画 ========== */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.left{transform:translateX(-40px)}
.reveal.right{transform:translateX(40px)}
.reveal.zoom{transform:scale(.94)}
.reveal.left.in,.reveal.right.in,.reveal.zoom.in{transform:none}
[data-delay="1"]{transition-delay:.1s}
[data-delay="2"]{transition-delay:.2s}
[data-delay="3"]{transition-delay:.3s}
[data-delay="4"]{transition-delay:.45s}
[data-delay="5"]{transition-delay:.6s}

/* ========== 8. 回到顶部 ========== */
.to-top{
  position:fixed;right:26px;bottom:26px;z-index:900;
  width:48px;height:48px;border-radius:50%;
  background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s,visibility .35s,transform .35s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.to-top svg{width:20px;height:20px}

/* ========== 9. 表单通用 ========== */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.field label .req{color:var(--pink-deep)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border-radius:var(--r-md);
  border:1px solid var(--line);background:rgba(255,255,255,.85);
  color:var(--ink);outline:none;transition:border-color .3s,box-shadow .3s;
  font-size:14px;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--purple);box-shadow:0 0 0 4px rgba(201,184,245,.28);
}
.field input::placeholder,.field textarea::placeholder{color:#B4AFCA}

/* ========== 9.5 Toast ========== */
.site-toast{
  position:fixed;left:50%;bottom:40px;z-index:2000;
  transform:translate(-50%,24px);
  max-width:min(88vw,520px);
  padding:14px 24px;border-radius:var(--r-full);
  background:rgba(58,53,80,.94);color:#fff;
  font-size:14px;text-align:center;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;
  transition:opacity .4s,transform .4s,visibility .4s;
}
.site-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ========== 10. 响应式 ========== */
@media (max-width:1024px){
  :root{--nav-h:66px}
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:18px 5%;overflow-y:auto;
    background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
    transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
    z-index:1000;
  }
  .main-nav.open{transform:none}
  .main-nav > a,.main-nav .nav-item > a{padding:13px 16px;font-size:16px}
  .nav-item .drop-menu{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
    border:none;background:transparent;padding:2px 8px 8px 18px;display:none;
    min-width:0;
  }
  .nav-item.open .drop-menu{display:grid}
  .nav-item.open .drop-icon{transform:rotate(180deg)}
  .nav-item .drop-menu a{padding:10px 12px}
  .header-cta .btn-ghost{display:none}
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:15px}
  .footer-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .header-cta .btn{padding:9px 14px;font-size:13px}
  .brand img{width:124px}
  .to-top{right:16px;bottom:16px;width:42px;height:42px}
}

/* ========== 11. 无障碍 ========== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal,.reveal.left,.reveal.right,.reveal.zoom{opacity:1;transform:none}
}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

/* ===== 通用：政策/服务补充说明面板（各政策页复用） ===== */
.note-panel{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-sm);max-width:960px;margin:0 auto}
.note-panel p{font-size:15px;color:var(--ink-2);line-height:2;margin-bottom:14px}
.note-panel p:last-child{margin-bottom:0}