/* =========================================================
   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,3px) rgba(var(--ov),.9);
  color:transparent;
}

/* ---------------------------------------------------------
   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:linear-gradient(90deg,var(--violet),var(--cyan));
}
.nav-links a::before{color:var(--cyan);}
.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:linear-gradient(180deg,#f4f0ff 0%,#fdfcff 62%,#fff 100%);
  border-color:rgba(90,60,240,.4);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(90,60,240,.10),
    0 22px 46px -30px rgba(90,60,240,.55);
}
.model.rec::before{background:linear-gradient(90deg,transparent,rgba(90,60,240,.7),transparent);}
.model-flag{
  background:linear-gradient(180deg,#6a4bf6,#4a2fdc);
  color:#fff;
  box-shadow:0 8px 20px -8px rgba(90,60,240,.7);
}

.quote{position:relative;}
.quote::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta));
  opacity:.55;
}

/* 图片占位不再纯黑 */
.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:var(--amber);}

.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),.32);background:#fffdf8;}
.es-opt input:checked + .es-box{
  border-color:rgba(12,155,134,.6);
  background:linear-gradient(180deg,#eafbf7,#f7fffd);
  box-shadow:0 0 0 3px rgba(12,155,134,.10),0 6px 18px -14px rgba(12,155,134,.9);
}
.es-opt input:checked + .es-box b{color:#0b6f61;}
.es-opt input:checked + .es-box i{color:rgba(11,111,97,.7);}

.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),.1);}
.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{-webkit-text-stroke:1px rgba(12,155,134,.6);}
.formula-out{
  border-color:rgba(90,60,240,.3);
  background:linear-gradient(180deg,rgba(90,60,240,.06),rgba(90,60,240,.02));
  color:rgba(var(--fg),.7);
}

/* ---------------------------------------------------------
   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(90% 120% at 6% 0%,#7b5cff 0%,rgba(123,92,255,0) 55%),
    radial-gradient(90% 130% at 96% 100%,#12b39c 0%,rgba(18,179,156,0) 52%),
    radial-gradient(70% 100% at 78% 8%,#ff5c9d 0%,rgba(255,92,157,0) 46%),
    linear-gradient(120deg,#241a52 0%,#121117 52%,#0d3f3a 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-color:rgba(var(--ov),.55);}
.flow b{-webkit-text-stroke-color:rgba(var(--ov),.5);}
.ph-title .stroke{-webkit-text-stroke-color:rgba(var(--ov),.62);}
.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),.6);}
.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:9px;
  padding:7px 15px 6px 12px;
  border-radius:100px;
  background:rgba(var(--ov),.045);
  border:1px solid var(--line);
  font-size:10px;
  letter-spacing:.22em;
  color:rgba(var(--fg),.72);
  margin-bottom:22px;
}
.sec-head .kicker::before{
  width:5px;height:5px;border-radius:50%;
  background:var(--cyan);opacity:1;
  box-shadow:0 0 0 3px rgba(10,122,106,.14);
}
.sec-head .kicker span{color:var(--cyan);}

/* 标题与注脚的排版重量 */
.sec-head .sec-title{max-width:20ch;}
.sec-head .sec-title .dim{color:rgba(var(--fg),.44);}

@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:#4a2fd8;}
.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);}