/* ============================================================
   index.css —— 首页
   骨架 S10 编辑式居中首屏 + 错落双列入口
   光影 D1 hero 斜光带 · D4 对角分隔条 · D5 旋转角标
   ============================================================ */

/* ---------- 首屏 S10 ---------- */
.home-hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  padding:150px 0 90px;background:linear-gradient(135deg,#F5F5F2 0%,#fff 55%,#EBEBE7 100%);
}
.hero-media{position:absolute;inset:0;opacity:.16;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.home-hero .hero-inner{position:relative;z-index:2;max-width:880px;}
.hero-tag{
  transform:rotate(-3deg);display:inline-block;margin-bottom:26px;
  background:#fff;box-shadow:var(--shadow-s);
}
.hero-title{
  font-size:clamp(38px,6vw,68px);line-height:1.12;letter-spacing:1px;
  margin-bottom:24px;animation:heroUp .9s cubic-bezier(.22,.61,.36,1) both;
}
.hero-sub{font-size:17px;color:var(--text-weak);max-width:640px;margin-bottom:32px;animation:heroUp .9s .12s cubic-bezier(.22,.61,.36,1) both;}
.hero-sub strong{color:var(--brown-400);font-weight:800;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px;animation:heroUp .9s .24s cubic-bezier(.22,.61,.36,1) both;}
@keyframes heroUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.hero-stats{display:flex;gap:40px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px;animation:heroUp .9s .36s cubic-bezier(.22,.61,.36,1) both;}
.hero-stats li{display:flex;flex-direction:column;}
.hero-stats span{font-size:34px;font-weight:800;color:var(--brown-400);line-height:1.1;}
.hero-stats small{font-size:12.5px;color:var(--text-weak);letter-spacing:1px;}

/* ---------- D4 对角分隔条 ---------- */
.diag-divider{
  height:26px;
  background:linear-gradient(135deg,var(--brown-100) 0%,var(--brown-200) 42%,var(--gray-50) 42%,var(--gray-50) 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 60px) 100%,0 100%);
}

/* ---------- 分区标题 ---------- */
.sec-head{max-width:640px;margin-bottom:48px;}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);margin:16px 0 14px;line-height:1.25;}
.sec-head h2 b{color:var(--brown-400);font-weight:800;}
.sec-head p{color:var(--text-weak);font-size:15px;}

/* ---------- 核心优势 ---------- */
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.adv-card{
  background:#fff;border:1px solid var(--line);padding:30px 26px;
  box-shadow:var(--shadow-s);transition:transform .3s ease,box-shadow .3s ease;
  position:relative;overflow:hidden;
}
.adv-card::after{
  content:"";position:absolute;top:0;right:0;width:70px;height:70px;
  background:linear-gradient(135deg,transparent 50%,rgba(199,180,154,.28) 50%);
}
.adv-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-b);}
.adv-card svg{width:34px;height:34px;color:var(--brown-300);margin-bottom:16px;}
.adv-card h3{font-size:17px;margin-bottom:10px;}
.adv-card p{font-size:14px;color:var(--text-weak);margin:0;line-height:1.8;}

/* ---------- 工种错落双列 ---------- */
.trade-masonry{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.trade-card{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s);}
.trade-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.trade-card:hover img{transform:scale(1.05);}
.t-big{grid-row:span 2;}
.t-wide{grid-column:span 2;}
.tc-mask{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px;background:linear-gradient(135deg,rgba(51,51,47,0) 30%,rgba(51,51,47,.62) 100%);
  color:#fff;
}
.tc-mask strong{font-size:19px;letter-spacing:1px;}
.tc-mask small{font-size:13px;opacity:.85;}
.trade-more{
  background:linear-gradient(135deg,var(--brown-100),var(--brown-300));
  color:#fff;padding:34px;display:flex;flex-direction:column;gap:10px;justify-content:center;
  box-shadow:var(--shadow-s);
}
.trade-more strong{font-size:20px;}
.trade-more small{font-size:13.5px;opacity:.9;line-height:1.7;}
.trade-more .btn{align-self:flex-start;margin-top:8px;}

/* ---------- 双城 ---------- */
.city-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.city-card{
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s);overflow:hidden;
}
.city-card img{width:100%;height:260px;object-fit:cover;}
.city-body{padding:28px 26px 30px;}
.city-body h3{font-size:22px;margin-bottom:12px;color:var(--brown-400);}
.city-body p{font-size:14.5px;color:var(--text-weak);margin-bottom:18px;line-height:1.85;}

/* ---------- 服务流程 ---------- */
.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:fs;}
.flow-steps li{
  background:#fff;border:1px solid var(--line);padding:26px 20px 24px;box-shadow:var(--shadow-s);
  position:relative;
}
.flow-steps li::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;
  background:linear-gradient(135deg,var(--brown-100),var(--brown-300));
}
.fs-no{
  font-size:30px;font-weight:800;color:rgba(148,121,90,.28);line-height:1;display:block;margin-bottom:12px;
}
.flow-steps h3{font-size:16px;margin-bottom:8px;}
.flow-steps p{font-size:13px;color:var(--text-weak);margin:0;line-height:1.75;}

/* ---------- 企业团报色带 ---------- */
.qiye-band{
  background:linear-gradient(135deg,var(--brown-300),var(--brown-400));
  color:#fff;padding:70px 0;position:relative;overflow:hidden;
}
.qiye-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;}
.qiye-band h2{color:#fff;font-size:clamp(26px,3.4vw,38px);margin:16px 0 14px;line-height:1.3;}
.qiye-band p{color:rgba(255,255,255,.86);font-size:15px;margin-bottom:24px;}
.tag-light{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff;}
.qiye-band img{border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.22);}

/* ---------- 资讯列表 ---------- */
.home-news-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.news-item{
  display:flex;gap:16px;background:#fff;border:1px solid var(--line);padding:14px;
  box-shadow:var(--shadow-s);transition:transform .25s ease,box-shadow .25s ease;
}
.news-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-b);}
.ni-thumb{flex-shrink:0;width:240px;height:160px;overflow:hidden;background:var(--gray-100);}
.ni-thumb img{width:100%;height:100%;object-fit:cover;}
.ni-body{display:flex;flex-direction:column;min-width:0;}
.ni-title{font-weight:700;font-size:15px;color:var(--text);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-item:hover .ni-title{color:var(--brown-400);}
.ni-desc{font-size:13px;color:var(--text-weak);margin-top:6px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ni-time{margin-top:auto;font-size:12px;color:var(--text-weak);}
.more-news{margin-top:30px;text-align:center;}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;}
.faq-list details{
  background:#fff;border:1px solid var(--line);margin-bottom:12px;box-shadow:var(--shadow-s);
}
.faq-list summary{
  cursor:pointer;padding:18px 22px;font-weight:700;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";font-size:22px;color:var(--brown-300);transition:transform .25s ease;}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list details p{padding:0 22px 20px;color:var(--text-weak);font-size:14px;margin:0;line-height:1.9;}

/* ---------- 底部 CTA ---------- */
.bottom-cta{padding:80px 0;text-align:center;background:linear-gradient(135deg,var(--gray-50),#fff);}
.cta-inner h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px;}
.cta-inner p{color:var(--text-weak);margin-bottom:28px;}
.cta-inner .hero-cta{justify-content:center;margin-bottom:0;}

/* ---------- 响应式 ---------- */
@media (max-width:920px){
  .adv-grid,.flow-steps{grid-template-columns:1fr 1fr;}
  .trade-masonry,.home-news-list,.city-grid,.qiye-inner{grid-template-columns:1fr;}
  .t-big{grid-row:auto;}
  .qiye-band img{height:220px;}
}
@media (max-width:600px){
  .adv-grid,.flow-steps{grid-template-columns:1fr;}
  .ni-thumb{width:120px;height:80px;}
  .home-hero{min-height:auto;padding:130px 0 60px;}
  .hero-stats{gap:22px;}
}