/* ============================================================
   home.css · 首页专属布局（对角线渐变 / 文字动画 / 资讯四区块）
   ============================================================ */

/* ---------- 全屏首屏 ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;animation:heroZoom 14s var(--ease) forwards}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(112deg,rgba(10,8,5,.94) 0%,rgba(14,11,7,.78) 34%,rgba(20,15,10,.42) 62%,rgba(110,35,35,.34) 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* 对角线分割：左上暗 → 右下亮铜 */
  background:linear-gradient(135deg,transparent 42%,rgba(176,141,87,.1) 46%,transparent 50%,transparent 68%,rgba(138,47,47,.14) 72%,transparent 76%);
}
.hero-inner{width:min(1180px,92%);margin:0 auto;padding:160px 0 90px;position:relative}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:12px;padding:9px 20px;border-radius:999px;
  background:rgba(176,141,87,.1);border:1px solid var(--line);color:var(--bronze-l);
  font-size:13px;letter-spacing:.3em;margin-bottom:26px;
  animation:floatY 5s ease-in-out infinite;
}
.hero .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--bronze);animation:pulseDot 2s infinite}
.hero h1{font-size:clamp(36px,6vw,68px);letter-spacing:.02em;margin-bottom:22px;max-width:900px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:riseIn 1s var(--ease) forwards}
.hero h1 .line:nth-child(1)>span{animation-delay:.1s}
.hero h1 .line:nth-child(2)>span{animation-delay:.34s}
.hero h1 .accent{background:linear-gradient(120deg,#e3c389,#b08d57 45%,#8a2f2f);-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite;background-size:200% auto}
@keyframes riseIn{to{transform:translateY(0)}}
.hero .lead{max-width:660px;color:var(--paper-2);font-size:17px;margin-bottom:34px;opacity:0;animation:fadeIn 1s var(--ease) .6s forwards}
@keyframes fadeIn{to{opacity:1}}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:fadeIn 1s var(--ease) .8s forwards}
.hero-facts{
  display:flex;gap:0;margin-top:64px;border-top:1px solid var(--line-2);padding-top:26px;
  opacity:0;animation:fadeIn 1s var(--ease) 1s forwards;
}
.hero-facts .hf{flex:1;display:flex;flex-direction:column;gap:4px}
.hero-facts .hf+ .hf{padding-left:30px;border-left:1px solid var(--line-2)}
.hero-facts b{font-family:var(--font-h);font-size:26px;color:var(--bronze-l)}
.hero-facts span{font-size:12.5px;letter-spacing:.22em;color:var(--paper-3)}

/* 首屏滚动提示 */
.hero-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--paper-3);font-size:11px;letter-spacing:.4em;
}
.hero-scroll .line{width:1px;height:44px;background:linear-gradient(180deg,var(--bronze),transparent);overflow:hidden;position:relative}
.hero-scroll .line::after{content:"";position:absolute;left:0;top:-20px;width:1px;height:20px;background:#fff;animation:scrollDown 1.8s infinite}
@keyframes scrollDown{to{top:44px}}

/* ---------- 跑马灯 ---------- */
.ticker{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:#120e0a;overflow:hidden;padding:14px 0}
.ticker-track{display:flex;gap:0;width:max-content;animation:ticker 30s linear infinite}
.ticker-track span{
  display:inline-flex;align-items:center;gap:26px;padding:0 26px;white-space:nowrap;
  font-size:13px;letter-spacing:.22em;color:var(--paper-3);
}
.ticker-track span i{font-style:normal;color:var(--bronze);font-size:9px}

/* ---------- 首页快速入口（对角分块） ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:-70px;position:relative;z-index:5}
.quick-item{
  position:relative;border-radius:16px;padding:30px 24px;overflow:hidden;
  background:linear-gradient(160deg,#241c14,#17120d);
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  transition:.45s var(--ease);
}
.quick-item::after{
  content:"";position:absolute;inset:0;opacity:0;transition:.45s;
  background:linear-gradient(135deg,rgba(176,141,87,.16),rgba(138,47,47,.1));
}
.quick-item:hover{transform:translateY(-8px)}
.quick-item:hover::after{opacity:1}
.quick-item .qi-ico{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-bronze);color:#241b10;margin-bottom:18px;position:relative;z-index:1;
}
.quick-item .qi-ico svg{width:26px;height:26px}
.quick-item h3{font-size:17px;margin-bottom:8px;position:relative;z-index:1}
.quick-item p{font-size:13px;color:var(--paper-2);margin-bottom:14px;position:relative;z-index:1}
.quick-item .go{font-size:12.5px;color:var(--bronze);display:inline-flex;gap:6px;align-items:center;position:relative;z-index:1;font-weight:600}
.quick-item .go svg{width:13px;height:13px;transition:transform .3s}
.quick-item:hover .go svg{transform:translateX(5px)}

/* ---------- 首页行业优势（对角图文） ---------- */
.adv-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.adv-visual{position:relative}
.adv-visual .main-img{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line-2)}
.adv-visual .main-img img{aspect-ratio:16/11;width:100%;object-fit:cover}
.adv-visual .float-card{
  position:absolute;right:-30px;bottom:-26px;width:210px;padding:18px;border-radius:14px;
  background:rgba(24,19,13,.94);border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;gap:12px;align-items:center;
}
.adv-visual .float-card b{display:block;font-family:var(--font-h);font-size:30px;color:var(--bronze-l);line-height:1}
.adv-visual .float-card span{font-size:11.5px;color:var(--paper-2);letter-spacing:.12em}
.adv-list{display:flex;flex-direction:column;gap:20px}
.adv-item{display:flex;gap:18px;align-items:flex-start;padding:20px;border-radius:14px;background:rgba(255,255,255,.022);border:1px solid var(--line-2);transition:.35s}
.adv-item:hover{border-color:var(--bronze);background:rgba(176,141,87,.06);transform:translateX(8px)}
.adv-item .em{width:46px;height:46px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--grad-red);color:#f6e9d8}
.adv-item .em svg{width:22px;height:22px}
.adv-item h4{font-size:16px;margin-bottom:5px}
.adv-item p{font-size:13px;color:var(--paper-2);margin:0}

/* ---------- 首页工种矩阵 ---------- */
.home-trade{padding-top:0}
.trade-panel{
  border-radius:20px;padding:8px;border:1px solid var(--line-2);
  background:linear-gradient(135deg,rgba(176,141,87,.05),rgba(138,47,47,.04));
}
.trade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.trade-cell{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/.82;
}
.trade-cell img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.trade-cell:hover img{transform:scale(1.1)}
.trade-cell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(12,9,6,.92));}
.trade-cell .lab{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.trade-cell .lab b{display:block;font-family:var(--font-h);font-size:17px;color:#f2e8d4;margin-bottom:4px}
.trade-cell .lab span{font-size:11.5px;color:var(--paper-3);letter-spacing:.1em;display:block}
.trade-cell .lab span i{font-style:normal;color:var(--bronze-l)}
.trade-cell:hover .lab b{color:var(--bronze-l)}

/* ---------- 首页专题条（郑州/洛阳报考） ---------- */
.city-strip{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.city-card{
  position:relative;border-radius:18px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;
}
.city-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.city-card:hover img{transform:scale(1.08)}
.city-card::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 30%,rgba(10,8,5,.9));}
.city-card .cc-body{position:relative;z-index:2;padding:30px;width:100%}
.city-card .tagline{font-size:12px;letter-spacing:.34em;color:var(--bronze-l);margin-bottom:10px;display:block}
.city-card h3{font-size:26px;margin-bottom:10px;color:#f6ead5}
.city-card p{font-size:13.5px;color:var(--paper-2);margin-bottom:16px;max-width:420px}
.city-card .go{display:inline-flex;align-items:center;gap:8px;color:var(--bronze-l);font-size:14px;font-weight:600}
.city-card .go svg{width:15px;height:15px;transition:transform .3s}
.city-card:hover .go svg{transform:translateX(6px)}

/* ---------- 首页流程速览（对角分割） ---------- */
.home-flow{
  position:relative;overflow:hidden;
  background:linear-gradient(125deg,#1a140e 0%,#14100c 55%,rgba(110,35,35,.16) 100%);
}
.home-flow .flow-grid{display:grid;grid-template-columns:2fr 1.2fr;gap:50px;align-items:center}

/* ---------- 首页资讯四区块 ---------- */
.home-news .news-head-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;gap:20px;flex-wrap:wrap}
.news-stack{display:grid;grid-template-columns:1.55fr 1fr;gap:22px}
.news-main{display:flex;flex-direction:column;gap:14px}
.news-side{display:flex;flex-direction:column;gap:0}
.news-side .side-block{border-top:1px dashed rgba(176,141,87,.2);padding-top:16px;margin-top:16px}
.news-side .side-block:first-child{border-top:none;padding-top:0;margin-top:0}
.side-block h4{font-size:13px;letter-spacing:.24em;color:var(--bronze);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.side-block h4::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(138,47,47,.18)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .quick-grid{grid-template-columns:repeat(2,1fr);margin-top:-40px}
  .adv-wrap{grid-template-columns:1fr;gap:38px}
  .trade-grid{grid-template-columns:repeat(2,1fr)}
  .city-strip{grid-template-columns:1fr}
  .home-flow .flow-grid{grid-template-columns:1fr;gap:34px}
  .news-stack{grid-template-columns:1fr}
  .hero-facts{flex-wrap:wrap;gap:18px}
  .hero-facts .hf{flex:1 1 40%}
  .hero-facts .hf+.hf{padding-left:0;border-left:none}
}
@media (max-width:640px){
  .quick-grid{grid-template-columns:1fr 1fr;gap:12px}
  .quick-item{padding:20px 16px}
  .trade-grid{grid-template-columns:repeat(2,1fr)}
  .adv-visual .float-card{right:0;bottom:-20px;width:170px}
  .hero-facts b{font-size:20px}
}