/* =========================================================
   OPENGAME — LIGHT THEME
   浅色系 · 纸感底 + 墨色字 + 渐变
   载入顺序：style.css → theme-light.css
   ========================================================= */

/* ---------------------------------------------------------
   0. 设计令牌
   --------------------------------------------------------- */
:root{
  /* 三元组：文字 / 叠加层 / 底色 / 阴影 */
  --fg: 24,23,26;
  --ov: 24,23,26;
  --bg: 246,243,236;
  --sh: 58,46,28;

  --ink:#f6f3ec;          /* 页面底色 */
  --ink-2:#fbf9f4;        /* 卡片 / 浅块 */
  --ink-3:#efe9dc;        /* 更深的浅块 */
  --white:#141319;        /* 「最亮的字」在浅色下 = 墨 */
  --muted:rgba(24,23,26,.74);
  --muted-2:rgba(24,23,26,.67);
  --line:rgba(24,23,26,.13);
  --line-2:rgba(24,23,26,.24);

  /* 强调色：提饱和、压明度，保证浅底可读 */
  --cyan:#0a7a6a;        /* 文字安全：纸底 4.7:1 */
  --violet:#5a3cf0;
  --magenta:#c21a5e;
  --amber:#8f5800;
  --lime:#4d7200;
  --blue:#1e5cd6;

  /* 填充/渐变用的鲜艳版本（不做正文色） */
  --cyan-2:#12b39c;
  --violet-2:#7b5cff;
  --amber-2:#e59a10;

  /* 纸与墨 */
  --paper:#f6f3ec;
  --paper-2:#fbf9f4;
  --paper-3:#efe9dc;
  --ink-solid:#121117;
}

/* ---------------------------------------------------------
   1. 基底：纸感 + 多层渐变
   --------------------------------------------------------- */
html{background:var(--paper);}

body{
  background:
    radial-gradient(1100px 700px at 8% -8%, rgba(90,60,240,.10), transparent 62%),
    radial-gradient(900px 620px at 96% 4%, rgba(12,155,134,.10), transparent 58%),
    radial-gradient(760px 620px at 70% 96%, rgba(207,29,100,.07), transparent 62%),
    linear-gradient(180deg,#f8f5ee 0%,#f4f1e8 42%,#f7f4ed 100%);
  background-attachment:fixed;
  color:var(--white);
}

::selection{background:rgba(90,60,240,.92);color:#fff;}

.grain{opacity:.028;mix-blend-mode:multiply;}

::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:#eae4d7;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#c9c1b1,#b3aa98);
  border:3px solid #eae4d7;border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--violet),#4326c9);}

.scroll-progress{background:rgba(var(--ov),.07);}

/* ---------------------------------------------------------
   2. 排版微调（浅底需要更紧的字距、更实的笔画）
   --------------------------------------------------------- */
body{letter-spacing:.005em;}
.sec-title,.hero-title,.v-title h2,.cta-band h2{letter-spacing:-.042em;}
.sec-note,.prose p,.legal p,.legal li{letter-spacing:.014em;}

.kicker{color:rgba(var(--fg),.67);}
.kicker span{color:var(--violet);}
.dim{color:rgba(var(--fg),.67);}

.hl .stroke{
  -webkit-text-stroke:clamp(1.2px,.2vw,2.4px) rgba(18,17,23,.62);
  color:rgba(246,243,236,.72);
  paint-order:stroke fill;
}

/* ---------------------------------------------------------
   3. 导航：磨砂纸面
   --------------------------------------------------------- */
.nav{
  background:linear-gradient(180deg,rgba(248,245,238,.94) 0%,rgba(248,245,238,.72) 72%,rgba(248,245,238,0) 100%);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
}
.nav.solid{
  background:linear-gradient(180deg,rgba(249,246,239,.96),rgba(247,243,235,.9));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(var(--ov),.12);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 30px -24px rgba(var(--sh),.55);
}

.nav-links a{color:rgba(var(--fg),.66);}
.nav-links a:hover,.nav-links a.on{color:var(--white);}
.nav-links a::after{
  background:rgba(var(--fg),.78);
  height:1.5px;
}
.nav-links a::before{color:var(--cyan);}
/* 当前页只保留加粗与下划线，避免小号序号悬在顶部像渲染错误 */
.nav-links a.on::before{opacity:0;}
.nav-right{border-left-color:rgba(var(--ov),.12);}
.nav-phone{color:rgba(var(--fg),.7);}
.nav-phone:hover{color:var(--white);}

.logo-text em{color:var(--violet);}
.logo-mark{color:var(--violet);}

/* 汉堡按钮 */
.burger span{background:var(--white);}

/* 移动菜单 */
.mobile-menu{
  background:linear-gradient(180deg,#fbf9f4,#f3efe5);
  border-bottom:1px solid rgba(var(--ov),.12);
}
.mobile-menu a{color:rgba(var(--fg),.7);border-bottom-color:rgba(var(--ov),.08);}
.mobile-menu a:hover,.mobile-menu a.on{color:var(--violet);}
.mobile-menu a span{color:rgba(var(--fg),.6);}
.mm-foot{border-top-color:rgba(var(--ov),.1);}
.mm-foot a{color:var(--violet);}

/* ---------------------------------------------------------
   4. 按钮：三层结构 —— 底渐变 / 内高光 / 外投影
   --------------------------------------------------------- */
.btn{
  background:linear-gradient(180deg,#ffffff 0%,#f7f3ea 100%);
  border:1px solid rgba(var(--ov),.15);
  color:var(--white);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(var(--sh),.10),
    0 10px 24px -16px rgba(var(--sh),.55);
  transition:transform .38s var(--ease), box-shadow .38s var(--ease),
             background .38s var(--ease), border-color .38s, color .38s;
}
.btn::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.9) 48%,transparent 64%);
  transform:translateX(-130%);
  transition:transform .9s var(--ease-out);
  opacity:.5;
}
.btn:hover::before{transform:translateX(130%);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.995);}

.btn-primary{
  background:linear-gradient(180deg,#2c2b38 0%,#121117 62%,#0b0b10 100%);
  border-color:#121117;
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 2px 6px rgba(var(--sh),.22),
    0 18px 34px -20px rgba(var(--sh),.85);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#6a4bf6 0%,#5a3cf0 55%,#4a2fdc 100%);
  border-color:#4a2fdc;color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 4px 10px rgba(90,60,240,.22),
    0 20px 40px -18px rgba(90,60,240,.75);
}

.btn-ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.55));
  border-color:rgba(var(--ov),.18);
  color:var(--white);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
.btn-ghost:hover{
  background:linear-gradient(180deg,#fff,#fffdf8);
  border-color:rgba(var(--ov),.42);
  box-shadow:0 1px 2px rgba(var(--sh),.08),0 14px 28px -18px rgba(var(--sh),.6);
}

.btn-light{
  background:linear-gradient(180deg,#fff,#f4f0e6);
  border-color:rgba(255,255,255,.9);
  color:#121117;
}
.btn-light:hover{background:#fff;color:var(--violet);border-color:#fff;}

/* 深色块里的按钮反相 */
.cta-band .btn-primary,
.footer .btn-primary{
  background:linear-gradient(180deg,#fff,#f2ede2);
  border-color:rgba(255,255,255,.95);
  color:#121117;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 16px 32px -18px rgba(0,0,0,.55);
}
.cta-band .btn-primary:hover,
.footer .btn-primary:hover{
  background:#fff;color:var(--violet);border-color:#fff;
}

/* 筛选 / 标签选中态 */
.filters button{color:rgba(var(--fg),.6);border-color:rgba(var(--ov),.16);background:rgba(255,255,255,.5);}
.filters button:hover{color:var(--white);border-color:rgba(var(--ov),.34);background:#fff;}
.filters button.on{
  background:linear-gradient(180deg,#2c2b38,#121117);
  color:#fff;border-color:#121117;
  box-shadow:0 8px 20px -14px rgba(var(--sh),.9);
}
.chip{color:rgba(var(--fg),.66);border-color:rgba(var(--ov),.16);}
.chip.on{background:#121117;color:#fff;border-color:#121117;}

/* ---------------------------------------------------------
   5. Hero：左侧纸面 + 右侧画面对角切
   --------------------------------------------------------- */
.hero{background:var(--paper);}
.hero-canvas{display:none !important;}
html.has-webgl .hero-bg img{visibility:visible;}

.hero-bg{
  inset:0 0 0 24%;
  clip-path:polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-bg img{filter:saturate(1.02) contrast(1.03) brightness(1.02);}

.hero-vignette{
  background:
    linear-gradient(90deg,
      var(--paper) 0%,
      rgba(var(--bg),.98) 22%,
      rgba(var(--bg),.88) 34%,
      rgba(var(--bg),.62) 45%,
      rgba(var(--bg),.16) 55%,
      rgba(var(--bg),0) 64%),
    linear-gradient(180deg,
      rgba(var(--bg),.30) 0%,
      rgba(var(--bg),0) 18%,
      rgba(var(--bg),0) 54%,
      rgba(var(--bg),.55) 82%,
      var(--paper) 98%);
}

.hero-inner{max-width:1220px;}
.eyebrow{color:rgba(var(--fg),.67);}
.eyebrow .dot{background:var(--cyan);box-shadow:0 0 0 0 rgba(12,155,134,.55);}
.hero-sub{color:rgba(var(--fg),.76);}
.hero-tags span{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(var(--ov),.14);
  color:rgba(var(--fg),.66);
  box-shadow:0 1px 0 #fff inset,0 6px 16px -12px rgba(var(--sh),.5);
}
.hero-scroll{color:rgba(var(--fg),.67);}
.hero-scroll i{background:rgba(var(--ov),.28);}

/* ---------------------------------------------------------
   6. 信任条 / 数据条
   --------------------------------------------------------- */
.trust{border-top-color:rgba(var(--ov),.1);border-bottom-color:rgba(var(--ov),.1);}
.trust li{color:rgba(var(--fg),.66);}
.trust li:hover{color:var(--white);}
.trust > span{color:rgba(var(--fg),.67);}

.stats{border-color:rgba(var(--ov),.12);background:rgba(var(--ov),.1);}
.stat{background:rgba(251,249,244,.92);}
.stat b{letter-spacing:-.05em;}
.stat p{color:rgba(var(--fg),.67);}

/* ---------------------------------------------------------
   7. 区块与卡片
   --------------------------------------------------------- */
.sec.tint{
  background:linear-gradient(180deg,#fbf9f4 0%,#f1ece1 58%,#fbf9f4 100%);
  border-top:1px solid rgba(var(--ov),.1);
  border-bottom:1px solid rgba(var(--ov),.06);
}

.svc-grid,.sol-grid,.deliver-grid,.formula,.stats,.est-kv{
  background:rgba(var(--ov),.12);
}
.price-wrap{background:transparent;}

.svc,.sol,.fm-row,.deliver-grid > *{
  background:var(--paper-2);
}

.wcard,.news-card,.model,.quote,.side-card,.cert,.est-tip,.est-card,.job,.card{
  background:linear-gradient(180deg,#ffffff 0%,#fbf8f1 100%);
  border-color:rgba(var(--ov),.12);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(var(--sh),.05),
    0 14px 34px -26px rgba(var(--sh),.6);
}
.wcard:hover,.news-card:hover,.model:hover{
  border-color:rgba(var(--ov),.26);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 6px rgba(var(--sh),.07),
    0 26px 54px -30px rgba(var(--sh),.55);
}
.card:hover{
  box-shadow:inset 0 1px 0 #fff,0 26px 54px -30px rgba(var(--sh),.6);
}

.model.rec{
  background:#fffdf9;
  border-color:rgba(var(--ov),.36);
  box-shadow:0 1px 0 #fff inset,0 20px 44px -36px rgba(var(--sh),.95);
}
.model.rec::before{background:rgba(var(--ov),.55);}
.model-flag{
  background:#141319;
  color:#fff;
  box-shadow:none;
  border-radius:2px;
  font-size:9px;
  letter-spacing:.16em;
}

/* 评价卡：取消彩虹顶线与彩色头像，改用统一的克制样式 */
.quote{position:relative;}
.quote::before{content:none;}
.quote::after{
  content:'';position:absolute;left:clamp(26px,3vw,36px);right:clamp(26px,3vw,36px);top:0;
  height:1px;background:rgba(var(--ov),.16);
}
/* 用 .q-who .q-av 提高优先级，避免被 .q-who span 的字号与颜色覆盖 */
.q-who .q-av{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--fg),.92);
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
  margin-top:0;
}
.quote:hover{border-color:rgba(var(--ov),.26);}

/* 图片占位不再纯黑 */
.card,.wcard,.news-card,.ph-screen,.shots img{background:var(--paper-3);}

/* ---------------------------------------------------------
   8. 表格
   --------------------------------------------------------- */
.price thead th{color:rgba(90,60,240,.9);border-bottom-color:rgba(var(--ov),.2);}
.price tbody td{border-bottom-color:rgba(var(--ov),.09);}
.price tbody tr:hover{background:rgba(255,255,255,.7);}
.price .p-name small{color:rgba(var(--fg),.67);}
.price .p-num{color:var(--cyan);}
.price .p-time{color:rgba(var(--fg),.78);}

.cmp thead th{color:rgba(var(--fg),.67);border-bottom-color:rgba(var(--ov),.2);}
.cmp tbody th{border-bottom-color:rgba(var(--ov),.09);}
.cmp tbody td{border-bottom-color:rgba(var(--ov),.09);color:rgba(var(--fg),.67);}
.cmp tbody td.rec{
  background:linear-gradient(180deg,rgba(12,155,134,.09),rgba(12,155,134,.03));
  border-left-color:rgba(12,155,134,.2);
  border-right-color:rgba(12,155,134,.2);
  color:rgba(var(--fg),.86);
}
.cmp thead th.rec{
  background:linear-gradient(180deg,rgba(12,155,134,.16),rgba(12,155,134,.02));
  color:var(--cyan);
}
.cmp tbody td.rec b{color:#0b3d36;}
.cmp tbody tr:hover td{background:rgba(255,255,255,.6);}
.cmp tbody tr:hover td.rec{background:rgba(12,155,134,.13);}
.cmp-note a{color:var(--cyan);}
.cmp-note a:hover{color:var(--violet);border-bottom-color:var(--violet);}

.matrix thead th{color:rgba(var(--fg),.66);border-bottom-color:rgba(var(--ov),.2);}
.matrix thead th:first-child{color:rgba(90,60,240,.95);}
.matrix th,.matrix td{border-bottom-color:rgba(var(--ov),.09);}
.matrix tbody tr:hover{background:rgba(255,255,255,.62);}
.matrix-note{color:rgba(var(--fg),.67);}
.matrix td.n{color:rgba(var(--fg),.34);}

/* ---------------------------------------------------------
   9. 表单
   --------------------------------------------------------- */
.field label{color:rgba(var(--fg),.67);}
.field input,.field textarea,.field select{
  background-color:#fff;
  border-color:rgba(var(--ov),.18);
  color:var(--white);
  box-shadow:inset 0 1px 2px rgba(var(--sh),.05),0 1px 0 #fff;
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(var(--ov),.3);}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--cyan);
  background-color:#fff;
  box-shadow:0 0 0 3px rgba(12,155,134,.14),inset 0 1px 2px rgba(var(--sh),.04);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(var(--fg),.67);}
.field select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.2l5 5 5-5' stroke='%2318171a' stroke-opacity='.55' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field select option{background:#fff;color:var(--white);}

.opt span{
  background:#fff;border-color:rgba(var(--ov),.18);color:rgba(var(--fg),.67);
}
.opt:hover span{border-color:rgba(var(--ov),.38);}
.opt input:checked + span{
  background:linear-gradient(180deg,#e9fbf7,#f4fffd);
  border-color:var(--cyan);color:#0b6f61;
  box-shadow:0 4px 14px -10px rgba(12,155,134,.8);
}

.form-msg{
  border-color:rgba(12,155,134,.35);
  background:linear-gradient(180deg,rgba(12,155,134,.09),rgba(12,155,134,.04));
}
.form-msg.bad{border-color:rgba(207,29,100,.35);background:rgba(207,29,100,.06);}

/* ---------------------------------------------------------
   10. 在线估价器
   --------------------------------------------------------- */
.es-group{border-bottom-color:rgba(var(--ov),.1);}
.es-head h3::before{color:rgba(12,155,134,.9);}
.es-box{
  background:#fff;
  border-color:rgba(var(--ov),.16);
  box-shadow:0 1px 0 #fff inset,0 1px 2px rgba(var(--sh),.04);
}
.es-box b{color:rgba(var(--fg),.86);}
.es-box i{color:rgba(var(--fg),.67);}
.es-opt:hover .es-box{border-color:rgba(var(--ov),.30);background:#fffdf8;}
.es-opt input:checked + .es-box{
  border-color:rgba(var(--fg),.62);
  background:#fff;
  box-shadow:0 0 0 1px rgba(var(--fg),.62),0 10px 22px -20px rgba(var(--sh),.95);
}
.es-opt input:checked + .es-box b{color:#141319;}
.es-opt input:checked + .es-box i{color:rgba(var(--fg),.60);}
.es-opt input:checked + .es-box::after{box-shadow:none;width:6px;height:6px;top:12px;right:12px;}

.est-card{
  background:
    radial-gradient(120% 90% at 88% 0%,rgba(90,60,240,.13),transparent 60%),
    linear-gradient(180deg,#ffffff,#fbf8f1);
  border-color:rgba(var(--ov),.13);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 6px rgba(var(--sh),.06),
    0 30px 60px -34px rgba(var(--sh),.6);
}
.est-k{color:rgba(var(--fg),.67);}
.est-price{color:#121117;}
.est-price span{color:rgba(var(--fg),.6);}
.est-price i{color:rgba(var(--fg),.67);}
.est-note{color:rgba(var(--fg),.67);}
.est-kv{background:rgba(var(--ov),.1);border-color:rgba(var(--ov),.1);}
.est-kv > div{background:#fff;}
.est-kv dt{color:rgba(var(--fg),.67);}
.est-kv dd{color:#121117;}
.es-row span{color:rgba(var(--fg),.67);}
.es-row i{background:rgba(var(--ov),.11);height:4px;}
.es-row i u{background:var(--cyan);}
.es-row b{color:rgba(var(--fg),.67);}
.est-tip{background:linear-gradient(180deg,#fff,#fbf8f1);border-color:rgba(var(--ov),.1);}
.est-tip p{color:rgba(var(--fg),.67);}
.est-tip b{color:var(--cyan);}
.est-tip b:last-of-type{color:var(--amber);}
.est-tip b:first-of-type{color:var(--cyan);}
.est-msg{color:var(--cyan);}

.fm-row{background:#fff;}
.fm-row:hover{background:#fdfbf6;}
.fm-row b{color:#121117;}
.fm-row p{color:rgba(var(--fg),.67);}
.fm-row span{
  color:rgba(var(--fg),.76);-webkit-text-stroke:0;
  width:21px;height:21px;border-radius:50%;
  border:1px solid rgba(var(--ov),.4);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-weight:500;font-size:10.5px;
  letter-spacing:0;line-height:1;align-self:start;margin-top:1px;
  font-variant-numeric:tabular-nums;
}
.formula-out{
  border:1px solid rgba(var(--ov),.17);
  border-left:3px solid rgba(var(--fg),.72);
  border-radius:0 12px 12px 0;
  background:#fbf9f4;
  color:rgba(var(--fg),.78);
}

/* ---------------------------------------------------------
   11. 行业方案
   --------------------------------------------------------- */
.vert{border-top-color:rgba(var(--ov),.1);}
.v-head{border-bottom-color:rgba(var(--ov),.14);}
.v-num{-webkit-text-stroke:1.3px var(--va);opacity:.8;}
.v-en{color:rgba(var(--fg),.6);}
.v-tags i{background:rgba(255,255,255,.7);border-color:rgba(var(--ov),.12);color:rgba(var(--fg),.6);}
.v-who{border-left-color:rgba(var(--ov),.16);}
.v-h{color:rgba(var(--fg),.67);}
.v-list b{color:rgba(var(--fg),.95);}
.v-list span{color:rgba(var(--fg),.67);}
.v-foot{border-top-color:rgba(var(--ov),.1);}
.v-k{color:rgba(var(--fg),.6);}
.v-ds span{background:rgba(255,255,255,.75);border:1px solid rgba(var(--ov),.1);color:rgba(var(--fg),.66);}
.v-meta span{color:rgba(var(--fg),.67);}
.v-meta b{color:rgba(var(--fg),.92);}
.v-case{
  border-color:rgba(var(--ov),.18);
  background:linear-gradient(180deg,#fff,#faf7ef);
  box-shadow:0 1px 0 #fff inset,0 8px 20px -16px rgba(var(--sh),.6);
}
.v-case span{color:rgba(var(--fg),.67);}
.v-case b{color:rgba(var(--fg),.9);}
.v-case:hover{background:#fff;border-color:var(--va);box-shadow:0 12px 26px -18px rgba(var(--sh),.6);}

/* ---------------------------------------------------------
   12. 行业入口
   --------------------------------------------------------- */
.sol{background:var(--paper-2);}
.sol:hover{background:#fff;}
.sol p{color:rgba(var(--fg),.67);}
.sol-m{color:rgba(var(--fg),.67);}
.sol-all{
  background:
    radial-gradient(120% 100% at 100% 0%,rgba(90,60,240,.14),rgba(90,60,240,0) 58%),
    linear-gradient(180deg,#fbf9ff,#f7f4ff);
  box-shadow:inset 0 0 0 1px rgba(90,60,240,.18);
}
.sol-all h3{color:#121117;}
.sol-all p{color:rgba(var(--fg),.66);}
.sol-all::after{color:rgba(90,60,240,.85);}

/* ---------------------------------------------------------
   13. CTA 渐变带（打破原来的纯黑收尾）
   --------------------------------------------------------- */
.cta-band{
  position:relative;
  border-top:0;
  background:
    radial-gradient(78% 110% at 4% -14%,rgba(123,92,255,.30),transparent 58%),
    radial-gradient(78% 120% at 98% 112%,rgba(18,179,156,.22),transparent 56%),
    radial-gradient(52% 78% at 76% -6%,rgba(255,92,157,.12),transparent 52%),
    linear-gradient(158deg,#1a1822 0%,#121117 56%,#101016 100%);
  color:#fff;
  --fg:255,255,255;
  --ov:255,255,255;
  --white:#ffffff;
  --muted:rgba(255,255,255,.8);
  --muted-2:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.18);
  overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  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:64px 64px;
  mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 78%);
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.78);}

/* ---------------------------------------------------------
   14. 页脚：墨色收尾
   --------------------------------------------------------- */
.footer{
  background:
    radial-gradient(120% 120% at 90% 0%,rgba(90,60,240,.22),transparent 58%),
    radial-gradient(90% 100% at 0% 100%,rgba(12,155,134,.14),transparent 55%),
    #101016;
  color:#f4f1ea;
  --fg:244,241,234;
  --ov:255,255,255;
  --bg:16,16,22;
  --white:#f7f5ef;
  --muted:rgba(244,241,234,.72);
  --muted-2:rgba(244,241,234,.72);
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.2);
  --cyan:#3ee6cd;
  --violet:#9b83ff;
  --magenta:#ff5c9d;
  --amber:#ffbe3d;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer .ft-cols h4{color:rgba(155,131,255,.95);}
.footer .ft-cols a{color:rgba(244,241,234,.6);}
.footer .ft-cols a:hover{color:#fff;}
.footer .ft-status{color:rgba(244,241,234,.64);}
.footer .ft-status i{background:var(--cyan);}
.footer .ft-domain{color:var(--cyan);border-bottom-color:rgba(62,230,205,.3);}
.footer .ft-bottom{border-top-color:rgba(255,255,255,.1);color:rgba(244,241,234,.6);}
.footer .ft-legal a{color:rgba(244,241,234,.62);}
.footer .ft-legal a:hover{color:#fff;}
.footer .logo-text{color:#f7f5ef;}
.footer .logo-text em{color:var(--violet);}

/* ---------------------------------------------------------
   15. 移动端悬浮联系条
   --------------------------------------------------------- */
.sticky-cta{
  background:rgba(251,249,244,.94);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid rgba(var(--ov),.12);
  box-shadow:0 -10px 30px -22px rgba(var(--sh),.7);
}
.sticky-cta a{
  background:rgba(251,249,244,.96);
  color:rgba(var(--fg),.75);
}
.sticky-cta a b{color:rgba(var(--fg),.67);}
.sticky-cta a.pri{
  background:linear-gradient(180deg,#2c2b38,#121117);
  color:#fff;
  box-shadow:0 8px 18px -12px rgba(var(--sh),.9);
}
.sticky-cta a.pri b{color:rgba(255,255,255,.72);}

/* ---------------------------------------------------------
   16. 零碎：加载器 / 404 / 语言切换 / 回到顶部
   --------------------------------------------------------- */
.loader-panels i{background:var(--paper);}
.loader-word span{color:var(--white);}
.loader-word span:nth-child(1){color:var(--cyan);}
.loader-word span:nth-child(5){color:var(--violet);}
.loader-word span:nth-child(8){color:var(--magenta);}
.loader-bar{background:rgba(var(--ov),.14);}

.to-top{color:rgba(var(--fg),.67);}
.to-top:hover{color:var(--violet);}

.err-code{
  -webkit-text-stroke:1.5px rgba(var(--ov),.34);
  background:linear-gradient(180deg,rgba(90,60,240,.10),rgba(90,60,240,0) 72%);
  -webkit-background-clip:text;background-clip:text;
}
.err-desc{color:rgba(var(--fg),.6);}
.err-links a{color:rgba(var(--fg),.6);}
.err-links a:hover{color:var(--violet);}

.lang-switch a{color:rgba(var(--fg),.67);}
.lang-switch a.on{color:var(--white);border-color:rgba(var(--ov),.3);}

/* 深色区块里的反相组件（CTA 带 / 页脚） */
.cta-band .btn-ghost,
.footer .btn-ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.55);
  color:#fff;
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 10px 24px -16px rgba(0,0,0,.55);
}
.cta-band .btn-ghost:hover,
.footer .btn-ghost:hover{background:rgba(255,255,255,.26);border-color:#fff;}

/* ---------------------------------------------------------
   17. 移动端微调
   --------------------------------------------------------- */
@media (max-width:980px){
  .nav{background:linear-gradient(180deg,rgba(248,245,238,.96),rgba(248,245,238,.88));}

  /* 移动端改成「上图下字」：画面做通栏封面，文字落在纸面上 */
  .hero{display:block;min-height:0;}
  .hero-bg{
    position:relative;inset:auto;
    width:auto;height:48svh;
    margin:0 calc(var(--pad) * -1);
    clip-path:none;overflow:hidden;
  }
  .hero-bg img{object-position:64% 36%;}
  .hero-bg::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(var(--bg),.18) 0%,rgba(var(--bg),0) 42%,rgba(var(--bg),.55) 82%,var(--paper) 100%);
  }
  .hero-vignette{display:none;}
  .hero-inner{padding-top:clamp(22px,5vw,34px);padding-bottom:clamp(26px,6vw,40px);}
  .hero-title{font-size:clamp(34px,10.5vw,58px);}
  .hero-foot{padding-bottom:22px;}
}

/* ---------------------------------------------------------
   18. 描边数字在纸面上的可见度
   --------------------------------------------------------- */
/* 描边数字：加粗一档并补极淡填充，避免在纸面上过虚 */
.s-n{
  -webkit-text-stroke-width:1.5px;
  -webkit-text-stroke-color:rgba(var(--ov),.62);
  line-height:1;
  background:linear-gradient(180deg,rgba(var(--ov),.07),rgba(var(--ov),0) 82%);
  -webkit-background-clip:text;background-clip:text;
}
.flow b{
  -webkit-text-stroke-width:1.5px;
  -webkit-text-stroke-color:rgba(var(--ov),.55);
  line-height:1;
}
/* 中文大标题的描边行：空心字在密集笔画上会糊成缺墨感，改为渐变淡墨 + 极细轮廓 */
.ph-title .stroke{
  -webkit-text-stroke:0.6px rgba(var(--ov),.2);
  color:transparent;
  background:linear-gradient(172deg,rgba(var(--fg),.58) 0%,rgba(var(--fg),.34) 38%,rgba(var(--fg),.13) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.v-num{opacity:.9;}
.flow > *:hover b,.steps li:hover .s-n{-webkit-text-stroke-color:transparent;}

/* 步骤徽标文字压深一档 */
.steps em{color:#0a7d6c;border-color:rgba(12,155,134,.38);background:rgba(12,155,134,.06);}
.steps p{color:rgba(var(--fg),.67);}
.steps h3{color:var(--white);}

/* ---------------------------------------------------------
   19. 图片上的编号：白描边（图片永远是深色）
   --------------------------------------------------------- */
.f-num{-webkit-text-stroke-color:rgba(255,255,255,.72);}
.feature:hover .f-num{-webkit-text-stroke-color:#fff;}
.f-media::after{background:linear-gradient(120deg,rgba(var(--bg),.10),transparent 58%);}
.wc-media::after,.nc-media::after{
  background:linear-gradient(180deg,transparent 46%,rgba(var(--bg),.28));
}

/* =========================================================
   20. 排版系统 —— 正文放大、字距收紧、层级重排
   ========================================================= */

/* ---------- 20.1 全局字面 ---------- */
body{
  letter-spacing:0;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p,li,dd,dt,td,th{letter-spacing:0;}

/* 中文正文统一行高，读起来更稳 */
.svc > p,.sec-note,.sr-lead,.prose p,.legal p,.legal li,
.quote p,.v-list span,.steps p,.pipe p,.flow p,.deliver p,
.cmp tbody td,.sol p,.est-tip p,.wcard p,.nc-body p,.ct-sub{
  line-height:1.95;
}

/* ---------- 20.2 区块标题 ---------- */
.kicker{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.26em;
  color:rgba(var(--fg),.67);
  margin-bottom:20px;
}
.kicker::before{
  content:'';width:26px;height:1px;flex:none;
  background:currentColor;opacity:.55;
}
.sec-title{line-height:1.1;letter-spacing:-.038em;}
.sec-note{font-size:15px;color:rgba(var(--fg),.74);max-width:42ch;}
.sec-note b{color:var(--white);}

/* ---------- 20.3 服务卡 ---------- */
.svc > p{font-size:15.5px;color:rgba(var(--fg),.78);max-width:none;}
.svc ul li{font-size:14px;color:rgba(var(--fg),.8);}
.svc-foot,.svc-foot span{font-size:12px;color:rgba(var(--fg),.6);}
.svc-foot b,.svc-foot strong{color:rgba(var(--fg),.92);}
.svc h3{font-size:clamp(21px,2.1vw,25px);letter-spacing:-.024em;}

/* ---------- 20.4 计费卡 ---------- */
.model .m-desc{font-size:15px;color:rgba(var(--fg),.78);line-height:1.9;}
.model .m-sub{font-size:12.5px;letter-spacing:.08em;color:rgba(var(--fg),.67);}
.m-rows div{font-size:14px;padding:13px 0;}
.m-rows dt{color:rgba(var(--fg),.67);}
.m-rows dd{color:rgba(var(--fg),.94);font-weight:500;}
.model h3{letter-spacing:-.024em;}

/* ---------- 20.5 表格 ---------- */
.price tbody td{font-size:14.5px;line-height:1.8;}
.price .p-name{font-size:clamp(16px,1.55vw,19px);}
.price .p-name small{font-size:12px;letter-spacing:.06em;}
.price .p-num{font-size:clamp(16px,1.65vw,20px);}
.price .p-time{font-size:13px;}
.price tfoot td{font-size:12.5px;line-height:1.9;}
.cmp tbody th{font-size:14px;}
.cmp tbody td{font-size:14px;line-height:1.8;}
.cmp thead th{font-size:10.5px;}
.cmp-note{font-size:13.5px;line-height:1.9;color:rgba(var(--fg),.66);}

/* ---------- 20.6 行业入口 / 方案页 ---------- */
.sol p{font-size:14px;color:rgba(var(--fg),.7);}
.sol h3{font-size:clamp(16px,1.55vw,19px);}
.sol-m{font-size:10.5px;color:rgba(var(--fg),.6);}
.v-who{font-size:14px;color:rgba(var(--fg),.7);line-height:1.95;}
.v-list b{font-size:15px;}
.v-list span{font-size:14px;color:rgba(var(--fg),.7);}
.v-ds span{font-size:11.5px;color:rgba(var(--fg),.66);}
.v-meta b{font-size:15px;}
.v-h{font-size:10.5px;color:rgba(var(--fg),.67);}
.v-tags i{font-size:11.5px;color:rgba(var(--fg),.7);}

/* ---------- 20.7 案例 / 新闻卡 ---------- */
.wc-body h3{letter-spacing:-.02em;}
.wc-body p{font-size:14px;color:rgba(var(--fg),.74);}
.wc-data b{font-size:15px;}
.wc-data span{font-size:11.5px;color:rgba(var(--fg),.67);}
.f-body p{font-size:15.5px;color:rgba(var(--fg),.78);}
.f-data b{font-size:clamp(17px,1.7vw,21px);}
.f-data span{font-size:11.5px;color:rgba(var(--fg),.6);}
.f-tags span{font-size:10.5px;color:rgba(var(--fg),.7);}

/* ---------- 20.8 流程 / 数据 ---------- */
.steps p{font-size:14.5px;color:rgba(var(--fg),.74);}
.steps h3{letter-spacing:-.024em;}
.pipe p{font-size:14px;color:rgba(var(--fg),.7);}
.stat p{font-size:13px;color:rgba(var(--fg),.67);letter-spacing:.02em;}
.trust li{font-size:14px;color:rgba(var(--fg),.67);}

/* ---------- 20.9 表单 ---------- */
.field label{font-size:10.5px;letter-spacing:.16em;color:rgba(var(--fg),.74);}
.field input,.field textarea,.field select{font-size:14px;}
.opt span{font-size:13.5px;}

/* ---------- 20.10 估价器 ---------- */
.es-head p{font-size:13px;color:rgba(var(--fg),.67);}
.es-box b{font-size:13.5px;}
.es-box i{font-size:11.5px;color:rgba(var(--fg),.67);}
.es-row span{font-size:11.5px;color:rgba(var(--fg),.66);}
.es-row b{font-size:11px;color:rgba(var(--fg),.6);}
.est-tip p{font-size:13.5px;color:rgba(var(--fg),.72);}
.fm-row p{font-size:13.5px;color:rgba(var(--fg),.68);}
.formula-out{font-size:13.5px;color:rgba(var(--fg),.78);}

/* ---------- 20.11 页脚 ---------- */
.ft-cols a,.ft-cols p{font-size:13.5px;color:rgba(244,241,234,.74);}
.ft-brand p{font-size:12.5px;color:rgba(244,241,234,.6);}
.ft-bottom{font-size:12px;}

/* =========================================================
   21  版式重构 —— 区块头部 / 表格卡片 / 节奏
   ========================================================= */

/* ---------- 21.1 区块头部：顶部开篇线 + 双栏 + 注脚竖线 ---------- */
.sec-head{
  padding-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--line-2);
  margin-bottom:clamp(38px,4.6vw,64px);
}
.sec .sec-head{
  padding-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--line-2);
}

.sec-head.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.74fr);
  align-items:end;
  gap:clamp(26px,4.2vw,68px);
}
.sec-head.split .sec-note{
  position:relative;
  padding-left:clamp(16px,1.9vw,28px);
  border-left:1px solid var(--line-2);
  max-width:none;
  font-size:15px;
  line-height:1.95;
  color:rgba(var(--fg),.76);
}
.sec-head.split .sec-note b{color:var(--white);font-weight:700;}

/* 区块编号：编辑式小标，不用药丸 */
.sec-head .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0;
  border-radius:0;
  background:none;
  border:0;
  font-size:10.5px;
  letter-spacing:.24em;
  color:rgba(var(--fg),.52);
  margin-bottom:20px;
}
.sec-head .kicker::before{
  width:24px;height:1px;border-radius:0;
  background:rgba(var(--ov),.38);opacity:1;
  box-shadow:none;
}
.sec-head .kicker span{color:rgba(var(--fg),.3);}

/* 标题与注脚的排版重量 */
.sec-head .sec-title{max-width:20ch;}
.sec-head .sec-title .dim{
  color:transparent;
  background:linear-gradient(172deg,rgba(var(--fg),.5) 0%,rgba(var(--fg),.3) 42%,rgba(var(--fg),.14) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

@media (max-width:980px){
  .sec-head.split{
    grid-template-columns:1fr;
    align-items:start;
    gap:22px;
  }
  .sec-head.split .sec-note{
    border-left:0;
    padding-left:0;
    padding-top:16px;
    border-top:1px solid var(--line);
  }
}

/* ---------- 21.2 表格：卡片壳 ---------- */
.price-wrap,.cmp-wrap{
  background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
  border:1px solid var(--line);
  border-radius:18px;
  padding:0;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(var(--sh),.05),
    0 30px 58px -46px rgba(var(--sh),.72);
}

/* ---------- 21.3 表格：行高与呼吸 ---------- */
.price thead th{
  padding-top:clamp(17px,1.9vw,23px);
  padding-bottom:14px;
  background:var(--paper-3);
  border-bottom:1px solid rgba(var(--fg),.16);
}
.cmp thead th{
  padding-top:clamp(17px,1.9vw,23px);
  padding-bottom:14px;
  background:var(--paper-3);
  border-bottom:1px solid rgba(var(--fg),.16);
}
.price tfoot td{padding-bottom:clamp(16px,1.9vw,22px);}

/* 卡片内边距搬到单元格上，行分隔线才能通到卡片边缘 */
.price thead th:first-child,
.price tbody td:first-child,
.price tfoot td{padding-left:clamp(16px,2.2vw,30px);}
.price thead th:last-child,
.price tbody td:last-child{padding-right:clamp(16px,2.2vw,30px);}
.cmp thead th:first-child,
.cmp tbody th{padding-left:clamp(16px,2.2vw,30px);}
.cmp thead th:last-child,
.cmp tbody td:last-child{padding-right:clamp(16px,2.2vw,30px);}
.price tbody td{
  padding-top:clamp(19px,2vw,25px);
  padding-bottom:clamp(19px,2vw,25px);
}
.cmp tbody th{
  padding-top:20px;
  padding-bottom:20px;
}
.cmp tbody td{
  padding-top:20px;
  padding-bottom:20px;
}
.price tbody tr:last-child td{border-bottom:0;}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0;}

/* 行悬停：左侧一道色线 + 名称提亮 */
.price tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--cyan);}
.price tbody tr:hover .p-name{color:var(--cyan);}
.price tbody tr{transition:background .35s,box-shadow .35s;}

/* ---------- 21.4 对比表：推荐列在纸面上要立起来 ---------- */
.cmp thead th.rec{
  background:linear-gradient(180deg,rgba(18,179,156,.17),rgba(18,179,156,.04));
  border-bottom-color:rgba(18,179,156,.55);
  color:var(--cyan);
}
.cmp tbody td.rec{
  background:linear-gradient(180deg,rgba(18,179,156,.085),rgba(18,179,156,.03));
  border-left-color:rgba(18,179,156,.24);
  border-right-color:rgba(18,179,156,.24);
}
.cmp tbody tr:last-child td.rec{border-bottom-color:rgba(18,179,156,.42);}
.cmp tbody td.rec b{color:rgba(var(--fg),.95);font-weight:700;}
.cmp tbody tr:hover td.rec{background:rgba(18,179,156,.13);}
.cmp-note a:hover{color:var(--white);border-bottom-color:var(--white);}

/* 推荐列通到卡片边缘，成为一条竖带 */
@media (min-width:981px){
  .cmp thead th.rec{border-radius:0;}
  .cmp tbody tr:last-child td.rec{border-radius:0;}
}

/* ---------- 21.5 两个表格区块的节奏隔离 ---------- */
.cmp-sec{border-top:0;}
#price{border-top:0;}
.cmp-sec .sec-head,
#price .sec-head{border-top-color:rgba(var(--fg),.2);}

/* =========================================================
   22  纸面上的图像区块与残留暗色
   ========================================================= */

/* ---------- 22.1 流程区：改成沙色带，底图退到右侧做纹理 ---------- */
.process{
  background:linear-gradient(180deg,#f1ebdd 0%,#f7f3ea 52%,#efe9db 100%);
  border-top:1px solid rgba(var(--fg),.10);
  border-bottom:1px solid rgba(var(--fg),.10);
}
.process::before{
  opacity:.085;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 48%,rgba(0,0,0,.3) 68%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 48%,rgba(0,0,0,.3) 68%,#000 100%);
}
.s-n{-webkit-text-stroke:1.2px rgba(var(--fg),.34);}
.steps h3{color:rgba(var(--fg),.96);}
.steps p{color:rgba(var(--fg),.74);}
.steps em{color:var(--cyan);border-color:rgba(10,122,106,.28);background:rgba(255,255,255,.5);}

/* ---------- 22.2 表单下拉箭头：浅底要深色箭头 ---------- */
.field select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.2l5 5 5-5' stroke='%2318171a' stroke-opacity='.5' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field select option{background:#fff;color:#141319;}

/* ---------- 22.3 残留的暗色文字 ---------- */
.job:hover .job-apply{color:#fff;}
.q-av{color:#fff;}

/* ---------- 22.4 流程步骤：四列底部的标签对齐 ---------- */
.steps li{display:flex;flex-direction:column;}
.steps em{margin-top:auto;align-self:flex-start;}
.s-n{-webkit-text-stroke:1.2px rgba(var(--fg),.40);}

/* =========================================================
   23  深色区块内的反相与残留问题
   ========================================================= */

/* 23.1 CTA 带上的次级按钮：不能白字白底 */
.cta-band .btn-ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.5);
  color:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.cta-band .btn-ghost:hover{
  background:rgba(255,255,255,.16);
  border-color:#fff;color:#fff;
  box-shadow:0 14px 30px -20px rgba(0,0,0,.7);
}
.cta-band .btn-ghost::before{display:none;}
.footer .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);}

/* 23.2 图片上的说明条：底是深色刮擦，字必须反白 */
.pm-cap{background:linear-gradient(transparent,rgba(14,12,10,.86));}
.pm-cap span{color:rgba(255,255,255,.78);}
.pm-cap b{color:#fff;}

/* 23.3 图片上的标签 */
.wc-tag{background:rgba(251,249,244,.86);border-color:rgba(24,23,26,.14);color:#141319;}

/* 23.4 标题里的浅色副句再提亮一档 */
.sec-head .sec-title .dim,
.sec-title .dim{color:rgba(var(--fg),.5);}

/* 23.5 卡片内的“阅读全文” */
.nc-more{color:var(--cyan);}
.news-card:hover .nc-more{color:var(--white);}

/* 23.6 页脚栏目标题 */
.footer .ft-cols h4{color:#b7a6ff;}

/* ---------- 23.7 小字号标签再提一档 ---------- */
.svc-n{color:rgba(var(--fg),.7);}
.m-sub{color:rgba(var(--fg),.68);}
.price thead th{color:rgba(var(--fg),.72);font-weight:500;}
.cmp thead th{color:rgba(var(--fg),.7);}
.cmp thead th.rec{color:#075a4f;}
.nc-more{color:#075a4f;}
.steps em{color:#075a4f;border-color:rgba(7,90,79,.3);}

/* ---------- 23.8 计费卡小标题 ---------- */
.model .m-sub{color:rgba(var(--fg),.68);}

/* ---------- 24  移动端：表格别只剩一列半 ---------- */
@media (max-width:760px){
  .cmp{min-width:600px;}
  .price{min-width:640px;}
  .cmp thead th,.cmp tbody td{padding-left:14px;padding-right:14px;}
  .cmp thead th:first-child,.cmp tbody th{padding-left:16px;}
  .cmp thead th:last-child,.cmp tbody td:last-child{padding-right:16px;}
  .price thead th,.price tbody td{padding-left:14px;padding-right:14px;}
  .price thead th:first-child,.price tbody td:first-child,
  .price tfoot td{padding-left:16px;}
  .price thead th:last-child,.price tbody td:last-child{padding-right:16px;}
  .cmp tbody td,.price tbody td{font-size:13.5px;}
  .cmp tbody th{font-size:13.5px;}
}

/* ---------- 25  案例页首屏小标 ---------- */
.cc-s{color:rgba(var(--fg),.68);}

/* ---------- 25.1 文章导语 ---------- */
.prose .art-lead,
.art-lead{
  font-size:17px;
  line-height:1.9;
  color:rgba(var(--fg),.84);
  letter-spacing:0;
}
.case-cover-cap .cc-s{color:rgba(var(--fg),.68);}

/* ---------- 26  常见问题答案字号 ---------- */
.faq-a p{font-size:14.5px;line-height:1.95;color:rgba(var(--fg),.76);}

/* =========================================================
   27  细节修正
   ========================================================= */

/* ---------- 27.1 极简顶栏（404） ---------- */
.nav-min .nav-right{margin-left:auto;border-left:0;padding-left:0;}
@media (max-width:760px){
  .nav-min .nav-tel{display:none;}
  .nav-min .nav-right{border-left:0;padding-left:0;}
}

/* ---------- 27.2 404 正文对比度 ---------- */
.err-desc{color:rgba(var(--fg),.67);max-width:32em;}
.err-links{
  gap:clamp(16px,2.4vw,28px);
  font-size:11px;
  letter-spacing:.12em;
  color:rgba(var(--fg),.55);
}
.err-links a{
  color:rgba(var(--fg),.67);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.err-links a:hover{color:var(--violet);border-bottom-color:rgba(90,60,240,.45);}
.err-title{letter-spacing:-.03em;}

/* 404 数字：从水印提升为视觉焦点 */
.err-code{
  -webkit-text-stroke:clamp(1.5px,.22vw,3px) rgba(var(--ov),.46);
  background:linear-gradient(180deg,rgba(90,60,240,.20),rgba(90,60,240,.02) 78%);
  -webkit-background-clip:text;background-clip:text;
}

/* ---------- 27.3 正文代码片段 ---------- */
.prose code{
  font-family:var(--f-mono);
  font-size:.86em;
  letter-spacing:.01em;
  padding:2px 6px;
  border-radius:5px;
  background:var(--paper-3);
  border:1px solid rgba(var(--ov),.10);
  color:#3d2f8f;
  white-space:nowrap;
}

/* ---------- 27.4 正文内链 ---------- */
.prose a{
  color:#0a6a5c;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(10,122,106,.4);
  transition:text-decoration-color .3s, color .3s;
}
.prose a:hover{
  color:var(--violet);
  text-decoration-color:rgba(90,60,240,.55);
}

/* ---------- 27.5 数字等宽（补齐统计位） ---------- */
.stat-row b,
.ph-meta b,
.hero-stats b,
.cc-stats b,
.err-code{font-variant-numeric:tabular-nums;}

/* ---------- 27.6 图片占位，避免加载白闪 ---------- */
.wc-media,
.news-card .nc-media,
.shots img,
.card .c-media,
.f-media{
  background:linear-gradient(180deg,var(--paper-3),var(--paper-2));
}

/* ---------- 27.7 深色区块内的焦点环 ---------- */
.cta-band :focus-visible,
.footer :focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 27.9 服务行分组小标题：去彩色，改中性带下划线 ---------- */
.sr-body h4{
  color:rgba(var(--fg),.58);
  font-weight:600;
  letter-spacing:.18em;
  padding-bottom:9px;
  border-bottom:1px solid rgba(var(--ov),.17);
  margin-bottom:13px;
}

/* ---------- 27.10 案例卡年份：加纸底药丸，避免压在深浅图片上不可读 ---------- */
.wc-year{
  padding:4px 8px;
  border-radius:2px;
  background:rgba(251,249,244,.9);
  border:1px solid rgba(24,23,26,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#141319;
  letter-spacing:.1em;
}

/* ---------- 27.11 侧栏序号与次级按钮：提对比、去浮泡感 ---------- */
.side-list span{
  font-size:10px;
  letter-spacing:.16em;
  color:rgba(var(--fg),.7);
}
.side-card .btn-ghost{
  background:#fbf9f4;
  border-color:rgba(var(--ov),.26);
  box-shadow:0 1px 2px rgba(var(--sh),.05);
}
.side-card .btn-ghost:hover{
  background:#fff;
  border-color:rgba(var(--ov),.42);
}

/* ---------- 27.12 招聘职位行：按钮与标题对齐，描述行宽与可读性 ---------- */
.job{align-items:start;}
.job h3{margin-top:2px;}
.job-apply{align-self:start;margin-top:2px;}
.job-desc{
  margin-top:12px;
  max-width:74ch;
  font-size:13px;
  line-height:1.9;
  color:rgba(var(--fg),.72);
}

/* ---------- 27.13 法律页：正文 + 右侧本页目录 ---------- */
.legal-wrap{
  display:grid;
  grid-template-columns:minmax(0,68ch) 216px;
  gap:clamp(36px,5vw,72px);
  align-items:start;
}
.legal{max-width:none;}
.legal{max-width:70ch;}
.legal h2{scroll-margin-top:100px;}
.legal-toc{
  position:sticky;
  top:96px;
  padding-left:20px;
  border-left:1px solid rgba(var(--ov),.14);
}
.toc-k{
  font-family:var(--f-mono);
  font-size:9.5px;
  letter-spacing:.2em;
  color:rgba(var(--fg),.52);
  text-transform:uppercase;
  margin-bottom:12px;
}
.legal-toc nav{display:flex;flex-direction:column;}
.legal-toc a{
  display:block;
  padding:5px 0;
  font-size:12.5px;
  line-height:1.5;
  color:rgba(var(--fg),.62);
  transition:color .2s;
}
.legal-toc a:hover{color:rgba(var(--fg),.95);}
@media (max-width:980px){
  .legal-wrap{grid-template-columns:1fr;}
  .legal-toc{
    position:static;
    padding-left:0;
    border-left:0;
    border-top:1px solid rgba(var(--ov),.14);
    padding-top:18px;
  }
}

/* ---------- 27.14 404 页脚：只保留版权与法务链接 ---------- */
.err-footer{padding:clamp(26px,3vw,40px) var(--pad) 22px;}
.err-footer .ft-bottom{margin-top:0;padding-top:0;border-top:0;}
.err-footer .ft-legal{margin-top:12px;}

/* ---------- 27.15 形状语言：去掉胶囊，统一为方角 ---------- */
.btn,
.btn-lg{border-radius:3px;}
.hero-tags span,
.chip,
.filters button,
.art-tags span,
.job-apply,
.v-case,
.deep-copy h2 .tag,
.filter-chips .chip{border-radius:2px;}
.btn-sm{border-radius:2px;}

/* 深色区块里的次级按钮同步 */
.cta-band .btn,
.footer .btn{border-radius:3px;}

/* ---------- 27.16 方案页：大编号统一墨色，标签去圆角 ---------- */
.v-num{
  -webkit-text-stroke:1.2px rgba(var(--ov),.42);
  color:transparent;
  opacity:1;
  background:linear-gradient(172deg,rgba(var(--fg),.2),rgba(var(--fg),.07));
  -webkit-background-clip:text;
  background-clip:text;
}
.v-tags i,
.v-ds span{border-radius:2px;}
.v-tags i{font-size:10.5px;color:rgba(var(--fg),.68);background:rgba(var(--ov),.045);}
.v-en{font-size:10px;letter-spacing:.2em;}

/* ---------- 27.17 服务行列表：短横线拉长成排版符号 ---------- */
.wc-tag{border-radius:2px;}
.sr-body li{padding-left:18px;font-size:13px;line-height:1.72;color:rgba(var(--fg),.76);}
.sr-body li::before{
  width:9px;top:.74em;
  background:rgba(var(--ov),.4);
}
.sr-body ul{gap:10px clamp(18px,2vw,32px);}

/* ---------- 27.18 交付物清单：去掉圆点，改为编号清单 ---------- */
.deliver-grid{counter-reset:dv;}
.deliver{counter-increment:dv;position:relative;}
.deliver::after{
  content:counter(dv,decimal-leading-zero);
  position:absolute;
  top:clamp(18px,2.2vw,26px);
  right:clamp(18px,2.2vw,26px);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(var(--fg),.44);
}
.deliver b::before{content:none;}
.deliver b{padding-right:26px;}
.deliver p{font-size:13px;line-height:1.85;color:rgba(var(--fg),.7);}

/* ---------- 27.19 卡片圆角收敛：16px → 3px，与细线排版统一 ---------- */
.wcard,
.news-card,
.model,
.quote,
.side-card,
.cert,
.est-tip,
.est-card,
.job,
.card,
.es-box,
.legal-toc,
.sol,
.svc{border-radius:3px;}

/* 图片上的标签：白底无边框，靠轻微投影与画面分离 */
.wc-tag,
.wc-year{
  border:0;
  background:rgba(252,250,246,.94);
  box-shadow:0 1px 4px rgba(18,17,23,.18);
}

/* 筛选条收紧 */
.chip,
.filters button{padding:7px 14px;font-size:11.5px;letter-spacing:.04em;}

/* ---------- 27.20 hero 标签行：去彩色边框与内阴影 ---------- */
.hero-tags span,
.hero-tags span:nth-child(n){
  background:rgba(255,255,255,.66);
  border:1px solid rgba(var(--ov),.16);
  color:rgba(var(--fg),.72);
  box-shadow:none;
  font-size:10.5px;
  letter-spacing:.16em;
  padding:6px 11px;
}
.hero-scroll{font-size:9.5px;letter-spacing:.26em;}

/* ---------- 27.21 资讯卡：分类色收为中性与下划线链接 ---------- */
.nc-meta i{color:rgba(var(--fg),.64);}
.nc-meta span{color:rgba(var(--fg),.4);}
.nc-meta{font-size:10px;letter-spacing:.13em;}
.nc-more{
  display:inline-block;
  color:rgba(var(--fg),.74);
  border-bottom:1px solid rgba(var(--ov),.22);
  padding-bottom:3px;
  transition:color .3s,border-color .3s;
}
.news-card:hover .nc-more{
  color:var(--cyan);
  border-bottom-color:rgba(10,122,106,.45);
}

/* ---------- 27.22 团队条与技术栈标签 ---------- */
.tb-bar{
  height:4px;
  border-radius:0;
  background:rgba(var(--ov),.09);
}
.tb-bar i{
  border-radius:0;
  background:var(--cyan);
}
.cap li{
  border-radius:2px;
  font-size:11.5px;
  padding:4px 9px;
  background:rgba(var(--ov),.05);
  color:rgba(var(--fg),.7);
}
.cap h4{font-size:14.5px;margin-bottom:13px;}

/* ---------- 27.23 文章正文：收紧行宽 ---------- */
.prose{max-width:640px;}
.prose p{font-size:14.5px;line-height:1.95;color:rgba(var(--fg),.76);}
.prose h3{font-size:clamp(19px,2vw,25px);}
.prose ul li{font-size:14px;color:rgba(var(--fg),.74);}
.prose ul li::before{background:rgba(var(--ov),.42);width:8px;}

/* ---------- 27.24 文章头：meta 与标签可读性 ---------- */
.art-meta{
  margin-top:22px;
  font-size:10.5px;
  letter-spacing:.13em;
  color:rgba(var(--fg),.52);
}
.art-tags span{
  font-size:10px;
  letter-spacing:.12em;
  padding:5px 9px;
  color:rgba(var(--fg),.6);
  border-color:rgba(var(--ov),.16);
  background:rgba(255,255,255,.5);
}

/* ---------- 27.25 管线格编号：统一墨色 + 细线前导 ---------- */
.p-n,
.pipe:nth-child(n) .p-n{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10.5px;
  letter-spacing:.18em;
  color:rgba(var(--fg),.5);
  margin-bottom:22px;
}
.p-n::before{
  content:'';
  width:14px;
  height:1px;
  background:rgba(var(--ov),.32);
}

/* ---------- 27.26 服务行编号：与其他小标统一 ---------- */
.sr-n{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10.5px;
  letter-spacing:.18em;
  color:rgba(var(--fg),.5);
  margin-bottom:18px;
}
.sr-n::before{
  content:'';
  width:16px;
  height:1px;
  background:rgba(var(--ov),.34);
}

/* ---------- 27.27 方案页案例链接：描边按钮，去掉浮起感 ---------- */
.v-case{
  background:transparent;
  border:1px solid rgba(var(--ov),.22);
  box-shadow:none;
  padding:10px 16px;
  transition:background .3s,border-color .3s;
}
.v-case:hover{
  background:rgba(var(--ov),.045);
  border-color:rgba(var(--ov),.4);
}
.v-case span{color:rgba(var(--fg),.56);font-size:10px;letter-spacing:.16em;}
.v-case b{color:rgba(var(--fg),.9);font-size:12.5px;font-weight:600;}
.v-case i{color:rgba(var(--fg),.5);}
.v-case:hover i{color:var(--cyan);}

/* ---------- 27.28 估价页：结果卡去紫色光晕，选项去圆角 ---------- */
.est-card{
  border-radius:3px;
  border:1px solid rgba(var(--ov),.12);
  background:#fbf9f4;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 44px -38px rgba(var(--sh),.95);
}
.est-kv{border-radius:2px;}
.es-box{border-radius:2px;}
.es-box i{font-size:11.5px;color:rgba(var(--fg),.62);}
.es-box b{font-size:13.5px;}
.es-head h3::before{color:rgba(var(--fg),.45);font-size:10.5px;letter-spacing:.16em;}
.es-head p{font-size:12.5px;color:rgba(var(--fg),.66);}
.est-tip{border-radius:3px;}

/* ---------- 27.29 流程步骤：大编号与底部小标统一 ---------- */
.steps .s-n{
  -webkit-text-stroke-width:1.4px;
  -webkit-text-stroke-color:rgba(var(--ov),.5);
  color:transparent;
  background:linear-gradient(172deg,rgba(var(--fg),.24),rgba(var(--fg),.07));
  -webkit-background-clip:text;
  background-clip:text;
}
.steps em{
  color:rgba(var(--fg),.52);
  border-color:rgba(var(--ov),.16);
  background:transparent;
  font-size:10px;
  letter-spacing:.14em;
}
.steps h3{font-size:clamp(16px,1.7vw,19px);}

/* ---------- 27.30 404 数字：紫色改为墨色淡墨 ---------- */
.err-code{
  -webkit-text-stroke:clamp(1.5px,.22vw,3px) rgba(var(--ov),.52);
  background:linear-gradient(176deg,rgba(var(--fg),.28),rgba(var(--fg),.02) 76%);
  -webkit-background-clip:text;
  background-clip:text;
}
.err-wrap{min-height:calc(100svh - 60px);}

/* ---------- 27.31 招聘行：meta 与投递按钮收为中性和描边 ---------- */
.job-meta{font-size:10.5px;letter-spacing:.1em;color:rgba(var(--fg),.5);}
.job-meta b{color:rgba(var(--fg),.8);font-weight:600;}
.job-tags i{
  border-radius:2px;
  font-size:11px;
  color:rgba(var(--fg),.66);
  background:rgba(var(--ov),.045);
}
.job-apply{
  color:rgba(var(--fg),.7);
  border-color:rgba(var(--ov),.22);
  font-size:10.5px;
  padding:9px 15px;
}
.job-apply:hover{
  color:var(--cyan);
  border-color:rgba(10,122,106,.45);
  background:rgba(10,122,106,.04);
}

/* ---------- 27.32 案例正文引用块与侧栏技术栈卡：去紫色底 ---------- */
.prose blockquote{
  margin:clamp(26px,3.4vw,38px) 0;
  padding:6px 0 6px 22px;
  border-left:2px solid rgba(var(--ov),.45);
  background:transparent;
  border-radius:0;
  font-size:15.5px;
  line-height:1.95;
  color:rgba(var(--fg),.78);
}
.doc-side .cap{
  background:rgba(var(--ov),.035);
  border:1px solid rgba(var(--ov),.1);
  border-radius:3px;
  padding:clamp(18px,2vw,24px);
}
.doc-side .cap h4{font-size:13px;margin-bottom:11px;letter-spacing:.02em;}

/* 侧栏技术栈标签：白底描边，避免灰块 */
.doc-side .cap li{
  background:#fff;
  border:1px solid rgba(var(--ov),.1);
  color:rgba(var(--fg),.7);
}

/* ---------- 27.33 表单控件圆角统一 ---------- */
.field input,
.field textarea,
.field select{
  border-radius:2px;
  padding:13px 15px;
  font-size:13.5px;
}
.field textarea{min-height:140px;line-height:1.85;}
.field label{font-size:11px;letter-spacing:.14em;color:rgba(var(--fg),.6);}

/* ---------- 27.34 表单选项：方角 + 墨色选中 ---------- */
.opt span{
  border-radius:2px;
  background:#fff;
  border-color:rgba(var(--ov),.18);
  color:rgba(var(--fg),.7);
  font-size:12.5px;
  padding:8px 14px;
}
.opt:hover span{border-color:rgba(var(--ov),.4);}
.opt input:checked + span{
  background:#141319;
  border-color:#141319;
  color:#fff;
  box-shadow:none;
}

/* =========================================================
   28. 配色体系：墨为主，青为功能色，紫退回品牌位
   ---------------------------------------------------------
   规则：
   · 墨   = 正文 / 标题 / 主按钮 / 边框 / 95% 界面
   · 青   = 唯一功能强调：链接、数据、选中、focus、状态
   · 紫   = 只出现在 logo 与深色区光晕，不进浅色正文
   · 琥珀 = 只表示风险 / 注意（不包含、成本高、超范围）
   · 品红 = 全部移除
   ========================================================= */

/* 28.1 统计数字：取消按位置配色 */
.stat b,
.stat b i,
.stat:nth-child(n) b,
.stat:nth-child(n) b i{
  color:rgba(var(--fg),.94);
  opacity:1;
}
.stat b i{color:rgba(var(--fg),.5);}

/* 28.2 小标分隔符去紫 */
.kicker span{color:rgba(var(--fg),.32);}

/* 28.3 导航序号：不再上青，改为中性 */
.nav-links a::before{color:rgba(var(--fg),.42);}
.nav-links a:hover::before{color:rgba(var(--fg),.6);}

/* 28.4 交互 hover 统一走墨色，不再用紫 */
.mobile-menu a:hover,
.mobile-menu a.on,
.mm-foot a{color:rgba(var(--fg),.95);}
.btn-light:hover{color:#141319;}
.to-top:hover{color:rgba(var(--fg),.95);}
.err-links a:hover{color:rgba(var(--fg),.95);border-bottom-color:rgba(var(--ov),.5);}

/* 28.5 链接统一青色（正文内） */
.prose a{color:var(--cyan);border-bottom-color:rgba(10,122,106,.3);}
.prose a:hover{color:#085f53;border-bottom-color:rgba(10,122,106,.7);}
.cmp-note a:hover{color:var(--cyan);border-bottom-color:rgba(10,122,106,.5);}

/* 28.6 加载动画与滚动字带：去掉逐字配色 */
.loader-word span,
.loader-word span:nth-child(n){color:rgba(var(--fg),.9);}
.marquee-track span:nth-child(n){color:inherit;}

/* 28.7 页脚域名：下划线改中性 */
.footer .ft-domain{
  color:rgba(244,241,234,.8);
  border-bottom-color:rgba(255,255,255,.24);
}

/* 28.8 移除品红 */
.man-title em.c3{color:rgba(var(--fg),.9);}
.field label em{color:var(--amber);}
.form-msg.bad b{color:var(--amber);}

/* 28.9 表格与列表里的琥珀只保留语义位 */
.matrix td.p{color:var(--amber);}
.price .p-time{color:rgba(var(--fg),.78);}

/* 28.10 影响幅度与 FAQ 编号：从强调色降为中性 */
.flow em{
  color:rgba(var(--fg),.56);
  border-color:rgba(var(--ov),.14);
  background:transparent;
  font-size:10px;
  letter-spacing:.12em;
}
.q-i{
  color:rgba(var(--fg),.42);
  font-size:10px;
  letter-spacing:.14em;
}
.kicker i{color:rgba(var(--fg),.32);font-style:normal;}

/* 28.11 页脚列标题、方案卡编号、FAQ 编号：清掉最后的紫 */
.ft-cols h4{
  color:rgba(244,241,234,.46);
  letter-spacing:.2em;
}
.faq summary .q-i{
  color:rgba(var(--fg),.42);
  font-size:10px;
  letter-spacing:.14em;
}
.sol-n,
.sol-all .sol-n{
  color:rgba(var(--fg),.45);
  opacity:1;
  font-size:10.5px;
  letter-spacing:.16em;
}

/* 28.12 覆盖高优先级残留：页脚列标题与行业卡箭头 */
.footer .ft-cols h4{
  color:rgba(244,241,234,.46);
  letter-spacing:.2em;
  font-size:10px;
}
.sol-m i{color:rgba(var(--fg),.4);}
.sol:hover .sol-m i{color:rgba(var(--fg),.75);}

/* 28.13 深色区块：三层极光收成单色紫调 */
.cta-band{
  background:
    radial-gradient(88% 124% at 8% -18%,rgba(123,92,255,.20),transparent 62%),
    linear-gradient(158deg,#1a1822 0%,#141319 54%,#101016 100%);
}
.footer{
  background:
    radial-gradient(120% 92% at 92% -12%,rgba(90,60,240,.085),transparent 58%),
    #101016;
}

/* 28.14 能力矩阵：彩色符号改为墨点密度图 */
.matrix th{color:rgba(var(--fg),.52);}
.matrix td.y{color:rgba(var(--fg),.88);}
.matrix td.p{color:rgba(var(--fg),.4);}
.matrix td.n{color:rgba(var(--fg),.13);}
.matrix td.y,
.matrix td.p,
.matrix td.n{font-size:11px;}

/* 28.15 矩阵表头与符号对比微调 */
.matrix thead th,
.matrix thead th:first-child{
  color:rgba(var(--fg),.52);
  letter-spacing:.18em;
}
.matrix td.p{color:rgba(var(--fg),.5);}
.matrix td.n{color:rgba(var(--fg),.2);}

/* 28.16 墨色层级：拉开明度差，不靠颜色 */
.steps .s-n,
.flow b{
  -webkit-text-stroke-color:rgba(var(--ov),.58);
  background:linear-gradient(172deg,rgba(var(--fg),.3),rgba(var(--fg),.1));
  -webkit-background-clip:text;
  background-clip:text;
}
.steps em,
.flow em{color:rgba(var(--fg),.64);}
.steps p,
.flow p{color:rgba(var(--fg),.72);}

/* 28.17 面包屑分隔符与业务标签：去紫 */
.ph-crumb i,
.art-crumb i,
.crumb i{
  color:rgba(var(--fg),.3);
  font-style:normal;
}
.man-list li span{color:rgba(var(--fg),.6);}
.man-title em.c2{color:rgba(var(--fg),.9);}

/* 28.18 卡片描边略深，纸底上才有边界 */
.wcard,
.news-card,
.side-card,
.cert,
.job,
.model,
.quote,
.est-card,
.sol,
.svc{border-color:rgba(var(--ov),.16);}
.wcard:hover,
.news-card:hover,
.job:hover{border-color:rgba(var(--ov),.3);}

/* 28.19 筛选计数：可见但不抢 */
.chip i{
  font-size:9.5px;
  opacity:.85;
  color:rgba(var(--fg),.5);
  margin-left:6px;
}
.chip.on i{color:rgba(255,255,255,.62);}