/* ==========================================================================
   组件库 - 对角走廊极简风 通用模块
   ========================================================================== */

/* ---------- 网格 ---------- */
.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   首页 Hero（对角斜切全屏）
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--white);
}

/* 左侧文字 / 右侧斜切实景图 */
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 60px;
  width: 100%;
}

.hero-media {
  position: relative;
  height: 78vh;
  min-height: 520px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(12, 12, 14, .15) 0%, transparent 50%, rgba(12, 12, 14, .25) 100%);
}

.hero-media .media-tag {
  position: absolute; left: 22%; bottom: 36px;
  padding: 8px 18px; background: rgba(255, 255, 255, .92);
  border-radius: var(--r-pill); font-size: 12px; color: var(--ink);
  font-weight: 600; letter-spacing: 1px; backdrop-filter: blur(6px);
}

.hero-text { position: relative; z-index: 2; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px; border-radius: var(--r-pill);
  background: var(--mist); border: 1px solid var(--line);
  color: var(--graphite); font-size: 12.5px; letter-spacing: 2px;
  margin-bottom: 28px;
}

.hero-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--black); animation: pulse 2s infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.4); } }

.hero h1 {
  color: var(--ink); font-size: 62px; line-height: 1.1;
  letter-spacing: 2px; margin-bottom: 26px;
}

.hero h1 .skew {
  position: relative; display: inline-block;
}
.hero h1 .skew::after {
  content: ""; position: absolute; left: -4px; bottom: 6px; width: calc(100% + 8px); height: 14px;
  background: var(--fog); z-index: -1; transform: skewX(-14deg);
}

.hero .hero-sub {
  color: var(--slate); font-size: 17px; max-width: 520px;
  margin-bottom: 38px; line-height: 1.85;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-stats {
  display: flex; gap: 48px; margin-top: 64px; padding-top: 32px;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}

.hero-stats .stat strong {
  display: block; font-size: 38px; color: var(--ink);
  font-family: var(--font-en); line-height: 1; font-weight: 700;
}

.hero-stats .stat span { color: var(--ash); font-size: 13px; margin-top: 8px; display: block; }

/* 滚动提示 */
.hero-scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 4; color: var(--ash); font-size: 11px; letter-spacing: 2px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.hero-scroll .mouse {
  width: 22px; height: 36px; border: 1.5px solid var(--steel); border-radius: 12px; position: relative;
}
.hero-scroll .mouse::after {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 7px; background: var(--black); border-radius: 2px; animation: scrollWheel 1.6s infinite;
}
@keyframes scrollWheel { 0% { opacity: 1; top: 7px; } 100% { opacity: 0; top: 18px; } }

/* ==========================================================================
   优势板块（首页 - 走廊路标卡）
   ========================================================================== */
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.adv-card {
  background: var(--white); border-radius: var(--r-md);
  padding: 34px 26px; border: 1px solid var(--line);
  transition: all .4s ease; position: relative; overflow: hidden;
}

.adv-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--black); transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}

.adv-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: transparent; }
.adv-card:hover::before { transform: scaleX(1); }

.adv-card .adv-ico {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  background: var(--mist); display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px; transition: all .4s ease;
}
.adv-card:hover .adv-ico { background: var(--black); }
.adv-card:hover .adv-ico svg { stroke: var(--white); }

.adv-card h3 { font-size: 18px; margin-bottom: 12px; color: var(--ink); }
.adv-card p { font-size: 13.5px; color: var(--ash); line-height: 1.8; }

.adv-card .adv-no {
  position: absolute; right: 22px; top: 18px; font-size: 42px;
  font-family: var(--font-en); color: var(--fog); font-weight: 700; line-height: 1;
}

/* ==========================================================================
   服务模块（首页 - 大图交错，对角切入）
   ========================================================================== */
.svc-list { display: flex; flex-direction: column; gap: 80px; }

.svc-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}

.svc-row.reverse .svc-media { order: 2; }

.svc-media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

.svc-media img { width: 100%; height: 420px; object-fit: cover; transition: transform .6s ease; }
.svc-row:hover .svc-media img { transform: scale(1.05); }

.svc-media .badge-tag {
  position: absolute; top: 22px; left: 22px;
  padding: 6px 16px; background: rgba(255, 255, 255, .92); border-radius: var(--r-pill);
  font-size: 12px; color: var(--ink); font-weight: 600; backdrop-filter: blur(6px); letter-spacing: .5px;
}

.svc-body .step-no { font-size: 13px; color: var(--ash); letter-spacing: 3px; font-family: var(--font-en); margin-bottom: 12px; }
.svc-body h3 { font-size: 28px; margin-bottom: 18px; color: var(--ink); }
.svc-body > p { color: var(--ash); margin-bottom: 24px; font-size: 15px; line-height: 1.9; }

.svc-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.svc-feat li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--slate); }
.svc-feat li svg { flex-shrink: 0; color: var(--ink); }

/* ==========================================================================
   案例展示（首页 - 网格卡片）
   ========================================================================== */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.case-card {
  border-radius: var(--r-md); overflow: hidden; background: var(--white);
  border: 1px solid var(--line); transition: all .4s ease;
}
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.case-card .case-img { position: relative; overflow: hidden; height: 230px; }
.case-card .case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case-card:hover .case-img img { transform: scale(1.08); }

.case-card .case-cat {
  position: absolute; top: 16px; left: 16px;
  padding: 5px 14px; background: rgba(24, 24, 27, .88); color: #fff;
  font-size: 12px; border-radius: var(--r-pill); backdrop-filter: blur(4px);
}

.case-card .case-info { padding: 24px 22px; }
.case-card .case-info h3 { font-size: 18px; margin-bottom: 8px; color: var(--ink); }
.case-card .case-info p { font-size: 13.5px; color: var(--ash); line-height: 1.7; margin-bottom: 14px; }

.case-card .case-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--steel);
}
.case-card .case-meta .more {
  color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; transition: gap .3s ease;
}
.case-card:hover .case-meta .more { gap: 8px; }

/* ==========================================================================
   资讯列表（首页 - 横向卡片流）
   ========================================================================== */
.news-list { display: flex; flex-direction: column; gap: 20px; }

.news-item {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  background: var(--white); border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); transition: all .35s ease;
}
.news-item:hover { box-shadow: var(--shadow-md); transform: translateX(6px); border-color: var(--steel); }

.news-item .n-thumb { position: relative; overflow: hidden; height: 100%; min-height: 150px; }
.news-item .n-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.news-item:hover .n-thumb img { transform: scale(1.06); }

.news-item .n-body { padding: 22px 26px 22px 0; display: flex; flex-direction: column; }
.news-item .n-body h4 { font-size: 17px; color: var(--ink); margin-bottom: 10px; line-height: 1.5; transition: color .3s ease; }
.news-item:hover .n-body h4 { color: var(--black); }

.news-item .n-body .n-excerpt {
  font-size: 13.5px; color: var(--ash); line-height: 1.75; margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.news-item .n-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--steel);
}
.news-item .n-foot .date { display: inline-flex; align-items: center; gap: 6px; }
.news-item .n-foot .read { color: var(--ink); font-weight: 600; }

/* 紧凑文字列表（侧边/相关） */
.news-mini { display: flex; flex-direction: column; gap: 14px; }
.news-mini .mini-item {
  display: flex; gap: 14px; align-items: center; padding: 12px;
  border-radius: var(--r-sm); transition: all .3s ease;
}
.news-mini .mini-item:hover { background: var(--mist); }

.news-mini .mini-item .m-thumb { width: 84px; height: 64px; border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
.news-mini .mini-item .m-thumb img { width: 100%; height: 100%; object-fit: cover; }

.news-mini .mini-item .m-body h5 {
  font-size: 14px; color: var(--ink); line-height: 1.5; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s ease;
}
.news-mini .mini-item:hover .m-body h5 { color: var(--black); }
.news-mini .mini-item .m-body .m-date { font-size: 12px; color: var(--steel); }

/* ==========================================================================
   CTA 行动召唤（对角带）
   ========================================================================== */
.cta-band {
  background: var(--grad-dark); border-radius: var(--r-lg);
  padding: 56px 60px; display: flex; align-items: center; justify-content: space-between;
  gap: 30px; position: relative; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.cta-band::before {
  content: ""; position: absolute; right: -50px; bottom: -50px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .06) 0%, transparent 70%);
}

.cta-band .cta-text h3 { color: #fff; font-size: 28px; margin-bottom: 10px; }
.cta-band .cta-text p { color: rgba(244, 244, 246, .7); font-size: 15px; }
.cta-band .cta-actions { display: flex; gap: 14px; flex-shrink: 0; position: relative; z-index: 2; }

/* ==========================================================================
   通用特性卡
   ========================================================================== */
.feature-card {
  background: var(--white); border-radius: var(--r-md); padding: 36px 30px;
  border: 1px solid var(--line); transition: all .4s ease; height: 100%;
}
.feature-card:hover { box-shadow: var(--shadow-md); border-color: var(--steel); }

.feature-card .f-ico {
  width: 60px; height: 60px; border-radius: var(--r-sm);
  background: var(--mist); display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.feature-card h3 { font-size: 19px; margin-bottom: 12px; }
.feature-card p { color: var(--ash); font-size: 14px; line-height: 1.85; }

/* 数字步骤（走廊路标） */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; }

.step-item { text-align: center; position: relative; }
.step-item .step-circle {
  width: 80px; height: 80px; border-radius: 50%; background: var(--white);
  border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; font-size: 26px; font-family: var(--font-en); font-weight: 700;
  color: var(--ink); position: relative; z-index: 2; transition: all .4s ease;
}
.step-item:hover .step-circle {
  background: var(--black); color: var(--white); border-color: var(--black); transform: scale(1.05);
}
.step-item h4 { font-size: 18px; margin-bottom: 8px; }
.step-item p { font-size: 13.5px; color: var(--ash); padding: 0 10px; }

/* ==========================================================================
   响应式组件
   ========================================================================== */
@media (max-width: 1100px) {
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 46px; }
  .svc-row { grid-template-columns: 1fr; gap: 36px; }
  .svc-row.reverse .svc-media { order: 0; }
  .svc-media img { height: 320px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cta-band { flex-direction: column; text-align: center; padding: 40px 30px; }
}

@media (max-width: 700px) {
  .hero { min-height: auto; padding: 60px 0 50px; }
  .hero-split { grid-template-columns: 1fr; gap: 36px; }
  .hero-media { height: 340px; min-height: 340px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .hero h1 { font-size: 32px; }
  .hero .hero-sub { font-size: 15px; }
  .hero-stats { gap: 26px; }
  .hero-stats .stat strong { font-size: 28px; }
  .adv-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .news-item { grid-template-columns: 1fr; }
  .news-item .n-thumb { min-height: 180px; }
  .news-item .n-body { padding: 18px 20px 22px; }
  .svc-feat { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}