/* ==================================================================
   tarka 全站统一视觉层 · 2026-11-08
   ------------------------------------------------------------------
   作用于同一域名下的四套渲染基底：
     A. nginx 静态四页      /、/products、/pricing、/clients
     B. CMS 模板页          /about、/news、/help、/download、/contact…
     C. 订阅门户            /plugin/subscription/portal
     D. 认证页              /login、/register
   规则：只做视觉（色 / 边框 / 阴影 / 背景 / 动效），不改容器宽度、
        定位与 display，不覆盖各基底原有变量名。全部使用 --tk-* 命名空间。
   ================================================================== */

:root{
  /* 统一色板：对齐站点既有主视觉与 design_tokens.accent */
  --tk-bg:        #060D1A;
  --tk-bg2:       #0A1628;
  --tk-card:      #0D1C33;
  --tk-line:      #16305A;
  --tk-line-soft: rgba(148,179,216,.14);
  --tk-tx:        #F2F7FF;
  --tk-tx2:       #A9C0E0;
  --tk-tx3:       #7C98BE;
  --tk-cy:        #00C2FF;
  --tk-cy-soft:   rgba(0,194,255,.14);
  --tk-indigo:    #3B5BFF;
  --tk-radius:    14px;
  --tk-ease:      cubic-bezier(.16,1,.3,1);

  /* 系统现有两张装饰大图（/assets/ 由 nginx 提供，全站同域可用） */
  --tk-img-precision: url('/assets/precision.webp');
  --tk-img-ledger:    url('/assets/ledger-kline.webp');
}

/* ==================================================================
   §1 全站壳层统一：导航 / 页脚 / 按钮 / 标题
   ================================================================== */

/* --- 导航：静态页 header.top 与 CMS .site-nav 对齐到同一观感 ---
   注意这里不只是「配色一致」，是「几何一致」。
   站点上有两套导航 DOM，无法合并：
     · 静态页：header.top > .wrap(1240) > logo + nav.mid + .top-r，flex space-between
     · CMS 页：tdk token 渲染的 nav.site-nav > ul.nav-list，链接带 padding，左对齐
   之前只统一了颜色，尺寸没统一，结果切页时导航整条往下跳 6px、链接横向错位 158px、
   吸顶行为也不一样（CMS 那份被内联 `.site-nav{position:relative}` 打掉了 sticky）。
   下面把 CMS 那份的量全部对齐到静态页：71 = 70 内容 + 1 描边。 */
header.top{
  background:rgba(6,13,26,.86) !important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--tk-line-soft) !important;
  box-shadow:0 1px 0 rgba(0,194,255,.05), 0 12px 40px -28px rgba(0,194,255,.45);
}
.site-nav{
  background:rgba(6,13,26,.86) !important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--tk-line-soft) !important;
  box-shadow:0 1px 0 rgba(0,194,255,.05), 0 12px 40px -28px rgba(0,194,255,.45);
  /* 页面内联样式在 <head> 末尾又写了 .site-nav{position:relative}，
     把 sticky 打掉了 —— 这是「切页时导航跟着滚」的直接原因，必须 !important 压回。 */
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  height:71px !important;
  box-sizing:border-box !important;
}
nav.mid a, .site-nav .nav-item > a{
  position:relative;
  color:var(--tk-tx2) !important;
  transition:color .22s var(--tk-ease);
}
nav.mid a:hover, nav.mid a.on,
.site-nav .nav-item > a:hover, .site-nav .nav-item > a.active{
  color:var(--tk-tx) !important;
}
nav.mid a.on::after, .site-nav .nav-item > a.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-24px;height:2px;
  background:linear-gradient(90deg,transparent,var(--tk-cy),transparent);
  border-radius:2px;box-shadow:0 0 12px rgba(0,194,255,.6);
}
/* 选中下划线：两套链接高度统一到 23px 后，-24 正好落在导航底边上，
   与静态页 nav.mid a.on::after 完全重合（原来 CMS 是 -2，贴着文字底） */
.site-nav .nav-item > a.active::after{left:12px !important;right:12px !important;bottom:-24px !important}
.site-nav .nav-dropdown{
  background:rgba(10,22,40,.98) !important;
  border-color:var(--tk-line) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,194,255,.06) !important;
}

/* Logo 统一 */
.logo .mark, .nav-logo .logo-icon{
  background:linear-gradient(135deg,var(--tk-cy),var(--tk-indigo)) !important;
  box-shadow:0 0 22px rgba(0,194,255,.28);
}
.logo b{color:var(--tk-tx) !important}

/* --- CMS 导航补齐品牌位与登录位 ---
   令牌渲染的 .site-nav 只有链接列表；tarka-site.js 会往里追加 .tk-auth，
   但系统没有给这两个元素任何样式，于是出现左上角两枚裸蓝色链接、并把
   导航撑高。这里纯 CSS 补出与静态页一致的「左品牌 / 中链接 / 右登录」，
   不改 DOM、不改设计令牌、不改系统脚本。

   坐标全部按静态页 .wrap 算：width 1240 / max-width calc(100% - 80px)，
   即 1440 时左边界 100、窄屏 40；mark 26px 与 .logo .mark 同规格；
   品牌文字 x = 100 + 26 + 11(gap) = 137。 */
.site-nav::before{
  content:"T";position:absolute;left:max(40px,calc((100vw - 1240px)/2));top:22px;
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tk-cy),var(--tk-indigo));
  color:#060D1A;font:700 14px/1 var(--mono,monospace);
  box-shadow:0 0 22px rgba(0,194,255,.28);z-index:1002;
}
.site-nav::after{
  content:"tarka";position:absolute;left:max(77px,calc((100vw - 1240px)/2 + 37px));top:22px;
  color:var(--tk-tx);font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:26px;z-index:1002;
}
/* 链接组：与静态页 nav.mid 同盒、同字号、同间距。
   横向位置不能用 space-between —— 它会把剩余空间摊到每一个间隙，
   连占位块两侧也被塞进间距，链接会整体左移 150px。
   静态页的分布本质是「链接组居中、再左偏 5.5px」：
   .wrap 内 logo 110 + nav 573 + .top-r 121 三项 space-between，
   左空 = 110 + 218、右空 = 218，链接组中心比容器中心左 5.5px
   (=(121-110)/2)。所以这里 justify-content:center + 右 padding 11px
   即可在任何宽度下与静态页逐像素重合（1440 → x=428，1280 → x=348）。 */
.site-nav .nav-list{
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:24px !important;
  width:1240px !important;max-width:calc(100% - 80px) !important;
  height:70px !important;min-height:0 !important;
  margin:0 auto !important;padding:0 11px 0 0 !important;
}
.site-nav .nav-list::before,.site-nav .nav-list::after{display:none !important}
.site-nav .nav-item > a{
  display:inline-block !important;
  padding:0 !important;font-size:13.5px !important;font-weight:400 !important;
  line-height:23px !important;border-radius:0 !important;background:none !important;
}
.site-nav .nav-item > a:hover{background:none !important}
.site-nav .tk-auth{
  position:absolute;right:max(40px,calc((100vw - 1240px)/2));top:0;
  height:70px;display:flex;align-items:center;gap:12px;z-index:1002;
}
.site-nav .tk-auth-login{
  color:var(--tk-tx2) !important;font-size:13.5px;transition:color .2s;
}
.site-nav .tk-auth-login:hover{color:var(--tk-tx) !important}
.site-nav .tk-auth-cta{
  display:inline-block;padding:8px 16px;border-radius:9px;
  background:var(--tk-cy) !important;color:#06131F !important;
  font-size:13.5px;font-weight:600;
  box-shadow:0 6px 22px rgba(0,194,255,.20);
  transition:transform .2s var(--tk-ease),box-shadow .25s;
}
.site-nav .tk-auth-cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,194,255,.34)}
.site-nav .tk-auth-skeleton{display:inline-block;width:96px;height:32px;border-radius:9px;background:rgba(148,179,216,.10)}
.site-nav .tk-user-btn{color:var(--tk-tx) !important}
@media (max-width:1100px){
  .site-nav::before,.site-nav::after{display:none}
  .site-nav .nav-list{padding:0 11px 0 0 !important}
  .site-nav .nav-list::before,.site-nav .nav-list::after{display:none !important}
  .site-nav .tk-auth{display:none}
}
/* 窄屏：与静态页 header.top 同高（60 内容 + 1 描边 = 61）、同一套折叠方式。
   系统默认把 8 条链接 flex-wrap 成两行，还把工具条浮上去压住第二行 ——
   窄屏下那是崩的，不只是「跳」。静态页窄屏是「单行 + 汉堡」，这里对齐：
   链接收进汉堡抽屉，抽屉由系统脚本打 .tk-open（不是 inline style）。 */
@media (max-width:760px){
  /* 内联样式在 <=1100 写了 .site-nav{min-height:64px}，会顶住 61 的高度 */
  .site-nav{height:61px !important;min-height:0 !important}
  .site-nav .nav-list{
    width:100% !important;max-width:none !important;margin:0 !important;
    height:60px !important;min-height:0 !important;
    padding:0 0 0 16px !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
  }
  .site-nav .nav-list .nav-item{display:none !important}
  /* 展开态：系统脚本给 nav-list 加 .tk-open 并置为 absolute */
  .site-nav .nav-list.tk-open{
    display:flex !important;flex-direction:column !important;
    position:absolute !important;left:0 !important;right:0 !important;top:61px !important;
    width:100% !important;height:auto !important;min-height:0 !important;
    align-items:stretch !important;gap:0 !important;
    padding:6px 0 !important;z-index:1001 !important;
    /* 半透明会让首屏大标题从菜单里透出来，读起来像重影，用实色 */
    background:#060D1A !important;
    border-bottom:1px solid var(--tk-line-soft) !important;
    box-shadow:0 24px 60px rgba(0,0,0,.55) !important;
  }
  .site-nav .nav-list.tk-open .nav-item{margin:0 !important;display:list-item !important}
  /* 抽屉底是深色实底，字必须反白。浅色主题下 --tk-tx 本身是深色，
     直接用它会出现「深字压深底」，所以这里写死浅色文字并加权选择器。 */
  .site-nav .nav-list.tk-open .nav-item > a,
  html[data-theme="light"] .site-nav .nav-list.tk-open .nav-item > a,
  html[data-theme="dark"] .site-nav .nav-list.tk-open .nav-item > a{
    display:block !important;padding:13px 24px !important;
    font-size:15px !important;line-height:1.4 !important;
    color:#F2F7FF !important;
  }
  /* 移动端登录/注册项（内联样式在 .tk-open 时把它显形） */
  .site-nav .nav-list.tk-open .nav-item.tk-auth-m{
    display:flex !important;align-items:center;gap:8px;
    padding:13px 24px !important;border-top:1px solid var(--tk-line-soft) !important;margin-top:6px !important;
  }
  .site-nav .nav-list.tk-open .nav-item.tk-auth-m > a{padding:0 !important;display:inline-block !important}
  /* 窄屏品牌位：静态页是 mark 16,17 26×26 + 「塔卡投研」17px，这里跟着走 */
  .site-nav::before{
    display:grid !important;left:16px !important;top:17px !important;
    width:26px !important;min-width:26px !important;max-width:26px !important;
    height:26px !important;min-height:26px !important;max-height:26px !important;
    border-radius:7px !important;
  }
  .site-nav::after{
    display:block !important;left:55px !important;top:17px !important;
    content:"塔卡投研" !important;   /* 静态页窄屏只留中文名，tarka 字样隐藏 */
    font-size:17px !important;line-height:26px !important;
  }
  .site-nav .tk-auth{display:none}
}

/* --- 主按钮统一 --- */
.b-primary, .btn.btn-primary, .btn-p, .sb-price-cta{
  background:var(--tk-cy) !important;
  color:#06131F !important;
  border:1px solid var(--tk-cy) !important;
  box-shadow:0 6px 22px rgba(0,194,255,.20);
  transition:transform .2s var(--tk-ease), box-shadow .25s var(--tk-ease);
}
.b-primary:hover, .btn.btn-primary:hover, .btn-p:hover, .sb-price-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(0,194,255,.34);
}
.b-ghost, .btn.btn-ghost{
  border-color:var(--tk-line) !important;
  color:var(--tk-tx) !important;
  background:rgba(255,255,255,.02) !important;
  transition:background .2s,border-color .2s,transform .2s var(--tk-ease);
}
.b-ghost:hover, .btn.btn-ghost:hover{
  background:rgba(0,194,255,.08) !important;
  border-color:rgba(0,194,255,.45) !important;
  transform:translateY(-2px);
}

/* --- 页脚统一 --- */
footer, .site-footer{
  background:linear-gradient(180deg,#0A1628 0%,#060D1A 100%) !important;
  border-top:1px solid var(--tk-line-soft) !important;
  color:var(--tk-tx2) !important;
  position:relative;
}
footer::before, .site-footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,194,255,.55),transparent);
  pointer-events:none;
}
.site-footer{--text-muted:#A9C0E0}
.site-footer h4, footer .fcol h5{color:var(--tk-tx) !important}
.site-footer a, footer .fcol a{color:var(--tk-tx2) !important;transition:color .18s}
.site-footer a:hover, footer .fcol a:hover{color:var(--tk-cy) !important}
.site-footer .footer-bottom, footer .fbot{
  border-top-color:var(--tk-line-soft) !important;
  color:var(--tk-tx3) !important;
}
footer .fbrand p{color:var(--tk-tx3) !important}

/* --- 章节标题体系统一 --- */
.s-tag, .section-label{
  color:var(--tk-cy) !important;
  letter-spacing:.14em;
  position:relative;
  display:inline-block;
}
.s-tag::before, .section-label::before{
  content:"";display:inline-block;width:16px;height:1px;vertical-align:middle;
  margin-right:9px;background:var(--tk-cy);box-shadow:0 0 8px rgba(0,194,255,.7);
}
.s-head h2, .sub-h, .section-title, .hero h1, .hero-title{
  color:var(--tk-tx) !important;
}
.s-head p, .sub-p, .section-subtitle{color:var(--tk-tx2) !important}
.grad, .gradient-text{
  background-image:linear-gradient(100deg,#7FE4FF 0%,var(--tk-cy) 38%,#8AA6FF 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;
}

/* 章节之间：细渐变分隔线 + 边缘光晕（不改间距与定位） */
#product, #how, #scenes, section.section, .section{
  border-top-color:var(--tk-line-soft);
}

/* ==================================================================
   §2 大图区域规划（仅用系统现有两张图作装饰背景，无轮播、无图片控件）
   ------------------------------------------------------------------
     区域                     图片              特效
     全站首屏 Hero            precision.webp   右侧渐入 + 28s 极慢平移 + 遮罩渐隐
     子页页头 .phead          precision.webp   系统自带材质 + 亮度呼吸
     能力区 / 场景区          ledger-kline.webp 底部渐隐行情纹理（元素自身多层背景）
     收尾 CTA .final         ledger-kline.webp 系统自带径向渐隐 + 亮度呼吸 + 呼吸光晕
     CMS 首屏 .hero-block     不叠图            沿用系统 bg-grid / scanline / bg-glow，
                                              避免与设计令牌生成的背景层争包含块
     方法论区 #how            不叠图            站点刻意留出的干净节奏带
   只用系统现有两张图，无轮播、无图片控件、不新增 <img>。
   ================================================================== */

/* 静态页首屏：叠加在既有 .hero-bg 之下，不动其定位层 */
.hero-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--tk-img-precision);
  background-size:cover;background-position:right center;
  opacity:.16;
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.55) 46%,#000 88%);
  mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.55) 46%,#000 88%);
  animation:tkDrift 28s ease-in-out infinite alternate;
}
/* CMS 首屏：沿用系统自带的 bg-grid / hero-scanline / bg-glow 层。
   不叠加图片伪元素——.hero-block 的定位由设计令牌决定，
   强加 ::after 会与令牌生成的背景层争包含块，且会盖掉系统原生效果。 */

/* 子页页头大图：沿用系统 .phead-bg，只做亮度呼吸，不改尺寸/不触发溢出 */
.phead-bg{animation:tkBreath 24s ease-in-out infinite alternate}

/* 能力区 / 场景区：ledger-kline 作底部渐隐的行情纹理。
   用元素自身的多层 background 实现，不新增伪元素、不改 position、不加
   overflow:hidden（历史上用 overflow 掩盖溢出导致过版面问题）。 */
#product, #scenes{
  background-image:
    linear-gradient(180deg,rgba(6,13,26,.99) 0%,rgba(6,13,26,.97) 40%,rgba(6,13,26,.94) 72%,rgba(6,13,26,.90) 100%),
    var(--tk-img-ledger);
  background-size:100% 100%, cover;
  background-position:center, center bottom;
  background-repeat:no-repeat;
}
/* 方法论区是站点刻意留出的干净节奏带，不叠图 */

/* 收尾 CTA：沿用系统 .final-bg，只做亮度呼吸；.final 本身已有 overflow:hidden */
.final-bg{animation:tkBreath 20s ease-in-out infinite alternate}
.final::before{animation:tkGlow 9s ease-in-out infinite}

@keyframes tkDrift{
  from{transform:translate3d(0,0,0) scale(1.02)}
  to  {transform:translate3d(-2.2%,-1.4%,0) scale(1.07)}
}
@keyframes tkBreath{
  from{filter:brightness(.88)} to{filter:brightness(1.20)}
}
@keyframes tkGlow{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.96)}
  50%    {opacity:1;   transform:translate(-50%,-50%) scale(1.06)}
}

/* ==================================================================
   §3 卡片特效
   ------------------------------------------------------------------
     卡片                        特效
     定价卡 .tier/.sb-price-card  玻璃渐变边框、hover 抬升、主推档呼吸光晕
     能力行 .feat-item           不套卡片；序号发光、要点条目 hover 右移
     真卡片 .feature-card 等     左侧渐变竖线、hover 光泽横扫
     场景卡 .scene/.case          图标发光、hover 上浮 + 顶边高光
     步骤区 .step                 序号发光、依次入场（不改原有明暗节奏）
     指标条 .metric/.counter      入场渐显 + 底部扫光
     证据/对比表 .tbl tr          行 hover 高亮 + 左侧强调条
   ================================================================== */

/* --- 定价卡 --- */
/* 四档（免费 / 99 / 199 / 企业版）统一栅格；窄屏自动回落 */
.tiers, .sb-price-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
@media(max-width:1120px){.tiers, .sb-price-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:640px){.tiers, .sb-price-grid{grid-template-columns:1fr !important}}
/* 三种能力粒度分组标题（由订阅 description 结构化驱动） */
.tier li.tk-grp{
  padding-left:0 !important;margin:10px 0 2px;
  font-family:var(--mono,"JetBrains Mono",monospace);
  font-size:10.5px !important;letter-spacing:1.4px;
  color:var(--tk-cy) !important;text-transform:uppercase;
}
.tier li.tk-grp::before{display:none !important}
.tier li.tk-grp:first-child{margin-top:0}
.tier li.tk-more{
  padding-left:0 !important;margin:12px 0 0;
  font-size:11px !important;color:var(--tk-cy) !important;opacity:.85;
}
.tier li.tk-more::before{display:none !important}
.tier .desc{min-height:64px}
.tier li{font-size:12.5px;line-height:1.6}

.tier, .sb-price-card{
  background:linear-gradient(165deg,rgba(13,28,51,.92),rgba(10,22,40,.86)) !important;
  border:1px solid var(--tk-line) !important;
  border-radius:var(--tk-radius) !important;
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 18px 48px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .28s var(--tk-ease), border-color .28s, box-shadow .28s;
  color:var(--tk-tx) !important;
}
.tier:hover, .sb-price-card:hover{
  transform:translateY(-7px);
  border-color:rgba(0,194,255,.48) !important;
  box-shadow:0 30px 70px -34px rgba(0,194,255,.42), inset 0 1px 0 rgba(0,194,255,.18);
}
.tier.hot, .sb-price-card.is-highlight{
  border-color:rgba(0,194,255,.55) !important;
  background:linear-gradient(170deg,rgba(0,194,255,.11),rgba(10,22,40,.90) 52%) !important;
  box-shadow:0 0 0 1px rgba(0,194,255,.16), 0 30px 80px -38px rgba(0,194,255,.55);
  animation:tkCardGlow 5.5s ease-in-out infinite;
}
.tier .flag, .sb-price-badge{
  background:var(--tk-cy) !important;color:#06131F !important;
  font-weight:700;box-shadow:0 4px 18px rgba(0,194,255,.35);
}
.tier .price, .sb-price-amount, .sb-price-value{color:var(--tk-tx) !important}
.tier h3, .sb-price-name{color:var(--tk-tx) !important}
.tier li, .sb-price-features li{color:var(--tk-tx2) !important}
.tier .b{
  border-color:var(--tk-line) !important;color:var(--tk-tx) !important;
  transition:background .2s,transform .2s var(--tk-ease);
}
.tier .b:hover{background:rgba(0,194,255,.10) !important;transform:translateY(-2px)}
.tier.hot .b{background:var(--tk-cy) !important;color:#06131F !important;border-color:var(--tk-cy) !important}
@keyframes tkCardGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(0,194,255,.14), 0 26px 70px -40px rgba(0,194,255,.42)}
  50%    {box-shadow:0 0 0 1px rgba(0,194,255,.34), 0 34px 88px -36px rgba(0,194,255,.68)}
}

/* --- 能力区 .feat-item 不是卡片，是整行三栏网格 ---
   站点原设计是「细分隔线 + 序号 + 正文 + 右侧要点」的清单行，
   绝不能给它套边框/背景/overflow:hidden（会把网格裁掉、把行变成毛玻璃卡片）。
   这里只给序号与要点条目做轻量反馈，保持行结构原样。 */
.feat-item .fi-n{
  color:var(--tk-cy) !important;
  text-shadow:0 0 18px rgba(0,194,255,.28);
  transition:text-shadow .3s var(--tk-ease);
}
.feat-item:hover .fi-n{text-shadow:0 0 26px rgba(0,194,255,.65)}
.feat-item ul li{
  border:1px solid var(--tk-line-soft);
  border-radius:9px;
  transition:border-color .24s,background .24s,transform .24s var(--tk-ease);
}
.feat-item ul li:hover{
  border-color:rgba(0,194,255,.40);
  background:rgba(0,194,255,.055);
  transform:translateX(3px);
}
.feat-item h3{color:var(--tk-tx) !important}
.feat-item p{color:var(--tk-tx2) !important}

/* --- 真正的卡片类名（CMS 区块 / 其他基底）才用光泽横扫 --- */
.feature-card, .product-card, .insight-card, .glass-card{
  position:relative;overflow:hidden;
  transition:transform .28s var(--tk-ease), border-color .28s, box-shadow .28s;
}
.feature-card::before, .product-card::before, .insight-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--tk-cy),transparent);
  opacity:.35;transition:opacity .3s;
}
.feature-card:hover, .product-card:hover, .insight-card:hover, .glass-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,194,255,.34) !important;
  box-shadow:0 22px 54px -32px rgba(0,194,255,.42);
}
.feature-card:hover::before, .product-card:hover::before,
.insight-card:hover::before{opacity:1}
.feature-card::after, .product-card::after, .insight-card::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(0,194,255,.07),transparent);
  transform:skewX(-18deg);pointer-events:none;
  transition:left .7s var(--tk-ease);
}
.feature-card:hover::after, .product-card:hover::after,
.insight-card:hover::after{left:130%}
.feature-card h4, .product-card h4, .insight-card h4{color:var(--tk-tx) !important}
.feature-card p, .product-card p, .insight-card p{color:var(--tk-tx2) !important}

/* --- 场景卡 / 案例卡：图标发光 + 上浮 + 顶边高光 --- */
.scene, .case, .trust-item, .step-card, .review-card{
  position:relative;
  background:rgba(13,28,51,.56) !important;
  border:1px solid var(--tk-line-soft) !important;
  border-radius:var(--tk-radius) !important;
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  transition:transform .28s var(--tk-ease), border-color .28s, box-shadow .28s;
}
.scene::after, .case::after{
  content:"";position:absolute;top:-1px;left:18%;right:18%;height:1px;
  background:linear-gradient(90deg,transparent,var(--tk-cy),transparent);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.scene:hover, .case:hover, .trust-item:hover, .step-card:hover{
  transform:translateY(-5px);
  border-color:rgba(0,194,255,.34) !important;
  box-shadow:0 22px 52px -32px rgba(0,194,255,.45);
}
.scene:hover::after, .case:hover::after{opacity:1}
.scene .icon, .f-icon{
  border:1px solid rgba(0,194,255,.28) !important;
  background:rgba(0,194,255,.07) !important;
  box-shadow:0 0 20px rgba(0,194,255,.14);
  transition:box-shadow .3s,transform .3s var(--tk-ease);
}
.scene:hover .icon, .feature-card:hover .f-icon{
  box-shadow:0 0 28px rgba(0,194,255,.42);transform:scale(1.06);
}
.scene h4, .case h4{color:var(--tk-tx) !important}
.scene p, .case p{color:var(--tk-tx2) !important}
.scene .more{color:var(--tk-cy) !important}

/* --- 步骤区：只补序号发光与依次入场 ---
   不改 .num 的 border/color/background、不改 .line 配色：
   .light-zone 对首步实心圆与连线有专门设计，强覆盖会把明暗节奏抹平。 */
.step .num, .step-card .step-number{
  box-shadow:0 0 18px rgba(0,194,255,.16);
}
.light-zone .step:first-child .num{box-shadow:0 0 24px rgba(0,194,255,.38)}
.flow .step:nth-child(1) .num{animation:tkStepIn .7s .05s backwards}
.flow .step:nth-child(2) .num{animation:tkStepIn .7s .18s backwards}
.flow .step:nth-child(3) .num{animation:tkStepIn .7s .31s backwards}
.flow .step:nth-child(4) .num{animation:tkStepIn .7s .44s backwards}
@keyframes tkStepIn{
  from{opacity:0;transform:translateY(8px) scale(.9);box-shadow:0 0 0 rgba(0,194,255,0)}
  to  {opacity:1;transform:none;box-shadow:0 0 18px rgba(0,194,255,.2)}
}

/* --- 指标条：入场渐显 + 底部扫光 --- */
.metric, .stat-item, .counter-item{
  position:relative;
  animation:tkFadeUp .8s backwards;
}
.metric:nth-child(1){animation-delay:.05s}
.metric:nth-child(2){animation-delay:.14s}
.metric:nth-child(3){animation-delay:.23s}
.metric:nth-child(4){animation-delay:.32s}
.metric::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:linear-gradient(90deg,var(--tk-cy),transparent);
  transition:width .55s var(--tk-ease);pointer-events:none;
}
.metric:hover::after{width:100%}
.metric b{color:var(--tk-tx) !important}
.metric span{color:var(--tk-tx2) !important}
@keyframes tkFadeUp{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}

/* --- 对比表 / 证据行：hover 高亮 --- */
.tbl tbody tr, .evi-row{
  transition:background .2s,box-shadow .2s;
}
.tbl tbody tr:hover, .evi-row:hover{
  background:rgba(0,194,255,.055) !important;
  box-shadow:inset 2px 0 0 var(--tk-cy);
}
.tbl th.hl, .tbl td.hl{background:rgba(0,194,255,.045) !important}
.tbl .yes{color:var(--tk-cy) !important}
.tbl .nm{color:var(--tk-tx) !important}

/* --- 徽标 / 胶囊 --- */
.badge{
  border-color:rgba(0,194,255,.28) !important;
  background:rgba(0,194,255,.045) !important;
}
.badge em{background:var(--tk-cy-soft) !important;color:var(--tk-cy) !important}

/* ==================================================================
   §4 栏目 / 页面级特效
   ------------------------------------------------------------------
     栏目                  特效
     章节标签              短线展开 + 淡入
     章节标题              淡入上移（首屏除外，避免闪烁）
     流程 / 时间线          连接线依次点亮
     FAQ                   展开高亮
     定价 / 对比区          卡片错峰入场
     全站                  reduced-motion 降级
   ================================================================== */
.s-head, .section-inner > .section-title{
  animation:tkFadeUp .85s var(--tk-ease) backwards;
}
.s-tag::before{animation:tkLineGrow .9s var(--tk-ease) backwards}
@keyframes tkLineGrow{
  from{width:0;opacity:0} to{width:16px;opacity:1}
}
/* 错峰入场统一用 backwards：动画结束后释放 transform，
   否则 `both` 会把最终关键帧的 transform:none 锁死，卡片 hover 抬升失效。 */
.tiers .tier:nth-child(1), .sb-price-grid .sb-price-card:nth-child(1){animation:tkFadeUp .7s .06s backwards}
.tiers .tier:nth-child(2), .sb-price-grid .sb-price-card:nth-child(2){animation:tkFadeUp .7s .16s backwards}
.tiers .tier:nth-child(3), .sb-price-grid .sb-price-card:nth-child(3){animation:tkFadeUp .7s .26s backwards}
.tiers .tier:nth-child(4), .sb-price-grid .sb-price-card:nth-child(4){animation:tkFadeUp .7s .36s backwards}
/* 主推档同时保留错峰入场 + 呼吸光晕（单条 animation 会互相覆盖） */
.tiers .tier.hot, .sb-price-grid .sb-price-card.is-highlight{
  animation:tkFadeUp .7s .26s backwards, tkCardGlow 5.5s ease-in-out infinite;
}
.scenes .scene:nth-child(1), .feat-list .feat-item:nth-child(1){animation:tkFadeUp .7s .08s backwards}
.scenes .scene:nth-child(2), .feat-list .feat-item:nth-child(2){animation:tkFadeUp .7s .18s backwards}
.scenes .scene:nth-child(3), .feat-list .feat-item:nth-child(3){animation:tkFadeUp .7s .28s backwards}
.scenes .scene:nth-child(4), .feat-list .feat-item:nth-child(4){animation:tkFadeUp .7s .38s backwards}

.faq details, .sb-faq-item{
  border-bottom-color:var(--tk-line-soft) !important;
  transition:background .25s;
}
.faq details[open], .sb-faq-item:hover{background:rgba(0,194,255,.035)}
.faq summary{color:var(--tk-tx) !important;transition:color .2s}
.faq summary:hover{color:var(--tk-cy) !important}
.faq details p{color:var(--tk-tx2) !important}

/* 提示条 */
.band{
  border:1px solid rgba(0,194,255,.24) !important;
  background:rgba(0,194,255,.055) !important;
  border-radius:var(--tk-radius) !important;
  color:var(--tk-tx2) !important;
}
.band b, .band strong{color:var(--tk-tx) !important}

/* ==================================================================
   §5 订阅门户：统一壳层 + 视觉对齐（导航 / 页脚由模板输出）
   ================================================================== */
.tk-portal .container{max-width:1200px}
.tk-portal .header{
  border-bottom:1px solid var(--tk-line-soft);
  padding-bottom:18px;margin-bottom:26px;
}
.tk-portal .header h1{color:var(--tk-tx) !important;font-size:24px}
.tk-portal .market-badge{
  background:var(--tk-cy-soft) !important;color:var(--tk-cy) !important;
  border:1px solid rgba(0,194,255,.28);
}
.tk-portal .tabs{border-bottom:1px solid var(--tk-line-soft)}
.tk-portal .tab{color:var(--tk-tx2) !important;transition:color .2s}
.tk-portal .tab:hover{color:var(--tk-tx) !important}
.tk-portal .tab.active{
  color:var(--tk-cy) !important;
  background:var(--tk-cy-soft) !important;
  border-bottom-color:var(--tk-cy) !important;
  border-radius:8px 8px 0 0;
}
.tk-portal .card, .tk-portal .sub-item, .tk-portal .modal .modal-content{
  background:linear-gradient(160deg,rgba(13,28,51,.88),rgba(10,22,40,.82)) !important;
  border:1px solid var(--tk-line) !important;
  border-radius:var(--tk-radius) !important;
  color:var(--tk-tx) !important;
  transition:transform .26s var(--tk-ease),border-color .26s,box-shadow .26s;
}
.tk-portal .card:hover{
  transform:translateY(-4px);border-color:rgba(0,194,255,.40) !important;
  box-shadow:0 22px 54px -32px rgba(0,194,255,.42);
}
.tk-portal .price-option{
  border-color:var(--tk-line) !important;background:rgba(255,255,255,.02) !important;
}
.tk-portal .price-option:hover{border-color:rgba(0,194,255,.45) !important}
.tk-portal .price-option.selected{
  border-color:var(--tk-cy) !important;background:rgba(0,194,255,.10) !important;
}
.tk-portal .price-amount{color:var(--tk-cy) !important}
.tk-portal .price-label, .tk-portal .card p{color:var(--tk-tx2) !important}
.tk-portal table th{color:var(--tk-tx2) !important;border-bottom-color:var(--tk-line) !important}
.tk-portal table td{color:var(--tk-tx) !important;border-bottom-color:var(--tk-line-soft) !important}
.tk-portal tr:hover td{background:rgba(0,194,255,.05)}
.tk-portal .btn-primary, .tk-portal button.primary{
  background:var(--tk-cy) !important;color:#06131F !important;border-color:var(--tk-cy) !important;
}
.tk-portal .channel-btn{border-color:var(--tk-line) !important;color:var(--tk-tx2) !important}
.tk-portal .channel-btn.selected{
  border-color:var(--tk-cy) !important;color:var(--tk-cy) !important;
  background:rgba(0,194,255,.10) !important;
}
.tk-portal .modal{background:rgba(6,13,26,.82);backdrop-filter:blur(6px)}

/* ==================================================================
   §6 认证页：只统一色板与卡片观感，不动表单结构
   ================================================================== */
.login-page{
  background:radial-gradient(1000px 620px at 50% -10%,rgba(0,194,255,.10),transparent 70%),
             linear-gradient(180deg,#060D1A,#0A1628) !important;
}
.login-container, .register-container{
  background:rgba(13,28,51,.72) !important;
  border:1px solid var(--tk-line) !important;
  border-radius:var(--tk-radius) !important;
  backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 30px 90px -40px rgba(0,194,255,.35);
}
.login-page .btn-primary, .login-page button[type="submit"]{
  background:var(--tk-cy) !important;color:#06131F !important;border-color:var(--tk-cy) !important;
}

/* ==================================================================
   §7 无障碍与响应式
   ================================================================== */
:focus-visible{
  outline:2px solid var(--tk-cy);
  outline-offset:3px;
  border-radius:4px;
}
@media (max-width:760px){
  .hero-bg::after{opacity:.07}
  /* 能力区/场景区的大图纹理在窄屏收敛，避免压住正文 */
  #product, #scenes{
    background-image:
      linear-gradient(180deg,rgba(6,13,26,.995) 0%,rgba(6,13,26,.985) 55%,rgba(6,13,26,.96) 100%),
      var(--tk-img-ledger);
  }
  .tier:hover, .sb-price-card:hover,
  .scene:hover, .case:hover, .feat-item ul li:hover{transform:none}
  .feature-card::after, .product-card::after, .insight-card::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ==================================================================
   §8 订阅门户壳层（该页仅加载 design-system + 本共享层，需自带最小布局）
   仅 .tk-portal 作用域，不影响其他基底
   ================================================================== */
.tk-portal{
  background:linear-gradient(180deg,#060D1A,#0A1628 60%,#060D1A) !important;
  color:var(--tk-tx) !important;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif !important;
}
.tk-portal header.top{
  position:sticky;top:0;z-index:100;height:70px;
  background:rgba(6,13,26,.88);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--tk-line-soft);
}
/* 该页没有加载站点 site.css，跳转链接默认会裸露在左上角 */
.tk-portal .skip{position:absolute;left:-9999px;top:0;z-index:200}
.tk-portal .skip:focus{
  left:12px;top:12px;padding:8px 14px;border-radius:8px;
  background:var(--tk-cy);color:#06131F;
}
.tk-portal header.top .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:70px;max-width:1200px;margin:0 auto;padding:0 24px;
}
.tk-portal .logo{display:flex;align-items:center;gap:11px;color:var(--tk-tx)}
.tk-portal .logo .mark{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tk-cy),var(--tk-indigo));
  color:#060D1A;font-family:var(--mono,monospace);font-size:14px;font-weight:700;
}
.tk-portal .logo b{font-size:19px;font-weight:800;letter-spacing:-.4px}
.tk-portal nav.mid{display:flex;gap:22px;font-size:13.5px}
.tk-portal nav.mid a{color:var(--tk-tx2);position:relative;transition:color .2s}
.tk-portal nav.mid a:hover,.tk-portal nav.mid a.on{color:var(--tk-tx)}
.tk-portal .top-r{display:flex;align-items:center;gap:12px;font-size:14px}
.tk-portal .burger{display:none}
.tk-portal .container{padding-top:32px;padding-bottom:56px}
.tk-portal footer{padding:56px 0 24px;margin-top:0}
.tk-portal footer .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.tk-portal .fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px}
.tk-portal .fbrand p{font-size:12.5px;line-height:1.8;max-width:300px}
.tk-portal .fcol{display:flex;flex-direction:column;gap:10px}
.tk-portal .fcol h5{font-size:13px;color:var(--tk-tx);margin-bottom:4px}
.tk-portal .fcol a{font-size:12.5px;color:var(--tk-tx2);transition:color .18s}
.tk-portal .fcol a:hover{color:var(--tk-cy)}
.tk-portal .fbot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:36px;padding-top:18px;border-top:1px solid var(--tk-line-soft);
  font-size:12px;color:var(--tk-tx3);
}
@media(max-width:980px){
  .tk-portal nav.mid{display:none}
  .tk-portal .fgrid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:520px){
  .tk-portal .fgrid{grid-template-columns:1fr}
}

/* ==================================================================
   §9 全站基底收口（2026-11-08 统一评估后追加）
   ------------------------------------------------------------------
   背景：全站三套基底残留两套视觉体系——CMS 页走 design-system.css 的
   霓虹紫/Inter 体系，认证页底色 #050508。本节把残余变量接管到与
   §1 相同的深蓝体系（只动色与字体，不动布局与结构）。
   ================================================================== */

/* --- 9.1 design-system 变量接管：landing / 认证 / 门户共用 --- */
:root{
  /* 字体：全站统一 Noto Sans SC 体系（原 --font-en Inter / --font-display Orbitron 收敛） */
  --font-cn:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-en:"Noto Sans SC","Source Han Sans SC","PingFang SC",system-ui,sans-serif;
  --font-display:"Noto Sans SC","PingFang SC",system-ui,sans-serif;
  /* 底色 / 面板：原 #050508 / #0a0a12 / #12121e 霓虹黑 → 深蓝体系 */
  --bg-deep:#060D1A;
  /* --bg 不在此接管：静态页 site.css 的 --bg:#060D1A 是其基色，避免被覆盖 */
  --bg-elevated:#0D1C33;
  --bg-card:#0D1C33;
  --bg-glass:rgba(10,22,40,.72);
  --bg-overlay:rgba(4,9,18,.72);
  /* 文字 */
  --text:#F2F7FF;
  --text-high:#F2F7FF;
  --text-dim:#A9C0E0;
  --text-muted:#7C98BE;
  /* 描边 */
  --border:#16305A;
  --border-accent:rgba(0,194,255,.45);
  /* 强调色：霓虹青 #00f5ff / 紫 #6366f1 → 站点青蓝体系 */
  --blue:#00C2FF;
  --cyan:#00C2FF;
  --indigo:#3B5BFF;
  --violet:#8AA6FF;
  --green:#23A55A;
  /* 渐变：紫青渐变 → 青蓝渐变（保留同方向语义） */
  --gradient-primary:linear-gradient(135deg,#00C2FF,#3B5BFF);
  --gradient-electric:linear-gradient(135deg,#00C2FF,#8AA6FF);
  --gradient-neon:linear-gradient(135deg,#23A55A,#00C2FF);
  --gradient-dark:linear-gradient(180deg,#0A1628,#060D1A);
}

/* --- 9.2 认证页底色统一（原 #050508） --- */
.login-page,
body:has(.login-container),
body:has(.reg-container){
  background:radial-gradient(1000px 620px at 50% -10%,rgba(0,194,255,.10),transparent 70%),
             linear-gradient(180deg,#060D1A,#0A1628) !important;
}
/* §6 补漏：注册页容器实际类名是 .reg-container */
.reg-container{
  background:rgba(13,28,51,.72) !important;
  border:1px solid var(--tk-line) !important;
  border-radius:var(--tk-radius) !important;
  backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 30px 90px -40px rgba(0,194,255,.35);
}
.register-page .btn-primary, .reg-container button[type="submit"]{
  background:var(--tk-cy) !important;color:#06131F !important;border-color:var(--tk-cy) !important;
}

/* --- 9.3 CMS 滚动导航底色（原 rgba(5,5,8,.92) 纯黑） --- */
.nav.scrolled{
  background:rgba(6,13,26,.95) !important;
  box-shadow:0 1px 0 rgba(0,194,255,.06), 0 18px 50px -30px rgba(0,194,255,.35) !important;
}

/* --- 9.4 残余霓虹紫发光 → 青蓝体系 --- */
.hero-badge{
  background:rgba(0,194,255,.08);
  border-color:rgba(0,194,255,.28);
  color:var(--tk-cy);
}
.bg-grid{
  background-image:linear-gradient(rgba(0,194,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,194,255,.05) 1px,transparent 1px);
}
.bg-glow-blue{background:radial-gradient(circle,rgba(0,194,255,.07) 0%,transparent 70%)}
.bg-glow-indigo{background:radial-gradient(circle,rgba(59,91,255,.10) 0%,transparent 70%)}
.bg-glow-violet{background:radial-gradient(circle,rgba(138,166,255,.05) 0%,transparent 70%)}
.nav-logo .logo-icon{box-shadow:0 0 20px rgba(0,194,255,.30)}
.nav-logo .logo-icon::after{background:var(--gradient-primary)}
.nav-cta{box-shadow:0 0 20px rgba(0,194,255,.22)}
.nav-cta:hover{box-shadow:0 8px 30px rgba(0,194,255,.38) !important}

/* --- 9.5 CMS 首屏与静态子页页头同节奏 --- */
/* 原 .hero-block{min-height:100vh} 使 CMS 子页首屏空占一屏，与静态页
   .phead 的紧凑页头节奏不符；统一为与静态子页一致的页头高度。 */
.hero-block{
  min-height:auto !important;
  padding:150px 40px 90px !important;
}
.hero-block .hero-title{
  font-size:clamp(34px,3.5vw,50px);
  letter-spacing:-1.8px;
  line-height:1.16;
}

/* ==================================================================
   §10 图像增强（2026-11-08 用户指令：样式单调，必须使用图片）
   ------------------------------------------------------------------
   原则：只用站点现有两张实拍/渲染素材（precision.webp、ledger-kline.webp），
   全部以 CSS 背景 + mask 渐隐实现，零 HTML 改动。
   层级纪律：装饰图 opacity .18~.5，一律渐隐融入深蓝场，不与文字争夺对比度。
   ================================================================== */

/* --- 10.1 首屏 hero：precision 材质右入，首屏不再纯文字+渐变 --- */
.hero-bg{
  background:
    radial-gradient(900px 520px at 50% -8%,rgba(0,194,255,.16) 0%,rgba(0,194,255,0) 70%),
    radial-gradient(700px 460px at 88% 12%,rgba(59,91,255,.11) 0%,rgba(59,91,255,0) 72%),
    url(/assets/precision.webp) right 42%/cover no-repeat;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,#060D1A 0%,rgba(6,13,26,.86) 34%,rgba(6,13,26,.42) 62%,rgba(6,13,26,.72) 100%),
    linear-gradient(180deg,rgba(6,13,26,.10) 40%,#060D1A 96%);
}
@media(max-width:900px){
  .hero-bg{background-position:72% 42%}
  .hero-bg::after{background:
    linear-gradient(90deg,#060D1A 8%,rgba(6,13,26,.80) 55%,rgba(6,13,26,.62) 100%),
    linear-gradient(180deg,rgba(6,13,26,.10) 40%,#060D1A 96%);}
}

/* --- 10.2 已有两处素材图提级：从「隐约可见」到真实可感知 --- */
.final-bg{opacity:.52 !important}
.phead-bg{opacity:.48 !important}
.phead-bg{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 34%,#000 68%) !important;
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 34%,#000 68%) !important}

/* --- 10.3 pricing / clients 页头补图（products 已有 .phead-bg，用 :has 避免叠加） --- */
.phead:not(:has(.phead-bg))::after{
  content:"";position:absolute;right:0;top:0;z-index:0;width:52%;height:100%;pointer-events:none;
  background:url(/assets/precision.webp) right center/cover no-repeat;
  opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 34%,#000 68%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 34%,#000 68%);
}
@media(max-width:760px){
  .phead:not(:has(.phead-bg))::after{width:100%;height:58%;top:auto;bottom:0;opacity:.22;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 62%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 62%);}
}

/* --- 10.4 首页「四个阶段」：K 线实拍横幅底纹，打破纯文字中段 --- */
#how{position:relative;overflow:hidden}
#how::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(/assets/ledger-kline.webp) center 38%/cover no-repeat;
  opacity:.13;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,rgba(0,0,0,.85) 55%,transparent 92%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 26%,rgba(0,0,0,.85) 55%,transparent 92%);
}
#how .wrap{position:relative}

/* --- 10.5 首页「使用场景」三卡：同一实拍不同裁位，顶部图带 --- */
#scenes .scene{position:relative;overflow:hidden}
#scenes .scene::before{
  content:"";position:absolute;left:0;right:0;top:0;height:104px;pointer-events:none;
  background:url(/assets/ledger-kline.webp) center 45%/cover no-repeat;
  opacity:.20;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,transparent 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,transparent 100%);
}
#scenes .scene:nth-child(2)::before{background-position:28% 45%}
#scenes .scene:nth-child(3)::before{background-position:76% 40%}
#scenes .scene > *{position:relative}

/* --- 10.6 CMS 八页页头（.hero-block）：与静态子页同材质 --- */
.hero-block{position:relative;overflow:hidden}
.hero-block::before{
  content:"";position:absolute;left:auto;right:0;top:0;width:52%;height:100%;pointer-events:none;
  background:url(/assets/precision.webp) right center/cover no-repeat;
  opacity:.40;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 34%,#000 68%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 34%,#000 68%);
}
@media(max-width:760px){
  .hero-block::before{width:100%;height:58%;top:auto;bottom:0;opacity:.20;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 62%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 62%);}
}
/* CMS 页头文字在图上层，加深保护 */
.hero-block .hero-title,.hero-block .hero-sub{position:relative;z-index:1}

/* ==================================================================
   §11 明暗双样式：浅色令牌（2026-11-08）
   ------------------------------------------------------------------
   本节必须放在文件末尾：§1 的导航/按钮规则带 !important，
   浅色覆盖要用同权重 + !important 且后出现才能压住。
   只重定义 --tk-* 与少数被 !important 写死的构件，不改任何布局。
   ================================================================== */
[data-theme="light"]{
  --tk-bg:#F5F8FD;
  --tk-bg2:#FFFFFF;
  --tk-card:#FFFFFF;
  --tk-line:#D7E2F1;
  --tk-line-soft:rgba(16,40,72,.10);
  --tk-tx:#0A1A30;
  --tk-tx2:#33506F;
  --tk-tx3:#5B7695;
  --tk-cy:#0A7FC4;
  --tk-cy-soft:rgba(10,127,196,.10);
  --tk-indigo:#1E4FD8;

  /* §9 在 :root 上把 design-system 的底色/文字钉成深色，浅色模式整体翻过来。
     CMS 页走 §11.2（body.tk-cms），这里主要服务静态四页与订阅门户。 */
  --bg-deep:#F5F8FD;
  --bg-elevated:#EDF3FB;
  --bg-card:#FFFFFF;
  --bg-glass:rgba(255,255,255,.82);
  --bg-overlay:rgba(245,248,253,.86);
  --text:#0B1A2E;
  --text-high:#0B1A2E;
  --text-dim:#44586F;
  --text-muted:#6C8199;
  --border:#DCE6F3;
  --border-accent:rgba(10,127,196,.45);
  --gradient-dark:linear-gradient(180deg,#FFFFFF,#F5F8FD);
}

/* 导航壳 */
[data-theme="light"] header.top,
[data-theme="light"] .site-nav{
  background:rgba(255,255,255,.90) !important;
  border-bottom:1px solid rgba(16,40,72,.10) !important;
  box-shadow:0 1px 0 rgba(16,40,72,.04), 0 14px 36px -30px rgba(16,40,72,.45);
}
[data-theme="light"] nav.mid a,
[data-theme="light"] .site-nav .nav-item > a{color:var(--tk-tx2) !important}
[data-theme="light"] nav.mid a:hover,
[data-theme="light"] nav.mid a.on,
[data-theme="light"] .site-nav .nav-item > a:hover,
[data-theme="light"] .site-nav .nav-item > a.active{color:var(--tk-tx) !important}

/* 按钮 */
[data-theme="light"] .b-primary,
[data-theme="light"] .btn.btn-primary{
  background:var(--tk-cy) !important;color:#fff !important;border-color:var(--tk-cy) !important;
  box-shadow:0 6px 20px rgba(10,127,196,.22);
}
[data-theme="light"] .b-ghost,
[data-theme="light"] .btn.btn-ghost{
  background:#FFFFFF !important;
  color:var(--tk-tx) !important;
  border-color:var(--tk-line) !important;
}
[data-theme="light"] .b-ghost:hover,
[data-theme="light"] .btn.btn-ghost:hover{
  background:#EEF4FB !important;border-color:var(--tk-cy) !important;
}
[data-theme="light"] .auth .a-reg{color:var(--tk-tx) !important}
[data-theme="light"] .auth .a-login{color:var(--tk-tx2) !important}
[data-theme="light"] .auth .a-console{background:var(--tk-cy) !important;color:#fff !important}
[data-theme="light"] .auth .sep{color:var(--tk-tx3) !important}
[data-theme="light"] .theme-btn{color:var(--tk-tx2);border-color:var(--tk-line);background:#fff}
[data-theme="light"] .logo-pd{color:var(--tk-tx3);border-left-color:var(--tk-line)}
[data-theme="light"] .logo b{color:var(--tk-tx)}

/* 页脚与浅色区 */
[data-theme="light"] footer,
[data-theme="light"] .site-footer{background:#EDF3FA !important;border-top-color:rgba(16,40,72,.10) !important}
[data-theme="light"] .fcol a,
[data-theme="light"] .site-footer a{color:var(--tk-tx2) !important}
[data-theme="light"] .fcol h5{color:var(--tk-tx3) !important}
[data-theme="light"] .fbot{color:var(--tk-tx3) !important;border-top-color:rgba(16,40,72,.08) !important}

/* 四屏：浅色下按钮与标签 */
[data-theme="light"] .sl-tag{color:var(--tk-cy)}
[data-theme="light"] .sl-tag b{background:rgba(10,127,196,.08);border-color:rgba(10,127,196,.26);color:var(--tk-cy)}
[data-theme="light"] .s-more{border-bottom-color:var(--tk-line)}
[data-theme="light"] .stage-count{color:var(--tk-tx3)}
[data-theme="light"] .stage-count b{color:var(--tk-cy)}
[data-theme="light"] .stage-rail .dot{color:var(--tk-tx3)}
[data-theme="light"] .stage-rail .dot.on{color:var(--tk-cy)}

/* 移动端抽屉 */
[data-theme="light"] body nav.mid{background:#FFFFFF !important;border-bottom-color:rgba(16,40,72,.10) !important}
[data-theme="light"] body nav.mid a{border-bottom-color:rgba(16,40,72,.07) !important}

/* ==================================================================
   §11.2 浅色：CMS 区块令牌覆盖（2026-11-08）
   ------------------------------------------------------------------
   CMS 页（/about /help /download /contact…）的色值来自 <head> 内联
   :root{--color-*}（design_tokens 渲染），与 :root 同优先级但更靠后，
   普通 [data-theme] 选择器会被它压住。这里用 html[data-theme="light"]
   （多一个类型选择器，优先级更高）改写最底层的 --color-*，让
   --bg-deep / --text / --text-dim / --bg-glass 的引用链整体切浅。
   ================================================================== */
html[data-theme="light"] body.tk-cms{
  --color-background:#F5F8FD;
  --color-surface:#FFFFFF;
  --color-border:#DCE6F3;
  --color-text_primary:#0B1A2E;
  --color-text_secondary:#44586F;
  /* 同时接管 design-system 的底色/文字层，区块背景才会一起变浅 */
  --bg-deep:#F5F8FD;
  --bg-elevated:#EDF3FB;
  --bg-card:#FFFFFF;
  --bg-glass:rgba(255,255,255,.82);
  --bg-overlay:rgba(245,248,253,.86);
  --text:#0B1A2E;
  --text-high:#0B1A2E;
  --text-dim:#44586F;
  --text-muted:#6C8199;
  --border:#DCE6F3;
  --gradient-dark:linear-gradient(180deg,#FFFFFF,#F5F8FD);
  background:#F5F8FD;color:#0B1A2E;
}
/* 装饰层在浅底上收力，否则像脏点 */
html[data-theme="light"] body.tk-cms .bg-grid{opacity:.45}
html[data-theme="light"] body.tk-cms .bg-glow{opacity:.26}
html[data-theme="light"] body.tk-cms .hero-scanline{opacity:.30}
html[data-theme="light"] body.tk-cms .section-dark{background:#EDF3FB}
html[data-theme="light"] body.tk-cms .site-footer{background:#FFFFFF;border-top-color:#DCE6F3}
/* 浅底上照片要淡很多，否则像一块脏灰 */
html[data-theme="light"] body.tk-cms .hero-block::before{opacity:.16}
html[data-theme="light"] body.tk-cms ::selection{background:#0A7FC4;color:#fff}

/* --- §11.3 浅色：被 §1 用 !important 钉死的组件 --- */
/* 定价卡：§1 用深色玻璃渐变写死，浅色要换成白卡，否则一整排黑块 */
[data-theme="light"] .tier,
[data-theme="light"] .sb-price-card{
  background:linear-gradient(165deg,#FFFFFF,#F4F8FE) !important;
  border-color:var(--tk-line) !important;
  box-shadow:0 16px 40px -30px rgba(16,40,72,.42), inset 0 1px 0 #fff;
}
[data-theme="light"] .tier.hot,
[data-theme="light"] .sb-price-card.is-highlight{
  background:linear-gradient(170deg,rgba(10,127,196,.10),#FFFFFF 62%) !important;
  box-shadow:0 0 0 1px rgba(10,127,196,.18), 0 24px 60px -34px rgba(10,127,196,.42);
}
[data-theme="light"] .tier:hover,
[data-theme="light"] .sb-price-card:hover{
  border-color:rgba(10,127,196,.45) !important;
  box-shadow:0 26px 60px -34px rgba(10,127,196,.40), inset 0 1px 0 #fff;
}
/* 静态页里写死的深色段落底（内联 style，只能靠属性选择器 + !important 盖） */
[data-theme="light"] section[style*="#0A1628"]{
  background:linear-gradient(180deg,#FFFFFF,#F1F6FD) !important;
  border-top-color:var(--tk-line) !important;
}
/* 对比表在浅底上的斑马纹 */
[data-theme="light"] .tbl tbody tr:hover td{background:rgba(10,127,196,.05)}
[data-theme="light"] .tbl .dim,[data-theme="light"] .tbl .ml{color:var(--tk-tx3)}

/* ==================================================================
   §12 品牌名统一（2026-11-08）
   ------------------------------------------------------------------
   静态四页头部原来是 mark + tarka + 小字「塔卡投研」徽标，主次颠倒，
   且与 CMS 页（.site-nav::after 输出「塔卡投研」）不一致。这里把
   中文产品名提为主标识，英文 tarka 作为标识字母保留在 T 里。
   ================================================================== */
header.top .logo b:not(.logo-name),
footer .logo b:not(.logo-name){display:none !important}
header.top .logo .logo-name,.site-footer .logo .logo-name{display:inline-block !important}
header.top .logo-pd,
footer .logo-pd{
  display:inline-block !important;
  font-style:normal;font-size:18px;font-weight:700;letter-spacing:-.3px;
  color:var(--tk-tx) !important;
  margin-left:2px;padding-left:0;border-left:0;
}
@media (max-width:640px){
  header.top .logo-pd,
  footer .logo-pd{font-size:16px}
}

/* ==================================================================
   §11.4 浅色：能力区 / 场景区的固定深底（2026-11-08）
   ------------------------------------------------------------------
   §2 把 #product / #scenes 的 background-image 写成「深色渐变 +
   ledger-kline 行情纹理」，写死在元素上，浅色模式翻不过来 ——
   于是整段变成「深底 + 深色字」，正文直接糊掉。
   这里按主题把遮罩换成近白，照片留作极淡的肌理，与四屏 slide-bg
   的处理方式一致（图还在，只是退到背景里）。
   选择器带 [data-theme="light"]，优先级高于 §2 与 ≤760px 的同名规则。
   ================================================================== */
[data-theme="light"] #product,
[data-theme="light"] #scenes{
  background-image:
    linear-gradient(180deg,rgba(248,251,254,.972) 0%,rgba(246,249,253,.958) 40%,rgba(245,248,253,.936) 72%,rgba(245,248,253,.90) 100%),
    var(--tk-img-ledger);
  background-size:100% 100%, cover;
  background-position:center, center bottom;
  background-repeat:no-repeat;
}
/* 浅底上能力条目的分隔线也要跟着淡化，否则像硬铅笔线 */
[data-theme="light"] .feat-item{border-color:rgba(16,40,72,.10)}
[data-theme="light"] .fi-n{color:var(--tk-cy)}
[data-theme="light"] .fi-n span{color:var(--tk-tx3)}

/* 深色模式下 13%/20% 的黑底图几乎看不见，浅色下却是一块灰。
   同一张 ledger-kline，浅色时压到 5%/7%，只留「有纹理」的暗示。 */
[data-theme="light"] #how::before{opacity:.05}
[data-theme="light"] #scenes .scene::before{opacity:.07}
[data-theme="light"] #scenes .scene{box-shadow:0 14px 34px -30px rgba(16,40,72,.45)}

/* ==================================================================
   §11.5 浅色：场景卡与收尾 CTA（2026-11-08）
   ------------------------------------------------------------------
   §1 用 !important 把 .scene/.case 钉成 rgba(13,28,51,.56) 深色玻璃，
   浅色模式下文字已转深，卡片却还是深色 —— 深字压深底，正文直接消失。
   收尾 CTA 的 .final-bg 同样被 §10.2 提到 opacity .52 !important，
   浅底上等于把一张黑图铺满整条带子。
   ================================================================== */
[data-theme="light"] .scene,
[data-theme="light"] .case,
[data-theme="light"] .trust-item,
[data-theme="light"] .step-card,
[data-theme="light"] .review-card{
  background:#FFFFFF !important;
  border-color:var(--tk-line) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:0 16px 40px -34px rgba(16,40,72,.45);
}
[data-theme="light"] .scene:hover,
[data-theme="light"] .case:hover,
[data-theme="light"] .trust-item:hover,
[data-theme="light"] .step-card:hover{
  border-color:rgba(10,127,196,.40) !important;
  box-shadow:0 24px 52px -34px rgba(10,127,196,.42);
}
[data-theme="light"] .scene .icon,
[data-theme="light"] .f-icon{
  background:rgba(10,127,196,.08) !important;
  border-color:rgba(10,127,196,.22) !important;
  box-shadow:none;
}
[data-theme="light"] .scene:hover .icon,
[data-theme="light"] .feature-card:hover .f-icon{box-shadow:0 0 22px rgba(10,127,196,.18)}
[data-theme="light"] .scene p,
[data-theme="light"] .case p{color:var(--tk-tx2) !important}
[data-theme="light"] .scene .more,
[data-theme="light"] .case .more{color:var(--tk-cy-d) !important}

/* 收尾 CTA：图退成很淡的肌理，光晕收力，标题才立得住 */
[data-theme="light"] .final{background:#FFFFFF !important;border-top-color:var(--tk-line-soft) !important}
[data-theme="light"] .final-bg{opacity:.075 !important}
[data-theme="light"] .final::before{opacity:.55;background:radial-gradient(closest-side,rgba(10,127,196,.10),transparent 72%)}
[data-theme="light"] .final p{color:var(--tk-tx3)}

/* ==================================================================
   §13 内页通栏 / 页脚 / 浅色明度统一（2026-11-09）
   ------------------------------------------------------------------
   三个现场问题：
   1) 浅色下整页图像与文字发虚 —— 根因不在颜色，在 cookie 同意层的
      .cc-overlay（fixed 全屏 + backdrop-filter:blur(4px) + 55% 黑）。
      已在 cookie-consent.css 里退回纯定位容器，这里不再处理。
   2) 内页顶部「通栏」不统一 —— 静态子页 .phead 高 461px（背景 .30
      或 ::after .42），CMS 页 .hero-block 高 561px（背景 .40），
      内容宽度 1240 vs 1000。三套值、两档高度，翻页时首屏节奏在跳。
      统一为：520px 定高、1240 内容宽、同一素材同一渐隐方向。
   3) 页脚孤立 —— .site-footer 有 margin-top:48px，与上方区块之间
      漏出一条 body 底色缝；且 CMS 页脚 .footer-brand 里只有一句
      标语，没有品牌锚点，左栏 300px 是空的。
   ================================================================== */

/* --- 13.1 内页通栏：定高 + 内容垂直居中 + 内容宽度对齐 --- */
.phead,
.hero-block,
.ahead{
  min-height:520px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;   /* 主轴：内容垂直居中 */
  align-items:stretch !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  box-sizing:border-box;
  width:100%;
}
.phead .wrap,
.hero-block .block-inner,
.ahead .wrap{width:100%;max-width:1240px;margin-left:auto;margin-right:auto}

/* --- 13.2 内页通栏：整幅图版 ---
   2026-11-09 三改。一改/二改做的是「左白右图、硬边 44%」：一张图贴在
   白纸右边，一屏里出现一条笔直的竖切线，左边一大片纯白、右边一个色块，
   翻页像两个版式拼在一起。
   现在改成整幅：图从左边框铺到右边框（100% × 100%），文字叠在图上。
   图上压一层「等浓度」深蓝 —— 首尾同色，不是渐变，没有过渡带，
   所以不会出现之前那种雾；图仍是完整一张，被裁的只是边角，
   主体结构留在画面里，字也不会被任何一块色差切到。 */
.phead,
.hero-block,
.ahead{
  position:relative;
  overflow:hidden;
  background:#0B1B31 !important;
  background-image:none !important;
}
.phead .phead-bg,
.phead:not(:has(.phead-bg))::after,
.hero-block::before,
.ahead::after{
  content:"";
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  background-color:#0B1B31 !important;
  background-image:
    linear-gradient(rgba(9,24,46,.52),rgba(9,24,46,.52)),
    url(/static/assets/precision-2x.webp) !important;
  background-repeat:no-repeat !important;
  /* 素材是横构图、亮网格压在画面中上部。整宽 cover 会把它正好拖到标题后面，
     白字贴着亮网格读起来发飘。改成按宽度放到 130%、往左下取景：
     左边落进暗部托住文字，右边的方块阵列留在画面里给结构。
     130% 相对 2880px 的源图仍有余量，2 倍屏不会糊。 */
  background-size:cover,130% auto !important;
  background-position:center center,15% 72% !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  transform:none !important;
  /* .phead-bg 原本挂了一条 24s 亮度呼吸；整幅图上忽明忽暗比图带时期显眼得多，关掉 */
  animation:none !important;
  z-index:0 !important;
  pointer-events:none;
}
/* 文字层抬到图之上（图是 absolute + z-index:0） */
.phead > .wrap,
.hero-block > .block-inner,
.ahead > .wrap{
  position:relative;
  z-index:1;
}

/* 深底反白：标题纯白，说明 78%，面包屑 58%，逐级压下去 */
.phead h1,
.hero-block .hero-title,
.ahead h1,
.hero-block h1{color:#FFFFFF !important}
.phead p,
.hero-block .hero-subtitle,
.ahead p,
.hero-block .hero-subtitle p{color:rgba(255,255,255,.78) !important}
.phead .crumb,
.phead .crumb a,
.phead .crumb i,
.ahead .crumb{color:rgba(255,255,255,.58) !important}
/* 次要按钮在深底上换成描边玻璃，不再是一块白 */
.phead .acts .b-ghost,
.hero-block .hero-actions .b-ghost,
.hero-block .hero-actions .btn-ghost{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.42) !important;
  color:#FFFFFF !important;
}
.phead .acts .b-ghost:hover,
.hero-block .hero-actions .b-ghost:hover,
.hero-block .hero-actions .btn-ghost:hover{
  background:rgba(255,255,255,.20) !important;
  border-color:rgba(255,255,255,.72) !important;
}
/* 首屏底部那句一句话 + 它的上分隔线，一起降到低对比 */
.hero-block .hero-stats{
  color:rgba(255,255,255,.60) !important;
  border-top-color:rgba(255,255,255,.18) !important;
}
/* 13.1 把 .wrap 改成 width:100%，窄屏下主题自带的左右内边距被清零，
   标题首字会贴到屏幕边缘（甚至被裁）。这里补回安全边距。 */
@media(max-width:760px){
  .phead .wrap,
  .hero-block .block-inner,
  .ahead .wrap{
    padding-left:24px !important;
    padding-right:24px !important;
    box-sizing:border-box !important;
  }
}
@media(max-width:760px){
  /* 窄屏：整幅图跟着内容高度走，不再切出底部图带；文字直接压在图上。
     §10.3 / §10.6 里有一套「底部 58% 高 + 纵向渐隐」的旧窄屏图带，
     这里必须把几何重新按住，否则窄屏又退回半块图。 */
  .phead .phead-bg,
  .phead:not(:has(.phead-bg))::after,
  .hero-block::before,
  .ahead::after{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:1 !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    /* 竖屏窄、容器高，130% 会裁到只剩一块方块，退回按高度铺满 */
    background-size:cover,auto 130% !important;
    background-position:center center,22% 66% !important;
  }
}
/* 浅色下 hero 的径向光晕（青色/白色各一团）在浅底上只剩一团白雾，
   正好糊在标题上方，是「虚」的另一半来源，直接不画。
   注意：.hero-block::before 现在承载的是通栏大图本身，不能再压成 0 ——
   上一版把它一起关掉，/about /help /download 三页在浅色下就完全没图了。 */
html[data-theme="light"] .phead::before,
html[data-theme="light"] .ahead::before{
  opacity:0 !important;
}
@media(max-width:760px){
  .phead,
  .hero-block,
  .ahead{min-height:auto !important;padding-top:56px !important;padding-bottom:52px !important}
  /* .hero-block 自带 40px 左右内边距（桌面被 1240 的定宽吃掉，看不出来），
     窄屏下会和下面补的 24px 叠成 64px，标题比导航缩进一大截。
     这里清零，左右留白统一交给 .wrap / .block-inner。 */
  .phead,
  .hero-block,
  .ahead{padding-left:0 !important;padding-right:0 !important}
}

/* --- 13.3 页脚：收掉 48px 悬空缝，补品牌锚点 --- */
.site-footer{
  margin-top:0 !important;
  padding-top:56px !important;
  padding-bottom:28px !important;
  border-top:1px solid var(--tk-line-soft) !important;
}
/* CMS 页脚数据里只有一句 footer-desc，没有品牌名；
   静态页页脚是 .logo + 中文名。这里用伪元素补齐，结构不动。 */
.site-footer .footer-brand::before{
  content:"塔卡投研";
  display:block;
  font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1.2;
  color:var(--tk-tx);
  margin-bottom:12px;
}
.site-footer .footer-brand .footer-desc{margin-top:0;margin-bottom:0}
/* 页脚底色比上方区块收深一档，去掉缝之后仍能看出「到此收尾」 */
html[data-theme="light"] .site-footer{
  background:#E9F0F9 !important;
  border-top-color:rgba(16,40,72,.14) !important;
}
html[data-theme="light"] .site-footer .footer-brand::before{color:#0A1A30}
/* 静态页 footer 没有 .site-footer 类，底色也要跟 CMS 页脚对齐 */
html[data-theme="light"] footer:not(.site-footer){
  background:#E9F0F9 !important;
  border-top-color:rgba(16,40,72,.14) !important;
}

/* --- 13.4 浅色明度：把灰雾收掉 --- */
html[data-theme="light"]{
  --tk-tx3:#44607F;
  --tx3:#44607F;
}
/* 四屏：原来 .36 的浓度 + 97% 白遮罩，照片只剩一层浅影，
   整屏像隔着毛玻璃看——这就是用户说的「虚」。
   现在图给到 .72，遮罩改成「左侧留白保字、右侧通透给图」，
   并把 brightness 提亮换成 contrast 加锐，图有实体感，字也不再发灰。 */
html[data-theme="light"] .slide-bg{
  opacity:.72 !important;
  filter:saturate(1.02) contrast(1.05);
}
html[data-theme="light"] .slide::after{
  background:
    linear-gradient(90deg,rgba(255,255,255,.955) 0%,rgba(255,255,255,.90) 24%,rgba(255,255,255,.38) 48%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,.30) 82%,#FFFFFF 100%) !important;
}
/* 能力区 / 场景区：浅色下行情纹理只做「纸的纹路」，不再是一层灰
   （原来压到 .994 等于把纹理删了，白得像空纸；现在留 2~6% 透出，
   纸有细微纹路，页面才「实」，但远不到发脏的程度）。 */
html[data-theme="light"] #product,
html[data-theme="light"] #scenes{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.982) 0%,rgba(253,254,255,.972) 45%,rgba(252,253,255,.962) 78%,rgba(250,252,255,.950) 100%),
    var(--tk-img-ledger) !important;
  background-color:#FFFFFF;
}
/* 浅色下这段就是「干净节奏带」，K 线影子只会显脏，直接不画 */
html[data-theme="light"] #how::before{display:none !important}

/* --- 13.5 浅色层次：白底 / 浅蓝灰交替 / 白卡片 ---
   原来 --bg 与各区块底色都是 #F5F8FD 附近，叠上近白遮罩后整页
   变成一个灰度，区块之间没有分界，看着「灰蒙蒙一片」。
   改为三级：页面纯白 → 交替带 #F3F7FC → 卡片纯白+细边。 */
html[data-theme="light"]{
  --bg:#FFFFFF;
  --bg2:#F5F8FD;
  --tk-bg:#FFFFFF;
  --tk-bg2:#F5F8FD;
  --bg-deep:#FFFFFF;
  --bg-elevated:#F4F8FD;
  --bg-glass:rgba(255,255,255,.88);
  --bg-overlay:rgba(255,255,255,.90);
}
html[data-theme="light"] body{background:#FFFFFF}
html[data-theme="light"] .stage{background:#FFFFFF}
/* 交替带：方法论（干净节奏带）与收尾 CTA 用浅蓝灰，把白色区块隔开 */
html[data-theme="light"] #how{background:#EDF3FA}
html[data-theme="light"] .final{background:#EDF3FA !important}
html[data-theme="light"] #scenes{background:#FFFFFF}
/* CMS 正文同样走白底 */
html[data-theme="light"] body.tk-cms{
  --color-background:#FFFFFF;
  --bg-deep:#FFFFFF;
}
html[data-theme="light"] body.tk-cms .section-elevated,
html[data-theme="light"] body.tk-cms .section-dark{background:#F4F8FD}

/* 浅色下装饰纹理一律不画：卡片内、收尾带的 K 线影子在白底上只会
   变成一层灰，把「干净」和「锐利」两件事一起毁掉。深色模式不动。 */
html[data-theme="light"] #scenes .scene::before,
html[data-theme="light"] #scenes .case::before,
html[data-theme="light"] .final-bg{display:none !important}
/* 白卡在白底上要靠边与影立住 */
html[data-theme="light"] .scene,
html[data-theme="light"] .case,
html[data-theme="light"] .step-card,
html[data-theme="light"] .review-card{
  border-color:#D2E0EF !important;
  box-shadow:0 1px 2px rgba(16,40,72,.06), 0 16px 34px -28px rgba(16,40,72,.42);
}