/* ==========================================================================
   美洽 · 官网首页（第三版）样式
   组织方式：设计变量 → 基础复位 → 通用元件 → 页面分区（自上而下）
   命名约定：区块__元素--修饰（语义化），全站仅此一份样式表
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
  --ink: #040F42;            /* 主文字（深靛蓝） */
  --mut: #606787;            /* 次文字（灰蓝） */
  --pri: #1880FF;            /* 品牌主色 */
  --sky: #35B7FF;            /* 渐变浅色端 */
  --pnk: #FF73F6;            /* 标题渐变尾端 */
  --soft: #E7F2FF;           /* 浅蓝底 */
  --dot: #C9E3FF;            /* 轮播未选中点 */
  --line: #CDCFD9;           /* 细边框 */
  --grad-btn: linear-gradient(90deg, #35B7FF 0%, #1880FF 100%);
  --grad-hero: linear-gradient(27.92deg, #35B7FF 0%, #1880FF 69%, #FF73F6 100%);
  --grad-lang: linear-gradient(90deg, #EEEFF7 0%, #E2F4FC 100%);
  --shadow-card: 0 50px 36px -36px rgba(24, 128, 255, .20);
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --font-stack: "PingFang SC", -apple-system, "SF Pro", Arial, "Microsoft YaHei", sans-serif;
}

/* ---------- 2. 基础复位 ---------- */
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-stack); color: var(--ink); background: #fff; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; padding: 0; }
sup { line-height: 0; }

/* ---------- 3. 通用元件 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 24px; border-radius: 999px;
  font-size: 16px; white-space: nowrap; width: fit-content;
  transition: opacity .2s ease-in-out;
}
.btn:hover { opacity: .8; }
.btn--soft { background: var(--soft); color: var(--pri); }
.btn--line { background: transparent; color: var(--pri); border: 1px solid var(--pri); }
.btn--solid { background: var(--grad-btn); color: #fff; }
.btn--plain { background: transparent; color: var(--ink); padding-left: 4px; }

/* 滚动入场（IntersectionObserver 驱动，替代原 AOS） */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 100px, 0); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 走马灯关键帧（横向 logo / 纵向品牌墙） */
@keyframes pan-x {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - clamp(10rem, 1rem + 30vmin, 25rem) / 10)); }
}
@keyframes pan-y {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ---------- 4. 顶栏 ---------- */
.topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; color: #fff; }
.topbar__inner { position: relative; display: flex; align-items: center; height: 90px; padding: 0 24px; }
.topbar__left { position: absolute; left: 24px; display: flex; align-items: center; }
.brand img { width: 90px; height: 45px; }

.langpill {
  position: relative; margin-left: 16px; cursor: pointer;
  display: flex; align-items: center; padding: 6px 16px;
  background: rgba(255, 255, 255, .75); border-radius: 28px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.langpill__cur { font-size: 16px; font-weight: 500; color: #374151; transition: color .2s; }
.langpill__cur:hover { color: #40A9FF; }
.langpill__drop {
  position: absolute; top: calc(100% - 32px); left: 0;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: all .2s ease-in-out;
}
.langpill__box {
  position: absolute; top: 40px; left: 8px; z-index: 20;
  width: 156px; background: #fff; border-radius: 8px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .06);
}
.langpill__box ul { padding: 8px 16px; height: 100%; }
.langpill__box li { padding: 16px; cursor: pointer; font-size: 16px; color: var(--ink); }
.langpill__box li.is-active { background: var(--grad-lang); border-radius: 12px; color: var(--pri); line-height: 22px; }

.topbar__mid { flex: 1; display: flex; justify-content: center; }
.menu { position: relative; }
.menu__bar {
  display: flex; align-items: center; padding: 8px;
  background: rgba(255, 255, 255, .75); border-radius: 28px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.menu__item {
  position: relative; padding: 6px 16px; border-radius: 999px;
  font-size: 16px; font-weight: 500; color: #374151; cursor: pointer;
  transition: color .2s; display: flex; align-items: center;
}
.menu__item:hover { color: #40A9FF; }
.menu__item svg { width: 16px; height: 16px; margin-left: 4px; fill: currentColor; transition: transform .2s; }
.menu__gap { width: 16px; }
.caret {
  display: inline-block; width: 8px; height: 8px; margin-left: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
main { display: flex; flex-direction: column; align-items: center; background: #fff; }

.topbar__right { position: absolute; right: 24px; }
.topbar__actions {
  display: flex; align-items: center; gap: 8px; height: 56px;
  padding: 0 6px; background: rgba(255, 255, 255, .75); border-radius: 28px;
}

/* ---------- 5. 首屏 ---------- */
.hero {
  position: relative; width: 100%; overflow: hidden;
  background: url(../assets/nav_header_bg.362c8cb3.png) center / cover no-repeat;
}
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: 160px; }
.hero__title { display: flex; }
.hero__title h1 { font-size: 64px; font-weight: 600; line-height: 86px; }
.hero__grad {
  font-size: 64px; font-weight: 600; line-height: 84px;
  color: transparent; background: var(--grad-hero);
  -webkit-background-clip: text; background-clip: text;
}
.hero__sub { margin-top: 16px; font-size: 28px; line-height: 40px; text-align: center; }
.hero__clip { margin-top: 36px; display: flex; justify-content: center; }
.hero__clip video { width: 704px; height: 172px; }
.hero__actions { margin-top: 60px; display: flex; gap: 16px; }
.hero__marquee { margin: 64px 0; }

/* logo 走马灯 */
.marquee { width: 100%; height: 80px; display: flex; flex-direction: column; align-items: center; padding-bottom: 96px; }
.marquee__viewport { position: relative; display: flex; justify-content: center; width: 90vw; }
.marquee__groups {
  display: flex; overflow: hidden; width: 100%; user-select: none; gap: 140px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}
.marquee__row { display: flex; gap: 140px; align-items: center; animation: pan-x 50s linear infinite; }
.marquee__cell { width: 120px; height: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.marquee__cell img { width: 100px; }

/* ---------- 6. 数字带 ---------- */
.proof { width: 100%; display: flex; flex-direction: column; align-items: center; background: #fff; }
.proof__card { margin-top: 96px; width: 1188px; display: flex; flex-direction: column; align-items: center; border-radius: 24px; }
.proof__title { font-size: 28px; line-height: 40px; text-align: center; }
.proof__title b { position: relative; font-weight: 400; display: inline-block; }
.proof__title sup { position: absolute; right: -16px; top: 0; font-size: 18px; }
.proof__note { margin-top: 8px; font-size: 14px; color: var(--mut); text-align: center; }
.proof__grid { margin-top: 42px; width: 100%; display: flex; justify-content: space-between; }
.stat { width: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stat__box { display: flex; align-items: flex-end; justify-content: center; width: 156px; height: 96px; font-size: 96px; line-height: 96px; color: var(--pri); text-align: center; }
.stat__row { display: flex; align-items: flex-end; }
.stat:nth-child(1) .stat__digits { width: 96px; }
.stat:nth-child(2) .stat__digits { width: 154px; }
.stat:nth-child(3) .stat__digits { width: 166px; }
.stat:nth-child(4) .stat__digits { width: 115px; }
.stat__unit { font-size: 36px; line-height: 36px; color: var(--pri); margin: 0 0 16px 8px; }
.stat__label { margin-top: 8px; font-size: 20px; line-height: 32px; color: var(--mut); text-align: center; white-space: nowrap; }

/* ---------- 7. 板块大标题 ---------- */
.sechead { margin-top: 96px; position: relative; color: var(--ink); }
.sechead span { position: relative; z-index: 1; font-size: 48px; font-weight: 600; line-height: 1; }
.sechead--gap { margin-bottom: 52px; }

/* ---------- 8. 大功能卡 ---------- */
.panelwrap { margin-top: 48px; width: 100%; display: flex; flex-direction: column; align-items: center; background: #fff; }
.panel {
  width: 1188px; border-radius: 24px; padding: 48px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: center / cover no-repeat;
}
.panel--ai    { background-image: url(../assets/bg_home_meiqia_ai.5f17f1de.png); }
.panel--robot { background-image: url(../assets/nav_header_bg.362c8cb3.png); }
.panel--voice { background-color: #F1FCF9; padding-top: 38px; }
.panel__body { align-self: flex-start; display: flex; flex-direction: column; justify-content: center; }
.panel__title { position: relative; font-size: 32px; font-weight: 600; line-height: 44px; }
.panel__title .tag { position: absolute; margin-left: 8px; height: 20px; width: auto; display: inline-block; }
.panel__sub { margin-top: 8px; font-size: 20px; line-height: 32px; }
.panel__desc { margin: 16px 0 32px; width: 420px; font-size: 16px; line-height: 28px; color: var(--mut); }
.ticks__item { display: flex; align-items: center; }
.ticks__item img { width: 12px; height: 12px; margin-right: 5px; flex-shrink: 0; }
.ticks__item p { font-size: 16px; line-height: 36px; }
.panel__btn { margin-top: 36px; }

.panel__art { position: absolute; right: -50px; bottom: -20px; width: 651px; height: 333px; }
.panel__art .frame { position: relative; width: 100%; height: 100%; }
.panel__art img { position: absolute; transition: all .3s ease; }
.panel__art .img-a { top: 16px; left: 16px; z-index: 2; }
.panel__art .img-b { top: -158px; right: -40px; z-index: 1; transform: rotate(3deg); }
.panel__art .frame:hover .img-a { transform: scale(1.05); }
.panel__art .frame:hover .img-b { transform: rotate(6deg) scale(1.05); }
.panel__clip { position: absolute; right: 48px; top: -12px; width: 520px; aspect-ratio: 16 / 9; pointer-events: none; }
.panel__clip video { border-radius: 24px; }
.panel--voice .panel__art .img-a { top: -18px; left: 0; }
.panel--voice .panel__art .img-b { top: -158px; right: -60px; }

/* ---------- 9. 双列中卡 ---------- */
.duo { width: 100%; background: #fff; padding-bottom: 48px; display: flex; justify-content: center; }
.duo__wrap { width: 1188px; display: flex; justify-content: space-between; align-items: stretch; }
.duo__card {
  width: 560px; height: 440px; position: relative; border-radius: 24px;
  overflow: hidden; display: flex; flex-direction: column;
}
.duo__card--blue { background: #F5FAFF; }
.duo__card--warm { background: #FEFAF6; }
.duo__pad { flex: 1; padding: 48px; display: flex; flex-direction: column; }
.duo__title { position: relative; font-size: 28px; font-weight: 600; line-height: 40px; }
.duo__title .tag { position: absolute; top: -8px; margin-left: 8px; height: 20px; width: auto; display: inline-block; }
.duo__sub { margin-top: 12px; font-size: 16px; line-height: 24px; opacity: .8; }
.duo__ticks { margin-top: 32px; }
.duo__ticks .ticks__item { margin-top: 20px; }
.duo__ticks .ticks__item:first-child { margin-top: 0; }
.duo__ticks .ticks__item img { margin-top: 2px; }
.duo__ticks .ticks__item p { line-height: 24px; opacity: .8; }
.duo__btn { margin-top: auto; }
.duo__art { position: absolute; right: 0; bottom: 0; width: 336px; height: 181px; }
.duo__art .frame { position: relative; width: 100%; height: 100%; }
.duo__art img { position: absolute; transition: all .3s ease; }
.duo__art .img-a { top: 10px; right: -50px; z-index: 2; }
.duo__art .img-b { top: -70px; right: -80px; z-index: 1; transform: rotate(3deg); }
.duo__art .frame:hover .img-a { transform: scale(1.05); }
.duo__art .frame:hover .img-b { transform: rotate(6deg) scale(1.05); }

/* ---------- 10. 客户之声轮播 ---------- */
.voices {
  margin-top: 96px; overflow: hidden; width: 100%; height: 435px;
  display: flex; justify-content: center;
  background: url(../assets/bg_home_carousel.eff8693d.png) center / cover no-repeat;
}
.voices__stage { position: relative; max-width: 1200px; width: 100%; overflow: hidden; }
.voices__track { position: relative; display: flex; width: 100%; height: 100%; }
.voice {
  position: absolute; width: 100%; height: 100%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transform: translateX(100%);
  transition: transform .5s ease-in-out, opacity .5s ease-in-out;
}
.voice.is-cur  { opacity: 1; transform: none; z-index: 2; }
.voice.is-prev { transform: translateX(-100%); }
.voice__meta { height: 56px; display: flex; align-items: center; }
.voice__logo { height: 48px; width: auto; object-fit: contain; }
.voice__logo--low { height: 37px; }
.voice__sep { width: 1px; height: 100%; background: var(--ink); margin-right: 35px; }
.voice__side { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.voice__cap { font-size: 12px; line-height: 24px; }
.voice__prods { display: flex; gap: 24px; }
.voice__prods span { display: inline-flex; align-items: center; font-size: 16px; }
.voice__prods img { width: 20px; height: 20px; margin-right: 4px; }
.voice__quote { margin-top: 32px; max-width: 800px; font-size: 20px; line-height: 32px; text-align: center; }
.voices__dots { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.voices__dots li { width: 8px; height: 8px; border-radius: 999px; background: var(--dot); cursor: pointer; transition: background .2s; }
.voices__dots li:hover { opacity: .5; background: var(--pri); }
.voices__dots li.is-on { background: var(--pri); }
.voices__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; padding: 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--mut); transition: border-color .2s;
  display: flex; align-items: center; justify-content: center;
}
.voices__arrow:hover { border-color: var(--mut); }
.voices__arrow--l { left: 16px; }
.voices__arrow--r { right: 16px; }
.voices__arrow img { width: 100%; }

/* ---------- 11. 为什么选择 ---------- */
.why { width: 1188px; padding: 64px 0 8px; overflow: hidden; }
.why__head { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.why__head h2 { font-size: 48px; }
.why__head p { font-size: 28px; }
.why__row { display: flex; position: relative; width: 100%; margin: 120px 0 100px; }
.why__list { display: flex; flex-direction: column; gap: 28px; }
.why__list li { display: flex; align-items: center; gap: 12px; }
.why__list img { width: 68px; height: 68px; }
.why__list span { font-size: 20px; font-weight: 600; line-height: 32px; }
.why__ball { position: absolute; top: -50%; right: 0; max-width: 1400px; z-index: 1; pointer-events: none; }
.why__cards { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.minicard {
  width: 366px; height: 300px; background: var(--soft); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.minicard__in { width: 342px; height: 276px; background: #fff; box-shadow: var(--shadow-card); }
.minicard__box { height: 100%; width: 280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.minicard__box img { width: 64px; height: 64px; }
.minicard__title { margin-top: 4px; font-size: 20px; font-weight: 600; line-height: 32px; }
.minicard__lines { margin-top: 8px; width: 256px; font-size: 16px; line-height: 28px; color: var(--mut); text-align: center; }

/* ---------- 12. 品牌墙 ---------- */
.wall { display: flex; flex-direction: column; gap: 36px; padding: 96px 0; align-items: center; width: 100%; }
.wall h2 { font-size: 48px; }
.wall__box {
  display: flex; flex-direction: column; overflow: hidden; height: 600px;
  user-select: none; gap: 20px; margin-bottom: 64px; width: 1100px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.wall__row { display: flex; flex-direction: column; flex-shrink: 0; justify-content: space-around; align-items: center; min-height: 100%; animation: pan-y 30s linear infinite; }
.wall__row img { width: 100%; }

/* ---------- 13. 底部行动带 ---------- */
.ctaband { width: 100%; height: 480px; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; }
.ctaband__bg { position: absolute; z-index: 1; width: 100vw; height: 100%; object-fit: cover; }
.ctaband__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.ctaband__title { margin-top: 64px; font-size: 48px; }
.ctaband__sub { margin-top: 16px; font-size: 24px; line-height: 32px; text-align: center; }
.ctaband__actions { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.ctaband__ball { position: absolute; top: 30%; z-index: 1; max-width: 1400px; }

/* ---------- 14. 页脚 ---------- */
.sitefoot { width: 920px; padding-top: 64px; display: flex; }
.sitefoot__left { flex-shrink: 0; }
.sitefoot__logo svg { height: 64px; width: 146px; }
.footlabel { font-size: 14px; color: var(--mut); line-height: 20px; margin: 48px 0 32px; }
.brandfam { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.brandfam a { display: flex; align-items: center; gap: 6px; max-width: 380px; }
.brandfam img { height: 30px; width: auto; }
.brandfam img.h24 { height: 24px; }
.brandfam span { font-size: 12px; line-height: 16px; }
.footcontact p { font-size: 14px; line-height: 24px; text-align: left; font-style: normal; }
.social { display: flex; gap: 4px; margin-top: 24px; }
.social__cell { position: relative; }
.social__link { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 16px; width: 24px; height: 24px; cursor: pointer; }
.social__link img { position: absolute; inset: 0; width: 24px; height: 24px; }
.social__link .on { opacity: 0; transition: opacity .1s; }
.social__link:hover .on { opacity: 1; }
.social__qr {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scale(0);
  width: 240px; height: 240px; opacity: 0; pointer-events: none;
  transition: all .2s;
}
.social__link:hover .social__qr { transform: translateX(-50%) scale(1); opacity: 1; }
.social__qr img { position: static; width: 240px; height: 240px; }

.sitefoot__right { display: flex; flex-direction: column; margin-left: 82px; width: 100%; }
.footcols { display: flex; justify-content: space-between; }
.footcol { display: flex; flex-direction: column; }
.footcol > span { font-size: 16px; font-weight: 600; margin-bottom: 25px; }
.footcol__row { display: flex; gap: 2px; align-items: center; margin-bottom: 15px; }
.footcol__row a { font-size: 14px; cursor: pointer; }
.footcol__row a:hover { color: #40A9FF; }
.footcol__row img { height: 12px; width: auto; }
.footwarn { margin-top: 48px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.footwarn > span { font-size: 16px; font-weight: 600; }
.footwarn__links { display: flex; gap: 2px; }
.footwarn__links a:hover { color: #40A9FF; }
.footwarn img { width: 189px; height: auto; }
.copyright { padding: 72px 0 16px; width: 100%; font-size: 14px; display: flex; gap: 12px; justify-content: center; align-items: center; }
.copyright span { color: var(--mut); }

/* ---------- 15. 右侧悬浮工具 ---------- */
.dock { position: fixed; z-index: 999; right: 16px; bottom: 96px; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dock li { position: relative; }
.dock img { cursor: pointer; }
.dock img:hover { opacity: .9; }
.dock__ad img { width: 96px; }
.dock__icon > img { width: 64px; }
.dock__bubble {
  position: absolute; right: 80px; top: 50%; transform: translateY(-50%) scale(0);
  transform-origin: right center; width: 166px; height: 105px;
  background: url(../assets/icn_toolkit_bubble.a925f184.png) 0 0 / contain no-repeat;
  padding: 8px 8px 48px; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.dock li:hover .dock__bubble { transform: translateY(-50%) scale(1); }
.dock__bubble span { font-size: 14px; font-weight: 600; }
.dock__bubble--still { transform: translateY(-50%); }

/* ---------- 16. 全站页面导航（SEO 内链） ---------- */
.sitemap { background: #fff; border-top: 1px solid rgba(128, 128, 128, .22); }
.sitemap__inner { max-width: 1100px; margin: 0 auto; padding: 26px 20px 30px; }
.sitemap__label { font-size: 13px; opacity: .6; margin-bottom: 8px; }
.sitemap__lead { margin-bottom: 16px; font-size: 14px; }
.sitemap__lead a { font-weight: 600; color: var(--pri); }
.sitemap__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px 24px; font-size: 13px; line-height: 1.9;
}
.sitemap__col h3 { font-size: 13px; margin-bottom: 4px; }
.sitemap__col h3 a { font-weight: 600; }
.sitemap__col ul { list-style: none; margin: 0; padding: 0; }
.sitemap__col a { opacity: .8; }
.sitemap__col a:hover { opacity: 1; color: var(--pri); }

/* ---------- 17. 响应式（沿用现站断点行为） ---------- */
@media (max-width: 1535px) {
  .topbar__mid { padding-left: 180px; padding-right: 340px; }
}
@media (max-width: 1439px) {
  .topbar__mid { justify-content: flex-start; padding-left: 18%; }
  .menu__item { padding-left: 8px; padding-right: 8px; }
}