@charset "utf-8";
/* ===========================================================================
   SynaVoice 统一视觉规范  v1.1
   ---------------------------------------------------------------------------
   目标：把全站色彩收敛到「深蓝黑 #121C27 + 品牌蓝 #1A6BFF + 品牌青 #00B5AD」
         三色体系，消除模板原带的霓虹色、紫罗兰插画、多色标签带来的割裂感。
   原则：只收敛视觉表现（色彩 / 圆角 / 层次 / 断行），不改动版式骨架与栅格宽度。
   加载：必须置于 css/style.css 之后。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. 设计令牌
   --------------------------------------------------------------------------- */
:root{
  /* —— 覆盖模板原带霓虹色（违和主因）——
     --theme-color3 原为荧光绿 #1ede8f，全站 80 处引用（文字 hover / 按钮底 / 边框）
     --theme-color4 原为荧光黄 #d3ff55 */
  --theme-color3:#1A6BFF;
  --theme-color3-rgb:26, 107, 255;
  --theme-color3-text-color:#fff;
  --theme-color4:#00B5AD;
  --theme-color4-rgb:0, 181, 173;

  /* —— SynaVoice 品牌色板 —— */
  --sv-blue:#1A6BFF;
  --sv-blue-dark:#0E52CC;
  --sv-blue-deep:#0F2A5C;
  --sv-blue-soft:#EDF3FF;
  --sv-blue-line:#D6E4FF;
  --sv-teal:#00B5AD;
  --sv-teal-soft:#E6F7F6;
  --sv-ink:#121C27;
  --sv-ink-2:#223035;
  --sv-body:#2A333D;
  --sv-muted:#6B7683;
  --sv-line:#E6EBF2;
  --sv-surface:#F7F9FC;

  --sv-radius:14px;
  --sv-radius-sm:10px;
  --sv-shadow:0 8px 28px rgba(16, 40, 94, .07);
  --sv-shadow-hover:0 16px 40px rgba(16, 40, 94, .13);
  --sv-ease:cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------------------
   2. 「12 项核心技术优势」卡片
   原问题：紫罗兰插图（主色相 255°）+ 一层 35% 深色遮罩，导致插图发灰发闷
   --------------------------------------------------------------------------- */
.business-block_one .content .image{
  background:linear-gradient(140deg, #F8FBFF 0%, #EDF3FF 100%);
  border-radius:var(--sv-radius-sm);
}
/* 移除原 35% var(--theme-color1) 压暗遮罩 */
.business-block_one .content .image::before{
  background-color:transparent;
  opacity:0;
}
/* 插图：由紫罗兰 255° 旋转到品牌蓝区间，并适度提饱和、提对比 */
.business-block_one .content .image img{
  -webkit-filter:hue-rotate(-28deg) saturate(1.12) contrast(1.08);
          filter:hue-rotate(-28deg) saturate(1.12) contrast(1.08);
}
.business-block_one .inner{
  border-radius:var(--sv-radius);
}

/* ---------------------------------------------------------------------------
   3. 分类标签：由 4 色（绿 161° / 橙 35° / 玫红 340° / 蓝 210°）
      收敛为品牌蓝单色
   --------------------------------------------------------------------------- */
.cat-label,
.business-block_one .content .cat-label,
.business-block_one .content .cat-label.cat-voice,
.business-block_one .content .cat-label.cat-sound,
.business-block_one .content .cat-label.cat-emotion,
.business-block_one .content .cat-label.cat-deploy{
  color:var(--sv-blue);
  letter-spacing:.6px;
}

/* ---------------------------------------------------------------------------
   4. 首屏能力卡图标：统一线性风格后，去掉 hover 时的 180° 翻转
      （原 .service-block_one .inner:hover .icon 会整体镜像翻转，观感跳脱）
   --------------------------------------------------------------------------- */
.service-block_one .inner:hover .icon{
  -webkit-transform:none;
          transform:none;
}
.service-block_one .icon img,
.service-block_one .icon svg{
  width:72px;
  height:72px;
  -o-object-fit:contain;
     object-fit:contain;
  display:inline-block;
  vertical-align:middle;
}
.service-block_one .icon{
  color:var(--sv-blue);
  -webkit-transition:opacity 400ms var(--sv-ease);
          transition:opacity 400ms var(--sv-ease);
}

/* ---------------------------------------------------------------------------
   5. 数字统计卡（.about-count）
   原问题：font-size 60px 撑爆 1/3 栅格列，导致「100万 / +小时」「5大行 / 业」
          「300m / s」被迫断行，观感破碎。降到 42px 并禁止换行。
   --------------------------------------------------------------------------- */
.about-section .counter-outer .about-count{
  font-size:42px;
  white-space:nowrap;
}
@media (max-width: 575.98px){
  .about-section .counter-outer .about-count{
    font-size:32px;
  }
}
.about-section .counter-outer .about-count .text{
  white-space:normal;
}
/* 左侧竖条装饰随之等比缩小（原按 60px 字号定位） */
.about-section .counter-outer .about-count .count-text::before{
  top:8px;
  height:18px;
  background-color:var(--sv-blue);
}
/* 保证紧接数字的文本（万+小时 / 大行业 / ms）与数字同行 */
.about-section .counter-outer .about-count .count-text{
  padding-left:22px;
}

/* 核心技术指标条（内联 flex 布局）数字同样禁止断行 */
.metrics-highlights > div > div:first-child{
  white-space:nowrap;
}

/* ---------------------------------------------------------------------------
   6. 标题排版：启用均衡换行，消除「孤独字」（如末尾单字成行）
   --------------------------------------------------------------------------- */
.sec-title h2,
.about-section .left-box h2,
h2.text_invert{
  text-wrap:balance;
}

/* ---------------------------------------------------------------------------
   7. 交互细节：次级按钮 / 阅读更多 / 链接 hover 统一走品牌蓝
   --------------------------------------------------------------------------- */
a.read-more:hover,
.service-block_one .title a:hover,
h5.title a:hover{
  color:var(--sv-blue);
}

/* ---------------------------------------------------------------------------
   8. 装饰性元素统一色相
   .tech-shape-* 为模板的低透明度科技装饰线框，原图多为紫色系，
   统一旋转到品牌蓝区间，避免与主色打架。
   --------------------------------------------------------------------------- */
[class*="tech-shape-"]{
  -webkit-filter:hue-rotate(-28deg) saturate(1.15);
          filter:hue-rotate(-28deg) saturate(1.15);
}

/* .vector-1~4 引用的是近纯白的装饰图（service-vector-*.png 等），
   在深色区块上以 0.28 透明度渲染成突兀的「浅灰方块」，观感像图片加载失败。
   该组为纯装饰、无信息承载，直接隐藏。 */
.vector-1,
.vector-2,
.vector-3,
.vector-4{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   9. 清理模板残留：banner 右下角的灰白棋盘格（images/banner/boxes.png）
      在深蓝 banner 上呈现为突兀的「马赛克方块」，视觉上像图片加载失败。
   --------------------------------------------------------------------------- */
.boxes{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   10. 评分星级：模板原用红 #e52421 / 橙 #ff9728，与蓝青主色系冲突，
       统一为品牌蓝。（涉及 page-about / page-testimonial / index-2 / page-services）
   --------------------------------------------------------------------------- */
.stars,
.stars *,
.testimonial-one .total-reviews .reviews-inner .stars,
.testimonial-block_two .inner .upper-box .rating .stars,
.banner-three .outer-box .reviews .stars,
.client-block_one .content-box .lower-box .rating{
  color:var(--sv-blue);
}