/* ==========================================================================
   EUCITA · 首页样式
   移动优先 / 零依赖 / 设计令牌驱动 / 全静态资源（无任何外部请求）
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root {
  --navy:        #0d2b4e;
  --navy-deep:   #071b34;
  --blue:        #1668c1;
  --blue-soft:   #e8f1fb;
  --teal:        #00b3a4;
  --sky:         #0ea5e9;   /* 字标末字母 A 的天蓝色 */
  --red:         #dc2626;   /* 字标末字母 A 行波抬起时的红色 */
  --hero-line:   #80d8f0;   /* 首屏粒子星图的连线色 */

  --ink:         #14202e;
  --body:        #46566a;
  --muted:       #7a8a9c;
  --line:        #dfe6ee;
  --line-soft:   #eef2f7;
  --line-strong: #c9dcef;
  --bg:          #ffffff;
  --surface:     #f6f9fc;

  --radius-sm:   6px;
  --radius:      12px;

  --shadow-sm:   0 1px 2px rgba(13, 43, 78, .06);
  --shadow:      0 6px 20px rgba(13, 43, 78, .08);
  --shadow-lg:   0 18px 44px rgba(13, 43, 78, .14);

  --container:   1200px;
  --gutter:      20px;
  --header-h:    64px;

  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, .84, .44, 1);

  --font-sans:   "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Source Han Sans SC", "Noto Sans CJK SC", system-ui,
                 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--blue); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--teal); }

img, svg { max-width: 100%; height: auto; }

address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 跳转到主内容 ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* 注：原 .btn 按钮体系已在 2026-10 改版中移除（首页轮播与页脚按钮均已去掉）。
   如后续需要按钮，可在此处重新引入 .btn / .btn--primary / .btn--outline。 */

.link-more {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  color: var(--blue);
}
.link-more:hover { color: var(--teal); }

/* 关于我们页：邮箱下方的路线操作卡片 */
.route-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 340px;
  margin-top: 24px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  transition: transform .22s var(--ease), border-color .22s var(--ease),
              box-shadow .22s var(--ease), background-color .22s var(--ease);
}
.route-btn:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.route-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.route-btn:hover .route-btn__icon { background: var(--blue); color: var(--bg); }
.route-btn__icon svg { width: 21px; height: 21px; }
.route-btn__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.route-btn__title { color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.route-btn__meta { color: var(--muted); font-size: 12px; line-height: 1.3; }
.route-btn__arrow {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  transition: color .22s var(--ease), transform .22s var(--ease);
}
.route-btn__arrow svg { width: 16px; height: 16px; }
.route-btn:hover .route-btn__arrow { color: var(--blue); transform: translate(2px, -2px); }

@media (max-width: 640px) {
  .route-btn { max-width: none; }
}

/* ---------- 页头 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

/* ---------- 品牌标识（数据脉冲图记 + EUCITA 字母动画） ---------- */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; --brand-cycle: 4.5s; }
.brand__mark { width: 40px; height: 40px; flex-shrink: 0; }
/* 图记内的数据脉冲线循环书写；周期与 EUCITA 字标行波一致（4.5s） */
.brand__mark path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: brandMarkDraw var(--brand-cycle) var(--ease) .1s infinite;
}

.brand__name {
  display: inline-flex;
  line-height: 1;            /* 单行字标：去掉多余行高，便于与 40px 图记垂直居中 */
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-right: -.14em;      /* 抵消末字母后的字距，使左右视觉均衡 */
}
/* 每个字母两个动画：① 逐字母入场（仅一次）② 循环行波（错峰形成从左到右的波动）
   注意：行波关键帧会改写 color，而「动画声明」的优先级高于普通声明（与选择器权重无关），
   因此静态 color 会被循环动画覆盖 —— 字母底色必须经自定义属性传入关键帧。 */
.brand__letter {
  --letter-rest: var(--navy);   /* 静止时的字色 */
  --letter-wave: var(--teal);   /* 行波抬起时的字色 */
  display: inline-block;
  animation:
    brandLetterIn .55s var(--ease-out) both,
    brandLetterWave var(--brand-cycle) var(--ease) infinite;
}
/* 末字母 A 用天蓝色，与图记的渐变呼应。
   静态 color 作为「动画未运行 / 已结束」时的兜底（如减弱动效），两个变量供关键帧取用。
   行波抬起时转为红色系：天蓝 → 红是跨度最大的色相变化，远比同色相的浅蓝微调醒目。 */
.brand__letter:last-child {
  color: var(--sky);
  --letter-rest: var(--sky);
  --letter-wave: var(--red);
}
.brand__letter:nth-child(1) { animation-delay: 0s,   1.40s; }
.brand__letter:nth-child(2) { animation-delay: .07s, 1.50s; }
.brand__letter:nth-child(3) { animation-delay: .14s, 1.60s; }
.brand__letter:nth-child(4) { animation-delay: .21s, 1.70s; }
.brand__letter:nth-child(5) { animation-delay: .28s, 1.80s; }
.brand__letter:nth-child(6) { animation-delay: .35s, 1.90s; }

/* ---------- 汉堡按钮 ---------- */
.nav-toggle {
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  order: 2;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars::before { content: ""; transform: translateY(-6px); }
.nav-toggle__bars::after  { content: ""; transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* ---------- 主导航（移动端为抽屉） ---------- */
.primary-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 86vw);
  background: #fff;
  padding: 76px 22px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  box-shadow: -12px 0 40px rgba(13, 43, 78, .18);
  z-index: 120;
  order: 3;
}
.primary-nav.is-open { transform: translateX(0); }

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(7, 27, 52, .5);
  z-index: 110;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.nav-scrim.is-visible { opacity: 1; }

.primary-nav__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}

.primary-nav__link {
  flex: 1 1 auto;
  padding: 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.primary-nav__link:hover { color: var(--blue); }

.submenu-toggle {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
}
.submenu-toggle svg { width: 12px; height: 8px; transition: transform .25s var(--ease); }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- 下拉面板：移动端为内联折叠 ---------- */
.mega {
  display: none;
  flex: 1 1 100%;
  padding: 4px 0 16px;
}
.mega.is-open {
  display: block;
  animation: megaOpenMobile .28s var(--ease-out) both;
}

.mega__cols { display: grid; gap: 18px; }

.mega__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mega__list li + li { margin-top: 2px; }
.mega__list a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.mega__list a:hover { background: var(--blue-soft); color: var(--blue); }
.mega__list small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}

/* ---------- 首屏轮播 ---------- */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* 粒子星图画布：覆盖整个首屏，位于页面底色之上、滑动轨道之下。
   各帧渐变均为半透明（见下方 .hero__bg--*），粒子因此始终在文字内容之后；
   轨道克隆副本帧时无需复制画布，翻页过程中星图保持连续。 */
.hero__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 滑动轨道：多帧横向排列，整体平移切换（原为淡入淡出，帧间没有位移感） */
.hero__slides {
  display: flex;
  transition: transform .72s cubic-bezier(.65, .05, .36, 1);
  will-change: transform;
}
.hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
}

/* 入场帧：内容上浮淡入 + 背景缓慢推近，形成镜头推移感。
   内容动画挂在 is-entering（仅真实翻页时由 JS 加上）：环绕归位是「副本帧 → 等价实帧」，
   若把淡入一并搬到实帧会重播一次造成闪烁；背景推近仍挂 is-active，
   其重启动静只有约 2% 缩放，肉眼不可见。 */
.hero__slide.is-entering .hero__content { animation: heroContentIn .6s var(--ease-out) both; }
.hero__slide.is-active .hero__bg { animation: heroZoom 3.4s linear both; }

.hero__bg {
  position: absolute;
  inset: 0;
  /* 透明底：让下方 .hero__fx 粒子星图透出，基色由 .hero 提供 */
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
}
/* 纯 CSS 背景：无任何图片请求（原站为 4 张 200–443KB 的 JPEG）。
   末层线性渐变保留约四成透明度作为「色纱」，其下是实时绘制的粒子星图。 */
.hero__bg--a {
  background-image:
    radial-gradient(1100px 520px at 78% 8%,  rgba(0, 179, 164, .38), transparent 62%),
    radial-gradient(900px 460px at 12% 92%,  rgba(22, 104, 193, .45), transparent 66%),
    linear-gradient(135deg, rgba(13, 43, 78, .58) 0%, rgba(18, 60, 104, .52) 100%);
}
.hero__bg--b {
  background-image:
    radial-gradient(1000px 500px at 85% 88%, rgba(22, 104, 193, .5), transparent 64%),
    radial-gradient(820px 420px at 18% 10%,  rgba(0, 179, 164, .3), transparent 62%),
    linear-gradient(120deg, rgba(7, 27, 52, .60) 0%, rgba(20, 64, 110, .54) 100%);
}
.hero__bg--c {
  background-image:
    radial-gradient(980px 480px at 20% 15%,  rgba(0, 179, 164, .34), transparent 62%),
    radial-gradient(900px 500px at 88% 80%,  rgba(22, 104, 193, .42), transparent 66%),
    linear-gradient(150deg, rgba(11, 37, 69, .58) 0%, rgba(15, 58, 99, .52) 100%);
}
.hero__bg--d {
  background-image:
    radial-gradient(940px 460px at 12% 22%,  rgba(0, 179, 164, .3), transparent 62%),
    radial-gradient(1040px 520px at 90% 12%, rgba(30, 127, 212, .48), transparent 66%),
    linear-gradient(125deg, rgba(10, 44, 77, .58) 0%, rgba(13, 51, 88, .52) 100%);
}
.hero__bg--e {
  background-image:
    radial-gradient(1000px 520px at 76% 90%, rgba(0, 179, 164, .36), transparent 64%),
    radial-gradient(880px 460px at 16% 14%, rgba(22, 104, 193, .44), transparent 64%),
    linear-gradient(160deg, rgba(6, 28, 51, .60) 0%, rgba(16, 65, 111, .54) 100%);
}
/* 叠加网格纹理，模拟数据可视化质感 */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(1200px 600px at 70% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(1200px 600px at 70% 30%, #000 20%, transparent 75%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: 64px 56px;
  max-width: 780px;
}
.hero__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
  letter-spacing: .05em;
  color: #d7e6f5;
}
.hero__title {
  margin-bottom: 18px;
  font-size: clamp(30px, 6.2vw, 54px);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  letter-spacing: -.02em;
}
.hero__lead {
  max-width: 640px;
  margin-bottom: 26px;
  font-size: clamp(15px, 2.4vw, 17.5px);
  color: #c9dcee;
}

/* 幻灯片底部的能力标签条（取代此前的按钮区） */
.hero__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__tags li {
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: 13.5px;
  font-weight: 600;
  color: #dbe8f5;
}

.hero__controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  /* 居中：箭头分列指示点两侧，因左右箭头等宽，指示点正好落在容器中线上 */
  justify-content: center;
  gap: 16px;
  padding-block: 0 26px;
}
/* 必须显式声明，否则 display:flex 会覆盖 [hidden] 的 UA 样式（无 JS 时控件会残留） */
.hero__controls[hidden] { display: none; }

.hero__arrow {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.hero__arrow:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }
.hero__arrow svg { width: 20px; height: 20px; }

.hero__dots { display: flex; align-items: center; gap: 9px; }
.hero__dot {
  width: 10px; height: 10px;
  padding: 0;
  background: rgba(255, 255, 255, .34);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: width .25s var(--ease), background-color .25s var(--ease);
}
.hero__dot[aria-current="true"] { width: 30px; border-radius: 999px; background: var(--teal); }

/* ---------- 内页横幅（关于我们等子页面） ---------- */
.page-hero {
  position: relative;
  background-color: var(--navy);
  background-image:
    radial-gradient(900px 420px at 82% 12%, rgba(0, 179, 164, .34), transparent 64%),
    radial-gradient(760px 380px at 8% 92%,  rgba(22, 104, 193, .42), transparent 66%),
    linear-gradient(135deg, #0d2b4e 0%, #123c68 100%);
  color: #fff;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(1100px 520px at 70% 25%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(1100px 520px at 70% 25%, #000 20%, transparent 75%);
}
.page-hero__inner { position: relative; z-index: 1; padding-block: 44px 52px; }
.page-hero__title {
  margin: 10px 0 14px;
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -.02em;
}
.page-hero__lead { max-width: 760px; margin: 0; font-size: clamp(15px, 2.2vw, 17px); color: #c9dcee; }

/* 面包屑 */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #a9bed4; }
.breadcrumb a { color: #d7e6f5; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb__sep { color: #6f8aa6; }

/* ---------- 长文排版（法律声明 / 隐私政策 / 公司概览等） ---------- */
.prose { max-width: 820px; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin: 36px 0 12px; font-size: 20px; }
.prose h3 { margin: 24px 0 10px; font-size: 16.5px; }
.prose p { font-size: 15px; }
.prose strong { color: var(--ink); }
/* 基础重置把列表样式清零了，长文内需恢复 */
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: 15px; }
.prose li + li { margin-top: 6px; }

/* 文档生效日期标签 */
.doc-meta {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
}

/* 法律文件末尾的版权行 */
.doc-copyright {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.doc-copyright strong { font-weight: 600; color: var(--muted); }

/* ---------- 通用版块 ---------- */
.section { padding-block: 56px; }
.section--tint { background: var(--surface); }

.section__head { max-width: 780px; margin-bottom: 34px; }
.section__eyebrow {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section__title { font-size: clamp(23px, 4.4vw, 34px); }
.section__lead { font-size: 15.5px; color: var(--body); }
.section__foot { margin-top: 26px; }

.block-title {
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 3px solid var(--teal);
  font-size: 18px;
}

/* ---------- 产品卡片 ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue);
}
.card__icon svg { width: 28px; height: 28px; }
.card__title { margin-bottom: 2px; font-size: 18px; }
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--blue); }
.card__meta {
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: .03em;
}
.card__desc { margin: 0; font-size: 14.5px; }

/* 单列卡片堆叠：用于窄栏内的卡片（如关于我们页面的半宽列），不随断点变成多列 */
.card-stack { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ---------- 技术底座：云 + 数 + 智 三支柱 ---------- */
.pillar-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.pillar {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* 三层各用一个主题色：云＝蓝、数＝青、智＝深蓝 */
.pillar--data { border-top-color: var(--teal); }
.pillar--ai   { border-top-color: var(--navy); }
.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue);
}
.pillar__icon svg { width: 28px; height: 28px; }
.pillar h3 { margin-bottom: 8px; font-size: 18px; }
.pillar__desc { margin-bottom: 18px; font-size: 14.5px; }

/* 技术标签 */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tag-list li {
  padding: 6px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
}

/* ---------- 技术架构图（带动画） ---------- */
.arch {
  margin: 0 0 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.arch__svg { display: block; width: 100%; min-width: 820px; height: auto; }
.arch__svg text { font-family: var(--font-sans); }
.arch__hint {
  display: block;
  margin: 0 0 34px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

/* 图层卡片 */
.arch__band { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
/* AI 图层独立使用该类（不带 .arch__band），故 fill 必须显式声明，否则会退回默认黑色 */
.arch__band--ai {
  fill: #f2f8ff;
  stroke: #b7d2ee;
  stroke-width: 1.5;
  animation: archGlow 4s ease-in-out infinite;
}
.arch__accent { stroke: none; }
.arch__title { font-size: 17px; font-weight: 700; fill: var(--ink); }
.arch__sub { font-size: 12.5px; fill: var(--muted); }
.arch__chip { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.arch__chipText { font-size: 13px; font-weight: 600; fill: var(--body); }

/* 顶层：三大前台 */
.arch__node { fill: #fff; stroke: #b7d2ee; stroke-width: 1.5; }
.arch__nodeTitle { font-size: 14.5px; font-weight: 700; fill: var(--navy); }
.arch__nodeSub { font-size: 12px; fill: var(--muted); }

/* 数据自下而上的流动连线 */
.arch__flow { stroke: #c3d6e8; stroke-width: 1.4; stroke-dasharray: 5 6; animation: archDash 2.6s linear infinite; }
.arch__dot { fill: var(--teal); animation: archFlow 2.6s linear infinite; }

@keyframes archDash { to { stroke-dashoffset: -44; } }
@keyframes archFlow {
  0%   { transform: translateY(0);     opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(-48px); opacity: 0; }
}
/* 流动点错峰：形成自下而上的连续波 */
.arch__dot:nth-child(1) { animation-delay: 0s; }
.arch__dot:nth-child(2) { animation-delay: .16s; }
.arch__dot:nth-child(3) { animation-delay: .32s; }
.arch__dot:nth-child(4) { animation-delay: .48s; }
.arch__dot:nth-child(5) { animation-delay: .64s; }
.arch__dot:nth-child(6) { animation-delay: .80s; }
.arch__dot:nth-child(7) { animation-delay: .96s; }
.arch__dot:nth-child(8) { animation-delay: 1.12s; }
.arch__dot:nth-child(9) { animation-delay: 1.28s; }
/* AI 图层的呼吸感强调 */
@keyframes archGlow {
  0%, 100% { stroke: #b7d2ee; stroke-width: 1.5; }
  50%      { stroke: #7fb2e0; stroke-width: 2; }
}

/* ---------- 解决方案页：示意图的动态元素（沿用 .arch 卡片语言，样式集中不拆文件） ---------- */
/* 横向流动点：位移量必须等于连线长度（本页流程图的水平连线统一为 56） */
.arch__dot--x { animation: archFlowX 2.8s linear infinite; }
@keyframes archFlowX {
  0%   { transform: translateX(0);    opacity: 0; }
  16%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: translateX(56px); opacity: 0; }
}

/* 雷达扫描圈 + 脉冲圈（全域舆情监测示意） */
.arch__radar {
  fill: none;
  stroke: #b7d2ee;
  stroke-width: 1.2;
  stroke-dasharray: 4 8;
  transform-box: fill-box;
  transform-origin: center;
  animation: archSpin 9s linear infinite;
}
@keyframes archSpin { to { transform: rotate(360deg); } }

.arch__ring {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: archPing 3.2s ease-out infinite;
}
.arch__ring--b { animation-delay: 1.6s; }
@keyframes archPing {
  0%   { transform: scale(.35); opacity: .9; }
  100% { transform: scale(1.55); opacity: 0; }
}

.arch__blip { fill: var(--teal); animation: archBlip 2.6s ease-in-out infinite; }
.arch__blip--b { animation-delay: .6s; }
.arch__blip--c { animation-delay: 1.2s; }
@keyframes archBlip {
  0%, 100% { opacity: .22; }
  50%      { opacity: 1; }
}

/* 数据大屏：柱状与折线（文旅大数据示意） */
.arch__screen { fill: var(--navy-deep); }
.arch__screenLabel { font-size: 13px; font-weight: 700; fill: #dbe8f5; }
.arch__screenText { font-size: 12px; fill: #a9bed4; }
.arch__bar {
  fill: var(--teal);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: archBar 3.2s ease-in-out infinite;
}
.arch__bar--b { fill: var(--sky); animation-delay: .35s; }
.arch__bar--c { animation-delay: .7s; }
.arch__bar--d { fill: var(--sky); animation-delay: 1.05s; }
@keyframes archBar {
  0%, 100% { transform: scaleY(.4); }
  50%      { transform: scaleY(1); }
}
.arch__spark {
  fill: none;
  stroke: var(--sky);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  animation: archSpark 3.6s ease-in-out infinite;
}
@keyframes archSpark {
  0%        { stroke-dashoffset: 260; }
  55%, 100% { stroke-dashoffset: 0; }
}

/* ---------- 关于我们 ---------- */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }

/* 关键信息列表 */
.info-list { display: grid; gap: 0; margin: 0; }
.info-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.info-list > div:first-child { padding-top: 0; }
.info-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.info-list dt { flex: 0 0 92px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.info-list dd { margin: 0; font-size: 14.5px; color: var(--ink); }

/* ---------- 页脚 ---------- */
.site-footer {
  background: var(--navy-deep);
  color: #9fb3ca;
  font-size: 13px;
  line-height: 1.5;
  padding-block: 26px 0;
}
/* 紧凑双列：移动端两列，桌面端四列；联系方式列占整行 */
.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.site-footer__col--contact { grid-column: 1 / -1; }
.site-footer__title {
  margin-bottom: 9px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  letter-spacing: .04em;
}
.site-footer__list li + li { margin-top: 5px; }
.site-footer__list a { color: #9fb3ca; font-size: 12.5px; line-height: 1.5; }
.site-footer__list a:hover { color: #fff; }
.site-footer__address { display: grid; gap: 8px; font-size: 12px; line-height: 1.5; }
.site-footer__addr { margin: 0; }
.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__contact li { white-space: nowrap; }
.site-footer__address a { color: #d6e2f0; }
.site-footer__address a:hover { color: var(--teal); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-block: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 11.5px;
}
.site-footer__copy { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer__legal a { color: #8ba1b9; }
.site-footer__legal a:hover { color: #fff; }

/* ---------- 动效关键帧 ---------- */
@keyframes megaOpenMobile {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes megaItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 入场帧：背景缓慢推近，形成镜头推移感 */
@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.075); }
}
/* 品牌图记：数据脉冲线循环书写，周期与字标行波一致 */
@keyframes brandMarkDraw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  6%   { stroke-dashoffset: 100; opacity: 1; }
  28%  { stroke-dashoffset: 0;   opacity: 1; }
  92%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
/* EUCITA 字标：逐字母入场 */
@keyframes brandLetterIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* EUCITA 字标：循环行波（短暂抬升并转为主色，其余时间静止） */
@keyframes brandLetterWave {
  /* 用变量取字色，而不是写死 --navy：否则末字母 A 的天蓝色会被动画覆盖 */
  0%, 16%, 100% { transform: translateY(0);      color: var(--letter-rest); }
  7%            { transform: translateY(-3.5px); color: var(--letter-wave); }
}

/* ==========================================================================
   响应式：≥ 640px（大屏手机 / 小平板）
   ========================================================================== */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero__inner { padding-block: 56px 64px; }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
  .site-footer__col--contact { grid-column: 1 / -1; }
}

/* ==========================================================================
   响应式：≥ 900px（桌面）
   导航仅 3 项（首页 / 产品及服务 / 关于我们），900px 起转为横向，
   此时 3 项 + 品牌约需 450px，远小于断点宽度，不会横向溢出。
   ========================================================================== */
@media (min-width: 900px) {
  :root { --header-h: 74px; }

  .section { padding-block: 78px; }
  .hero__content { padding-block: 96px 76px; }

  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .section__head { margin-bottom: 44px; }

  /* 云 + 数 + 智 三支柱并排 */
  .pillar-grid { grid-template-columns: repeat(3, 1fr); }

  /* 架构图在桌面端完整可见，无需横向滚动 */
  .arch__hint { display: none; }

  .about-grid { grid-template-columns: 1fr 1fr; gap: 48px; }

  .site-footer__cols { grid-template-columns: 1fr 1fr 1fr 2fr; gap: 24px; }
  .site-footer__col--contact { grid-column: auto; }

  /* ---------------- 横向主导航 ---------------- */
  .nav-toggle { display: none; }
  .nav-scrim { display: none !important; }

  .primary-nav {
    position: static;
    width: auto;
    padding: 0;
    transform: none;
    box-shadow: none;
    overflow: visible;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
  }
  .primary-nav__list { display: flex; align-items: center; gap: 4px; }
  /* 保持 relative：下拉面板相对「当前导航项」定位，出现在悬停项正下方 */
  .primary-nav__item { border: 0; display: block; position: relative; }

  .primary-nav__link {
    position: relative;
    padding: 10px 16px;
    font-size: 15.5px;
    white-space: nowrap;
  }
  /* 下划线用绝对定位：不再占位撑高链接盒子。
     否则每项底部多出 4px 外边距 + 2px 线高，会把导航文字整体上推约 3px，
     造成导航与左侧品牌字样垂直错位。 */
  .primary-nav__link::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 2px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
  }
  .primary-nav__item:hover > .primary-nav__link::after,
  .primary-nav__item:focus-within > .primary-nav__link::after,
  .primary-nav__item.is-open > .primary-nav__link::after { transform: scaleX(1); }

  .submenu-toggle { display: none; }

  /* ---------------- 下拉面板（动画） ----------------
     定位：相对「当前导航项」定位，面板右边缘对齐该项右边缘，出现在悬停项正下方。
     说明：导航整体靠右排列，若以左边缘对齐或水平居中，面板会向右越出视口；
           以右边缘对齐可保证在任何桌面宽度下都完整可见（并叠加 max-width 兜底）。
     动画：面板「下滑 + 淡入 + 轻微缩放」，面板内条目再逐条错峰上浮。 */
  .mega {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    /* 必须给出确定宽度：left:auto + right:0 + width:auto 会退化为「按导航项宽度适应」，
       导航项只有百余像素，多列会被压扁。现为 2 列（数据智能平台 / 技术底座）。 */
    width: min(600px, calc(100vw - 2 * var(--gutter)));
    display: block;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px) scale(.98);
    transform-origin: top right;
    transition:
      opacity .22s var(--ease),
      transform .34s var(--ease-out),
      visibility .34s;
  }
  .mega__cols { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .mega__list a { padding: 8px 10px; }

  /* 展开态：悬停 / 键盘聚焦 / 触屏点击（.is-open）三种方式均可 */
  .primary-nav__item:hover > .mega,
  .primary-nav__item:focus-within > .mega,
  .primary-nav__item.is-open > .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  /* 条目错峰上浮：用动画而非过渡，关闭时不会拖尾 */
  .primary-nav__item:hover > .mega .mega__list li,
  .primary-nav__item:focus-within > .mega .mega__list li,
  .primary-nav__item.is-open > .mega .mega__list li {
    animation: megaItemIn .36s var(--ease-out) both;
  }
  .mega__list li:nth-child(1) { animation-delay: .05s; }
  .mega__list li:nth-child(2) { animation-delay: .10s; }
  .mega__list li:nth-child(3) { animation-delay: .15s; }
  .mega__list li:nth-child(4) { animation-delay: .20s; }
  .mega__list li:nth-child(5) { animation-delay: .25s; }
}

/* ==========================================================================
   触屏设备（无悬停能力）：显示展开箭头，点击展开，动画一致
   ========================================================================== */
@media (hover: none) {
  .submenu-toggle { display: inline-flex; }
}

/* ==========================================================================
   响应式：≥ 1200px
   ========================================================================== */
@media (min-width: 1200px) {
  /* 页脚四个内容列，联系我们列略宽以容纳两列联系方式 */
  .site-footer__cols { grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 28px; }
  .site-footer__col--contact { grid-column: auto; }
}

/* ==========================================================================
   动效偏好与打印
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
  /* 循环描边在减弱动效下改为静态完整图记 */
  .brand__mark path { animation: none; stroke-dashoffset: 0; }
}

@media print {
  .nav-toggle, .primary-nav, .hero__controls, .hero__fx, .nav-scrim { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .hero { background: #fff !important; color: #000 !important; }
  .hero__title { color: #000 !important; }
  /* 打印不处理 transform，滑动轨道会把 5 帧并排印出来；回落为只印当前帧 */
  .hero__slides { display: block !important; transform: none !important; }
  .hero__slide { display: none !important; }
  .hero__slide.is-active { display: block !important; }
  .card, .pillar { break-inside: avoid; border-color: #ccc; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}