@charset "utf-8";
/* ==========================================================
   碳擎连接器落地页 - 官网浅色风格
   路径：/mcp/css/connector.css
   依赖官网公共样式：bootstrap.min.css / sempartner.css / layout.css
   缩放基准与官网一致：html font-size = min(视口/1920*100, 100)px
   ========================================================== */

:root{
  --cq-green:#19ad5e;
  --cq-green-dark:#128a4a;
  --cq-accent:#0fc363;
  --cq-orange:#ff9c00;
  --cq-mint:#eaf7f0;
  --cq-mint-2:#f2faf5;
  --cq-ink:#12211a;
  --cq-text:#3d4a44;
  --cq-gray:#7b8783;
  --cq-gray-l:#a3ada8;
  --cq-line:#e5ebe7;
  --cq-line-2:#eef3f0;
  --cq-bg-soft:#f7faf8;
  --cq-radius:10px;
  --cq-shadow:0 8px 30px rgba(16,64,40,.06);
  --cq-shadow-h:0 14px 44px rgba(16,64,40,.12);
}

body{
  font-family:'PingFang SC','PF','Microsoft YaHei',-apple-system,'Helvetica Neue',sans-serif;
  color:var(--cq-text);
  background:#fff;
}

/* ---------- 通用 ---------- */
.cq-sec{padding:.9rem 0;}
.cq-sec--soft{background:var(--cq-bg-soft);}
.cq-sec-head{text-align:center;margin-bottom:.5rem;}
.cq-eyebrow{
  display:inline-block;font-size:.14rem;letter-spacing:.02rem;font-weight:600;
  color:var(--cq-green);background:var(--cq-mint);
  padding:.07rem .2rem;border-radius:100px;margin-bottom:.16rem;
}
.cq-h2{font-size:.4rem;font-weight:700;color:var(--cq-ink);line-height:1.3;margin:0 0 .14rem;}
.cq-h2 em{font-style:normal;color:var(--cq-accent);}
.cq-sub{font-size:.2rem;color:var(--cq-gray);line-height:1.8;max-width:11rem;margin:0 auto;}

/* ---------- 按钮 ---------- */
.cq-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.08rem;
  height:.6rem;padding:0 .38rem;border-radius:6px;font-size:.2rem;font-weight:500;
  cursor:pointer;border:1px solid transparent;transition:all .25s;
  font-family:inherit;text-decoration:none;
}
.cq-btn--primary{background:var(--cq-green);color:#fff;box-shadow:0 8px 18px rgba(25,173,94,.22);}
.cq-btn--primary:hover{background:var(--cq-orange);box-shadow:0 8px 18px rgba(255,156,0,.24);color:#fff;}
.cq-btn--ghost{background:#fff;color:var(--cq-ink);border-color:var(--cq-line);}
.cq-btn--ghost:hover{border-color:var(--cq-green);color:var(--cq-green);}
.cq-btn--lg{height:.68rem;padding:0 .46rem;font-size:.22rem;}

/* ---------- Hero 深色通栏 ----------
   底色取自 banner 图本身（#0a1223 → #0a0e1a 渐变），
   让图片与通栏背景无缝衔接，消除深色图嵌在浅色页面里的突兀感 */
.cq-hero{
  position:relative;overflow:hidden;
  padding:.75rem 0 1.15rem;   /* 底部多留出弧形分隔的空间 */
  background:
    /* 单一柔和环境光，两处光晕都压到很低的透明度 */
    radial-gradient(ellipse 50% 60% at 18% 78%, rgba(47,214,122,.10) 0%, rgba(47,214,122,.03) 44%, transparent 70%),
    radial-gradient(ellipse 36% 50% at 1% 2%, rgba(70,150,215,.07) 0%, transparent 64%),
    /* 基础渐变：必须与图片底色逐段对齐，不能有横向变化 */
    linear-gradient(180deg,#0a1223 0%,#0a0e1a 100%);
}
/* 顶部 1px 边光：精致感来自这种极细的高光，而不是大面积亮色 */
.cq-hero::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent 0%,rgba(47,214,122,.30) 16%,rgba(130,200,255,.20) 46%,transparent 72%);
}
/* 背景纹路：等距菱形网格（呼应插图的 isometric 风格）+ 细点阵。
   只铺左半区并向右淡出，避免任何横向变化污染右侧图片区的纯净竖直渐变。 */
.cq-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(60deg,  rgba(150,205,255,.07) 0 1px, transparent 1px .5rem),
    repeating-linear-gradient(-60deg, rgba(150,205,255,.07) 0 1px, transparent 1px .5rem),
    radial-gradient(rgba(130,225,180,.11) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,.18rem .18rem;
  /* 非均匀分布：左上角最明显，向右、向下逐渐隐没，形成明暗层次。
     水平半径锁死 46%——超出即完全透明，确保网格绝不会渗进右侧图片区
     （图片左缘恒在视口 50% 处），垂直半径放大是为了让衰减主要由横向决定。 */
  mask-image:radial-gradient(ellipse 46% 155% at 0% 28%,
    rgba(0,0,0,1) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.22) 66%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 46% 155% at 0% 28%,
    rgba(0,0,0,1) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.22) 66%, transparent 100%);
}
/* 底部弧形分隔：用 SVG 铺在通栏下沿，白色与下方数据条同色 */
.cq-curve{
  position:absolute;left:0;right:0;bottom:-1px;
  width:100%;height:.42rem;display:block;z-index:2;pointer-events:none;
}
.cq-hero .wrap{position:relative;z-index:1;}
.cq-hero-grid{display:flex;align-items:center;gap:.5rem;}
.cq-hero-left{width:50%;}
.cq-hero-right{width:50%;}

/* 深色底下的文字与控件配色 */
.cq-hero .cq-h1{color:#f2f7f4;}
.cq-hero .cq-h1 em{color:#2fd67a;}
.cq-hero .cq-h1-sub{color:rgba(255,255,255,.82);opacity:1;}
.cq-hero .cq-h1-desc{color:rgba(255,255,255,.58);}
.cq-hero .cq-pill{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.10);
  color:#2fd67a;box-shadow:none;
}
.cq-hero .cq-pill .cq-dot{background:#2fd67a;}
.cq-hero .cq-btn--ghost{
  background:transparent;color:#e8f0eb;border-color:rgba(255,255,255,.24);
}
.cq-hero .cq-btn--ghost:hover{
  border-color:#2fd67a;color:#2fd67a;background:rgba(47,214,122,.10);
}
.cq-hero .cq-anchor{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.08);
  box-shadow:none;
}
.cq-hero .cq-anchor:hover{
  border-color:#2fd67a;background:rgba(47,214,122,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.cq-hero .cq-anchor-ico{background:rgba(47,214,122,.14);color:#2fd67a;}
.cq-hero .cq-anchor-ico--blue{background:rgba(110,180,240,.14);color:#6fb6f0;}
.cq-hero .cq-anchor-ico--amber{background:rgba(255,175,60,.14);color:#ffb43d;}
.cq-hero .cq-anchor-t{color:#f2f7f4;}
.cq-hero .cq-anchor-d{color:rgba(255,255,255,.5);}

/* ---------- 主视觉 banner（PPT 原版式，文字全部为 HTML 代码） ----------
   需求点 9 要求 banner 文字用代码写，所以这里只有插图是图片，
   四周的标注文字都是真实 DOM 节点，可被搜索引擎索引、可选中、可翻译。
   字号用 cqw（容器查询单位）随 banner 宽度缩放——
   若用 rem，移动端 rem 基准不同会导致文字撑爆版面。 */
.cq-vb{
  position:relative;
  /* 尺寸已借到上限：左缘借 .25rem（左栏锚点卡右缘 935，再往左就压到卡片），
     其余全部向右展开，右缘距视口约 50px。
     比例锁死 792/454 —— 插图是 16:9，且四周标注正落在画面的透明边距里，
     所以既不能裁边、也不能改盒型比例，高度只能靠加宽等比带上去。
     插图可见内容仍落在页面栅格内，超出 .wrap 的部分只是空白盒子。 */
  width:calc(100% + 1.38rem);margin-left:-.25rem;
  aspect-ratio:792/454;
  container-type:inline-size;
}
/* 插图柔光底盘：把图解从深色背景里"托"起来，增加一层纵深。
   范围控制在 78%x74% 并向外模糊，边缘完全化开，不会形成硬边。 */
.cq-vb::before{
  content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:78%;height:74%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,
    rgba(47,214,122,.16) 0%, rgba(47,214,122,.05) 48%, transparent 72%);
  filter:blur(22px);
}
.cq-vb-fig{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;}
.cq-vb-label{
  position:absolute;transform:translate(-50%,-50%);
  white-space:nowrap;line-height:1.25;z-index:2;
}

/* ---------- 动效 ----------
   入场：滚动到图解时，23 条标注自上而下依次淡入上浮。
   默认状态是"可见"的，只有 JS 加上 .cq-anim 后才隐藏等待入场——
   这样即使 JS 失效，内容也不会丢失。 */
.cq-vb.cq-anim .cq-vb-label{
  opacity:0;transform:translate(-50%,-50%) translateY(.24rem) scale(.93);
  transition:opacity .6s ease,transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);
}
.cq-vb.cq-anim.cq-on .cq-vb-label{
  opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1);
}
/* ---------- 输入→输出 顺序点亮链路 ----------
   周期 9s，共 13 步：
     0s 输入 → 0.69s 段A → 1.38s ① → 2.08s 段B → 2.77s ② →
     3.46s 段C → 4.15s ③ → 4.84s 段D → 5.54s ④ → 6.23s 段E →
     6.92s ⑤ → 7.61s 段F → 8.31s 输出
   每个元素用内联 --t 给自己一个负延迟，实现相位错开；
   所有元素共用同一套百分比关键帧，改时序只需改 --t。 */

/* 路径上的灯点：一个个依次点亮 */
@keyframes cqDotLit{
  0%,2%  {opacity:.16;r:2.2;}
  9%,20% {opacity:1;}
  32%    {opacity:.42;}
  60%    {opacity:.2;}
  100%   {opacity:.16;r:2.2;}
}
.cq-dots circle{opacity:.16;animation:cqDotLit 9s ease-in-out infinite;animation-delay:var(--t,0s);}

/* 编号药丸：亮起时描边、底色、光晕一起变 */
@keyframes cqSeqNode{
  0%,3%{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    border-color:rgba(47,214,122,.30);
    background:rgba(8,22,18,.72);
    color:#d6efe1;
  }
  10%,22%{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
               0 0 .5rem rgba(47,214,122,.95),
               0 0 1.1rem rgba(47,214,122,.5);
    border-color:rgba(125,251,180,1);
    background:rgba(26,92,60,.96);
    color:#ffffff;
  }
  36%{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    border-color:rgba(47,214,122,.30);
    background:rgba(8,22,18,.72);
    color:#d6efe1;
  }
  100%{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    border-color:rgba(47,214,122,.30);
    background:rgba(8,22,18,.72);
    color:#d6efe1;
  }
}
.cq-vb.cq-anim .cq-vb-node{
  /* 暗态基础样式：动画有正延迟时，延迟期间显示的就是它 —— 不写就会"先亮后暗" */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  border-color:rgba(47,214,122,.30);
  background:rgba(8,22,18,.72);
  color:#d6efe1;
  animation:cqSeqNode 9s linear infinite;animation-delay:var(--t,0s);
}

/* 亮起时向外荡出的光环 */
.cq-vb-node::after{
  content:'';position:absolute;inset:-3px;border-radius:999px;pointer-events:none;
  border:1.5px solid rgba(140,255,190,.95);
  opacity:0;transform:scale(.92);
}
@keyframes cqSeqRing{
  0%,3%  {opacity:0;transform:scale(.94);}
  11%    {opacity:1;transform:scale(1.06);}
  26%    {opacity:0;transform:scale(1.5);}
  100%   {opacity:0;transform:scale(.94);}
}
.cq-vb.cq-anim .cq-vb-node::after{animation:cqSeqRing 9s ease-out infinite;animation-delay:var(--t,0s);}

/* 输入 / 输出 标签与值 */
@keyframes cqSeqIO{
  0%,3%  {opacity:.35;}
  10%,24%{opacity:1;}
  40%    {opacity:.6;}
  100%   {opacity:.35;}
}
.cq-vb.cq-anim .cq-vb-iotag,
.cq-vb.cq-anim .cq-vb-ioval{
  opacity:.45;   /* 暗态基础 */
  animation:cqSeqIO 9s linear infinite;animation-delay:var(--t,0s);
}
/* 入场动画的 .cq-on 规则优先级更高，会把这层暗态盖掉，这里用同级选择器压回来 */
.cq-vb.cq-anim.cq-on .cq-vb-iotag,
.cq-vb.cq-anim.cq-on .cq-vb-ioval{opacity:.35;}
@keyframes cqValGlow{
  0%,3%  {box-shadow:0 0 0 0 rgba(47,214,122,0), 0 0 0 rgba(47,214,122,0);}
  10%    {box-shadow:0 0 0 .05rem rgba(47,214,122,.75), 0 0 .45rem rgba(47,214,122,.95);}
  24%    {box-shadow:0 0 0 .12rem rgba(47,214,122,.18), 0 0 .8rem rgba(47,214,122,.45);}
  42%    {box-shadow:0 0 0 0 rgba(47,214,122,0), 0 0 0 rgba(47,214,122,0);}
  100%   {box-shadow:0 0 0 0 rgba(47,214,122,0), 0 0 0 rgba(47,214,122,0);}
}
.cq-vb.cq-anim .cq-vb-ioval{animation:cqSeqIO 9s linear infinite, cqValGlow 9s ease-out infinite;animation-delay:var(--t,0s),var(--t,0s);}

/* 箭头：朝下（输入）/ 朝右（输出）轻点，指向它下面的值 */
.cq-arrow{
  /* 用内联 SVG 而不是 ↓ → 字形：字形受字体影响会下探、无法对齐，
     改用自绘箭头后几何完全可控，与文字垂直居中 */
  display:inline-flex;align-items:center;justify-content:center;
  width:.78em;height:1em;margin-right:.22em;
  vertical-align:middle;
}
.cq-arrow svg{width:100%;height:100%;display:block;}
@keyframes cqArrowTap{
  0%,4%  {transform:translateY(-.035rem) scale(.92);opacity:.4;}
  12%    {transform:translateY(.022rem)  scale(1.18);opacity:1;}
  24%    {transform:translateY(.008rem)  scale(1.05);opacity:1;}
  40%    {transform:translateY(-.035rem) scale(.92);opacity:.4;}
  100%   {transform:translateY(-.035rem) scale(.92);opacity:.4;}
}
@keyframes cqArrowSlide{
  0%,4%  {transform:translateX(-.035rem) scale(.92);opacity:.4;}
  12%    {transform:translateX(.022rem)  scale(1.18);opacity:1;}
  24%    {transform:translateX(.008rem)  scale(1.05);opacity:1;}
  40%    {transform:translateX(-.035rem) scale(.92);opacity:.4;}
  100%   {transform:translateX(-.035rem) scale(.92);opacity:.4;}
}
.cq-vb.cq-anim .cq-arrow{opacity:.35;transform-origin:50% 50%;
  animation:cqArrowTap 9s ease-in-out infinite;animation-delay:var(--t,0s);}
.cq-vb.cq-anim .cq-arrow--right{
  animation-name:cqArrowSlide;transform-origin:0% 50%;
}

/* 无障碍：开启动效时需要关停的，一并列在这里 */
/* 柔光底盘呼吸：只动 opacity / transform，不触发重排，开销极低 */
@keyframes cqGlowBreathe{
  0%,100%{opacity:.5; transform:translate(-50%,-50%) scale(.93);}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.18);}
}
.cq-vb.cq-anim::before{animation:cqGlowBreathe 6.5s ease-in-out infinite;}
/* 大标题流光：渐变横向拉长后平移，形成一道光扫过字面。
   只改 background-position，不触发重排。 */


/* 无障碍：用户系统里开了"减少动态效果"就全部关掉。
   四个动效一个都不能漏——漏掉的那个会一直在动，反而更刺眼。 */
@media (prefers-reduced-motion: reduce){
  .cq-vb.cq-anim .cq-vb-label,
  .cq-vb.cq-anim.cq-on .cq-vb-label{
    opacity:1;transform:translate(-50%,-50%);
    transition:none;transition-delay:0s;
  }
  .cq-vb.cq-anim .cq-vb-node,
  .cq-vb.cq-anim .cq-vb-node::after,
  .cq-vb.cq-anim .cq-seg,
  .cq-vb.cq-anim .cq-vb-iotag,
  .cq-vb.cq-anim .cq-vb-ioval,
  .cq-vb.cq-anim .cq-arrow,
  .cq-vb.cq-anim .cq-dots circle,
  .cq-vb.cq-anim::before{animation:none;}
}
/* 大标题：渐变填充（上亮下深）比纯色更有体积感，
   color 作为不支持 background-clip:text 时的兜底 */
.cq-vb-big{
  font-size:.62rem;font-size:3.9cqw;
  font-weight:800;letter-spacing:.015em;color:#2fd67a;
  background:linear-gradient(180deg,#95ffc8 0%,#3ddc86 48%,#16a355 100%);
  background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  /* 三层投影叠成"类描边"：最内层极小的深色投影勾出轮廓，
     中间层绿色外辉，最外层扩散投影增加厚度。
     比 -webkit-text-stroke 与 background-clip 混用更稳，不会出现填充被描边盖住 */
  filter:drop-shadow(0 0 .05cqw rgba(3,18,10,.95))
         drop-shadow(0 0 .13cqw rgba(47,214,122,.62))
         drop-shadow(0 .05cqw .2cqw rgba(0,0,0,.5));
}
/* 中标题：压在插图上，加深暗底光晕保证可读性 */
.cq-vb-mid{
  font-size:.36rem;font-size:2.3cqw;
  font-weight:700;color:#eef7f2;letter-spacing:.02em;
  text-shadow:0 0 .12cqw rgba(0,0,0,.8), 0 0 .32cqw rgba(0,0,0,.6);
}
.cq-vb-sub{
  font-size:.2rem;font-size:1.26cqw;
  color:rgba(255,255,255,.56);font-weight:400;letter-spacing:.035em;
}
.cq-vb-node{
  font-size:.22rem;font-size:1.4cqw;
  color:#d6efe1;font-weight:500;
  background:rgba(8,22,18,.72);
  border:1px solid rgba(47,214,122,.30);
  border-radius:999px;padding:.045rem .16rem;padding:.5cqw 1.5cqw;
  /* 顶部 1px 内高光：玻璃质感 */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
/* 序号单独提亮，形成"编号—名称"的层次 */
.cq-vb-node i{font-style:normal;color:#7dfbb4;font-weight:700;}
/* 输入/输出药丸：内边距收窄，避免在 772px 宽度下变宽后压到建筑 */
/* 输入/输出：小标签（带箭头） + 值药丸，两级层次 */
.cq-vb-iotag{
  font-size:.2rem;font-size:1.28cqw;
  font-weight:600;color:#2fd67a;letter-spacing:.06em;
  text-shadow:0 0 .12cqw rgba(0,0,0,.75);
}
.cq-vb-ioval{
  font-size:.24rem;font-size:1.42cqw;
  font-weight:600;color:#2fd67a;
  background:rgba(47,214,122,.10);
  border:1px solid rgba(47,214,122,.52);
  border-radius:999px;padding:.05rem .16rem;padding:.5cqw 1.1cqw;
}

/* 输入→输出 流动光点：沿道路折线运动，强调数据链路。
   光点做成柔和径向渐变而非实心圆，路径有几像素偏差也不会显得脱轨。 */
.cq-vb-flow{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;overflow:visible;
  filter:drop-shadow(0 0 .16rem rgba(160,255,210,.95));
}
@media (prefers-reduced-motion: reduce){
  .cq-vb-flow{display:none;}
}
/* 中间品牌字标：尺寸刻意小于 PPT 原稿（原稿占画面 30%，显得喧宾夺主） */
.cq-vb-brand{
  position:absolute;left:38.60%;top:38.95%;width:19%;height:auto;
  z-index:2;pointer-events:none;opacity:.92;
  filter:drop-shadow(0 0 .14cqw rgba(0,0,0,.6));
}

/* 数据条：回到浅色区 */
.cq-stats-sec{padding:.55rem 0 .1rem;background:#fff;}

/* ---------- 悬浮快速导航 ----------
   banner 滚出视口后滑入，让「能力中心 / Skill广场 / 接入指南」三个入口
   始终够得着。放底部而非顶部，避免与固定导航形成"双头部"。
   z-index 390 略低于导航(400)，滚动时从导航下方滑过而不是压住它。

   ⚠ 激活类名用 .cq-on，不要改回 .show：
     官网 bootstrap.min.css 里有一条全局的
         .show{display:block!important}
     带 !important，会直接压掉本元素的 display:flex，导致三个按钮竖排堆叠。
     Toast 同理，所以也统一用 .cq-on。 */
.cq-dock{
  position:fixed;left:50%;bottom:.42rem;z-index:390;
  display:flex;align-items:center;gap:.05rem;padding:.08rem;
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid rgba(16,64,40,.10);
  border-radius:100px;
  box-shadow:0 .12rem .38rem rgba(16,64,40,.16);
  transform:translate(-50%,160%);
  opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.22,.8,.24,1),opacity .28s;
}
.cq-dock.cq-on{transform:translate(-50%,0);opacity:1;pointer-events:auto;}
.cq-dock a{
  display:flex;align-items:center;gap:.08rem;
  padding:.12rem .24rem;border-radius:100px;
  font-size:.17rem;color:var(--cq-gray);white-space:nowrap;
  transition:all .22s;text-decoration:none;
}
.cq-dock a svg{flex:none;opacity:.7;transition:opacity .22s;}
.cq-dock a:hover{color:var(--cq-green);background:rgba(25,173,94,.09);}
.cq-dock a:hover svg{opacity:1;}
.cq-dock a.active{
  color:#fff;background:var(--cq-green);
  box-shadow:0 .05rem .16rem rgba(25,173,94,.32);
}
.cq-dock a.active svg{opacity:1;}

.cq-pill{
  display:inline-flex;align-items:center;gap:.08rem;
  height:.36rem;padding:0 .18rem;border-radius:100px;
  background:#fff;border:1px solid var(--cq-line);
  font-size:.15rem;color:var(--cq-green);font-weight:500;
  box-shadow:var(--cq-shadow);margin-bottom:.26rem;
}
.cq-pill .cq-dot{width:.07rem;height:.07rem;border-radius:50%;background:var(--cq-accent);animation:cqPulse 2s infinite;}
@keyframes cqPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}

.cq-h1{font-size:.78rem;font-weight:800;color:var(--cq-ink);line-height:1.16;letter-spacing:-.01rem;margin:0 0 .18rem;}
.cq-h1 em{font-style:normal;color:var(--cq-green);}
.cq-h1-sub{font-size:.28rem;color:var(--cq-ink);opacity:.72;margin:0 0 .2rem;font-weight:400;}
.cq-h1-desc{font-size:.19rem;color:var(--cq-gray);line-height:1.9;max-width:6.4rem;margin:0 0 .34rem;}

.cq-hero-btns{display:flex;gap:.16rem;flex-wrap:wrap;margin-bottom:.42rem;}

.cq-anchors{display:flex;gap:.16rem;flex-wrap:wrap;}
.cq-anchor{
  flex:1;min-width:2.1rem;display:flex;align-items:center;gap:.14rem;
  background:#fff;border:1px solid var(--cq-line);border-radius:var(--cq-radius);
  padding:.18rem .2rem;box-shadow:var(--cq-shadow);transition:all .25s;text-decoration:none;
}
.cq-anchor:hover{transform:translateY(-3px);border-color:var(--cq-green);box-shadow:var(--cq-shadow-h);}
.cq-anchor-ico{
  width:.46rem;height:.46rem;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--cq-mint);color:var(--cq-green);
}
.cq-anchor-ico--blue{background:#eaf3fb;color:#2f7fc4;}
.cq-anchor-ico--amber{background:#fff4e3;color:#d98600;}
.cq-anchor-t{display:block;font-size:.19rem;font-weight:600;color:var(--cq-ink);}
.cq-anchor-d{display:block;font-size:.15rem;color:var(--cq-gray-l);margin-top:.03rem;}

/* 数据条 */
.cq-stats{display:flex;gap:.2rem;}
.cq-stat{
  flex:1;background:#fff;border:1px solid var(--cq-line);border-radius:var(--cq-radius);
  padding:.28rem .2rem;text-align:center;box-shadow:var(--cq-shadow);transition:all .25s;
}
.cq-stat:hover{border-color:var(--cq-green);transform:translateY(-3px);box-shadow:var(--cq-shadow-h);}
.cq-stat-n{font-size:.46rem;font-weight:800;color:var(--cq-green);line-height:1.1;}
.cq-stat-n i{font-size:.22rem;font-style:normal;font-weight:600;margin-left:.02rem;}
.cq-stat-l{font-size:.17rem;color:var(--cq-gray);margin-top:.08rem;}

/* ---------- 三列卡片栅格（能力中心 / Skill广场 共用） ---------- */
.cq-grid3{display:flex;flex-wrap:wrap;gap:.2rem;}
.cq-card{
  width:calc((100% - .4rem)/3);
  background:#fff;border:1px solid var(--cq-line);border-radius:var(--cq-radius);
  padding:.3rem .28rem;transition:all .25s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.cq-card::before{
  content:'';position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cq-green),var(--cq-accent));
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.cq-card:hover{border-color:var(--cq-green);box-shadow:var(--cq-shadow-h);transform:translateY(-4px);}
.cq-card:hover::before{transform:scaleX(1);}

.cq-card-head{display:flex;align-items:center;gap:.12rem;margin-bottom:.16rem;}
.cq-card-ico{
  width:.48rem;height:.48rem;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--cq-mint);color:var(--cq-green);transition:all .25s;
}
.cq-card:hover .cq-card-ico{background:var(--cq-green);color:#fff;}
.cq-card-head h3{font-size:.21rem;font-weight:600;color:var(--cq-ink);margin:0;line-height:1.4;flex:1;}
.cq-cat{
  font-size:.14rem;color:var(--cq-green);background:var(--cq-mint);
  padding:.04rem .1rem;border-radius:4px;white-space:nowrap;flex:none;
}
.cq-card-d{font-size:.17rem;color:var(--cq-gray);line-height:1.85;margin:0 0 .16rem;flex:1;}
.cq-card-out{
  background:var(--cq-mint-2);border-radius:7px;padding:.12rem .16rem;
  font-size:.16rem;color:var(--cq-gray);line-height:1.7;
}
.cq-card-out b{color:var(--cq-text);font-weight:500;}
.cq-card-out em{font-style:normal;color:var(--cq-green);font-weight:500;}

/* 折叠展开 */
.cq-more{text-align:center;margin-top:.44rem;}
.cq-more-btn{
  display:inline-flex;align-items:center;gap:.08rem;height:.5rem;padding:0 .34rem;
  border-radius:100px;border:1px solid var(--cq-green);background:#fff;color:var(--cq-green);
  font-size:.18rem;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit;
}
.cq-more-btn:hover{background:var(--cq-green);color:#fff;box-shadow:0 8px 20px rgba(25,173,94,.24);}
.cq-more-btn .cq-arrow{display:inline-block;transition:transform .3s;}
.cq-more-btn.open .cq-arrow{transform:rotate(180deg);}
.cq-collapse{display:none;}
.cq-collapse.open{display:flex;}
#skill-more.open{display:contents;}

/* 底部说明条 */
.cq-strip{
  margin-top:.5rem;padding:.34rem .38rem;border-radius:var(--cq-radius);
  background:linear-gradient(120deg,#eaf7f0 0%,#f6fbf8 100%);
  border:1px solid #d5ecdf;
  display:flex;align-items:center;justify-content:space-between;gap:.3rem;flex-wrap:wrap;
}
.cq-strip h3{font-size:.26rem;font-weight:700;color:var(--cq-ink);margin:0 0 .08rem;}
.cq-strip p{font-size:.17rem;color:var(--cq-gray);margin:0;line-height:1.8;max-width:8.4rem;}
.cq-strip-act{display:flex;gap:.14rem;flex:none;}

/* ---------- Skill 广场 ---------- */
.cq-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.12rem;margin-bottom:.42rem;}
.cq-chip{
  padding:.09rem .22rem;border-radius:100px;font-size:.16rem;
  color:var(--cq-gray);background:#fff;border:1px solid var(--cq-line);
  cursor:pointer;transition:all .2s;
}
.cq-chip:hover{border-color:var(--cq-green);color:var(--cq-green);}
.cq-chip.active{background:var(--cq-green);border-color:var(--cq-green);color:#fff;font-weight:500;}

.cq-skill{
  width:calc((100% - .4rem)/3);
  background:#fff;border:1px solid var(--cq-line);border-radius:var(--cq-radius);
  padding:.3rem .28rem;transition:all .25s;display:flex;flex-direction:column;
}
.cq-skill:hover{border-color:var(--cq-green);box-shadow:var(--cq-shadow-h);transform:translateY(-4px);}
.cq-skill-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.12rem;margin-bottom:.12rem;}
.cq-skill-head h3{font-size:.21rem;font-weight:600;color:var(--cq-ink);margin:0;line-height:1.45;}
.cq-badge{font-size:.14rem;padding:.04rem .1rem;border-radius:4px;white-space:nowrap;flex:none;font-weight:500;}
.cq-badge--green{background:var(--cq-mint);color:var(--cq-green);}
.cq-badge--blue{background:#eaf3fb;color:#2f7fc4;}
.cq-badge--amber{background:#fff4e3;color:#c98000;}
.cq-badge--purple{background:#f2eefc;color:#7a5cd6;}
.cq-badge--red{background:#fdeeee;color:#d15a5a;}
.cq-skill-d{font-size:.17rem;color:var(--cq-gray);line-height:1.85;margin:0 0 .16rem;flex:1;}
.cq-tools{display:flex;flex-wrap:wrap;gap:.07rem;margin-bottom:.2rem;}
.cq-tools span{
  font-size:.14rem;color:var(--cq-gray);background:var(--cq-bg-soft);
  border:1px solid var(--cq-line-2);padding:.04rem .12rem;border-radius:100px;
}
.cq-skill-btn{
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  width:100%;height:.46rem;border-radius:7px;border:1px solid #cfe9db;background:var(--cq-mint);
  color:var(--cq-green);font-size:.17rem;font-weight:500;cursor:pointer;
  transition:all .2s;font-family:inherit;
}
.cq-skill-btn:hover{background:var(--cq-green);border-color:var(--cq-green);color:#fff;}
.cq-capability-key-btn{margin-top:.2rem;flex:none;}
.cq-note{text-align:center;font-size:.16rem;color:var(--cq-gray-l);margin:.4rem 0 0;line-height:1.8;}

/* ---------- 接入指南 ---------- */
.cq-steps{display:flex;gap:.24rem;margin-bottom:.5rem;}
.cq-step{
  flex:1;background:#fff;border:1px solid var(--cq-line);border-radius:var(--cq-radius);
  padding:.32rem .3rem;transition:all .25s;
}
.cq-step:hover{border-color:var(--cq-green);box-shadow:var(--cq-shadow-h);}
.cq-step-top{display:flex;align-items:center;gap:.14rem;margin-bottom:.18rem;}
.cq-step-n{
  width:.5rem;height:.5rem;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.24rem;font-weight:700;color:var(--cq-green);
  background:var(--cq-mint);border:2px solid var(--cq-green);
}
.cq-step-time{
  font-size:.15rem;color:var(--cq-green);background:var(--cq-mint);
  padding:.04rem .14rem;border-radius:100px;
}
.cq-step h3{font-size:.22rem;font-weight:600;color:var(--cq-ink);margin:0 0 .12rem;line-height:1.5;}
.cq-step p{font-size:.17rem;color:var(--cq-gray);line-height:1.9;margin:0;}
.cq-step-eg{
  margin-top:.18rem;padding:.14rem .18rem;background:var(--cq-mint-2);
  border-left:3px solid var(--cq-green);border-radius:6px;
  font-size:.16rem;color:var(--cq-text);line-height:1.75;
}
.cq-step-eg em{font-style:normal;color:var(--cq-green);font-weight:500;}

/* 代码块 - 浅色主题 */
.cq-code-wrap{max-width:11.6rem;margin:0 auto .5rem;}
.cq-code{border:1px solid var(--cq-line);border-radius:var(--cq-radius);overflow:hidden;background:#f8fafc;}
.cq-code-h{
  display:flex;align-items:center;justify-content:space-between;gap:.2rem;
  padding:.16rem .24rem;background:#eef2f6;border-bottom:1px solid #e2e8ef;
}
.cq-code-h .cq-dots{display:flex;gap:.07rem;}
.cq-code-h .cq-dots i{width:.13rem;height:.13rem;border-radius:50%;display:block;}
.cq-code-h .cq-dots i:nth-child(1){background:#ff5f57;}
.cq-code-h .cq-dots i:nth-child(2){background:#febc2e;}
.cq-code-h .cq-dots i:nth-child(3){background:#28c840;}
.cq-code-h .cq-lang{font-size:.15rem;color:var(--cq-gray);flex:1;text-align:left;}
.cq-copy{
  font-size:.15rem;color:var(--cq-green);background:#fff;border:1px solid #cfe9db;
  padding:.06rem .18rem;border-radius:6px;cursor:pointer;transition:all .2s;font-family:inherit;
}
.cq-copy:hover{background:var(--cq-green);color:#fff;border-color:var(--cq-green);}
.cq-code-b{
  padding:.28rem;font-family:'SF Mono','Fira Code','Consolas',monospace;
  font-size:.17rem;line-height:1.9;overflow-x:auto;white-space:pre;color:#24292f;
}
.cq-code-b .c{color:#8b949e;}
.cq-code-b .k{color:#0550ae;}
.cq-code-b .s{color:#0a3069;}

.cq-test{
  margin-top:.2rem;padding:.22rem .26rem;border-radius:var(--cq-radius);
  background:#eaf7f0;border:1px solid #cfe9db;
}
.cq-test--blue{background:#eaf3fb;border-color:#cfe2f4;}
.cq-test-h{
  display:flex;align-items:center;gap:.08rem;font-size:.16rem;font-weight:600;
  color:var(--cq-green);margin-bottom:.1rem;
}
.cq-test--blue .cq-test-h{color:#2f7fc4;}
.cq-test-cmd{font-family:'SF Mono','Fira Code',monospace;font-size:.2rem;color:var(--cq-ink);margin-bottom:.1rem;}
.cq-test-hint{font-size:.16rem;color:var(--cq-gray);line-height:1.8;}
.cq-test-hint em{font-style:normal;color:var(--cq-green);}

/* FAQ */
.cq-faq{max-width:11.6rem;margin:0 auto;}
.cq-faq-item{
  background:#fff;border:1px solid var(--cq-line);border-radius:var(--cq-radius);
  margin-bottom:.14rem;overflow:hidden;transition:border-color .2s;
}
.cq-faq-item:hover{border-color:#cfe9db;}
.cq-faq-q{
  padding:.24rem .3rem;font-size:.2rem;font-weight:500;color:var(--cq-ink);
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.2rem;
  transition:background .2s;
}
.cq-faq-q:hover{background:var(--cq-mint-2);}
.cq-faq-ico{color:var(--cq-green);transition:transform .3s;flex:none;display:flex;}
.cq-faq-item.open .cq-faq-ico{transform:rotate(45deg);}
.cq-faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.cq-faq-a-in{padding:0 .3rem .26rem;font-size:.17rem;color:var(--cq-gray);line-height:1.95;}

/* ---------- 留资 CTA ---------- */
.cq-cta{
  padding:.9rem 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(25,173,94,.10) 0%, transparent 62%),
    linear-gradient(180deg,#ffffff 0%,#f4faf6 100%);
}
.cq-cta-box{max-width:9.6rem;margin:0 auto;text-align:center;}
.cq-cta-box h2{font-size:.42rem;font-weight:700;color:var(--cq-ink);margin:0 0 .16rem;}
.cq-cta-box>p{font-size:.19rem;color:var(--cq-gray);line-height:1.9;margin:0 0 .4rem;}
.cq-form{
  background:#fff;border:1px solid var(--cq-line);border-radius:14px;
  padding:.44rem;text-align:left;box-shadow:0 14px 46px rgba(16,64,40,.09);
}
.cq-frow{display:flex;gap:.2rem;margin-bottom:.2rem;}
.cq-fg{display:flex;flex-direction:column;gap:.08rem;flex:1;}
.cq-fg--full{flex:1 1 100%;width:100%;}
.cq-fg label{font-size:.17rem;font-weight:500;color:var(--cq-text);}
.cq-fg label i{color:#d15a5a;font-style:normal;margin-left:.02rem;}
.cq-fg input,.cq-fg textarea{
  padding:.15rem .18rem;font-size:.18rem;color:var(--cq-ink);
  background:#fff;border:1px solid #dfe7e3;border-radius:8px;outline:none;
  transition:all .2s;font-family:inherit;width:100%;
}
.cq-fg input::placeholder,.cq-fg textarea::placeholder{color:#b3bdb8;}
.cq-fg input:focus,.cq-fg textarea:focus{border-color:var(--cq-green);box-shadow:0 0 0 3px rgba(25,173,94,.12);}
.cq-fg textarea{resize:vertical;min-height:1.1rem;}
.cq-fg-row{margin-bottom:.2rem;}
.cq-submit{
  width:100%;height:.64rem;border:none;border-radius:8px;cursor:pointer;
  font-size:.22rem;font-weight:600;color:#fff;background:var(--cq-green);
  box-shadow:0 8px 22px rgba(25,173,94,.24);transition:all .25s;margin-top:.1rem;font-family:inherit;
}
.cq-submit:hover{background:var(--cq-orange);box-shadow:0 8px 22px rgba(255,156,0,.26);}
.cq-form-note{text-align:center;font-size:.15rem;color:var(--cq-gray-l);margin:.18rem 0 0;}

/* 页脚备案链接 */
.copyright .cq-record-link{color:#7f88b7;}

/* ---------- Toast ---------- */
.cq-toast{
  position:fixed;left:50%;bottom:1rem;transform:translate(-50%,20px);
  background:rgba(18,33,26,.94);color:#fff;font-size:.18rem;
  padding:.16rem .3rem;border-radius:100px;display:flex;align-items:center;gap:.1rem;
  opacity:0;pointer-events:none;transition:all .3s;z-index:9999;
}
.cq-toast.cq-on{opacity:1;transform:translate(-50%,0);}

/* ---------- 响应式 ---------- */
@media (max-width:1200px){
  .cq-card,.cq-skill{width:calc((100% - .2rem)/2);}
  .cq-h1{font-size:.66rem;}
}
@media (max-width:1024px){
  .cq-hero-grid{flex-direction:column;}
  .cq-hero-left,.cq-hero-right{width:100%;}
  .cq-hero-right{order:-1;margin-bottom:.4rem;}
  .cq-hero-right img{max-width:100%;}
  /* 窄屏取消外扩：外扩量按 rem 计，移动端 rem 基准不同会撑出视口 */
  .cq-vb{width:100%;margin-left:0;}
  /* 堆叠后图片移到顶部且接近满宽，原先位于左侧的光晕/纹理就会压到图片上，
     把图片区底色染亮、露出矩形边界。此处改为全部下沉到图片下方的文字区。 */
  .cq-hero{
    background:
      radial-gradient(ellipse 62% 30% at 50% 99%, rgba(47,214,122,.10) 0%, rgba(47,214,122,.03) 48%, transparent 74%),
      radial-gradient(ellipse 52% 26% at 50% 82%, rgba(40,110,160,.07) 0%, transparent 70%),
      /* 关键：渐变必须在图片底边处就走完。
         堆叠后图片只占通栏上部约 1/4，若渐变拉满整个通栏，
         图片下半部的底色就会比通栏亮出 7 个色阶，露出左右边界。 */
      linear-gradient(180deg,#0a1223 0,#0a0e1a 4.7rem,#0a0e1a 100%);
  }
  .cq-hero::after{
    background-image:radial-gradient(rgba(130,225,180,.13) 1px, transparent 1px);
    background-size:.18rem .18rem;
    mask-image:linear-gradient(180deg,transparent 0%,transparent 36%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.85) 68%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 36%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.85) 68%);
  }
  .cq-steps{flex-wrap:wrap;}
  .cq-step{flex:1 1 100%;}
  .cq-h1-desc{max-width:100%;}
}

/* 移动端：官网在 <=750px 使用 mob_header + 750 设计稿基准（1rem = 视口/750*100） */
@media (max-width:750px){
  .cq-sec{padding:1rem 0;}
  .cq-h1{font-size:.56rem;}
  .cq-h1-sub{font-size:.34rem;}
  .cq-h1-desc{font-size:.3rem;}
  .cq-h2{font-size:.42rem;}
  .cq-sub{font-size:.28rem;max-width:100%;}
  .cq-eyebrow{font-size:.24rem;}
  .cq-pill{font-size:.24rem;height:.56rem;padding:0 .3rem;margin-bottom:.34rem;}
  .cq-btn{height:.86rem;font-size:.3rem;border-radius:8px;padding:0 .5rem;}
  .cq-btn--lg{height:.92rem;font-size:.32rem;}
  .cq-hero-btns{gap:.2rem;margin-bottom:.5rem;}
  .cq-hero{padding:.4rem 0 .6rem;}
  .cq-card,.cq-skill{width:100%;padding:.36rem .32rem;}
  .cq-card-head h3,.cq-skill-head h3{font-size:.32rem;}
  .cq-cat,.cq-badge{font-size:.22rem;}
  .cq-card-d,.cq-skill-d{font-size:.28rem;}
  .cq-card-out{font-size:.26rem;padding:.18rem .22rem;}
  .cq-card-ico{width:.8rem;height:.8rem;}
  .cq-anchor{padding:.28rem .3rem;min-width:100%;}
  .cq-anchor-t{font-size:.3rem;}
  .cq-anchor-d{font-size:.24rem;}
  .cq-anchor-ico{width:.72rem;height:.72rem;}
  .cq-stats{flex-wrap:wrap;gap:.2rem;margin-top:.4rem;}
  .cq-stat{flex:1 1 calc(50% - .1rem);padding:.3rem .2rem;}
  .cq-stat-n{font-size:.6rem;}
  .cq-stat-n i{font-size:.3rem;}
  .cq-stat-l{font-size:.26rem;}
  .cq-more-btn{height:.8rem;font-size:.3rem;padding:0 .5rem;}
  .cq-strip{padding:.36rem .32rem;}
  .cq-strip h3{font-size:.36rem;}
  .cq-strip p{font-size:.28rem;max-width:100%;}
  .cq-strip-act{width:100%;gap:.2rem;}
  .cq-strip-act .cq-btn{flex:1;}
  .cq-chip{font-size:.26rem;padding:.14rem .3rem;}
  .cq-skill-btn{height:.76rem;font-size:.28rem;}
  .cq-note{font-size:.26rem;}
  .cq-step{padding:.36rem .3rem;}
  .cq-step-n{width:.8rem;height:.8rem;font-size:.36rem;}
  .cq-step-time{font-size:.24rem;}
  .cq-step h3{font-size:.34rem;}
  .cq-step p,.cq-step-eg{font-size:.28rem;}
  .cq-code-b{font-size:.26rem;padding:.3rem;}
  .cq-code-h .cq-lang{font-size:.24rem;}
  .cq-copy{font-size:.26rem;padding:.1rem .26rem;}
  .cq-test{padding:.3rem;}
  .cq-test-h{font-size:.28rem;}
  .cq-test-cmd{font-size:.3rem;}
  .cq-test-hint{font-size:.26rem;}
  .cq-faq-q{font-size:.3rem;padding:.3rem .32rem;}
  .cq-faq-a-in{font-size:.28rem;padding:0 .32rem .3rem;}
  .cq-cta{padding:1rem 0;}
  .cq-cta-box h2{font-size:.44rem;}
  .cq-cta-box>p{font-size:.28rem;}
  .cq-form{padding:.4rem .32rem;}
  .cq-frow{flex-direction:column;gap:.2rem;}
  .cq-fg label{font-size:.28rem;}
  .cq-fg input,.cq-fg textarea{font-size:.29rem;padding:.22rem .24rem;}
  .cq-submit{height:.9rem;font-size:.32rem;}
  .cq-form-note{font-size:.24rem;}
  .cq-toast{font-size:.28rem;bottom:1.9rem;}
  .cq-dock{bottom:.34rem;padding:.09rem;gap:.03rem;}
  .cq-dock a{padding:.15rem .22rem;font-size:.26rem;gap:.07rem;}
  .cq-dock a svg{width:.28rem;height:.28rem;}
}