/* ============================================================
   外贸官 · 视觉增强层 enhance.css
   目标：在「不改文字内容」前提下，让整站更商务、更现代、更有层次
   手法：更饱和的品牌渐变 / 光效 / 网格底纹 / 卡片边界 / 分色主题 / 悬浮反馈
   加载顺序：style.css → brand.css → enhance.css（本文件最后覆盖）
   ============================================================ */

:root{
  --x-blue:#2E6BFF;
  --x-blue2:#1E52E0;
  --x-violet:#6A3BFF;
  --x-cyan:#00C6FF;
  --x-teal:#12B886;
  --x-orange:#FF7A45;
  --x-gold:#E0A33E;
  --x-ink:#0B1020;
  --x-grad:linear-gradient(135deg,#2E6BFF 0%,#6A3BFF 100%);
  --x-grad-cyan:linear-gradient(135deg,#00C6FF 0%,#2E6BFF 100%);
  --x-ring:0 0 0 1px rgba(46,107,255,.10);
  --x-lift:0 24px 60px rgba(35,70,180,.18);
  --x-grid:rgba(46,107,255,.055);
}

/* 平滑字体渲染与更沉稳的基础文字色 */
body{color:#3A4256}

/* ---------- 通用装饰：网格底纹工具类 ---------- */
.x-grid-bg{
  background-image:
    linear-gradient(var(--x-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--x-grid) 1px,transparent 1px);
  background-size:44px 44px;
}

/* ============================================================
   区块标题：加一条精致的渐变引导线（居中头）
   ============================================================ */
.section-head.center h2{position:relative;padding-bottom:6px}
.section-head.center h2::after{
  content:"";display:block;width:64px;height:4px;border-radius:4px;margin:20px auto 0;
  background:var(--x-grad);box-shadow:0 6px 16px rgba(80,80,220,.28);
}
.section-head:not(.center) .eyebrow{position:relative;padding-left:26px}
.section-head:not(.center) .eyebrow::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:18px;height:3px;border-radius:3px;background:var(--x-grad);
}

/* ============================================================
   HERO —— 彩色渐变 + 网格 + 光斑 + 玻璃 KPI + 渐变描边表单
   ============================================================ */
.hero{
  background:
    radial-gradient(900px 520px at 88% -8%,rgba(120,90,255,.20),transparent 60%),
    radial-gradient(760px 480px at -6% 12%,rgba(0,180,255,.20),transparent 58%),
    linear-gradient(165deg,#FFFFFF 0%,#EFF5FF 44%,#DCEBFF 100%) !important;
}
.hero::before{
  content:"" !important;display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(46,107,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,107,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 34%,#000 42%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 34%,#000 42%,transparent 78%);
}
.hero .wrap{position:relative;z-index:2}

/* KPI：玻璃拟态小卡 + 顶部渐变条 + 分隔 */
.hero-kpis{gap:14px !important}
.hero-kpis > div{
  position:relative;padding:16px 14px 15px;border-radius:14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 30px rgba(40,80,180,.10),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(6px);overflow:hidden;transition:.28s;
}
.hero-kpis > div::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--x-grad);opacity:.9;
}
.hero-kpis > div:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(40,80,180,.18)}
.hero-kpis .k{background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-kpis .v{color:#5A6478}

/* 表单卡：渐变描边 + 顶部高光 + 更强投影 */
.hero-form{
  position:relative;border:1.5px solid transparent !important;
  background:linear-gradient(#fff,#fff) padding-box,var(--x-grad) border-box;
  box-shadow:0 30px 70px rgba(30,60,150,.22);
}
.hero-form::before{
  content:"";position:absolute;left:26px;right:26px;top:0;height:4px;border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}
.hero-form .btn-form{background:var(--x-grad);box-shadow:0 14px 30px rgba(60,80,220,.34)}
.hero-form .btn-form:hover{filter:brightness(1.06);box-shadow:0 18px 40px rgba(60,80,220,.42)}

/* ============================================================
   左右图文模块 —— 插画承托台 + 条目图标 + 节奏
   ============================================================ */
.mod-media{position:relative}
/* 插画背后的彩色承托台（柔光渐变 + 光环），让线稿不再“像没加载完” */
.mod-media::before{
  content:"";position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);
  width:104%;padding-bottom:104%;max-width:520px;max-height:520px;border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%,rgba(0,198,255,.20),transparent 55%),
    radial-gradient(circle at 68% 72%,rgba(106,59,255,.20),transparent 55%),
    radial-gradient(circle at 50% 50%,#F3F7FF 0%,#EAF1FF 60%,rgba(234,241,255,0) 74%);
  filter:blur(2px);opacity:.25;
}
.mod-media::after{
  content:"";position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);
  width:82%;max-width:420px;aspect-ratio:1;border-radius:50%;
  border:1.5px dashed rgba(46,107,255,.22);
}
.mod-media .ill-stack{position:relative;z-index:1}

/* 小节条目：为每个子标题加一枚渐变序号点，打破“纯文字墙” */
.mod-text .fs .it h4{padding-left:34px;position:relative}
.mod-text .fs .it h4::before{
  counter-increment:xfs;content:counter(xfs,decimal-leading-zero);
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;letter-spacing:0;color:#fff;
  -webkit-text-fill-color:#fff;background-clip:border-box;-webkit-background-clip:border-box;
  background:var(--x-grad);box-shadow:0 6px 14px rgba(60,80,220,.28);
  transition:.28s;
}
.fs{counter-reset:xfs}
.fs .it:not(.active) h4::before{background:#C4CEE6;box-shadow:none;color:#fff}

.mod-text .btn{background:var(--x-grad);box-shadow:0 12px 26px rgba(60,80,220,.26)}
.mod-text .btn:hover{filter:brightness(1.06);transform:translateY(-2px)}

/* ============================================================
   六位助手卡 —— 分色主题 + 水印序号 + 悬浮发光
   ============================================================ */
.officer{overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.officer::before{ /* 顶部渐变条 */
  content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:var(--oa,var(--x-grad));transform:scaleX(0);transform-origin:left;transition:transform .35s;
}
.officer::after{ /* 右下角水印序号 */
  content:"";position:absolute;right:14px;bottom:-6px;font-size:96px;font-weight:900;
  line-height:1;color:var(--oa-c,rgba(46,107,255,.06));letter-spacing:-4px;pointer-events:none;
  font-family:Arial,sans-serif;
}
.grid .officer:nth-child(6n+1)::after,.officer:nth-of-type(1)::after{content:"01"}
.grid .officer:nth-child(6n+2)::after{content:"02"}
.grid .officer:nth-child(6n+3)::after{content:"03"}
.grid .officer:nth-child(6n+4)::after{content:"04"}
.grid .officer:nth-child(6n+5)::after{content:"05"}
.grid .officer:nth-child(6n+6)::after{content:"06"}
.officer:hover{transform:translateY(-6px);box-shadow:var(--x-lift);border-color:transparent}
.officer:hover::before{transform:scaleX(1)}
.officer .avatar{transition:transform .3s}
.officer:hover .avatar{transform:scale(1.06) rotate(-3deg)}
.officer .go{color:var(--oa-t,var(--brand))}

/* 逐个助手分色（index.html 与内页 .officer 通用，按 nth-child） */
.grid .officer:nth-child(6n+1){--oa:linear-gradient(135deg,#2E6BFF,#00C6FF);--oa-c:rgba(46,107,255,.07);--oa-t:#2E6BFF}
.grid .officer:nth-child(6n+2){--oa:linear-gradient(135deg,#00B8D4,#12B886);--oa-c:rgba(18,184,134,.08);--oa-t:#0E9F72}
.grid .officer:nth-child(6n+3){--oa:linear-gradient(135deg,#12B886,#5AC53C);--oa-c:rgba(90,197,60,.09);--oa-t:#3EA36B}
.grid .officer:nth-child(6n+4){--oa:linear-gradient(135deg,#FF7A45,#FFB43C);--oa-c:rgba(255,122,69,.09);--oa-t:#EC6A34}
.grid .officer:nth-child(6n+5){--oa:linear-gradient(135deg,#7B61FF,#B14BFF);--oa-c:rgba(123,97,255,.08);--oa-t:#6A4BEB}
.grid .officer:nth-child(6n+6){--oa:linear-gradient(135deg,#E0A33E,#C79A4E);--oa-c:rgba(224,163,62,.10);--oa-t:#B8842E}
.grid .officer:nth-child(6n+1) .avatar{background:linear-gradient(150deg,#2E6BFF,#00C6FF)}
.grid .officer:nth-child(6n+2) .avatar{background:linear-gradient(150deg,#00B8D4,#12B886)}
.grid .officer:nth-child(6n+3) .avatar{background:linear-gradient(150deg,#12B886,#5AC53C)}
.grid .officer:nth-child(6n+4) .avatar{background:linear-gradient(150deg,#FF7A45,#FFB43C)}
.grid .officer:nth-child(6n+5) .avatar{background:linear-gradient(150deg,#7B61FF,#B14BFF)}
.grid .officer:nth-child(6n+6) .avatar{background:linear-gradient(150deg,#E0A33E,#C79A4E)}
.grid .officer:nth-child(6n+1) .rank{background:rgba(46,107,255,.10);color:#2E6BFF}
.grid .officer:nth-child(6n+2) .rank{background:rgba(18,184,134,.12);color:#0E9F72}
.grid .officer:nth-child(6n+3) .rank{background:rgba(90,197,60,.14);color:#3EA36B}
.grid .officer:nth-child(6n+4) .rank{background:rgba(255,122,69,.13);color:#EC6A34}
.grid .officer:nth-child(6n+5) .rank{background:rgba(123,97,255,.12);color:#6A4BEB}
.grid .officer:nth-child(6n+6) .rank{background:rgba(224,163,62,.15);color:#B8842E}
/* 列表项圆点跟随主题色 */
.grid .officer ul li::before{background:var(--oa-t,var(--brand-l))}

/* 导航「产品功能」下拉图标分色：对齐首页六个岗位 avatar 配色 */
.dropdown a.dd-data .dd-ico{background:linear-gradient(150deg,#2E6BFF,#00C6FF);box-shadow:0 5px 14px rgba(46,107,255,.24)}
.dropdown a.dd-website .dd-ico{background:linear-gradient(150deg,#00B8D4,#12B886);box-shadow:0 5px 14px rgba(18,184,134,.24)}
.dropdown a.dd-geo .dd-ico{background:linear-gradient(150deg,#12B886,#5AC53C);box-shadow:0 5px 14px rgba(90,197,60,.26)}
.dropdown a.dd-marketing .dd-ico{background:linear-gradient(150deg,#FF7A45,#FFB43C);box-shadow:0 5px 14px rgba(255,122,69,.26)}
.dropdown a.dd-crm .dd-ico{background:linear-gradient(150deg,#7B61FF,#B14BFF);box-shadow:0 5px 14px rgba(123,97,255,.26)}
.dropdown a.dd-bi .dd-ico{background:linear-gradient(150deg,#E0A33E,#C79A4E);box-shadow:0 5px 14px rgba(224,163,62,.28)}

/* ============================================================
   数据条 —— 卡片化 + 渐变数字
   ============================================================ */
.stat-row{
  border:none;gap:16px;background:transparent;
}
.stat-row .s{
  position:relative;background:#fff;border:1px solid #EAF0FB;border-radius:16px;
  padding:30px 18px;box-shadow:0 12px 30px rgba(40,80,180,.06);overflow:hidden;transition:.28s;
}
.stat-row .s::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--x-grad)}
.stat-row .s:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(40,80,180,.14)}
.stat-row .n{background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-row .s:nth-child(2)::before{background:linear-gradient(135deg,#00B8D4,#12B886)}
.stat-row .s:nth-child(3)::before{background:linear-gradient(135deg,#7B61FF,#B14BFF)}
.stat-row .s:nth-child(4)::before{background:linear-gradient(135deg,#FF7A45,#FFB43C)}

/* ============================================================
   深色技术优势区 —— 渐变 + 光效 + 网格 + 渐变图标
   ============================================================ */
.section.bg-dark{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#141B3C 0%,#232A5C 52%,#3A2E6E 100%) !important;
}
.section.bg-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 420px at 82% 8%,rgba(120,90,255,.30),transparent 60%),
    radial-gradient(560px 380px at 8% 92%,rgba(0,180,255,.22),transparent 60%);
}
.section.bg-dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  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:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
}
.section.bg-dark .wrap{position:relative;z-index:2}
.bg-dark .adv .it{position:relative;padding:26px 22px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);transition:.3s}
.bg-dark .adv .it:hover{background:rgba(255,255,255,.08);transform:translateY(-5px);border-color:rgba(120,150,255,.4)}
.bg-dark .adv .it .ai{
  width:52px;height:52px;border-radius:15px;font-size:19px;font-weight:800;
  background:var(--x-grad) !important;color:#fff !important;
  box-shadow:0 12px 26px rgba(90,80,220,.45);
}
.bg-dark .adv .it:nth-child(2) .ai{background:linear-gradient(135deg,#00B8D4,#12B886) !important}
.bg-dark .adv .it:nth-child(3) .ai{background:linear-gradient(135deg,#FF7A45,#FFB43C) !important}
.bg-dark .adv .it:nth-child(4) .ai{background:linear-gradient(135deg,#7B61FF,#B14BFF) !important}
.bg-dark .section-head h2::after{background:linear-gradient(135deg,#7AA0FF,#B14BFF)}

/* ============================================================
   客户案例卡（.qt）—— 顶部渐变条 + 头像徽 + 引言水印
   ============================================================ */
.qt{position:relative;overflow:hidden;border-top:3px solid transparent}
.qt::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--x-grad)}
.qt:nth-child(2)::before{background:linear-gradient(135deg,#00B8D4,#12B886)}
.qt:nth-child(3)::before{background:linear-gradient(135deg,#7B61FF,#B14BFF)}
.qt:hover{box-shadow:var(--x-lift);transform:translateY(-4px)}
.qt .who{position:relative;padding-left:58px}
.qt .who::before{
  content:"";position:absolute;left:0;top:2px;width:44px;height:44px;border-radius:12px;
  background:var(--x-grad-cyan);box-shadow:0 10px 22px rgba(46,107,255,.28);
}
.qt .who::after{
  content:"”";position:absolute;left:12px;top:-4px;font-family:Georgia,serif;font-size:40px;
  color:rgba(255,255,255,.9);line-height:1;
}
.qt .kpi .n em{background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ============================================================
   对比表 —— 强化 AI 列 + 表头渐变
   ============================================================ */
.compare{box-shadow:0 30px 70px rgba(35,70,180,.14);border-color:#E4EBFA}
.compare-head{background:linear-gradient(120deg,#F3F7FF,#EFEAFF)}
.compare-head .hot-c{background:var(--x-grad) !important}
.compare-row .hot-c{background:linear-gradient(180deg,#EEF4FF,#F3EEFF) !important;border-left:2px solid #DCE6FF;border-right:2px solid #DCE6FF}
.compare-row .hot-c::before{background:var(--x-grad)}
.compare-row:hover .hot-c{background:linear-gradient(180deg,#E6F0FF,#EEE6FF) !important}

/* ============================================================
   知识热榜 —— 卡片化 + 排名徽标
   ============================================================ */
.hot{gap:28px}
.hot > div{
  background:#fff;border:1px solid #EAF0FB;border-radius:18px;padding:26px 28px 14px;
  box-shadow:0 16px 40px rgba(40,80,180,.07);
}
.hot h4{font-size:18px;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid #EEF2FA}
.hot ol li{border-bottom:1px solid #F1F4FA;transition:.2s;padding:13px 8px;margin:0 -8px;border-radius:10px}
.hot ol li:hover{background:#F6F9FF}
.hot ol li b{
  width:24px;height:24px;border-radius:8px;color:#fff;background:#C4CEE6;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.hot ol li:nth-child(1) b{background:linear-gradient(135deg,#FF5B5B,#FF2D2D)}
.hot ol li:nth-child(2) b{background:linear-gradient(135deg,#FF9A3C,#FF6A00)}
.hot ol li:nth-child(3) b{background:linear-gradient(135deg,#FFC93C,#F0A000)}
.hot ol li:nth-child(1) b,.hot ol li:nth-child(2) b,.hot ol li:nth-child(3) b{box-shadow:0 6px 14px rgba(255,120,40,.32)}

/* ============================================================
   联系我们 —— 修复“空方块”为渐变勾选 + 深色半区渐变
   ============================================================ */
.contact-dark{
  background:linear-gradient(to right,#F2F6FF 0%,#F2F6FF 50%,#1B2140 50%,#2A2358 100%) !important;
}
.contact-dark .cd-list li::before{
  content:"✓" !important;width:20px;height:20px;top:2px;border-radius:7px;
  background:var(--x-grad);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(46,107,255,.28);
}
.contact-dark .cd-text h2{color:#1E2026}
.contact-dark .cd-text .lead,.contact-dark .cd-list li{color:#4A5468}
.contact-dark .cd-form{position:relative;box-shadow:0 30px 70px rgba(10,16,40,.4)}
.contact-dark .cd-form::before{content:"";position:absolute;left:7px;right:7px;top:0;height:4px;border-radius:16px 16px 0 0;background:var(--x-grad)}
.contact-dark .cd-form .btn-primary{background:var(--x-grad)}

/* ============================================================
   CTA 收尾带 —— 渐变 + 光效 + 提升照片存在感
   ============================================================ */
.cta-band{box-shadow:0 30px 70px rgba(35,60,150,.28)}
.cta-band .cb-bg{opacity:.26 !important}
.cta-band .cb-veil{background:linear-gradient(115deg,#1B2452 0%,#3A2E78 55%,#2E6BFF 130%) !important}
.cta-band .inner::after{
  content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(120,160,255,.35),transparent 68%);pointer-events:none;
}
.cta-band .btn-white{color:var(--x-blue2)}
.cta-band .btn-primary,.cta-band .btn-white{background:var(--x-grad);color:#fff}
.cta-band .btn-white:hover{filter:brightness(1.06)}

/* ============================================================
   FAQ —— 卡片化 + 更强的展开指示
   ============================================================ */
.faq{
  background:#fff;border:1px solid #EAF0FB;border-radius:18px;padding:8px 30px;
  box-shadow:0 16px 40px rgba(40,80,180,.07);border-top:1px solid #EAF0FB;
}
.faq-item{border-bottom:1px solid #EEF2FA}
.faq-q{font-size:16.5px}
.faq-q .ind{width:32px;height:32px;border-radius:10px;font-size:18px;background:#EEF3FF;color:var(--x-blue)}
.faq-item.open .faq-q .ind,.faq-q:hover .ind{background:var(--x-grad);color:#fff;box-shadow:0 8px 18px rgba(60,80,220,.3)}
.faq-q:hover{color:var(--x-blue)}

/* 资质徽章 */
.badge{border-color:#E4EBFA;box-shadow:0 8px 20px rgba(40,80,180,.06);transition:.24s}
.badge:hover{transform:translateY(-3px);border-color:#CBD9FF;box-shadow:0 14px 30px rgba(40,80,180,.12)}
.badge b{background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   页脚 —— 渐变底 + 顶部品牌渐变线
   ============================================================ */
.site-footer{position:relative;background:linear-gradient(180deg,#20263C 0%,#171B2B 100%)}
.site-footer::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--x-grad);
}
.footer-col a:hover{color:#fff;padding-left:4px}
.footer-bottom{border-top-color:rgba(255,255,255,.08)}

/* ============================================================
   通用主按钮：统一为品牌渐变（内页所有 btn-primary）
   ============================================================ */
.btn-primary{background:var(--x-grad);box-shadow:0 10px 24px rgba(60,80,220,.24)}
.btn-primary:hover{background:var(--x-grad);filter:brightness(1.06);box-shadow:0 14px 30px rgba(60,80,220,.32)}
.btn-login{border:1.5px solid var(--x-blue);color:var(--x-blue2)}
.btn-login:hover{background:var(--x-grad);color:#fff;border-color:transparent}
.header-actions .btn-primary{box-shadow:0 8px 20px rgba(60,80,220,.3)}

/* 抽屉底部 CTA：文字居中、去掉链接底边框；预约演示黑金风格 */
.drawer .d-cta .btn{display:flex;align-items:center;justify-content:center;text-align:center;border-bottom:0;padding:0 24px}
.drawer .d-cta .btn-primary{color:#fff}
.drawer .d-cta .btn-demo{background:linear-gradient(135deg,#141414 0%,#2A2418 100%);color:#E7C877;border:1px solid rgba(216,179,106,.55)}
.drawer .d-cta .btn-demo:hover{background:linear-gradient(135deg,#000 0%,#1A1608 100%);color:#F6D67A;border-color:#E7B84B;box-shadow:0 8px 22px rgba(216,179,106,.25)}
/* 手机版隐藏导航栏登录系统按钮 */
@media (max-width:720px){.btn-login{display:none}}

/* 抽屉右上角——圆形浅红关闭按钮 X */
.drawer-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;background:#FDE7E7;color:#E5484D;border:1px solid #F6C9C9;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;transition:.18s}
.drawer-close:hover{background:#FBD2D2;color:#C92A2A}
.drawer-close:active{transform:scale(.92)}

/* 导航当前项渐变下划线 */
.nav a.active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--x-grad);
}
.nav > li > a{position:relative}

/* 内页页头（.phero / .page-hero / .art-hero / .crs-hero）光斑更饱和 */
.phero,.page-hero,.art-hero,.crs-hero{
  background:
    radial-gradient(760px 460px at 90% -6%,rgba(120,90,255,.16),transparent 60%),
    radial-gradient(680px 420px at -4% 8%,rgba(0,180,255,.16),transparent 58%),
    linear-gradient(160deg,#FFFFFF 0%,#F1F6FF 44%,#E4EEFF 100%) !important;
}

/* 弹层获客条按钮 */
.promo-form .btn-primary,.promo-bar .btn{background:var(--x-grad)}

/* ============================================================
   内页组件统一（产品页 / 案例页 / 文章页）——与首页同一质感
   ============================================================ */
/* 区块小标题：加一条渐变引导线 */
.sec-h .top{position:relative;padding-bottom:14px}
.sec-h .top::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:4px;border-radius:4px;background:var(--x-grad);box-shadow:0 6px 16px rgba(80,80,220,.28)}
/* 大标题强调字：实色品牌蓝（避免满屏渐变裁切字的“AI 味”） */
.sec-h .main b,.two h2 b{color:var(--x-blue);-webkit-text-fill-color:currentColor;background:none;-webkit-background-clip:border-box;background-clip:border-box}

/* 4 列功能卡：顶部渐变条 + 更干净的描边与悬浮 */
.fcard{position:relative;overflow:hidden;border-color:#E6EEFC}
.fcard::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--x-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.fcard:nth-child(2n)::before{background:linear-gradient(135deg,#7B61FF,#B14BFF)}
.fcard:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(40,80,180,.16)}
.fcard:hover::before{transform:scaleX(1)}

/* 流程步骤：序号改渐变徽标 */
.steps-wrap{border:1px solid #EAF0FB;box-shadow:0 16px 40px rgba(40,80,180,.06)}
.step .sn{background:var(--x-grad) !important;color:#fff !important;box-shadow:0 8px 18px rgba(60,80,220,.28);font-weight:800}

/* 图文两栏：给插画加承托台（与首页模块一致） */
.two-media{position:relative}
.two-media::before{
  content:"";position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);
  width:96%;padding-bottom:96%;max-width:480px;max-height:480px;border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%,rgba(0,198,255,.18),transparent 55%),
    radial-gradient(circle at 68% 72%,rgba(106,59,255,.18),transparent 55%),
    radial-gradient(circle at 50% 50%,#F3F7FF 0%,#EAF1FF 60%,rgba(234,241,255,0) 74%);
  filter:blur(2px);opacity:.25;
}
.two-media img.ill{position:relative;z-index:1}
.two .btn-primary{box-shadow:0 12px 26px rgba(60,80,220,.26)}

/* 案例卡：顶部渐变条 + 悬浮 */
.case-blue,.case-card{position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.case-blue::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--x-grad);opacity:0;transition:opacity .3s}
.case-blue:hover,.case-card:hover{transform:translateY(-5px);box-shadow:var(--x-lift);border-color:transparent}
.case-blue:hover::before{opacity:1}

/* 文章卡：缩略图悬浮 + 标题渐变下划线 */
.art-card .thumb{box-shadow:0 10px 26px rgba(40,80,180,.08);transition:.3s}
.art-card:hover .thumb{box-shadow:0 20px 44px rgba(40,80,180,.18)}

/* 降低动效偏好兜底 */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .officer:hover,.qt:hover,.stat-row .s:hover,.hero-kpis > div:hover{transform:none}
}

/* ============================================================
   内容页专项（案例 / 价格 / 学院 / 干货 / 关于）
   ============================================================ */
/* —— 内容页页头：网格底纹 + 标题渐变引导线 + 插画承托台 —— */
.crs-hero,.art-hero{position:relative;overflow:hidden}
.crs-hero::before,.art-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(46,107,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,107,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 22% 40%,#000 30%,transparent 72%);
  mask-image:radial-gradient(circle at 22% 40%,#000 30%,transparent 72%);
}
.crs-hero .wrap,.art-hero .wrap{position:relative;z-index:1}
.crs-hero h1,.art-hero h1{position:relative}
.crs-hero h1::after,.art-hero h1::after{
  content:"";display:block;width:60px;height:5px;border-radius:5px;margin-top:22px;
  background:var(--x-grad);box-shadow:0 8px 18px rgba(80,80,220,.3);
}
.crs-hero p,.art-hero p{max-width:520px}
.crs-hero-grid > div:last-child,.art-hero-grid > div:last-child{position:relative}
.crs-hero-grid > div:last-child::before,.art-hero-grid > div:last-child::before{
  content:"";position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92%;padding-bottom:92%;max-width:420px;max-height:420px;border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%,rgba(0,198,255,.20),transparent 55%),
    radial-gradient(circle at 68% 72%,rgba(106,59,255,.20),transparent 55%),
    radial-gradient(circle at 50% 50%,#F1F6FF 0%,#E8F0FF 62%,rgba(232,240,255,0) 74%);
  opacity:.25;
}
.crs-hero .ill,.art-hero .ill{position:relative;z-index:1}

/* —— 通用白卡 .card：顶部渐变条 + 渐变图标 + 悬浮 —— */
.card{position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--x-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--x-lift);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .ico{background:var(--x-grad);color:#fff;box-shadow:0 10px 22px rgba(60,80,220,.28);font-weight:800}
.card:nth-child(2n) .ico{background:linear-gradient(135deg,#00B8D4,#12B886);box-shadow:0 10px 22px rgba(18,184,134,.26)}
.card:nth-child(3n) .ico{background:linear-gradient(135deg,#FF7A45,#FFB43C);box-shadow:0 10px 22px rgba(255,122,69,.26)}
.card:nth-child(4n) .ico{background:linear-gradient(135deg,#7B61FF,#B14BFF);box-shadow:0 10px 22px rgba(123,97,255,.26)}

/* —— 数据总览条 .trust —— */
.trust{background:linear-gradient(180deg,#F5F9FF,#fff);border-top:1px solid #EAF0FB;border-bottom:1px solid #EAF0FB}
.trust-item .n{background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.trust-item .n em{font-style:normal}
.trust-sep{background:linear-gradient(#DCE6F8,#DCE6F8);opacity:.8}

/* —— 证言卡 .quote —— */
.quote{position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.quote::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--x-grad)}
.quote:hover{transform:translateY(-5px);box-shadow:var(--x-lift)}
.quote .mark{background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.28}
.quote .av{background:var(--x-grad-cyan);color:#fff;box-shadow:0 8px 18px rgba(46,107,255,.26)}

/* —— 表单盒 .form-box：顶部渐变条 + 更强投影 —— */
.form-box{position:relative;border:1px solid #EAF0FB;box-shadow:0 26px 60px rgba(30,60,150,.14);overflow:hidden}
.form-box::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--x-grad)}
.form-box .btn-primary{box-shadow:0 12px 26px rgba(60,80,220,.26)}

/* —— 特性行序号 .feat-row .num —— */
.feat-row .num{background:var(--x-grad) !important;color:#fff !important;box-shadow:0 6px 14px rgba(60,80,220,.24)}
.feat-row .v em{background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* —— 修复：pricing 旗舰版本该是黑金主题（style.css 只有 .t-black，页面用了 .t-dark）—— */
.plan.t-dark{background:linear-gradient(160deg,#1B1F2A 0%,#262C3F 58%,#181C26 100%);border:1px solid #3B3524;border-top:3px solid var(--gold);color:#E9EAF0;box-shadow:0 22px 54px rgba(18,22,34,.38)}
.plan.t-dark h3{color:#fff}
.plan.t-dark .for{color:#A7ACC2}
.plan.t-dark .price .cur{color:var(--gold)}
.plan.t-dark .price .num{color:#F1D8A2}
.plan.t-dark .price .unit,.plan.t-dark .price-note{color:#8E93A8}
.plan.t-dark ul li{color:#D6D9E3}
.plan.t-dark ul li::before{color:var(--gold)}
.plan.t-dark .btn-ghost{background:transparent;border-color:rgba(216,179,106,.55);color:#EBCF95}
.plan.t-dark .btn-ghost:hover{border-color:#EBCF95;color:#fff;background:rgba(216,179,106,.14)}
/* 套餐卡悬浮 + 推荐卡强调 */
.price-grid .plan{transition:transform .3s,box-shadow .3s}
.price-grid .plan:hover{transform:translateY(-6px)}
.price-grid .plan.hot{box-shadow:0 26px 60px rgba(199,154,78,.28)}

/* —— 分页 —— */
.pager a.on{background:var(--x-grad);border-color:transparent;box-shadow:0 8px 18px rgba(60,80,220,.28)}

/* —— 文章卡整卡悬浮 —— */
.art-card{transition:transform .3s}
.art-card:hover{transform:translateY(-4px)}

/* —— 深色区里的卡片兜底（若内容页出现 bg-dark）—— */
.bg-dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}

/* ============================================================
   内容详情页（文章详情 .post / 课程详情 .crs-post）
   —— 此前完全裸奔在纯白背景上，现在做成“有版式的阅读卡片”
   ============================================================ */
.post,.crs-post{
  position:relative;background:#fff;border:1px solid #EAF0FB;border-radius:22px;
  padding:clamp(28px,4.5vw,56px);box-shadow:0 30px 70px rgba(35,70,180,.10);
}
.post::before,.crs-post::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:22px 22px 0 0;background:var(--x-grad);
}
/* 大标题：加一枚渐变引导块 */
.post h1,.crs-post h1{position:relative;padding-top:6px}
.post h1::before,.crs-post h1::before{
  content:"";display:block;width:52px;height:5px;border-radius:5px;margin-bottom:20px;
  background:var(--x-grad);box-shadow:0 8px 18px rgba(80,80,220,.28);
}
/* 元信息行：浅色胶囊 */
.post .meta,.crs-post .meta{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;padding:6px 14px;border-left:0;
  background:#F1F6FF;border-radius:999px;color:#5A6478;font-weight:600;
}
/* 正文小标题：左侧渐变竖条 */
.post h2,.crs-info h2{position:relative;padding-left:16px}
.post h2::before,.crs-info h2::before{
  content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:5px;border-radius:5px;background:var(--x-grad);
}
/* 摘要块：渐变左竖条 + 清透底 */
.post .abstract{
  position:relative;background:linear-gradient(120deg,#F3F8FF,#F5F2FF);border-left-color:transparent;
  box-shadow:inset 0 0 0 1px #E7EEFB;border-radius:0 14px 14px 0;
}
.post .abstract::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--x-grad);border-radius:3px 0 0 3px}
/* 表格：圆角容器 + 渐变表头 + 斑马纹 + 悬浮 */
.post table{border:1px solid #E7EEFB;border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(40,80,180,.08)}
.post thead th{background:var(--x-grad) !important;color:#fff !important;border:none;font-weight:700;letter-spacing:.3px}
.post tbody td{border-color:#EEF2FA;transition:background .18s}
.post tbody tr:nth-child(even) td{background:#F8FBFF}
.post tbody tr:hover td{background:#EEF5FF}
/* 提示块 .tip：渐变描边 + 柔光 */
.post .tip{position:relative;background:linear-gradient(120deg,#F2F7FF,#F6F2FF);border-color:transparent;box-shadow:0 16px 36px rgba(60,80,220,.10)}
.post .tip::before{content:"";position:absolute;inset:0;border-radius:12px;padding:1.4px;background:var(--x-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* 正文链接 */
.post a:not(.btn),.crs-post a:not(.btn){color:var(--x-blue2);border-bottom:1px solid rgba(46,107,255,.28);text-decoration:none;transition:.2s}
.post a:not(.btn):hover,.crs-post a:not(.btn):hover{border-bottom-color:var(--x-blue)}
/* —— 课程详情专属 —— */
.crs-player .bigplay{background:linear-gradient(160deg,#fff,#F1F5FF);box-shadow:0 16px 40px rgba(40,80,180,.22),0 0 0 8px rgba(255,255,255,.28)}
.crs-player .bigplay svg{fill:var(--x-blue)}
.crs-player .bigplay:hover{box-shadow:0 20px 50px rgba(40,80,180,.3),0 0 0 12px rgba(255,255,255,.34)}
.crs-nav a{padding:13px 18px;border:1px solid #E7EEFB;border-radius:12px;background:#FAFCFF;display:flex;align-items:center;gap:10px;transition:.24s;color:var(--x-blue2)}
.crs-nav a::before{content:"\203A";font-weight:800;color:var(--x-blue)}
.crs-nav a:hover{background:#F1F6FF;border-color:#CFE0FF;opacity:1;transform:translateX(3px)}
.crs-share a{width:40px;height:40px}
.crs-share a:hover{background:var(--x-grad);border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(60,80,220,.3)}

/* ============================================================
   广告落地页 adpage —— 单字假图标升级为渐变徽标 + Hero 光效
   ============================================================ */
.ad-hero{background:
  radial-gradient(760px 420px at 82% -6%,rgba(120,90,255,.16),transparent 60%),
  radial-gradient(680px 420px at 12% 0%,rgba(0,180,255,.16),transparent 58%),
  radial-gradient(1100px 460px at 50% -8%,#EAF4FF 0,rgba(234,244,255,0) 68%);}
.ad-badge{background:linear-gradient(#fff,#fff) padding-box,var(--x-grad) border-box;border:1.5px solid transparent}
.ad-chip{border-color:#E4EDFF;background:#fff;box-shadow:0 8px 20px rgba(40,80,180,.06)}
.ad-pillar{border-color:#E7EEFB;transition:transform .3s,box-shadow .3s,border-color .3s}
.ad-pillar .ic{background:var(--x-grad);color:#fff;box-shadow:0 12px 24px rgba(60,80,220,.26)}
.ad-pillar:nth-child(2) .ic{background:linear-gradient(135deg,#00B8D4,#12B886);box-shadow:0 12px 24px rgba(18,184,134,.24)}
.ad-pillar:nth-child(3) .ic{background:linear-gradient(135deg,#FF7A45,#FFB43C);box-shadow:0 12px 24px rgba(255,122,69,.24)}
.ad-pillar:nth-child(4) .ic{background:linear-gradient(135deg,#7B61FF,#B14BFF);box-shadow:0 12px 24px rgba(123,97,255,.24)}
.ad-pillar:hover{transform:translateY(-6px);box-shadow:var(--x-lift);border-color:transparent}
.ad-feat-media img{filter:drop-shadow(0 24px 40px rgba(40,80,180,.16))}
.ad-num{background:var(--x-grad);color:#fff;box-shadow:0 8px 18px rgba(60,80,220,.24)}