/* ============================================================
   xxmr.cn · home.css —— 首页专属样式
   全屏 Banner · 文字动画 · 对角分割 · 快速入口
   ============================================================ */

/* ---------- 首页 Hero：全屏对角分割 + 文字动画 ---------- */
.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--coffee-950);
  overflow: hidden;
}
.home-hero .hh-left {
  position: absolute;
  inset: 0 42% 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 7vw;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(200, 155, 94, .16), transparent 50%),
    linear-gradient(115deg, var(--coffee-950) 12%, var(--coffee-900) 55%, rgba(43, 29, 22, .96) 100%);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
.home-hero .hh-right {
  position: absolute;
  inset: 0 0 0 44%;
  z-index: 1;
}
.home-hero .hh-right img { width: 100%; height: 100%; object-fit: cover; }
.home-hero .hh-right::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(33, 22, 16, .85) 0%, rgba(33, 22, 16, .2) 30%, rgba(33, 22, 16, .55) 100%);
}
.home-hero .hh-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(200, 155, 94, .5);
  color: var(--gold-soft);
  font-size: 13px;
  letter-spacing: 1.5px;
  background: rgba(200, 155, 94, .08);
  backdrop-filter: blur(4px);
  width: max-content;
}
.home-hero .hh-flag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulseDot 1.6s infinite; }
.home-hero h1 {
  color: var(--cream-50);
  font-size: clamp(34px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 2px;
  margin: 24px 0 20px;
}
.home-hero h1 .line { display: block; overflow: hidden; }
.home-hero h1 .line span {
  display: inline-block;
  transform: translateY(110%);
  animation: riseIn .9s var(--ease) forwards;
}
.home-hero h1 .line:nth-child(2) span { animation-delay: .18s; }
.home-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--gold) 10%, var(--latte-soft) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 6px;
}
@keyframes riseIn {
  to { transform: translateY(0); }
}
.home-hero .hh-lead {
  color: rgba(251, 247, 240, .76);
  font-size: 16.5px;
  max-width: 540px;
  animation: fadeUp 1s var(--ease) .4s both;
}
.home-hero .hh-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; animation: fadeUp 1s var(--ease) .55s both; }
.home-hero .hh-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cream-50);
  margin-top: 26px;
  font-size: 14px;
  animation: fadeUp 1s var(--ease) .7s both;
}
.home-hero .hh-phone svg { width: 20px; height: 20px; color: var(--gold); }
.home-hero .hh-phone b { font-size: 21px; letter-spacing: 1px; color: var(--gold); }
.home-hero .hh-corner {
  position: absolute;
  right: 26px; bottom: 26px;
  z-index: 3;
  color: rgba(251, 247, 240, .85);
  font-size: 12px;
  letter-spacing: 3px;
  writing-mode: vertical-rl;
  opacity: .7;
}
.home-hero .hh-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  width: 26px; height: 42px;
  border: 2px solid rgba(251, 247, 240, .5);
  border-radius: 14px;
}
.home-hero .hh-scroll::after {
  content: "";
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--gold);
  animation: scrollDot 1.8s infinite;
}
@keyframes scrollDot {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(0); }
}

/* ---------- 跑马灯工种类 ---------- */
.marquee-band {
  background: var(--coffee-900);
  border-block: 1px solid rgba(200, 155, 94, .3);
  overflow: hidden;
  padding: 16px 0;
  position: relative;
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 32s linear infinite;
}
.marquee-band:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  color: rgba(251, 247, 240, .8);
  font-size: 14.5px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.marquee-track span i { font-style: normal; color: var(--gold); }

/* ---------- 快速入口 ---------- */
.quick-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.quick-item {
  position: relative;
  background: #FFFDF9;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 28px 24px;
  overflow: hidden;
  transition: transform .32s var(--ease), box-shadow .32s;
}
.quick-item::after {
  content: "";
  position: absolute;
  right: -36px; bottom: -36px;
  width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(200, 155, 94, .18), transparent 70%);
  transition: transform .4s var(--ease);
}
.quick-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.quick-item:hover::after { transform: scale(1.5); }
.quick-item .qi-icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--coffee-800), var(--coffee-500));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
}
.quick-item .qi-icon svg { width: 25px; height: 25px; color: var(--cream-50); }
.quick-item h3 { font-size: 16.5px; margin-bottom: 6px; position: relative; z-index: 1; }
.quick-item p { font-size: 13px; color: var(--gray-500); position: relative; z-index: 1; }
.quick-item .qi-go {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-deep);
  position: relative;
  z-index: 1;
}
.quick-item .qi-go svg { width: 14px; height: 14px; transition: transform .25s; }
.quick-item:hover .qi-go svg { transform: translateX(4px); }

/* ---------- 双城专题 ---------- */
.city-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.city-panel {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.city-panel:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.city-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.city-panel:hover img { transform: scale(1.06); }
.city-panel .cp-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 22, 16, .05) 30%, rgba(33, 22, 16, .92) 100%);
}
.city-panel .cp-body { position: relative; z-index: 2; padding: 36px 34px; color: var(--cream-50); width: 100%; }
.city-panel .cp-body .cp-tag { display: inline-block; font-size: 12px; letter-spacing: 2px; color: var(--gold); border: 1px solid rgba(200, 155, 94, .6); padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.city-panel .cp-body h3 { color: var(--cream-50); font-size: 26px; letter-spacing: 1px; margin-bottom: 8px; }
.city-panel .cp-body p { font-size: 13.5px; color: rgba(251, 247, 240, .75); margin-bottom: 18px; }

/* ---------- 首页热工种 ---------- */
.hot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hot-card {
  position: relative;
  height: 210px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .32s var(--ease), box-shadow .32s;
}
.hot-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.hot-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.hot-card:hover img { transform: scale(1.09); }
.hot-card .hc-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(33, 22, 16, .9) 100%);
}
.hot-card .hc-body { position: absolute; inset: auto 0 0 0; padding: 20px; color: var(--cream-50); }
.hot-card .hc-body b { display: block; font-size: 17px; margin-bottom: 4px; }
.hot-card .hc-body span { font-size: 12px; color: rgba(251, 247, 240, .7); }

/* ---------- 首页流程 ---------- */
.home-flow { position: relative; background: var(--coffee-950); overflow: hidden; }
.home-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg, transparent 0 46px, rgba(251, 247, 240, .028) 46px 48px);
}
.home-flow .hf-inner { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.home-flow .hf-copy h2 { color: var(--cream-50); font-size: clamp(26px, 3.2vw, 38px); margin: 14px 0; }
.home-flow .hf-copy p { color: rgba(251, 247, 240, .66); font-size: 15px; }
.home-flow .hf-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-flow .hf-step {
  background: rgba(251, 247, 240, .05);
  border: 1px solid rgba(251, 247, 240, .12);
  border-radius: 16px;
  padding: 22px;
  transition: background .3s, transform .3s var(--ease), border-color .3s;
}
.home-flow .hf-step:hover { background: rgba(251, 247, 240, .09); border-color: rgba(200, 155, 94, .5); transform: translateY(-4px); }
.home-flow .hf-step .hs-num { font-size: 13px; font-weight: 800; color: var(--gold); letter-spacing: 1px; }
.home-flow .hf-step h3 { color: var(--cream-50); font-size: 16px; margin: 8px 0 6px; }
.home-flow .hf-step p { color: rgba(251, 247, 240, .6); font-size: 12.8px; }

/* ---------- 首页证书核验提示 ---------- */
.verify-strip {
  background: var(--cream-100);
  border: 1px solid var(--sand);
  border-radius: var(--radius-l);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.verify-strip::before {
  content: "";
  position: absolute;
  left: -50px; top: -50px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 155, 94, .18), transparent 70%);
}
.verify-strip h3 { font-size: 21px; margin-bottom: 8px; }
.verify-strip p { font-size: 14px; color: var(--ink-soft); max-width: 640px; }
.verify-strip ol { display: flex; gap: 30px; margin-top: 14px; flex-wrap: wrap; }
.verify-strip ol li { font-size: 13.5px; color: var(--gray-500); display: flex; align-items: center; gap: 8px; }
.verify-strip ol li b { color: var(--gold-deep); font-size: 16px; }

/* ---------- 首页资讯 ---------- */
.home-news .hn-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.home-news .hn-item {
  background: #FFFDF9;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.home-news .hn-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.home-news .hn-item .hn-img { height: 168px; overflow: hidden; }
.home-news .hn-item .hn-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.home-news .hn-item:hover .hn-img img { transform: scale(1.06); }
.home-news .hn-item .hn-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.home-news .hn-item .hn-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--gray-500); }
.home-news .hn-item .hn-meta .hm-cat { color: var(--gold-deep); font-weight: 700; }
.home-news .hn-item h3 { font-size: 15.5px; line-height: 1.55; }
.home-news .hn-item h3 a:hover { color: var(--gold-deep); }
.home-news .hn-item p { font-size: 13px; color: var(--gray-500); }
.home-news .hn-more { margin-top: 30px; text-align: center; }

/* ---------- 首页资讯行（CMS 标签循环输出） ---------- */
.home-news-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  background: #FFFDF9;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.home-news-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.home-news-row .hnr-img { display: block; min-height: 160px; overflow: hidden; }
.home-news-row .hnr-img img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; transition: transform .6s var(--ease); }
.home-news-row:hover .hnr-img img { transform: scale(1.06); }
.home-news-row .hnr-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.home-news-row .hnr-main h3 { font-size: 16px; line-height: 1.55; }
.home-news-row .hnr-main h3 a:hover { color: var(--gold-deep); }
.home-news-row .hnr-main p { font-size: 13px; color: var(--gray-500); }
.home-news-row .hnr-time { font-size: 12px; color: var(--gray-400); margin-top: auto; }
@media (max-width: 640px) {
  .home-news-row { grid-template-columns: 1fr; }
  .home-news-row .hnr-img { min-height: 170px; }
  .home-news-row .hnr-img img { min-height: 170px; }
}

/* ---------- 首页响应式 ---------- */
@media (max-width: 1080px) {
  .home-hero .hh-left { inset: 0 30% 0 0; clip-path: none; padding-left: 6vw; }
  .home-hero .hh-right { inset: 0 0 0 55%; }
  .quick-inner { grid-template-columns: repeat(2, 1fr); }
  .hot-grid { grid-template-columns: repeat(2, 1fr); }
  .home-flow .hf-inner { grid-template-columns: 1fr; }
  .home-news .hn-wrap { grid-template-columns: 1fr; }
  .city-duo { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .home-hero .hh-left { inset: 0; background: linear-gradient(180deg, rgba(33, 22, 16, .72), rgba(33, 22, 16, .88)); justify-content: flex-end; padding-bottom: 80px; }
  .home-hero .hh-right { inset: 0; }
  .home-hero h1 { font-size: clamp(30px, 9vw, 44px); }
  .home-hero .hh-corner { display: none; }
  .quick-inner { grid-template-columns: 1fr 1fr; gap: 12px; }
  .quick-item { padding: 20px 16px; }
  .hot-grid { grid-template-columns: 1fr 1fr; }
  .hot-card { height: 150px; }
  .home-flow .hf-steps { grid-template-columns: 1fr; }
  .verify-strip { padding: 30px 24px; }
  .city-panel { min-height: 300px; }
}
@media (max-width: 480px) {
  .quick-inner { grid-template-columns: 1fr; }
  .hot-grid { grid-template-columns: 1fr; }
}