@charset "utf-8";
/* ==========================================================================
   旭佑官网 · 前台设计系统 v2（正式版 xy.css）
   --------------------------------------------------------------------------
   与 public/_design/css/xy.css 同源，两处差异仅在：
     ① §4 导航 / §6 页脚 —— 改成打真实渲染结构（ul>li>a，含二级下拉）
     ② 删掉 §7「设计稿角标」（.xy-mark 只在本地预览稿里用）
   生成脚本：_tmp/2026-10-01/build_prod_css.py（可重复执行）
   ★ 改色值 / 间距请改「§1 设计令牌」，别在页面里写死。
   ========================================================================== */


/* ==========================================================================
   1. 设计令牌 —— 全站唯一定义处（KYBER 的组织方式：一套令牌走天下）
   ========================================================================== */
:root{
  /* 品牌橙：取自 Logo 方块本体 #ff9900，不另造色 */
  --brand:#ff9900;
  --brand-deep:#e07b00;
  --brand-ink:#a75c00;                /* 浅底上的橙字，保证对比度 */
  --brand-soft:rgba(255,153,0,.12);

  /* 科技蓝：旭佑既有主色，降级为交互/点缀色 */
  --accent:#0a6ed1;
  --accent-deep:#07529e;
  --accent-soft:rgba(10,110,209,.10);

  /* 中性三档文字 + 两档描边（层级全靠这两组） */
  --ink:#0f1726;
  --ink-soft:#5a667d;
  --ink-faint:#8b97ab;
  --line:rgba(15,23,38,.10);
  --line-strong:rgba(15,23,38,.20);

  --surface:#ffffff;
  --surface-2:#f7f9fc;

  /* 深色区（Hero / 内页页头 / CTA / 页脚） */
  --dark-1:#21304e;                   /* 底色：中提亮档（原 #0b1526 过深，出"深渊感"） */
  --dark-2:#243652;
  --dark-3:#1d2a44;
  --ray:255,208,116;                  /* 金色光束 RGB 分量，配 rgba(var(--ray),a) 调透明度 */
  --hero-glow-a:.26;                  /* 右上暖光强度（窄屏要降，见响应式段） */
  --hero-glow-b:.16;                  /* 底部暖雾强度 */
  --dark-line:rgba(255,255,255,.10);
  --dark-ink:#eef3fa;
  --dark-ink-soft:#9aa8bf;

  --shadow:0 24px 64px rgba(14,23,40,.12);
  --shadow-soft:0 10px 26px rgba(14,23,40,.07);
  --shadow-lift:0 30px 70px rgba(14,23,40,.18);

  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --max:1200px;
  --gutter:24px;
  --band:88px;

  --font: "PingFang SC","Microsoft YaHei UI","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-en:"Segoe UI",-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}


/* ==========================================================================
   2. 基础
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}

.xy-wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.xy-band{padding:var(--band) 0}

/* 区块背景节奏：白 → 米 → 冷蓝 → 米 → 冷蓝 → 深 —— 代替分割线 */
.xy-band--warm{background:linear-gradient(180deg,#ffffff,#fdfaf4)}
.xy-band--cool{
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(10,110,209,.09), transparent 62%),
    linear-gradient(180deg,#f4f8ff,#eef3ff);
}
.xy-band--warm2{background:linear-gradient(180deg,#ffffff,#fbf7f0)}
.xy-band--plain{background:#ffffff}

/* 题头三段式：英文眉标 + 中文主标题 + 一句话说明（全站共用同一个组件） */
.xy-head{max-width:820px;margin:0 0 46px}
.xy-head--c{margin-left:auto;margin-right:auto;text-align:center}
.xy-kicker{
  display:inline-block;
  font-family:var(--font-en);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand-ink);
  margin-bottom:14px;
}
.xy-head h2{
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.18;
  letter-spacing:-.01em;
  font-weight:700;
  margin-bottom:16px;
}
.xy-head p{font-size:17px;color:var(--ink-soft);max-width:660px}
.xy-head--c p{margin-left:auto;margin-right:auto}
.xy-hl{color:var(--brand-deep)}

/* 滚动入场（KYBER 的克制做法：只做一条位移淡入）
   ★ 关键：初始隐藏状态挂在 html.js 上，由 <head> 里的内联脚本添加。
     无 JS（含百度爬虫）时 html 没有 .js 类 → 内容原样可见，SEO 不受影响。 */
html.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1);
}
html.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* 截图用：?flat 关闭入场动画，保证整页截图内容全部可见 */
html.flat [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
/* ★ 2026-10-08 修复：入场动画的 CSS 兜底。
   背景：初始隐藏态(opacity:0)由第 10 行内联脚本加 .js 触发，
   解除隐藏靠页面底部 IntersectionObserver 补 .is-in。
   product4 页 `<h2>` 畸形嵌套(块级元素套在 h2 内)导致 DOM 重排异常，
   底部脚本执行被推迟，.is-in 迟迟不挂 → 整块 .xy-detail 永久透明。
   兜底：2.5s 后无条件显示，不依赖任何 JS。 */
@keyframes xy-reveal-fallback{to{opacity:1;transform:none}}
html.js [data-reveal]{animation:xy-reveal-fallback .62s ease 1s forwards}


/* ==========================================================================
   3. 按钮（全站通用）
   ========================================================================== */
.xy-btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}
.xy-btn{
  display:inline-flex;align-items:center;gap:9px;
  height:50px;padding:0 28px;border-radius:999px;
  font-size:16px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,background .22s ease,border-color .22s ease;
}
.xy-btn--brand{background:var(--brand);color:#231400;box-shadow:0 16px 36px rgba(255,153,0,.30)}
.xy-btn--brand:hover{background:#ffa81f;transform:translateY(-2px);box-shadow:0 20px 44px rgba(255,153,0,.40)}
.xy-btn--ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.26)}
.xy-btn--ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.46);transform:translateY(-2px)}
.xy-btn--ink{background:var(--ink);color:#fff}
.xy-btn--ink:hover{background:#1b2537;transform:translateY(-2px)}
.xy-btn--line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.xy-btn--line:hover{border-color:var(--brand);color:var(--brand-ink);transform:translateY(-2px)}
.xy-btn svg{width:17px;height:17px;flex:0 0 auto}


/* ==========================================================================
   4. 顶部导航（常驻深色，与 Hero 同色系，logo 黑底自然融入）
   --------------------------------------------------------------------------
   ★ 正式版适配：菜单 HTML 的「骨架 ul>li>a」由控制器 buildNavHtml() 输出
     （数据源 fa_nav_item，type=nav），CSS 不重写渲染器，只从 .xy-menu 往下打：
       .xy-menu > ul > li > a
       .xy-menu > ul > li > ul.nav-product > li > a      ← 二级下拉
   ========================================================================== */
.xy-nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:72px;
  background:rgba(11,21,38,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.xy-nav.is-stuck{
  background:rgba(9,17,31,.94);
  border-bottom-color:var(--dark-line);
  box-shadow:0 12px 34px rgba(6,12,24,.30);
}
.xy-nav__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  height:72px;display:flex;align-items:center;gap:28px;
}
.xy-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.xy-brand__logo{height:40px;width:auto;mix-blend-mode:screen}   /* 黑底 key 掉，白字+橙块保留 */
.xy-brand__txt{display:flex;flex-direction:column;line-height:1.25}
.xy-brand__cn{color:#fff;font-size:15px;font-weight:600;letter-spacing:.02em}
.xy-brand__en{color:var(--dark-ink-soft);font-family:var(--font-en);font-size:10px;letter-spacing:.16em;text-transform:uppercase}

/* 菜单容器：内部 <ul> 由 PHP 输出，样式一律从 .xy-menu 往下打 */
.xy-menu{margin-left:auto}
.xy-menu>ul{display:flex;align-items:center;gap:4px}
.xy-menu>ul>li{position:relative}
.xy-menu>ul>li>a{
  display:block;padding:9px 15px;border-radius:999px;white-space:nowrap;
  color:rgba(255,255,255,.86);font-size:15px;
  transition:background .22s ease,color .22s ease;
}
.xy-menu>ul>li>a:hover{background:rgba(255,255,255,.09);color:#fff}
.xy-menu>ul>li>a.is-on{background:var(--brand-soft);color:#ffb545}

/* 二级下拉：★ 卡片式（2 列网格）—— 纯 hover 展开，不改 PHP 渲染器
   ★ 卡片编号（01…0N）用 CSS 计数器生成，不依赖 PHP 输出 → 后台加项自动编号
   ★ 卡片不写死内容，PHP 仍只输出 <ul><li><a>文本</a></li></ul> */
.xy-menu>ul>li>ul{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translate(-50%,-10px);
  display:grid;grid-template-columns:repeat(2,max-content);gap:10px;
  padding:14px;
  background:rgba(10,18,32,.97);
  border:1px solid var(--dark-line);border-radius:18px;
  box-shadow:0 28px 56px rgba(4,10,20,.46);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s ease,transform .24s ease,visibility .24s;
  counter-reset:subnav;
}
/* 悬停缓冲带：nav 与下拉之间有 12px 空隙，不加这块会「一移开就收」 */
.xy-menu>ul>li>ul::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.xy-menu>ul>li:hover>ul{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
/* ★ 最右一个带下拉的菜单：改成右对齐，避免窄屏（≤1280）时面板冲出视口、
   触发横向滚动条。实测 1440/1366 居中不溢出，1280 溢出 11px、1024 溢出 51px。 */
.xy-menu>ul>li:last-child>ul{left:auto;right:0;transform:translate(0,-10px)}
.xy-menu>ul>li:last-child:hover>ul{transform:translate(0,0)}
.xy-menu>ul>li>ul>li{counter-increment:subnav}
.xy-menu>ul>li>ul>li>a{
  display:flex;align-items:center;gap:11px;
  min-width:236px;min-height:60px;padding:12px 16px 12px 13px;
  border-radius:13px;white-space:nowrap;
  font-size:14.5px;color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s cubic-bezier(.22,1,.36,1);
}
.xy-menu>ul>li>ul>li>a::before{
  content:counter(subnav,decimal-leading-zero);
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-en);font-variant-numeric:tabular-nums;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#ffb545;background:rgba(255,153,0,.12);border:1px solid rgba(255,153,0,.26);
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.xy-menu>ul>li>ul>li>a:hover{
  background:rgba(255,153,0,.12);border-color:rgba(255,153,0,.46);color:#fff;
  transform:translateY(-2px);
}
.xy-menu>ul>li>ul>li>a:hover::before{background:var(--brand);color:#231400;border-color:var(--brand)}

.xy-nav__cta{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  height:40px;padding:0 20px;border-radius:999px;
  background:var(--brand);color:#231400;font-size:15px;font-weight:600;
  box-shadow:0 10px 24px rgba(255,153,0,.28);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,background .22s ease;
}
.xy-nav__cta:hover{background:#ffa81f;transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,153,0,.36)}

.xy-burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--dark-line);border-radius:12px;background:transparent;cursor:pointer;padding:0}
.xy-burger span{display:block;width:18px;height:2px;margin:0 auto;background:#fff;border-radius:2px}
.xy-burger span+span{margin-top:4px}

/* 移动端展开的菜单（.xy-burger 点击加 .is-open）——
   放在导航段而不是 §8 响应式段，避免脚本重跑时丢样式 */
@media (max-width:900px){
  .xy-menu.is-open{
    display:block;position:absolute;left:0;right:0;top:72px;margin:0;
    background:rgba(9,17,31,.98);border-bottom:1px solid var(--dark-line);
    padding:12px var(--gutter) 20px;max-height:calc(100vh - 72px);overflow-y:auto;
  }
  .xy-menu.is-open>ul{display:block}
  .xy-menu.is-open>ul>li{position:static}
  .xy-menu.is-open>ul>li>a{padding:12px 14px;border-radius:10px;font-size:15.5px}
  .xy-menu.is-open>ul>li>ul{
    position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;
    display:block;background:transparent;border:0;box-shadow:none;min-width:0;padding:0 0 4px 14px;
  }
  .xy-menu.is-open>ul>li>ul::before{display:none}
  /* 移动端下拉回到朴素列表：卡片外框 / 编号一律去掉 */
  .xy-menu.is-open>ul>li>ul>li>a{
    min-width:0;min-height:0;padding:9px 0;background:transparent;border:0;transform:none;
  }
  .xy-menu.is-open>ul>li>ul>li>a::before{display:none}
}


/* ==========================================================================
   5. 内页页头（固定导航下的深色带：面包屑 + 主标题 + 一句话）
   —— 与首页 Hero 同一套材料（同底色 / 同网格 / 同金色光束），保证全站是一家
   ========================================================================== */
.xy-pagehead{
  position:relative;overflow:hidden;
  padding:150px 0 74px;
  background:
    radial-gradient(900px 460px at 80% 0%, rgba(255,153,0,var(--hero-glow-a)), transparent 62%),
    radial-gradient(720px 300px at 26% 110%, rgba(255,153,0,var(--hero-glow-b)), transparent 66%),
    linear-gradient(168deg,var(--dark-1) 0%,var(--dark-2) 54%,var(--dark-3) 100%);
  color:var(--dark-ink);
}
.xy-pagehead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.042) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.042) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(76% 68% at 46% 34%,#000 0%,transparent 100%);
  mask-image:radial-gradient(76% 68% at 46% 34%,#000 0%,transparent 100%);
}
/* 金色光束：与首页 Hero 同源（顶点在画面右上角「外」，角度按坐标实算）
   内页比首页克制两档（首页 .31/.21/.15）——
   页头只有 Hero 一半高，同样的透明度在短框里会显得更亮、更像"条"而不是"光" */
.xy-pagehead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from 190deg at 83% -2%,
      transparent 0deg 5deg,
      rgba(var(--ray),.15) 5deg 9deg,
      transparent 9deg 21deg,
      rgba(var(--ray),.09) 21deg 24.5deg,
      transparent 24.5deg 44deg,
      rgba(var(--ray),.06) 44deg 47deg,
      transparent 47deg 90deg
    );
  filter:blur(11px);
  -webkit-mask-image:radial-gradient(205% 165% at 83% -2%, transparent 0%, #000 15%, #000 78%, transparent 110%);
  mask-image:radial-gradient(205% 165% at 83% -2%, transparent 0%, #000 15%, #000 78%, transparent 110%);
}
.xy-pagehead .xy-wrap{position:relative;z-index:2}
.xy-pagehead .xy-kicker{color:#ffb545}
.xy-pagehead h1{
  font-size:clamp(1.95rem,3.6vw,2.85rem);
  line-height:1.2;letter-spacing:-.012em;font-weight:700;color:#fff;
  margin-bottom:14px;
}
.xy-pagehead p{font-size:16.5px;line-height:1.85;color:var(--dark-ink-soft);max-width:720px}

/* 面包屑 */
.xy-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;
  color:rgba(255,255,255,.50);margin-bottom:18px}
.xy-crumb a{color:rgba(255,255,255,.74);transition:color .2s ease}
.xy-crumb a:hover{color:#ffb545}
.xy-crumb i{font-style:normal;opacity:.55}


/* ==========================================================================
   6. 页脚
   --------------------------------------------------------------------------
   ★ 正式版适配：页脚链接 HTML 由控制器 buildBottomHtml() 输出（数据源 fa_nav_item，
     type=bottom，通过 ref_id 挂接顶部）。真实结构：
       .xy-foot__nav > ul > li > a
                                   > ul > li > a > span
   ========================================================================== */
.xy-foot{
  background:linear-gradient(135deg,#102036 0%,#0c1829 48%,#08111d 100%);
  color:var(--dark-ink-soft);padding:64px 0 0;
}
.xy-foot__top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.85fr);
  gap:56px;padding-bottom:44px;border-bottom:1px solid var(--dark-line);
}
.xy-foot__logo{height:40px;width:auto;mix-blend-mode:screen;margin-bottom:22px}
.xy-foot__tel-k{font-size:13.5px;color:var(--dark-ink-soft)}
.xy-foot__tel-v{
  font-family:var(--font-en);font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.25;margin-bottom:14px;
}
.xy-foot__tel-v a{color:#fff}
.xy-foot__line{font-size:14px;line-height:1.9}
.xy-foot__line a:hover{color:#ffb545}

/* 页脚链接组：真实结构 ul>li>a + 内嵌 ul>li>a>span */
.xy-foot__nav>ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.xy-foot__nav>ul>li>a{display:block;color:#fff;font-size:15px;font-weight:600;margin-bottom:16px}
.xy-foot__nav>ul>li>ul>li{margin-bottom:11px}
.xy-foot__nav>ul>li>ul>li>a{
  display:inline-block;font-size:14px;color:var(--dark-ink-soft);
  transition:color .22s ease,transform .22s ease;
}
.xy-foot__nav>ul>li>ul>li>a:hover{color:#ffb545;transform:translateX(4px)}

.xy-foot__bot{
  padding:22px 0 26px;display:flex;flex-wrap:wrap;gap:10px 26px;
  justify-content:space-between;font-size:13px;color:#6f7d94;
}
.xy-foot__bot a{color:#6f7d94}
.xy-foot__bot a:hover{color:#ffb545}


/* ==========================================================================
   8. 响应式（共享部分；各页自己的栅格规则写在各页的 <style> 里）
   ========================================================================== */
@media (max-width:900px){
  :root{--band:64px}
  .xy-menu,.xy-nav__cta{display:none}
  .xy-burger{display:block}
  .xy-pagehead{padding:126px 0 60px}
  /* 窄屏上固定 px 的光斑与百分比遮罩会被相对放大（900px 光斑在 390px 宽里几乎满屏），
     同一套参数会显得过浓 —— 统一降一档，别改桌面端参数 */
  :root{--hero-glow-a:.17;--hero-glow-b:.11}
  .xy-pagehead::after{opacity:.62}
  .xy-foot__top{grid-template-columns:1fr;gap:36px}
  .xy-foot__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .xy-foot__nav{grid-template-columns:1fr}
}


/* ==========================================================================
   9. 内页通用组件（首页未使用；9 个内页共用，避免每页各写一套）
   ========================================================================== */

/* --- 9.1 栅格 --- */
.xy-cards{display:grid;gap:24px}
.xy-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.xy-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.xy-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* --- 9.2 通用白卡 --- */
.xy-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:30px;overflow:hidden;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,border-color .32s ease;
}
.xy-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(255,153,0,.40)}
.xy-card h3{font-size:19px;font-weight:700;line-height:1.4;margin-bottom:10px}
.xy-card p{font-size:14.5px;line-height:1.85;color:var(--ink-soft)}
.xy-card__num{
  font-family:var(--font-en);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--brand-ink);
  display:block;margin-bottom:12px;
}
.xy-card__ico{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand-deep);margin-bottom:18px;
}
.xy-card__ico svg{width:23px;height:23px}

/* --- 9.3 产品 / 方案卡（顶部图形区不依赖素材，与首页产品卡同源） --- */
.xy-tile{
  position:relative;display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,border-color .32s ease;
}
.xy-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(255,153,0,.45)}
.xy-tile__pic{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(152deg,#16243c 0%,#0e1a2c 58%,#0b1522 100%);
  display:flex;align-items:center;justify-content:center;
}
.xy-tile__pic::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.058) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.058) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(80% 80% at 30% 28%,#000 0%,transparent 100%);
  mask-image:radial-gradient(80% 80% at 30% 28%,#000 0%,transparent 100%);
}
.xy-tile__pic::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(220px 160px at 86% 12%, rgba(255,153,0,.30), transparent 70%);
  transition:opacity .35s ease;
}
.xy-tile:hover .xy-tile__pic::after{opacity:.68}
.xy-tile__abbr{
  position:relative;z-index:2;font-family:var(--font-en);
  font-size:44px;font-weight:800;letter-spacing:.01em;line-height:1;
  color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.74);
  transition:transform .45s cubic-bezier(.22,1,.36,1),-webkit-text-stroke-color .35s ease;
}
.xy-tile:hover .xy-tile__abbr{transform:translateY(-4px);-webkit-text-stroke-color:rgba(255,181,69,.92)}
.xy-tile__body{padding:24px 26px 28px}
.xy-tile__body h3{font-size:19px;font-weight:700;margin-bottom:10px}
.xy-tile__body p{font-size:14.5px;line-height:1.8;color:var(--ink-soft)}
.xy-tile__more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:14px;font-weight:600;color:var(--brand-deep);
}
.xy-tile__more svg{width:15px;height:15px;transition:transform .25s ease}
.xy-tile:hover .xy-tile__more svg{transform:translateX(4px)}

/* --- 9.4 分类筛选（纯 CSS，无 JS：用 radio + :checked 控制显隐） --- */
.xy-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px}
.xy-filter label{
  display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink-soft);
  font-size:14.5px;cursor:pointer;transition:all .22s ease;
}
.xy-filter label:hover{border-color:var(--brand);color:var(--brand-ink)}
.xy-filter input{position:absolute;opacity:0;pointer-events:none}

/* --- 9.5 详情页两栏 + 侧栏 --- */
.xy-detail{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:56px;align-items:start}
.xy-side{position:sticky;top:96px;display:grid;gap:20px}
.xy-side__box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.xy-side__box h4{font-size:15px;font-weight:700;margin-bottom:12px}
.xy-side__list a{
  display:block;padding:10px 14px;border-radius:10px;
  font-size:14.5px;color:var(--ink-soft);transition:all .2s ease;
}
.xy-side__list a:hover{background:#fff;color:var(--brand-ink);box-shadow:var(--shadow-soft)}
.xy-side__list a.is-on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.xy-side__cta{background:var(--dark-1);border-color:transparent;color:var(--dark-ink-soft)}
.xy-side__cta h4{color:#fff}
.xy-side__cta p{font-size:13.5px;line-height:1.8;margin-bottom:16px}

/* --- 9.6 富文本正文（详情页；后台富文本输出的内容直接套用） --- */
.xy-prose{font-size:16px;line-height:1.95;color:var(--ink-soft)}
.xy-prose>*:first-child{margin-top:0}
.xy-prose h2{font-size:22px;font-weight:700;color:var(--ink);line-height:1.4;margin:36px 0 16px}
.xy-prose h3{font-size:18px;font-weight:700;color:var(--ink);line-height:1.5;margin:28px 0 12px}
.xy-prose h4{font-size:16px;font-weight:700;color:var(--ink);margin:22px 0 10px}
.xy-prose p{margin:0 0 18px}
.xy-prose ul,.xy-prose ol{margin:0 0 18px;padding-left:24px}
.xy-prose ul{list-style:disc}
.xy-prose ol{list-style:decimal}
.xy-prose li{margin-bottom:9px}
.xy-prose strong,.xy-prose b{color:var(--ink);font-weight:600}
.xy-prose a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.xy-prose img{border-radius:var(--radius-md);margin:22px 0;max-width:100%;height:auto}
.xy-prose blockquote{
  margin:22px 0;padding:16px 22px;border-left:3px solid var(--brand);
  background:var(--surface-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink-soft);
}
.xy-prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.xy-prose th,.xy-prose td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.xy-prose th{background:var(--surface-2);color:var(--ink);font-weight:600}

/* --- 9.7 承诺 / 条款列表（服务中心用） --- */
.xy-terms{display:grid;gap:14px}
.xy-term{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px 26px;transition:border-color .25s ease,box-shadow .25s ease;
}
.xy-term:hover{border-color:rgba(255,153,0,.38);box-shadow:var(--shadow-soft)}
.xy-term__n{
  font-family:var(--font-en);font-variant-numeric:tabular-nums;
  font-size:20px;font-weight:800;color:var(--brand);line-height:1.5;
}
.xy-term h3{font-size:16.5px;font-weight:700;margin-bottom:8px}
.xy-term p{font-size:14.5px;line-height:1.85;color:var(--ink-soft)}

/* --- 9.8 联系卡片 --- */
.xy-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.xy-contact__item{
  display:flex;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-md);padding:24px;
}
.xy-contact__ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  background:var(--brand-soft);color:var(--brand-deep);
  display:flex;align-items:center;justify-content:center;
}
.xy-contact__ico svg{width:21px;height:21px}
.xy-contact__k{font-size:13px;color:var(--ink-faint);margin-bottom:5px}
.xy-contact__v{font-size:16px;font-weight:600;color:var(--ink);line-height:1.55;word-break:break-all}

/* --- 9.9 证书卡（荣誉资质） --- */
.xy-cert{
  display:flex;flex-direction:column;gap:14px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.xy-cert:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(255,153,0,.40)}
.xy-cert__seal{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#fff3e0,#ffe3bd);color:var(--brand-deep);
  border:1px solid rgba(255,153,0,.34);
}
.xy-cert__seal svg{width:25px;height:25px}
/* 证书扫描件缩略图（展示真实的软著登记证书；点击可开原图）——
   用 contain 不裁切，保证证书上的名称/编号能看清 */
.xy-cert__pic{
  display:block;width:100%;height:210px;border-radius:10px;overflow:hidden;
  background:#f7f8fa;border:1px solid var(--line);
}
.xy-cert__pic img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.xy-cert__pic:hover img{transform:scale(1.03)}
.xy-cert h3{font-size:16px;font-weight:700;line-height:1.5}
.xy-cert p{font-size:13px;color:var(--ink-faint);font-family:var(--font-en);letter-spacing:.06em}

/* --- 9.10 合作 logo 墙（合作伙伴页，比首页客户墙更大、带名称） --- */
.xy-wall{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
}
.xy-wall>div{
  background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:28px 16px;min-height:158px;
  transition:background .25s ease;
}
.xy-wall>div:hover{background:#fffdf7}
.xy-wall img{
  max-height:54px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .3s ease,opacity .3s ease;
}
.xy-wall>div:hover img{filter:none;opacity:1}
.xy-wall span{font-size:13.5px;color:var(--ink-soft)}

/* --- 9.11 表单（留言 / 咨询） --- */
.xy-form{display:grid;gap:16px}
.xy-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.xy-field label{display:block;font-size:13.5px;color:var(--ink-soft);margin-bottom:7px}
.xy-field input,.xy-field textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:13px 15px;font-size:15px;font-family:inherit;color:var(--ink);
  background:#fff;transition:border-color .2s ease,box-shadow .2s ease;
}
.xy-field input:focus,.xy-field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.xy-field textarea{min-height:132px;resize:vertical}
.xy-form__note{font-size:13px;color:var(--ink-faint)}

/* --- 9.12 分页 --- */
.xy-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:44px}
.xy-pager a,.xy-pager span{
  min-width:40px;height:40px;padding:0 12px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14.5px;font-family:var(--font-en);color:var(--ink-soft);
  border:1px solid var(--line-strong);background:#fff;
}
.xy-pager a:hover{border-color:var(--brand);color:var(--brand-ink)}
.xy-pager .is-on{background:var(--brand);border-color:var(--brand);color:#231400;font-weight:700}

/* --- 9.13 CTA 收口（全站共用：深色块 + 左侧文案 + 右侧双按钮 + 电话） --- */
.xy-cta{
  position:relative;overflow:hidden;
  padding:72px 60px;border-radius:var(--radius-xl);
  background:
    radial-gradient(560px 300px at 88% 12%, rgba(255,153,0,.24), transparent 62%),
    linear-gradient(135deg,#1b2333 0%,#101825 58%,#0a111c 100%);
  color:#fff;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:44px;align-items:center;
  box-shadow:0 40px 90px rgba(10,17,28,.34);
}
.xy-cta::after{
  content:"";position:absolute;right:-90px;bottom:-120px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,153,0,.22),transparent 68%);
}
.xy-cta__in{position:relative;z-index:2}
.xy-cta h2{font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.25;font-weight:700;margin-bottom:14px}
.xy-cta p{color:var(--dark-ink-soft);font-size:16px;line-height:1.8;max-width:620px}
.xy-cta__act{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px}
.xy-cta__act .xy-btn{width:100%;justify-content:center}
.xy-cta__tel{
  display:flex;align-items:center;gap:12px;margin-top:4px;
  padding:16px 22px;border-radius:var(--radius-md);
  background:rgba(255,255,255,.06);border:1px solid var(--dark-line);
}
.xy-cta__tel svg{width:20px;height:20px;color:var(--brand);flex:0 0 auto}
.xy-cta__tel .k{font-size:12.5px;color:var(--dark-ink-soft);line-height:1.3}
.xy-cta__tel .v{
  font-family:var(--font-en);font-variant-numeric:tabular-nums;
  font-size:21px;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.3;
}

/* --- 9.14 数据条（关于我们 / 首页同款白底版） --- */
.xy-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.xy-nums>div{background:#fff;padding:28px 26px}
.xy-nums .n{font-family:var(--font-en);font-variant-numeric:tabular-nums;
  font-size:34px;font-weight:700;line-height:1.1;color:var(--ink)}
.xy-nums .n span{font-size:17px;color:var(--brand-deep);margin-left:2px}
.xy-nums .k{font-size:14px;color:var(--ink-soft);margin-top:8px}


/* ==========================================================================
   10. 内页组件的响应式
   ========================================================================== */
@media (max-width:1120px){
  .xy-cta{grid-template-columns:1fr;gap:32px;padding:52px 40px}
  .xy-detail{grid-template-columns:1fr;gap:40px}
  .xy-side{position:static}
  .xy-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xy-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .xy-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .xy-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xy-contact{grid-template-columns:1fr}
  .xy-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xy-term{grid-template-columns:38px minmax(0,1fr);gap:14px;padding:18px 20px}
  .xy-term__n{font-size:17px}
}
@media (max-width:620px){
  .xy-cta{padding:40px 24px}
  .xy-cards--2,.xy-cards--3,.xy-cards--4{grid-template-columns:1fr}
  .xy-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xy-form__row{grid-template-columns:1fr}
  .xy-nums{grid-template-columns:1fr}
  .xy-card{padding:24px}
}