/* 湖南润丰广告有限公司 主题样式
   视觉语言：科技/创意公司 —— 无衬线粗体、锐利直角、冷底、高饱和科技橙、网格与斜切元素、 HUD 细线。
   与喜座（宋体/圆角/米黄/酒红的中式餐饮语言）刻意拉开差异。
   类名与布局同 xizuo.css 保持一致，新增客户只需换配色与字体，模板零改动。

   2026-10-12 调性改版（待办清单「二、润丰前台配色调性」）：
   主色仍是橙，不改成蓝（蓝是润丰竞品的通用色，且换了蓝就等于丢了品牌资产）。
   "科技"从三处来：① 主色本身抽干蓝通道、更纯更电；② 中性色转冷（近黑偏蓝、冷灰底）；
   ③ 冷色细线做点缀（见文件末尾 §六 层）。逐键理由写在下面的注释里。 */
:root{
  --xz-red:#FA5A12;              /* 品牌主色：科技橙。旧值 #FF5A1F 色相 14°、蓝通道还留 31，压在小面积描边上偏"番茄红/促销"；
                                    新值把蓝通道抽到 18、色相推到 16.5°，同亮度下更纯更电。
                                    对白底对比 3.22:1（旧值 3.13:1），SkinCssValidator 的白底品牌色 ≥3:1 硬门槛仍有余量，
                                    所以按钮白字、白底橙字这两条既有用法都不会被 SkinPalette 自动加深打回。 */
  --xz-red-deep:#DE4108;         /* 主色-深：hover 底、渐变末端。白底 4.32:1，比主色更适合当描边文字色 */
  --xz-gold:#FFB020;             /* 强调色：旧值 #FFC53D 是"明黄"，暖到接近餐饮；收成电光琥珀（饱和度↑、蓝通道↓），和科技橙同族 */
  --xz-gold-light:#FFD37A;
  --xz-ink:#0D1220;              /* 近黑：从 #12161F 再冷一档（蓝通道 31→32、明度更低），冷底才压得住高饱和橙，暖黑会把橙糊成印刷品 */
  --xz-ink-soft:#5A6779;         /* 次级正文：对 --xz-bg 5.0:1，正文 4.5:1 达标 */
  --xz-cream:#E9EEF7;            /* 冷灰，替代米黄 */
  --xz-bg:#F5F7FB;
  --xz-line:rgba(13,18,32,.10);
  --xz-shadow:0 10px 30px rgba(13,18,32,.10);
}
/* Header */
.xz-header{
  position:sticky;top:0;z-index:1000;
  background:#FFFFFF;
  border-bottom:1px solid rgba(13,18,32,.08);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",Helvetica,Arial,sans-serif;
}
.xz-header-inner{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;height:76px;
}
.xz-logo{display:flex;flex-direction:column;text-decoration:none;color:var(--xz-ink);line-height:1;}
.xz-logo-text{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  font-size:24px;font-weight:800;color:var(--xz-ink);letter-spacing:1px;
}
.xz-logo-text::after{
  content:"";display:block;width:34px;height:4px;background:var(--xz-red);margin-top:6px;
}
.xz-logo-en{
  font-size:9px;letter-spacing:2px;color:var(--xz-ink-soft);
  margin-top:6px;text-transform:uppercase;font-weight:600;
}
/* 客户上传的 logo 尺寸不可控（PPT 里抽出来的原图很大），
   必须约束显示尺寸，否则会撑爆页头。宽高比由图片自身决定，等比缩放不变形。 */
.xz-logo-img{
  display:block;height:46px;width:auto;max-width:220px;object-fit:contain;
}
.xz-nav{display:flex;align-items:center;gap:30px;}
.xz-nav a{
  color:var(--xz-ink);text-decoration:none;font-size:15px;font-weight:500;
  letter-spacing:.5px;transition:.2s;position:relative;padding:4px 0;
}
.xz-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:3px;
  background:var(--xz-red);transition:.25s;
}
.xz-nav a:hover{color:var(--xz-red);}
.xz-nav a:hover::after{width:100%;}
.xz-header-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 22px;background:var(--xz-red);border:1px solid var(--xz-red);border-radius:3px;
  color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:.25s;
  letter-spacing:.5px;
}
.xz-header-btn:hover{background:var(--xz-red-deep);border-color:var(--xz-red-deep);transform:translateY(-1px);}
.xz-menu-toggle{
  display:none;flex-direction:column;gap:5px;padding:8px;
  background:transparent;border:0;cursor:pointer;
}
.xz-menu-toggle span{display:block;width:24px;height:2px;background:var(--xz-ink);}

.xz-wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
.xz-section{padding:72px 0;}
.xz-section h2.xz-title{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  text-align:center;color:var(--xz-ink);font-size:32px;font-weight:800;margin:0 0 10px;letter-spacing:1px;
}
.xz-section .xz-sub{
  text-align:center;color:var(--xz-red);letter-spacing:3px;font-size:13px;font-weight:700;
  margin-bottom:40px;text-transform:uppercase;
}
.xz-section .xz-sub::after{
  content:"";display:block;width:48px;height:3px;background:var(--xz-gold);margin:14px auto 0;
}
.xz-btn{
  display:inline-block;padding:13px 32px;border-radius:3px;font-size:16px;font-weight:700;letter-spacing:.5px;
  text-decoration:none;transition:.25s;cursor:pointer;border:1px solid transparent;
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
}
.xz-btn-primary{background:var(--xz-red);color:#fff;box-shadow:0 8px 22px rgba(250,90,18,.28);}
.xz-btn-primary:hover{background:var(--xz-red-deep);transform:translateY(-2px);box-shadow:0 14px 34px rgba(250,90,18,.36);}
.xz-btn-ghost{background:transparent;border-color:var(--xz-ink);color:var(--xz-ink);}
.xz-btn-ghost:hover{background:var(--xz-ink);color:#fff;}

/* Hero：深色底 + 斜切光带 + 网格点，突出创意冲击力 */
.xz-hero{
  background:
    linear-gradient(115deg,rgba(250,90,18,.16) 0%,rgba(250,90,18,0) 42%),
    linear-gradient(180deg,#0E1119 0%,#171C27 100%);
  color:#fff;overflow:hidden;position:relative;
}
.xz-hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;
}
.xz-hero .xz-hero-inner{
  max-width:1200px;margin:0 auto;padding:96px 20px 104px;
  display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;position:relative;z-index:2;
}
.xz-hero-text{position:relative;z-index:2;}
.xz-hero-tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:3px;color:#0E1119;
  background:var(--xz-gold);padding:6px 14px;margin-bottom:24px;
}
.xz-hero h1{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  font-size:52px;line-height:1.18;letter-spacing:1px;margin:0 0 22px;font-weight:800;
}
.xz-hero h1 em{font-style:normal;color:var(--xz-red);}
.xz-hero-text > p{
  font-size:17px;color:#B9C1D0;line-height:1.9;margin:0 0 34px;letter-spacing:.5px;
}
.xz-hero .xz-hero-btns{display:flex;gap:14px;}
.xz-hero .xz-hero-btns a{margin:0;}
.xz-hero-media{position:relative;z-index:2;}
.xz-hero-media img{
  width:100%;height:auto;border-radius:3px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.xz-hero-media::after{
  content:"";position:absolute;left:-14px;bottom:-14px;width:72px;height:72px;
  background:var(--xz-red);z-index:-1;
}

/* Stats */
.xz-stats{background:#0E1119;color:#fff;}
.xz-stats .xz-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.xz-stat .num{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  font-size:40px;color:var(--xz-red);font-weight:800;letter-spacing:-.5px;
}
.xz-stat .lab{margin-top:8px;color:#9AA3B4;letter-spacing:1px;font-size:14px;}

/* Promise —— 一行 2 列，大气舒展 */
.xz-promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.xz-promise{
  padding:30px 26px;border:1px solid var(--xz-line);border-radius:4px;background:#fff;
  text-align:left;transition:.25s;position:relative;overflow:hidden;
}
.xz-promise::before{
  content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--xz-red);
}
.xz-promise:hover{transform:translateY(-4px);box-shadow:var(--xz-shadow);border-color:rgba(250,90,18,.4);}
.xz-promise .ico{
  font-size:13px;font-weight:800;color:var(--xz-red);letter-spacing:2px;
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
}
.xz-promise h3{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--xz-ink);margin:12px 0 10px;font-size:19px;font-weight:700;
}
.xz-promise p{color:var(--xz-ink-soft);line-height:1.85;font-size:14.5px;}

/* Scenes —— 一行 3 列，大气舒展。窄屏降 2 列。 */
.xz-scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.xz-scene{
  position:relative;padding:28px 20px;border-radius:4px;background:#fff;text-align:left;
  border:1px solid var(--xz-line);transition:.25s;overflow:hidden;
}
.xz-scene:hover{border-color:var(--xz-red);background:var(--xz-cream);}
.xz-scene .ico{font-size:12px;font-weight:800;letter-spacing:2px;}
.xz-scene h4{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--xz-ink);margin:12px 0 8px;font-size:15px;font-weight:700;line-height:1.45;
}
.xz-scene p{color:var(--xz-ink-soft);font-size:12.5px;line-height:1.7;}
/* 降档顺序：6 列（≥1025）→ 3 列（901~1024）→ 2 列（≤900，见下方窄屏块）。
   写成 3→2 而不是 auto-fit，是为了永远不出现 3+1 那种落单的第四张卡。 */
@media (max-width:767px){
  .xz-scene-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}

/* 服务/产品卡片 */
.xz-dish-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.xz-dish{background:#fff;border:1px solid var(--xz-line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:.25s;}
.xz-dish:hover{transform:translateY(-5px);box-shadow:var(--xz-shadow);border-color:rgba(250,90,18,.35);}
.xz-dish .xz-dish-pic{
  height:120px;background:linear-gradient(120deg,var(--xz-red),var(--xz-red-deep) 60%,#0E1119);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  font-size:22px;font-weight:800;letter-spacing:1px;
}
.xz-dish .xz-dish-body{padding:18px 20px;flex:1;display:flex;flex-direction:column;}
.xz-dish .xz-dish-name{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  font-size:18px;font-weight:700;color:var(--xz-ink);margin-bottom:8px;
}
.xz-dish .xz-dish-desc{color:var(--xz-ink-soft);font-size:13px;line-height:1.75;flex:1;}
.xz-dish .xz-dish-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;}
.xz-dish .xz-price{color:var(--xz-red);font-weight:800;font-size:18px;}
.xz-dish .xz-price small{font-size:12px;color:var(--xz-ink-soft);font-weight:400;}

/* 服务详情 */
.xz-dish-detail{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;margin-top:6px;}
/* 图容器：名称卡铺底，成品图绝对定位盖在上面。图缺失或被浏览器判失败藏掉时，
   露出来的是品牌色卡而不是原来那块 380px 的空底。 */
.xz-dish-detail-pic{position:relative;height:380px;border-radius:4px;overflow:hidden;background:var(--xz-cream);box-shadow:var(--xz-shadow);}
.xz-dish-detail-pic .xz-dish-pic{position:absolute;inset:0;height:auto;font-size:26px;}
.xz-dish-detail-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.xz-dish-detail-info{padding-top:6px;}
.xz-dish-detail-info .xz-dish-name{font-size:28px;font-weight:800;text-align:left;margin:0 0 12px;}
.xz-dish-lead{
  color:var(--xz-ink-soft);font-size:15px;line-height:1.8;margin:-4px 0 16px;
  padding-left:12px;border-left:3px solid var(--rf-tech,#2FB8FF);
}
.xz-dish-price{color:var(--xz-red);font-weight:800;font-size:26px;margin-bottom:18px;}
.xz-dish-price small{font-size:14px;color:var(--xz-ink-soft);font-weight:400;}
.xz-dish-rich{font-size:15px;line-height:1.95;color:var(--xz-ink-soft);}
.xz-dish-rich img{max-width:100%;border-radius:4px;margin:10px 0;}
.xz-dish-actions{display:flex;gap:14px;margin-top:24px;}

/* Cases */
.xz-case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.xz-case{
  background:#fff;border-radius:4px;padding:22px;border:1px solid var(--xz-line);
  transition:.25s;position:relative;
}
.xz-case::before{content:"";position:absolute;left:0;top:0;width:0;height:3px;background:var(--xz-red);transition:.3s;}
.xz-case:hover{transform:translateY(-4px);box-shadow:var(--xz-shadow);}
.xz-case:hover::before{width:100%;}
.xz-case h4{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--xz-ink);font-size:16px;font-weight:700;margin:0 0 10px;line-height:1.5;
}
.xz-case p{color:var(--xz-ink-soft);font-size:13px;line-height:1.75;}

/* News */
.xz-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.xz-news{background:#fff;border:1px solid var(--xz-line);border-radius:4px;padding:22px;transition:.25s;}
.xz-news:hover{transform:translateY(-4px);box-shadow:var(--xz-shadow);border-color:rgba(250,90,18,.3);}
.xz-news h4{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--xz-ink);font-size:16px;font-weight:700;margin:0 0 10px;line-height:1.55;
}
.xz-news p{color:var(--xz-ink-soft);font-size:13px;line-height:1.75;}

/* CTA band */
.xz-cta{
  background:linear-gradient(120deg,var(--xz-red) 0%,var(--xz-red-deep) 100%);
  color:#fff;text-align:center;padding:60px 20px;position:relative;overflow:hidden;
}
.xz-cta::after{
  content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;
  border:26px solid rgba(255,255,255,.10);transform:rotate(45deg);
}
.xz-cta h2{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  font-size:28px;font-weight:800;margin:0 0 12px;letter-spacing:1px;position:relative;z-index:2;
}
.xz-cta p{color:rgba(255,255,255,.9);margin:0 0 26px;font-size:16px;position:relative;z-index:2;}
.xz-cta .xz-tel{font-size:26px;font-weight:800;color:#fff;margin:0 14px;position:relative;z-index:2;}

/* FAQ —— 大气舒展，间距加大 */
.xz-faq-list{max-width:860px;margin:0 auto;display:grid;gap:20px;}
.xz-faq-item{
  background:#fff;border:1px solid var(--xz-line);border-left:3px solid var(--xz-red);
  border-radius:3px;padding:24px 28px;
}
.xz-faq-item h4{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--xz-ink);font-size:17px;font-weight:700;margin:0 0 12px;
}
.xz-faq-item p{color:var(--xz-ink-soft);font-size:15px;line-height:1.9;margin:0;}

/* Inner page hero：冷色渐变 + 网格，体现"创意/制作"属性 */
.xz-inner-hero{
  position:relative;padding:88px 0;color:#fff;overflow:hidden;
  background:
    linear-gradient(115deg,rgba(250,90,18,.20) 0%,rgba(250,90,18,0) 46%),
    linear-gradient(160deg,#0E1119 0%,#1B2230 58%,#2A3446 100%);
}
.xz-inner-hero::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:30px 30px;opacity:.7;
}
.xz-inner-hero .xz-wrap{position:relative;z-index:2;}
.xz-inner-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;}
.xz-inner-hero-text{text-align:left;}
.xz-inner-hero-text .xz-seal,
.xz-inner-hero .xz-seal{
  display:inline-block;background:var(--xz-red);color:#fff;padding:6px 14px;
  border-radius:2px;letter-spacing:2px;font-size:12px;font-weight:700;margin-bottom:18px;
}
.xz-inner-hero-text h1,
.xz-inner-hero h1{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  font-size:40px;font-weight:800;margin:0 0 16px;letter-spacing:1px;line-height:1.25;
}
.xz-inner-hero-text p,
.xz-inner-hero > .xz-wrap > p{font-size:16px;color:#B9C1D0;line-height:1.85;max-width:520px;margin:0;}
.xz-inner-hero-media{position:relative;border-radius:3px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4);}
.xz-inner-hero-media img{width:100%;height:360px;object-fit:cover;display:block;}
@media (max-width:900px){
  .xz-inner-hero-grid{grid-template-columns:1fr;gap:28px;text-align:center;}
  .xz-inner-hero-text{text-align:center;}
  .xz-inner-hero-text p{max-width:none;}
  .xz-inner-hero-text h1,
  .xz-inner-hero h1{font-size:30px;}
  .xz-inner-hero-media img{height:220px;}
}

/* Breadcrumb */
.xz-crumbs{padding:18px 0;color:var(--xz-ink-soft);font-size:14px;}
.xz-crumbs a{color:var(--xz-ink-soft);text-decoration:none;}
.xz-crumbs a:hover{color:var(--xz-red);}
.xz-crumbs span{margin:0 8px;color:var(--xz-gold);}
.xz-crumbs b{color:var(--xz-ink);font-weight:700;}

/* Article */
.xz-article-body{max-width:820px;margin:0 auto;}
.xz-article-title{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--xz-ink);font-size:30px;font-weight:800;text-align:center;margin:0 0 10px;line-height:1.45;
}
.xz-article-sub{text-align:center;color:var(--xz-red);font-size:15px;margin:0 0 14px;font-weight:700;}
.xz-article-meta{text-align:center;color:var(--xz-ink-soft);font-size:13px;margin-bottom:26px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.xz-article-content{font-size:16px;line-height:2;color:var(--xz-ink);}
.xz-article-content img{max-width:100%;height:auto;border-radius:4px;margin:14px 0;}
.xz-article-content p{margin:0 0 16px;}
.xz-article-nav{display:flex;flex-direction:column;gap:10px;margin:34px 0;padding:20px;background:var(--xz-cream);border-radius:3px;font-size:14px;}
.xz-article-nav span{color:var(--xz-red);margin-right:8px;font-weight:700;}
.xz-article-nav a{color:var(--xz-ink);text-decoration:none;}
.xz-article-nav a:hover{color:var(--xz-red);}
.xz-article-back{text-align:center;margin-top:10px;}

/* About */
.xz-about{max-width:880px;margin:0 auto;}
.xz-about-block{margin-bottom:36px;}
.xz-about-block h3{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--xz-ink);font-size:21px;font-weight:800;margin:0 0 16px;padding-left:12px;
  border-left:4px solid var(--xz-red);
}
.xz-about-rich{font-size:15px;line-height:2;color:var(--xz-ink-soft);}
.xz-about-rich img{max-width:100%;border-radius:4px;margin:12px 0;}

/* Contact */
.xz-contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:36px;}
.xz-contact-card{background:#fff;border:1px solid var(--xz-line);border-radius:4px;padding:26px 22px;text-align:left;}
.xz-contact-card h4{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--xz-ink);font-size:17px;font-weight:700;margin:0 0 12px;
}
.xz-contact-card p{color:var(--xz-ink-soft);font-size:14px;line-height:1.85;}
.xz-contact-card a{color:var(--xz-red);text-decoration:none;font-weight:800;font-size:18px;}
.xz-contact-cta{text-align:center;}

/* 内页图片卡片 */
.xz-dish-img{height:180px;overflow:hidden;background:var(--xz-cream);}
.xz-dish-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s;}
.xz-dish:hover .xz-dish-img img{transform:scale(1.06);}
.xz-case-card{background:#fff;border-radius:4px;overflow:hidden;border:1px solid var(--xz-line);transition:.25s;display:flex;flex-direction:column;}
.xz-case-card:hover{transform:translateY(-4px);box-shadow:var(--xz-shadow);}
.xz-case-img{height:170px;overflow:hidden;background:var(--xz-cream);}
.xz-case-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s;}
.xz-case-card:hover .xz-case-img img{transform:scale(1.06);}
.xz-case-body{padding:18px 20px;}
.xz-news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--xz-line);border-radius:4px;overflow:hidden;transition:.25s;text-decoration:none;color:inherit;}
.xz-news-card:hover{transform:translateY(-4px);box-shadow:var(--xz-shadow);}
.xz-news-body{padding:18px 20px;}
.xz-news-body h4{
  font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--xz-ink);font-size:16px;font-weight:700;margin:0 0 10px;line-height:1.55;
}
.xz-news-body p{color:var(--xz-ink-soft);font-size:13px;line-height:1.75;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.xz-news-date{color:var(--xz-red);font-size:12px;font-weight:700;}
.xz-news-img{height:170px;overflow:hidden;background:var(--xz-cream);}
.xz-news-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s;}
.xz-news-card:hover .xz-news-img img{transform:scale(1.06);}

/* ---- 列表卡片两变体（用户要求：有图/无图两种布局，但不留空白块）----
   无图条目不再输出 .xz-news-img 容器（原来是个 170px 的灰色空洞），
   改成"品牌色顶线 + 日期徽标 + 放大一档的标题"，高度靠 grid 拉伸与有图卡对齐。 */
.xz-news-grid{align-items:stretch;}
.xz-news-card .xz-news-body{flex:1;display:flex;flex-direction:column;}
.xz-news-card .xz-news-date{margin-top:auto;}
.xz-news-card.has-img .xz-news-img{background:linear-gradient(135deg,#1B2130,#0D1220);}
.xz-news-card.no-img{border-top:2px solid var(--xz-red);}
.xz-news-ribbon{display:flex;align-items:center;gap:10px;padding:14px 20px 0;}
.xz-news-ribbon span{font-size:12px;font-weight:800;letter-spacing:1px;color:var(--xz-red);}
.xz-news-ribbon::before{content:"";width:26px;height:2px;background:var(--xz-gold);}
.xz-news-card.no-img .xz-news-body{padding:12px 20px 20px;}
.xz-news-card.no-img .xz-news-body h4{font-size:18px;}
.xz-news-card.no-img .xz-news-body p{-webkit-line-clamp:4;font-size:13.5px;}

/* ---- 服务端分页控件（无 JS，爬虫可达）----
   唯一组件：Pages/Shared/_Pager.cshtml，润丰与喜座两套皮肤同结构、同色位，只有圆角按各自调性不同。
   配色全部走 AI 换肤白名单里的 10 个 --xz-* 槽位（见 Services/SkinCssValidator.cs），
   后台换主题色时分页自动跟随；文字只用 --xz-ink / --xz-ink-soft，
   两者对底已被校验器硬性要求 ≥4.5:1，所以不再有"品牌色当文字"的对比度陷阱。
   当前页用 --xz-ink 实心底 + 白字：品牌色不论深浅（润丰亮橙 3.21:1 / 喜座酒红）都不会翻车。 */
.xz-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:34px;}
.xz-pg{
  min-width:38px;height:38px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--xz-line);border-radius:4px;background:#fff;color:var(--xz-ink);
  font-size:14px;text-decoration:none;transition:.2s;
}
.xz-pg:hover{border-color:var(--xz-red);background:var(--xz-cream);color:var(--xz-red-deep);transform:translateY(-2px);}
.xz-pg.is-on{background:var(--xz-ink);border-color:var(--xz-ink);color:#fff;font-weight:700;}
.xz-pg.is-off{color:var(--xz-ink-soft);background:transparent;pointer-events:none;}
.xz-pg-gap{padding:0 2px;color:var(--xz-ink-soft);}
.xz-pg-total{margin-left:10px;font-size:13px;color:var(--xz-ink-soft);}
.xz-pg-cur{display:none;}

@media (max-width:900px){
  .xz-header-inner{height:64px;}
  .xz-logo-text{font-size:20px;}
  .xz-logo-img{height:38px;max-width:170px;}
  .xz-logo-en{font-size:8px;}
  .xz-nav{
    position:absolute;top:64px;left:0;right:0;
    background:#FFFFFF;flex-direction:column;gap:0;padding:10px 20px 20px;
    border-bottom:1px solid rgba(13,18,32,.10);
    display:none;
  }
  .xz-nav.open{display:flex;}
  .xz-nav a{padding:12px 0;width:100%;border-bottom:1px solid rgba(13,18,32,.07);}
  .xz-header-btn{display:none;}
  .xz-menu-toggle{display:flex;}
  .xz-hero .xz-hero-inner{grid-template-columns:1fr;padding:60px 20px 70px;gap:34px;}
  .xz-hero h1{font-size:32px;}
  .xz-hero .xz-hero-btns{flex-direction:column;gap:12px;}
  .xz-stats .xz-stats-grid{grid-template-columns:repeat(2,1fr);}
  .xz-promise-grid{grid-template-columns:1fr;}
  .xz-scene-grid{grid-template-columns:repeat(2,1fr);}
  .xz-dish-grid{grid-template-columns:repeat(2,1fr);}
  .xz-case-grid{grid-template-columns:repeat(2,1fr);}
  .xz-news-grid{grid-template-columns:1fr;}
  /* 窄屏分页折叠：只显示"上一页/下一页 + 第 x/y 页"，避免数字换行挤成三行 */
  .xz-pg-num,.xz-pg-gap,.xz-pg-total{display:none;}
  .xz-pg-cur{display:inline-flex;margin-left:10px;font-size:13px;color:var(--xz-ink-soft);}
  .xz-contact-grid{grid-template-columns:repeat(2,1fr);}
  .xz-dish-detail{grid-template-columns:1fr;}
  .xz-dish-detail-pic{height:260px;}
}

/* ===== 通用栏目页（Down/Partner/Recruitment/Talent/Merchants/Certificate/PicList/Service/View）=====
   新增客户时只需灌数据，此处样式无需改动 */
.xz-hero-sm .xz-hero-inner{min-height:320px;}
.xz-hero-sm h1{font-size:34px;}
.xz-wrap-narrow{max-width:820px;}
.xz-rich{font-size:15px;line-height:2;color:#4a5160;}
.xz-rich img{max-width:100%;height:auto;border-radius:4px;}
.xz-rich h2{margin:24px 0 12px;font-size:20px;color:var(--xz-ink);}
.xz-rich h3{margin:18px 0 10px;font-size:17px;color:var(--xz-ink);}
.xz-rich p{margin:10px 0;}
.xz-rich ul,.xz-rich ol{margin:10px 0 10px 22px;}

.xz-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.xz-list-card{
  display:block;background:#fff;border-radius:4px;overflow:hidden;text-decoration:none;
  border:1px solid var(--xz-line);transition:transform .25s ease,box-shadow .25s ease;
}
.xz-list-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(13,18,32,.12);}
.xz-list-img{height:170px;overflow:hidden;background:var(--xz-cream);}
.xz-list-img img{width:100%;height:100%;object-fit:cover;display:block;}
.xz-list-body{padding:16px 18px 20px;}
.xz-list-body h4{margin:0 0 8px;font-size:16px;color:var(--xz-ink);font-weight:700;}
.xz-list-body p{margin:0;font-size:13px;color:var(--xz-ink-soft);line-height:1.75;}
.xz-list-file{margin-top:10px;font-size:12px;color:var(--xz-red);font-weight:700;}
.xz-empty{text-align:center;color:#bfbfbf;padding:48px 0;font-size:14px;}

.xz-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;}
.xz-video-card{display:block;text-decoration:none;background:#fff;border-radius:4px;overflow:hidden;border:1px solid var(--xz-line);}
.xz-video-thumb{position:relative;height:170px;background:#0E1119;}
.xz-video-thumb img{width:100%;height:100%;object-fit:cover;opacity:.85;}
.xz-video-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--xz-red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.xz-video-card h4{margin:0;padding:14px 16px;font-size:15px;color:var(--xz-ink);font-weight:700;}

.xz-form{margin-top:24px;}
.xz-form-row{margin-bottom:16px;}
.xz-form-row label{display:block;margin-bottom:6px;font-size:13px;color:#4a5160;}
.xz-form-row label em{color:var(--xz-red);font-style:normal;}
.xz-form-row input,.xz-form-row textarea{
  width:100%;padding:10px 12px;border:1px solid #d9dee5;border-radius:3px;
  font-size:14px;box-sizing:border-box;font-family:inherit;
}
.xz-form-row input:focus,.xz-form-row textarea:focus{outline:none;border-color:var(--xz-red);}
.xz-form-row textarea{min-height:130px;resize:vertical;}
.xz-form-msg{margin-top:16px;padding:10px 14px;border-radius:3px;background:#fff4f0;border:1px solid #ffbb9e;color:#c2410c;font-size:14px;}

@media (max-width:900px){
  .xz-list-grid,.xz-video-grid{grid-template-columns:1fr;}
}

/* ============================================================
   科技感增强（橙黑毛玻璃）
   设计原则：全部走 --xz-* 变量与中性深色 rgba(13,18,32)，
   不被具体品牌色写死 —— AI 皮肤更换主题色时，橙色高亮(var(--xz-red))自动跟随。
   ============================================================ */
@media (min-width: 901px) {
  .xz-header{
    background: rgba(13,18,32,.86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 30px rgba(0,0,0,.28);
  }
  .xz-logo-text{ color:#fff; }
  .xz-logo-text::after{ background: var(--xz-red); }
  .xz-logo-en{ color: rgba(255,255,255,.55); }
  .xz-nav a{ color: rgba(255,255,255,.82); }
  .xz-nav a:hover, .xz-nav a.active{ color:#fff; }
  .xz-nav a.active::after, .xz-nav a:hover::after{ width:100%; }
  .xz-menu-toggle span{ background:#fff; }
  /* 选择器多带一层 .xz-header：_Layout.cshtml 的内联 <style> 在链接之后加载，
     同为单类选择器时它会赢（结果白色面板压在深色毛玻璃页眉上，很突兀）。
     这里提高到 0,2,0 让站点皮肤色真正生效，皮肤换色时面板也跟着 var 走。 */
  .xz-header .xz-subnav{
    background: rgba(13,18,32,.94);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 40px rgba(0,0,0,.40);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
  }
  /* 科技蓝透明 hover：由左到右渐渐铺满。
     上一版是 @keyframes sweep 的"一道光扫过"（background-position 位移），一闪即逝，已判为丑并删除。
     这版把渐变常驻在 a 上、用 background-size 宽度 0%→100% 展开：
       · 不用伪元素 —— 全站还挂着一份跨域的老 CDN 样式表（at.alicdn.com/t/font_1147623…），
         它给 a::before 写了 border-radius:50%，任何 ::before 方案都会被它盖成椭圆（实测 computed=50%），
         而跨域样式表读不到 cssRules，只能从根上不与其争抢；
       · 不用 transform:scaleX —— 会把渐变一起压扁，铺到一半深浅失真；
       · background-repeat:no-repeat 保证展开过程中右侧不会平铺出第二份光。
     配色仍是登录页那套科技蓝（47,184,255），透明度沿用 .10 → .28。 */
  .xz-header .xz-subnav a{
    color: rgba(255,255,255,.85);
    background-image:linear-gradient(90deg, rgba(47,184,255,.10), rgba(47,184,255,.28));
    background-repeat:no-repeat;
    background-position:left center;
    background-size:0% 100%;
    transition:background-size .3s ease-out;
  }
  /* 顶掉 _Layout 内联样式的 #f6f6f6 浅灰底（深色面板上留一块白灰斑很突兀）。
     background-image / repeat 必须在这里再写一遍：那条内联规则用的是 background 简写，
     同为 0,2,1 且加载在后，会把上面 base 的渐变复位成 none、把 no-repeat 复位成 repeat
     （两者都是实测踩到的：复位成 repeat 后，展开过程中渐变会在半宽处平铺出第二份光）。 */
  .xz-header .xz-subnav a:hover, .xz-header .xz-subnav a.active{
    color:#fff;
    background-color:transparent;
    background-image:linear-gradient(90deg, rgba(47,184,255,.10), rgba(47,184,255,.28));
    background-repeat:no-repeat;
    background-position:left center;
    background-size:100% 100%;
  }
  /* prefers-reduced-motion 全局关闭动效，过渡时长归零后 hover 仍可见 */
  /* 子面板里的项不吃主导航的下划线（.xz-nav a 会连带选中二级项，深色面板上很乱） */
  .xz-header .xz-nav .xz-subnav a::after{ display:none; }
}

/* 导航防溢出：项内不换行，整体允许折行兜底（多站点栏目数量不一时也不崩） */
.xz-nav{ flex-wrap: wrap; }
.xz-nav a{ white-space: nowrap; }
.xz-nav-item{ white-space: nowrap; }

/* 页脚：深色科技网格背景 + 高对比浅色文字 + 橙色点缀 */
.v-foot{ background:#0E1119; color: rgba(255,255,255,.85); }
.footer-big, .footer-big-eee{ background: transparent; }
.footer-big-back{
  padding: 56px 0 42px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
    #0E1119;
}
.footerNav a{ color: rgba(255,255,255,.82); text-decoration:none; transition: .2s; }
.footerNav a:hover{ color: var(--xz-red); }
.footerNav .TitleP{ margin-bottom: 10px; }
.footerNav .TitleP dt a{ color:#fff; font-weight:800; font-size: 15px; letter-spacing: .5px; }
.footerNav .TitleP dt a:hover{ color: var(--xz-red); }
.footerNav li, .footerMap li{ color: rgba(255,255,255,.78); font-size:14px; line-height:1.95; }
.footerMap .TitleP dt a{ color:#fff; font-weight:800; font-size:15px; letter-spacing:.5px; }
.footerMap a{ color: rgba(255,255,255,.82); text-decoration:none; }
.footerMap a:hover{ color: var(--xz-red); }
.new-foot{ background: #0A0D13; color: rgba(255,255,255,.75); border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; font-size:13px; }
.new-foot a, .new-foot span{ color: rgba(255,255,255,.75); }
.new-foot a:hover{ color: var(--xz-red); }

/* 移动端：头部与下拉导航同样转深色，保持科技调性统一 */
@media (max-width: 900px) {
  .xz-header{ background: rgba(13,18,32,.96); }
  .xz-logo-text{ color:#fff; }
  .xz-logo-en{ color: rgba(255,255,255,.55); }
  .xz-menu-toggle span{ background:#fff; }
  .xz-nav{
    background:#141925;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .xz-nav a{ color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.07); }
  .xz-nav a:hover, .xz-nav a.active{ color:#fff; }
  /* 移动端导航是常驻展开的深色抽屉：二级面板跟着转深色，别留一块白底 */
  .xz-header .xz-subnav{ background: rgba(255,255,255,.05); border-radius: 6px; }
  .xz-header .xz-nav .xz-subnav a{ color: rgba(255,255,255,.92); border-bottom: 0; position: relative; padding-left: 22px; }
  .xz-header .xz-nav .xz-subnav a:hover, .xz-header .xz-nav .xz-subnav a.active{ color:#fff; background: rgba(250,90,18,.14); }
  /* 移动端子菜单 hover/active 定位指示器：左侧橙色竖条 */
  .xz-header .xz-nav .xz-subnav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: #fa5a12;
    border-radius: 2px;
    transition: height 0.2s ease;
  }
  .xz-header .xz-nav .xz-subnav a:hover::before,
  .xz-header .xz-nav .xz-subnav a.active::before {
    height: 60%;
  }
  /* 移动端智能展开：默认隐藏所有二级菜单，只有带 is-open 类的父项才展开 */
  .xz-nav-item > .xz-subnav { display: none !important; }
  .xz-nav-item.is-open > .xz-subnav { display: block !important; }
}

/* 锚点平滑定位：避免被吸顶导航遮挡（GEO 子菜单 #intro/#history/#factory 落点） */
#intro, #history, #factory, #honor, #brand { scroll-margin-top: 96px; }

/* ============================================================
   §五 前台升级层（AI 科技感 · 细节层）2026-10-12
   原则：① 只加装饰与状态类，不改 DOM 结构（SEO/GEO 语义零动）；
         ② 一切"初始隐藏/位移"都必须挂在 html.xz-fx 下 —— 该类由 runfeng-fx.js
            在脚本启动时添加，禁用 JS 或 prefers-reduced-motion 时永远不加，
            所以内容不可能因为动效而消失（验收项 5.5-2）；
         ③ 尺寸/圆角/阴影/辉光收敛成 token，换皮肤只改变量。
   ============================================================ */
:root{
  --xz-r:4px;                                  /* 全站统一圆角（锐利直角是润丰的语言，只做 4px 收边） */
  --xz-r-lg:8px;
  --xz-ease:cubic-bezier(.22,.61,.36,1);
  --xz-sh-1:0 2px 10px rgba(13,18,32,.06);
  --xz-sh-2:0 14px 34px rgba(13,18,32,.14);
  --xz-glow:0 0 0 1px rgba(255,255,255,.06) inset, 0 1px 0 rgba(255,255,255,.05) inset;
  --xz-hair:rgba(255,255,255,.10);
}

/* ---- 1. 区块标题：HUD 读数风格（编号 + 品牌竖条）----
   编号用 CSS counter 生成，纯装饰，不进正文文本流，爬虫与屏幕朗读拿到的仍是原样 h2。
   h2 收成 table 宽度（内容宽 + 居中），竖条才能贴着文字左缘，无需改模板加 <span>。 */
.xz-section{counter-increment:xz-sec;position:relative}
body{counter-reset:xz-sec}
.xz-section h2.xz-title{
  display:table;margin:0 auto 10px;position:relative;padding-left:16px;text-align:center;
}
.xz-section h2.xz-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:22px;background:var(--xz-red);border-radius:1px;
}
/* 英文小标（.xz-sub）上方加两位编号，与登录页的 HUD 读数同一套语言 */
.xz-section .xz-sub::before{
  content:counter(xz-sec,decimal-leading-zero);
  display:block;font-size:11px;letter-spacing:2px;color:var(--xz-ink-soft);opacity:.6;margin-bottom:6px;font-weight:700;
}

/* ---- 2. 页眉滚动态：越过顶部就收身 + 加深 ---- */
.xz-header{transition:box-shadow .3s var(--xz-ease),background-color .3s var(--xz-ease)}
.xz-header .xz-header-inner{transition:height .3s var(--xz-ease)}
.xz-header.is-stuck .xz-header-inner{height:62px}
.xz-header.is-stuck{box-shadow:0 10px 34px rgba(0,0,0,.38)}

/* ---- 3. Hero：标题渐变字 + 扫描线 + 图卡辉光 ---- */
.xz-hero::after{                                    /* 缓慢下扫的光带，纯 CSS，不用图 */
  content:"";position:absolute;left:0;right:0;top:-40%;height:36%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,176,32,.055),transparent);
  animation:xz-scan 9s linear infinite;
}
@keyframes xz-scan{from{transform:translateY(0)}to{transform:translateY(360%)}}
.xz-hero h1{
  /* 渐变文字：底色写死为白，background-clip 不支持时自然回落成白字，不会变透明 */
  color:#fff;
  background:linear-gradient(96deg,#FFFFFF 8%,#FFD873 52%,var(--xz-red) 92%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.xz-hero-tag{position:relative;box-shadow:0 0 0 1px rgba(255,176,32,.5),0 6px 18px rgba(255,176,32,.18)}
.xz-hero-media img{position:relative;z-index:2}
.xz-hero-media::before{                             /* 角括号取景框，HUD 取景感 */
  content:"";position:absolute;inset:auto 12px 12px auto;width:56px;height:56px;z-index:3;
  border-right:2px solid var(--xz-red);border-bottom:2px solid var(--xz-red);opacity:.9;
}
.xz-hero-media{transition:transform .35s var(--xz-ease)}

/* ---- 4. 数据带：等宽数字 + 分隔辉光 ---- */
.xz-stat{position:relative;padding:14px 8px;border-radius:var(--xz-r-lg)}
.xz-stat::before{                                   /* 相邻读数之间的细竖线，最后一格不画 */
  content:"";position:absolute;left:0;top:22%;height:56%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent);
}
.xz-stat:first-child::before{display:none}
.xz-stat .num{font-variant-numeric:tabular-nums;position:relative}
.xz-stat .num::after{                               /* 数值下方一道短辉光线 */
  content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  width:26px;height:2px;background:var(--xz-gold);opacity:.75;transition:width .3s var(--xz-ease);
}
.xz-stat:hover .num::after{width:56px}
.xz-stats .xz-stats-grid{position:relative}

/* ---- 5. 卡片统一层次：1px 边框 + 内发光 + hover 抬升 4px ---- */
.xz-promise,.xz-scene,.xz-dish,.xz-case,.xz-news,.xz-list-card,.xz-contact-card,.xz-case-card,.xz-news-card{
  border-radius:var(--xz-r);box-shadow:var(--xz-sh-1);
  transition:transform .28s var(--xz-ease),box-shadow .28s var(--xz-ease),border-color .28s var(--xz-ease);
}
.xz-promise:hover,.xz-scene:hover,.xz-dish:hover,.xz-case:hover,.xz-news:hover,
.xz-list-card:hover,.xz-contact-card:hover,.xz-case-card:hover,.xz-news-card:hover{
  transform:translateY(-4px);box-shadow:var(--xz-sh-2),var(--xz-glow);
}
.xz-scene,.xz-promise,.xz-case{overflow:hidden}
/* 服务场景的 .ico 已在 §六-12 科技 HUD 语言里重写，这里不再覆盖 */

/* ---- 6. CTA：网格底纹 + 环形辉光，和页脚同一套深色语言 ---- */
.xz-cta::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--xz-hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--xz-hair) 1px,transparent 1px);
  background-size:36px 36px;opacity:.42;
}
.xz-cta .xz-tel{letter-spacing:1px;text-shadow:0 0 18px rgba(255,255,255,.35)}

/* ---- 6b. 页脚 NAP 块（§五）：行结构在 _Layout 的共享样式里，这里只上润丰的色与点缀 ---- */
.xz-nap .footerMap li{color:rgba(255,255,255,.80)}
.xz-nap .footerMap li i{color:rgba(255,255,255,.45);opacity:1}
.xz-nap .footerMap li i::after{content:"";display:inline-block;width:10px;height:1px;background:rgba(250,90,18,.55);margin-left:6px;vertical-align:middle}
.xz-nap .footerMap a.nap-v{color:rgba(255,255,255,.80);text-decoration:none;transition:.2s;font-variant-numeric:tabular-nums}
.xz-nap .footerMap a.nap-v:hover{color:var(--xz-red);text-decoration:none}

/* ---- 7. 到位显现：初始态只在 html.xz-fx 下存在 ---- */
.xz-fx [data-fx]{opacity:0;transform:translateY(16px);transition:opacity .55s var(--xz-ease) var(--xz-d,0ms),transform .55s var(--xz-ease) var(--xz-d,0ms)}
.xz-fx [data-fx].xz-in{opacity:1;transform:none}
/* 兜底显形：渲染器执行 JS 却不滚动（Googlebot/AI 引擎截图渲染）、或标签页从未被绘制
   （过渡帧不推进、opacity 卡在起始值）时，IO 永不触发。这条不带 transition，命中即最终态。
   与上一条同权重但靠后，故生效；动效是装饰，正文可见性是底线。 */
.xz-fx.xz-shot [data-fx]{opacity:1;transform:none;transition:none}

/* ---- 8. 静止偏好：全部动效关闭，已隐藏的东西必须显形 ---- */
@media (prefers-reduced-motion: reduce){
  .xz-hero::after{display:none}
  .xz-fx [data-fx]{opacity:1;transform:none;transition:none}
  .xz-header.is-stuck .xz-header-inner{height:76px}
  /* 静止偏好 + 窄屏：76px 会把上面那条桌面兜底高度强加给移动端，
     而移动端导航仍定位在 top:64px，页眉会盖住导航 12px。这里收回 64px。 */
  @media (max-width:900px){ .xz-header.is-stuck .xz-header-inner{height:64px} }
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---- 9. 窄屏收边：装饰不参与布局，只把尺寸放小 ---- */
@media (max-width:900px){
  .xz-section{padding:52px 0}
  .xz-section h2.xz-title{font-size:25px;gap:12px}
  .xz-hero h1{font-size:31px;line-height:1.24}
  .xz-stat .num{font-size:31px}
  .xz-stat::before{display:none}
  .xz-hero-media::before{width:38px;height:38px}
  .xz-fx [data-fx]{transition-duration:.4s}
  /* 权重坑：上面「页眉滚动态」的 .xz-header.is-stuck .xz-header-inner{height:62px} 是 (0,3,0)，
     会压过主块里裸类的 .xz-header-inner{height:64px}；而折叠导航定位在 top:64px，
     滚动后页眉短 2px 就在页眉与导航之间裂出一条缝。窄屏口径固定 64px，必须写在后面才赢。 */
  .xz-header.is-stuck .xz-header-inner{height:64px}
}

/* ============================================================
   §六 科技调性层（科技橙定色 + 科技线条 + 科技蓝点缀）2026-10-12
   对应待办「二、润丰前台配色调性」原话：主色"应该看起来更科技，比如加动画，注意细节，
   用科技线条，或者加一点科技蓝色的点缀"，并且写明"不能直接改成科技蓝色"。
   分工因此是三件事，而不是换色：
     ① 色已改在文件开头 :root —— 橙抽干蓝通道更纯、中性色整体转冷（冷底才压得住高饱和橙）；
     ② 线条层用 1px 细线 / 网格 / 取景框 / 扫描带 / 阅读进度线制造仪器感；
     ③ 科技蓝只做点缀（细线、辉光、渐变尾端、单颗读数点），每处面积都 <1%，不替换任何品牌橙的用途。
   底线沿用 §五：不改 DOM 结构（SEO/GEO 语义零动，h1/h2/正文/alt 全部原样）；
   新的动画一律挂在 html.xz-fx 下 —— 该类由 site-fx.js 启动时添加，禁用 JS、
   prefers-reduced-motion、以及"执行 JS 但不绘制"的渲染器都拿不到它，
   所以这些线条在非交互抓取下依然是静态的、可见的，只是不动。
   命名：本层的自定义属性用 --rf-*，不要用 --xz-*。
   原因不是风格，是管线：SkinThemeRewriter.ExtractPalette() 用正则 `--xz-[a-z-]+\s*:`
   抓 :root 当"基准色板"，而 SkinCssValidator 的白名单只有 10 个 --xz-* 槽位。
   往 :root 里加一个白名单外的 --xz-tech，换肤时旧蓝会被改写成 var(--xz-tech)，
   而新皮肤色板里根本没有这个键 ⇒ 颜色丢失。--rf-* 不匹配那条正则，天然隔离。
   ============================================================ */
:root{
  --rf-tech:#2FB8FF;                      /* 科技蓝·亮面：深色底上的细线与辉光 */
  --rf-tech-deep:#0C6FB8;                 /* 科技蓝·暗面：浅底上的小字/描边，对白底 4.9:1，可直接用作文字 */
  --rf-tech-1:rgba(47,184,255,.16);       /* 点缀四档强度，避免到处手写 rgba 又要跟色板同步 */
  --rf-tech-2:rgba(47,184,255,.34);
  --rf-tech-3:rgba(47,184,255,.55);
  --rf-tech-4:rgba(47,184,255,.85);
  --rf-dark:#080C16;                      /* 比 #0E1119 更深的冷底，只用于渐变末端/叠层，不替换现有大底色 */
  --rf-grid:rgba(150,185,225,.055);       /* 深色底上的网格线：带一点蓝，替代原先纯白的"印刷感"网格 */
  --rf-cell:34px;                         /* 网格步长：三处网格统一到这个数，漂移动画才能无缝循环 */
  /* §六-16 无障碍专用两档，取值靠 WCAG 相对亮度反推，不要顺手改成"更好看"的橙：
     --rf-ink-orange：浅底上的橙字（白底 5.53:1、10% 橙底纹 4.92:1、14% 金底纹 5.06:1，均过 AA）。
       主色 --xz-red #FA5A12 对白底只有 3.21:1，12~15px 的小字一律换成它。
     --rf-orange-hot：橙底按钮 hover 的底色（配 --xz-ink 字 6.78:1）。
       旧的 --xz-red-deep #DE4108 是"白字 4.32:1"时代选的，文字改深字后它反而更暗、对比没意义。 */
  --rf-ink-orange:#B8410B;
  --rf-orange-hot:#FF6A28;
}

/* ---- 1. 页眉：顶边一条走动的三色光带 + 底边阅读进度线（HUD 边框）----
   进度线宽度来自 site-fx.js 写的 --rf-prog；脚本没跑（禁用 JS / 静止偏好 / 渲染器只执行不滚动）
   时这个变量为空 ⇒ 宽度 0，线上不会留半截进度。 */
.xz-header::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,var(--xz-red) 0%,var(--xz-gold) 20%,var(--rf-tech) 42%,
                             rgba(47,184,255,0) 68%,rgba(250,90,18,0) 100%);
  background-size:200% 100%;
}
.xz-fx .xz-header::before{animation:rf-line 7s linear infinite}
@keyframes rf-line{from{background-position:0 0}to{background-position:-200% 0}}
.xz-header::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:var(--rf-prog,0);z-index:3;pointer-events:none;
  background:linear-gradient(90deg,var(--xz-red),var(--xz-gold));
  box-shadow:0 0 10px rgba(47,184,255,.45);
  /* 故意不给 width 加 transition：JS 本来就是一帧一次写入，加了过渡只会让进度线永远慢半拍；
     更麻烦的是"页面不被绘制就不推进过渡"这条渲染器陷阱（§五 的 opacity 兜底就是为它写的），
     进度线会一直卡在 0。装饰要跟状态直接落位，不要插值。 */
}

/* ---- 2. 导航：下划线收成橙→金双色并带辉光，当前栏目左端加一枚蓝色读数点 ----
   .active 由 _Layout.cshtml 按 curPath 判定输出，二级项的下划线在 §四 已被 display:none，
   所以这个圆点只会出现在一级导航上。 */
.xz-nav a::after{
  background:linear-gradient(90deg,var(--xz-red),var(--xz-gold));
  box-shadow:0 2px 12px rgba(250,90,18,.45);
}
.xz-nav a.active::before{
  content:"";position:absolute;left:-9px;top:50%;width:4px;height:4px;margin-top:-2px;
  background:var(--rf-tech);border-radius:50%;box-shadow:0 0 8px var(--rf-tech-4);
}

/* ---- 3. 区块标题：竖条三段渐变 + 呼吸；HUD 编号转科技蓝；浅色区块底部一道 1px 分隔光带 ----
   编号是 ::before 生成的装饰文本（爬虫与屏幕朗读拿不到），所以这里的蓝色不承担正文对比度；
   深色数据带 .xz-stats 同时带 .xz-section，用 :not() 排除，免得白线压在黑底上。 */
.xz-section h2.xz-title::before{
  background:linear-gradient(180deg,var(--xz-red),var(--xz-gold) 68%,var(--rf-tech));
  box-shadow:0 0 14px rgba(250,90,18,.35);
}
.xz-fx .xz-section h2.xz-title::before{animation:rf-breathe 4.2s ease-in-out infinite}
@keyframes rf-breathe{
  0%,100%{opacity:1;box-shadow:0 0 14px rgba(250,90,18,.35)}
  50%{opacity:.66;box-shadow:0 0 6px rgba(250,90,18,.16)}
}
.xz-section .xz-sub::before{color:var(--rf-tech-deep)}
.xz-section .xz-sub::after{background:linear-gradient(90deg,var(--xz-red),var(--xz-gold) 55%,var(--rf-tech))}
.xz-section:not(.xz-stats)::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(620px,64%);height:1px;
  background:linear-gradient(90deg,rgba(13,18,32,0),rgba(250,90,18,.30) 26%,rgba(47,184,255,.34) 60%,rgba(13,18,32,0));
}

/* ---- 4. Hero：网格转冷并整体漂移，扫描带嵌一条蓝芯，图卡加冷描边 ----
   网格三处（hero / 内页 hero / CTA）统一 --rf-cell 步长，rf-drift 的位移才刚好是一格，无缝接上。 */
.xz-hero::before{
  background-image:linear-gradient(var(--rf-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rf-grid) 1px,transparent 1px);
  background-size:var(--rf-cell) var(--rf-cell);
}
.xz-inner-hero::after{background-size:var(--rf-cell) var(--rf-cell);
  background-image:linear-gradient(var(--rf-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rf-grid) 1px,transparent 1px)}
.xz-cta::before{background-size:var(--rf-cell) var(--rf-cell)}
.xz-fx .xz-hero::before,.xz-fx .xz-inner-hero::after,.xz-fx .xz-cta::before{animation:rf-drift 30s linear infinite}
@keyframes rf-drift{from{background-position:0 0}to{background-position:var(--rf-cell) var(--rf-cell)}}
.xz-hero::after{                          /* 原橙光带里嵌一条更亮的蓝芯，扫过去才像"读数在走" */
  background:linear-gradient(180deg,transparent 8%,rgba(255,176,32,.05) 42%,
                             var(--rf-tech-1) 50%,rgba(255,176,32,.05) 58%,transparent 92%);
}
.xz-hero-media img{box-shadow:0 0 0 1px var(--rf-tech-1),0 24px 70px rgba(0,0,0,.45)}

/* 标题流光只在宽屏开：background-clip:text 的动画是重绘文字，窄屏中低端机不值这个电。
   底色仍写死 #fff —— background-clip 不支持时自然回落成白字，不会透明（§五 同一条底线）。 */
@media (min-width:901px){
  .xz-fx .xz-hero h1{
    /* 青只占 16% 一个窄档、且半透明，读起来是"金属反光"不是"蓝字"，主档仍是白→金→橙 */
    background:linear-gradient(96deg,#FFFFFF 6%,rgba(47,184,255,.55) 16%,var(--xz-gold-light) 38%,
                               var(--xz-red) 70%,#FFFFFF 92%);
    background-size:220% 100%;
    /* 这三行不是保险，是必须：`background` 简写会把 background-clip 重置回 border-box，
       而 §五 那条 -webkit-text-fill-color:transparent 不受简写影响、仍然是透明的。
       两者一撞，H1 就成了"透明字贴在矩形渐变上"——实测标题整条看不见（background-clip 掉回 border-box）。
       凡是重写 background 简写的渐变文字，必须在简写之后重新声明 clip 与 fill。 */
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:rf-flow 14s ease-in-out infinite alternate;
  }
}
@keyframes rf-flow{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---- 5. 数据带：顶部压一层冷辉光，读数分隔线走"蓝→白"，数值下的短光线尾端收蓝 ---- */
.xz-stats{background:radial-gradient(120% 150% at 50% 0,rgba(47,184,255,.10),rgba(8,12,22,0) 62%),#0E1119}
.xz-stats .xz-stats-grid::before{
  content:"";position:absolute;inset:-10px -22px;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--rf-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rf-grid) 1px,transparent 1px);
  background-size:28px 28px;opacity:.6;
}
.xz-stat::before{background:linear-gradient(180deg,transparent,rgba(47,184,255,.30) 42%,rgba(255,255,255,.16) 58%,transparent)}
.xz-stat .num{text-shadow:0 0 18px rgba(250,90,18,.35)}
.xz-stat .num::after{background:linear-gradient(90deg,var(--xz-gold),var(--rf-tech));box-shadow:0 0 12px rgba(47,184,255,.4)}

/* ---- 6. 卡片：hover 时顶部走出一条 2px 三色细线 ----
   .xz-case 已有 §五 的进度线（它的 ::before），这里只补 ::after 空着的卡型；
   顺带给 .xz-dish/.xz-news/.xz-scene/.xz-list-card/.xz-contact-card 补 position:relative ——
   它们原本是 static，绝对定位的细线没有包含块会贴到视口。补 relative 不改布局（无偏移参与流）。
   左上/右上圆角各收 4px：没被 overflow:hidden 裁掉的卡（contact）才不会方角戳出圆角边框。 */
.xz-dish,.xz-news,.xz-scene,.xz-list-card,.xz-contact-card{position:relative}
.xz-dish::after,.xz-news::after,.xz-scene::after,.xz-list-card::after,
.xz-contact-card::after,.xz-case-card::after,.xz-news-card::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;z-index:2;pointer-events:none;
  border-top-left-radius:var(--xz-r);border-top-right-radius:var(--xz-r);
  background:linear-gradient(90deg,var(--xz-red),var(--xz-gold) 55%,var(--rf-tech));
  transition:width .38s var(--xz-ease);
}
.xz-dish:hover::after,.xz-news:hover::after,.xz-scene:hover::after,.xz-list-card:hover::after,
.xz-contact-card:hover::after,.xz-case-card:hover::after,.xz-news-card:hover::after{width:100%}

/* ---- 7. 主按钮 / 页眉电话按钮：内 1px 冷描边 + hover 一道高光横扫（只在 xz-fx 下动） ---- */
.xz-btn-primary,.xz-header-btn{
  position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 8px 24px rgba(250,90,18,.28);
}
.xz-btn-primary::after,.xz-header-btn::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:38%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
}
.xz-fx .xz-btn-primary:hover::after,.xz-fx .xz-header-btn:hover::after{animation:rf-sheen .75s var(--xz-ease)}
@keyframes rf-sheen{to{transform:translateX(390%)}}

/* ---- 8. 内页 Hero 与 CTA：徽标冷描边、图片冷描边、CTA 边缘收一圈冷光 ----
   冷光是 inset，橙色渐变底本身不动 —— 互补色收在边上，橙才显得"带电"而不是"发热"。 */
.xz-inner-hero-text .xz-seal,.xz-inner-hero .xz-seal{box-shadow:0 0 0 1px var(--rf-tech-2),0 8px 22px rgba(250,90,18,.28)}
.xz-inner-hero-media{box-shadow:0 0 0 1px var(--rf-tech-1),0 20px 50px rgba(0,0,0,.4)}
.xz-cta{box-shadow:inset 0 0 120px rgba(47,184,255,.18)}

/* ---- 9. FAQ：左侧 3px 描边收成三段渐变（盖在原描边上，不改边框与布局） ---- */
.xz-faq-item{position:relative}
.xz-faq-item::before{
  content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;
  border-top-left-radius:3px;border-bottom-left-radius:3px;
  background:linear-gradient(180deg,var(--xz-red),var(--xz-gold) 60%,var(--rf-tech));
}

/* ---- 10. 页脚顶边：一条"蓝→白→橙"的收边线，和页眉顶线呼应 ---- */
.footer-big-back{position:relative}
.footer-big-back::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(47,184,255,.28),rgba(255,255,255,.06) 40%,rgba(250,90,18,.30));
}

/* ---- 11. 窄屏收边：漂移网格整体关掉（三块大面积合成层不值这个电），细节尺寸放小 ---- */
@media (max-width:900px){
  .xz-fx .xz-hero::before,.xz-fx .xz-inner-hero::after,.xz-fx .xz-cta::before{animation:none}
  .xz-section:not(.xz-stats)::after{width:82%}
  .xz-stats .xz-stats-grid::before{inset:-6px -12px;opacity:.45}
  /* 抽屉式导航是整行布局（.xz-nav a 宽度 100%），左端圆点会顶到行外，窄屏直接撤掉 */
  .xz-nav a.active::before{display:none}
  /* 页眉在窄屏是深色实底，顶线 + 进度线两条同时压着会显乱，留进度线 */
  .xz-header::before{height:2px;opacity:.75}
}

/* ---- 12. 服务场景卡（一行 6 列）的悬停微交互 ----
   6 列后单卡只有约 180px，所以动效全部走"薄"路线：3px 底线、图标渐变位移、
   一道掠光，不加缩放（缩放会把 12.5px 的字糊掉）。掠光是动画，只在 html.xz-fx 下开，
   静止偏好由 §8 的全局 *{animation-duration} 兜住，不用单独写。 */
/* ---- 服务场景：橙色系渐变芯片 + 暖色扫描线（2026-10-12 回退到橙系）----
   用户反馈深色 HUD 语言"效果还不如之前"，要求回到橙色渐变风格。
   保留上一版的网格底纹和上浮动画，把蓝色全部换成橙→金→琥珀的暖色渐变：
     · 卡片背景 = 白底 + 极淡橙色网格（rgba(250,90,18,.04)），保持干净；
     · 序号芯片 = 橙→金→琥珀三段渐变，静止时可见区落在尾段琥珀上（像金属徽章）；
       hover 时渐变滑到前端亮橙，文字变白，像徽章被点亮；
     · 底部扫描线 = 从左到右扫过的橙→金激光线（clip-path 揭示）；
     · hover 态卡片上浮 -6px + 边框变科技橙，整体像被"选中激活"。 */

.xz-scene{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--xz-line);
  /* 极淡橙色网格：36px 间距，比 CTA/页脚的深色网格更轻，不抢内容 */
  background-image:
    linear-gradient(rgba(250,90,18,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,90,18,.03) 1px,transparent 1px);
  background-size:36px 36px;
}
.xz-scene h4,.xz-scene p{position:relative;z-index:1;}

/* 序号芯片：亮橙→金→亮橙对称渐变，静止时可见区落在正中金色段，数字白字。
   hover 时渐变滑到前端（background-position: -8%），视觉变化更明显；
   金色用 #FFB84D（比 #FFC53D 稍暗、比 #FFB020 稍亮），白字压它约 2.8:1，
   两端亮橙兜底 3.21:1，整体观感比单向渐变更像"被点亮的指示灯"。 */
.xz-scene .ico{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:26px;padding:0 9px;border-radius:2px;
  background-image:linear-gradient(90deg,var(--xz-red),#FFB84D 50%,var(--xz-red));
  background-size:220% 100%;background-position:50% 0;
  color:#fff;
  font-size:12px;font-weight:800;letter-spacing:2px;
  transition:background-position .45s var(--xz-ease);
}

/* hover 态：渐变滑到前端亮橙，文字始终白字 */
.xz-scene:hover .ico{
  background-position:-8% 0;
}

/* 底部扫描线：从左到右渐渐铺满的橙→金激光线，用 clip-path 揭示 */
.xz-scene::before{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--xz-red),var(--xz-gold),var(--xz-red),transparent);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .45s ease-out;
}
.xz-scene:hover::before{clip-path:inset(0 0 0 0)}

/* hover 态卡片：上浮 + 边框变科技橙，像被激活的面板 */
.xz-scene:hover{
  transform:translateY(-6px);
  border-color:var(--xz-red);
  box-shadow:0 8px 30px rgba(250,90,18,.10);
}

/* ---- 13. CTA 板块：换成登录页那一套深色科技语言 ----
   原设计是整块品牌橙实底 + 一个白色菱形边框，信息层级全靠"字压在饱和色上"，
   在满屏白底的首页里像一条横幅而不是一个收口。这里改成：
     ① 深底（--rf-dark 一族）+ 顶部橙色径向辉光 ⇒ 橙变成"光源"而不是"底色"，还是 Logo 的橙；
     ② 网格底纹沿用 §五/§六 的 --rf-grid/--rf-cell，与内页 Hero、数据带同一个步进，漂移能对上；
     ③ 一层斜向掠光带（::after，原本那个白菱形边框撤掉）+ 一层粒子连线（canvas，见 site-fx.js §5）。
   canvas 只是装饰：文字全部留在 HTML 里，禁用 JS / 静止偏好时拿到的是同一块深底 + 静态网格，
   层级和可读性都不变。颜色从 CSS 变量读，换肤时粒子会跟着换色。 */
.xz-cta{
  background:
    radial-gradient(130% 150% at 14% -10%, rgba(250,90,18,.34), rgba(250,90,18,0) 58%),
    radial-gradient(120% 150% at 88% 120%, rgba(47,184,255,.16), rgba(47,184,255,0) 60%),
    linear-gradient(120deg,#0A0F1A 0%,var(--rf-dark,#080C16) 52%,#121A29 100%);
  padding:78px 20px 82px;
}
.xz-cta::before{opacity:.5}                          /* 网格压在深底上要更亮一点才看得见，仍低于内容层 */
.xz-cta::after{                                      /* 斜向掠光带，替代原来的白色菱形边框 */
  content:"";position:absolute;left:-34%;top:-45%;width:52%;height:190%;z-index:1;
  transform:rotate(16deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,176,32,.13) 44%,
                                rgba(47,184,255,.12) 58%,rgba(255,255,255,0));
  filter:blur(6px);
}
.xz-fx .xz-cta::after{animation:rf-cta-beam 11s linear infinite}
@keyframes rf-cta-beam{
  from{transform:translateX(-60%) rotate(16deg)}
  to{transform:translateX(300%) rotate(16deg)}
}
.xz-cta-net{                                         /* 粒子连线画布：铺满、不接事件、压在文字下面 */
  position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block;
}
.xz-cta-inner{position:relative;z-index:3;max-width:1200px;margin:0 auto;}
.xz-cta h2{                                          /* 标题走白→金→橙流光，和内页 Hero 同一条光线语言 */
  background:linear-gradient(96deg,#FFFFFF 8%,var(--xz-gold-light) 40%,var(--xz-red) 78%,#FFFFFF 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.xz-fx .xz-cta h2{animation:rf-flow 12s ease-in-out infinite alternate}
.xz-cta p{color:rgba(226,233,245,.86)}
.xz-cta .xz-tel{color:#fff;text-shadow:0 0 22px rgba(255,176,32,.45)}
@media (max-width:900px){
  .xz-cta{padding:56px 16px 60px}
  .xz-cta::after{display:none}                      /* 大面积模糊合成层，窄屏不值这个电 */
}
@media (prefers-reduced-motion: reduce){
  .xz-fx .xz-cta::after{animation:none;transform:translateX(60%) rotate(16deg)}
  .xz-fx .xz-cta h2{animation:none}
}

/* ---- 15. 全站补齐的动效与科技细节（本轮"整体科技感还不足"的补充层）----
   只加装饰，不动 DOM，也不新增颜色变量；动画一律 .xz-fx 前缀 + §八 的静止偏好总开关。 */

/* 15.1 内页 Hero：一条从上往下走的扫描光 + 标题落位后 draw-in 的橙色底线。
   .xz-inner-hero 的 ::after 已经是网格，所以光束用 ::before（该伪元素在内页原本是空的）。 */
.xz-inner-hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(47,184,255,0),rgba(47,184,255,.10) 46%,
                              rgba(255,176,32,.14) 62%,rgba(255,255,255,0));
  opacity:.0;
}
.xz-fx .xz-inner-hero::before{animation:rf-inner-scan 7.5s ease-in-out infinite}
@keyframes rf-inner-scan{
  0%{transform:translateY(-40%);opacity:0}
  18%{opacity:.9}
  70%{transform:translateY(300%);opacity:0}
  100%{transform:translateY(300%);opacity:0}
}
.xz-inner-hero h1::after{
  content:"";display:block;width:120px;height:3px;margin-top:18px;
  background:linear-gradient(90deg,var(--xz-red),var(--xz-gold) 60%,var(--rf-tech));
}
/* 用 keyframes 而不是 transition：内页 Hero 在第一屏，IntersectionObserver 那套"到位显现"
   对它没有意义；动画自播一次，静止偏好下由 §八 的总开关压成最终态。 */
.xz-fx .xz-inner-hero h1::after{animation:rf-hero-draw .8s var(--xz-ease) both}
@keyframes rf-hero-draw{from{width:0}to{width:120px}}

/* 15.2 正文富文本：链接、列表、引用、表格统一上科技语言。
   RichTextViewer 放行的标签就是这些，编辑器里加的东西在前台终于有对应样式。 */
.xz-dish-rich a,.xz-article-rich a,.xz-about-rich a,.xz-rich a{
  color:var(--xz-red);text-decoration:none;
  background-image:linear-gradient(var(--xz-red),var(--xz-red));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .28s var(--xz-ease),color .2s;
}
.xz-dish-rich a:hover,.xz-article-rich a:hover,.xz-about-rich a:hover,.xz-rich a:hover{
  background-size:100% 1px;color:var(--xz-red-deep);
}
.xz-dish-rich ul,.xz-article-rich ul,.xz-about-rich ul{list-style:none;padding-left:20px;}
.xz-dish-rich ul li,.xz-article-rich ul li,.xz-about-rich ul li{position:relative;}
.xz-dish-rich ul li::before,.xz-article-rich ul li::before,.xz-about-rich ul li::before{
  content:"";position:absolute;left:-14px;top:.72em;width:6px;height:6px;
  background:linear-gradient(135deg,var(--xz-red),var(--rf-tech));
}
.xz-dish-rich ol,.xz-article-rich ol,.xz-about-rich ol{padding-left:22px;}
.xz-dish-rich li::marker,.xz-article-rich li::marker,.xz-about-rich li::marker{color:var(--xz-red-deep);}
.xz-dish-rich blockquote,.xz-article-rich blockquote,.xz-about-rich blockquote{
  margin:18px 0;padding:12px 18px;color:var(--xz-ink-soft);background:var(--xz-bg);
  border-left:3px solid transparent;
  border-image:linear-gradient(180deg,var(--xz-red),var(--rf-tech)) 1;
}
.xz-dish-rich table,.xz-article-rich table,.xz-about-rich table,.xz-rich table{
  width:100%;border-collapse:collapse;font-size:14px;margin:16px 0;
}
.xz-dish-rich th,.xz-article-rich th,.xz-about-rich th,.xz-rich th{
  background:var(--xz-cream);color:var(--xz-ink);font-weight:700;text-align:left;
}
.xz-dish-rich td,.xz-dish-rich th,.xz-article-rich td,.xz-article-rich th,.xz-rich td,.xz-rich th{
  border:1px solid var(--xz-line);padding:9px 12px;
}
.xz-dish-rich tbody tr,.xz-article-rich tbody tr,.xz-rich tbody tr{transition:background .2s}
.xz-dish-rich tbody tr:hover,.xz-article-rich tbody tr:hover,.xz-rich tbody tr:hover{background:rgba(47,184,255,.07)}

/* 15.3 面包屑：当前项前的一枚蓝色读数点，hover 时把上一级的分隔符点亮 */
.xz-crumbs b::before{
  content:"";display:inline-block;width:5px;height:5px;margin-right:7px;vertical-align:middle;
  background:var(--rf-tech);box-shadow:0 0 8px rgba(47,184,255,.55);
}
.xz-crumbs a:hover + span{color:var(--xz-red)}

/* 15.4 幽灵按钮：内描边收成冷色，hover 走一道与主按钮同语言的高光；键盘焦点给可见外环 */
.xz-btn-ghost{position:relative;overflow:hidden;transition:.25s}
.xz-fx .xz-btn-ghost:hover::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:38%;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,18,32,0),rgba(13,18,32,.16),rgba(13,18,32,0));
  animation:rf-sheen .75s var(--xz-ease);
}
.xz-fx .xz-cta .xz-btn-ghost:hover::after{
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
}
:where(a,button,input):focus-visible{outline:2px solid var(--rf-tech-deep);outline-offset:2px}

/* 15.5 详情大图：hover 时轻微放大 + 冷描边收亮，和列表卡同一套反馈 */
.xz-dish-detail-pic img{transition:transform .5s var(--xz-ease)}
.xz-dish-detail-pic:hover img{transform:scale(1.035)}
.xz-dish-detail-pic{box-shadow:var(--xz-shadow),inset 0 0 0 1px var(--rf-tech-1);transition:box-shadow .3s var(--xz-ease)}
.xz-dish-detail-pic:hover{box-shadow:var(--xz-sh-2),inset 0 0 0 1px var(--rf-tech-3)}

/* 15.6 案例卡 / 资讯卡：hover 时左上角出现一枚 HUD 直角括号，呼应 Hero 图卡的取景框 */
.xz-case::after,.xz-news-card::before{
  content:"";position:absolute;left:8px;top:8px;width:12px;height:12px;opacity:0;pointer-events:none;
  border-left:2px solid var(--xz-red);border-top:2px solid var(--xz-red);
  transition:opacity .28s var(--xz-ease),transform .28s var(--xz-ease);
  transform:translate(-4px,-4px);
}
.xz-case:hover::after,.xz-news-card:hover::before{opacity:.85;transform:none}

@media (max-width:900px){
  .xz-fx .xz-inner-hero::before{animation:none}      /* 全屏扫描带在窄屏就是一块移动的大面积合成层 */
}
@media (prefers-reduced-motion: reduce){
  .xz-inner-hero h1::after{transition:none}
  .xz-dish-rich a,.xz-article-rich a,.xz-about-rich a,.xz-rich a{transition:none}
}

/* ============ §17 移动端（≤750px）样式修复 2026-10-12 ============
   iPhone 14（390px）实测问题：案例网格仍 2 列（每卡仅 165px，图文挤压）；
   页脚 6 个 UL 同排 flex 每列约 60px 文字疯狂折行；抽屉导航行高不足 44px。
   只改样式不动 DOM；写在租户皮肤（最后加载，同级选择器胜出），喜座等租户零影响。 */
@media (max-width:750px){
  /* 17.1 内容网格单列化 */
  .xz-case-grid,.xz-news-grid,.xz-contact-grid,.xz-scene-grid,.xz-promise-grid{grid-template-columns:1fr}
  .xz-dish-grid{grid-template-columns:repeat(2,1fr)}
  .xz-case-img{height:200px}
  /* 模板层 _Layout.cshtml 内联样式（.xz-case.has-img .xz-case-body = 3 类，且在链接之后加载）
     会把 18px 20px 压回来，这里加到 4 类特异性确保窄屏生效 */
  .xz-case-grid .xz-case.has-img .xz-case-body{padding:14px 16px}
  .xz-case-title{font-size:17px;line-height:1.55}
  .xz-case-rich p{font-size:14px;line-height:1.8}
  .xz-case-author{margin-top:10px;font-size:13px}

  /* 17.2 页脚两列排布 + 联系信息通栏 */
  .footerNav{flex-wrap:wrap;row-gap:2px}
  .footerNav > ul{width:50%;margin-bottom:16px;padding-right:10px}
  .footerNav ul li a{font-size:13px !important;line-height:2.1 !important}
  .footerMap{width:100%;margin-top:4px}
  .footerMap li{font-size:13px;line-height:1.9}

  /* 17.3 点击区域 ≥44px（不改 display，避免破坏 ::after 下划线动画） */
  .xz-nav a{padding:14px 0}
  .xz-subnav a{padding:8px 0}
  .xz-pager a,.xz-pager span{min-width:44px;min-height:44px}
}

/* ============================================================
   §六-16 文字对比度收口（WCAG AA）2026-10-12
   为什么这一层单独存在：品牌主色 #FA5A12 是"大面积描边/底色"选出来的，对白底只有 3.21:1。
   它在 §四之前只出现在粗描边和 22px 以上的大字上（大字门槛 3:1，是过的）；后来按钮、
   小徽标、日期、正文链接都直接继承了它，12~16px 的小字门槛是 4.5:1，于是一批文字悄悄不合格。
   在真实浏览器里逐页跑文字/底色配对扫描（首页 143 项、列表 54、资讯 76、明细 65、正文 52、
   关于 56、联系 52），首轮首页命中 9 处，扩到分页与面包屑后再多 2 类，共 11 类，
   全部是同一个根因：小字直接继承了为大面积色选出的亮橙/亮金。现在 7 个页面 fails 全部归零。

   收口方式只有两条，都不动版面、不动 DOM、不动色相家族：
     A 橙底 + 白字 → 橙底 + 深字（--xz-ink 压 #FA5A12 = 5.98:1，压 hover 的 --rf-orange-hot = 6.78:1）。
       白字改深字比把橙底改深更划算：橙底是品牌识别，深字只是文字。
     B 浅底 + 橙字 → 浅底 + --rf-ink-orange（白底 5.53:1、10% 橙底纹上 4.92:1、14% 金底纹上 5.06:1）。
   深色区（页眉毛玻璃、CTA 深底、内页 Hero）里的白字压橙只有 3.16:1，同一批位置反过来用白字更差，
   所以那几处按容器亮度单独分派，而不是给 .xz-btn-ghost 加 !important。

   不动的地方，都不是偷懒：
   · .xz-nav a:hover 的橙色 —— 页眉在 ≥901px 是 rgba(13,18,32,.86) 深色毛玻璃、≤900px 同样是深抽屉，
     行 524/582 已经把 hover 覆盖成 #fff（18.2:1），#62 那行只在无 JS 的极窄回退里露出来。
   · .xz-dish .xz-dish-pic（22px/800）、.xz-video-play（20px 播放符）、.xz-hero h1 渐变末段、
     .xz-cta h2 —— 都是大字号，门槛按 3:1 算，实测 3.16~3.72，过。
   · 纯装饰的细线、底纹、下划线 ::after —— 非文本对比按 3:1，且不承担信息。

   测量边界（照此复现，别当成已实测）：后台标签页会被 Chrome 冻结，冻结后 getComputedStyle 返回陈旧值
   —— 连内联 style 和 !important 都不改读数，所以只能"改完 CSS → 重新导航 → 立刻扫"，且 :hover 态取不到数。
   因此 :hover 全部按色值手算，结论写在每条规则旁边：橙底按钮 hover 用 --rf-orange-hot 配 --xz-ink = 6.78:1；
   面包屑 hover / 正文链接 = --rf-ink-orange 压白底 5.53:1（分页 hover 不在此列，见 16.4）；
   场景芯片 hover 后渐变滑到橙金，深字压橙 5.98:1、压金 10.2:1；深色 Hero 幽灵按钮 hover 转白底深字 19.4:1。
   ============================================================ */

/* 16.1 A：橙底按钮 / 徽标，标签换深字（白字在 #FA5A12 上只有 3.21:1）。
   分页当前页不在这条之列：它已改成 --xz-ink 实心底 + 白字，见文件中部"服务端分页控件"。 */
.xz-header-btn,.xz-btn-primary,.xz-inner-hero-text .xz-seal,.xz-inner-hero .xz-seal{
  color:var(--xz-ink);
}
.xz-header-btn:hover{background:var(--rf-orange-hot);border-color:var(--rf-orange-hot);}
.xz-btn-primary:hover{background:var(--rf-orange-hot);}

/* 16.2 B：浅底上的橙/金小字统一收成 --rf-ink-orange */
.xz-section .xz-sub{color:var(--rf-ink-orange);}
.xz-promise .ico{color:var(--rf-ink-orange);}
.xz-news-date,.xz-news-ribbon span{color:var(--rf-ink-orange);}
/* 服务场景的序号芯片不能用橙字：它压的不是淡色底，而是 §六-12 那条 220% 宽、position:110% 的
   橙→金→科技蓝渐变（静止时可见区落在尾段的科技蓝上，hover 才滑到橙金）。
   深橙 #B8410B 对白底 5.53:1 很好，但压 #2FB8FF 只有 2.5:1 —— 换个底色就翻车，不该赌。
   --xz-ink 在金色淡底(17:1)、科技蓝(8.4:1)、橙(6.0:1)、金(10.2:1) 四端全部 ≥AA，
   所以这颗芯片的静止态和 hover 态用同一个深字，渐变位移动画照旧看得见。 */
.xz-scene .ico,.xz-scene:hover .ico{color:#fff;}

/* 16.3 正文富文本链接：文字和下划线同源，别留一条 3.21:1 的亮橙下划线 */
.xz-dish-rich a,.xz-article-rich a,.xz-about-rich a,.xz-rich a{
  color:var(--rf-ink-orange);
  background-image:linear-gradient(var(--rf-ink-orange),var(--rf-ink-orange));
}
.xz-dish-rich a:hover,.xz-article-rich a:hover,.xz-about-rich a:hover,.xz-rich a:hover{
  color:var(--rf-ink-orange);
}

/* 16.4 分页：原先这里是两条打补丁的规则（hover 用固定深橙、禁用态用固定中灰 #6B7280），
   2026-10-12 分页组件封装后收进基础规则：hover 走 --xz-red 描边 + --xz-cream 底 + --xz-ink 字，
   禁用态与省略号走 --xz-ink-soft。全部是 AI 换肤白名单槽位，换主题色时自动跟随，
   且 --xz-ink-soft 对底 5.0:1、--xz-ink 对 cream 更高，AA 结论不变（#6B7280 只是 4.83:1，并不更好）。 */

/* 16.5 面包屑：分隔符和 hover 的亮橙都换掉。
   "›" 用 --xz-gold #FFB020 压白底只有 1.83:1，14px；hover 的 --xz-red 也是 3.21:1。
   分隔符改 --rf-tech-deep（对白底 4.9:1，且和 15.3 那枚 HUD 蓝点同一条冷色语言，
   面包屑本来就靠它区分层级，不需要再抢暖色）；hover 走 --rf-ink-orange，与正文链接一致。 */
.xz-crumbs span{color:var(--rf-tech-deep);}
.xz-crumbs a:hover,.xz-fx .xz-crumbs a:hover + span{color:var(--rf-ink-orange);}

/* 16.6 深色 Hero 里的幽灵按钮：ink 字压 #0E1119 是 1.03:1，等于隐形按钮。
   只作用在 .xz-hero（首页 / Index02 的首屏深底）；文章翻页、卡片"查看"那几枚本来就在浅底上，
   继续用 .xz-btn-ghost 默认的深字描边，不要一起翻白。 */
.xz-hero .xz-btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);}
.xz-hero .xz-btn-ghost:hover{background:#fff;border-color:#fff;color:var(--xz-ink);}
/* hover 掠光随之翻转：白底上再掠一道白光就看不见了，换成 §15.4 通用款那道深墨 */
.xz-fx .xz-hero .xz-btn-ghost:hover::after{
  background:linear-gradient(90deg,rgba(13,18,32,0),rgba(13,18,32,.16),rgba(13,18,32,0));
}