/* ============================================================
   MaSe 官网改版 · 设计系统 v5（CuBoKa 技法 · MaSe 品牌蓝）
   风格：浅色玻璃拟态 + 编辑部式排版装饰（幽灵巨字/跑马灯/模块编号）
   品牌色延续原站实测：#2165FC / #0D54CE / #F8FAFE / 胶囊按钮
   ============================================================ */

:root {
  /* 品牌色（原站核验，保持不变） */
  --brand: #2165FC;
  --brand-deep: #0D54CE;
  --brand-darker: #0A3C9C;
  --brand-ink: #264AB5;
  --blue-050: #F8FAFE;
  --blue-075: #EEF3FB;
  --blue-100: #E5EDF9;
  --blue-200: #D3E1FB;
  --blue-300: #B9CFFF;
  --blue-400: #84AAFF;
  --blue-500: #408BF7;

  /* 中性色 */
  --ink-900: #101828;
  --ink-700: #344054;
  --ink-500: #5D6B84;
  --white: #FFFFFF;
  --line: #DFE6F3;
  --line-2: #C6D4EE;

  /* 语义色 */
  --ok: #12B76A; --ok-bg: #EAF8F1;
  --warn: #B54708; --warn-bg: #FEF3E2;
  --danger: #D92D20;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang SC VF",
    "Source Han Sans SC", "Noto Sans SC", "Segoe UI", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  /* 尺寸（CuBoKa 尺度） */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 112px);
  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --pill: 999px;

  /* 阴影（蓝调投影） */
  --shadow-card: 0 1px 2px rgba(13, 84, 206, .05), 0 10px 28px rgba(13, 84, 206, .08);
  --shadow-lift: 0 2px 4px rgba(13, 84, 206, .05), 0 20px 44px rgba(13, 84, 206, .14);
  --shadow-pop: 0 6px 14px rgba(13, 84, 206, .1), 0 28px 64px rgba(13, 84, 206, .2);
  --shadow-onDark: 0 24px 70px rgba(3, 20, 60, .5);

  /* 渐变语言（蓝系） */
  --grad-brand: linear-gradient(158deg, #4D8DFF 0%, #2165FC 55%, #0D54CE 100%);
  --grad-soft: linear-gradient(152deg, #F4F8FF 0%, #E9F0FC 55%, #DCE8FA 100%);
  --grad-sky: linear-gradient(180deg, #B9CFFF 0%, #84AAFF 100%);
  --grad-text: linear-gradient(94deg, #2165FC 0%, #0D54CE 55%, #408BF7 100%);
  --grad-bar: linear-gradient(90deg, #408BF7, #2165FC 60%, #84AAFF);

  /* 噪点（深色区块极低透明度） */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --focus-ring: 2px solid #2165FC;
  --ease: cubic-bezier(.22, .8, .32, 1);
  --ease-bounce: cubic-bezier(.2, .9, .3, 1.2);
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--blue-050);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-deep); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--brand); }
h1, h2, h3, h4 { color: var(--ink-900); margin: 0 0 .5em; line-height: 1.22; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: .45em; }
strong { color: var(--ink-900); font-weight: 600; }
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--brand-deep); color: #fff; padding: 10px 18px;
  border-radius: 8px; transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue-200); color: var(--brand-deep); }

/* ---------- 排版尺度 ---------- */
.h1 { font-size: clamp(36px, 4.7vw, 56px); line-height: 1.13; letter-spacing: -.01em; font-weight: 800; text-wrap: balance; }
.h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.25; letter-spacing: -.006em; text-wrap: balance; }
.h3 { font-size: clamp(19px, 1.6vw, 22px); }
.lead { font-size: clamp(17px, 1.4vw, 18.5px); color: var(--ink-500); }
h1 em, .h1 em, h2 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 眉标：渐变圆点 + 光环（CuBoKa 式） */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-deep); margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--grad-sky); flex: none;
  box-shadow: 0 0 0 3px rgba(64, 139, 247, .26);
}
.section-head { max-width: 740px; margin-bottom: clamp(30px, 4vw, 48px); position: relative; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head--center .eyebrow::before { display: none; }
.section-head--center .eyebrow::after {
  content: ""; width: 34px; height: 2px; background: var(--blue-300); border-radius: 2px;
}

/* ---------- 区块：角落光斑分层 ---------- */
.section { padding-block: var(--section-y); position: relative; background:
  radial-gradient(700px 460px at 88% 12%, rgba(132, 170, 255, .2), transparent 62%),
  radial-gradient(660px 440px at 6% 88%, rgba(33, 101, 252, .1), transparent 62%);
}
.section > .container { position: relative; z-index: 1; }
.section--tight { padding-block: clamp(44px, 6vw, 72px); }
.section--alt { background:
  radial-gradient(820px 520px at 8% 8%, rgba(33, 101, 252, .12), transparent 64%),
  radial-gradient(760px 500px at 94% 88%, rgba(185, 207, 255, .22), transparent 64%),
  var(--white);
}
.section--tint { background:
  radial-gradient(90% 120% at 8% 0%, rgba(255, 255, 255, .65), transparent 55%),
  radial-gradient(760px 480px at 88% 8%, rgba(132, 170, 255, .2), transparent 62%),
  radial-gradient(520px 380px at 12% 90%, rgba(185, 207, 255, .18), transparent 62%),
  linear-gradient(165deg, #F7FAFF 0%, var(--blue-075) 55%, #E2EBF8 100%);
}
/* 深色区（CTA/页脚底座）：渐变 + 噪点 + 圆环 */
.section--deep {
  position: relative; overflow: hidden;
  background: var(--grad-soft); color: var(--ink-700);
}
.section--deep::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--grain); opacity: .04; mix-blend-mode: multiply; pointer-events: none;
}
.section--deep::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; border-radius: 50%;
  border: 1.5px solid rgba(33, 101, 252, .24);
  top: -180px; right: -140px;
  box-shadow: 0 0 0 70px rgba(33, 101, 252, .06), 0 0 0 150px rgba(33, 101, 252, .035);
}
.section--deep h2, .section--deep h3 { color: var(--ink-900); }
.section--deep .lead { color: var(--ink-500); }

/* 模块幽灵编号 */
.sec-no {
  position: absolute; top: clamp(6px, 1.5vw, 18px); left: var(--gutter); z-index: 0;
  font-size: clamp(70px, 10vw, 132px); font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(13, 84, 206, .13);
  pointer-events: none; user-select: none; letter-spacing: .02em;
}
.section--tint .sec-no { -webkit-text-stroke-color: rgba(13, 84, 206, .16); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h, 48px); padding: 0 28px;
  border-radius: var(--pill);
  font-size: 16px; font-weight: 650; font-family: inherit;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s, color .16s, border-color .16s;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(13, 84, 206, .18), inset 0 1px 0 rgba(255,255,255,.14); }
.btn--primary:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1.5px); box-shadow: 0 12px 26px rgba(13, 84, 206, .24), inset 0 1px 0 rgba(255,255,255,.14); }
/* 白按钮在浅色首屏＝玻璃次按钮 */
.btn--white {
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(14px) saturate(1.8); -webkit-backdrop-filter: blur(14px) saturate(1.8);
  color: var(--brand-deep); border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 22px rgba(13, 84, 206, .12), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn--white:hover { background: #fff; color: var(--brand-darker); border-color: var(--blue-300); transform: translateY(-1.5px); box-shadow: 0 12px 26px rgba(13, 84, 206, .16); }
.btn--ghost { background: transparent; color: var(--brand-deep); border-color: var(--blue-300); }
.btn--ghost:hover { border-color: var(--brand-deep); background: rgba(33, 101, 252, .06); }
.btn--ghost-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn--ghost-light:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.9); }
.btn--sm { height: 40px; padding: 0 20px; font-size: 15px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.link-arrow { font-weight: 600; color: var(--brand-deep); display: inline-flex; align-items: center; gap: 6px; }
.link-arrow::after { content: "→"; transition: transform .18s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 阅读进度条 ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.scroll-progress i {
  display: block; height: 100%; width: 0;
  background: var(--grad-bar);
  border-radius: 0 3px 3px 0;
  transition: width .12s linear;
}

/* ---------- 导航（毛玻璃） ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 250, 254, .48);
  backdrop-filter: saturate(2.4) blur(30px);
  -webkit-backdrop-filter: saturate(2.4) blur(30px);
  border-bottom: 1px solid rgba(13, 84, 206, .08);
  transition: background .25s, box-shadow .25s;
}
.site-nav.is-scrolled { background: rgba(248, 250, 254, .66); box-shadow: 0 10px 34px -22px rgba(13, 84, 206, .4); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.brand__logo { height: 30px; width: auto; display: block; }
@media (max-width: 560px) { .brand__logo { height: 26px; } }
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-links > .nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 13px; border-radius: 10px;
  font-size: 15.5px; font-weight: 500; color: var(--ink-700);
  transition: color .15s, background .15s;
  border: 0; background: none; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--brand-deep); background: rgba(33, 101, 252, .08); }
.nav-link .caret {
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s; flex-shrink: 0;
}
.nav-link[aria-expanded="true"] .caret { transform: rotate(225deg) translateY(-1px); }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
/* 中等宽度：压缩导航间距，保证整条导航单行不折行、不溢出 */
@media (max-width: 1280px) {
  .nav-inner { gap: 16px; }
  .nav-links { gap: 0; }
  .nav-link { padding: 8px 9px; font-size: 14.5px; }
  .lang-btn { padding: 8px 10px; }
  .nav-cta { gap: 8px; }
}
@media (max-width: 1120px) {
  .nav-inner { gap: 12px; }
  .brand__logo { height: 26px; }
  .nav-link { padding: 8px 8px; font-size: 14px; }
  .lang-btn { font-size: 13.5px; }
}
/* 语言切换：点击展开下拉 */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px 8px 14px; border-radius: var(--pill);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 14px; font-weight: 600; color: var(--ink-700);
  font-family: inherit; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.lang-btn:hover, .lang-switch.is-open .lang-btn { border-color: var(--blue-300); color: var(--brand-deep); background: #fff; }
.lang-btn .globe { width: 16px; height: 16px; flex-shrink: 0; }
.lang-btn .caret {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .2s; flex-shrink: 0; opacity: .7;
}
.lang-switch.is-open .lang-btn .caret { transform: rotate(225deg) translateY(0); }
.lang-drop {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 150px; padding: 7px;
  background: #FFFFFF;
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(13, 84, 206, .2), 0 2px 8px rgba(13, 84, 206, .08), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px) scale(.98); transform-origin: top right;
  transition: opacity .2s, transform .22s var(--ease-bounce);
  z-index: 60;
}
.lang-switch.is-open .lang-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.lang-drop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.lang-drop a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-700);
}
.lang-drop a:hover { background: var(--blue-075); color: var(--brand-deep); }
.lang-drop a[aria-current] { color: var(--brand); background: var(--blue-075); }
.lang-drop .tick { width: 14px; height: 14px; flex-shrink: 0; visibility: hidden; }
.lang-drop a[aria-current] .tick { visibility: visible; }

/* 下拉菜单（弹层带回弹） */
.nav-drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px) scale(.98);
  min-width: 300px; padding: 10px;
  background: #FFFFFF;
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(13, 84, 206, .2), 0 2px 8px rgba(13, 84, 206, .08), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform-origin: top center;
  transition: opacity .2s, transform .22s var(--ease-bounce);
}
.nav-item:hover > .nav-drop, .nav-item:focus-within > .nav-drop, .nav-item.is-open > .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1);
}
/* 悬停桥：填补按钮与下拉之间的 10px 空隙，鼠标移向下拉时不会中断悬停 */
.nav-drop::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav-drop a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 14px; border-radius: 12px; color: var(--ink-700);
}
.nav-drop a:hover { background: var(--blue-075); color: var(--brand-deep); }
.nav-drop .drop-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(160deg, var(--blue-075), var(--blue-100));
  color: var(--brand-deep); border: 1px solid var(--blue-200);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; box-shadow: inset 0 1px 0 #fff;
}
.nav-drop .drop-ico svg { width: 22px; height: 22px; display: block; }
.nav-drop strong { display: block; font-size: 14.5px; color: var(--ink-900); font-weight: 600; line-height: 1.35; }
.nav-drop span.drop-desc { display: block; font-size: 12.5px; color: var(--ink-500); line-height: 1.5; margin-top: 2px; }
.nav-drop .drop-tag { font-size: 11px; color: var(--brand); font-weight: 600; letter-spacing: .06em; }

/* 移动端导航 */
.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--white); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle .bar { width: 18px; height: 2px; border-radius: 2px; background: var(--brand-deep); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; margin-left: 0; }
  .nav-cta { margin-left: auto; }
}
/* 整页菜单：汉堡点击后进入的全屏菜单页（顶部让出导航栏，汉堡变为 ×） */
.mobile-menu {
  position: fixed; left: 0; right: 0; top: 74px; bottom: 0; z-index: 99;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--blue-050);
  padding: 8px var(--gutter) 40px;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .24s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .24s var(--ease), transform .28s var(--ease);
}
body.menu-locked { overflow: hidden; }
.mobile-menu .mm-group { border-top: 1px solid var(--line); padding: 6px 0; }
.mobile-menu .mm-group > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; font: inherit; font-weight: 600; color: var(--ink-900);
  padding: 15px 0; cursor: pointer; font-size: 17px;
}
.mobile-menu .mm-group > button::after { content: "+"; font-size: 22px; color: var(--brand); }
.mobile-menu .mm-group.is-open > button::after { content: "–"; }
.mobile-menu .mm-sub { display: none; padding: 2px 0 10px; }
.mobile-menu .mm-group.is-open .mm-sub { display: block; }
.mobile-menu .mm-sub a { display: block; padding: 12px 4px 12px 14px; color: var(--ink-700); font-size: 15px; border-left: 2px solid var(--blue-200); }
.mobile-menu .mm-cta { margin-top: 20px; display: grid; gap: 12px; padding-bottom: 24px; }
/* 移动端菜单内：语言下拉改为行内展开，避免面板溢出屏幕 */
.mobile-menu .lang-switch { position: static; }
.mobile-menu .lang-btn { width: 100%; justify-content: center; }
.mobile-menu .lang-drop {
  position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  display: none; margin-top: 10px; box-shadow: 0 6px 18px rgba(13, 84, 206, .1);
}
.mobile-menu .lang-drop::before { display: none; }
.mobile-menu .lang-switch.is-open .lang-drop { display: block; }

/* ---------- 首屏（浅色玻璃 · 光斑呼吸 · 幽灵字） ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 clamp(120px, 12vw, 170px);
  color: var(--ink-700);
  background:
    radial-gradient(90% 90% at 85% -10%, rgba(64, 139, 247, .34), transparent 58%),
    radial-gradient(80% 90% at 0% 20%, rgba(185, 207, 255, .4), transparent 60%),
    radial-gradient(500px 400px at 70% 90%, rgba(132, 170, 255, .22), transparent 62%),
    linear-gradient(165deg, #FDFEFF 0%, #F4F8FF 55%, #E7EFFC 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 160% 160%;
  animation: heroShift 18s ease-in-out infinite alternate;
}
@keyframes heroShift { from { background-position: 0% 0%; } to { background-position: 100% 90%; } }
.hero .h1 { color: var(--ink-900); margin-bottom: 22px; }
.hero .lead { max-width: 640px; }
.hero > .container { position: relative; z-index: 2; }
/* 幽灵品牌字 */
.hero::after {
  content: "MaSe"; position: absolute; z-index: 0; pointer-events: none;
  right: -2%; bottom: -6%;
  font-size: clamp(110px, 18vw, 260px); font-weight: 800; line-height: .8;
  letter-spacing: .01em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(13, 84, 206, .1);
}
/* 呼吸圆环 */
.hero .ring-deco, .hero > .ring-deco {
  position: absolute; z-index: 0; pointer-events: none;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1.5px solid rgba(33, 101, 252, .22);
  top: -140px; right: -110px;
  box-shadow: 0 0 0 60px rgba(33, 101, 252, .05);
}
/* 漂浮光斑 */
.hero .blob { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(56px); will-change: transform; }
.hero .blob--a { width: 480px; height: 480px; left: -140px; bottom: -170px; background: radial-gradient(circle, rgba(64, 139, 247, .3), transparent 62%); animation: blobFloat 11s ease-in-out infinite alternate; }
.hero .blob--b { width: 400px; height: 400px; right: 4%; top: -130px; background: radial-gradient(circle, rgba(185, 207, 255, .38), transparent 62%); animation: blobFloat 14s ease-in-out infinite alternate-reverse; }
@keyframes blobFloat { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(28px, -22px, 0) scale(1.08); } }

/* ---------- 内页首屏（编辑部式 · 左文右卡） ---------- */
.hero--page { padding: clamp(44px, 5.5vw, 72px) 0 clamp(80px, 8.5vw, 116px); }
.hero-page-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 4.5vw, 72px); align-items: center;
}
.hero-page-grid .h1 { margin-bottom: 18px; }
.hero-page-grid .lead { margin-bottom: 0; }
.hero-page-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* 行业页首屏 kicker：svg 图标 + 文字 */
.ind-kicker {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: .1em;
  color: var(--brand-deep); margin-bottom: 14px;
}
.ind-kicker svg { flex: none; }
@media (max-width: 940px) {
  .hero-page-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-side { max-width: 560px; }
}

/* 内页首屏侧板：玻璃面板 + 背后光晕 */
.hero-side { position: relative; }
.hero-side::before {
  content: ""; position: absolute; inset: -12% -9%; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 60% at 58% 42%, rgba(132, 170, 255, .38), transparent 72%);
}
.hero-side > * { position: relative; z-index: 1; }
.side-card {
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 26px;
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow: 0 18px 50px rgba(13, 84, 206, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.side-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-deep); margin: 0 0 4px;
}
.side-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
/* 目录行（资源页） */
.side-row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 2px; }
.side-row + .side-row { border-top: 1px dashed var(--line-2); }
.side-row .sr-ico {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-size: 17px; background: linear-gradient(152deg, #EAF1FE, #DCE8FB);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 8px rgba(13, 84, 206, .08);
}
.side-row .sr-ico svg { color: var(--brand-deep); }
.side-row strong { display: block; color: var(--ink-900); font-size: 15.5px; line-height: 1.4; }
.side-row small { display: block; color: var(--ink-500); font-size: 13.5px; line-height: 1.55; }
.side-foot {
  display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--brand-ink);
}
.side-foot i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-top: 6px; animation: pillPulse 2.2s ease-out infinite; }
/* 品牌树（关于页） */
.tree-node {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px; padding: 11px 14px;
  box-shadow: 0 6px 16px rgba(13, 84, 206, .07);
}
.tree-badge {
  flex: none; min-width: 58px; text-align: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 9px;
  background: #EAF1FE; color: var(--brand-deep);
}
.tree-badge--root { background: var(--grad-brand); color: #fff; box-shadow: 0 6px 14px rgba(13, 84, 206, .28); }
.tree-node > span strong { display: block; font-size: 14.5px; line-height: 1.35; color: var(--ink-900); }
.tree-node > span small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-500); }
.tree-kids { margin: 10px 0 0 26px; padding-left: 18px; border-left: 2px solid var(--blue-200); display: grid; gap: 10px; }
.tree-kids .tree-node { position: relative; }
.tree-kids .tree-node::before {
  content: ""; position: absolute; left: -18px; top: 50%; width: 14px; height: 2px; background: var(--blue-200);
}

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.28fr);
  gap: clamp(36px, 4.5vw, 72px); align-items: center;
}
/* 首页首屏标题：按视口微缩字号，保证带 <br> 的每个语义行单行放下（避免孤字折行） */
.hero--home .h1 { font-size: clamp(30px, calc(3.95vw - 3.5px), 49px); }
/* 服务页首屏：标题留在左栏（缩小字号两行排开），左栏加宽 */
.hero-grid--svc { grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr); }
.hero-grid--svc .h1 { font-size: clamp(26px, 2.9vw, 40px); margin-bottom: 18px; }
/* 标题偏长的服务页（如 GEO）再小一档 */
.hero-grid--svc .h1--fit { font-size: clamp(24px, 2.9vw, 36px); }
.hero-note { margin-top: 22px; font-size: 14.5px; color: var(--ink-500); }
.hero-note::before { content: "○"; color: var(--blue-500); margin-right: 8px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--brand-ink);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px) saturate(1.8); -webkit-backdrop-filter: blur(14px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .8);
  padding: 6px 14px; border-radius: var(--pill);
  box-shadow: 0 4px 14px rgba(13, 84, 206, .08), inset 0 1px 0 rgba(255,255,255,.85);
}
.hero-badge svg { color: var(--brand-deep); flex: none; }
.hero .btn--primary { box-shadow: 0 12px 28px rgba(13, 84, 206, .26), inset 0 1px 0 rgba(255,255,255,.14); }

/* 价格页首屏：居中版式 */
.hero--pricing { padding-bottom: clamp(88px, 9vw, 126px); }
.hero--pricing::after { content: "Pricing"; font-size: clamp(90px, 13vw, 190px); }
.hero-pricing { max-width: 880px; text-align: center; }
.hero-pricing .lead { margin-left: auto; margin-right: auto; max-width: 680px; }
.hero-pricing .btn-row { justify-content: center; margin-top: 30px; }
.hero-pricing .hero-note { margin: 26px auto 0; max-width: 760px; }
.hero-pricing .hero-note::before { content: none; }
.hero-badges--center { justify-content: center; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px;
  padding: 7px 16px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px) saturate(1.8); -webkit-backdrop-filter: blur(14px) saturate(1.8);
  box-shadow: 0 4px 14px rgba(13, 84, 206, .08), inset 0 1px 0 rgba(255,255,255,.85);
  font-size: 13px; font-weight: 600; color: var(--brand-deep);
}
.hero-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: pillPulse 2.2s ease-out infinite; }
@keyframes pillPulse {
  0% { box-shadow: 0 0 0 0 rgba(33, 101, 252, .4); }
  70% { box-shadow: 0 0 0 9px rgba(33, 101, 252, 0); }
  100% { box-shadow: 0 0 0 0 rgba(33, 101, 252, 0); }
}

/* 首屏视觉：玻璃舞台 */
.hero-visual { position: relative; }
.hero-visual::before {
  content: ""; position: absolute; inset: -8% -6% -12% -4%; z-index: 0;
  background: radial-gradient(58% 58% at 62% 38%, rgba(132, 170, 255, .32), transparent 72%);
  pointer-events: none;
}
.hero-visual > * { position: relative; z-index: 1; }
.hero-stage {
  position: relative;
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(14px) saturate(1.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.9);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 30px;
  padding: clamp(16px, 2.4vw, 28px);
  box-shadow: 0 18px 50px rgba(13, 84, 206, .12), inset 0 1px 0 rgba(255,255,255,.8);
}

/* 首屏多设备组合（显示器 + 平板 + 双手机，官方产品截图） */
.device-ensemble { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 100 / 54; }
.dev { position: absolute; }
.dev-frame {
  background: #EDF0F6; border-radius: 14px; padding: 7px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(3, 30, 90, .16), 0 2px 6px rgba(3, 30, 90, .06), inset 0 1px 0 #fff;
}
.dev-frame img { width: 100%; display: block; border-radius: 8px; object-fit: cover; }
.dev-monitor { right: 3%; top: 0; width: 64%; z-index: 1; animation: devFloat 7s ease-in-out infinite 1s; }
.dev-monitor .dev-frame img { aspect-ratio: 16 / 9.4; }
.dev-monitor .browser-frame__bar { margin: 0 0 6px; }
.dev-stand { width: 15%; height: 12px; margin: 0 auto; background: linear-gradient(180deg, #D5D7DE, #C8CAD2); border-radius: 0 0 3px 3px; }
.dev-stand-base { width: 27%; height: 7px; margin: 0 auto; background: linear-gradient(180deg, #C8CAD2, #BBBDC6); border-radius: 0 0 6px 6px; }
.dev-tablet { left: 1%; bottom: 0; width: 47%; z-index: 2; animation: devFloat 6.5s ease-in-out infinite .5s; }
.dev-tablet .dev-frame { border-radius: 16px; }
.dev-tablet .dev-frame img { aspect-ratio: 4 / 3.05; }
.dev-phone { width: 17%; z-index: 3; animation: devFloat 6s ease-in-out infinite; }
.dev-phone .dev-frame { padding: 5px; border-radius: 18px; }
.dev-phone .dev-frame img { aspect-ratio: 9 / 17.5; border-radius: 12px; }
.dev-phone--l { left: -1%; bottom: 3%; }
.dev-phone--r { right: 3%; bottom: 8%; animation-delay: .3s; }
@keyframes devFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 560px) {
  .dev-phone--r { display: none; }
  .dev-monitor { width: 74%; right: 0; }
  .dev-tablet { width: 44%; }
}
.browser-frame {
  background: #fff; border-radius: 14px;
  box-shadow: 0 14px 36px -8px rgba(3, 30, 90, .22), 0 0 0 1px rgba(13, 84, 206, .06);
  overflow: hidden;
}
.browser-frame__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--blue-075); border-bottom: 1px solid var(--line);
}
.browser-frame__dot { width: 10px; height: 10px; border-radius: 50%; }
.browser-frame__dot:nth-child(1) { background: #FF8181; }
.browser-frame__dot:nth-child(2) { background: #FFC24D; }
.browser-frame__dot:nth-child(3) { background: #6FD88F; }
.browser-frame__url {
  flex: 1; margin-left: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--pill);
  font-size: 11.5px; color: var(--ink-500); padding: 4px 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-frame img { width: 100%; }

/* 首屏辅助能力小卡（舞台下方静态排布，不遮设备截图） */
.hero-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.hero-chip {
  display: flex; flex-direction: column; align-items: flex-start;
  background: linear-gradient(165deg, rgba(255,255,255,.74), rgba(255,255,255,.52));
  backdrop-filter: blur(18px) saturate(1.9); -webkit-backdrop-filter: blur(18px) saturate(1.9);
  border: 1px solid rgba(255,255,255,.86); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 8px 22px rgba(13,84,206,.1), inset 0 1px 0 rgba(255,255,255,.9);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-700);
}
.hero-chip strong { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 4px; color: var(--ink-900); }
.hero-chip .fc-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--blue-100); color: var(--brand-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; flex-shrink: 0; }
.hero-chip .mock-tag { display: inline-block; margin: 5px 0 0; }
@media (max-width: 1024px) { .hero-chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hero-chips { grid-template-columns: 1fr; } .hero-chip { flex-direction: row; align-items: flex-start; } }

/* 玻璃贴纸（首屏浮卡，已由静态小卡替代，保留样式供回退） */
.float-card {
  position: absolute; z-index: 3;
  background: linear-gradient(165deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  backdrop-filter: blur(20px) saturate(2);
  -webkit-backdrop-filter: blur(20px) saturate(2);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 16px; padding: 12px 15px;
  box-shadow: 0 10px 26px rgba(13, 84, 206, .14), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--ink-700); font-size: 12.5px; line-height: 1.5; max-width: 224px;
}
.float-card strong { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 5px; }
.float-card .fc-ico {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--blue-100); color: var(--brand-deep);
}
.float-card--tl { top: -34px; left: -30px; transform: rotate(-2.5deg); }
.float-card--br { bottom: -126px; right: -34px; transform: rotate(2deg); }
/* ChatGPT 卡挂舞台顶部中央：下方是设备边框区，不遮屏幕内容 */
.float-card--bl { left: -20px; bottom: -120px; top: auto; transform: rotate(-1.5deg); }
.mock-tag {
  display: inline-block; font-size: 11px; font-weight: 650; letter-spacing: .05em;
  color: var(--brand-ink); background: rgba(238, 243, 251, .92);
  border: 1px solid var(--blue-200); border-radius: var(--pill);
  padding: 2px 10px; margin-top: 8px;
}
.hero-visual > .mock-tag { position: absolute; top: 14px; right: 14px; z-index: 4; margin: 0; background: rgba(255,255,255,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-visual .float-card .mock-tag { position: static; display: block; width: fit-content; margin: 8px 0 0; top: auto; right: auto; }
.float-card .mock-tag { display: block; width: fit-content; margin-top: 8px; }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 8px; max-width: 640px; min-width: 0; }
  .hero-visual > .mock-tag { position: static; display: inline-block; margin: 0 0 8px; }
  /* 移动端浮卡:整宽信息卡(标题行/描述/标签堆叠)。
     不能用 flex——卡片内的描述是裸文本节点,flex 会把它挤成独立的窄竖条 */
  .float-card--tl, .float-card--bl, .float-card--br {
    position: static; display: block; transform: none;
    width: 100%; max-width: 100%; margin-top: 12px;
  }
  .float-card strong { font-size: 14px; margin-bottom: 4px; }
  .float-card .mock-tag { margin-top: 6px; }
  .hero::after { font-size: clamp(90px, 16vw, 160px); bottom: -4%; }
}
@media (max-width: 560px) {
  .float-card { padding: 12px 14px; font-size: 12.5px; border-radius: 14px; }
  .hero::after { display: none; }
}

/* ---------- 跑马灯 ---------- */
.marquee {
  overflow: hidden; position: relative;
  background: rgba(244, 248, 255, .6);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-block: 1px solid rgba(195, 212, 238, .8);
  padding-block: 15px;
}
.marquee__track { display: flex; width: max-content; gap: 0; animation: marqueeSlide 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 18px; white-space: nowrap;
  padding-inline: 18px; font-size: 14.5px; font-weight: 650;
  letter-spacing: .12em; color: var(--brand-ink); text-transform: uppercase;
}
.marquee__item i { font-style: normal; color: var(--blue-500); font-size: 12px; }
@keyframes marqueeSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 玻璃卡片基座（链路/产品/信息/步骤/FAQ/行业/证据 共用技法） ---------- */
.glass, .chain-item, .product-card, .info-card, .step, .faq-item, .industry-card, .evidence-quote, .form-card {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,.62), rgba(255,255,255,.38));
  backdrop-filter: blur(26px) saturate(2);
  -webkit-backdrop-filter: blur(26px) saturate(2);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(13,84,206,.04), 0 16px 40px rgba(13,84,206,.08), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s, background .3s;
}
/* 鼠标跟随径向高光 + 顶部渐变条 */
.chain-item::before, .product-card::before, .info-card::before, .step::before,
.faq-item::before, .industry-card::before, .evidence-quote::before, .form-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(132, 170, 255, .16), transparent 66%);
  opacity: 0; transition: opacity .25s;
}
.chain-item:hover::before, .product-card:hover::before, .info-card:hover::before, .step:hover::before,
.industry-card:hover::before, .evidence-quote:hover::before { opacity: 1; }
.chain-item::after, .product-card::after, .info-card::after, .step::after, .industry-card::after, .evidence-quote::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-bar); opacity: 0; transition: opacity .18s;
}
.chain-item:hover::after, .product-card:hover::after, .info-card:hover::after, .industry-card:hover::after, .evidence-quote:hover::after { opacity: 1; }
.glass > *, .chain-item > *, .product-card > *, .info-card > *, .step > *, .industry-card > *, .evidence-quote > * { position: relative; z-index: 1; }
.glass-hover:hover, .chain-item:hover, .product-card:hover, .info-card:hover, .step:hover, .industry-card:hover, .evidence-quote:hover {
  transform: translateY(-6px);
  background: linear-gradient(165deg, rgba(255,255,255,.8), rgba(255,255,255,.58));
  border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 3px 6px rgba(13,84,206,.05), 0 26px 56px rgba(13,84,206,.14), inset 0 1px 0 rgba(255,255,255,.95);
}

/* ---------- 经营环节链路 ---------- */
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.chain-item { padding: 26px 22px 22px; }
.chain-item__num {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--grad-brand); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 12px rgba(13,84,206,.2);
}
.chain-item h3 { font-size: 17.5px; margin-bottom: 8px; }
.chain-item p { font-size: 14.5px; color: var(--ink-500); margin: 0; }
.chain-item .chain-arrow {
  position: absolute; top: 46px; right: -15px; z-index: 2;
  width: 12px; height: 12px; pointer-events: none;
  border-top: 2.5px solid var(--blue-400); border-right: 2.5px solid var(--blue-400);
  transform: rotate(45deg); background: none; box-shadow: none; opacity: 1;
}
.chain-item .chain-arrow::before, .chain-item .chain-arrow::after { content: none; }
.chain-item:last-child .chain-arrow { display: none; }
@media (max-width: 960px) {
  .chain { grid-template-columns: repeat(2, 1fr); }
  .chain-item:nth-child(2) .chain-arrow { display: none; }
}
@media (max-width: 560px) { .chain { grid-template-columns: 1fr; } .chain-item .chain-arrow { display: none; } }

/* ---------- 产品矩阵 ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card { display: flex; flex-direction: column; padding: 26px; text-decoration: none; color: var(--ink-700); }
.product-card:hover { color: var(--ink-700); }
.product-card__ico {
  width: 48px; height: 48px; border-radius: 15px; margin-bottom: 18px;
  background: linear-gradient(160deg, var(--blue-075), var(--blue-100));
  color: var(--brand-deep); border: 1px solid var(--blue-200);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 #fff; transition: transform .18s;
}
.product-card:hover .product-card__ico { transform: translateY(-2px) rotate(-4deg); }
.product-card__ico svg { width: 23px; height: 23px; }
.product-card h3 { font-size: 18.5px; margin-bottom: 8px; color: var(--ink-900); }
.product-card p { font-size: 14.5px; color: var(--ink-500); flex: 1; }
.product-card .link-arrow { font-size: 14.5px; margin-top: 16px; }
.product-card--featured {
  grid-column: span 2;
  flex-direction: row; align-items: center; gap: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(233,240,252,.5) 100%);
  padding: 30px 32px;
}
.product-card--featured .product-card__body { flex: 1; }
.product-card--featured .product-card__visual { flex: 0 0 38%; }
.product-card--featured .product-card__visual img { border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.product-card--featured h3 { font-size: 24px; }
.product-card--featured p { font-size: 15.5px; }
.product-card--featured .product-card__ico { margin-bottom: 14px; }
.product-card__chip {
  display: inline-block; margin-bottom: 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; color: var(--brand-deep);
  background: rgba(238, 243, 251, .92); border: 1px solid var(--blue-200);
  border-radius: var(--pill); padding: 4px 12px;
}
@media (max-width: 960px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .product-card--featured { grid-column: span 2; } }
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card--featured { grid-column: span 1; flex-direction: column; align-items: stretch; }
}

/* ---------- 通用卡片网格 ---------- */
.card-grid { display: grid; gap: 20px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.info-card { padding: 26px; }
.info-card .num { font-size: 15px; font-weight: 700; color: var(--brand); letter-spacing: .04em; display: block; margin-bottom: 10px; }
.info-card .card-tag {
  display: inline-block; margin: -2px 0 12px 10px; padding: 3px 12px; border-radius: 999px;
  background: rgba(233, 240, 251, .92); color: var(--brand-deep);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; vertical-align: middle;
}
.info-card h3 { font-size: 18px; }
.info-card p { font-size: 14.5px; color: var(--ink-500); margin: 0; }
@media (max-width: 960px) { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } }

/* ---------- 图文特性行 ---------- */
.feature-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4.5vw, 72px); align-items: center;
  padding: clamp(30px, 3.6vw, 48px) 0;
}
.feature-row + .feature-row { border-top: 1px solid rgba(223, 230, 243, .7); }
.feature-row--flip .feature-row__media { order: 2; }
.feature-row h3 { font-size: clamp(21px, 2vw, 26px); }
.feature-row p { font-size: 16px; color: var(--ink-500); }
.feature-row__points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.feature-row__points li {
  position: relative; padding: 12px 14px 12px 40px; margin: 0;
  font-size: 15px; color: var(--ink-700);
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(223, 230, 243, .7); border-radius: 14px;
}
.feature-row__points li::before {
  content: ""; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2312B76A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.feature-row__media img { border-radius: 14px; box-shadow: var(--shadow-lift); border: 1px solid var(--line); }
.media-note { font-size: 12.5px; color: var(--ink-500); margin-top: 10px; text-align: center; }
@media (max-width: 880px) {
  .feature-row { grid-template-columns: 1fr; gap: 22px; }
  .feature-row--flip .feature-row__media { order: 0; }
}

/* ---------- 步骤 ---------- */
.steps { display: grid; gap: 18px; counter-reset: step; }
.steps--hoz { grid-template-columns: repeat(3, 1fr); }
.step { padding: 24px; counter-increment: step; }
.step__num {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--grad-brand); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 12px rgba(13,84,206,.2);
}
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { font-size: 14.5px; color: var(--ink-500); margin: 0; }
@media (max-width: 880px) { .steps--hoz { grid-template-columns: 1fr; } }

/* ---------- 社媒代运营 · 平台服务流程动态插画 ---------- */
/* 站点线 + 行进光点 + 顺序脉冲 + 入场弹出；平台色仅作点缀，文案保持真实文本 */
.flow-scene { --cycle: calc(var(--n) * 1.5s); position: relative; padding: 36px 58px 32px; }
.flow-scene--fb  { --pf: #1877F2; --pf-soft: rgba(24,119,242,.16); --pf-soft2: rgba(24,119,242,.28); --pf-line: rgba(24,119,242,.30); }
.flow-scene--red { --pf: #FF2442; --pf-soft: rgba(255,36,66,.14);  --pf-soft2: rgba(255,36,66,.26);  --pf-line: rgba(255,36,66,.28); }
.flow-scene--tt  { --pf: #111827; --pf-soft: rgba(17,24,39,.12);   --pf-soft2: rgba(17,24,39,.22);   --pf-line: rgba(17,24,39,.24); --pf-dot: linear-gradient(135deg, #25F4EE, #FE2C55); }
.fs-track {
  --edge: calc((100% - (var(--n) - 1) * 16px) / (var(--n) * 2));
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); column-gap: 16px;
}
.fs-track::before {
  content: ""; position: absolute; top: 18.5px; left: var(--edge); right: var(--edge);
  height: 3px; border-radius: 2px; background: var(--pf-line);
}
.fs-track::after {
  content: ""; position: absolute; top: 14px; left: var(--edge);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pf-dot, var(--pf)); box-shadow: 0 0 0 4px var(--pf-soft);
  animation: fsTravel var(--cycle) linear infinite;
}
@keyframes fsTravel {
  0%   { left: var(--edge); opacity: 0; }
  7%   { opacity: 1; }
  93%  { opacity: 1; }
  100% { left: calc(100% - var(--edge) - 12px); opacity: 0; }
}
.fs-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.js .fs-step.reveal { transition-delay: calc(var(--i) * .1s); }
.fs-dot {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  background: var(--pf); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; font-style: normal;
  box-shadow: 0 5px 14px var(--pf-soft2), inset 0 1px 0 rgba(255,255,255,.25);
}
.fs-dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid var(--pf); opacity: 0;
  animation: fsPing var(--cycle) ease-out infinite;
  animation-delay: calc(var(--i) * 1.5s);
}
@keyframes fsPing {
  0%   { opacity: .85; transform: scale(.7); }
  16%  { opacity: 0; transform: scale(1.32); }
  100% { opacity: 0; transform: scale(1.32); }
}
.fs-txt { margin-top: 14px; max-width: 210px; }
.fs-txt h3 { font-size: 16.5px; margin-bottom: 6px; }
.fs-txt p { font-size: 13.5px; color: var(--ink-500); margin: 0; }
/* 平台品牌图标浮标（assets/img/icons/，已按品牌色重制） */
.fs-deco {
  position: absolute; z-index: 1; width: 46px; height: 46px;
  display: grid; place-items: center;
  animation: fsBob 6.5s ease-in-out infinite;
}
.fs-deco--icon { border-radius: 13px; box-shadow: 0 12px 26px rgba(13, 84, 206, .16); }
.fs-deco--icon img { width: 100%; height: 100%; display: block; }
.fs-deco--a { top: 0; left: 0; }
.fs-deco--b { top: 42%; right: 0; animation-delay: -2.4s; }
@keyframes fsBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* 移动端：纵向时间线 */
@media (max-width: 880px) {
  .flow-scene { padding: 30px 2px 8px; }
  .fs-track { grid-template-columns: 1fr; row-gap: 30px; }
  .fs-track::before { display: none; }
  .fs-track::after { display: none; }
  .fs-step { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; }
  .fs-step::before {
    content: ""; position: absolute; left: 18.5px; top: 44px; bottom: -34px;
    width: 3px; border-radius: 2px; background: var(--pf-line);
  }
  .fs-step:last-child::before { display: none; }
  .fs-txt { margin-top: 2px; max-width: none; }
  .fs-deco--b { display: none; }
  .fs-deco--a { top: -4px; right: 2px; left: auto; width: 40px; height: 40px; border-radius: 12px; }
}

/* 流程（横向连接） */
.flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.flow-node {
  flex: 1 1 150px; position: relative;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 16px; margin: 0 22px 22px 0; text-align: center;
  transition: transform .16s, box-shadow .16s;
}
.flow-node:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.flow-node::after {
  content: ""; position: absolute; top: 50%; right: -22px; width: 22px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--blue-400) 0 5px, transparent 5px 9px);
}
.flow-node:last-child::after { display: none; }
.flow-node .fi { font-size: 22px; margin-bottom: 8px; display: block; }
.flow-node .fi svg { color: var(--brand-deep); }
.flow-node strong { display: block; font-size: 15px; color: var(--ink-900); }
.flow-node span { font-size: 12.5px; color: var(--ink-500); }

/* ---------- 表格 ---------- */
.table-wrap {
  overflow-x: auto; border-radius: var(--radius);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 2px 4px rgba(13,84,206,.04), 0 16px 40px rgba(13,84,206,.08);
}
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid rgba(223, 230, 243, .65); vertical-align: top; }
thead th { background: rgba(233, 240, 251, .8); color: var(--ink-900); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(244, 248, 255, .7); }
td .muted { color: var(--ink-500); font-size: 13px; }
.price-num { font-size: 21px; font-weight: 700; color: var(--ink-900); }
/* 表格内的价格：加粗；段内不折行（分段换行由内容中的 <br> 决定），窄屏随表格横向滚动 */
.table-wrap td .price-num { font-size: 18px; white-space: nowrap; }
.price-unit { font-size: 13px; color: var(--ink-500); font-weight: 400; }

/* ---------- 价格卡片（一行三列） ---------- */
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 34px 30px 30px;
  border-radius: 26px; background: rgba(255,255,255,.78); border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(13,84,206,.04), 0 18px 44px rgba(13,84,206,.09), inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.price-card::before {
  content: ""; position: absolute; top: -84px; right: -84px; width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(33,101,252,.13), transparent 72%); pointer-events: none;
}
.price-card:hover {
  transform: translateY(-6px); border-color: rgba(33,101,252,.35);
  box-shadow: 0 6px 14px rgba(13,84,206,.06), 0 28px 64px rgba(13,84,206,.15), inset 0 1px 0 rgba(255,255,255,.95);
}
.price-card__accent { width: 46px; height: 5px; border-radius: 99px; margin-bottom: 18px;
  background: linear-gradient(90deg, var(--brand), rgba(33,101,252,0)); }
.price-card__name { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink-900); letter-spacing: .01em; }
.price-card__tag { margin: 7px 0 0; font-size: 13px; color: var(--ink-500); }
.price-card__amount { margin-top: 24px; display: flex; align-items: baseline; gap: 5px; }
.price-card__cur { font-size: 21px; font-weight: 700; color: var(--ink-500); }
.price-card .price-num { font-size: 54px; font-weight: 800; color: var(--ink-900); letter-spacing: -.03em; line-height: 1; }
.price-card__per { margin-left: 7px; font-size: 13px; color: var(--ink-500); }
.price-card__yearly { margin: 12px 0 0; font-size: 13px; color: var(--ink-500); }
.price-card__sep { height: 1px; margin: 22px 0 0; background: rgba(223,230,243,.9); }
.price-card__diff-label { margin: 18px 0 0; align-self: flex-start; display: inline-flex; padding: 4px 11px;
  border-radius: 99px; background: rgba(33,101,252,.09); color: var(--brand-deep);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.price-card__diff { margin: 10px 0 22px; font-size: 14.5px; line-height: 1.75; color: var(--ink-700); flex: 1; }
.price-card__cta {
  margin-top: auto; display: inline-flex; justify-content: center; align-items: center; gap: 7px;
  padding: 13px 18px; border-radius: 14px; font-size: 14.5px; font-weight: 600; text-decoration: none;
  background: var(--brand); color: #FFFFFF; border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(33,101,252,.26);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.price-card__cta span { transition: transform .25s ease; }
.price-card__cta:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(13,84,206,.34); }
.price-card__cta:hover span { transform: translateX(3px); }

/* 三卡视觉层级：Pro 品牌蓝焦点，Business 深蓝 */
.price-card--hero {
  background: linear-gradient(165deg, #2A6BFA 0%, var(--brand) 38%, var(--brand-deep) 100%);
  border-color: rgba(255,255,255,.38); transform: translateY(-10px);
  box-shadow: 0 12px 26px rgba(13,84,206,.2), 0 34px 74px rgba(13,84,206,.36), inset 0 1px 0 rgba(255,255,255,.28);
}
.price-card--hero::before { background: radial-gradient(closest-side, rgba(255,255,255,.2), transparent 72%); }
.price-card--hero:hover { transform: translateY(-16px); border-color: rgba(255,255,255,.55);
  box-shadow: 0 16px 34px rgba(13,84,206,.24), 0 40px 88px rgba(13,84,206,.44), inset 0 1px 0 rgba(255,255,255,.3); }
.price-card--deep {
  background: linear-gradient(165deg, #1B47A8 0%, #12367F 55%, #0C2660 100%);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 26px rgba(9,32,74,.22), 0 34px 74px rgba(9,32,74,.36), inset 0 1px 0 rgba(255,255,255,.2);
}
.price-card--deep::before { background: radial-gradient(closest-side, rgba(255,255,255,.13), transparent 72%); }
.price-card--deep:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.4); }
.price-card--hero .price-card__accent,
.price-card--deep .price-card__accent { background: linear-gradient(90deg, #FFFFFF, rgba(255,255,255,0)); }
.price-card--hero .price-card__name,
.price-card--deep .price-card__name { color: #FFFFFF; }
.price-card--hero .price-card__tag,
.price-card--deep .price-card__tag { color: rgba(255,255,255,.82); }
.price-card--hero .price-card__cur,
.price-card--deep .price-card__cur { color: rgba(255,255,255,.85); }
.price-card--hero .price-num,
.price-card--deep .price-num { color: #FFFFFF; }
.price-card--hero .price-card__per,
.price-card--deep .price-card__per,
.price-card--hero .price-card__yearly,
.price-card--deep .price-card__yearly { color: rgba(255,255,255,.9); }
.price-card--hero .price-card__sep,
.price-card--deep .price-card__sep { background: rgba(255,255,255,.26); }
.price-card--hero .price-card__diff-label,
.price-card--deep .price-card__diff-label { background: rgba(255,255,255,.16); color: #FFFFFF; }
.price-card--hero .price-card__diff,
.price-card--deep .price-card__diff { color: rgba(255,255,255,.92); }
.price-card--hero .price-card__cta {
  background: #FFFFFF; color: var(--brand-deep); box-shadow: 0 10px 26px rgba(5,28,74,.32);
}
.price-card--hero .price-card__cta:hover { background: #F2F6FF; box-shadow: 0 14px 32px rgba(5,28,74,.4); }
.price-card--deep .price-card__cta {
  background: rgba(255,255,255,.08); color: #FFFFFF; border-color: rgba(255,255,255,.42); box-shadow: none;
}
.price-card--deep .price-card__cta:hover { background: rgba(255,255,255,.16); box-shadow: none; }

@media (max-width: 1024px) {
  .price-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .price-card--hero { transform: none; }
  .price-card--hero:hover { transform: translateY(-6px); }
  .price-card .price-num { font-size: 46px; }
}

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq-item { border-radius: 16px; padding: 4px 22px; }
.faq-item[open] { border-color: rgba(255, 255, 255, .95); background: rgba(255,255,255,.66); box-shadow: 0 3px 6px rgba(13,84,206,.05), 0 20px 44px rgba(13,84,206,.1), inset 0 1px 0 rgba(255,255,255,.95); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 17px 0; font-weight: 640; color: var(--ink-900); font-size: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex-shrink: 0; width: 11px; height: 11px;
  border-right: 2.2px solid var(--brand-deep); border-bottom: 2.2px solid var(--brand-deep);
  transform: rotate(45deg); transition: transform .2s var(--ease); margin-top: -4px;
}
.faq-item[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq-item .faq-a { padding: 0 0 18px; color: var(--ink-500); font-size: 15.5px; position: relative; z-index: 1; }

/* ---------- CTA 转化带（深蓝 + 噪点 + 圆环） ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--brand-deep), var(--brand-darker) 70%);
  border-radius: var(--radius-lg); color: #fff;
  padding: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center;
  box-shadow: var(--shadow-onDark);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--grain); opacity: .05; mix-blend-mode: overlay; pointer-events: none;
}
.cta-band::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 380px; height: 380px; border-radius: 50%;
  border: 1.5px solid rgba(185, 207, 255, .3);
  right: -100px; top: -140px;
  box-shadow: 0 0 0 60px rgba(185, 207, 255, .07);
}
.cta-band h2 { color: #fff; margin-bottom: 12px; position: relative; z-index: 2; }
.cta-band p { color: rgba(228, 238, 255, .9); margin: 0; position: relative; z-index: 2; }
.cta-band .btn-row { justify-content: flex-end; position: relative; z-index: 2; }
/* 深色底上的白按钮用实心白，保证对比 */
.cta-band .btn--white, .site-footer .btn--white {
  background: #fff; color: var(--brand-deep); border-color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 10px 26px rgba(2, 18, 60, .4);
}
.cta-band .btn--white:hover, .site-footer .btn--white:hover {
  background: var(--blue-050); color: var(--brand-darker); border-color: var(--blue-050);
}
@media (max-width: 760px) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn-row { justify-content: flex-start; }
}

/* ---------- 行业入口（玻璃卡 + 拱形门洞） ---------- */
.industry-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.industry-card {
  padding: 20px 20px 22px; display: flex; flex-direction: column;
  color: var(--ink-700); text-decoration: none;
}
.industry-card:hover { color: var(--ink-700); }
.industry-card__artbox {
  display: grid; place-items: center;
  width: min(100%, 150px); height: 118px;
  border-radius: 90px 90px 14px 14px;          /* 拱形：门店门洞 */
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px rgba(13, 84, 206, .1);
}
.industry-card__artbox img { width: 48px; height: 48px; filter: drop-shadow(0 3px 8px rgba(13, 84, 206, .2)); }
.tint-0 { background: linear-gradient(170deg, #E9F1FD, #C9DDF9); }
.tint-1 { background: linear-gradient(170deg, #E6F0FC, #BFD8F8); }
.tint-2 { background: linear-gradient(170deg, #EDF3FE, #D3E4FA); }
.tint-3 { background: linear-gradient(170deg, #E9EFFB, #C6DCF7); }
.tint-4 { background: linear-gradient(170deg, #E4EDFC, #B9D4F6); }
.industry-card h3 {
  font-size: 17.5px; margin: 0 0 6px; color: var(--ink-900);
  display: flex; align-items: center; gap: 8px;
}
.industry-card h3::after { content: "→"; margin-left: auto; color: var(--brand-deep); font-weight: 500; transition: transform .18s; }
.industry-card:hover h3::after { transform: translateX(4px); }
.industry-card p { font-size: 13px; color: var(--ink-500); margin: 0; line-height: 1.55; }
@media (max-width: 1024px) { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } .industry-card__artbox { width: 100%; } }

/* ---------- 面包屑 ---------- */
.breadcrumb { padding: 20px var(--gutter) 0; font-size: 13.5px; color: var(--ink-500); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.breadcrumb li { display: flex; gap: 6px; margin: 0; }
.breadcrumb li + li::before { content: "/"; color: var(--blue-400); }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--brand-deep); }
.breadcrumb [aria-current] { color: var(--ink-700); }

/* ---------- 页脚（深蓝 + 噪点 + 圆环 + 巨型字标） ---------- */
.site-footer { position: relative; overflow: hidden; background: linear-gradient(165deg, #0C3FAE 0%, #0A2E78 70%); color: rgba(226, 236, 255, .82); }
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--grain); opacity: .05; mix-blend-mode: overlay; pointer-events: none;
}
.site-footer::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  border: 1.5px solid rgba(185, 207, 255, .22);
  top: -200px; left: -140px;
  box-shadow: 0 0 0 80px rgba(185, 207, 255, .05);
}
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding: clamp(48px, 5.5vw, 72px) 0 40px; position: relative; z-index: 2; }
.footer-brand img { width: 132px; margin-bottom: 18px; }
.footer-brand p { font-size: 14px; line-height: 1.8; color: rgba(214, 228, 255, .72); max-width: 300px; }
.footer-col h4 { color: #fff; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: rgba(214, 228, 255, .82); font-size: 14.5px; }
.footer-col a:hover { color: #fff; }
.footer__word { display: none; }
.footer-bottom {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 22px 0 30px; display: flex; flex-wrap: wrap; gap: 12px 28px;
  justify-content: space-between; font-size: 13px; color: rgba(214, 228, 255, .6);
}
.footer-legal-links { display: inline-flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal-links a { color: rgba(214, 228, 255, .88); }
.footer-legal-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; position: relative; z-index: 2; }
.footer-social__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(214, 228, 255, .55); margin-right: 4px; }
.footer-social__link {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  font-size: 12.5px; color: rgba(226, 236, 255, .85); background: rgba(255, 255, 255, .06);
  transition: background .18s, color .18s, border-color .18s;
}
.footer-social__link:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .45); }
.footer-icp a { color: rgba(214, 228, 255, .6); text-decoration: underline; text-underline-offset: 3px; }
.footer-icp a:hover { color: rgba(214, 228, 255, .9); }

/* ---------- 发展历程（关于页时间轴） ---------- */
.about-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 18px 44px; align-items: center;
}
.about-intro p { font-size: 15.5px; line-height: 1.9; color: var(--ink-700); margin: 0 0 14px; }
.about-intro p:last-child { margin-bottom: 0; }
.about-intro__media { margin: 0; }
.about-intro__media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 44px rgba(13, 84, 206, .16);
}
.about-intro__media figcaption { font-size: 12.5px; color: var(--ink-500); margin-top: 9px; text-align: center; }
@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; gap: 22px; }
  .about-intro__media { order: -1; }
}
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.stat-card {
  padding: 20px 22px; display: flex; flex-direction: column; gap: 5px;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 26px rgba(13, 84, 206, .07);
}
.stat-card strong { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; color: var(--brand-deep); letter-spacing: -.01em; }
.stat-card span { font-size: 13px; color: var(--ink-500); line-height: 1.5; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 0; padding: 6px 0 2px; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--brand-deep), var(--blue-300));
  opacity: .25;
}
/* 桌面端：中轴居中，年份胶囊压轴，卡片左右交错 */
.timeline li {
  display: grid; grid-template-columns: 1fr 104px 1fr; align-items: center;
  gap: 0 26px; padding: 0; position: relative;
}
.timeline li + li { margin-top: 20px; }
.timeline__year {
  grid-column: 2; grid-row: 1; justify-self: center; z-index: 1;
  font-weight: 800; font-size: 16px; color: var(--brand-deep); white-space: nowrap;
  background: #FFFFFF; border: 1px solid var(--blue-200);
  border-radius: var(--pill); min-height: 44px; display: grid; place-items: center; padding: 4px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px rgba(13, 84, 206, .12);
}
.timeline__body {
  grid-column: 3; grid-row: 1;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 26px rgba(13, 84, 206, .07);
}
.timeline li:nth-child(odd) .timeline__body { grid-column: 1; }
.timeline__body h3 { font-size: 16.5px; margin: 0 0 5px; color: var(--ink-900); }
.timeline__body p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-500); }
@media (max-width: 900px) {
  .timeline::before { left: 25px; transform: none; }
  .timeline li { grid-template-columns: 52px 1fr; gap: 12px 16px; }
  .timeline__year {
    grid-column: 1; min-height: 40px; font-size: 12.5px; line-height: 1.2;
    padding: 4px 6px; white-space: normal; text-align: center; border-radius: 10px;
  }
  .timeline__body, .timeline li:nth-child(odd) .timeline__body { grid-column: 2; }
}

/* ---------- 用户评价（关于页，旧站公示口径） ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.quote-card { padding: 24px 26px; }
.quote-card blockquote { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: var(--ink-700); }
.quote-card blockquote::before { content: "“"; color: var(--brand-deep); font-weight: 800; font-size: 20px; margin-right: 2px; }
.quote-card figcaption { font-size: 13px; color: var(--ink-500); display: flex; align-items: center; gap: 8px; }
.quote-card figcaption::before { content: ""; width: 18px; height: 2px; background: var(--brand-deep); opacity: .5; }
@media (max-width: 760px) { .quote-grid { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- 表单（玻璃卡） ---------- */
.form-card { padding: clamp(28px, 4vw, 44px); box-shadow: 0 2px 4px rgba(13,84,206,.04), 0 16px 44px rgba(13,84,206,.1), inset 0 1px 0 rgba(255,255,255,.9); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
.form-grid .form-field--full { grid-column: 1 / -1; }
.form-field label { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink-900); margin-bottom: 7px; }
.form-field .req { color: var(--danger); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink-900);
  background: rgba(255, 255, 255, .8);
  border: 1.5px solid var(--line);
  border-radius: 12px; padding: 12px 15px; outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.form-field textarea { min-height: 108px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(33, 101, 252, .13);
}
.form-field .hint { font-size: 12.5px; color: var(--ink-500); margin-top: 5px; }
.form-field .error-msg { display: none; font-size: 13px; color: var(--danger); margin-top: 5px; font-weight: 500; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--danger); background: #FFF7F6; }
.form-field.has-error .error-msg { display: block; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.check-pill {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 11px 14px; cursor: pointer; font-size: 14.5px; color: var(--ink-700);
  background: rgba(255, 255, 255, .72); transition: border-color .15s, background .15s;
  user-select: none;
}
.check-pill:hover { border-color: var(--blue-300); }
.check-pill input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }
.check-pill:has(input:checked) { border-color: var(--brand); background: rgba(233, 240, 251, .85); color: var(--brand-darker); font-weight: 600; }
.form-step-ind { display: flex; gap: 10px; align-items: center; margin-bottom: 26px; font-size: 14px; color: var(--ink-500); }
.form-step-ind .fs-dot { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.form-step-ind .fs-dot .d {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.form-step-ind .fs-dot.is-active { color: var(--brand-deep); }
.form-step-ind .fs-dot.is-active .d { border-color: var(--brand-deep); background: var(--brand-deep); color: #fff; }
.form-step-ind .fs-dot.is-done .d { border-color: var(--ok); background: var(--ok); color: #fff; }
.form-step-ind .fs-line { flex: 0 0 34px; height: 2px; background: var(--line); }
.form-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.form-privacy-note { font-size: 13px; color: var(--ink-500); margin-top: 16px; }
.form-demo-note {
  display: flex; gap: 10px; background: var(--warn-bg); border: 1px solid #F5D9A8;
  color: var(--warn); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; margin-top: 20px;
}
.form-success { text-align: center; padding: 34px 20px; }
.form-success .ok-ico {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok); font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}
.form-success .ok-ico svg { width: 30px; height: 30px; }
[hidden] { display: none !important; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .check-grid { grid-template-columns: 1fr; } }

/* ---------- 界面示意组件 ---------- */
.mock { position: relative; }
.mock__tag {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  font-size: 11px; font-weight: 650; letter-spacing: .06em;
  color: var(--ink-500); background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line); border-radius: var(--pill); padding: 3px 11px;
}
.mock-phone { width: min(270px, 100%); margin: 0 auto; background: #fff; border: 2px solid var(--brand); border-radius: 26px; padding: 10px; box-shadow: var(--shadow-lift); }
.mock-phone__screen { background: #fff; border-radius: 18px; overflow: hidden; }
.mock-phone__notch { width: 86px; height: 5px; border-radius: 3px; background: var(--blue-200); margin: 8px auto 4px; }
.chat-bubble { max-width: 82%; padding: 10px 14px; border-radius: 15px; font-size: 13.5px; line-height: 1.55; margin-bottom: 10px; }
.chat-bubble--in { background: var(--blue-075); color: var(--ink-900); border-bottom-left-radius: 5px; }
.chat-bubble--out { background: var(--brand); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.chat-meta { font-size: 11px; color: var(--ink-500); margin-bottom: 12px; }
.call-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.call-row:last-child { border-bottom: 0; }
.call-row .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-100); color: var(--brand-deep);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.call-row .avatar svg { display: block; }
.call-row .avatar--ai {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  background: var(--grad-brand); color: #fff;
}
.call-row .who { font-weight: 600; font-size: 13.5px; color: var(--ink-900); }
.call-row .say { font-size: 13px; color: var(--ink-500); }

/* ---------- 服务页首屏：扁平插画风流程图（路径流动 + 节点入场 + 循环高亮） ---------- */
.flat-illu { position: relative; }
.flat-illu svg { display: block; width: 100%; max-width: 100%; height: auto; }
.fi-path { stroke-dasharray: 1 12; animation: fiFlow 1.4s linear infinite; }
.fi-node {
  transform-box: fill-box; transform-origin: center;
  animation: fiPop .5s cubic-bezier(.2, .8, .3, 1.2) backwards;
  animation-delay: calc(var(--i) * .16s + .25s);
}
.fi-node .fi-glyph, .fi-ping { transform-box: fill-box; transform-origin: center; }
.fi-ping {
  opacity: 0;
  animation: fiPing 9.6s ease-out infinite;
  animation-delay: calc(var(--i) * 2.4s);
}
.fi-node .fi-glyph {
  animation: fiNudge 9.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2.4s);
}
.fi-bob { animation: fiBob 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.fi-cta { transform-box: fill-box; transform-origin: center; animation: fiCta 2.4s ease-in-out infinite; }
@keyframes fiBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes fiCta { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes fiFlow { to { stroke-dashoffset: -13; } }
@keyframes fiPop { from { opacity: 0; transform: scale(.5); } }
@keyframes fiPing {
  0% { opacity: 0; transform: scale(.72); }
  5% { opacity: .95; }
  21% { opacity: .8; transform: scale(1.05); }
  26%, 100% { opacity: 0; transform: scale(1.12); }
}
@keyframes fiNudge {
  0%, 5%, 21%, 100% { transform: scale(1); }
  10% { transform: scale(1.14); }
  14%, 18% { transform: scale(1.06); }
}
.data-bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding-top: 8px; }
.data-bars .bar { flex: 1; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--brand), var(--blue-400)); position: relative; }
.data-bars .bar span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(255, 255, 255, .88); white-space: nowrap; }
.sync-panel { background: rgba(255, 255, 255, .85); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.sync-panel h4 { font-size: 14px; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.sync-panel h4 svg { color: var(--brand-deep); flex: none; }
.sync-panel .ev { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: var(--blue-050); margin-bottom: 6px; }
.sync-panel .ev b { font-weight: 600; color: var(--ink-900); }
.sync-arrows { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--brand-deep); font-weight: 600; padding: 0 6px; }
.sync-arrows svg { width: 46px; height: 46px; }

/* ---------- 证据区 ---------- */
.evidence-quote { padding: 28px; }
.evidence-quote h3 { font-size: 17px; }
.evidence-quote p { font-size: 14.5px; color: var(--ink-500); }

/* ---------- 通用工具 ---------- */
.text-center { text-align: center; }
.muted { color: var(--ink-500); }
.small { font-size: 13.5px; }
.notice {
  position: relative; z-index: 1;
  background: var(--warn-bg); border: 1px solid #F2D9A4; border-radius: 14px;
  padding: 13px 18px; font-size: 14px; color: var(--warn);
}
.notice--info { background: rgba(233, 240, 251, .85); border-color: var(--blue-200); color: var(--brand-ink); }
/* 待补充提示：明显的黄色（评审与上线前一眼可见；正式内容就位后移除该变体） */
.notice--pending {
  background: #FFE9A8; border: 1.5px dashed #E0A400; color: #6B4A00; font-weight: 500;
}
.notice--pending::before { content: "⚠ "; font-weight: 800; }
.pending-tag {
  display: inline-block; padding: 2px 12px; border-radius: 999px;
  background: #FFE9A8; border: 1px solid #E0A400; color: #6B4A00;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.divider { height: 1px; background: rgba(223, 230, 243, .7); border: 0; margin: clamp(36px, 4vw, 52px) 0; }

/* ---------- 移动端固定预约条（PDF 允许的单一底部入口） ---------- */
.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(248, 250, 254, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.mobile-cta .btn { width: 100%; }
@media (max-width: 760px) {
  .mobile-cta { display: block; }
  body { padding-bottom: 76px; }
}

/* ---------- Cookie 同意条（与旧站一致：深色底部条 + 接受/拒绝） ---------- */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
  display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap;
  padding: 14px clamp(18px, 4vw, 44px);
  background: rgba(17, 17, 18, .97); color: rgba(255, 255, 255, .92);
  font-size: 14px; line-height: 1.65;
  transform: translateY(102%); transition: transform .32s var(--ease);
}
.cookie-bar.is-open { transform: none; }
.cookie-bar p { margin: 0; flex: 1 1 420px; }
.cookie-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar a:hover { color: var(--blue-200, #cfe0ff); }
.cookie-bar__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-btn {
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  padding: 9px 28px; border-radius: 999px;
  transition: filter .15s, background .15s;
}
.cookie-btn--accept { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
.cookie-btn--accept:hover { filter: brightness(1.12); }
.cookie-btn--reject { background: transparent; border: 1px solid rgba(255, 255, 255, .75); color: #fff; }
.cookie-btn--reject:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 760px) {
  .cookie-bar {
    bottom: 0; padding: 12px 16px; font-size: 13px; gap: 10px 16px;
    flex-direction: column; align-items: stretch;
    max-height: calc(100dvh - 20px); overflow-y: auto;
  }
  .cookie-bar p { flex: none; }
  .cookie-bar__actions { justify-content: flex-end; }
  .cookie-btn { padding: 8px 22px; font-size: 13.5px; }
}

/* ---------- 入场动效（无 JS 默认可见；尊重 reduced-motion） ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: .08s; } .js .reveal-d2 { transition-delay: .16s; }
.js .reveal-d3 { transition-delay: .24s; } .js .reveal-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero { animation: none; }
  .hero .blob { animation: none !important; transform: none !important; }
  .marquee__track { animation: none; }
  .fi-path, .fi-node, .fi-ping, .fi-node .fi-glyph, .fi-bob, .fi-cta { animation: none !important; }
  .chain-item, .product-card, .info-card, .step, .industry-card, .evidence-quote { transition: none; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .dev { animation: none !important; }
  .fs-track::after { display: none; }
  .fs-track::after, .fs-dot::after, .fs-deco { animation: none !important; }
}

/* ---------- 打印 ---------- */
@media print {
  .site-nav, .nav-toggle, .mobile-menu, .mobile-cta, .scroll-progress, .site-footer, .cookie-bar { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
}

/* ============================================================
   网站定制服务页（/services/website-design/）
   模板浏览、首屏设备组合与预览层。样式仅限本页与预览组件使用。
   ============================================================ */
.wd-templates { scroll-margin-top: 92px; }

/* ---- 浏览工具栏 ---- */
.wd-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
.wd-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-chip {
  border: 1.5px solid var(--line); background: rgba(255,255,255,.7);
  color: var(--ink-500); font-size: 14px; font-weight: 600; font-family: inherit;
  padding: 8px 18px; border-radius: var(--pill); cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.wd-chip:hover { border-color: var(--blue-300); color: var(--brand-deep); }
.wd-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 14px rgba(13, 84, 206, .18); }
.wd-search { position: relative; flex: 0 1 300px; min-width: 220px; }
.wd-search svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-500); pointer-events: none;
}
.wd-search input {
  width: 100%; height: 44px; padding: 0 16px 0 42px;
  border: 1.5px solid var(--line); border-radius: var(--pill);
  background: rgba(255,255,255,.85); color: var(--ink-900); font-size: 14.5px; font-family: inherit;
}
.wd-search input::placeholder { color: var(--ink-500); opacity: .75; }
.wd-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(33, 101, 252, .14); }
.wd-count { font-size: 14px; color: var(--ink-500); margin: 0 0 18px; }

/* ---- 模板网格与卡片 ---- */
.wd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wd-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.82); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wd-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.wd-card__media {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  background: var(--blue-075); overflow: hidden; position: relative;
}
.wd-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  display: block;
}
.wd-card__media::after {
  content: ""; position: absolute; inset: 0; background: rgba(13, 84, 206, 0);
  transition: background .18s;
}
.wd-card__media:hover::after { background: rgba(13, 84, 206, .07); }
.wd-card__body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; text-decoration: none; }
.wd-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-tag {
  display: inline-block; font-size: 12.5px; font-weight: 650; color: var(--brand-deep);
  background: var(--blue-100); border-radius: var(--pill); padding: 3px 12px;
}
.wd-card__name { font-size: 17px; margin: 0; }
.wd-card__desc { font-size: 14px; color: var(--ink-500); margin: 0; }
.wd-empty { text-align: center; padding: 54px 20px; color: var(--ink-500); }
.wd-empty p { margin-bottom: 16px; font-size: 16px; }

/* ---- 首屏：桌面 + 手机真实预览组合 ---- */
.wd-hero-devices { position: relative; padding: 44px 0 34px; }
/* 桌面布局下样机组合整体往左收，右侧留出呼吸空间 */
@media (min-width: 761px) {
  .wd-hero-devices { margin-right: 52px; }
}
.wd-hero-devices .browser-frame { box-shadow: var(--shadow-lift); }
.wd-phone-frame {
  position: absolute; right: -38px; bottom: -36px; z-index: 3;
  width: clamp(132px, 10.5vw, 156px); border-radius: 24px;
  border: 5px solid #101828; background: #101828;
  box-shadow: var(--shadow-pop); overflow: hidden;
}
.wd-phone-frame img { width: 100%; height: auto; display: block; }
.wd-hero-note { display: inline-block; margin-top: 12px; }
/* 第二个标注保持文档流位置（覆盖 .hero-visual > .mock-tag 的绝对定位） */
.hero-visual > .mock-tag.wd-hero-note { position: static; margin-top: 12px; }


/* ---- 演示表单：模板意向摘要与定制补充字段 ---- */
.tpl-chip {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  padding: 10px 14px; border: 1.5px solid var(--blue-200); border-radius: 14px;
  background: var(--blue-050);
}
.tpl-chip img { width: 64px; height: 48px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); }
.tpl-chip__body { flex: 1; min-width: 0; }
.tpl-chip__label { display: block; font-size: 12.5px; color: var(--ink-500); margin-bottom: 2px; }
.tpl-chip__name { font-size: 14.5px; font-weight: 650; color: var(--ink-900); }
.tpl-chip__remove {
  border: 0; background: transparent; color: var(--ink-500); font-size: 13px;
  font-family: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.tpl-chip__remove:hover { color: var(--danger); }
.wd-extra { border: 1.5px dashed var(--line-2); border-radius: 14px; padding: 18px 18px 6px; margin: 0 0 20px; }
.wd-extra legend { font-size: 14px; font-weight: 650; color: var(--ink-700); padding: 0 8px; }

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .wd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .wd-toolbar { flex-direction: column; align-items: stretch; }
  .wd-search { flex-basis: auto; }
  .wd-grid { grid-template-columns: 1fr; }
  .wd-phone-frame { width: 128px; right: 2px; bottom: -14px; border-width: 4px; border-radius: 18px; }
}

/* ---------- 提交表单弹窗（全站 /demo/ 入口共用） ---------- */
.lead-modal {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.lead-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(16, 24, 40, .56);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s ease;
}
.lead-modal__card {
  position: relative; width: min(680px, 100%);
  max-height: 92vh; max-height: 92dvh; overflow: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 24px) clamp(20px, 3.4vw, 34px) clamp(16px, 2.2vw, 20px);
  box-shadow: 0 2px 4px rgba(13, 84, 206, .06), 0 28px 72px rgba(13, 84, 206, .28);
  opacity: 0; transform: translateY(14px) scale(.975);
  transition: opacity .24s ease, transform .26s cubic-bezier(.2, .9, .3, 1.15);
}
.lead-modal.is-open .lead-modal__overlay { opacity: 1; }
.lead-modal.is-open .lead-modal__card { opacity: 1; transform: none; }
.lead-modal__close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 50%; background: #fff;
  color: var(--ink-500); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.lead-modal__close:hover { color: var(--brand-deep); border-color: var(--blue-300); background: var(--blue-050); }
.lead-modal__body { padding-right: 24px; }
.lead-modal__sub { font-size: 14px; color: var(--ink-500); margin: 0 0 14px; line-height: 1.5; }
.lead-modal .form-grid { gap: 10px 16px; }
.lead-modal .form-field textarea { min-height: 52px; }
.lead-modal .form-field .error-msg { margin-top: 3px; font-size: 12px; line-height: 1.3; }
.lead-modal .form-field label { margin-bottom: 5px; }
.lead-modal .form-field input, .lead-modal .form-field select { padding: 11px 14px; }
.lead-modal .form-field .hint { margin-top: 3px; font-size: 12px; }
.lead-modal .form-field .lead-opt { font-weight: 500; color: var(--ink-500); font-size: 13px; }
.lead-phone { display: flex; gap: 10px; }
.lead-phone select { flex: 0 0 auto; width: auto; max-width: 46%; min-width: 128px; padding-right: 10px; }
.lead-phone input { flex: 1; min-width: 0; }
.lead-modal .lead-submit { width: 100%; margin-top: 12px; }
.lead-modal .form-privacy-note { margin-top: 8px; font-size: 12.5px; }
.lead-modal .form-success { padding: 18px 4px 6px; }
.lead-modal__pending { max-width: 520px; margin: 16px auto 0; text-align: left; font-size: 13px; }
.lead-modal .lead-done { margin-top: 22px; min-width: 160px; }
body.lead-locked { overflow: hidden; }
@media (max-width: 640px) {
  .lead-modal { padding: 0; align-items: flex-end; }
  .lead-modal__card {
    width: 100%; max-height: 94vh; max-height: 94dvh;
    border-radius: var(--radius) var(--radius) 0 0; padding: 24px 20px 28px;
  }
  .lead-modal__body { padding-right: 0; }
  .lead-modal__close { top: 12px; right: 12px; width: 34px; height: 34px; }
  .lead-modal__sub { padding-right: 36px; }
  .lead-phone select { min-width: 110px; max-width: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .lead-modal__overlay, .lead-modal__card { transition: none; }
}

/* ---------- 表单提交错误提示（公开线索接口）与 honeypot ---------- */
.form-submit-error {
  display: block; background: #FEF3F2; border: 1px solid #FECDCA;
  color: var(--danger); border-radius: 12px; padding: 10px 14px;
  font-size: 13.5px; line-height: 1.55; margin: 14px 0 0;
}
.lead-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0; pointer-events: none;
}