/* ============================================================================
   服务领域页面（/services/list_1059_1.html 等 8 页）· 2026-10-08 改版
   目的：把原来「大图 banner + 轮播 + 纯文字」的老版式，
         统一成「品牌家族页（/pages/49.html）」的视觉体系。
   设计基准：直接复刻 brand_family.css 的 token（奶油底 #F6F5F2 + Z&R 描边水印
             + 红色点缀 #C81526 + 章节编号 + 胶囊锚点导航），只把 bf- 前缀换成 sv-。
   ⚠️ 改本文件请同步升 services_list.blade.php 里 sv.css 的 ?v= 版本串，否则浏览器吃旧缓存。
   ⚠️ 类名一律 sv- 前缀，且全部挂在 .sv-page 作用域下，避免与 common.css / serve.css 打架。
   ⚠️ .sv-page 上不要加 transform / filter / will-change —— 会让里面 fixed 的胶囊定位失效。
   ========================================================================== */

/* ============================ 01 设计 token ============================ */
.sv-page{
  --red:#C81526; --red-dark:#BD1D27; --red-soft:#FBECED;
  --navy:#0A1A2F; --navy-2:#0E2239; --navy-3:#123050;
  --ink:#17233A; --body:#4A5666; --muted:#8A94A3;
  --line:#E6EBF2; --bg:#FFFFFF; --bg-soft:#F4F7FB;
  --cream:#F6F5F2; --cream-line:#E4E2DC;
  --shadow:0 18px 50px -22px rgba(10,26,47,.25);
  --shadow-sm:0 8px 24px -14px rgba(10,26,47,.18);
  --radius:18px; --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);
  line-height:1.7;
  font-size:16px;
}
/* 中和站点全局样式（common.css 的 `*{font-size:.15rem;line-height:1.05}` 与 `a{display:block}`） */
.sv-page *{margin:0;padding:0;box-sizing:border-box;font-size:inherit;line-height:inherit;-webkit-tap-highlight-color:transparent;}
.sv-page img{display:block;max-width:100%;height:auto;}
.sv-page a{display:inline;text-decoration:none;color:inherit;background-color:transparent;}
.sv-page ul,.sv-page ol{list-style:none;}

/* 外层 .wrap（services_list.blade.php 输出的）不做宽/内边距约束 —— 本页要通栏。
   :has() 不支持时整条失效，无副作用。 */
.wrap:has(> .sv-page){width:100%;max-width:none;padding:0;margin:0;overflow:visible;}
.sv-page .sv-wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 28px;}

/* ============================ 01.5 子页「已并入总览」引导条 ==================
   只在 7 个子页（1060~1066）出现，1059 融合页不渲染。
   作用有两条，都不破坏原有 SEO：
     1) 告诉读者"这页的内容总览页也有，而且更全"，给一条回总览的入口；
     2) 配合模板里的 <link rel="canonical" 指向 1059>，把权重集中到融合页，
        同时因为子页本身仍可访问、canonical 不是 noindex，所以不会像 301
        那样把已被 sitemap / 外链收录的 URL 判成死链。
   刻意做成「非吸顶、静态」：它是提示不是导航，吸顶会跟 .sv-tabs 抢位置。

   ⚠️ padding-top:.18rem 是「补头高差」用的：站点 body 的 padding-top 是 1.75rem，
      但 PC 端固定头部实测 1.90rem，差 0.15rem。subbar 是本页唯一贴在 body 最顶部的
      元素，不补这 13~15px，它的文字（正好在垂直居中位置）会被固定头部盖住一半。
      实测修前：subbar 顶 175px、文字 y=203，而头部底 158.3px + sticky 条从 190px 起，
      文字落在被遮区里 → 手机端整条看不见、桌面端上半截被切。 */
.sv-page .sv-subbar{background:var(--red-soft);border-bottom:1px solid rgba(200,21,38,.16);
  padding-top:.18rem;}
.sv-page .sv-subbar .sv-wrap{display:flex;align-items:center;justify-content:center;padding-top:13px;padding-bottom:13px;}
.sv-page .sv-subbar-tx{font-size:14.5px;line-height:1.7;color:var(--navy-2);text-align:center;}
.sv-page .sv-subbar-tx a{display:inline;font-weight:800;color:var(--red-dark);
  border-bottom:1px solid rgba(200,21,38,.4);padding-bottom:1px;transition:.22s;}
.sv-page .sv-subbar-tx a:hover{color:var(--red);border-bottom-color:var(--red);}

/* ============================ 02 顶部行业切换条 ============================
   原来的 .common-nav-wrap / .common-nav 是一排灰底小按钮，与新风格不搭。
   这里改成品牌家族「胶囊」观感：白底圆角、红色下划线指示当前行业。

   ⚠️ sticky 的 top 必须严格等于「固定头部实测高度」——
      无头 Chrome 量线上真实值：PC 1600 视口下 .header-wrap 高 158.3px，
      根字号 83.33px → 158.3 / 83.33 = 1.90rem；移动 390 下 .header-mobile
      高 46.8px，根字号 52px → 46.8 / 52 = 0.90rem。所以 1.9rem / .9rem 是准的。

   ⚠️ 但站点的 body padding-top 只有 1.75rem（PC），比实际头高 1.90rem 少 0.15rem
      （1600 视口下差 12.5px）—— 这是 common.css 自身的口径不一致，不是本页引入的。
      本页任何「贴在 body 最顶部」的元素（比如 .sv-subbar）都会被压掉顶部一条，
      所以下面 .sv-subbar 专门加了 .18rem 的顶部安全垫来补这个差。 */
.sv-page .sv-tabs{position:sticky;top:1.9rem;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line);
  /* 吸顶时给一点投影，让它读起来是"浮在内容之上"而不是"贴在内容里"。
     参考品牌家族页 .bf-navpill 的 box-shadow 层次感。 */
  box-shadow:0 6px 18px -12px rgba(8,21,39,.28);
  transition:box-shadow .3s ease;}
.sv-page .sv-tabs.is-stuck{box-shadow:0 10px 26px -12px rgba(8,21,39,.42);}
.sv-page .sv-tabs-inner{display:flex;align-items:center;justify-content:center;gap:4px;
  overflow-x:auto;padding:12px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.sv-page .sv-tabs-inner::-webkit-scrollbar{display:none;}
.sv-page .sv-tab{position:relative;display:flex;align-items:center;height:44px;padding:0 26px;
  border-radius:999px;font-size:15px;font-weight:500;color:var(--body);white-space:nowrap;
  transition:.26s;flex-shrink:0;}
.sv-page .sv-tab:hover{color:var(--red);}
.sv-page .sv-tab.active{color:var(--red-dark);font-weight:700;background:var(--red-soft);}
.sv-page .sv-tab.active::after{content:'';position:absolute;left:50%;bottom:5px;width:22px;height:2px;
  border-radius:2px;background:var(--red);transform:translateX(-50%);}

/* ============================ 03 HERO（奶油底编辑式首屏）============================
   与品牌家族 hero 同款：米白底 + 左中静态红晕 + 右上超大 Z&R 描边水印。

   ⚠️ margin-top:-1.75rem 是用来顶掉 body 给固定头部预留的 padding-top，让 hero
      背景能贴到屏幕最顶端（品牌家族页就靠这个满幅效果）。但它必须**只对
      「页面第一个元素是 hero」的情况生效**：
      子页(1060~1066)上 .sv-subbar 排在 hero 前面，如果 hero 照样负 margin，
      就会整体上移 175px，把 subbar 整条压在下面 —— 实测 subbar 的粉色带
      完全看不见（DOM 里它在 175~244px，hero 奶油色盖掉了同一片区域）。
      所以下面用 :not(:first-child) 把这种情况排除掉。 */
.sv-page .sv-hero{position:relative;min-height:auto;display:flex;align-items:flex-start;overflow:hidden;
  background:var(--cream);color:#0E1013;}
.sv-page .sv-hero:first-child{margin-top:-1.75rem;}
.sv-page .sv-hero:not(:first-child){margin-top:0;}
.sv-page .sv-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px circle at 26% 44%,rgba(200,21,38,.14),transparent 70%);}
.sv-page .sv-wm{position:absolute;right:-3vw;top:calc(1.75rem + 6vh);z-index:0;
  font-family:'HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:27vw;font-weight:800;line-height:.76;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.4px #E3E0DA;pointer-events:none;user-select:none;}
/* 子页 hero 无负 margin，水印不用再往下让头部 */
.sv-page .sv-hero:not(:first-child) .sv-wm{top:6vh;}
/* 鼠标跟随红晕（JS 写 --sv-mx / --sv-my），与品牌家族 bf-glow 同款 */
.sv-page .sv-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(420px circle at var(--sv-mx,70%) var(--sv-my,30%),rgba(232,74,90,.20),transparent 70%);}
.sv-page .sv-hero:hover .sv-glow{opacity:1}
.sv-page .sv-hero-inner{position:relative;z-index:2;width:100%;max-width:var(--w);margin:0 auto;
  /* 2026-10-09：删掉子页首屏导语后不再垂直居中。本块 margin-top:-1.75rem 把首屏顶到视口 0 处，
     二级导航展开实测到 306px，故上留白取 1.9rem+118px=308px，首行落在 316px 附近。 */
  padding:calc(1.9rem + 126px) 28px 110px;}
.sv-page .sv-hero .sv-hero-eyebrow{display:flex;}
/* 子页 hero 没有负 margin（前面有 .sv-subbar 占位），顶部不必再让一次固定头部，
   否则会多出一段空白。只保留 64px 的常规呼吸留白。 */
.sv-page .sv-hero:not(:first-child) .sv-hero-inner{padding-top:64px;}
.sv-page .sv-hero-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;}
.sv-page .sv-hero-eyebrow::before{content:'';width:40px;height:1px;background:var(--red);}
/* ⚠️ h1 就是原页面的 <h1 class="serve-text">，SEO 主标题，文字完全沿用后台数据 */
.sv-page .sv-hero h1{font-size:clamp(38px,5.2vw,86px);font-weight:800;line-height:1.14;margin:26px 0 18px;
  letter-spacing:.01em;color:#0E1013;}
.sv-page .sv-hero-lead{max-width:760px;font-size:16.5px;line-height:2;color:#8B9099;}
/* 首屏标签：与品牌家族页 bf-hero-tags 同款，填充首屏下半留白 */
.sv-page .sv-hero-tags{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap;}
.sv-page .sv-hero-tag{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--cream-line);border-radius:999px;padding:9px 18px;font-size:14px;
  font-weight:500;color:#0E1013;transition:.3s;}
.sv-page .sv-hero-tag i{width:7px;height:7px;border-radius:50%;background:var(--red);font-style:normal;}
.sv-page .sv-hero-tag:hover{border-color:rgba(200,21,38,.45);transform:translateY(-2px);}
.sv-page .sv-scroll-hint{position:absolute;right:34px;bottom:40px;z-index:3;writing-mode:vertical-rl;
  font-size:12px;letter-spacing:.3em;color:rgba(14,16,19,.45);display:flex;align-items:center;gap:12px;}
.sv-page .sv-scroll-hint::after{content:'';width:1px;height:52px;
  background:linear-gradient(var(--red),transparent);animation:sv-scrolldown 1.8s infinite;}
@keyframes sv-scrolldown{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}
  56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================ 04 通用章节头 ============================ */
.sv-page .sv-sec{padding:92px 0;position:relative;scroll-margin-top:calc(1.9rem + 76px);}
.sv-page .sv-sec-head{margin-bottom:48px;display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;flex-wrap:wrap;}
.sv-page .sv-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;}
.sv-page .sv-idx::before{content:'';width:34px;height:2px;background:var(--red);}
.sv-page .sv-sec-title{font-size:clamp(28px,3.2vw,40px);font-weight:800;color:var(--ink);
  letter-spacing:.03em;line-height:1.15;}
.sv-page .sv-sec-title em{font-style:normal;color:var(--red);}
.sv-page .sv-sec-sub{margin-top:10px;color:var(--muted);font-size:14px;letter-spacing:.06em;}
.sv-page .sv-sec-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;}

/* ============================ 05 应用场景（图 + 文）============================
   沿用后台 pic_list 逗号分隔的图片串，slide 一张一张出。
   无图时走 .sv-shot-ph 占位（深蓝渐变 + 文字），不出现破图。 */
.sv-page .sv-scene{background:var(--bg-soft);}
.sv-page .sv-scene-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
.sv-page .sv-scene-media{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:16/10.5;background:#fff;}
.sv-page .sv-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;}
.sv-page .sv-slide.on{opacity:1;}
.sv-page .sv-slide img{width:100%;height:100%;object-fit:cover;}
/* 图片计数角标（1/3 这种） */
.sv-page .sv-media-no{position:absolute;right:18px;bottom:18px;z-index:3;display:inline-flex;align-items:center;
  gap:7px;background:rgba(10,26,47,.72);backdrop-filter:blur(6px);border-radius:999px;padding:7px 15px;
  font-family:Arial,sans-serif;font-size:13px;font-weight:700;color:#fff;letter-spacing:.08em;}
.sv-page .sv-media-no i{width:6px;height:6px;border-radius:50%;background:#E84A5A;font-style:normal;}
/* 缩略图条 */
.sv-page .sv-thumbs{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.sv-page .sv-thumb{width:84px;height:56px;border-radius:10px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;opacity:.55;transition:.28s;background:#fff;}
.sv-page .sv-thumb img{width:100%;height:100%;object-fit:cover;}
.sv-page .sv-thumb:hover{opacity:.85;transform:translateY(-2px);}
.sv-page .sv-thumb.on{border-color:var(--red);opacity:1;}
/* 无图占位 */
.sv-page .sv-scene-ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;color:#fff;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 55%,#0B2240 100%);}
.sv-page .sv-scene-ph .ph-en{font-family:Arial,sans-serif;font-size:13px;letter-spacing:.3em;
  opacity:.7;text-transform:uppercase;}
.sv-page .sv-scene-ph .ph-cn{font-size:26px;font-weight:800;letter-spacing:.06em;}
.sv-page .sv-scene-ph .ph-ico{width:60px;height:60px;border-radius:16px;display:flex;
  align-items:center;justify-content:center;background:rgba(200,21,38,.18);margin-bottom:6px;}
.sv-page .sv-scene-ph .ph-ico svg{width:30px;height:30px;color:#F5B9BE;}

.sv-page .sv-scene-text .sv-kicker{font-family:Arial,sans-serif;font-weight:700;letter-spacing:.22em;
  font-size:12.5px;color:var(--red);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.sv-page .sv-scene-text .sv-kicker::before{content:'';width:26px;height:2px;background:var(--red);}
.sv-page .sv-scene-text h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;color:var(--ink);
  margin-bottom:22px;line-height:1.3;}
/* 后台正文（$content['content'] 是富文本 HTML，这里只约束排版，不动内容本身） */
.sv-page .sv-rich{font-size:15.5px;line-height:2.05;color:#4D5A6A;}
.sv-page .sv-rich p{margin-bottom:16px;}
.sv-page .sv-rich img{max-width:100%;height:auto;border-radius:12px;margin:10px 0;}
.sv-page .sv-rich a{color:var(--red);text-decoration:underline;}
.sv-page .sv-rich strong,.sv-page .sv-rich b{color:var(--ink);font-weight:700;}
.sv-page .sv-rich ul,.sv-page .sv-rich ol{margin:0 0 16px 22px;list-style:disc;}
.sv-page .sv-rich li{margin-bottom:8px;}
.sv-page .sv-rich h2,.sv-page .sv-rich h3{color:var(--ink);font-weight:800;margin:26px 0 12px;}
/* 正文下方的胶囊标签（从行业名派生，不硬编码） */
.sv-page .sv-mtags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.sv-page .sv-mtag{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--navy-3);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;}
.sv-page .sv-mtag svg{width:15px;height:15px;color:var(--red);flex-shrink:0;}

/* ============================ 06 全行业总览 ============================
   把各行业做成卡片网格：当前页高亮可点，其余跳转。
   数据来自 get_child_category(1059)，即后台真实分类，不写死。 */
.sv-page .sv-all{background:#fff;}
.sv-page .sv-ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.sv-page .sv-ind{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;transition:.32s;overflow:hidden;display:block;}
.sv-page .sv-ind::after{content:'';position:absolute;right:-36px;top:-36px;width:130px;height:130px;
  border-radius:50%;background:rgba(200,21,38,.04);transition:.35s;}
.sv-page .sv-ind:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(200,21,38,.35);}
.sv-page .sv-ind:hover::after{transform:scale(1.5);background:rgba(200,21,38,.07);}
.sv-page .sv-ind .sv-ind-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:16px;}
.sv-page .sv-ind .sv-ind-no::after{content:'';flex:1;height:1px;background:var(--line);}
.sv-page .sv-ind h3{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:8px;line-height:1.35;}
.sv-page .sv-ind p{font-size:13.5px;color:var(--muted);line-height:1.7;margin-bottom:16px;}
.sv-page .sv-ind .sv-ind-go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:600;color:var(--navy-3);transition:.25s;}
.sv-page .sv-ind:hover .sv-ind-go{color:var(--red);gap:11px;}
.sv-page .sv-ind .sv-ind-go svg{width:15px;height:15px;}
/* 当前页卡片：红边 + 浅红底，明确"你在这一页" */
.sv-page .sv-ind.cur{border-color:var(--red);background:var(--red-soft);}
.sv-page .sv-ind.cur .sv-ind-no{color:var(--red);}
.sv-page .sv-ind.cur .sv-ind-no::after{background:rgba(200,21,38,.25);}
.sv-page .sv-ind.cur .sv-ind-go{color:var(--red);}
.sv-page .sv-ind.cur:hover{transform:none;box-shadow:none;}

/* ============================ 07 推荐产品 ============================
   保留原页面的 AJAX 推荐位（#product_list），只换外框样式。
   列表由 get_recommend_product.html 返回的 HTML 塞进来，样式对 .sv-prod-list 做兜底。 */
.sv-page .sv-prod{background:var(--bg-soft);}
.sv-page .sv-prod-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.sv-page .sv-prod-list:empty::after{content:'产品推荐加载中…';color:var(--muted);font-size:14px;}
/* /get_recommend_product.html 返回的老卡片结构兜底（与旧版式保持可用即可） */
.sv-page .sv-prod-list .goods-item,.sv-page .sv-prod-list .goods{background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:.3s;}
.sv-page .sv-prod-list .goods-item:hover,.sv-page .sv-prod-list .goods:hover{box-shadow:var(--shadow-sm);}

/* ============================ 07.5 融合页样式 ============================
   2026-10-08 说明：本段原有的 .sv-hub-* / .sv-jump-* 样式已全部移除。
   原因：服务领域首页(1059)的融合页版式已改用定稿版设计
   （public/assets/pc/css/services_overview.css，.fov- 前缀），
   模板里已不再有任何 sv-hub-* / sv-jump-* 类名，这些样式属于死代码，删掉避免误改。
   备份：public/assets/pc/css/sv.css.bak_20261008_beforefovcleanup
   注：.sv-tabs（顶部行业胶囊条）、.sv-subbar、.sv-scene 等子页/公共样式仍保留。
   ======================================================================= */
/* ============================ 08 CTA ============================ */
.sv-page .sv-cta{position:relative;background:var(--navy);text-align:center;padding:104px 0;overflow:hidden;}
.sv-page .sv-cta::before{content:'';position:absolute;right:-140px;top:-140px;width:480px;height:480px;
  border-radius:50%;background:radial-gradient(circle,rgba(200,21,38,.22),transparent 70%);}
.sv-page .sv-cta .sv-wrap{position:relative;z-index:2;}
.sv-page .sv-cta h2{font-size:clamp(24px,3vw,38px);font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:.02em;}
.sv-page .sv-cta p{font-size:15.5px;color:rgba(220,229,239,.88);max-width:560px;margin:0 auto 38px;line-height:1.9;}
.sv-page .sv-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;
  padding:0 32px;border-radius:999px;font-size:15.5px;font-weight:600;cursor:pointer;transition:.28s;
  border:1px solid transparent;font-family:var(--font);}
.sv-page .sv-btn-primary{background:var(--red);color:#fff;box-shadow:0 14px 30px -12px rgba(200,21,38,.65);}
.sv-page .sv-btn-primary:hover{background:#d81e30;transform:translateY(-2px);}
.sv-page .sv-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.38);backdrop-filter:blur(6px);}
.sv-page .sv-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.2);transform:translateY(-2px);}

/* ============================ 09 底部胶囊锚点导航 ============================
   与品牌家族 bf-nav* 同款逻辑，本页独立命名（不依赖站点 .gm-nav-*）。 */
.sv-page .sv-navwrap{position:fixed;left:0;right:0;bottom:22px;z-index:90;text-align:center;
  pointer-events:none;opacity:0;transform:translateY(18px);transition:opacity .4s ease,transform .4s ease;}
.sv-page .sv-navwrap.show{opacity:1;transform:none;}
.sv-page .sv-navwrap:not(.show) .sv-navpill{pointer-events:none;}
.sv-page .sv-navpill{position:relative;display:inline-flex;align-items:center;gap:2px;padding:5px;
  border-radius:999px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 12px 36px -10px rgba(8,21,39,.45),inset 0 0 0 1px rgba(0,0,0,.05);pointer-events:auto;}
.sv-page .sv-navink{position:absolute;top:5px;left:0;height:calc(100% - 10px);width:0;border-radius:999px;
  background:var(--red-dark);box-shadow:0 4px 12px rgba(189,29,39,.4);opacity:0;
  transition:transform .38s cubic-bezier(.22,.61,.36,1),width .38s cubic-bezier(.22,.61,.36,1),opacity .2s;}
.sv-page .sv-navpill.has-active .sv-navink{opacity:1;}
.sv-page .sv-navitem{position:relative;z-index:1;display:flex;align-items:center;height:42px;
  padding:0 24px;border-radius:999px;font-size:15px;font-weight:500;color:#555;white-space:nowrap;transition:.25s;}
.sv-page .sv-navitem:hover{color:var(--red-dark);}
.sv-page .sv-navitem.active{color:#fff;}

/* 2026-10-08：融合页底部胶囊现在装「总览 + 7 行业 + 联系我们」共 9 项，
   PC 上约 810px 没问题，但 1280 以下会顶到屏幕两边。
   这里加一档紧凑尺寸（也可当子页的 3/4 项导航用，不冲突）。 */
@media (max-width:1440px) and (min-width:1025px){
  .sv-page .sv-navitem{height:40px;padding:0 17px;font-size:14px;}
  .sv-page .sv-navpill{gap:0;}
}

/* ============================ 10 入场动画 ============================
   只有 JS 加上 html.sv-anim 时才隐藏未进场元素 —— 无 JS 时内容默认可见（利于 SEO 抓取）。

   ⚠️ 已修的一个真 bug（2026-10-08）：原来 IntersectionObserver 用
      `{threshold:.12, rootMargin:'0px 0px -8% 0px'}`，在**快速滚动**时
      回调触发瞬间元素可能已越过视口，于是被 observe 了却永不点亮 ——
      实测"滚到底再回顶"后 18 个 reveal 有 7 个永久停在 opacity:0（首屏下方一片空白）。
      修法（两道保险）：
        ① 监听 scroll/resize，滚完后把已进入视口的元素补点亮（兜底）；
        ② 页面加载 1.2s 后仍未点亮的，一律直接点亮（防止任何极端情况下留白）。 */
.sv-page .sv-reveal{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);}
html.sv-anim .sv-page .sv-reveal{opacity:0;transform:translateY(34px);}
html.sv-anim .sv-page .sv-reveal.sv-in{opacity:1;transform:none;}
.sv-page .sv-reveal.sv-d1{transition-delay:.1s;}
.sv-page .sv-reveal.sv-d2{transition-delay:.2s;}
.sv-page .sv-reveal.sv-d3{transition-delay:.3s;}
.sv-page .sv-reveal.sv-d4{transition-delay:.4s;}
@media (prefers-reduced-motion:reduce){
  html.sv-anim .sv-page .sv-reveal{opacity:1;transform:none;transition:none;}
}

/* ============================ 11 矮屏桌面（1366×768 等笔记本）============================
   首屏文案在 768 高下会比 82vh 高出约 20px，压紧留白保证 hero 仍等于一屏。 */
@media (min-width:1025px) and (max-height:900px){
  .sv-page .sv-hero-inner{padding:calc(1.9rem + 126px) 28px 130px;}
  .sv-page .sv-hero:not(:first-child) .sv-hero-inner{padding-top:44px;}
  .sv-page .sv-hero h1{margin:20px 0 12px;}
  .sv-page .sv-hero-lead{font-size:15.5px;line-height:1.85;}
  .sv-page .sv-hero-tags{margin-top:24px;}
}

/* ============================ 12 响应式 ============================ */
@media (max-width:1024px){
  /* 手机上 body 的 padding-top 是 .9rem，hero 负 margin 要跟着换；
     同样只在 hero 是页面第一个元素时才负 margin（子页前面有 subbar）。 */
  .sv-page .sv-hero{align-items:flex-start;min-height:auto;}
  .sv-page .sv-hero:first-child{margin-top:-.9rem;}
  .sv-page .sv-hero:not(:first-child){margin-top:0;}
  .sv-page .sv-hero::before{background:radial-gradient(420px circle at 30% 34%,rgba(200,21,38,.12),transparent 70%);}
  .sv-page .sv-wm{font-size:60vw;top:calc(.9rem + 8vh);right:-8vw;}
  .sv-page .sv-hero:not(:first-child) .sv-wm{top:8vh;}
  .sv-page .sv-hero-inner{padding:calc(.9rem + 44px) 24px 90px;}
  .sv-page .sv-hero:not(:first-child) .sv-hero-inner{padding-top:36px;}
  .sv-page .sv-hero h1{font-size:clamp(28px,7.4vw,44px);}
  .sv-page .sv-hero-lead{font-size:15px;}
  .sv-page .sv-scroll-hint{display:none;}
  .sv-page .sv-tabs{top:.9rem;}
  .sv-page .sv-tabs-inner{justify-content:flex-start;padding:10px 16px;}
  .sv-page .sv-tab{height:40px;padding:0 18px;font-size:14px;}
  .sv-page .sv-sec{padding:64px 0;scroll-margin-top:calc(.9rem + 68px);}
  .sv-page .sv-scene-grid{grid-template-columns:1fr;gap:28px;}
  .sv-page .sv-ind-grid{grid-template-columns:1fr 1fr;}
  .sv-page .sv-prod-list{grid-template-columns:1fr 1fr;}
  .sv-page .sv-navitem{height:42px;padding:0 16px;font-size:14px;}
  /* 9 项在手机上会换到 2~3 行，给个 max-width + 行高约束，别糊住半个屏 */
  .sv-page .sv-navpill{flex-wrap:wrap;justify-content:center;max-width:94%;border-radius:26px;
    max-height:96px;overflow:hidden;}
  .sv-page .sv-navwrap{bottom:14px;}
}
@media (max-width:560px){
  .sv-page .sv-wrap{padding:0 20px;}
  .sv-page .sv-ind-grid{grid-template-columns:1fr;}
  .sv-page .sv-prod-list{grid-template-columns:1fr;}
  .sv-page .sv-sec-head{flex-direction:column;align-items:flex-start;}
  .sv-page .sv-scene-text h2{font-size:24px;}
  .sv-page .sv-hero-tag{font-size:13px;padding:8px 14px;}
}

/* ============================ 13 页脚让位 ============================
   常驻胶囊会压住页脚最后一行（.footer-wrap 由 footer.blade.php 输出）。 */
.footer-wrap{padding-bottom:1.3rem;}
@media screen and (max-width:1024px){ .footer-wrap{padding-bottom:2rem;} }