/* ==========================================================================
   首页（图片主导版）样式 —— hx- 作用域
   设计原则：
   - 图片是主体，文字退居辅助；减少卡片边框与阴影
   - 不用大面积纯色块与模板渐变；层次靠图片本身与留白节奏
   - 断点：1180 / 900 / 640
   ========================================================================== */

/* ---------- 通用 ---------- */
/* 无障碍跳转链接：默认视觉隐藏，键盘聚焦时显现 */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:#fff;
  padding:12px 22px;font-size:14px;font-weight:700;border-radius:0 0 4px 0}
.skip-link:focus{left:0}
#main:focus{outline:none}
.hx-photo{display:block;width:100%;height:100%;object-fit:cover}
/* 真实截图：完整显示不裁切（比例差异大的数据看板截图用 contain） */
.hx-photo-contain{object-fit:contain;background:#f4f3f1;padding:10px}
.hx-wrap{width:100%}
.hx-h2{font-size:34px;line-height:1.35;font-weight:800;letter-spacing:-.6px;color:var(--ink);margin:0}
.hx-h2-plain{font-size:30px;margin-bottom:6px}
.hx-sec{padding:96px 0}
.hx-sec-head{max-width:720px;margin-bottom:44px}
.hx-sec-lead{margin-top:14px;font-size:16px;line-height:1.85;color:#5c5a58}

/* ---------- 1. Hero ---------- */
/* 首屏：照片底 + 深色渐变遮罩。与纯色导航（更深一档）形成"照片 vs 纯色"的质感差，解决糊成一片 */
.hx-hero{position:relative;padding:52px 0 88px;background:#3a1410;overflow:hidden}
.hx-hero::before{content:'';position:absolute;inset:0;background:url('/images/home/hero-office.jpg') center 42%/cover no-repeat;opacity:.95}
/* 遮罩上重中轻下收：顶部压住导航、中段让建筑轮廓充分透出、底部收深衔接浅色数据带 */
.hx-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,20,16,.93) 0%,rgba(58,20,16,.58) 34%,rgba(58,20,16,.66) 64%,rgba(58,20,16,.93) 100%)}
/* 照片透出后给文字加柔光阴影，保证任何背景下都读得清 */
.hx-hero .hx-h1,.hx-hero .hx-sub,.hx-hero .hx-eyebrow{text-shadow:0 1px 14px rgba(28,10,7,.6)}
.hx-hero .wrap{position:relative;z-index:2}
.hx-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;min-height:560px}
.hx-hero-media{position:relative;margin:0;aspect-ratio:8/5;overflow:hidden;background:#e8e6e3;border-radius:10px}
.hx-hero-media .hx-photo{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.hx-hero-media:hover .hx-photo{transform:scale(1.02)}
.hx-cap{position:absolute;left:0;bottom:0;right:0;padding:34px 22px 14px;font-size:13px;color:#fff;
  background:linear-gradient(to top,rgba(20,16,14,.72),rgba(20,16,14,0))}
.hx-hero-copy{padding-bottom:8px}
.hx-eyebrow{margin:0 0 20px;font-size:13px;font-weight:700;letter-spacing:1.6px;color:#e9c9c4}
.hx-eyebrow::before{content:'';display:inline-block;width:28px;height:2px;background:var(--accent);vertical-align:middle;margin-right:12px}
.hx-h1{font-size:44px;line-height:1.24;font-weight:800;letter-spacing:-1px;color:#fff;margin:0 0 20px}
.hx-sub{font-size:16.5px;line-height:1.9;color:#e7d2cf;margin:0}
.hx-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hx-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 28px;font-size:15px;font-weight:700;border-radius:2px;transition:.22s;border:1px solid transparent}
.hx-btn-solid{background:var(--accent);color:#fff}
.hx-btn-solid:hover{background:#a82620;transform:translateY(-2px)}
.hx-btn-line{border-color:#cfcbc7;color:var(--ink);background:transparent}
.hx-btn-line:hover{border-color:var(--accent);color:var(--accent-d)}
/* Hero 为深色底：按钮反白处理，保证在深底上清晰可读 */
.hx-hero .hx-btn-solid{background:#fff;color:#a82620}
.hx-hero .hx-btn-solid:hover{background:#f3e2df;color:#8f1f1a}
.hx-hero .hx-btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.hx-hero .hx-btn-line:hover{border-color:#fff;color:#fff}
.hx-more-wrap{margin-top:38px}

/* ---------- 2. 数据带 ---------- */
.hx-stats-sec{padding:68px 0;background:#f7f6f4;border-top:1px solid #ebe9e6}
.hx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px}
.hx-stat{padding:8px 26px;border-left:1px solid #e2dfdc}
.hx-stat:first-child{border-left:0;padding-left:0}
.hx-stat-num{font-size:38px;font-weight:800;letter-spacing:-1px;color:var(--ink);line-height:1.1}
.hx-stat-lab{margin-top:8px;font-size:14px;color:#56524f}
.hx-notes{margin-top:30px;padding-top:22px;border-top:1px solid #e6e3e0}
.hx-notes p{margin:0 0 6px;font-size:13.5px;line-height:1.95;color:#56524f}

/* ---------- 3. 服务项目（12 栅格错落网格） ----------
   第 1 张大图占 8 格（宽），第 2 张占 4 格（窄高），
   第 3-5 张各占 4 格 —— 明确的两行排布，不留空格 */
/* ---------- 3. 服务项目（12 栅格 · 通栏特色卡 + 四等分） ----------
   第 1 张（主推 GEO）通栏：左图右文横向版式，视觉重量最大
   第 2-5 张各占 3 格，第二行四等分 —— 无空格、边界清晰 */
.hx-svc-sec{background:#fff}
.hx-svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:26px}
.hx-svc{display:flex;flex-direction:column;background:#fff;grid-column:span 3}
.hx-svc:not(.hx-svc-big){border:1px solid #ece9e6;border-radius:10px;overflow:hidden;transition:box-shadow .25s}
.hx-svc:not(.hx-svc-big):hover{box-shadow:0 14px 34px rgba(30,24,20,.08)}
.hx-svc-big{grid-column:span 12;display:grid;grid-template-columns:1.32fr .68fr;gap:0;
  background:#f7f6f4;align-items:stretch}
.hx-svc-media{position:relative;overflow:hidden;background:#e8e6e3;border-radius:10px}
.hx-svc:not(.hx-svc-big) .hx-svc-media{aspect-ratio:3/4}
.hx-svc-big .hx-svc-media{min-height:330px}
.hx-svc-big .hx-svc-body{padding:40px 40px 36px;display:flex;flex-direction:column;justify-content:center}
.hx-svc-big h3{font-size:30px;letter-spacing:-.6px;margin-bottom:12px}
.hx-svc-big p{font-size:15.5px;line-height:1.9}
.hx-svc-media .hx-photo{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.hx-svc:hover .hx-svc-media .hx-photo{transform:scale(1.045)}
.hx-svc-tag{position:absolute;left:0;top:0;background:rgba(255,255,255,.94);color:var(--accent-d);
  font-size:12px;font-weight:700;padding:6px 13px;letter-spacing:.5px}
.hx-svc:not(.hx-svc-big) .hx-svc-body{padding:18px 18px 22px;display:flex;flex-direction:column;flex:1}
.hx-svc h3{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 9px;letter-spacing:-.3px}
.hx-svc p{margin:0;font-size:14.5px;line-height:1.85;color:#5c5a58}
.hx-svc-more{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--accent-d);
  border-bottom:1px solid currentColor;padding-bottom:2px}
.hx-svc:not(.hx-svc-big) .hx-svc-more{margin-top:auto}
.hx-svc-pts{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid #e3e0dc}
.hx-svc-pts li{position:relative;padding:9px 0 9px 18px;font-size:13.5px;color:#5c5a58;border-bottom:1px solid #e3e0dc}
.hx-svc-pts li::before{content:'';position:absolute;left:0;top:16px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------- 4. 案例（真实截图） ---------- */
.hx-case-sec{background:#f7f6f4;padding:92px 0}
.hx-case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.hx-case{display:block;background:#fff;border:1px solid #ece9e6;border-radius:10px;overflow:hidden;transition:.25s}
.hx-case:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(30,24,20,.10)}
.hx-case-shots{display:grid;grid-template-columns:1fr 1fr;gap:2px;overflow:hidden;background:#fff;align-items:end}
.hx-case-shots .hx-photo{aspect-ratio:4/3}
.hx-case-shots>.hx-photo-contain{aspect-ratio:auto;height:auto;width:100%;background:#fff;padding:0}
.hx-case-shots>*:only-child{grid-column:span 2}
.hx-case-meta{padding:20px 22px 24px}
.hx-case-no{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.hx-case-res{margin:0;font-size:13.5px;line-height:1.8;color:#6d6966}

/* ---------- 5. 行业（横向图文交替） ---------- */
.hx-ind-sec{background:#fff;padding:96px 0}
.hx-ind-list{display:flex;flex-direction:column;gap:0}
.hx-ind{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;padding:30px 0;border-top:1px solid #e9e6e3}
.hx-ind:first-child{border-top:0;padding-top:0}
.hx-ind:nth-child(even){grid-template-columns:.85fr 1.15fr}
.hx-ind:nth-child(even) .hx-ind-media{order:2}
.hx-ind-media{overflow:hidden;aspect-ratio:16/10;background:#e8e6e3;border-radius:10px}
.hx-ind-media .hx-photo{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.hx-ind:hover .hx-ind-media .hx-photo{transform:scale(1.04)}
.hx-ind-copy h3{font-size:22px;font-weight:700;color:var(--ink);margin:0 0 10px;letter-spacing:-.4px;line-height:1.4}
.hx-ind-copy p{margin:0;font-size:14.5px;line-height:1.85;color:#5c5a58}
.hx-ind-more{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--accent-d);
  border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- 6. 痛点 ---------- */
.hx-pain-sec{background:#f7f6f4;padding:92px 0}
.hx-pain-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.hx-pain-copy h2{margin-bottom:26px}
.hx-pain-list{list-style:none;margin:0;padding:0}
.hx-pain-list li{position:relative;padding-left:24px;margin-bottom:14px;font-size:15.5px;line-height:1.85;color:#4d4a48}
.hx-pain-list li::before{content:'';position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hx-claim{margin:24px 0 0;padding-top:20px;border-top:1px solid #e2dfdc;font-size:18px;font-weight:700;color:var(--ink);line-height:1.7}
.hx-pain-media{margin:0;overflow:visible;background:transparent;border-radius:0}
/* 痛点区右侧：多平台 AI 推荐拼贴卡 */
.hx-aic-wrap{display:flex;flex-direction:column;gap:14px}
.hx-aic{background:#fff;border:1px solid #e7e4e0;border-radius:14px;padding:15px 17px;box-shadow:0 10px 26px rgba(42,16,12,.07)}
.hx-aic-h{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.hx-aic-logo{width:22px;height:22px;object-fit:contain;border-radius:5px;background:#f2f0ee;padding:1px}
.hx-aic-p{font-size:14px;font-weight:700;color:#3a3735}
.hx-aic-badge{margin-left:auto;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(135deg,#8a2f22,#b64434);padding:3px 10px;border-radius:999px;letter-spacing:.3px}
.hx-aic-q{font-size:14px;font-weight:600;color:#2c2a28;background:#f6f4f2;border-left:3px solid var(--accent);padding:8px 12px;border-radius:6px;margin-bottom:10px;line-height:1.6}
.hx-aic-a{font-size:13.5px;line-height:1.85;color:#56534f}
.hx-aic-a .hl{color:var(--accent);font-weight:700}
.hx-pain-shots{display:grid;grid-template-columns:1fr 1fr;gap:3px;align-items:end;background:#fff}
.hx-pain-shots.single{grid-template-columns:1fr}
.hx-pain-shots .hx-photo{aspect-ratio:4/3;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.hx-pain-shots .hx-photo-contain{aspect-ratio:auto;height:auto;width:100%;background:#fff;padding:0}
.hx-pain-shots.single .hx-photo{aspect-ratio:3/2}
.hx-pain-media:hover .hx-photo{transform:scale(1.03)}

/* ---------- 6b. 平台矩阵（logo 墙，去卡片化） ---------- */
.hx-px{background:#fff;padding:88px 0}
.hx-px .kick{display:block;color:var(--accent);font-size:12px;letter-spacing:2.6px;font-weight:800;margin-bottom:10px}
.hx-px h2{font-size:30px;letter-spacing:-.6px;font-weight:800;color:var(--ink);margin:0}
.hx-px h2 mark{background:none;color:var(--accent)}
.hx-px .desc{color:#6d6966;font-size:15px;margin:12px 0 30px;max-width:640px;line-height:1.8}
/* 等宽网格：消除孤行、统一节奏；图标放大 + 底托加深，强化"徽章"存在感 */
.hx-px-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:26px;border-top:1px solid #ecebe9}
.hx-px-item{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 10px;min-height:50px;background:#f1efec;border:1px solid #e6e3df;border-radius:10px;transition:.2s}
.hx-px-item:hover{background:#ebe7e4;border-color:#d8d3cd}
.hx-px-item img{height:28px;width:28px;object-fit:contain;flex:0 0 auto;opacity:1;filter:none}
.hx-px-item b{font-size:14px;font-weight:600;color:#4d4a48;white-space:nowrap}
.hx-px-item em{display:none}
.hx-px-sub{margin-top:52px}
.hx-px-sub .kick{color:#a08a86}
.hx-px-sub h2{font-size:25px}
.hx-px-sub .desc{margin-bottom:22px}
.hx-px-sub .hx-px-wall{padding-top:20px}
@media(max-width:900px){
  .hx-px{padding:64px 0}
  .hx-px h2{font-size:25px}
  .hx-px-wall{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .hx-px-wall{grid-template-columns:repeat(2,1fr)}
  .hx-px-item b{font-size:13px}
}

/* ---------- 7. CTA ---------- */
.hx-cta{position:relative;padding:104px 0;overflow:hidden;background:#2b2622}
.hx-cta-media{position:absolute;inset:0;opacity:.42}
.hx-cta-media .hx-photo{object-position:center 42%}
.hx-cta-inner{position:relative;z-index:1;max-width:720px}
.hx-cta .hx-h2{color:#fff}
.hx-cta-lead{margin:20px 0 0;font-size:16px;line-height:1.9;color:rgba(255,255,255,.86)}
.hx-cta-contact{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.72)}
.hx-cta .hx-btn-solid{background:#fff;color:#2b2622;margin-top:30px}
.hx-cta .hx-btn-solid:hover{background:var(--accent);color:#fff}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .hx-hero-grid{gap:38px;min-height:0}
  .hx-h1{font-size:38px}
  .hx-svc-grid{gap:22px}
  .hx-ind{gap:32px}
}
@media (max-width:900px){
  .hx-hero{padding-top:34px}
  .hx-hero-grid{grid-template-columns:1fr;gap:30px}
  .hx-hero-media{order:2;aspect-ratio:3/2}
  .hx-h1{font-size:32px}
  .hx-sec,.hx-svc-sec,.hx-ind-sec,.hx-case-sec,.hx-pain-sec{padding:64px 0}
  .hx-h2{font-size:27px}
  .hx-stats{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .hx-stat:nth-child(3){border-left:0;padding-left:0}
  .hx-svc-grid{grid-template-columns:repeat(2,1fr)}
  .hx-svc{grid-column:span 1}
  .hx-svc-big{grid-column:span 2;grid-template-columns:1fr}
  .hx-svc-big .hx-svc-media{min-height:0;aspect-ratio:16/9}
  .hx-svc-big .hx-svc-body{padding:26px 24px 28px}
  .hx-svc-big h3{font-size:25px}
  .hx-svc:not(.hx-svc-big) .hx-svc-media{aspect-ratio:4/3}
  .hx-case-grid{grid-template-columns:1fr}
  .hx-ind{grid-template-columns:1fr;gap:20px;padding:28px 0}
  /* 关键：单列时必须重置 even 行的两列比例，否则图片被压到窄列 */
  .hx-ind:nth-child(even){grid-template-columns:1fr}
  .hx-ind:nth-child(even) .hx-ind-media{order:0}
  .hx-pain-grid{grid-template-columns:1fr;gap:30px}
  .hx-cta{padding:72px 0}
}
@media (max-width:640px){
  .hx-h1{font-size:26px}
  .hx-h2{font-size:23px}
  .hx-sub{font-size:15px}
  .hx-svc-grid{grid-template-columns:1fr}
  .hx-svc{grid-column:span 1}
  .hx-svc-big{grid-column:span 1}
  .hx-svc-big .hx-svc-media{aspect-ratio:4/3}
  .hx-svc-big .hx-svc-body{padding:22px 20px 24px}
  .hx-svc-big h3{font-size:22px}
  .hx-svc:not(.hx-svc-big) .hx-svc-media{aspect-ratio:4/3}
  .hx-stats{grid-template-columns:1fr 1fr}
  .hx-stat{padding:4px 14px}
  .hx-stat-num{font-size:27px}
  .hx-stat-lab{font-size:12.5px}
  .hx-case-shots{grid-template-columns:1fr}
  .hx-actions .hx-btn{flex:1;min-width:150px}
}

/* ---------- 尊重"减少动效"偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .hx-photo,.hx-svc,.hx-case{transition:none !important}
  .hx-btn:hover{transform:none}
}