/* ============================================================
   一装ERP 官网首页 · 重构版
   设计语言：深浅交替 / 科技蓝渐变 / 玻璃拟态 / 大留白
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 品牌 */
  --brand: #0a6cff;
  --brand-2: #4f7bff;
  --brand-deep: #0045bc;
  --violet: #7c3aed;
  --cyan: #06b6d4;
  --grad-brand: linear-gradient(135deg, #0a6cff 0%, #4f7bff 100%);
  --grad-tech: linear-gradient(120deg, #2563eb 0%, #7c3aed 52%, #06b6d4 100%);

  /* 深色区 */
  --dark-bg: #050b1e;
  --dark-bg-2: #0a1428;
  --dark-text: #eaf0ff;
  --dark-sub: rgba(234, 240, 255, 0.72);
  --dark-dim: rgba(234, 240, 255, 0.45);
  --dark-line: rgba(234, 240, 255, 0.1);
  --dark-card: rgba(255, 255, 255, 0.04);

  /* 浅色区 */
  --light-bg: #ffffff;
  --light-alt: #f5f8ff;
  --ink: #0f1b3d;
  --ink-sub: #5a6b8c;
  --line: #e3eaf6;

  /* 布局 */
  --container: 1200px;
  --section-pad: 110px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 24px 64px rgba(15, 27, 61, 0.1);
  --shadow-card-hover: 0 32px 80px rgba(10, 108, 255, 0.16);

  --font: "PingFang SC", "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei",
    "Segoe UI", system-ui, sans-serif;
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--light-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; outline: none; }
/* 隐藏数字输入框的原生加减按钮 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

.container {
  width: min(var(--container), 100% - 48px);
  margin: 0 auto;
}

/* ---------- 通用：区块头部 ---------- */
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.sec-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.sec-head .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-brand);
}
.sec-head h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.sec-head .divider {
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: var(--grad-tech);
  margin: 20px auto 0;
  box-shadow: 0 0 14px rgba(79, 123, 255, 0.55);
}
.sec-head .sub { margin-top: 18px; font-size: 17px; }

/* 浅色区块：蓝调渐变底 + 柔光斑（无网格、不留大面积纯白），呼应 banner 的科技风 */
.sec-light {
  position: relative;
  padding: calc(var(--section-pad) / 2) 0 var(--section-pad);
  background:
    radial-gradient(620px 400px at 90% 0%, rgba(64, 123, 255, 0.12), transparent 68%),
    radial-gradient(560px 380px at 2% 100%, rgba(124, 58, 237, 0.08), transparent 70%),
    linear-gradient(180deg, #e9f1ff 0%, #f7faff 55%, #e9f1ff 100%);
}
.sec-light > .container { position: relative; z-index: 1; }
.sec-light.alt {
  background:
    radial-gradient(620px 400px at 8% 0%, rgba(64, 123, 255, 0.13), transparent 68%),
    radial-gradient(560px 380px at 96% 100%, rgba(124, 58, 237, 0.09), transparent 70%),
    linear-gradient(180deg, #f7faff 0%, #e2edff 100%);
}
.sec-light .eyebrow { color: var(--brand); background: rgba(10, 108, 255, 0.08); border: 1px solid rgba(10, 108, 255, 0.14); box-shadow: 0 4px 18px rgba(10, 108, 255, 0.1); }
.sec-light h2 { color: var(--ink); }
/* 浅色区标题渐变文字（深蓝→品牌蓝→紫，同 banner 的渐变语言） */
.sec-light .sec-head h2 {
  background: linear-gradient(94deg, var(--ink) 8%, #1d4ed8 58%, #7c3aed 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-dark .sec-head h2 {
  background: linear-gradient(94deg, var(--dark-text) 10%, #9db9ff 60%, #c4b5fd 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-light .sub { color: var(--ink-sub); }

/* 深色区块 */
.sec-dark {
  position: relative;
  padding: calc(var(--section-pad) / 2) 0 var(--section-pad);
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(37, 99, 235, 0.28), transparent 60%),
    radial-gradient(800px 460px at 92% 8%, rgba(124, 58, 237, 0.22), transparent 62%),
    radial-gradient(700px 500px at 50% 115%, rgba(6, 182, 212, 0.14), transparent 60%),
    linear-gradient(180deg, #182752 0%, #203060 100%);
  color: var(--dark-text);
  overflow: hidden;
}
/* 深色区细网格纹理 */
.sec-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(234, 240, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 240, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}
.sec-dark > .container { position: relative; z-index: 1; }
.sec-dark .eyebrow {
  color: #8fb7ff;
  background: rgba(79, 123, 255, 0.14);
  border: 1px solid rgba(143, 183, 255, 0.22);
}
.sec-dark h2 { color: var(--dark-text); }
.sec-dark .sub { color: var(--dark-sub); }
/* 深色板块内的卡片保持白色实底（半透明白叠深底会发灰且文字对比差） */
.sec-dark .f-card,
.sec-dark .gallery-card,
.sec-dark .cyc-card.text,
.sec-dark .news-item.feature > a,
.sec-dark .news-items-col .news-item > a,
.sec-dark .teamSwiper .team-member > a,
.sec-dark .al-pagelist .al-item,
.sec-dark .member-row,
.sec-dark .recommendItem,
.sec-dark .filter,
.sec-dark .detail-main,
.sec-dark .detail-footer-nav {
  background: #fff;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sec-dark .f-card:hover,
.sec-dark .gallery-card:hover,
.sec-dark .cyc-card:hover,
.sec-dark .news-list-mod a:hover,
.sec-dark .teamSwiper .team-member > a:hover,
.sec-dark .al-pagelist .al-item:hover,
.sec-dark .member-row:hover,
.sec-dark .recommendItem:hover {
  border-color: rgba(143, 183, 255, 0.6);
}
/* 卡片 hover 时标题变品牌蓝（深浅色板块通用） */
.news-list-mod a:hover .title,
.gallery-card:hover .gallery-item-desc h3,
.al-pagelist .al-item:hover .al-title,
.recommendItem:hover .title,
.teamSwiper .team-member > a:hover .name,
.member-row:hover .name,
.f-card:hover .f-name { color: var(--brand); }
.cyc-card.text:hover span { color: var(--brand); }

/* ---------- 顶部导航 ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.topbar .inner {
  width: min(1320px, 100% - 48px);
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.topbar .logo {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 7px 12px;
  transition: box-shadow 0.3s ease;
}
.topbar .logo img { height: 30px; width: auto; border-radius: 4px; }
/* Logo 未配置时降级显示站点名文字 */
.logo-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.topbar .nav { display: flex; gap: 8px; margin-left: 8px; }
.topbar .nav a {
  position: relative;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--dark-sub);
  border-radius: 8px;
  transition: color 0.25s ease, background 0.25s ease;
}
.topbar .nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.topbar .nav a.active { color: #fff; }
.topbar .nav a.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 2px;
  border-radius: 1px;
  background: var(--grad-brand);
}
.topbar .spacer { flex: 1; }
.topbar .hotline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dark-text);
}
.topbar .hotline svg { width: 17px; height: 17px; stroke: var(--cyan); }

/* 滚动后：毛玻璃白底 */
.topbar.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 8px 30px rgba(15, 27, 61, 0.08);
}
.topbar.scrolled .nav a { color: var(--ink-sub); }
.topbar.scrolled .nav a:hover { color: var(--brand); background: rgba(10, 108, 255, 0.07); }
.topbar.scrolled .nav a.active { color: var(--brand); }
.topbar.scrolled .nav a.active::after { background: var(--grad-brand); }
.topbar.scrolled .hotline { color: var(--ink); }

/* 通用渐变按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn-primary {
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 10px 28px rgba(10, 108, 255, 0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(10, 108, 255, 0.45);
}
/* 默认（浅色底）：深色描边幽灵按钮 */
.btn-ghost {
  color: var(--ink-sub);
  border: 1px solid rgba(15, 27, 61, 0.18);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  color: var(--brand);
  border-color: rgba(10, 108, 255, 0.45);
  background: rgba(10, 108, 255, 0.06);
  transform: translateY(-2px);
}
/* 深色区块（hero / sec-dark）内保持毛玻璃亮字样式 */
.hero .btn-ghost,
.sec-dark .btn-ghost {
  color: var(--dark-text);
  border-color: rgba(234, 240, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
.hero .btn-ghost:hover,
.sec-dark .btn-ghost:hover {
  color: var(--dark-text);
  border-color: rgba(143, 183, 255, 0.8);
  background: rgba(255, 255, 255, 0.12);
}
.topbar .btn { height: 40px; padding: 0 22px; font-size: 14px; }

/* 移动端汉堡菜单：默认隐藏，仅 ≤768px 显示 */
.menu-btn { display: none; }
.mobile-menu { display: none; }

/* ---------- 首屏 Hero（深色） ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 150px 0 90px;
  background:
    radial-gradient(1100px 600px at 78% 18%, rgba(124, 58, 237, 0.25), transparent 60%),
    radial-gradient(1000px 560px at 8% 82%, rgba(6, 182, 212, 0.16), transparent 60%),
    radial-gradient(1200px 700px at 50% -20%, rgba(37, 99, 235, 0.35), transparent 65%),
    linear-gradient(180deg, var(--dark-bg) 0%, #081226 100%);
  color: var(--dark-text);
  overflow: hidden;
}
/* 网格纹理 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(234, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 240, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 100%);
}
/* 底部渐隐接线 */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, rgba(5, 11, 30, 0.9));
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 1.05fr;
  gap: 44px;
  align-items: center;
}

/* 漂浮光点（纯 CSS 粒子） */
.orb { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; animation: orbFloat 9s ease-in-out infinite; }
.orb.o1 { width: 6px; height: 6px; left: 12%; top: 24%; background: #4f7bff; box-shadow: 0 0 14px 3px rgba(79, 123, 255, 0.65); }
.orb.o2 { width: 4px; height: 4px; left: 30%; top: 68%; background: #06b6d4; box-shadow: 0 0 12px 3px rgba(6, 182, 212, 0.6); animation-delay: -3s; }
.orb.o3 { width: 5px; height: 5px; left: 55%; top: 18%; background: #7c3aed; box-shadow: 0 0 13px 3px rgba(124, 58, 237, 0.6); animation-delay: -5s; }
.orb.o4 { width: 4px; height: 4px; left: 64%; top: 74%; background: #4f7bff; box-shadow: 0 0 12px 3px rgba(79, 123, 255, 0.55); animation-delay: -7s; }
.orb.o5 { width: 5px; height: 5px; left: 86%; top: 56%; background: #06b6d4; box-shadow: 0 0 13px 3px rgba(6, 182, 212, 0.5); animation-delay: -2s; }
@keyframes orbFloat {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(-26px); opacity: 0.45; }
}

.hero .eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #9db9ff;
  border: 1px solid rgba(143, 183, 255, 0.3);
  background: rgba(37, 99, 235, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 28px;
}
.hero .eyebrow-line .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(6, 182, 212, 0.8);
}
.hero h1 {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.01em;
}
.hero h1 .grad {
  background: linear-gradient(92deg, #5ea0ff 0%, #9d7bff 50%, #37d6f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead {
  margin-top: 24px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.9;
  color: var(--dark-sub);
}
.hero .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.hero .tags span {
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #bcd0ff;
  border: 1px solid rgba(143, 183, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}
.hero .cta-row { display: flex; gap: 16px; margin-top: 40px; }
.hero .btn { height: 52px; padding: 0 34px; font-size: 16.5px; }

/* Hero 右侧玻璃表单卡 */
.glass-form {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 36px 32px 28px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(10, 108, 255, 0.16);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(2, 6, 20, 0.4);
}
/* 渐变描边光 */
.glass-form::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  padding: 1px;
  background: linear-gradient(140deg, rgba(79, 123, 255, 0.65), rgba(124, 58, 237, 0.35) 40%, rgba(6, 182, 212, 0.5) 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.glass-form h3 { font-size: 26px; font-weight: 700; text-align: center; color: var(--ink); }
.glass-form .form-sub {
  text-align: center;
  font-size: 14px;
  color: var(--ink-sub);
  margin: 6px 0 24px;
}
.glass-form .field { position: relative; margin-bottom: 14px; }
.glass-form .field svg {
  position: absolute;
  left: 14px; top: 15px;
  width: 17px; height: 17px;
  stroke: #a0b3d9;
}
.glass-form .field input {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--light-alt);
  color: var(--ink);
  font-size: 15px;
  padding: 0 14px 0 42px;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.glass-form .field input::placeholder { color: #a4b4d1; }
.glass-form .field input:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 108, 255, 0.12);
}
.glass-form .btn-primary {
  width: 100%;
  height: 50px;
  font-size: 16.5px;
  margin-top: 6px;
}
.glass-form .privacy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-sub);
}
.glass-form .privacy label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.glass-form .privacy input[type="checkbox"] { accent-color: var(--brand); width: 14px; height: 14px; }
.glass-form .privacy a { color: var(--brand); }
.glass-form .privacy a:hover { color: var(--brand-deep); text-decoration: underline; }
.glass-form .tips {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-sub);
}

/* 首屏右侧：产品大图（替换原表单）。
   图片左侧约 1/3 为纯黑空白，screen 混合后完全透明；
   宽度取 73.5% 使发光主体恰好从文字列右缘开始，与文案互不重叠 */
.hero-media {
  --media-w: 73.5%;
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: end;
  z-index: 0;
  width: var(--media-w);
  max-width: none;
  pointer-events: none; /* 左侧透明区不拦截文字/按钮点击 */
}
.hero-media img {
  display: block;
  width: 100%;
  height: auto;
  /* 纯黑底图用 screen 混合，黑底隐入深色背景，只留发光主体 */
  mix-blend-mode: screen;
}
.hero-copy {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 2;
}

/* 表单校验错误态 */
.glass-form .field.error input,
.modal-card .field.error input {
  border-color: rgba(255, 99, 132, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.18);
  background: #fff5f6;
}
.glass-form .field-msg,
.modal-card .field-msg {
  display: block;
  margin-top: 6px;
  padding-left: 42px;
  font-size: 12px;
  color: #ff7a8a;
  text-align: left;
}

/* ---------- 产品简介区（浅色） ---------- */
.intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  gap: 56px;
  align-items: start;
}
.intro-grid .left h2 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.intro-grid .left .divider { width: 72px; height: 4px; border-radius: 2px; background: var(--grad-tech); margin-top: 22px; }
.intro-grid .left .badge {
  display: inline-block;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(10, 108, 255, 0.08);
  border: 1px solid rgba(10, 108, 255, 0.18);
}
.intro-grid .right p {
  font-size: 17px;
  line-height: 2.05;
  color: var(--ink-sub);
  text-align: justify;
}
.intro-grid .right p + p { margin-top: 14px; }
.intro-grid .right strong { color: var(--ink); font-weight: 600; }

/* ---------- 产品模块区（Tab + 左文右图） ---------- */
.prod { /* 由生成器附加 sec-light / sec-dark */ }
.prod .tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-bottom: 46px;
}
.prod .tabs button {
  position: relative;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* 浅色 Tab */
.sec-light .tabs button { color: var(--ink-sub); background: #fff; border: 1px solid var(--line); }
.sec-light.alt .tabs button { background: #fff; }
.sec-light .tabs button:hover { color: var(--brand); border-color: rgba(10, 108, 255, 0.4); transform: translateY(-1px); }
.sec-light .tabs button.active {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(10, 108, 255, 0.32);
}
/* 深色 Tab */
.sec-dark .tabs button {
  color: var(--dark-sub);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(143, 183, 255, 0.18);
}
.sec-dark .tabs button:hover { color: #fff; border-color: rgba(143, 183, 255, 0.55); transform: translateY(-1px); }
.sec-dark .tabs button.active {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(10, 108, 255, 0.45);
}

/* 面板 */
.prod .panels { position: relative; }
.prod .panel {
  display: none;
  align-items: center;
  gap: 64px;
}
.prod .panel.active { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.prod .panel.active > * { animation: panelIn 0.55s cubic-bezier(0.22, 0.8, 0.36, 1) both; }
.prod .panel.active > *:nth-child(2) { animation-delay: 0.1s; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 图左文右（偶数面板反转） */
.prod .panel.reverse.active > .p-text { order: 2; }
.prod .panel.reverse.active > .p-media { order: 1; }

.p-text .p-tag {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.sec-light .p-text .p-tag { color: var(--brand); background: rgba(10, 108, 255, 0.08); }
.sec-dark .p-text .p-tag { color: #8fb7ff; background: rgba(79, 123, 255, 0.13); border: 1px solid rgba(143, 183, 255, 0.2); }
.p-text h3 { font-size: 32px; font-weight: 700; line-height: 1.4; }
.sec-light .p-text h3 { color: var(--ink); }
.sec-dark .p-text h3 { color: var(--dark-text); }
.p-text .p-lead {
  margin-top: 16px;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.75;
}
.sec-light .p-text .p-lead { color: var(--brand); }
.sec-dark .p-text .p-lead { color: #9db9ff; }
.p-text .p-desc {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.95;
  text-align: justify;
}
.sec-light .p-text .p-desc { color: var(--ink-sub); }
.sec-dark .p-text .p-desc { color: var(--dark-sub); }

/* 截图：应用窗口容器 */
.p-media { position: relative; }
.window {
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.sec-dark .window { box-shadow: 0 30px 90px rgba(2, 6, 20, 0.6), 0 0 0 1px rgba(143, 183, 255, 0.14); }
.p-media:hover .window {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.sec-dark .p-media:hover .window { box-shadow: 0 40px 100px rgba(2, 6, 20, 0.65), 0 0 0 1px rgba(143, 183, 255, 0.3); }
.window .win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: #eef2fa;
  border-bottom: 1px solid #dfe6f3;
}
.window .win-bar i {
  width: 10px; height: 10px; border-radius: 50%;
}
.window .win-bar i:nth-child(1) { background: #ff5f57; }
.window .win-bar i:nth-child(2) { background: #febc2e; }
.window .win-bar i:nth-child(3) { background: #28c840; }
.window .win-bar .win-title {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  color: #8a97b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window img { width: 100%; height: auto; }
/* 深色区截图底部辉光 */
.sec-dark .p-media::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -34px;
  height: 60px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(37, 99, 235, 0.4), transparent 75%);
  filter: blur(12px);
  z-index: -1;
}

/* ---------- 底部 CTA 横幅（深色渐变） ---------- */
.cta-band {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(37, 99, 235, 0.4), transparent 60%),
    radial-gradient(700px 380px at 88% 100%, rgba(124, 58, 237, 0.32), transparent 60%),
    linear-gradient(120deg, #182752 0%, #22336a 55%, #1b2a58 100%);
  color: var(--dark-text);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(234, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 100%);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(92deg, #ffffff 20%, #9db9ff 60%, #37d6f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-band p { margin-top: 16px; font-size: 17px; color: var(--dark-sub); }
.cta-band .cta-row { display: flex; justify-content: center; gap: 18px; margin-top: 36px; }

/* ---------- 页脚（深色） ---------- */
.footer {
  background: linear-gradient(180deg, #081226 0%, var(--dark-bg) 100%);
  color: var(--dark-sub);
  padding: 64px 0 34px;
  border-top: 1px solid rgba(234, 240, 255, 0.07);
}
.footer .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.footer .brand-col .logo {
  display: inline-flex;
  background: #fff;
  border-radius: 12px;
  padding: 8px 12px;
}
.footer .brand-col .logo img { height: 30px; }
.footer .hotlines { margin-top: 22px; font-size: 15px; line-height: 2.1; }
.footer .hotlines strong { color: var(--dark-text); font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
.footer .hotlines .label { font-size: 13.5px; color: var(--dark-dim); margin-right: 10px; }
.footer h5 {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark-text);
  margin-bottom: 18px;
  letter-spacing: 0.06em;
}
.footer .col a { display: block; font-size: 14.5px; line-height: 2.4; color: var(--dark-sub); transition: color 0.2s ease; }
.footer .col a:hover { color: #8fb7ff; }
.footer .qrcodes { display: flex; gap: 22px; }
.footer .qrcodes .qr { text-align: center; }
.footer .qrcodes img {
  width: 104px;
  /* 容器挤压缩窄时（img 的 max-width:100% 生效）保持正方形：高度跟随宽度 */
  height: auto;
  aspect-ratio: 1 / 1;
  /* 原图非正方形时等比缩进正方形白底框，不拉伸变形、不裁剪二维码 */
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(234, 240, 255, 0.14);
  padding: 5px;
  background: #fff;
}
.footer .qrcodes p { margin-top: 10px; font-size: 13px; color: var(--dark-dim); }
.footer .bottom {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid rgba(234, 240, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  font-size: 13px;
  color: var(--dark-dim);
}
.footer .bottom a { color: var(--dark-dim); transition: color 0.2s ease; }
.footer .bottom a:hover { color: #8fb7ff; }

/* ---------- 悬浮工具（右侧，与左侧导航位置对称；独立按钮样式） ---------- */
.floating {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.float-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font: inherit;
  background: rgba(13, 24, 50, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  color: var(--dark-text);
  box-shadow:
    0 12px 30px rgba(5, 11, 30, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 22px rgba(79, 123, 255, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.float-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 16px 40px rgba(10, 108, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 30px rgba(79, 123, 255, 0.35);
}
.float-btn svg { width: 21px; height: 21px; stroke: #dbe6ff; }
/* 试用按钮：直接显示「试」字 */
.float-btn .trial-char {
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
/* 客服按钮：微信图标（填充式） */
.float-btn svg.float-ico-wx {
  fill: #dbe6ff;
  stroke: none;
}
.floating.on-dark .float-btn:not(.primary) svg.float-ico-wx {
  fill: #e3ebf7;
  stroke: none;
}
/* backTop：无尾箭头 + TOP 字样 */
.float-btn .top-txt {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
}
.float-btn.primary {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(10, 108, 255, 0.5);
}
.float-btn.primary svg { stroke: #fff; }
.float-btn.primary:hover { border-color: transparent; }
.float-btn.primary::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(79, 123, 255, 0.5);
  animation: pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* 深色板块下：普通按钮提亮为「浅色玻璃」，避免融于深色背景 */
.floating.on-dark .float-btn:not(.primary) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow:
    0 12px 30px rgba(5, 11, 30, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 24px rgba(143, 183, 255, 0.4);
}
.floating.on-dark .float-btn:not(.primary):hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 16px 40px rgba(5, 11, 30, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 32px rgba(143, 183, 255, 0.55);
}
.floating.on-dark .float-btn:not(.primary) svg { stroke: #fff; }
/* 工具提示：向左弹出 */
.float-btn .tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 13px;
  color: var(--dark-text);
  background: rgba(13, 24, 50, 0.92);
  border: 1px solid rgba(143, 183, 255, 0.25);
  padding: 6px 14px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.float-btn:hover .tip { opacity: 1; }
/* 二维码悬浮卡：向左弹出（二维码区严格正方形） */
.float-btn .qr-pop {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) scale(0.94);
  width: 140px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(13, 24, 50, 0.96);
  border: 1px solid rgba(143, 183, 255, 0.3);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.float-btn:hover .qr-pop { opacity: 1; transform: translateY(-50%) scale(1); }
.float-btn .qr-pop img {
  width: 124px;
  height: auto;
  aspect-ratio: 1 / 1;
  /* 二维码不可裁剪：非正方形原图等比缩入 */
  object-fit: contain;
  margin: 0 auto;
  border-radius: 8px;
}
.float-btn .qr-pop p { margin-top: 8px; font-size: 13px; color: var(--dark-sub); }
#backTop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.25s ease;
}
#backTop.show { opacity: 1; pointer-events: auto; }

/* ---------- 左侧板块导航 ---------- */
.side-nav {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 12px;
  border-radius: 18px;
  background: rgba(10, 18, 40, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 18px 50px rgba(5, 11, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.side-nav::before {
  content: "板块导航";
  padding: 4px 12px 10px;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(198, 214, 255, 0.55);
  white-space: nowrap;
}
.side-nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px 9px 11px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  color: rgba(236, 242, 255, 0.78);
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease;
}
.side-nav button i {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(236, 242, 255, 0.4);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.side-nav button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.side-nav button.active {
  color: #fff;
  background: rgba(79, 123, 255, 0.22);
}
.side-nav button.active i {
  background: var(--brand-2);
  box-shadow: 0 0 9px 2px rgba(79, 123, 255, 0.85);
}
/* 锚点定位时预留顶部导航高度 */
.mod-anchor { scroll-margin-top: 70px; }

@media (max-width: 1499px) {
  .side-nav { display: none; }
  /* 左侧导航隐藏时，右侧悬浮工具回到右下角（独立按钮样式不变） */
  .floating { right: 24px; bottom: 28px; top: auto; transform: none; }
}

/* ---------- 弹窗（预约演示表单） ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(4, 8, 22, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-mask.show { opacity: 1; pointer-events: auto; }
.modal-card {
  position: relative;
  width: 420px;
  max-width: 100%;
  border-radius: var(--radius-lg);
  padding: 34px 30px 26px;
  background: #fff;
  border: 1px solid rgba(10, 108, 255, 0.16);
  box-shadow: 0 40px 100px rgba(2, 6, 20, 0.45);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.36, 1);
}
.modal-mask.show .modal-card { transform: translateY(0) scale(1); }
.modal-card .close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-sub);
  transition: background 0.2s ease, color 0.2s ease;
}
.modal-card .close:hover { background: rgba(10, 108, 255, 0.08); color: var(--ink); }
.modal-card .close svg { width: 16px; height: 16px; stroke: currentColor; }
/* 弹窗内表单复用 hero 表单字段样式 */
.modal-card h3 { font-size: 24px; font-weight: 700; text-align: center; color: var(--ink); }
.modal-card .form-sub {
  text-align: center;
  font-size: 14px;
  color: var(--ink-sub);
  margin: 6px 0 22px;
}
.modal-card .field { position: relative; margin-bottom: 14px; }
.modal-card .field svg {
  position: absolute;
  left: 14px; top: 15px;
  width: 17px; height: 17px;
  stroke: #a0b3d9;
}
.modal-card .field input {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--light-alt);
  color: var(--ink);
  font-size: 15px;
  padding: 0 14px 0 42px;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.modal-card .field input::placeholder { color: #a4b4d1; }
.modal-card .field input:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 108, 255, 0.12);
}
.modal-card .btn-primary { width: 100%; height: 50px; font-size: 16.5px; margin-top: 6px; }
.modal-card .privacy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-sub);
}
.modal-card .privacy label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.modal-card .privacy input[type="checkbox"] { accent-color: var(--brand); width: 14px; height: 14px; }
.modal-card .privacy a { color: var(--brand); }
.modal-card .privacy a:hover { color: var(--brand-deep); text-decoration: underline; }
.modal-card .tips { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--ink-sub); }

/* ---------- 隐私确认弹窗 ---------- */
.confirm-box {
  width: 380px;
  max-width: 100%;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 26px 22px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(2, 6, 20, 0.4);
  transform: translateY(14px);
  transition: transform 0.3s ease;
}
.modal-mask.show .confirm-box { transform: translateY(0); }
.confirm-box .t { font-size: 18px; font-weight: 700; color: var(--ink); }
.confirm-box .d { margin: 12px 0 22px; font-size: 14.5px; color: var(--ink-sub); line-height: 1.8; }
.confirm-box .row { display: flex; gap: 12px; }
.confirm-box .row button {
  flex: 1;
  height: 42px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.confirm-box .cancel { color: var(--ink-sub); background: #f0f4fb; }
.confirm-box .agree { color: #fff; background: var(--grad-brand); }

/* ---------- Toast ---------- */
.toast-stage {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: toastIn 0.3s cubic-bezier(0.22, 0.8, 0.36, 1) both;
  box-shadow: 0 14px 40px rgba(2, 6, 20, 0.35);
}
.toast.out { animation: toastOut 0.3s ease both; }
.toast.success { background: rgba(24, 128, 79, 0.92); }
.toast.error { background: rgba(196, 49, 62, 0.92); }
.toast.loading { background: rgba(13, 24, 50, 0.92); }
.toast.loading .spin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-12px); }
}

/* ---------- 滚动入场动画 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.8, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.8, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- 大屏适配（仅首页 Hero） ----------
   以 1920 宽为基准：clamp 下限 = 当前值，≤1920 渲染与原来完全一致；
   超过 1920 后随视口线性放大，约 2400px 处触顶（按 2560 屏设计）。
   包在 min-width:1101px 内、置于「响应式」之前，
   窄屏媒体查询（max-width:1100/1024/768）不受特异性影响仍可正常覆盖。 */
@media (min-width: 1101px) {
  /* 内容区 1200 → 最宽 1500；右侧产品大图随容器等比放大 */
  .hero:not(.compact) .container {
    width: min(max(var(--container), 62.5vw), 1500px);
    gap: clamp(44px, 2.2917vw, 54px);
  }
  .hero:not(.compact) h1 { font-size: clamp(60px, 3.125vw, 74px); }
  .hero:not(.compact) .lead {
    margin-top: clamp(24px, 1.25vw, 28px);
    max-width: clamp(560px, 29.1667vw, 640px);
    font-size: clamp(18px, 0.9375vw, 21px);
  }
  .hero:not(.compact) .eyebrow-line {
    margin-bottom: clamp(28px, 1.4583vw, 34px);
    padding: clamp(8px, 0.4167vw, 10px) clamp(18px, 0.9375vw, 22px);
    font-size: clamp(14px, 0.7292vw, 16px);
  }
  .hero:not(.compact) .tags {
    margin-top: clamp(26px, 1.3542vw, 32px);
    gap: clamp(10px, 0.5208vw, 12px);
  }
  .hero:not(.compact) .tags span {
    font-size: clamp(13.5px, 0.7031vw, 15.5px);
    padding: clamp(6px, 0.3125vw, 7px) clamp(14px, 0.7292vw, 17px);
  }
  .hero:not(.compact) .cta-row {
    margin-top: clamp(40px, 2.0833vw, 48px);
    gap: clamp(16px, 0.8333vw, 20px);
  }
  .hero:not(.compact) .btn {
    height: clamp(52px, 2.7083vw, 60px);
    padding: 0 clamp(34px, 1.7708vw, 41px);
    font-size: clamp(16.5px, 0.8594vw, 19px);
  }

  /* 右侧悬浮工具：与大屏 Hero 同步放大，避免相对显得单薄 */
  .floating {
    right: clamp(18px, 1.1458vw, 24px);
    gap: clamp(14px, 0.7292vw, 17px);
  }
  .floating .float-btn {
    width: clamp(52px, 2.7083vw, 64px);
    height: clamp(52px, 2.7083vw, 64px);
  }
  .floating .float-btn svg {
    width: clamp(21px, 1.0938vw, 26px);
    height: clamp(21px, 1.0938vw, 26px);
  }
  .floating .float-btn .trial-char {
    font-size: clamp(21px, 1.0938vw, 26px);
  }
  .floating .float-btn .top-txt {
    margin-top: clamp(3px, 0.1563vw, 4px);
    font-size: clamp(10px, 0.5208vw, 12px);
  }
  .floating .float-btn .tip {
    right: calc(100% + clamp(14px, 0.7292vw, 16px));
    padding: clamp(6px, 0.3125vw, 7px) clamp(14px, 0.7292vw, 16px);
    font-size: clamp(13px, 0.6771vw, 15px);
  }
  .floating .float-btn .qr-pop {
    right: calc(100% + clamp(14px, 0.7292vw, 16px));
    width: clamp(140px, 7.3vw, 160px);
    padding: clamp(8px, 0.42vw, 10px);
    border-radius: clamp(12px, 0.625vw, 14px);
  }
  .floating .float-btn .qr-pop img {
    width: clamp(124px, 6.5vw, 140px);
    height: clamp(124px, 6.5vw, 140px);
  }
  .floating .float-btn .qr-pop p {
    margin-top: clamp(6px, 0.3125vw, 7px);
    font-size: clamp(12.5px, 0.651vw, 14px);
  }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .hero h1 { font-size: 48px; }
  .sec-head h2 { font-size: 34px; }
  .prod .panel.active { grid-template-columns: 1fr; gap: 40px; }
  .prod .panel.reverse.active > .p-text { order: 1; }
  .prod .panel.reverse.active > .p-media { order: 2; }
}

@media (max-width: 1024px) {
  .topbar .hotline { display: none; }
  .hero .container { grid-template-columns: 1fr; gap: 48px; }
  .hero-media { grid-row: auto; grid-column: auto; width: 100%; justify-self: stretch; }
  /* 移动端图片左移并放大：index_banner.png 主体中心原生 x≈1031（偏右约 263px）。
     放大 130% 让主体更醒目；translateX 按 1031/1536 − 50%/1.3 ≈ 28.66% 居中，
     主体实测占 x 560…1502，放大后仍完整在视口内（img 上的 transform 不与 .reveal 动画冲突） */
  .hero-media img { width: 130%; max-width: none; transform: translateX(-28.6609%); }
  .hero-copy { grid-row: auto; grid-column: auto; }
  .hero { min-height: 0; }
  .hero .lead { max-width: none; }
  .intro-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer .grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --section-pad: 72px; }
  .topbar .inner { height: 62px; gap: 14px; }
  .topbar .nav { display: none; }
  /* 汉堡按钮：深色 hero 上为白色线条 */
  .menu-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .menu-btn span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn.open span:nth-child(2) { opacity: 0; }
  .menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* 滚动后(白玻璃底)按钮线条变深 */
  .topbar.scrolled .menu-btn { background: rgba(10, 108, 255, 0.08); border-color: rgba(10, 108, 255, 0.18); }
  .topbar.scrolled .menu-btn span { background: var(--ink, #243b6b); }
  /* 下拉菜单：固定在 topbar 下方，白色毛玻璃面板 */
  .mobile-menu {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 18px 34px rgba(15, 27, 61, 0.16);
    border-radius: 0 0 16px 16px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s;
  }
  .mobile-menu.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink, #243b6b);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .mobile-menu a.active {
    color: var(--brand, #0a6cff);
    background: rgba(10, 108, 255, 0.08);
    font-weight: 600;
  }
  .mobile-menu a:active { background: rgba(10, 108, 255, 0.12); }
  .hero { padding: 80px 0 64px; }
  .hero h1 { font-size: 36px; }
  .hero .lead { font-size: 16px; }
  .hero .cta-row { flex-wrap: wrap; }
  .sec-head h2 { font-size: 28px; }
  .intro-grid .left h2 { font-size: 32px; }
  .intro-grid .right p { font-size: 15.5px; }
  .p-text h3 { font-size: 24px; }
  .p-text .p-lead { font-size: 16px; }
  .p-text .p-desc { font-size: 15px; }
  .prod .tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
  .prod .tabs::-webkit-scrollbar { display: none; }
  .prod .tabs button { flex-shrink: 0; }
  .cta-band h2 { font-size: 30px; }
  .footer .grid { grid-template-columns: 1fr; gap: 36px; }
  .floating { right: 14px; bottom: 18px; }
  .float-btn .qr-pop { display: none; }
}

/* ============================================================
   子页面扩展：试用页 / 关于页
   ============================================================ */

/* 紧凑型深色 Hero（关于页页头） */
.hero.compact { min-height: 0; padding: 168px 0 96px; }
.hero.compact h1 { font-size: 48px; }
.hero.compact .lead { font-size: 17px; max-width: 880px; }

/* 试用页：热线胶囊 */
.hotline-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hotline-chips a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dark-text);
  border: 1px solid rgba(143, 183, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.hotline-chips a:hover {
  border-color: rgba(143, 183, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
.hotline-chips svg { width: 16px; height: 16px; stroke: var(--cyan); }

/* 关于页：正文排版 */
.prose { max-width: 920px; margin: 0 auto; }
.prose p {
  font-size: 16.5px;
  line-height: 2.1;
  text-align: justify;
  color: var(--ink-sub);
}
.sec-dark .prose p { color: var(--dark-sub); }
.prose p + p { margin-top: 18px; }
.prose .p-first {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--ink);
}
.sec-dark .prose .p-first { color: var(--dark-text); }
.prose strong { color: var(--ink); font-weight: 600; }
.sec-dark .prose strong { color: var(--dark-text); }

/* 关于页：特性卡片网格（八大模块 / 特色能力） */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.f-card {
  padding: 26px 24px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(15, 27, 61, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.sec-light.alt .f-card { background: rgba(255, 255, 255, 0.86); }
.f-card:hover {
  transform: translateY(-5px);
  border-color: rgba(10, 108, 255, 0.35);
  box-shadow: 0 22px 50px rgba(10, 108, 255, 0.12);
}
.f-card .f-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.f-card .f-name::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(79, 123, 255, 0.55);
}
.f-card .f-text {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-sub);
  text-align: justify;
}

/* 关于页：多端平台标签 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 34px;
}
.chip-row span {
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand);
  background: rgba(10, 108, 255, 0.07);
  border: 1px solid rgba(10, 108, 255, 0.2);
}

/* 关于页：联系我们（深色） */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 860px;
  margin: 0 auto 40px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(143, 183, 255, 0.18);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.contact-item:hover { border-color: rgba(143, 183, 255, 0.5); background: rgba(255, 255, 255, 0.07); }
.contact-item .c-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 123, 255, 0.16);
  border: 1px solid rgba(143, 183, 255, 0.25);
}
.contact-item .c-icon svg { width: 20px; height: 20px; stroke: #8fb7ff; }
.contact-item .c-label { font-size: 13px; color: var(--dark-dim); letter-spacing: 0.06em; }
.contact-item .c-value { font-size: 16.5px; font-weight: 600; color: var(--dark-text); line-height: 1.5; }
.contact-item a.c-value { color: #8fb7ff; }
.contact-item a.c-value:hover { color: #fff; text-decoration: underline; }
.contact-qr { display: flex; justify-content: center; gap: 40px; }
.contact-qr .qr { text-align: center; }
.contact-qr img {
  width: 116px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 6px;
  border: 1px solid rgba(234, 240, 255, 0.16);
}
.contact-qr p { margin-top: 12px; font-size: 13.5px; color: var(--dark-dim); }

/* 子页面响应式 */
@media (max-width: 1100px) {
  .feature-grid, .feature-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .hero.compact h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .feature-grid, .feature-grid.cols-3 { grid-template-columns: 1fr; }
  .hero.compact { padding: 130px 0 64px; }
  .hero.compact h1 { font-size: 32px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-qr { gap: 22px; }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   CMS 组件补充样式（CWPage* → redesign 设计语言适配）
   ============================================================ */

/* ---------- 首屏右侧玻璃表单列 ---------- */
.hero .hero-form {
  position: relative;
  z-index: 2;
}
/* 顶部导航渐变 CTA 内图片按钮（后台配置图标时使用） */
.float-btn img { width: 22px; height: 22px; object-fit: contain; }

/* 玻璃表单/弹窗内文本域 */
.glass-form .field textarea,
.modal-card .field textarea {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--light-alt);
  color: var(--ink);
  font-size: 15px;
  padding: 10px 14px;
  resize: vertical;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.glass-form .field textarea:focus,
.modal-card .field textarea:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 108, 255, 0.12);
}

/* ---------- 居中行 / 按钮 ---------- */
.center-row { display: flex; justify-content: center; margin-top: 44px; }
.center-block { display: flex; margin: 40px auto 0; }
.chip {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
}
.sec-dark .chip { color: #bcd0ff; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(143, 183, 255, 0.25); }
.sec-light .chip { color: var(--brand); background: rgba(10, 108, 255, 0.07); border: 1px solid rgba(10, 108, 255, 0.2); }

/* p-text 中多组 lead/desc 的间距 */
.p-text .p-lead + .p-desc { margin-top: 6px; }
.p-text .p-desc + .p-lead { margin-top: 22px; }
.p-text .cta-row { margin-top: 28px; }

/* f-card 图标 */
.f-card .f-icon { width: 40px; height: 40px; object-fit: contain; margin-bottom: 14px; }

/* ---------- CWPageForm：cta-band 内居中表单 ---------- */
.cta-band .glass-form.center-form {
  max-width: 680px;
  margin: 36px auto 0;
  text-align: left;
}
.glass-form .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 768px) { .glass-form .field-grid { grid-template-columns: 1fr; } }

/* ---------- 页脚文字行 ---------- */
.footer .hotlines .footer-text-line { font-size: 14px; line-height: 1.9; color: var(--dark-dim); }

/* ---------- CWPageClass：作品集轮播卡片 ---------- */
.gallery-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(15, 27, 61, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.gallery-card:hover { transform: translateY(-6px); border-color: rgba(10, 108, 255, 0.35); box-shadow: 0 20px 44px rgba(10, 108, 255, 0.16); }
.gallery-card .figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-item-desc { padding: 16px 18px 18px; }
.gallery-item-desc h3 { font-size: 17px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-item-desc p { margin-top: 4px; font-size: 13.5px; color: var(--ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 封面网格 */
.cyclopedia-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cyc-card { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cyc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.cyc-card.cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cyc-card.cover .mask {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 18px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(5, 11, 30, 0.85));
}
.cyc-card.text {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.cyc-card.text:hover { border-color: rgba(10, 108, 255, 0.45); color: var(--brand); }

/* 资讯列表 */
.news-list-mod { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: stretch; }
.news-items-col { display: flex; flex-direction: column; gap: 14px; }
.news-list-mod a { display: block; border-radius: var(--radius-md); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.news-list-mod a:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.news-item.feature > a {
  height: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
}
.news-item.feature .cover-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-item.feature .footer-info { padding: 18px 20px 20px; }
.news-item.feature .title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.news-item.feature .desc { margin-top: 6px; font-size: 14px; color: var(--ink-sub); }
.news-items-col .news-item > a {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.news-items-col .news-item .title { font-size: 15.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-items-col .news-item .meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.news-items-col .news-item .desc { font-size: 13.5px; color: var(--ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-items-col .news-item .datetime { flex-shrink: 0; font-size: 13px; color: #a4b4d1; }

/* 团队轮播 */
.team-mod-row { display: flex; align-items: center; gap: 16px; }
/* 团队轮播：占满两箭头之间的空间，滑块定宽防止内容撑爆；上下留白（负 margin 抵消）给悬浮阴影留渲染空间 */
.teamSwiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 12px 0 48px;
  margin: -12px 0 -48px;
}
/* 强制同行卡片等高：slide 拉伸到最高一张，卡片 a 撑满 slide，info 用 flex:1 吃掉剩余空间 */
.teamSwiper .swiper-wrapper { align-items: stretch; }
.teamSwiper .swiper-slide { width: 264px; height: auto; display: flex; flex-direction: column; }
.nav-arrow {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(15, 27, 61, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.nav-arrow svg { width: 20px; height: 20px; stroke: var(--ink-sub); }
.nav-arrow:hover { transform: translateY(-2px); border-color: rgba(10, 108, 255, 0.45); }
.nav-arrow:hover svg { stroke: var(--brand); }
.teamSwiper .team-member > a {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(15, 27, 61, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.teamSwiper .team-member > a:hover { transform: translateY(-5px); border-color: rgba(10, 108, 255, 0.35); box-shadow: 0 20px 44px rgba(10, 108, 255, 0.16); }
.team-member .photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; flex-shrink: 0; }
.team-member .info { flex: 1; padding: 16px 18px 18px; }
.team-member .name { font-size: 16.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-member .dutuies { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--brand); }
.team-member .desc { margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: var(--ink-sub); }

/* 左轮播右网格 */
.split-gallery { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: stretch; }
.split-gallery > * { min-width: 0; } /* 防止 swiper 内容把 grid 列撑爆 */
.split-cell { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.split-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.split-cell img { width: 100%; height: 100%; object-fit: cover; }
.split-cell .zz {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(5, 11, 30, 0.85));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.al-right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.al-right .split-cell img { aspect-ratio: 4 / 3; }
/* 左侧轮播：高度跟随右侧网格（grid stretch），图片裁切填充，禁止溢出 */
.al-left {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.al-left .swiper-container { width: 100%; height: 100%; padding-bottom: 0; }
.al-left .swiper-wrapper { height: 100%; }
.al-left .swiper-slide { height: 100%; }
.al-left .split-cell { height: 100%; }
.al-left .split-cell img { width: 100%; height: 100%; object-fit: cover; }
.al-left .swiper-button-prev, .al-left .swiper-button-next { color: #fff; --swiper-theme-color: #fff; }
.al-left .swiper-button-prev::after, .al-left .swiper-button-next::after { filter: drop-shadow(0 2px 6px rgba(5, 11, 30, 0.6)); }

/* Swiper 导航箭头统一换肤 */
/* 作品集轮播（IndexStyle1）：滑块定宽（约 3 卡/屏），防止图片原始尺寸撑爆 */
/* 箭头外置：左右 .nav-arrow 与轮播平排，不遮挡卡片 */
.gallery-mod-row { display: flex; align-items: center; gap: 18px; }
.gallery-mod-row .IndexStyle1 { flex: 1; min-width: 0; overflow: hidden; }
/* 上下留白（负 margin 抵消），给悬浮阴影留出渲染空间，避免 hover 阴影被裁切 */
.IndexStyle1 { padding: 12px 0 48px; margin: -12px 0 -48px; }
.IndexStyle1 .gallery-card { box-shadow: 0 10px 26px rgba(15, 27, 61, 0.08); }
.IndexStyle1 .gallery-card:hover { box-shadow: 0 20px 44px rgba(10, 108, 255, 0.16); }
.IndexStyle1 .swiper-slide { width: 380px; height: auto; }

/* 文本响应式小屏调整 */
@media (max-width: 1100px) {
  .cyclopedia-grid { grid-template-columns: repeat(2, 1fr); }
  .news-list-mod { grid-template-columns: 1fr; }
  .split-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .team-mod-row { gap: 10px; }
  .gallery-mod-row { gap: 10px; }
  .nav-arrow { width: 38px; height: 38px; }
  .cyclopedia-grid { grid-template-columns: 1fr; }
  .al-right { grid-template-columns: 1fr 1fr; gap: 10px; }
  .IndexStyle1 .swiper-slide { width: 280px; }
  .teamSwiper .swiper-slide { width: 224px; }
}

/* 详情页 VR 徽标 */
.vr-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(5, 11, 30, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.vr-badge img { width: 18px; height: 18px; }

/* ============================================================
   列表页 / 详情页版式
   ============================================================ */

/* 内页无深色 hero，顶部留白需让开 fixed 顶栏（72px） */
.page-section { padding-top: 96px; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* 面包屑 */
.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-sub);
  margin-bottom: 26px;
}
.crumbs i { color: #b6c3dd; }
.crumbs .bread-item { color: var(--ink-sub); transition: color 0.2s ease; }
.crumbs .bread-item:hover { color: var(--brand); }
.crumbs .bread-item.active { color: var(--ink); font-weight: 600; }

/* 筛选 chips */
.filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(15, 27, 61, 0.05);
  margin-bottom: 30px;
}
.filter .filter-row { display: flex; align-items: baseline; gap: 16px; }
.filter .type-title { flex-shrink: 0; max-width: 120px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter .type-list { display: flex; flex-wrap: wrap; gap: 8px; }
.type-item {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink-sub);
  background: var(--light-alt);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}
.type-item:hover { color: var(--brand); border-color: rgba(10, 108, 255, 0.4); }
.type-item.active { color: #fff; background: var(--grad-brand); box-shadow: 0 6px 18px rgba(10, 108, 255, 0.28); }

/* 文章列表卡片 */
.newsList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.newsList a.newsItem {
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(15, 27, 61, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.newsList a.newsItem:hover { transform: translateY(-5px); border-color: rgba(10, 108, 255, 0.35); box-shadow: var(--shadow-card-hover); }
.newsList .newsItem .cover { width: 100%; height: 100%; object-fit: cover; }
.newsList .newsItem .maincon { padding: 18px 20px; min-width: 0; }
.newsList .newsItem .title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.newsList .newsItem .introduction { margin-top: 5px; font-size: 13px; color: var(--brand); }
.newsList .newsItem .desc {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newsList .newsItem .link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand);
}

/* 团队列表行卡 */
.team-list { display: flex; flex-direction: column; gap: 18px; }
.member-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(15, 27, 61, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.member-row:hover { transform: translateY(-4px); border-color: rgba(10, 108, 255, 0.35); box-shadow: var(--shadow-card-hover); }
.member-row .photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-sm); }
.member-row .header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.member-row .name { font-size: 19px; font-weight: 700; color: var(--ink); }
.member-row .resume { font-size: 13.5px; color: var(--brand); }
.member-row .introduction { margin-top: 8px; font-size: 14px; line-height: 1.85; color: var(--ink-sub); }
.member-row .member-footer { margin-top: 14px; }
.member-row .member-footer .btn { height: 38px; padding: 0 22px; font-size: 14px; }

/* 案例瀑布流 */
.al-pagelist { width: 100%; display: flex; align-items: flex-start; gap: 20px; margin: 10px 0 0 0; }
.al-pagelist .list-colunm { flex: 1; min-width: 0; }
.al-pagelist .al-item {
  display: block;
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.al-pagelist .al-item:hover { transform: translateY(-5px); border-color: rgba(10, 108, 255, 0.35); box-shadow: var(--shadow-card-hover); }
.al-item .al-cover { width: 100%; display: block; object-fit: contain; }
.al-item .card-bottom { padding: 15px 16px 17px; }
.card-bottom .al-title { font-size: 16.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-bottom .al-desc { margin-top: 5px; font-size: 13.5px; color: var(--ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 加载更多按钮 */
.btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  margin: 34px auto 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
  background: #fff;
  border: 1px solid rgba(10, 108, 255, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-more:hover { background: var(--grad-brand); color: #fff; box-shadow: 0 12px 30px rgba(10, 108, 255, 0.32); }

.nodata { display: none; text-align: center; padding: 60px 0 10px; }
.nodata img { display: inline-block; width: 180px; opacity: 0.7; }

/* 列表富文本尾段 */
.pageCon { margin-top: 50px; }

/* ---------- 详情页 ---------- */
.detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: 36px; align-items: start; }
.detail-layout > * { min-width: 0; } /* 防富文本长内容撑破栅格 */
.detail-main {
  padding: 36px 40px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.detail-main .article-title { font-size: 30px; font-weight: 800; line-height: 1.45; color: var(--ink); }
.detail-main .article-info { margin-top: 14px; font-size: 13.5px; color: #93a2c0; }
.article-source { margin-top: 24px; font-size: 13.5px; color: #a4b4d1; }
.article-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.article-footer .link {
  font-size: 14.5px;
  /* 比正文浅一档，与正文内容区分开 */
  color: #a4b4d1;
  transition: color 0.2s ease;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.article-footer .link:hover { color: var(--brand); }

/* sticky 侧栏仅用于栅格布局（文章页 320px 侧栏）；通栏堆叠的 aside 若加 sticky，
   高于视口时会随滚动在包含块内下移，盖住后面的 detail-footer-nav */
.detail-layout .detail-aside { position: sticky; top: 90px; }
/* 案例页：aside 通栏堆叠在 detail-main 下方，拉开间距 */
.container > .detail-aside { margin-top: 44px; }
.aside-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 16px; padding-left: 12px; border-left: 4px solid var(--brand); }
.recommendList { display: flex; flex-direction: column; gap: 12px; }
.detail-footer-nav { margin: 44px 0 0; padding: 24px 40px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px) saturate(1.15); -webkit-backdrop-filter: blur(8px) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--radius-md); }
.recommendItem {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.recommendItem:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.recommendItem .cover { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
.recommendItem .maincon { min-width: 0; align-self: center; }
.recommendItem .title { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recommendItem .desc { margin-top: 4px; font-size: 12.5px; color: var(--ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 正文排版 */
.article-con { margin-top: 26px; }
.prose p, .article-con p { margin: 0; }
.article-con img { max-width: 100%; border-radius: var(--radius-sm); }
.article-con table { width: 100%; border-collapse: collapse; }
.article-con table td, .article-con table th { border: 1px solid var(--line); padding: 8px 12px; }

/* 案例详情：头部操作与信息栅格 */
.detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.detail-actions .item { margin-right: auto; }
.detail-actions .btn { height: 40px; padding: 0 20px; font-size: 14px; }
.share-btn svg { display: none; }
.qrcodePopwindow {
  position: absolute;
  right: 0;
  top: 48px;
  z-index: 20;
  display: none;
  width: 220px;
  padding: 18px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
}
.qrcodePopwindow.show { display: block; }
.qrcodePopwindow .share-title { font-size: 15px; font-weight: 700; color: var(--ink); position: relative; }
.qrcodePopwindow .share-title .icon-guanbi { position: absolute; right: 0; top: 0; cursor: pointer; }
.qrcodeBox { margin: 14px auto 0; width: 160px; }
.qrcodeBox canvas, .qrcodeBox img { width: 100% !important; }
.qrcodePopwindow .share-tips { margin-top: 10px; font-size: 12.5px; color: var(--ink-sub); }

.neck.detail-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; margin-top: 28px; align-items: stretch; }
.neck .vr-con { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.neck .vr-con .article-cover { width: 100%; object-fit: cover; }
.neck .vrtag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5, 11, 30, 0.25); transition: background 0.3s ease; }
.neck .vrtag img { width: 56px; padding: 8px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; }
.neck .vr-con:hover .vrtag { background: rgba(5, 11, 30, 0.4); }
.rightInfo { display: flex; flex-direction: column; gap: 18px; }
.designer { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.designer:hover { border-color: rgba(10, 108, 255, 0.4); box-shadow: var(--shadow-card-hover); }
.designer .headimg { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.designer .designer_intro .name { font-size: 16px; font-weight: 700; color: var(--ink); }
.designer .designer_intro .desc { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.label_item { font-size: 12.5px; color: var(--brand); background: rgba(10, 108, 255, 0.07); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(10, 108, 255, 0.18); }
.labels { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); }
.labels .item { font-size: 14px; }
.labels .item .intro { color: #93a2c0; }
.labels .item .detext { color: var(--ink); }
.footBtn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.f_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
  background: #fff;
  border: 1px solid rgba(10, 108, 255, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.f_btn.primary { color: #fff; background: var(--grad-brand); border-color: transparent; box-shadow: 0 10px 26px rgba(10, 108, 255, 0.32); }
.f_btn:hover { transform: translateY(-2px); }

.img-group-con { margin-top: 44px; }
.img-group-con .group-title { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.imgPreview { border-radius: var(--radius-md); overflow: hidden; }
.imgGroup-container { margin-top: 14px; padding: 0 46px; position: relative; }
.imgGroup .swiper-slide img { border-radius: 8px; cursor: pointer; opacity: 0.65; transition: opacity 0.25s ease; }
.imgGroup .swiper-slide-thumb-active img { opacity: 1; outline: 2px solid var(--brand); outline-offset: -2px; }
.imgGroup .swiper-button-prev { left: 0; }
.imgGroup .swiper-button-next { right: 0; }
.imgGroup .swiper-button-prev, .imgGroup .swiper-button-next { color: var(--ink-sub); }

/* 设计师个人页 Hero */
.team-hero { min-height: 0; padding: 150px 0 90px; }
.team-hero .container { grid-template-columns: 1fr 380px; }
.team-hero .name { font-size: 44px; font-weight: 800; color: var(--dark-text); }
.team-hero .chips-dark { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.team-hero .skill { margin-top: 8px; font-size: 15px; color: var(--dark-sub); }
.team-photo {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(2, 6, 20, 0.5), 0 0 0 1px rgba(143, 183, 255, 0.2);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }

/* 小屏适配 */
@media (max-width: 1100px) {
  .detail-layout { grid-template-columns: 1fr; }
  .neck.detail-grid { grid-template-columns: 1fr; }
  .team-hero .container { grid-template-columns: 1fr; gap: 36px; }
  .newsList { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* 移动端顶栏高 62px，同样需让开 */
  .page-section { padding-top: 84px; }
  .newsList a.newsItem { grid-template-columns: 1fr; }
  .newsList .newsItem .cover { aspect-ratio: 16/9; }
  .member-row { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; }
  .al-pagelist { flex-wrap: wrap; }
  .al-pagelist .list-colunm { flex: 1 1 calc(50% - 10px); }
  .detail-main { padding: 24px 20px; }
}