/* v5 UI corrections requested 2026-09-17 */
/* Top navigation gets a real white base; existing labels/routes are unchanged. */
.main-header{
  background:#fff!important;
  box-shadow:0 1px 8px rgba(31,52,76,.08)!important;
}
.main-header .logo-text{
  color:#2c3e50!important;
  text-shadow:none!important;
}
.main-header .nav-link{
  color:#4d5d6c!important;
  text-shadow:none!important;
}
.main-header .nav-link:hover,
.main-header .nav-link.router-link-active{
  color:#673ae1!important;
}

/* Show the actual service icon artwork rather than filtering it into a hollow ring. */
/*.service-icon{
  width:50px!important;
  height:50px!important;
  padding:0!important;
  background:transparent!important;
  border-radius:50%!important;
}
.service-icon-img{
  width:50px!important;
  height:50px!important;
  object-fit:contain!important;
  filter:none!important;
}
.service-card:hover .service-icon{
  background:transparent!important;
}
.service-icon-img{
  width:50px!important;
  height:50px!important;
  object-fit:contain!important;
  filter:none!important;
}

/* 首页终端服务：直接显示原始 PNG 图标 */
.service-card .service-icon{
  width:50px!important;
  height:50px!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
}

.service-card .service-icon-img{
  width:50px!important;
  height:50px!important;
  object-fit:contain!important;
  filter:none!important;
}

.service-card:hover .service-icon{
  background:transparent!important;
}

/* AI tab uses the original Vue card as its base. Only spacing/text wrapping is custom. */
.ai-layout-nav-item{
  margin-top:28px!important;
  width:100%!important;
}
.ai-layout-nav-item .tech-nav-text{
  line-height:1.35!important;
}

.ai-layout-panel{display:none;animation:aiPanelIn .18s ease-out}
.ai-layout-panel.active{display:block}
@keyframes aiPanelIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}

.ai-showcase{font-family:'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif}
.ai-showcase *{box-sizing:border-box}
.ai-showcase-head{position:relative;margin-bottom:26px}
.ai-showcase-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#3498db;font-size:12px;font-weight:600;letter-spacing:2px;margin-bottom:10px}
.ai-showcase-eyebrow:before{content:'';width:24px;height:2px;background:linear-gradient(90deg,#3498db,#6c5ce7);border-radius:2px}
.ai-showcase-title{font-size:2rem;line-height:1.2;font-weight:400;color:#26384a;margin:0 0 16px}
.ai-project-meta{max-width:850px;color:#617184;font-size:14px;line-height:1.9;background:#fff;border:1px solid #e5eaf0;border-radius:8px;padding:15px 18px;margin-bottom:26px}
.ai-project-meta strong{color:#34495e;font-weight:600}
.ai-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ai-demo-card{background:#fff;border:1px solid #e5eaf0;border-radius:12px;overflow:hidden;box-shadow:0 8px 26px rgba(30,60,90,.07);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ai-demo-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(38,88,140,.12);border-color:#d6e6f5}
.ai-demo-preview{position:relative;height:265px;background:#0d131c;overflow:hidden;border-bottom:1px solid #e8edf3}
.ai-demo-preview iframe{position:absolute;left:0;top:0;width:142%;height:142%;border:0;transform:scale(.705);transform-origin:0 0;pointer-events:none;background:#0b1017}
.ai-demo-preview:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,17,28,.22));pointer-events:none}
.ai-demo-preview-badge{position:absolute;left:16px;top:16px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(10,20,32,.78);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:11px;letter-spacing:1px}
.ai-demo-body{padding:22px 22px 24px}
.ai-demo-kicker{font-size:12px;color:#3498db;font-weight:600;letter-spacing:.7px;margin-bottom:7px}
.ai-demo-title{font-size:20px;color:#27394b;font-weight:500;margin:0 0 9px;line-height:1.35}
.ai-demo-text{color:#657587;font-size:14px;line-height:1.75;margin:0 0 16px;min-height:74px}
.ai-demo-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.ai-demo-tag{
  padding:5px 9px;
  border-radius:5px;
  background:#f2f7fb;
  color:#54718d;
  border:1px solid #e1ebf3;
  font-size:11px
}
.ai-demo-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ai-demo-link{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 17px;border-radius:5px;background:#3498db;color:#fff;font-size:13px;font-weight:500}
.ai-demo-link:hover{background:#2980b9}
.ai-demo-hint{color:#94a0ad;font-size:11px}
.ai-showcase-foot{display:flex;align-items:center;gap:8px;margin-top:17px;color:#8996a4;font-size:12px}
.ai-showcase-foot:before{content:'';width:7px;height:7px;border-radius:50%;background:#43b581;box-shadow:0 0 0 4px rgba(67,181,129,.09)}

.ai-demo-overlay{position:fixed;inset:0;z-index:99999;display:none;background:#0a0f16}
.ai-demo-overlay.open{display:flex;flex-direction:column}
.ai-demo-overlay-bar{height:52px;flex:0 0 52px;display:flex;align-items:center;gap:12px;padding:0 14px;background:#111923;color:#eaf1f8;border-bottom:1px solid #263342}
.ai-demo-overlay-back,.ai-demo-overlay-tab{height:34px;border:1px solid #33465a;border-radius:5px;background:#182430;color:#d8e2ed;padding:0 13px;cursor:pointer;font-size:13px}
.ai-demo-overlay-tabs{display:flex;align-items:center;gap:8px}
.ai-demo-overlay-tab{background:#151f2a}
.ai-demo-overlay-tab.active{background:#203044;border-color:#4aa3ff;color:#fff;box-shadow:inset 0 -2px 0 #4aa3ff}
.ai-demo-overlay-hint{margin-left:auto;color:#91a1b2;font-size:11px}
.ai-demo-overlay-frame{width:100%;height:calc(100% - 52px);border:0;background:#080b10;display:block}
body.ai-demo-open{overflow:hidden}
body.ai-demo-open{
  overflow:hidden;
}

/* AI-Layout 标签：桌面端显示蓝色左边沿 */
.ai-layout-nav-item{
  border-left:4px solid #3498db!important;
  transition:all .2s ease!important;
}

/* 平板/小屏 */
@media(max-width:992px){
  .ai-layout-nav-item{
    margin-top:12px!important;
  }

  .ai-showcase-grid{
    grid-template-columns:1fr;
  }

  .ai-demo-preview{
    height:310px;
  }
}

/* 手机 */
@media(max-width:576px){
  .ai-showcase-title{
    font-size:1.6rem;
  }

  .ai-demo-preview{
    height:235px;
  }

  .ai-demo-body{
    padding:18px;
  }

  .ai-demo-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .ai-demo-overlay-hint{
    display:none;
  }

  .ai-demo-overlay-tab,
  .ai-demo-overlay-back{
    padding:0 8px;
    font-size:11px;
  }
}


/* 修复首页晶圆代工查询图标：取消原站 active/hover 紫色底 */
.service-card .service-icon{
  background:transparent!important;
}

.service-card:hover .service-icon{
  background:transparent!important;
}

.service-card.active .service-icon{
  background:transparent!important;
}

.service-card .service-icon-img{
  display:block!important;
  width:50px!important;
  height:50px!important;
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
}


/* =========================================================
   首页轻量动态 Hero V1
   纯 CSS，无背景图片
   ========================================================= */

.home .hero-section,
.hero-section{
  position:relative!important;
  overflow:hidden!important;

  /* 彻底取消原 Banner 图片 */
  background-image:none!important;

  /* 保持网站现有蓝紫色体系 */
  background:
    radial-gradient(
      circle at 72% 48%,
      rgba(80,105,255,.20) 0%,
      rgba(80,105,255,.08) 22%,
      transparent 44%
    ),
    radial-gradient(
      circle at 38% 58%,
      rgba(108,82,231,.12) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #f8faff 0%,
      #eef2ff 46%,
      #e6ecff 100%
    )!important;

  background-color:#eef2ff!important;
}


/* ---------- 右侧芯片光晕 ---------- */

.hero-section::before{
  content:"";
  position:absolute;

  width:420px;
  height:420px;

  right:9%;
  top:50%;

  transform:translateY(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(52,152,219,.24) 0%,
      rgba(103,58,225,.14) 28%,
      rgba(103,58,225,.05) 48%,
      transparent 70%
    );

  pointer-events:none;

  animation:heroGlowMove 8s ease-in-out infinite alternate;
}


/* ---------- 抽象芯片核心 ---------- */

.hero-section::after{
  content:"";

  position:absolute;

  width:190px;
  height:190px;

  right:16%;
  top:50%;

  transform:
    translateY(-50%)
    rotate(45deg);

  border-radius:22px;

  border:2px solid rgba(103,58,225,.45);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.82),
      rgba(110,105,255,.13)
    );

  box-shadow:
    0 0 0 18px rgba(103,58,225,.035),
    0 0 0 38px rgba(52,152,219,.025),
    0 18px 55px rgba(70,90,190,.15),
    inset 0 0 30px rgba(103,58,225,.10);

  pointer-events:none;

  animation:heroChipFloat 7s ease-in-out infinite alternate;
}


/* ---------- 极轻量动画 ---------- */

@keyframes heroGlowMove{
  0%{
    transform:translate3d(-18px,-52%,0) scale(.96);
    opacity:.75;
  }

  100%{
    transform:translate3d(22px,-48%,0) scale(1.05);
    opacity:1;
  }
}


@keyframes heroChipFloat{
  0%{
    transform:
      translate3d(0,-52%,0)
      rotate(45deg);
  }

  100%{
    transform:
      translate3d(0,-47%,0)
      rotate(45deg);
  }
}


/* ---------- Hero 原有文字改成深蓝紫，适应浅色背景 ---------- */

.hero-section h1,
.hero-section h2,
.hero-section .hero-title{
  color:#27394b!important;
  text-shadow:none!important;
}

.hero-section p,
.hero-section .hero-subtitle{
  color:#64748b!important;
  text-shadow:none!important;
}


/* ---------- 手机端降低动画复杂度 ---------- */

@media(max-width:768px){

  .hero-section::before{
    width:280px;
    height:280px;
    right:-60px;
    opacity:.7;
  }

  .hero-section::after{
    width:120px;
    height:120px;
    right:8%;
    opacity:.65;
  }
}


/* ---------- 尊重系统“减少动画”设置 ---------- */

@media(prefers-reduced-motion:reduce){

  .hero-section::before,
  .hero-section::after{
    animation:none!important;
  }
}



/* =========================================================
   HOME CODE UI V2
   纯代码首页：Hero + 公司简介 + Footer
   ========================================================= */


/* ---------------------------------------------------------
   原首页 Hero 不再显示大图
   scoped hash 是当前首页构建版本
   --------------------------------------------------------- */

.hero-section[data-v-05a7e224]{
  background-image:none!important;
}


/* JS 成功建立新 Hero 后隐藏旧 Hero */

.home-code-source-hidden{
  display:none!important;
}


/* 被代码视觉替代的原始大图 */

.home-code-asset-hidden{
  display:none!important;
}



/* =========================================================
   HERO
   ========================================================= */

.home-code-hero{
  position:relative;
  min-height:570px;

  overflow:hidden;

  display:flex;
  align-items:center;

  background:
    radial-gradient(
      circle at 72% 44%,
      rgba(68,145,255,.18) 0,
      rgba(68,145,255,.08) 19%,
      transparent 43%
    ),
    radial-gradient(
      circle at 34% 76%,
      rgba(111,82,255,.11) 0,
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #fafcff 0%,
      #eef4ff 42%,
      #e9f0ff 72%,
      #f7faff 100%
    );

  isolation:isolate;
}


/* 淡淡的技术网格 */

.home-code-hero::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:-1;

  opacity:.23;

  background-image:
    linear-gradient(
      rgba(92,120,220,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(92,120,220,.08) 1px,
      transparent 1px
    );

  background-size:
    44px 44px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 24%,
      #000 80%,
      transparent
    );
}


/* 大面积柔光 */

.home-code-hero::after{
  content:"";

  position:absolute;

  width:720px;
  height:720px;

  right:2%;
  top:50%;

  transform:
    translateY(-50%);

  border-radius:50%;

  z-index:-1;

  background:
    radial-gradient(
      circle,
      rgba(79,138,255,.16),
      rgba(100,88,240,.07) 34%,
      transparent 69%
    );
}


/* 主体宽度 */

.hc-shell{
  width:min(
    1280px,
    calc(100% - 80px)
  );

  margin:0 auto;

  display:grid;

  grid-template-columns:
    minmax(360px,.88fr)
    minmax(520px,1.12fr);

  align-items:center;

  gap:30px;

  min-height:570px;
}


/* ---------------------------------------------------------
   Hero 左侧
   --------------------------------------------------------- */

.hc-copy{
  position:relative;

  z-index:3;

  padding-left:10px;
}


.hc-kicker{
  display:inline-flex;

  align-items:center;

  gap:10px;

  font-size:12px;

  font-weight:650;

  letter-spacing:3px;

  color:#6883bd;

  margin-bottom:17px;
}


.hc-kicker::before{
  content:"";

  width:30px;
  height:2px;

  border-radius:3px;

  background:
    linear-gradient(
      90deg,
      #47b4ff,
      #633cff
    );
}


.hc-title{
  margin:0;

  display:flex;

  flex-direction:column;

  gap:3px;

  font-size:
    clamp(
      44px,
      4.2vw,
      66px
    );

  line-height:1.08;

  font-weight:720;

  letter-spacing:-2px;

  color:#24316f;
}


.hc-title span:last-child{

  background:
    linear-gradient(
      90deg,
      #2949c9,
      #6041ef
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


.hc-subtitle{
  margin-top:23px;

  font-size:20px;

  letter-spacing:5px;

  color:#33415d;
}


.hc-actions{
  display:flex;

  gap:17px;

  margin-top:38px;
}


.hc-btn{
  min-width:150px;

  height:50px;

  border-radius:7px;

  padding:0 22px;

  font-size:15px;

  font-weight:600;

  cursor:pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.hc-btn:hover{
  transform:
    translateY(-2px);
}


.hc-btn-primary{
  border:0;

  color:white;

  background:
    linear-gradient(
      100deg,
      #613df2,
      #3e8df7
    );

  box-shadow:
    0 12px 28px
    rgba(70,75,225,.20);
}


.hc-btn-secondary{
  color:#553ae2;

  background:
    rgba(255,255,255,.62);

  border:
    1px solid
    rgba(88,64,225,.65);

  backdrop-filter:
    blur(6px);
}



/* ---------------------------------------------------------
   Hero 右侧
   --------------------------------------------------------- */

.hc-visual{
  position:relative;

  height:500px;

  min-width:0;

  z-index:2;
}


.hc-circuit{
  position:absolute;

  inset:50% auto auto 50%;

  transform:
    translate(-50%,-50%);

  width:100%;

  height:100%;

  overflow:visible;
}


.hc-circuit-lines path{
  fill:none;

  stroke:
    rgba(74,104,232,.52);

  stroke-width:1.4;

  vector-effect:
    non-scaling-stroke;
}


.hc-circuit-lines path:nth-child(3n){
  stroke:
    rgba(55,194,239,.47);
}


.hc-circuit-nodes circle{
  fill:#63d9ff;

  stroke:white;

  stroke-width:2;

  filter:
    drop-shadow(
      0 0 5px
      rgba(61,184,255,.9)
    );

  animation:
    hcNodePulse
    2.8s
    ease-in-out
    infinite;
}


.hc-node-2,
.hc-node-5{
  animation-delay:
    -.7s!important;
}


.hc-node-3,
.hc-node-4{
  animation-delay:
    -1.4s!important;
}


@keyframes hcNodePulse{

  0%,
  100%{
    opacity:.36;
  }

  50%{
    opacity:1;
  }

}



/* CORE 芯片 */

.hc-chip{
  position:absolute;

  left:50%;
  top:50%;

  width:190px;
  height:190px;

  transform:
    translate(-50%,-50%)
    rotate(45deg);

  border-radius:30px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(88,126,244,.20)
    );

  border:
    1px solid
    rgba(84,108,234,.35);

  box-shadow:
    0 0 0 15px
    rgba(115,136,255,.055),

    0 0 55px
    rgba(60,130,255,.28),

    0 30px 55px
    rgba(48,71,160,.17);

  animation:
    hcChipFloat
    6.5s
    ease-in-out
    infinite alternate;
}


.hc-chip-frame{
  position:absolute;

  border-radius:24px;

  pointer-events:none;
}


.hc-chip-frame-1{
  inset:13px;

  border:
    2px solid
    rgba(106,150,255,.60);

  box-shadow:
    inset 0 0 18px
    rgba(79,147,255,.18);
}


.hc-chip-frame-2{
  inset:27px;

  border:
    1px solid
    rgba(74,106,235,.55);
}


.hc-chip-core{
  position:absolute;

  inset:40px;

  border-radius:17px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  color:white;

  background:
    linear-gradient(
      135deg,
      #344ddd,
      #477cf8
    );

  box-shadow:
    inset 0 0 25px
    rgba(255,255,255,.22),

    0 0 26px
    rgba(59,115,255,.38);
}


.hc-chip-core strong{
  transform:
    rotate(-45deg);

  font-size:25px;

  letter-spacing:1px;
}


.hc-chip-core i{
  width:13px;
  height:13px;

  margin-top:17px;

  border:
    2px solid
    rgba(255,255,255,.90);

  transform:
    rotate(0deg);
}


@keyframes hcChipFloat{

  from{
    transform:
      translate(-50%,-52%)
      rotate(45deg);
  }

  to{
    transform:
      translate(-50%,-47%)
      rotate(45deg);
  }

}



/* Hero 标签 */

.hc-side-label{
  position:absolute;

  z-index:4;

  font-size:12px;

  font-weight:600;

  color:#43517a;

  letter-spacing:.4px;
}


.hc-label-ai{
  left:8%;
  top:31%;
}

.hc-label-chip{
  left:5%;
  top:42%;
}

.hc-label-data{
  left:3%;
  top:54%;
}


.hc-label-tech{
  right:0;
  top:21%;
}

.hc-label-intelligence{
  right:-4%;
  top:34%;
}

.hc-label-future{
  right:0;
  top:47%;
}

.hc-label-together{
  right:-1%;
  top:60%;
}



/* =========================================================
   公司简介左侧 Logo 视觉
   ========================================================= */

.home-code-about-host{
  position:relative!important;

  min-height:430px!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  overflow:visible!important;
}


.home-code-about-bg-host{
  background-image:none!important;
}


.home-code-about-visual{
  position:relative;

  width:100%;
  height:430px;

  min-width:360px;

  display:flex;

  align-items:center;
  justify-content:center;
}


/* 光晕 */

.hca-glow{
  position:absolute;

  width:310px;
  height:310px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(80,160,255,.17),
      rgba(101,80,244,.06) 42%,
      transparent 70%
    );

  filter:
    blur(7px);
}



/* 三层轨道 */

.hca-orbit{
  position:absolute;

  left:50%;
  top:50%;

  border-radius:50%;

  border:
    1px solid
    rgba(88,122,230,.18);

  transform:
    translate(-50%,-50%);
}


.hca-orbit::before{
  content:"";

  position:absolute;

  width:8px;
  height:8px;

  left:50%;
  top:-4px;

  margin-left:-4px;

  border-radius:50%;

  background:#66d4ff;

  box-shadow:
    0 0 12px
    rgba(70,191,255,.85);
}


.hca-orbit-1{
  width:230px;
  height:230px;
}


.hca-orbit-2{
  width:310px;
  height:310px;

  animation:
    hcaOrbit
    18s
    linear
    infinite;
}


.hca-orbit-3{
  width:380px;
  height:380px;

  animation:
    hcaOrbitReverse
    26s
    linear
    infinite;
}


@keyframes hcaOrbit{

  to{
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }

}


@keyframes hcaOrbitReverse{

  to{
    transform:
      translate(-50%,-50%)
      rotate(-360deg);
  }

}



/* Logo 展示基座 */

.hca-logo-stage{
  position:relative;

  z-index:5;

  width:235px;
  height:235px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,.96),
      rgba(226,237,255,.52) 54%,
      rgba(216,230,255,.19) 73%,
      transparent 74%
    );

  box-shadow:
    0 28px 45px
    rgba(75,96,180,.10);
}


.hca-logo-stage::after{
  content:"";

  position:absolute;

  width:195px;
  height:29px;

  left:50%;
  bottom:18px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(76,135,240,.19),
      transparent 68%
    );
}


.hca-logo-light{
  position:absolute;

  inset:34px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(105,179,255,.18),
      transparent 65%
    );

  animation:
    hcaLogoGlow
    4s
    ease-in-out
    infinite alternate;
}


@keyframes hcaLogoGlow{

  from{
    opacity:.50;
    transform:scale(.94);
  }

  to{
    opacity:1;
    transform:scale(1.06);
  }

}



/*
   使用网页本来就已经加载的 Logo，
   不额外增加大图请求。
   只用 CSS 改成淡蓝紫色。
*/

.hca-logo{
  position:relative;

  z-index:6;

  width:150px;
  max-height:190px;

  object-fit:contain;

  /*
    保持原 Logo 形状，
    只做淡蓝色演进
  */
  filter:
    grayscale(1)
    sepia(.25)
    saturate(6)
    hue-rotate(175deg)
    brightness(1.22)
    contrast(.92)

    drop-shadow(
      0 10px 14px
      rgba(77,104,230,.22)
    );
}



/* 公司简介 Logo 四个方向 */

.hca-label{
  position:absolute;

  display:flex;

  flex-direction:column;

  gap:4px;

  z-index:6;
}


.hca-label strong{
  color:#4868d8;

  font-size:17px;

  font-weight:650;
}


.hca-label span{
  color:#7787a4;

  font-size:12px;
}


.hca-label-data{
  left:4%;
  top:26%;
  text-align:right;
}


.hca-label-smart{
  left:4%;
  bottom:25%;
  text-align:right;
}


.hca-label-industry{
  right:3%;
  top:26%;
}


.hca-label-together{
  right:3%;
  bottom:25%;
}



/* 标签连接线 */

.hca-label::after{
  content:"";

  position:absolute;

  top:16px;

  width:55px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(82,100,230,.48)
    );
}


.hca-label-data::after,
.hca-label-smart::after{
  right:-67px;
}


.hca-label-industry::after,
.hca-label-together::after{
  left:-67px;

  transform:
    scaleX(-1);
}



/* =========================================================
   Footer：取消原大背景图
   ========================================================= */

.home-code-footer{
  position:relative!important;

  overflow:hidden!important;

  background-image:none!important;

  background:
    linear-gradient(
      135deg,
      #121a4b 0%,
      #19265f 46%,
      #27356e 100%
    )!important;
}


.home-code-footer::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.38;

  background:
    linear-gradient(
      120deg,
      transparent 0 46%,
      rgba(93,120,255,.18) 46.2%,
      transparent 46.5%
    ),
    linear-gradient(
      60deg,
      transparent 0 67%,
      rgba(61,190,240,.12) 67.2%,
      transparent 67.5%
    );
}


.home-code-footer::after{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-110px;
  top:-190px;

  border-radius:50%;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(80,116,255,.17),
      transparent 67%
    );
}


.home-code-footer img[
  src*="img_home_bottom"
]{
  display:none!important;
}



/* =========================================================
   Responsive
   ========================================================= */

@media(max-width:1100px){

  .hc-shell{
    width:
      calc(100% - 44px);

    grid-template-columns:
      .9fr 1.1fr;
  }


  .hc-title{
    font-size:
      clamp(
        40px,
        5vw,
        56px
      );
  }


  .hc-side-label{
    display:none;
  }

}



@media(max-width:820px){

  .home-code-hero{
    min-height:auto;
  }


  .hc-shell{
    min-height:auto;

    padding:
      60px 0 42px;

    grid-template-columns:1fr;
  }


  .hc-copy{
    text-align:center;

    padding:0;
  }


  .hc-kicker{
    justify-content:center;
  }


  .hc-title{
    font-size:46px;

    align-items:center;
  }


  .hc-subtitle{
    font-size:16px;
    letter-spacing:3px;
  }


  .hc-actions{
    justify-content:center;
  }


  .hc-visual{
    height:390px;
  }


  .hc-chip{
    width:155px;
    height:155px;
  }


  .hc-chip-core{
    inset:34px;
  }


  .home-code-about-visual{
    height:360px;
    min-width:0;
  }


  .home-code-about-host{
    min-height:360px!important;
  }


  .hca-orbit-3{
    width:320px;
    height:320px;
  }


  .hca-orbit-2{
    width:260px;
    height:260px;
  }


  .hca-logo-stage{
    width:200px;
    height:200px;
  }


  .hca-logo{
    width:125px;
  }

}



@media(max-width:560px){

  .hc-shell{
    width:
      calc(100% - 28px);

    padding-top:45px;
  }


  .hc-title{
    font-size:39px;
  }


  .hc-actions{
    flex-direction:column;

    align-items:center;
  }


  .hc-btn{
    width:200px;
  }


  .hc-visual{
    height:315px;
  }


  .hc-circuit{
    width:125%;
  }


  .hca-label{
    display:none;
  }


  .hca-orbit-3{
    width:270px;
    height:270px;
  }


  .home-code-about-visual{
    height:315px;
  }

}



/* =========================================================
   减少动画设置
   ========================================================= */

@media(
  prefers-reduced-motion:reduce
){

  .hc-chip,
  .hc-circuit-nodes circle,
  .hca-orbit-2,
  .hca-orbit-3,
  .hca-logo-light{
    animation:none!important;
  }

}

/* =========================================================
   公司简介 / 终端服务 分区
   ========================================================= */

.home-code-services-section{
  position:relative!important;

  margin-top:0!important;

  padding-top:76px!important;
  padding-bottom:78px!important;

  background:
    linear-gradient(
      180deg,
      #fbfcff 0%,
      #f7f9ff 48%,
      #fbfcff 100%
    )!important;
}


/* 公司简介与终端服务之间的渐变分割线 */

.home-section-divider{
  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:22px;

  display:flex;

  align-items:flex-start;
  justify-content:center;

  pointer-events:none;
}


.home-section-divider::before{
  content:"";

  position:absolute;

  left:50%;
  top:0;

  width:min(1000px,76%);
  height:1px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(113,145,235,.16) 12%,
      rgba(89,113,232,.42) 42%,
      rgba(89,113,232,.55) 50%,
      rgba(89,113,232,.42) 58%,
      rgba(113,145,235,.16) 88%,
      transparent 100%
    );
}


/* 中央小菱形 */

.home-section-divider span{
  position:relative;

  z-index:2;

  width:14px;
  height:14px;

  margin-top:-6px;

  transform:rotate(45deg);

  border-radius:2px;

  background:
    linear-gradient(
      135deg,
      #83c8ff,
      #6958ef
    );

  box-shadow:
    0 0 0 6px #fff,
    0 0 18px rgba(92,108,235,.34);
}


/* 菱形两侧小节点 */

.home-section-divider span::before,
.home-section-divider span::after{
  content:"";

  position:absolute;

  width:5px;
  height:5px;

  top:4px;

  border-radius:50%;

  background:#b9c9fb;

  box-shadow:
    0 0 8px rgba(95,123,235,.35);
}


.home-section-divider span::before{
  left:-30px;
}


.home-section-divider span::after{
  right:-30px;
}


/* 让终端服务标题与分隔线关系更紧凑 */

.home-code-services-section h2,
.home-code-services-section .section-title{
  position:relative;

  margin-top:0!important;
}


/* 卡片保持白色，从浅背景中浮出来 */

.home-code-services-section .service-card{
  background:#fff!important;

  border:
    1px solid
    rgba(74,95,145,.10)!important;

  box-shadow:
    0 8px 24px
    rgba(50,72,125,.055)!important;
}


.home-code-services-section .service-card:hover{
  box-shadow:
    0 13px 30px
    rgba(63,91,170,.10)!important;
}


/* 手机 */

@media(max-width:768px){

  .home-code-services-section{
    padding-top:58px!important;
    padding-bottom:58px!important;
  }

  .home-section-divider::before{
    width:86%;
  }

}


/* =========================================================
   产品介绍页
   纯代码 Banner + 晶核一号视觉优化
   ========================================================= */

.product-code-source-hidden{
  display:none!important;
}


/* =========================================================
   产品 Banner
   ========================================================= */

.product-code-hero{
  position:relative;

  min-height:350px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 72% 46%,
      rgba(74,145,255,.16),
      transparent 34%
    ),

    radial-gradient(
      circle at 30% 72%,
      rgba(103,73,238,.08),
      transparent 32%
    ),

    linear-gradient(
      135deg,
      #fbfdff 0%,
      #f0f5ff 45%,
      #e9f1ff 100%
    );

  border-bottom:
    1px solid
    rgba(76,105,180,.08);

  isolation:isolate;
}


/* 很淡的网格 */

.product-code-hero::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  opacity:.30;

  background-image:

    linear-gradient(
      rgba(92,120,220,.07) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(92,120,220,.07) 1px,
      transparent 1px
    );

  background-size:
    46px 46px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 18%,
      #000 84%,
      transparent
    );
}



.pch-shell{
  width:min(
    1280px,
    calc(100% - 72px)
  );

  min-height:350px;

  margin:0 auto;

  display:grid;

  grid-template-columns:
    minmax(390px,.9fr)
    minmax(520px,1.1fr);

  align-items:center;

  gap:28px;
}



/* ---------- 左侧 ---------- */

.pch-copy{
  position:relative;

  z-index:3;

  padding-left:8px;
}


.pch-kicker{
  display:flex;

  align-items:center;

  gap:14px;

  margin-bottom:16px;

  color:#7083b4;

  font-size:13px;

  font-weight:650;

  letter-spacing:1px;
}


.pch-kicker span{
  width:44px;
  height:2px;

  border-radius:2px;

  background:
    linear-gradient(
      90deg,
      #47b5ff,
      #6240f1
    );
}


.pch-title{
  margin:0;

  display:flex;

  gap:28px;

  align-items:baseline;

  font-size:
    clamp(
      42px,
      4vw,
      62px
    );

  line-height:1.08;

  font-weight:730;

  letter-spacing:-2px;

  color:#17264d;
}


.pch-title span:first-child,
.pch-title span:last-child{

  background:
    linear-gradient(
      90deg,
      #5a42ef,
      #182d5d 78%
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


.pch-subtitle{
  margin-top:22px;

  color:#263d6a;

  font-size:20px;

  letter-spacing:7px;
}


.pch-note{
  margin-top:31px;

  display:flex;

  align-items:center;

  gap:12px;

  color:#7182a2;

  font-size:15px;
}


.pch-note i{
  width:40px;
  height:2px;

  border-radius:2px;

  background:
    linear-gradient(
      90deg,
      #4faeff,
      #6345f0
    );
}



/* ---------- 右侧纯代码芯片 ---------- */

.pch-visual{
  position:relative;

  height:320px;

  min-width:0;
}


.pch-circuit{
  position:absolute;

  inset:
    50% auto auto 50%;

  width:100%;
  height:100%;

  transform:
    translate(-50%,-50%);

  overflow:visible;
}


.pch-circuit path{
  fill:none;

  stroke:
    rgba(71,104,230,.42);

  stroke-width:1.3;

  vector-effect:
    non-scaling-stroke;
}


.pch-circuit path:nth-child(2n){

  stroke:
    rgba(63,195,239,.42);
}


.pch-circuit circle{
  fill:#66d9ff;

  stroke:#fff;

  stroke-width:2;

  filter:
    drop-shadow(
      0 0 5px
      rgba(77,180,255,.9)
    );

  animation:
    pchNode
    2.8s
    ease-in-out
    infinite alternate;
}


@keyframes pchNode{

  from{
    opacity:.38;
  }

  to{
    opacity:1;
  }

}



/* 芯片堆叠 */

.pch-chip-stack{
  position:absolute;

  left:53%;
  top:50%;

  width:220px;
  height:160px;

  transform:
    translate(-50%,-50%)
    rotateX(58deg)
    rotateZ(-45deg);

  transform-style:
    preserve-3d;

  filter:
    drop-shadow(
      0 28px 28px
      rgba(54,82,170,.16)
    );

  animation:
    pchFloat
    6s
    ease-in-out
    infinite alternate;
}


@keyframes pchFloat{

  from{

    transform:
      translate(-50%,-52%)
      rotateX(58deg)
      rotateZ(-45deg);

  }

  to{

    transform:
      translate(-50%,-47%)
      rotateX(58deg)
      rotateZ(-45deg);

  }

}


.pch-chip-layer,
.pch-chip-core{
  position:absolute;

  left:50%;
  top:50%;

  width:190px;
  height:130px;

  border-radius:18px;

  transform:
    translate(-50%,-50%);
}


.pch-layer-1{

  background:
    linear-gradient(
      145deg,
      #f8fbff,
      #dce8ff
    );

  border:
    1px solid
    rgba(86,119,220,.18);

  box-shadow:
    0 10px 18px
    rgba(50,77,150,.10);
}


.pch-layer-2{

  transform:
    translate(-50%,-58%);

  background:
    linear-gradient(
      145deg,
      #fff,
      #eaf1ff
    );

  border:
    1px solid
    rgba(86,119,220,.17);
}


.pch-layer-3{

  transform:
    translate(-50%,-66%);

  background:
    linear-gradient(
      145deg,
      #f8fbff,
      #dce8ff
    );

  border:
    1px solid
    rgba(86,119,220,.18);
}


.pch-chip-core{
  width:128px;
  height:88px;

  transform:
    translate(-50%,-92%);

  display:flex;

  align-items:center;
  justify-content:center;

  color:#fff;

  font-size:22px;

  font-weight:700;

  letter-spacing:2px;

  background:
    linear-gradient(
      135deg,
      #5572ee,
      #3b8cf8
    );

  box-shadow:

    inset 0 0 18px
    rgba(255,255,255,.22),

    0 0 24px
    rgba(66,127,255,.28);
}



/* 四个浮动标签 */

.pch-label{
  position:absolute;

  z-index:4;

  padding:
    8px 14px;

  border-radius:5px;

  color:#fff;

  font-size:12px;

  letter-spacing:.5px;

  background:
    linear-gradient(
      135deg,
      rgba(70,105,235,.88),
      rgba(66,151,244,.78)
    );

  box-shadow:
    0 8px 18px
    rgba(63,88,175,.10);
}


.pch-label-ai{
  left:12%;
  top:13%;
}

.pch-label-data{
  left:8%;
  bottom:16%;
}

.pch-label-design{
  right:4%;
  top:16%;
}

.pch-label-future{
  right:1%;
  bottom:20%;
}



/* =========================================================
   产品页主体
   ========================================================= */

body.products-code-ready{
  background:#f8faff;
}


/* 左边两个标签 */

body.products-code-ready
.tech-sidebar
.tech-nav-item{

  position:relative;

  min-height:56px;

  display:flex!important;

  align-items:center!important;

  gap:13px;

  padding:
    0 18px!important;

  border:
    1px solid
    rgba(86,112,180,.08)!important;

  border-left:
    3px solid
    transparent!important;

  border-radius:
    7px!important;

  background:
    rgba(255,255,255,.82)!important;

  box-shadow:
    0 6px 18px
    rgba(45,68,125,.035)!important;
}


body.products-code-ready
.tech-sidebar
.tech-nav-item.active{

  border-color:
    rgba(68,147,237,.25)!important;

  border-left-color:
    #3498db!important;

  background:#fff!important;

  box-shadow:
    0 8px 20px
    rgba(55,92,170,.065)!important;
}



/* 左侧小图标 */

.pc-nav-icon{
  position:relative;

  flex:
    0 0 24px;

  width:24px;
  height:24px;
}


.pc-nav-icon-chip{

  border:
    2px solid
    #3498db;

  border-radius:4px;

  box-shadow:
    inset 0 0 0 4px
    rgba(52,152,219,.08);
}


.pc-nav-icon-chip::before,
.pc-nav-icon-chip::after{
  content:"";

  position:absolute;

  background:#3498db;
}


.pc-nav-icon-chip::before{
  left:-5px;
  right:-5px;

  top:10px;

  height:2px;
}


.pc-nav-icon-chip::after{
  top:-5px;
  bottom:-5px;

  left:10px;

  width:2px;
}



/* AI-Layout 小图标 */

.pc-nav-icon-ai::before,
.pc-nav-icon-ai::after{
  content:"";

  position:absolute;
}


.pc-nav-icon-ai::before{
  left:10px;
  top:2px;

  width:4px;
  height:4px;

  border-radius:50%;

  background:#3498db;

  box-shadow:
    -8px 16px 0 #3498db,
    8px 16px 0 #3498db;
}


.pc-nav-icon-ai::after{
  left:4px;
  top:8px;

  width:16px;
  height:12px;

  border-left:
    2px solid
    #3498db;

  border-right:
    2px solid
    #3498db;

  border-bottom:
    2px solid
    #3498db;

  transform:
    skewY(-28deg);
}



/* 晶核一号标题下面说明 */

.pc-product-subtitle{
  margin:
    -5px 0 22px;

  color:#7a89a2;

  font-size:14px;

  line-height:1.6;
}



/* 产品特性 */

.pc-product-feature{
  position:relative;

  margin:
    8px 0;

  padding-left:22px;

  color:#33445f;

  font-size:14px;

  line-height:1.65;
}


.pc-product-feature::before{
  content:"";

  position:absolute;

  left:2px;
  top:.72em;

  width:7px;
  height:7px;

  margin-top:-3px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #6042f1,
      #3498db
    );

  box-shadow:
    0 0 0 4px
    rgba(77,98,235,.055);
}


.pc-extra-features{
  margin-top:4px;
}



/* 下载按钮 */

.pc-download-btn{
  border:0!important;

  border-radius:6px!important;

  color:#fff!important;

  background:
    linear-gradient(
      100deg,
      #3a91e8,
      #238bd7
    )!important;

  box-shadow:
    0 9px 22px
    rgba(45,137,215,.18)!important;

  transition:
    transform .2s ease,
    box-shadow .2s ease!important;
}


.pc-download-btn:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 13px 26px
    rgba(45,137,215,.24)!important;
}



/*
  晶核一号原 Logo：
  不换图、不改颜色、不改形状
*/

.pc-original-logo{

  filter:none!important;

  object-fit:contain!important;
}


.pc-original-logo-wrap{

  background:
    #f7f9fd!important;

  border:
    1px solid
    rgba(71,95,155,.08)!important;

  border-radius:
    8px!important;
}



/* =========================================================
   Responsive
   ========================================================= */

@media(max-width:900px){

  .pch-shell{

    width:
      calc(100% - 36px);

    grid-template-columns:1fr;

    padding:
      44px 0 30px;
  }


  .product-code-hero{
    min-height:auto;
  }


  .pch-copy{
    text-align:center;
  }


  .pch-title{
    justify-content:center;

    font-size:44px;
  }


  .pch-kicker,
  .pch-note{
    justify-content:center;
  }


  .pch-visual{
    height:280px;
  }

}



@media(max-width:560px){

  .pch-title{
    flex-direction:column;

    gap:4px;

    align-items:center;

    font-size:38px;
  }


  .pch-subtitle{
    font-size:15px;

    letter-spacing:4px;
  }


  .pch-label{
    display:none;
  }


  .pch-chip-stack{

    transform:
      translate(-50%,-50%)
      rotateX(58deg)
      rotateZ(-45deg)
      scale(.82);
  }

}



@media(
  prefers-reduced-motion:reduce
){

  .pch-chip-stack,
  .pch-circuit circle{

    animation:none!important;
  }

}

/* 产品介绍页顶区下移，避免被顶部白色导航遮住 */
.product-code-hero{
  margin-top:72px !important;
}

.product-code-hero .pch-shell{
  padding-top:18px !important;
}

/* 小屏稍微收一点 */
@media (max-width: 768px){
  .product-code-hero{
    margin-top:60px !important;
  }

  .product-code-hero .pch-shell{
    padding-top:12px !important;
  }
}

/* ===== SVG 线条流动小球 ===== */
.svg-flow-dot{
  fill:#79d7ff;
  opacity:.95;
  filter:drop-shadow(0 0 6px rgba(121,215,255,.65));
}

.svg-flow-dot.is-small{
  r:3.5;
}

.svg-flow-dot.is-mid{
  r:4.5;
}


/* 减少动画用户偏好兼容 */
@media (prefers-reduced-motion: reduce){
  .hca-inner-sweep{
    animation:none;
  }
}


/* ===== 最内圈小球：底部 90° 范围来回滑动 ===== */

/* 最内圈整体只负责带着小球旋转 */
.hca-orbit-1{
  z-index:7;

  animation:
    hcaInnerBottomSweep
    3.2s
    ease-in-out
    infinite
    alternate !important;
}


/* 原本在圆顶部的小球，挪到圆底部 */
.hca-orbit-1::before{
  top:auto !important;
  bottom:-4px !important;

  left:50% !important;

  width:9px !important;
  height:9px !important;

  margin-left:-4.5px !important;

  background:#68d7ff !important;

  box-shadow:
    0 0 0 4px rgba(104,215,255,.10),
    0 0 12px rgba(70,190,255,.65) !important;
}


/*
  底部 90°：
  -45° ← 6点钟 → +45°
*/
@keyframes hcaInnerBottomSweep{

  from{
    transform:
      translate(-50%,-50%)
      rotate(-45deg);
  }

  to{
    transform:
      translate(-50%,-50%)
      rotate(45deg);
  }

}