/* ============================================================================
   服务领域总览页（融合页 1059）· 定稿版样式 · 2026-10-08
   ---------------------------------------------------------------------------
   来源：《服务领域总览页demo.html》定稿版（用户确认）：
     · 版心 1600px（与品牌家族页 --w:1600 同规格）
     · Hero：米白底 + Z&R 描边水印 + 红晕 + 大标题 + 右侧红线描述 + 胶囊标签
     · 导览：8 张纯文字简约卡（7 行业 + 1 红色 CTA 卡），无缩略图
     · 7 大领域：图文左右交替（1:1 等宽），16:9 横版大图，图上白色大编号
     · 数据条 4 格 + 浅色 CTA（电话 + 在线询价）
   命名：全部 .fov- 前缀（fields overview），避免与 common/sv/bf 样式冲突。
   ⚠️ 站点坑（同 brand_family.css 的处理，勿删）：
     · common.css 全局 *{font-size:.15rem;line-height:1.05} → .fov-page 中和
     · common.css 全局 a{display:block} → .fov-page a 还原 inline
     · 本页仅在融合页分支输出，子页（1060~1066）不受影响
   改本文件请同步升 services_list.blade.php 里的 ?v= 版本串。
   ========================================================================== */

.fov-page{
  --red:#C81526; --red-dark:#BD1D27; --red-soft:#FBECED;
  --navy-3:#123050;
  --ink:#17233A; --body:#4A5666; --muted:#8A94A3;
  --line:#E6EBF2; --bg:#FFFFFF; --bg-cream:#F6F5F2;
  --shadow:0 18px 50px -22px rgba(10,26,47,.25);
  --shadow-sm:0 8px 24px -14px rgba(10,26,47,.18);
  --radius:16px; --w:1600px;
  --font:'HarmonyOS Sans SC','PingFang SC','Microsoft YaHei','Hiragino Sans GB',sans-serif;
  font-family:var(--font);
  color:var(--body);
  background:var(--bg-cream);
  line-height:1.7;
  font-size:16px;
  overflow-x:hidden;
}
/* —— 中和站点全局样式（common.css 的 * 与 a 规则）—— */
.fov-page *{margin:0;padding:0;box-sizing:border-box;font-size:inherit;line-height:inherit;-webkit-tap-highlight-color:transparent}
.fov-page img{display:block;max-width:100%}
.fov-page a{display:inline;text-decoration:none;color:inherit;background-color:transparent}
.fov-page ul,.fov-page ol{list-style:none}
.fov-wrap{position:relative;z-index:2;width:100%;max-width:var(--w);margin:0 auto;padding:0 28px}

/* ==================== HERO ==================== */
.fov-hero{position:relative;overflow:hidden;background:var(--bg-cream);color:#0E1013;padding:72px 0 8px}
.fov-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px circle at 22% 34%,rgba(200,21,38,.13),transparent 70%)}
.fov-wm{position:absolute;right:-2vw;top:-1vw;z-index:0;pointer-events:none;user-select:none;
  font-size:22vw;font-weight:800;line-height:.76;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.4px #E3E0DA}
.fov-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(420px circle at var(--fov-mx,70%) var(--fov-my,30%),rgba(232,74,90,.18),transparent 70%)}
.fov-hero:hover .fov-glow{opacity:1}
.fov-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:42px}
.fov-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:Arial,sans-serif;
  letter-spacing:.34em;font-size:13px;font-weight:700;color:var(--red);text-transform:uppercase}
.fov-eyebrow::before{content:'';width:40px;height:1px;background:var(--red)}
.fov-hero h1{font-size:clamp(34px,3.6vw,52px);font-weight:800;line-height:1.14;margin:18px 0 10px;letter-spacing:.02em;color:var(--ink)}
.fov-hero h1 em{font-style:normal;color:var(--red)}
.fov-slogan{font-size:15px;color:var(--muted);letter-spacing:.06em}
.fov-head-r{max-width:430px;font-size:14.5px;line-height:1.9;color:var(--body);
  padding-left:18px;border-left:3px solid var(--red);padding-bottom:4px}
.fov-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px}
.fov-tag{display:inline-flex;align-items:center;gap:8px;background:#FFFFFF;border:1px solid #E4E2DC;
  border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#0E1013;transition:.3s}
.fov-tag i{width:7px;height:7px;border-radius:50%;background:var(--red);font-style:normal}
.fov-tag:hover{border-color:rgba(200,21,38,.45);transform:translateY(-2px)}

/* —— 8 卡导览（纯文字简约卡，点击跳锚点） —— */
.fov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:64px}
.fov-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);transition:transform .32s,box-shadow .32s,border-color .32s}
.fov-card::after{content:'';position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;
  background:rgba(200,21,38,.05);transition:.35s;pointer-events:none}
.fov-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(200,21,38,.35)}
.fov-card:hover::after{transform:scale(1.5);background:rgba(200,21,38,.08)}
.fov-card .info{padding:20px 22px;display:flex;flex-direction:column;flex:1}
.fov-no{font-family:Arial,sans-serif;font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.1em;
  display:flex;align-items:center;gap:10px;margin-bottom:10px;transition:color .25s}
.fov-no::after{content:'';flex:1;height:1px;background:var(--line)}
.fov-card:hover .fov-no{color:var(--red)}
.fov-name{font-size:18.5px;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:8px}
.fov-desc{font-size:13px;color:var(--muted);line-height:1.75;flex:1}
.fov-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--navy-3);transition:.25s}
.fov-go svg{width:15px;height:15px}
.fov-card:hover .fov-go{color:var(--red);gap:11px}

/* —— 第 8 格 CTA 卡（红底转化卡） —— */
.fov-ctacard{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:26px 24px;
  border-radius:var(--radius);color:#fff;background:linear-gradient(135deg,var(--red),var(--red-dark));
  box-shadow:0 14px 36px -14px rgba(200,21,38,.45);transition:transform .32s,box-shadow .32s;position:relative;overflow:hidden}
.fov-ctacard::after{content:'';position:absolute;right:-40px;bottom:-40px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.08);transition:.4s}
.fov-ctacard:hover{transform:translateY(-7px);box-shadow:0 20px 46px -14px rgba(200,21,38,.55)}
.fov-ctacard .en{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.3em;color:rgba(255,255,255,.65);text-transform:uppercase;margin-bottom:12px}
.fov-ctacard .tt{font-size:22px;font-weight:800;line-height:1.35;margin-bottom:18px}
.fov-ctacard .btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--red);border-radius:999px;
  padding:9px 22px;font-size:13.5px;font-weight:700;transition:.25s}
.fov-ctacard .btn svg{width:15px;height:15px}
.fov-ctacard .btn:hover{gap:12px;box-shadow:0 8px 20px rgba(0,0,0,.18)}

/* ==================== 领域详解（图文左右交替 · 16:9 大图） ==================== */
.fov-guide{position:relative;padding:88px 0 24px}
.fov-guide-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:64px}
.fov-idx{font-family:Arial,sans-serif;font-size:15px;font-weight:800;color:var(--red);letter-spacing:.1em;
  margin-bottom:14px;display:flex;align-items:center;gap:12px}
.fov-idx::before{content:'';width:34px;height:2px;background:var(--red)}
.fov-sec-title{font-size:clamp(28px,3.2vw,40px);font-weight:800;color:var(--ink);letter-spacing:.03em;line-height:1.15}
.fov-sec-title em{font-style:normal;color:var(--red)}
.fov-sec-sub{margin-top:10px;color:var(--muted);font-size:14px;letter-spacing:.06em}
.fov-guide-head-r{max-width:430px;color:var(--body);font-size:15px;line-height:1.9;padding-bottom:6px;
  border-left:3px solid var(--red);padding-left:18px}

.fov-field{position:relative;max-width:var(--w);margin:0 auto 96px;padding:0 28px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.fov-media{position:relative}
.fov-media::before{content:'';position:absolute;left:-22px;bottom:-22px;width:150px;height:150px;border-radius:50%;
  background:rgba(200,21,38,.07);z-index:0}
.fov-field.rev .fov-media::before{left:auto;right:-22px}
/* ★ 真正实现「左右交替」：DOM 顺序始终是 图 → 文（对 SEO / 读屏友好），
   这里只把网格列视觉翻转 —— .rev 项把图挪到右列、文挪到左列。
   ⚠️ 2026-10-08 修 bug：原来 .rev 只翻转了背景圆点装饰，
      主体网格没动，导致 7 个分节全是左图右文。 */
.fov-field.rev .fov-media{order:2}
.fov-field.rev .fov-txt{order:1}
.fov-pic{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);z-index:1}
.fov-pic img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .6s ease}
.fov-field:hover .fov-pic img{transform:scale(1.04)}
.fov-no-big{position:absolute;right:18px;bottom:10px;z-index:2;font-family:Arial,sans-serif;
  font-size:64px;font-weight:800;line-height:1;color:rgba(255,255,255,.85);
  text-shadow:0 4px 18px rgba(0,0,0,.35);pointer-events:none}
/* 后台完全没配图时的占位块（不出破图） */
.fov-pic-ph{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#EEF0F3,#E3E7ED);border-radius:var(--radius)}
.fov-pic-ph span{font-size:20px;font-weight:800;color:#B9C2CE;letter-spacing:.2em}
.fov-txt .fov-idx{margin-bottom:12px}
.fov-txt h3{font-size:clamp(24px,2.4vw,32px);font-weight:800;color:var(--ink);line-height:1.25;margin-bottom:6px}
.fov-txt h3 em{font-style:normal;color:var(--red)}
.fov-kw{font-size:15px;color:var(--muted);letter-spacing:.1em;margin-bottom:16px}
.fov-intro{font-size:15px;line-height:2;color:var(--body);margin-bottom:22px}
.fov-ftags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.fov-ftags .fov-tag{background:transparent;border-color:#E7E4DE}
.fov-btn{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--red);color:var(--red);
  border-radius:999px;padding:11px 26px;font-size:14px;font-weight:700;transition:.28s}
.fov-btn svg{width:16px;height:16px}
.fov-btn:hover{background:var(--red);color:#fff;gap:13px;box-shadow:0 10px 26px -10px rgba(200,21,38,.5)}

/* ==================== 数据条 ==================== */
.fov-stats{max-width:var(--w);margin:0 auto 96px;border-top:1px solid #E4E2DC;border-bottom:1px solid #E4E2DC;
  background:rgba(255,255,255,.62);backdrop-filter:blur(4px);display:grid;grid-template-columns:repeat(4,1fr)}
.fov-stat{padding:26px 18px 30px;text-align:center;border-right:1px solid #E9E6E0}
.fov-stat:last-child{border-right:0}
.fov-stat .num{font-size:30px;font-weight:800;color:#0E1013;line-height:1;font-family:Arial,'HarmonyOS Sans SC',sans-serif}
.fov-stat .num small{font-size:15px;font-weight:700;margin-left:2px;color:var(--red)}
.fov-stat .lab{margin-top:10px;font-size:13px;color:#8B9099;letter-spacing:.04em}

/* ==================== CTA ==================== */
.fov-cta{position:relative;overflow:hidden;background:var(--bg-cream);padding:84px 0 96px}
.fov-cta::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px circle at 78% 30%,rgba(200,21,38,.12),transparent 70%)}
.fov-cta .wm2{position:absolute;left:-4vw;bottom:-6vw;font-size:20vw;font-weight:800;line-height:.76;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.4px #E3E0DA;pointer-events:none;user-select:none}
.fov-cta-inner{position:relative;z-index:2;max-width:var(--w);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.fov-cta h3{font-size:clamp(26px,2.8vw,36px);font-weight:800;color:var(--ink);margin-bottom:12px}
.fov-cta h3 em{font-style:normal;color:var(--red)}
.fov-cta p{max-width:560px;color:var(--body);font-size:15px;line-height:1.9}
.fov-cta-acts{display:flex;gap:14px;flex-wrap:wrap}
.fov-btn-solid{display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;border-radius:999px;
  padding:13px 30px;font-size:15px;font-weight:700;transition:.28s}
.fov-btn-solid:hover{background:var(--red-dark);box-shadow:0 12px 30px -10px rgba(200,21,38,.55)}
.fov-btn-line{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid #D9D5CE;color:#0E1013;
  border-radius:999px;padding:12px 28px;font-size:15px;font-weight:600;transition:.28s}
.fov-btn-line:hover{border-color:rgba(200,21,38,.45);color:var(--red);transform:translateY(-2px)}

/* ==================== 响应式（站点移动分界 1024px） ==================== */
@media (max-width:1180px){
  .fov-grid{grid-template-columns:repeat(2,1fr)}
  .fov-wm{font-size:34vw}
}
@media (max-width:1024px){
  .fov-field{grid-template-columns:1fr;gap:30px;margin-bottom:72px;padding:0 18px}
  /* 单列下order 没有意义，两列顺序都要归零恢复成「图上文下」 */
  .fov-field.rev .fov-media,
  .fov-field.rev .fov-txt{order:0}
  .fov-pic img{aspect-ratio:16/10}
  .fov-stats{grid-template-columns:repeat(2,1fr)}
  .fov-stat:nth-child(2){border-right:0}
  .fov-stat:nth-child(1),.fov-stat:nth-child(2){border-bottom:1px solid #E9E6E0}
  .fov-guide-head-r{display:none}
  .fov-hero{padding-top:48px}
  .fov-cta-inner,.fov-wrap{padding-left:18px;padding-right:18px}
}
@media (max-width:640px){
  .fov-grid{grid-template-columns:1fr}
  .fov-hero{padding:44px 0 4px}
  .fov-wrap{padding:0 18px}
  .fov-guide{padding-left:0;padding-right:0}
}