/* ============================================================
   index.css · 首页专属样式
   ============================================================ */

/* ---------- 全屏 Banner ---------- */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  padding:calc(var(--header-h) + 40px) 0 70px;
  color:#fff;
}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-mask{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(20,42,64,.82) 0%,rgba(31,66,98,.62) 52%,rgba(31,66,98,.28) 100%);
}
.hero-inner{max-width:820px}
.hero-kicker{
  font-size:13px;letter-spacing:3px;font-weight:600;
  color:rgba(255,255,255,.85);margin-bottom:18px;
}
.hero-title{color:#fff;margin:0 0 20px}
.ht-line{display:block}
.ht-line i{
  display:inline-block;font-style:normal;
  opacity:0;transform:translateY(30px);
  animation:heroChar .7s cubic-bezier(.22,.61,.36,1) forwards;
  text-shadow:0 4px 18px rgba(10,30,50,.35);
}
.ht-1 i:nth-child(1){animation-delay:.15s}
.ht-1 i:nth-child(2){animation-delay:.23s}
.ht-1 i:nth-child(3){animation-delay:.31s}
.ht-1 i:nth-child(4){animation-delay:.39s}
.ht-1 i:nth-child(5){animation-delay:.47s}
.ht-1 i:nth-child(6){animation-delay:.55s}
.ht-1 i:nth-child(7){animation-delay:.63s}
.ht-1 i:nth-child(8){animation-delay:.71s}
.ht-2{margin-top:6px;font-size:.52em;letter-spacing:10px;color:var(--blue-200)}
.ht-2 i:nth-child(1){animation-delay:.80s}
.ht-2 i:nth-child(2){animation-delay:.88s}
.ht-2 i:nth-child(3){animation-delay:.96s}
.ht-2 i:nth-child(4){animation-delay:1.04s}
.ht-2 i:nth-child(5){animation-delay:1.12s}
.ht-2 i:nth-child(6){animation-delay:1.20s}
.ht-2 i:nth-child(7){animation-delay:1.28s}
.ht-2 i:nth-child(8){animation-delay:1.36s}
@keyframes heroChar{to{opacity:1;transform:none}}
.hero-sub{
  font-size:16px;line-height:1.9;color:rgba(255,255,255,.92);
  max-width:640px;margin-bottom:30px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:46px}
.hero-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.hero-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
.hero-stats{display:flex;flex-wrap:wrap;gap:14px 38px}
.hero-stats li{display:flex;align-items:baseline;gap:10px}
.hero-stats strong{font-size:34px;font-weight:800;color:#fff}
.hero-stats span{font-size:13px;color:rgba(255,255,255,.82)}

/* ---------- 核心优势 ---------- */
.advantage{padding:90px 0;background:var(--gray-50)}
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.adv-card{
  background:var(--white);border-radius:var(--radius-m);
  padding:30px 26px;box-shadow:var(--shadow-s);
  border-top:3px solid var(--blue-300);
  transition:transform var(--trans),box-shadow var(--trans);
}
.adv-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.adv-no{
  font-size:13px;font-weight:800;color:var(--blue-300);
  letter-spacing:2px;
}
.adv-card h3{margin:12px 0 10px;font-size:17px}
.adv-card p{font-size:13.5px;color:var(--gray-600);line-height:1.9}
.adv-grid .adv-card:nth-child(2){transition-delay:.08s}
.adv-grid .adv-card:nth-child(3){transition-delay:.16s}
.adv-grid .adv-card:nth-child(4){transition-delay:.24s}

/* ---------- 快速入口（磁贴） ---------- */
.quick{padding:80px 0;background:var(--white)}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quick-item{
  display:flex;flex-direction:column;gap:6px;
  padding:24px 26px;border-radius:var(--radius-m);
  background:var(--blue-50);border:1px solid var(--blue-100);
  transition:transform var(--trans),box-shadow var(--trans),background var(--trans);
}
.quick-item strong{font-size:17px;color:var(--gray-900)}
.quick-item span{font-size:13px;color:var(--gray-500)}
.quick-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);background:var(--blue-100)}

/* ---------- 服务流程（步骤流） ---------- */
.flow{padding:90px 0;background:var(--gray-50)}
.flow-steps{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;margin-bottom:40px;counter-reset:step;
}
.flow-steps li{
  background:var(--white);border-radius:var(--radius-m);
  padding:24px 22px;box-shadow:var(--shadow-s);position:relative;
}
.flow-steps em{
  font-style:normal;font-weight:800;font-size:13px;color:var(--blue-500);
  background:var(--blue-50);border-radius:999px;padding:3px 12px;
}
.flow-steps h3{font-size:16px;margin:14px 0 8px}
.flow-steps p{font-size:13px;color:var(--gray-500);line-height:1.8}
.flow-steps li:nth-child(2){transition-delay:.06s}
.flow-steps li:nth-child(3){transition-delay:.12s}
.flow-steps li:nth-child(4){transition-delay:.18s}
.flow-steps li:nth-child(5){transition-delay:.24s}
.flow-steps li:nth-child(6){transition-delay:.30s}
.flow-steps li:nth-child(7){transition-delay:.36s}
.flow-steps li:nth-child(8){transition-delay:.42s}

/* ---------- 豫东专题 zigzag ---------- */
.yudong{padding:90px 0;background:var(--white)}
.yudong-row{
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;
}
.yudong-media img{
  border-radius:var(--radius-l);box-shadow:var(--shadow-m);
  width:100%;height:380px;object-fit:cover;
}
.yudong-text h2{margin-bottom:18px}
.yudong-text p{color:var(--gray-600);margin-bottom:14px;font-size:14.5px}
.yudong-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- 八大员岗位 ---------- */
.gangwei{padding:90px 0;background:var(--blue-50)}
.gangwei-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gw-card{
  background:var(--white);border-radius:var(--radius-m);
  padding:22px 20px;box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;gap:8px;
  border-bottom:3px solid transparent;
  transition:transform var(--trans),border-color var(--trans),box-shadow var(--trans);
}
.gw-card strong{font-size:17px;color:var(--gray-900)}
.gw-card span{font-size:12.5px;color:var(--gray-500)}
.gw-card:hover{transform:translateY(-5px);border-bottom-color:var(--blue-400);box-shadow:var(--shadow-m)}
.gangwei-grid .gw-card:nth-child(2n){transition-delay:.05s}
.gangwei-grid .gw-card:nth-child(3n){transition-delay:.1s}

/* ---------- 文章列表区 ---------- */
.newszone{padding:90px 0;background:var(--white)}
.news-loop-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.nl-card{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--gray-100);
  border-radius:var(--radius-m);overflow:hidden;
  transition:transform var(--trans),box-shadow var(--trans);
}
.nl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}.nl-img {display:block;height:auto;aspect-ratio:3/2;overflow:hidden;background:var(--gray-100)}
.nl-img img{width:100%;height:100%;object-fit:cover}
.nl-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.nl-title{font-size:15.5px;font-weight:700;color:var(--gray-900);line-height:1.5}
.nl-card:hover .nl-title{color:var(--blue-700)}
.nl-desc{
  font-size:13px;color:var(--gray-500);line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nl-time{font-size:12px;color:var(--gray-400);margin-top:auto}
.news-more{margin-top:36px}

/* ---------- 客户评价 ---------- */
.reviews{padding:90px 0;background:var(--gray-50)}
.review-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rv-card{
  background:var(--white);border-radius:var(--radius-m);
  padding:28px 26px;box-shadow:var(--shadow-s);
  border-left:4px solid var(--blue-400);
}
.rv-card p{font-size:14px;color:var(--gray-700);line-height:1.9;margin-bottom:16px}
.rv-card footer{font-size:12.5px;color:var(--gray-400)}
.reviews-cta{margin-top:36px}

/* ---------- 政策速读 ---------- */
.policies{padding:0 0 90px;background:var(--white)}
.policy-box{
  background:var(--blue-700);color:#fff;border-radius:var(--radius-l);
  padding:48px 52px;display:grid;grid-template-columns:1fr 1.6fr;gap:40px;
  align-items:start;
}
.policy-head h2{color:#fff;font-size:24px}
.policy-head .sec-kicker{color:var(--blue-200)}
.policy-head .sec-kicker::before{background:var(--blue-300)}
.policy-list{display:flex;flex-direction:column;gap:18px;margin-bottom:8px}
.policy-list li{
  display:grid;grid-template-columns:88px 1fr;gap:14px;
  font-size:13.5px;line-height:1.85;color:rgba(255,255,255,.92);
}
.policy-list strong{color:var(--blue-200);font-size:13.5px}

/* ---------- 底部预约行动带 ---------- */
.cta-band{background:var(--gray-900);padding:60px 0}
.cta-inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:26px;
}
.cta-inner h2{color:#fff;font-size:24px;margin-bottom:8px}
.cta-inner p{color:var(--gray-300);font-size:14px;max-width:560px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.cta-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.cta-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .adv-grid,.flow-steps{grid-template-columns:repeat(2,1fr)}
  .news-loop-list{grid-template-columns:repeat(2,1fr)}
  .gangwei-grid{grid-template-columns:repeat(2,1fr)}
  .review-wall{grid-template-columns:1fr}
  .yudong-row{grid-template-columns:1fr;gap:30px}
  .policy-box{grid-template-columns:1fr;padding:36px}
}
@media (max-width:640px){
  .hero{min-height:auto;padding:calc(var(--header-h) + 30px) 0 56px}
  .ht-2{letter-spacing:6px}
  .hero-stats{gap:10px 22px}
  .hero-stats strong{font-size:26px}
  .adv-grid,.flow-steps,.quick-grid,.news-loop-list,.gangwei-grid{grid-template-columns:1fr}
  .yudong-media img{height:230px}
  .policy-box{padding:28px}
}

/* ---------- 双城服务点对照带 ---------- */
.city-band{padding:60px 0;background:var(--gray-50)}
.city-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.city-card{
  background:var(--white);border-radius:var(--radius-m);
  padding:28px 30px;box-shadow:var(--shadow-s);
  border-top:3px solid var(--blue-400);
}
.city-card h3{font-size:18px;margin-bottom:12px}
.city-card p{font-size:13.5px;color:var(--gray-600);line-height:1.9;margin-bottom:8px}

/* ---------- 证书服务速览三卡 ---------- */
.cert-quick{padding:60px 0;background:var(--white)}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cert-card{
  background:var(--gray-50);border-radius:var(--radius-m);
  padding:26px 24px;display:block;
  transition:transform var(--trans),box-shadow var(--trans);
}
.cert-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.cert-card h3{font-size:16px;color:var(--gray-900);margin-bottom:10px}
.cert-card p{font-size:13px;color:var(--gray-600);line-height:1.9}

@media (max-width:920px){
  .city-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:1fr}
}