/* ═══════════════════════════════════════════════════════════════════════
   及核官网 · 首页点缀层 v17.2
   ───────────────────────────────────────────────────────────────────────
   基调不动：白底 + mint 主色 + 1px 细线 + 大留白 + 零 box-shadow + 12 阶字号。
   本层只做「点缀」——在既有结构上补四支辅助亮色，形成视觉层次与节奏：
     ac1 mint #01D8B6（主色，沿用）  ac2 蓝 #4C8DF6
     ac3 琥珀 #F0B429              ac4 紫 #A78BFA

   色彩规则（全站一致，不外扩）：
     · 财务/对账 = mint    · 数据/分析 = 蓝
     · 单据/凭证 = 琥珀    · 全球/多主体 = 紫
   所有点缀只落在 边框 / 顶线 / 圆点 / 胶囊 / 图标 / 数字 上，
   不改变任何底纹与文字主色，不新增可见文案。
   仅 index.html 引用；子页保持原状。
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ac1:#01D8B6; --ac1-d:#07776E; --ac1-l:#E4F9F5; --ac1-b:#C9EFE7;
  --ac2:#4C8DF6; --ac2-d:#2C63C4; --ac2-l:#EBF2FE; --ac2-b:#D4E3FB;
  --ac3:#F0B429; --ac3-d:#8F6100; --ac3-l:#FDF5E4; --ac3-b:#F5E1B4;
  --ac4:#A78BFA; --ac4-d:#6D4FD1; --ac4-l:#F2EDFE; --ac4-b:#DDD2FA;
}

/* ══════════ 1 · 页头：顶部渐隐细彩线 ══════════ */
.hd::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--ac1),var(--ac2) 34%,transparent 76%);
  opacity:.85;
}

/* ══════════ 2 · banner（首屏）：账页底纹 + 双色辉光 ══════════ */
.hero .wrap{position:relative;z-index:1}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__bg i{position:absolute;inset:0;display:block}
.hero__bg .g1{
  background-image:linear-gradient(90deg,var(--line2) 1px,transparent 1px),
                   linear-gradient(180deg,var(--line2) 1px,transparent 1px);
  background-size:88px 46px;
  -webkit-mask-image:radial-gradient(92% 76% at 74% 4%,#000 0,transparent 74%);
  mask-image:radial-gradient(92% 76% at 74% 4%,#000 0,transparent 74%);
}
.hero__bg .g2{background:radial-gradient(720px 430px at 94% -10%,rgba(1,216,182,.17),transparent 62%)}
.hero__bg .g3{background:radial-gradient(640px 400px at -6% 106%,rgba(76,141,246,.11),transparent 60%)}

/* 徽标：跳动亮点 */
.badge{position:relative}
.badge__d{
  flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--ac1);position:relative;
}
.badge__d::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--ac1);animation:acPulse 2.6s ease-out infinite;
}
@keyframes acPulse{
  0%{transform:scale(.55);opacity:.6}
  72%{transform:scale(1.3);opacity:0}
  100%{transform:scale(1.3);opacity:0}
}

/* slogan：mint 荧光笔底纹（只做高亮，不改文字色） */
.hero__t em{
  background-image:linear-gradient(180deg,transparent 58%,rgba(1,216,182,.30) 58%,
                    rgba(1,216,182,.30) 93%,transparent 93%);
  padding:0 2px;
}
/* 副标题：国内 / 跨境 双轨双色 */
.hero__sub b{color:var(--ac1-d);font-weight:500}
.hero__sub b:last-of-type{color:var(--ac2-d)}

/* 平台名：国内=蓝绿胶囊，跨境=蓝胶囊（单行不换行） */
.rail__v{display:flex;flex-wrap:nowrap;gap:4px;overflow:hidden}
.rail__v span{
  display:inline-block;padding:1px 7px;border-radius:999px;border:1px solid transparent;
  background:var(--bg3);color:var(--t2);font-size:var(--f12);line-height:1.75;white-space:nowrap;
}
.rail__v span+span::before{content:none}
.rail__r:first-child .rail__v span{background:var(--ac1-l);border-color:var(--ac1-b);color:var(--ac1-d)}
.rail__r:last-child  .rail__v span{background:var(--ac2-l);border-color:var(--ac2-b);color:var(--ac2-d)}

/* 首屏按钮：主色渐变 + 次按钮 mint 浅底 */
.hero__cta .btn--primary{background:linear-gradient(135deg,#0BA793,var(--ac1-d));border-color:var(--ac1-d)}
.hero__cta .btn--primary:hover{background:linear-gradient(135deg,#07776E,#05625B);border-color:#05625B}
.hero__cta .btn--ghost{background:var(--ac1-l);border-color:var(--ac1-b);color:var(--ac1-d)}
.hero__cta .btn--ghost:hover{background:#D8F4ED;border-color:var(--ac1)}

/* ══════════ 3 · 首屏看板：引擎条四色链路 + KPI 三色顶线 ══════════ */
.dash__eng{border-left:3px solid var(--ac1);padding-left:13px}
.dash__flow span.on{position:relative;padding-left:10px}
.dash__flow span.on::before{
  content:"";position:absolute;left:0;top:50%;margin-top:-2.5px;
  width:5px;height:5px;border-radius:50%;background:var(--ac1);
}
.dash__flow span.on:nth-of-type(3)::before{background:var(--ac3)}
.dash__flow i:nth-of-type(1){background-image:repeating-linear-gradient(90deg,var(--ac1) 0 4px,transparent 4px 8px)}
.dash__flow i:nth-of-type(2){background-image:repeating-linear-gradient(90deg,var(--ac2) 0 4px,transparent 4px 8px)}
.dash__flow i:nth-of-type(3){background-image:repeating-linear-gradient(90deg,var(--ac3) 0 4px,transparent 4px 8px)}

.dash__row--kpi .kpi{position:relative;overflow:hidden}
.dash__row--kpi .kpi::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--ac1);
}
.dash__row--kpi .kpi:nth-child(2)::before{background:var(--ac2)}
.dash__row--kpi .kpi:nth-child(3)::before{background:var(--ac3)}
.dash__row--kpi .kpi:nth-child(2) .spark{stroke:var(--ac2)}
.dash__row--kpi .kpi:nth-child(3) .spark{stroke:var(--ac3)}

/* 增减胶囊：浅底着色（红涨绿跌沿用） */
.kpi__d{padding:1px 7px;border-radius:999px;background:#FBEFEE}
.kpi__d--down{background:#EAF6F1}

/* 面板标题左侧色标：图表=mint / 对账=蓝 / 凭证=琥珀 */
.panel__hd h3{position:relative;padding-left:12px}
.panel__hd h3::before{
  content:"";position:absolute;left:0;top:50%;margin-top:-5px;
  width:3px;height:10px;border-radius:2px;background:var(--ac1);
}
.panel.rec .panel__hd h3::before{background:var(--ac2)}
.panel.vch .panel__hd h3::before{background:var(--ac3)}

/* ══════════ 4 · 数据带：图标四色轮转 + 顶线渐隐彩线 ══════════ */
.dbar{border-top:0}
.dbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--ac1),var(--ac2) 26%,var(--ac3) 46%,var(--ac4) 60%,transparent 84%);
  opacity:.7;
}
.dbar__in .dbar__it:nth-child(1) .dbar__ic{color:var(--ac1)}
.dbar__in .dbar__it:nth-child(2) .dbar__ic{color:var(--ac2)}
.dbar__in .dbar__it:nth-child(3) .dbar__ic{color:var(--ac3)}
.dbar__in .dbar__it:nth-child(4) .dbar__ic{color:var(--ac4)}
.dbar__in .dbar__it:nth-child(5) .dbar__ic{color:var(--ac1)}

/* ══════════ 5 · 区块标题：渐变短脊线（每段一组配色） ══════════ */
.sec__hd .sec__t::before{
  content:"";display:block;width:44px;height:3px;border-radius:2px;
  margin:0 auto 18px;background:linear-gradient(90deg,var(--ac1),var(--ac2));
}
.sec__hd--left .sec__t::before{margin-left:0}
#products .sec__t::before{background:linear-gradient(90deg,var(--ac2),var(--ac4))}
#cases    .sec__t::before{background:linear-gradient(90deg,var(--ac3),var(--ac1))}

/* ══════════ 6 · 价值主张：四卡四色（顶线 / 编号 / 链路 / 映射 / 进度 / 结论） ══════════ */
.vgrid .vcard{
  position:relative;overflow:hidden;
  --vc:var(--ac1);--vcd:var(--ac1-d);--vcl:var(--ac1-l);--vcb:var(--ac1-b);
}
.vgrid .vcard:nth-child(2){--vc:var(--ac2);--vcd:var(--ac2-d);--vcl:var(--ac2-l);--vcb:var(--ac2-b)}
.vgrid .vcard:nth-child(3){--vc:var(--ac3);--vcd:var(--ac3-d);--vcl:var(--ac3-l);--vcb:var(--ac3-b)}
.vgrid .vcard:nth-child(4){--vc:var(--ac4);--vcd:var(--ac4-d);--vcl:var(--ac4-l);--vcb:var(--ac4-b)}
.vgrid .vcard::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--vc);
}
.vgrid .vcard__k{color:var(--vcd);opacity:.8}
.vgrid .vcard__ft b{color:var(--vcd)}
.vgrid .vcard .chain__n{background:var(--vcl);border-color:var(--vcb);color:var(--vcd)}
.vgrid .vcard .chain__a{background-image:repeating-linear-gradient(90deg,var(--vc) 0 4px,transparent 4px 8px)}
.vgrid .vcard .chain__a::after{border-left-color:var(--vc)}
.vgrid .vcard .map__r em{color:var(--vcd)}
.vgrid .vcard .cyc__t i{background:linear-gradient(90deg,var(--vcl),var(--vc))}

/* ══════════ 7 · 主线产品：三中枢三色（左色条 / 名称前色块 / 标签） ══════════ */
.pgrid .eng{
  position:relative;overflow:hidden;
  --ec:var(--ac2);--ecd:var(--ac2-d);--ecl:var(--ac2-l);--ecb:var(--ac2-b);
}
.pgrid .eng:nth-child(2){--ec:var(--ac1);--ecd:var(--ac1-d);--ecl:var(--ac1-l);--ecb:var(--ac1-b)}
.pgrid .eng:nth-child(3){--ec:var(--ac4);--ecd:var(--ac4-d);--ecl:var(--ac4-l);--ecb:var(--ac4-b)}
.pgrid .eng::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ec);
}
.pgrid .eng h3::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:2px;
  background:var(--ec);margin-right:10px;vertical-align:middle;
}
.pgrid .eng .eng__k{color:var(--ecd);border-color:var(--ecb);background:var(--ecl)}
.pgrid .eng .eng__tags span{background:var(--ecl);border-color:var(--ecb);color:var(--ecd)}
.pgrid .eng--key .eng__tags span{background:var(--bg);border-color:var(--ac1-b);color:var(--ac1-d)}

/* ══════════ 8 · 数据条：四色数字 ══════════ */
.linkstrip__i:nth-child(1) .linkstrip__n{color:var(--ac1-d)}
.linkstrip__i:nth-child(2) .linkstrip__n{color:var(--ac2-d)}
.linkstrip__i:nth-child(3) .linkstrip__n{color:var(--ac3-d)}
.linkstrip__i:nth-child(4) .linkstrip__n{color:var(--ac4-d)}

/* ══════════ 9 · 客户案例：标题前彩色圆点（按行轮转） ══════════ */
.cg__c{position:relative}
.cg__t{position:relative;padding-left:32px}
.cg__t::before{
  content:"";position:absolute;left:18px;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:50%;background:var(--ac1);
}
.cg__grid .cg__c:nth-child(2) .cg__t::before{background:var(--ac2)}
.cg__grid .cg__c:nth-child(3) .cg__t::before{background:var(--ac3)}
.cg__grid .cg__c:nth-child(4) .cg__t::before{background:var(--ac4)}
.cg__grid .cg__c:nth-child(5) .cg__t::before{background:var(--ac1)}
.cg__grid .cg__c:nth-child(6) .cg__t::before{background:var(--ac2)}
.cg__c::after{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;z-index:2;
  background:var(--ac1);transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.22,.8,.3,1);
}
.cg__grid .cg__c:nth-child(2)::after{background:var(--ac2)}
.cg__grid .cg__c:nth-child(3)::after{background:var(--ac3)}
.cg__grid .cg__c:nth-child(4)::after{background:var(--ac4)}
.cg__grid .cg__c:nth-child(5)::after{background:var(--ac1)}
.cg__grid .cg__c:nth-child(6)::after{background:var(--ac2)}
.cg__c:hover::after{transform:scaleX(1)}

/* ══════════ 10 · 最新动态：统一 mint，不做多彩轮转 ══════════ */
.news .news__tag{color:var(--ac1-d);border-color:var(--ac1-b);background:var(--ac1-l)}

/* ══════════ 11 · CTA 通屏：顶部彩线 + 双侧辉光 ══════════ */
.cta{position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ac1) 20%,var(--ac2) 48%,var(--ac3) 72%,transparent 92%);
}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(780px 330px at 20% 120%,rgba(1,216,182,.15),transparent 66%),
             radial-gradient(640px 300px at 86% -20%,rgba(76,141,246,.11),transparent 64%);
}
.cta .wrap{position:relative;z-index:1}

/* ══════════ 12 · 页脚：顶部彩线 + 栏目名色标 ══════════ */
.ft{position:relative}
.ft::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--ac1),var(--ac2) 28%,var(--ac3) 48%,var(--ac4) 62%,transparent 86%);
  opacity:.65;
}
.ft__in > div h4{position:relative;padding-left:12px}
.ft__in > div h4::before{
  content:"";position:absolute;left:0;top:50%;margin-top:-5px;
  width:3px;height:10px;border-radius:2px;background:var(--ac1);
}
.ft__in > div:nth-child(2) h4::before{background:var(--ac1)}
.ft__in > div:nth-child(3) h4::before{background:var(--ac2)}
.ft__in > div:nth-child(4) h4::before{background:var(--ac3)}
.ft__in > div:nth-child(5) h4::before{background:var(--ac4)}
.ft__in > div:nth-child(6) h4::before{background:var(--ac1)}

/* ══════════ 13 · 动效与降级 ══════════ */
@media (prefers-reduced-motion:reduce){
  .badge__d::after{animation:none}
  .cg__c::after{transition:none}
}
html.noanim .badge__d::after{animation:none}
html.noanim .cg__c::after{transform:scaleX(0)}

@media (max-width:1080px){
    .dash__flow span.on{padding-left:0}
  .dash__flow span.on::before{display:none}
}