/* ═══════════════════════════════════════════════════════════════
   山东陆海空网络科技有限公司 官网 · 站点样式表
   ─────────────────────────────────────────────────────────────
   分段骨架（九个段落九个骨架，对照 jiro.build 案例库）：
     ① 首屏        3D 摄像机 + 事实条
     ② 服务项目    Features 05 Kelo       左标题 + 八条竖排条目 ｜ 右侧粘性大图
     ③ 适用场景    Destination Tripleo P1 满幅大图 + 右下缩略图切换
     ④ 为什么选我们 Why Choose Us Q11     居中标题 + 四格矩阵 + 四组数字
     ⑤ 工程案例    R10+R1+R6              深色，业态筛选 + 三列大图卡
     ⑥ 服务区域    Social Proof LuminioAI 左标题 + 4×4 地市网格 + 通栏承诺
     ⑦ 服务流程    How it Works 02 Pixa   左标题 ｜ 右侧描边圆圈编号清单
     ⑧ 常见问题    FAQ 02 Kelo            居中标题 + 分类标签 + 单列手风琴
     ⑨ 联系        CTA 01 Quell           白底铺满，居中标题 + 按钮 + 勾选行
   配色（白系）：白 #FFFFFF · 浅灰 #F5F6F8 · 品牌蓝 #0064E0 · 深墨 #07090D
   规则：相邻两段不同底色；中文标题装不下就手工 <br> 断行，不缩字号
   ═══ */

*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}

:root{
  /* 纸 —— 暖白，不用冷白。冷白配浅灰是"通用模板"的第一特征 */
  --paper:  #FFFFFF;
  --paper2: #F5F6F8;
  --white:  #FFFFFF;

  /* 墨 —— 深暖黑 */
  --ink:    #07090D;
  --ink2:   #0A0F18;

  /* 字 */
  --t1:#0A0F18;
  --t2:#4E5968;
  --t3:#667182;
  --t4:#AAB3C0;
  --d1:#F2F0EC;
  --d2:#9AA1A7;
  --d3:#6C7A8E;

  /* 押色 */
  --brand:  #0064E0;
  --brand-d:#0049A8;
  --brand-l:#4C93FF;

  /* 发丝线：结构全靠它 */
  --ln:  rgba(10,15,24,.14);
  --ln2: rgba(10,15,24,.075);
  --lnw: rgba(255,255,255,.14);
  --lnw2:rgba(255,255,255,.08);

  --fd:'Inter Tight','Inter',var(--fc);
  --fm:var(--fc); /* 小标签已改为中文无衬线，不再用等宽字体 */
  --fc:'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;

  /* 尺度对比拉大：H1 与标签差近 10 倍 */
  --h1:clamp(40px,6.4vw,108px);
  --h2:clamp(30px,4.5vw,84px);
  --h3:clamp(19px,1.5vw,25px);
  --lead:clamp(15px,1.08vw,18.5px);
  --body:clamp(14.5px,.96vw,16px);
  --lbl:clamp(11.5px,.84vw,12.5px);

  --edge:clamp(20px,5.4vw,80px);
  --maxw:1440px;
  --secY:clamp(80px,9vw,160px);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --dur:.72s;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--t2);
  font-family:var(--fc);font-size:var(--body);line-height:1.76;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
body.lock{overflow:hidden}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--edge)}

/* 标签：小、宽字距、全大写感 —— 与巨大标题形成尺度对比 */
.lbl::before{content:"";width:26px;height:1px;background:currentColor;flex:none}

.h1{font-family:var(--fd);font-size:var(--h1);font-weight:800;line-height:1.02;
  letter-spacing:-.045em;color:var(--t1);text-wrap:balance}
.h2{font-family:var(--fd);font-size:var(--h2);font-weight:800;line-height:1.06;
  letter-spacing:-.04em;color:var(--t1);text-wrap:balance}
/* 整行实心：不再用浅灰细字做对比，避免标题发虚 */
.h1 em,.h2 em{font-style:normal;font-weight:inherit;color:inherit}
.lead{font-size:var(--lead);line-height:1.78;color:var(--t2);max-width:56ch}

/* 段落 —— 只靠发丝线分界，不用背景色块堆砌 */
.sec{padding:var(--secY) 0;position:relative}
.sec--paper{background:var(--paper)}
.sec--gray{background:var(--paper2)}
.sec--ink{background:var(--ink);color:var(--d2)}
.sec--ink .h2{color:var(--d1)}
.sec--ink .h2 em{color:inherit}
.sec--ink .lead{color:var(--d2)}
.sec--ink 

/* 居中段头 */
.shead--c{text-align:center;display:block;max-width:1060px;margin-left:auto;margin-right:auto}
.shead--c .h2{margin-bottom:20px;text-wrap:normal}
.shead--c .lead{margin:0 auto;max-width:52ch}

/* ═══ 为什么选我们：四格矩阵（浅色）═══ */
.why4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}
.why-c{background:var(--white);border:1px solid var(--ln2);border-radius:14px;
  padding:clamp(22px,2.2vw,32px) clamp(18px,1.8vw,26px);
  transition:border-color .3s,transform .34s var(--ease),box-shadow .36s var(--ease)}
.why-c:hover{border-color:var(--brand);transform:translateY(-4px);
  box-shadow:0 24px 46px -28px rgba(10,15,24,.4)}
.why-ic{width:46px;height:46px;border-radius:12px;background:var(--paper2);
  display:grid;place-items:center;margin-bottom:18px;
  transition:background-color .3s}
.why-ic svg{width:22px;height:22px;color:var(--brand);transition:color .3s}
.why-c:hover .why-ic{background:var(--brand)}
.why-c:hover .why-ic svg{color:#fff}
.why-c b{display:block;font-family:var(--fd);font-size:clamp(16px,1.22vw,18.5px);
  font-weight:700;letter-spacing:-.026em;color:var(--t1);margin-bottom:10px;line-height:1.34}
.why-c p{font-size:13.8px;line-height:1.72;color:var(--t2)}
@media(max-width:1080px){.why4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.why4{grid-template-columns:1fr}}
/* 深色段落里的大数字，改成浅色版 */
.sec--paper .nums{border-top-color:var(--ln);margin-top:clamp(40px,4.4vw,72px)}
.sec--paper .num{border-right-color:var(--ln2)}
.sec--paper .num .v{color:var(--t1)}
.sec--paper .num .v small{color:var(--t3)}
.sec--paper .num .k{color:var(--t3)}
@media(max-width:760px){.sec--paper .num{border-bottom-color:var(--ln2)}}

/* 段头：编号 + 标题 + 引言，靠发丝线压顶 */
.shead{padding-top:clamp(20px,2.2vw,30px);border-top:1px solid var(--ln);
  margin-bottom:clamp(30px,3.4vw,54px)}
.sec--ink .shead{border-top-color:var(--lnw)}
.shead .lead{margin-bottom:4px}

/* ═══ 按钮：直角，无投影 ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  height:52px;padding:0 26px;border-radius:8px;
  font-family:var(--fd);font-size:15px;font-weight:600;letter-spacing:.005em;
  white-space:nowrap;
  transition:background-color .22s var(--ease-io),color .22s,border-color .22s;
}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--pri{background:var(--brand);color:#fff}
.btn--pri:hover{background:var(--brand-d)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}
.btn--gho{border:1px solid var(--ln);color:var(--t1)}
.btn--gho:hover{border-color:var(--t1)}
.btn--lg{height:60px;padding:0 34px;font-size:16px}

/* 入场 */
.fx{opacity:0;translate:0 18px;
  transition:opacity var(--dur) var(--ease),translate var(--dur) var(--ease);transition-delay:var(--d,0ms)}
.fx.in{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){.fx{opacity:1;translate:none;filter:none;transition:none}}

/* ═══ 顶栏：纸色，直角，发丝线收底 ═══ */
.nav{position:sticky;top:0;z-index:80;background:var(--paper);
  border-bottom:1px solid var(--ln);transition:box-shadow .3s}
.nav.solid{box-shadow:0 1px 0 var(--ln)}
.nav-in{height:76px;max-width:1760px;margin:0 auto;padding:0 var(--edge);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,44px)}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand-mk{display:flex;align-items:center;flex:none}
.brand-mk img{height:30px;width:auto;display:block}
/* 窄屏收敛一档，避免 6 项导航被 logo 挤到折行 */
@media(max-width:560px){.brand-mk img{height:26px}}
.brand-tx b{display:block;font-family:var(--fd);font-size:16px;font-weight:800;
  letter-spacing:-.02em;color:var(--t1);line-height:1.1}
.brand-tx span{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.09em;
  color:var(--t4);text-transform:uppercase;line-height:1.2}
.nav-links{display:flex;gap:clamp(14px,2vw,32px);margin-left:auto}
.nav-links a{font-size:14.5px;color:var(--t2);position:relative;padding:6px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--t1);transform:scaleX(0);transform-origin:right;transition:transform .34s var(--ease)}
.nav-links a:hover{color:var(--t1)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* 「服务区域」下拉（12 区县城市分站；子项写死在 head.html，不属 CMS 栏目） */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:5px}
.nav-item>a svg{width:9px;height:6px;opacity:.5;transition:transform .26s var(--ease)}
.nav-item:hover>a svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 15px);left:50%;z-index:60;
  transform:translateX(-50%) translateY(-6px);
  background:var(--paper);border:1px solid var(--ln);border-radius:12px;padding:10px;
  width:340px;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  box-shadow:0 16px 44px rgba(10,15,24,.14);
  opacity:0;visibility:hidden;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
.drop::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
.nav-item:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{font-size:13.5px;padding:9px 12px;border-radius:7px;color:var(--t2);white-space:nowrap}
.drop a::after{display:none}
.drop a:hover{background:rgba(0,100,224,.055);color:var(--brand)}
.drop-all{grid-column:1/-1;margin-top:4px;border-top:1px solid var(--ln2);padding-top:11px;color:var(--brand)}

.nav-act{display:flex;align-items:center;gap:18px;flex:none}
.nav-tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);
  font-size:15px;font-weight:700;color:var(--t1);letter-spacing:-.01em}
.nav-tel svg{width:15px;height:15px;color:var(--brand)}
.nav .btn{height:42px;padding:0 20px;font-size:14px}
.burger{display:none;width:42px;height:42px;place-items:center;color:var(--t1)}
.burger svg{width:22px;height:22px}
/* 折叠断点 1140px：品牌全称 + 6 项导航在 1025–1139 区间每项都折行（实测） */
@media(max-width:1140px){.nav-links{display:none}.burger{display:grid}}
@media(max-width:700px){
  .nav-tel,.nav .btn{display:none}
  .burger{display:grid}
  .brand-tx span{display:none}
}
.drawer{position:fixed;inset:0;z-index:79;background:var(--paper);
  padding:96px var(--edge) 30px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.drawer.open{opacity:1;visibility:visible;transform:none}
.drawer a{font-family:var(--fd);font-size:23px;font-weight:700;color:var(--t1);
  padding:16px 0;border-bottom:1px solid var(--ln2)}
.drawer .btn{margin-top:26px;align-self:flex-start}

/* ═══ ① 首屏：非对称，相机出血到右边界外 ═══ */
.hero{background:var(--paper);position:relative;overflow:hidden;
  padding-top:clamp(28px,3.4vw,54px);padding-bottom:clamp(26px,3vw,44px)}
.hero-in{max-width:1760px;margin:0 auto;padding:0 var(--edge);
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(16px,2vw,34px);align-items:center}
.hero-kicker{font-size:14.5px;line-height:1.6;color:var(--t3);letter-spacing:.01em}
.hero-txt{max-width:none;min-width:0}
.hero .h1{margin:clamp(18px,2.1vw,30px) 0 clamp(18px,2vw,26px)}
.hero-lead{margin-bottom:clamp(26px,2.8vw,38px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
/* 承接线：首屏底部一行小字，压一条通栏发丝线 */
.hero-foot{margin-top:clamp(38px,4.4vw,74px);padding-top:22px;border-top:1px solid var(--ln);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hero-foot .k{font-family:var(--fm);font-size:var(--lbl);letter-spacing:.04em;
  color:var(--t3)}
.hero-foot .v{font-family:var(--fd);font-size:13.5px;font-weight:600;color:var(--t1)}
@media(max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:26px}
}

/* 相机台：浅色棚拍，右侧出血 */
.stage{position:relative;width:100%;aspect-ratio:1.08/1;display:grid;place-items:center}
@media(max-width:980px){.stage{aspect-ratio:1.34/1}}
.stage::before{content:"";position:absolute;left:48%;top:44%;width:92%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,100,224,.10),rgba(0,100,224,.025) 46%,transparent 70%)}
.stage::after{content:"";position:absolute;left:50%;bottom:4%;width:56%;height:6%;
  transform:translateX(-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse,rgba(20,24,27,.2),transparent 68%);filter:blur(16px)}
#camHolder{position:absolute;inset:0;z-index:2}
#camHolder canvas{width:100%!important;height:100%!important;display:block}
.stage-fb{position:absolute;inset:0;display:none;place-items:center;z-index:1}
.stage[data-camera-ready="true"] .stage-fb{display:none}
.stage[data-camera-ready="false"] .stage-fb{display:grid}
.stage-fb img{width:82%;height:auto;filter:drop-shadow(0 26px 36px rgba(10,15,24,.14))}

/* ═══ ③ 能力：编号长列表（不是卡片网格）═══ */
/* ═══ ③ 服务能力：左标题+按钮+条目列表，右侧粘性大图 ═══
   照 jiro.build 的 Features 05 Kelo 排版 */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(24px,3.6vw,72px);align-items:start}
.svc-tx .h2{margin-bottom:0}
.svc-list{border-top:1px solid var(--ln);margin-top:clamp(26px,3vw,42px)}
.svc-r{border-bottom:1px solid var(--ln2)}
.svc-hd{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(12px,1.4vw,18px);align-items:center;text-align:left;
  padding:clamp(14px,1.5vw,19px) 0;cursor:pointer;
}
.svc-ic{width:36px;height:36px;border-radius:9px;background:var(--paper2);
  display:grid;place-items:center;flex:none;transition:background-color .26s}
.svc-ic svg{width:18px;height:18px;color:var(--brand);transition:color .26s}
.svc-r:hover .svc-ic,.svc-r.on .svc-ic{background:var(--brand)}
.svc-r:hover .svc-ic svg,.svc-r.on .svc-ic svg{color:#fff}
.svc-te{min-width:0}
.svc-te b{display:block;font-family:var(--fd);font-size:clamp(15.5px,1.25vw,19px);
  font-weight:700;letter-spacing:-.026em;color:var(--t1);line-height:1.3;transition:color .22s}
.svc-r:hover .svc-te b{color:var(--brand)}
.svc-te i{display:block;font-style:normal;font-size:13.5px;line-height:1.6;
  color:var(--t3);margin-top:4px}
.svc-pm{width:30px;height:30px;border-radius:50%;border:1px solid var(--ln);flex:none;
  position:relative;transition:background-color .3s,border-color .3s,transform .4s var(--ease)}
.svc-pm::before,.svc-pm::after{content:"";position:absolute;background:var(--t2);
  transition:background-color .3s}
.svc-pm::before{left:50%;top:50%;width:11px;height:1.6px;margin:-.8px 0 0 -5.5px}
.svc-pm::after{left:50%;top:50%;width:1.6px;height:11px;margin:-5.5px 0 0 -.8px}
.svc-r:hover .svc-pm{border-color:var(--brand)}
.svc-r.on .svc-pm{background:var(--brand);border-color:var(--brand);transform:rotate(180deg)}
.svc-r.on .svc-pm::before,.svc-r.on .svc-pm::after{background:#fff}
.svc-r.on .svc-pm::after{transform:scaleY(0)}
.svc-x{overflow:hidden;height:0;transition:height .46s var(--ease)}
.svc-x-in{padding:2px 0 clamp(18px,2vw,26px) clamp(48px,4.4vw,54px)}
.svc-sp{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.svc-sp span{font-size:12.5px;line-height:1.5;padding:4px 11px;border-radius:6px;
  background:var(--paper2);color:var(--t2)}

/* 右侧粘性大图 */
.svc-side{position:sticky;top:96px}
.svc-vis{margin:0;border-radius:16px;overflow:hidden;
  background:var(--ink);aspect-ratio:4/3}
.svc-vis img{width:100%;height:100%;object-fit:cover;display:block}
.svc-vis{position:relative}
.svc-vis figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(18px,2vw,30px);color:#fff;font-size:13px;letter-spacing:.02em;
  background:linear-gradient(180deg,transparent,rgba(7,9,13,.82))}

.svc-facts{margin-top:18px;border-top:1px solid var(--ln)}
.svc-facts div{display:flex;justify-content:space-between;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--ln2)}
.svc-facts span{font-size:13.5px;color:var(--t3)}
.svc-facts b{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--t1);
  letter-spacing:-.02em}

/* 系统构成示意图（条目展开后显示） */
.sch-w{background:var(--paper2);border:1px solid var(--ln2);border-radius:10px;padding:14px 16px}
.sch-k{font-size:12px;font-weight:600;color:var(--t3);margin-bottom:6px}
.sch{width:100%;height:auto;display:block}
.sch rect{fill:#fff;stroke:rgba(0,100,224,.18)}
.sch text{font-size:21px;fill:#3D4A5C;font-weight:600;
  font-family:'PingFang SC','Microsoft YaHei',-apple-system,sans-serif}
.sch line,.sch path{stroke:rgba(0,100,224,.5);stroke-width:2;fill:none}

@media(max-width:1080px){
  .svc{grid-template-columns:1fr;gap:32px}
  .svc-side{position:relative;top:auto;order:-1}
  .svc-vis{aspect-ratio:16/9}
}
@media(max-width:620px){
  .svc-x-in{padding-left:0}
  .svc-te i{font-size:13px}
}

/* ═══ ④ 适用场景：满幅大图 + 右下缩略图切换 ═══
   照 jiro.build 的 Destination Discovery - Tripleo 排版 */
.scenes{position:relative;overflow:hidden;background:var(--ink);display:block;
  min-height:clamp(540px,calc(100svh - 76px),1180px)}
.scene-bgs{position:absolute;inset:0;z-index:0}
.scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .72s var(--ease)}
.scene-bg.on{opacity:1}
/* 只在底部与左侧压暗，图的上半截保持干净 */
.scene-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,8,11,.34) 0%,transparent 26%,rgba(6,8,11,.42) 66%,rgba(6,8,11,.93) 100%),
    linear-gradient(90deg,rgba(6,8,11,.66) 0%,rgba(6,8,11,.22) 44%,transparent 68%)}

.scenes-in{position:relative;z-index:2;height:100%;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--edge);
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,70px);
  min-height:inherit}
.scene-tx{max-width:600px;padding-bottom:clamp(40px,4.6vw,80px)}
.scene-k{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72);
  letter-spacing:.02em;margin-bottom:14px}
.scene-tx .h2{color:#fff;font-size:clamp(28px,3.4vw,64px);line-height:1.08;
  letter-spacing:-.038em;margin-bottom:16px}
.scene-tx .lead{color:rgba(255,255,255,.84);margin-bottom:26px;max-width:44ch}

.scene-thumbs{display:flex;gap:12px;padding-bottom:clamp(40px,4.6vw,80px)}
.thumb{padding:0;border:0;background:none;text-align:left;color:#fff;cursor:pointer}
.t-img{display:block;width:clamp(96px,9.6vw,158px);aspect-ratio:3/4;
  border-radius:10px;overflow:hidden;position:relative;
  outline:2px solid transparent;outline-offset:2px;
  transition:outline-color .3s,transform .34s var(--ease),opacity .34s}
.t-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.thumb:hover .t-img{transform:translateY(-3px)}
.thumb:hover .t-img img{transform:scale(1.06)}
.t-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(6,8,11,.62))}
.thumb b{display:block;margin-top:11px;font-family:var(--fd);
  font-size:clamp(12.5px,.95vw,15px);font-weight:600;letter-spacing:-.01em;
  color:rgba(255,255,255,.66);transition:color .26s}
.thumb .t-img{opacity:.66}
.thumb.on .t-img,.thumb:hover .t-img{opacity:1}
.thumb.on .t-img{outline-color:var(--brand-l)}
.thumb.on b{color:#fff}

@media(max-width:1024px){
  .scenes-in{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:22px}
  .scene-tx{max-width:none;padding-bottom:0}
  .scene-tx .h2{font-size:clamp(26px,6vw,40px)}
  .scene-thumbs{padding-bottom:clamp(34px,5vw,54px);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .scene-thumbs::-webkit-scrollbar{display:none}
  .t-img{width:112px}
}
@media(max-width:560px){
  .scenes{min-height:auto}
  .scenes-in{padding-top:clamp(120px,34vw,220px)}
}

/* ═══ ⑤ 深色宣言段：巨字 + 四条 ═══ */
/* ═══ ⑥ 数字：超大，横排，发丝线分隔 ═══ */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--lnw2);margin-top:clamp(46px,5vw,80px)}
.num{padding:clamp(26px,3vw,44px) clamp(14px,1.6vw,26px) clamp(22px,2.4vw,34px) 0;
  border-right:1px solid var(--lnw2)}
.num:last-child{border-right:0}
.num .v{font-family:var(--fd);font-size:clamp(44px,6.4vw,96px);font-weight:800;
  line-height:1;letter-spacing:-.058em;color:var(--d1);display:flex;align-items:baseline;gap:4px}
.num .v small{font-size:.3em;font-weight:600;letter-spacing:0;color:var(--d3)}
.num .k{margin-top:14px;font-family:var(--fm);font-size:13px;letter-spacing:.02em;color:var(--d3)}
@media(max-width:760px){
  .nums{grid-template-columns:repeat(2,1fr)}
  .num{border-bottom:1px solid var(--lnw2)}
  .num:nth-child(2n){border-right:0}
}

/* ═══ ⑩ FAQ：窄栏，纯发丝线 ═══ */
/* ═══ ⑩ 常见问题：居中标题 + 分类标签 + 单列手风琴 + 底部联系横条（jiro: FAQ 02 Kelo）═══ */
.fq-hd{max-width:760px;margin:0 auto;text-align:center}
.fq-hd .h2{margin-bottom:16px}
.fq-hd .lead{margin:0 auto 28px}
.fq-tabs{display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(18px,2.4vw,40px);margin-bottom:clamp(12px,1.5vw,20px)}
.fq-t{position:relative;padding:6px 1px;font-family:var(--fd);font-size:15px;
  font-weight:600;letter-spacing:-.01em;color:var(--t3);
  transition:color .24s var(--ease)}
.fq-t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease)}
.fq-t:hover{color:var(--t1)}
.fq-t.on{color:var(--t1)}
.fq-t.on::after{transform:scaleX(1)}
.faq{max-width:780px;margin:0 auto;border-top:1px solid var(--ln)}
.qi{border-bottom:1px solid var(--ln2)}
.qi.hide{display:none}
.qi-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.1vw,28px) 0;text-align:left}
.qi-q b{font-family:var(--fd);font-size:clamp(17px,1.36vw,21px);font-weight:600;
  letter-spacing:-.022em;color:var(--t1);line-height:1.48;transition:color .22s}
.qi-q:hover b{color:var(--brand)}
.qi-ic{width:26px;height:26px;flex:none;position:relative;margin-top:3px}
.qi-ic::before,.qi-ic::after{content:"";position:absolute;background:var(--t1);
  transition:transform .42s var(--ease),background-color .24s}
.qi-ic::before{left:0;right:0;top:50%;height:1.5px;margin-top:-.75px}
.qi-ic::after{top:0;bottom:0;left:50%;width:1.5px;margin-left:-.75px}
.qi.open .qi-ic::before,.qi.open .qi-ic::after{background:var(--brand)}
.qi.open .qi-ic::after{transform:scaleY(0)}
.qi-a{overflow:hidden;height:0;transition:height .44s var(--ease)}
.qi-a-in{padding:0 56px clamp(22px,2.2vw,30px) 0;font-size:15px;line-height:1.85;color:var(--t2)}
@media(max-width:640px){.qi-a-in{padding-right:10px}}
.fq-foot{max-width:780px;margin:clamp(26px,3vw,40px) auto 0;
  background:var(--paper);border:1px solid var(--ln2);border-radius:14px;
  padding:clamp(18px,1.9vw,24px) clamp(18px,2vw,26px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,32px)}
.fq-foot-l{display:flex;align-items:center;gap:15px}
.fq-foot-l svg{width:26px;height:26px;color:var(--brand);flex:none}
.fq-foot-l b{display:block;font-family:var(--fd);font-size:16px;font-weight:700;
  letter-spacing:-.026em;color:var(--t1);margin-bottom:3px}
.fq-foot-l span{display:block;font-size:13.5px;line-height:1.62;color:var(--t2)}
.fq-foot .btn{flex:none}
@media(max-width:640px){.fq-foot{flex-direction:column;align-items:stretch}
  .fq-foot .btn{width:100%;justify-content:center}}


/* ═══ ⑪ 行动：满幅押色块 ═══ */
/* ═══ ⑪ 联系：白底 + 居中内容，满幅铺开（jiro: CTA 01 Quell）═══ */
#contact{padding-top:clamp(40px,4.4vw,72px)}
.cta-card{border-top:1px solid var(--ln);padding-top:clamp(34px,3.8vw,60px);text-align:center}
.cta-card .h2{margin-bottom:20px}
.cta-card .lead{margin:0 auto clamp(28px,3vw,40px);max-width:46ch;color:var(--t2)}
.cta-btn{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-bottom:clamp(30px,3.4vw,46px)}
.btn--oln{border:1px solid var(--ln);color:var(--t1);background:transparent}
.btn--oln:hover{border-color:var(--t1);background:var(--paper2)}
.cta-ck{list-style:none;margin:0;padding:clamp(24px,2.6vw,34px) 0 0;
  border-top:1px solid var(--ln2);
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px clamp(20px,3.4vw,56px)}
.cta-ck li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--t2)}
.cta-ck svg{width:16px;height:16px;flex:none;color:var(--brand)}
@media(max-width:620px){
  .cta-btn{flex-direction:column;align-items:stretch}
  .cta-btn .btn{width:100%;justify-content:center}
  .cta-ck{flex-direction:column;align-items:center;gap:13px}
}
@media(max-width:620px){
  .cta-card{border-radius:18px}
  .cta-btn{flex-direction:column;align-items:stretch}
  .cta-btn .btn{width:100%;justify-content:center}
  .cta-ck{flex-direction:column;align-items:center;gap:12px}
}

/* ═══ 页脚 ═══ */
.foot{background:var(--ink);color:var(--d3);padding:clamp(52px,5.6vw,90px) 0 26px}
.ft-top{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.8vw,50px);padding-bottom:clamp(30px,3.2vw,50px);
  border-bottom:1px solid var(--lnw2)}
@media(max-width:880px){.ft-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft-top{grid-template-columns:1fr}}
.ft-ab{max-width:340px}
.ft-ab .brand{margin-bottom:16px}
.ft-ab .brand-tx b{color:#fff}
.ft-ab .brand-tx span{color:var(--d3)}
.ft-ab p{font-size:14px;line-height:1.78;color:var(--d3)}
.fc h5{font-family:var(--fm);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--d3);margin-bottom:16px}
.fc a,.fc p{display:block;font-size:14px;color:var(--d2);margin-bottom:11px;transition:color .2s}
.fc a:hover{color:#fff}
.ft-bt{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  padding-top:24px;font-family:var(--fm);font-size:12.5px;letter-spacing:.01em;color:var(--d3)}
.ft-bt a:hover{color:var(--d2)}

/* 表单告知文字（隐私政策提示） */
.form-note{margin-top:2px;font-size:12px;line-height:1.65;color:var(--d2)}
.form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form-note a:hover{color:var(--brand-l)}
.msg-form .form-note{font-size:12.5px;color:var(--t3)}
.msg-form .form-note a{color:var(--brand);font-weight:600;text-decoration:none}
.msg-form .form-note a:hover{text-decoration:underline}

.totop{position:fixed;right:18px;bottom:18px;z-index:72;width:46px;height:46px;border-radius:10px;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background-color .22s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brand)}
.totop svg{width:18px;height:18px}

.mobar{position:fixed;left:0;right:0;bottom:0;z-index:76;display:none;
  grid-template-columns:1fr 1fr;gap:2px;padding:0 0 env(safe-area-inset-bottom);
  background:var(--ink)}
.mobar .btn{height:52px;font-size:14.5px}
.mobar .btn--gho{border:0;color:#fff;background:#1B2126}
.mobar .btn--gho:hover{background:#232A30}
@media(max-width:700px){.mobar{display:grid}.totop{bottom:74px}}

/* ═══ 05 服务区域 + 承诺：两栏，右侧补上承诺，填空 ═══ */
/* ═══ ⑦ 服务区域：左标题 + 4×4 地市网格 + 通栏承诺（jiro: Social Proof - LuminioAI）═══ */
.cov{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(26px,3.4vw,64px);align-items:start}
.cov-l .h2{margin-bottom:18px}
.cov-l .lead{max-width:33ch}
.cities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--ln);border:1px solid var(--ln)}
.city{background:var(--paper);padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:clamp(78px,7.4vw,100px);transition:background-color .24s var(--ease)}
.city b{font-family:var(--fd);font-size:clamp(15px,1.15vw,18px);font-weight:700;
  letter-spacing:-.02em;color:var(--t1)}
.city em{font-style:normal;font-size:11.5px;color:var(--t4);margin-top:5px}
.city:hover{background:#EDF3FB}
.city.hub{background:var(--brand)}
.city.hub b{color:#fff}
.city.hub em{color:rgba(255,255,255,.9)}
.city.hub:hover{background:var(--brand-d)}
.cov-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3.2vw,56px);margin-top:clamp(30px,3.2vw,52px);
  border-top:1px solid var(--ln);padding-top:clamp(26px,2.6vw,40px)}
.pl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px}
.pl svg{width:24px;height:24px;color:var(--brand);flex:none;margin-top:2px}
.pl h4{font-family:var(--fd);font-size:17px;font-weight:700;letter-spacing:-.026em;
  color:var(--t1);margin-bottom:8px}
.pl p{font-size:14px;line-height:1.75;color:var(--t2)}
@media(max-width:1080px){.cities{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.cov{grid-template-columns:1fr;gap:30px}
  .cov-l .lead{max-width:52ch}}
@media(max-width:640px){.cities{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cov-bar{grid-template-columns:1fr;gap:24px}}

/* ═══ 06 服务流程：四栏大编号，与 01 的横排列表区分开 ═══ */
/* ═══ ⑧ 服务流程：左标题 + 右侧描边圆圈编号清单（jiro: How it Works 02 Pixa）═══ */
.flow{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,80px);align-items:start;
  border-top:1px solid var(--ln);padding-top:clamp(26px,2.8vw,44px)}
.flow-l{position:sticky;top:104px}
.flow-l .h2{margin-bottom:20px}
.flow-l .lead{margin-bottom:26px;max-width:34ch}
.flow-a{display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--fd);font-size:15px;font-weight:600;color:var(--brand);
  border-bottom:1px solid rgba(0,100,224,.3);padding-bottom:4px;
  transition:border-color .24s var(--ease),gap .24s var(--ease)}
.flow-a:hover{border-bottom-color:var(--brand);gap:.85em}
.flow-a svg{width:15px;height:15px}
.flow-r{list-style:none;margin:0;padding:0}
.st{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,1.8vw,28px);
  padding:clamp(20px,2.2vw,32px) 0;border-bottom:1px solid var(--ln2)}
.st:first-child{padding-top:0}
.st:last-child{border-bottom:0;padding-bottom:0}
.st-n{width:clamp(44px,3.6vw,54px);height:clamp(44px,3.6vw,54px);border-radius:50%;
  background:var(--paper2);border:1px solid var(--ln);display:grid;place-items:center;
  font-family:var(--fd);font-size:14.5px;font-weight:700;letter-spacing:-.02em;
  color:var(--t3);transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease)}
.st:hover .st-n{background:var(--brand);border-color:var(--brand);color:#fff}
.st-b h3{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-family:var(--fd);font-size:clamp(18px,1.45vw,24px);font-weight:700;
  letter-spacing:-.03em;line-height:1.25;color:var(--t1);margin-bottom:10px}
.st-b h3 i{font-style:normal;font-size:12.5px;font-weight:500;letter-spacing:0;
  color:var(--brand);background:rgba(0,100,224,.07);padding:3px 9px;border-radius:6px}
.st-b p{font-size:14.5px;line-height:1.74;color:var(--t2);max-width:54ch}
@media(max-width:980px){.flow{grid-template-columns:1fr;gap:30px}
  .flow-l{position:static}.flow-l .lead{max-width:52ch}}
@media(max-width:520px){.st{grid-template-columns:1fr;gap:12px}
  .st-n{width:40px;height:40px;font-size:13.5px}}

@keyframes svcIn{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ═══ ⑥ 工程案例：分类筛选 + 大图卡（R10 骨架 + R1 数据 + R6 大图）═══ */
#cases{background:var(--ink)}
#cases .h2{color:#fff}
.case-hd{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,48px);flex-wrap:wrap;margin-bottom:clamp(28px,3.2vw,46px)}
.case-hd .lead{color:rgba(255,255,255,.62);margin-top:14px;max-width:44ch}
.case-filters{display:flex;gap:8px;flex-wrap:wrap}
.cf{font-size:13px;line-height:1;padding:9px 16px;border-radius:100px;
  border:1px solid rgba(255,255,255,.22);background:none;color:rgba(255,255,255,.72);
  cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:background-color .24s,border-color .24s,color .24s}
.cf:hover{border-color:rgba(255,255,255,.55);color:#fff}
.cf.on{background:#fff;border-color:#fff;color:var(--ink)}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px)}
.case-card{background:#10151C;border:1px solid rgba(255,255,255,.08);
  border-radius:16px;overflow:hidden;
  transition:border-color .3s,transform .34s var(--ease),box-shadow .36s var(--ease)}
.case-card:hover{transform:translateY(-4px);border-color:rgba(76,147,255,.5);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.9)}
.case-card.hide{display:none}
.case-img{aspect-ratio:16/10;overflow:hidden;background:#0B0F14}
.case-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .85s var(--ease)}
.case-card:hover .case-img img{transform:scale(1.055)}
.case-bd{padding:clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px) clamp(20px,2vw,26px)}
.case-tag{display:inline-block;font-size:12px;line-height:1;padding:5px 10px;
  border-radius:6px;background:rgba(76,147,255,.16);color:var(--brand-l);
  margin-bottom:12px;letter-spacing:.02em}
.case-bd h3{font-family:var(--fd);font-size:clamp(18px,1.4vw,22px);font-weight:700;
  letter-spacing:-.028em;color:#fff;margin-bottom:14px;line-height:1.28}
.case-num{display:flex;align-items:baseline;gap:5px;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:14px}
.case-num b{font-family:var(--fd);font-size:clamp(30px,2.8vw,42px);font-weight:800;
  letter-spacing:-.052em;color:#fff;line-height:1}
.case-num span{font-size:13px;color:rgba(255,255,255,.45)}
.case-num i{margin-left:auto;font-style:normal;font-size:12.5px;
  color:rgba(255,255,255,.5);letter-spacing:.02em}
.case-desc{font-size:13.8px;line-height:1.72;color:rgba(255,255,255,.68)}
.case-note{margin-top:clamp(24px,2.6vw,36px);font-size:12.5px;line-height:1.7;
  color:rgba(255,255,255,.5)}

@media(max-width:1080px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
  .case-grid{grid-template-columns:1fr}
  .case-hd{flex-direction:column;align-items:flex-start}
}
/* ═══ 产品中心（后台读取）═══ */
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.prod{display:block;background:var(--paper);border:1px solid var(--ln2);border-radius:14px;
  overflow:hidden;transition:transform .34s var(--ease),box-shadow .36s var(--ease),border-color .3s}
.prod:hover{transform:translateY(-4px);border-color:var(--brand-l);
  box-shadow:0 22px 44px -26px rgba(10,15,24,.34)}
.prod-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper2)}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod b{display:block;padding:14px 16px 16px;font-family:var(--fd);font-size:14.5px;font-weight:600;
  letter-spacing:-.02em;line-height:1.42;color:var(--t1);transition:color .22s}
.prod:hover b{color:var(--brand)}
.prods-more{display:flex;justify-content:center;margin-top:clamp(26px,3vw,42px)}
@media(max-width:1080px){.prods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ═══ 新闻资讯（后台读取）═══ */
.news{border-top:1px solid var(--ln)}
.news-i{display:grid;grid-template-columns:120px minmax(0,1.1fr) minmax(0,1.6fr);
  gap:clamp(14px,2.4vw,40px);align-items:baseline;
  padding:clamp(20px,2.2vw,30px) 0;border-bottom:1px solid var(--ln2);transition:background-color .24s}
.news-i:hover{background:var(--paper2)}
.news-i time{font-size:13px;color:var(--t3);letter-spacing:.01em}
.news-i b{font-family:var(--fd);font-size:clamp(16px,1.3vw,20px);font-weight:700;
  letter-spacing:-.026em;line-height:1.4;color:var(--t1);transition:color .22s}
.news-i:hover b{color:var(--brand)}
.news-i span{font-size:14px;line-height:1.72;color:var(--t2)}
@media(max-width:820px){
  .news-i{grid-template-columns:1fr;gap:7px}
  .news-i span{display:none}
}


/* ═══ 内页：页头 / 面包屑 / 列表 / 详情 / 留言 ═══ */
.page-hd{background:var(--paper2);border-bottom:1px solid var(--ln);
  padding:clamp(38px,4.4vw,72px) 0 clamp(32px,3.6vw,58px)}
.page-hd .h1{font-size:clamp(30px,4.6vw,62px);color:var(--t1)}
.page-hd .lead{margin-top:16px;max-width:56ch}

.crumbs{padding:18px 0 26px;font-size:13.5px;color:var(--t3)}
.crumbs a{color:var(--t2);transition:color .2s}
.crumbs a:hover{color:var(--brand)}

.grid-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.gl-i{display:block;background:var(--paper);border:1px solid var(--ln2);border-radius:14px;
  overflow:hidden;transition:transform .34s var(--ease),box-shadow .36s var(--ease),border-color .3s}
.gl-i:hover{transform:translateY(-4px);border-color:var(--brand-l);
  box-shadow:0 22px 44px -26px rgba(10,15,24,.34)}
.gl-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper2)}
.gl-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.gl-i:hover .gl-img img{transform:scale(1.05)}
.gl-i b{display:block;padding:14px 16px 6px;font-family:var(--fd);font-size:14.5px;font-weight:600;
  letter-spacing:-.02em;line-height:1.45;color:var(--t1);transition:color .22s}
.gl-i:hover b{color:var(--brand)}
.gl-desc{display:block;padding:0 16px 16px;font-size:13px;line-height:1.68;color:var(--t3)}
@media(max-width:1080px){.grid-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.grid-list{grid-template-columns:repeat(2,minmax(0,1fr))}.gl-desc{display:none}}

.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,3.4vw,52px)}
.pager a,.pager span{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--ln);border-radius:9px;font-size:14px;color:var(--t2);
  transition:border-color .22s,color .22s,background-color .22s}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .on,.pager .current{background:var(--brand);border-color:var(--brand);color:#fff}

.detail{max-width:860px;margin:0 auto}
.detail .h2{margin-bottom:14px}
.detail .meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:var(--t3);
  padding-bottom:22px;border-bottom:1px solid var(--ln2);margin-bottom:clamp(24px,2.8vw,40px)}
.detail .body{font-size:15.5px;line-height:1.9;color:var(--t2)}
.detail .body img{max-width:100%;height:auto;border-radius:12px;margin:clamp(20px,2.4vw,32px) 0}
.detail .body h2,.detail .body h3{font-family:var(--fd);color:var(--t1);letter-spacing:-.026em;
  line-height:1.3;margin:clamp(26px,3vw,42px) 0 14px}
.detail .body h2{font-size:clamp(20px,1.7vw,27px)}
.detail .body h3{font-size:clamp(17px,1.4vw,21px)}
.detail .body p{margin-bottom:1.1em}
.detail .body ul,.detail .body ol{margin:0 0 1.1em 1.3em}
.detail .body li{margin-bottom:.45em}
.detail .body a{color:var(--brand);border-bottom:1px solid rgba(0,100,224,.3)}
.detail .body table{width:100%;border-collapse:collapse;margin-bottom:1.4em;font-size:14px}
.detail .body th,.detail .body td{border:1px solid var(--ln);padding:11px 14px;text-align:left}
.detail .body th{background:var(--paper2);font-weight:600;color:var(--t1)}

.msg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,4vw,76px);align-items:start}
.msg-l .h2{margin-bottom:18px}
.msg-l .lead{margin-bottom:28px;max-width:44ch}
.msg-l .cta-ck{justify-content:flex-start;border-top:0;padding-top:0;gap:12px}
.msg-tel{margin-top:26px;font-size:14px;color:var(--t2)}
.msg-tel a{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--brand);letter-spacing:-.02em}
.msg-r{background:var(--paper2);border:1px solid var(--ln2);border-radius:16px;
  padding:clamp(22px,2.6vw,36px)}
.msg-form{display:flex;flex-direction:column;gap:16px}
.msg-form label{display:flex;flex-direction:column;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--t2)}
.msg-form label em{color:var(--brand);font-style:normal}
.msg-form input,.msg-form textarea{width:100%;padding:12px 14px;border:1px solid var(--ln);
  border-radius:9px;background:var(--paper);font-family:inherit;font-size:14.5px;color:var(--t1);
  transition:border-color .22s,box-shadow .22s;resize:vertical}
.msg-form input:focus,.msg-form textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,100,224,.12)}
.msg-form .btn{margin-top:6px}
@media(max-width:900px){.msg{grid-template-columns:1fr;gap:30px}}

/* 页脚留言表单 */
.ft-form{display:flex;flex-direction:column;gap:9px}
.ft-form input,.ft-form textarea{width:100%;padding:10px 12px;border:1px solid var(--lnw2);
  border-radius:8px;background:rgba(255,255,255,.05);font-family:inherit;font-size:13.5px;
  color:var(--d1);resize:vertical}
.ft-form input::placeholder,.ft-form textarea::placeholder{color:var(--d3)}
.ft-form input:focus,.ft-form textarea:focus{outline:0;border-color:var(--brand-l);
  background:rgba(255,255,255,.09)}
.ft-form .btn{margin-top:3px;align-self:flex-start}

.code-row{display:flex;gap:10px;align-items:stretch}
.code-row input{flex:1;min-width:0}
.code-row img{height:46px;width:auto;border:1px solid var(--ln);border-radius:9px;cursor:pointer;background:var(--paper)}
/* 触控目标：窄屏把业态筛选 chip 撑到 44px（对应 WCAG 2.5.5 / iOS HIG 44pt） */
@media(max-width:880px){ .cf{min-height:44px;display:inline-flex;align-items:center} }/* MOTION-V2-BEGIN */
/* ═══════════════════════════════════════════════════════════════
   动效 v2（2026-09-22）
   参照 jiro.build 的动效体系（Framer Motion 分层入场 / Lenis 惯性滚动 / marquee 走马灯），
   按本站体量用原生 CSS + 原生 API 重写，不引入任何第三方库。
   三条原则：
     ① 不用 filter:blur 做入场 —— 每帧要重绘整块，既是"廉价感"的主要来源，也最费性能；
     ② 层级靠"时长差"而非"幅度差" —— 标题慢而稳、正文快而轻、卡片慢镜；
     ③ 所有动效在 prefers-reduced-motion:reduce 下一律直出。
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. 分层入场：四档（用选择器分层，不需逐处改 HTML）── */
.h1.fx,.h2.fx{transition-duration:.88s}
.h1.fx:not(.in),.h2.fx:not(.in){translate:0 28px}
.lead.fx,.hero-kicker.fx{transition-duration:.6s}
.lead.fx:not(.in),.hero-kicker.fx:not(.in){translate:0 14px}
.stage.fx,.prod.fx,.case-card.fx,.news-i.fx,.why-c.fx{transition-duration:.94s}
.stage.fx:not(.in),.prod.fx:not(.in),.case-card.fx:not(.in),
.news-i.fx:not(.in),.why-c.fx:not(.in){translate:0 22px}
.svc-r.fx,.qi.fx{transition-duration:.56s}
.svc-r.fx:not(.in),.qi.fx:not(.in){translate:0 12px}

/* ── 1b. 入场与 hover 过渡合并 ───────────────────────────────────────────
   这些元素自身带 transition 简写（hover 用），简写里省略 delay=0、
   并把 transition-property 换成 hover 那几项，会连带吃掉 .fx 的 --d 与 opacity 过渡。
   这里用长写属性把两份过渡合成一份：
     前两位 = 入场（opacity / translate，走 --dur 与 --d）
     其余   = hover（transform / box-shadow / 边框色 / 背景，各自时长、无延迟）
   入场走 translate、hover 走 transform，两者互不覆盖。 */
/* STAGGER-MERGE */
.prod.fx,.case-card.fx,.why-c.fx{
  transition-property:opacity,translate,transform,box-shadow,border-color;
  transition-duration:.94s,.94s,.34s,.36s,.3s;
  transition-delay:var(--d,0ms),var(--d,0ms),0s,0s,0s;
  transition-timing-function:var(--ease)}
.news-i.fx{
  transition-property:opacity,translate,background-color;
  transition-duration:.94s,.94s,.24s;
  transition-delay:var(--d,0ms),var(--d,0ms),0s;
  transition-timing-function:var(--ease)}
.btn.fx{
  transition-property:opacity,translate,background-size,background-color,background,border-color,outline-color,transform;
  transition-duration:.72s,.72s,.46s,.22s,.22s,.3s,.3s,.3s;
  transition-delay:var(--d,0ms),var(--d,0ms),0s,0s,0s,0s,0s,0s;
  transition-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){
  .h1.fx:not(.in),.h2.fx:not(.in),.lead.fx:not(.in),.hero-kicker.fx:not(.in),
  .stage.fx:not(.in),.prod.fx:not(.in),.case-card.fx:not(.in),.news-i.fx:not(.in),
  .why-c.fx:not(.in),.svc-r.fx:not(.in),.qi.fx:not(.in),
  .fx{opacity:1;translate:none;transition:none}
}

/* ── 2. 能力走马灯：细带、静音、hover 暂停
      内容由页面上已有的八类系统名生成（JS 读 .svc-te > b），不新增任何对外说法 ── */
.mq{position:relative;overflow:hidden;background:var(--paper);
  border-top:1px solid var(--ln2);border-bottom:1px solid var(--ln2);padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.mq-t{display:flex;width:max-content;animation:mqRun 46s linear infinite;will-change:transform}
.mq:hover .mq-t{animation-play-state:paused}
.mq-g{display:flex;align-items:center}
.mq-g span{font-size:var(--lbl);letter-spacing:.1em;color:var(--t3);white-space:nowrap;padding:0 24px}
.mq-g i{width:4px;height:4px;border-radius:50%;background:var(--t4);opacity:.55;flex:none}
@keyframes mqRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .mq-t{animation:none}
  .mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ── 3. 顶栏滚动进度：2px 品牌色，只用 transform，不触发布局 ── */
.nav-p{position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--brand-l));
  transform:scaleX(0);transform-origin:0 50%;opacity:0;will-change:transform}

/* ── 4. 按钮：hover 底色由左滑入 + 按下回弹（主按钮）── */
.btn--pri,.btn--pri:hover{background-color:var(--brand);
  background-image:linear-gradient(90deg,var(--brand-d),var(--brand-d));
  background-repeat:no-repeat;background-position:0 0}
.btn--pri{background-size:0% 100%;
  transition:background-size .46s var(--ease),background-color .22s var(--ease),
    outline-color .3s,transform .3s var(--ease)}
.btn--pri:hover{background-size:100% 100%;background-color:var(--brand-d)}
.btn:active{transform:scale(.975)}

/* ── 5. 服务区域格子：hover 底部品牌短线展开（不动版式，避免网格缝隙错位）── */
.city{position:relative}
.city::after{content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;
  background:var(--brand);transform:translateX(-50%);
  transition:width .36s var(--ease)}
.city:hover::after{width:28px}

/* ── 6. 惯性滚动开启时关掉 CSS 平滑，避免两层缓动叠加成"拖沓" ── */
html.ms-on{scroll-behavior:auto}