/* =========================================================
   一麦通 · 智慧零售 SaaS 平台 — 设计系统 (v2 · 移动优先)
   风格：简约大气 · 时尚 · 设计感
   ========================================================= */

/* —— 鸿蒙字体 HarmonyOS Sans SC（首屏标题用，已做字符子集，102KB） —— */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: local('HarmonyOS Sans SC'), local('HarmonyOSSansSC-Medium'),
       url('assets/fonts/HarmonyOS_Sans_SC_Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* —— 品牌色阶 —— */
  --brand: #ff5b22;
  --brand-2: #ff8a3d;
  --brand-deep: #e8431a;
  --brand-50: #fff5f0;
  --brand-100: #ffe9dd;
  --brand-soft: #fff1ea;
  --violet: #6d5df6;
  --violet-2: #a78bfa;
  --violet-soft: #efeaff;
  --emerald: #0ea371;
  --emerald-soft: #e6fbf4;

  /* —— 科技感电路板背景纹理 —— */
  --circuit: url("../images/circuit-bg.svg");

  /* —— 中性色 —— */
  --bg: #ffffff;
  --bg-soft: #f7f8fc;
  --bg-dark: #0a0e1a;
  --bg-dark-2: #111726;
  --ink: #0f172a;
  --ink-2: #1e293b;
  --ink-soft: #475569;
  --muted: #8a98ad;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);
  --card: #ffffff;

  /* —— 圆角 & 阴影 —— */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 30px 80px rgba(15, 23, 42, 0.14);
  --shadow-brand: 0 18px 40px rgba(255, 91, 34, 0.28);

  /* —— 字体 —— */
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui,
    -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Sora", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;

  /* —— 间距刻度 (8px 基线) —— */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 56px;
  --sp-7: 80px;
  --sp-8: 110px;

  /* —— 渐变 —— */
  --grad-brand: linear-gradient(120deg, #ff5b22 0%, #ff8a3d 55%, #ffb347 100%);
  --grad-violet: linear-gradient(120deg, #6d5df6 0%, #a78bfa 100%);
  --grad-dark: linear-gradient(135deg, #0a0e1a 0%, #1a2236 100%);
  --grad-mesh: radial-gradient(
      60% 60% at 15% 20%,
      rgba(255, 91, 34, 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(50% 50% at 85% 15%, rgba(109, 93, 246, 0.16) 0%, transparent 60%),
    radial-gradient(60% 60% at 70% 90%, rgba(255, 179, 71, 0.14) 0%, transparent 60%);

  --maxw: 1200px;
  --nav-h: 72px;
}

/* ============ Reset ============ */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--brand); color: #fff; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* 全局键盘焦点环（无障碍） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(255, 91, 34, 0.45);
  outline-offset: 3px;
  border-radius: 8px;
}
section { position: relative; scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ============ Layout ============ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.container-wide { max-width: 1340px; }
.section { padding: var(--sp-7) 0; }
.section-sm { padding: 56px 0; }
.bg-soft { background: var(--bg-soft); }
.bg-dark { background: var(--bg-dark); color: #e6ebf5; }
.bg-dark .section-title,
.bg-dark .eyebrow { color: #fff; }
.bg-dark .lead { color: #aeb8cc; }

/* ============ Typography ============ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.display { font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { font-size: clamp(1.65rem, 3.6vw, 2.6rem); text-wrap: balance; }
.h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.lead { font-size: clamp(1.02rem, 1.45vw, 1.22rem); color: var(--ink-soft); max-width: 660px; line-height: 1.85; text-wrap: pretty; }
p { text-wrap: pretty; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad-brand); border-radius: 2px; }
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient-v { background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.honor-orange {
  font-family: 'HarmonyOS Sans SC', 'Noto Sans SC', sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ff5b22 0%, #ff8c42 50%, #ffb347 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
}
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.section-head { max-width: 720px; margin-bottom: var(--sp-6); }
.center .section-head { margin-left: auto; margin-right: auto; }

/* ============ Buttons ============ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 0.98rem;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn > * { position: relative; z-index: 1; }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(255, 91, 34, 0.38); }
.btn-primary:active { transform: translateY(0) scale(0.97); }
.btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0) scale(0.97); }
.btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0) scale(0.97); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1e293b; transform: translateY(-2px); }
.btn-dark:active { transform: translateY(0) scale(0.97); }
.btn svg { width: 18px; height: 18px; }
/* 点击波纹 */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; z-index: 0; animation: ripple 0.6s ease-out; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ============ Nav ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 12px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.18rem; letter-spacing: -0.01em; flex: none; }
.brand .logo { width: 38px; height: 38px; flex: none; }
.brand .brand-sub { font-size: 0.66rem; font-weight: 600; color: var(--brand); letter-spacing: 0.18em; display: block; line-height: 1; margin-top: 2px; }
/* 移动优先：默认 off-canvas 抽屉 */
.nav-links {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  background: #fff; padding: 16px 20px 28px;
  box-shadow: var(--shadow); border-top: 1px solid var(--line);
  transform: translateY(-130%); opacity: 0; visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.35s;
}
.nav.open .nav-links { transform: translateY(0); opacity: 1; visibility: visible; }
.nav-links a {
  padding: 13px 16px; border-radius: 999px; font-weight: 600; font-size: 1rem; color: var(--ink-soft);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-soft); }
.nav-links a.active { color: var(--brand); background: var(--brand-soft); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-phone {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid rgba(255, 91, 34, 0.22);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.nav-phone svg { width: 17px; height: 17px; flex: none; }
.nav-phone:hover { background: rgba(255, 91, 34, 0.14); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255, 91, 34, 0.18); }
.nav-phone:active { transform: translateY(0) scale(0.97); }
.nav-toggle { display: flex; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.04); flex: none; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: 0.3s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); transition: 0.3s; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav.open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ============ Hero ============ */
.hero { position: relative; padding: 132px 0 84px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: var(--grad-mesh); z-index: 0; }
.hero-bg::after {
  content: ""; position: absolute; left: 50%; top: -10%; width: 760px; height: 760px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.16), transparent 70%);
  filter: blur(20px);
}
.hero .container { position: relative; z-index: 1; }
/* 移动端：DOM 顺序即视觉顺序 —— 标题 → 示意图 → 描述 → 按钮 → 信任标 */
.hero-grid { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
.hero-title { margin: 0; }
.hero-lead { margin: 0; }
.hero-actions { display: flex; gap: 14px; margin: 0; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 26px; margin: 0; flex-wrap: wrap; }
.hero-trust .t { font-size: 0.82rem; color: var(--muted); }
.hero-trust .t b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); font-weight: 800; }
.hero-stats { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }

/* Phone mockup */
.phone-wrap { display: flex; justify-content: center; position: relative; }
.phone-glow { position: absolute; width: 120%; height: 120%; left: -10%; top: -10%; background: radial-gradient(closest-side, rgba(255, 91, 34, 0.22), transparent 70%); filter: blur(30px); z-index: 0; }
.phone {
  position: relative; z-index: 1; width: min(290px, 78vw); height: 600px; border-radius: 42px;
  background: #0b0e16; padding: 12px; box-shadow: 0 40px 90px rgba(10, 14, 26, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.phone-screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fff7f2 100%); display: flex; flex-direction: column; }
.phone-top { background: var(--grad-brand); padding: 26px 18px 16px; color: #fff; }
.phone-top .pt-shop { font-size: 0.7rem; opacity: 0.9; }
.phone-top .pt-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin-top: 2px; }
.phone-search { margin-top: 14px; background: rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 7px 14px; font-size: 0.72rem; backdrop-filter: blur(4px); }
.phone-body { flex: 1; padding: 14px 14px 8px; overflow: hidden; }
.phone-sec-title { font-size: 0.72rem; font-weight: 800; color: var(--ink); margin: 8px 0 8px; }
.phone-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.phone-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px; box-shadow: var(--shadow-sm); }
.phone-card .pc-img { height: 46px; border-radius: 8px; background: linear-gradient(135deg, #ffe3d3, #ffd0b3); margin-bottom: 6px; }
.phone-card .pc-name { font-size: 0.6rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.phone-card .pc-price { font-size: 0.62rem; color: var(--brand); font-weight: 800; margin-top: 3px; }
.phone-banner { height: 56px; border-radius: 12px; background: linear-gradient(120deg, #6d5df6, #a78bfa); margin: 10px 0; display: flex; align-items: center; padding: 0 14px; color: #fff; font-size: 0.66rem; font-weight: 700; }
.phone-tab { display: flex; background: #fff; border-top: 1px solid var(--line); padding: 8px 0; }
.phone-tab .pt { flex: 1; text-align: center; font-size: 0.58rem; color: var(--muted); }
.phone-tab .pt.active { color: var(--brand); font-weight: 800; }

/* ---------- 手机轮播 —— 小程序样机 ---------- */
.phone-screen { position: relative; }
.phone-slides {
  display: flex; width: 100%; height: 100%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: pan-y;
}
.phone-slide {
  width: 100%; height: 100%; flex: 0 0 100%;
  display: flex;
  background: #0b0e16;
  overflow: hidden;
}
.phone-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.phone-dots {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 5; padding: 5px 8px;
  background: rgba(15, 23, 42, 0.55); border-radius: 999px; backdrop-filter: blur(4px);
}
.phone-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: 0.25s; }
.phone-dots span.active { width: 14px; border-radius: 999px; background: #fff; }

/* 小程序公共组件 */
.ps-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 2px; font-size: 0.62rem; font-weight: 700; color: var(--ink);
}
.ps-battery { width: 18px; height: 8px; border: 1px solid currentColor; border-radius: 2px; position: relative; }
.ps-battery::after { content: ""; position: absolute; right: -3px; top: 2px; width: 1.5px; height: 3px; background: currentColor; border-radius: 0 1px 1px 0; }
.ps-battery::before { content: ""; position: absolute; left: 1px; top: 1px; width: 60%; height: 4px; background: currentColor; border-radius: 1px; }
.ps-header { padding: 12px 16px 14px; }
.ps-header.dark { background: #3d2b1f; color: #fff; }
.ps-header.dark .ps-search { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }
.ps-loc { font-size: 0.7rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 3px; }
.ps-search {
  background: rgba(15,23,42,0.05); border-radius: 999px; padding: 6px 13px;
  font-size: 0.66rem; color: var(--ink-soft); font-weight: 500;
}
.ps-body { flex: 1; padding: 10px 14px 14px; overflow-y: auto; scrollbar-width: none; }
.ps-body::-webkit-scrollbar { display: none; }
.ps-hero {
  border-radius: 16px; padding: 16px; color: #fff;
  background: var(--grad-brand); position: relative; overflow: hidden;
  box-shadow: 0 10px 24px rgba(255,91,34,0.22);
}
.ps-hero::after {
  content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px;
  background: rgba(255,255,255,0.18); border-radius: 50%; filter: blur(16px);
}
.ps-hero-tag {
  display: inline-block; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.22); margin-bottom: 8px;
}
.ps-hero-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; line-height: 1.2; position: relative; z-index: 1; }
.ps-hero-sub { font-size: 0.6rem; opacity: 0.92; margin-top: 5px; position: relative; z-index: 1; }
.ps-cats { display: flex; justify-content: space-between; margin: 14px 0 10px; }
.ps-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.55rem; color: var(--ink-soft); font-weight: 600; }
.ps-cat i { width: 38px; height: 38px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 2px 8px rgba(15,23,42,0.05); }
.ps-sec-title { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 800; color: var(--ink); margin: 12px 0 8px; }
.ps-sec-title span { font-size: 0.55rem; color: var(--muted); font-weight: 500; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ps-product { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: var(--shadow-sm); }
.psp-img { height: 52px; border-radius: 9px; margin-bottom: 6px; }
.psp-name { font-size: 0.6rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.psp-price { font-size: 0.64rem; color: var(--brand); font-weight: 800; margin-top: 3px; }
.ps-tabbar {
  display: flex; background: #fff; border-top: 1px solid var(--line); padding: 6px 0 8px;
}
.ps-tabbar div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.5rem; color: var(--muted); }
.ps-tabbar div i { font-size: 1rem; line-height: 1; font-style: normal; }
.ps-tabbar div.active { color: var(--brand); font-weight: 700; }

/* 主题微调 */
.theme-coffee .ps-tabbar div.active { color: #7a5230; }
.theme-coffee .psp-price { color: #7a5230; }
.theme-bakery .ps-tabbar div.active { color: #e86a8a; }
.theme-bakery .psp-price { color: #e86a8a; }
.theme-salad .ps-tabbar div.active { color: #0ea371; }
.theme-salad .psp-price { color: #0ea371; }
.theme-retail .ps-tabbar div.active { color: var(--violet); }
.theme-retail .psp-price { color: var(--violet); }

/* ============ Stats band ============ */
.stats-band {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 44px 28px;
  margin-top: -36px;
  z-index: 2;
  box-shadow: var(--shadow-lg);
  color: #fff;
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,91,34,0.18) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(109,93,246,0.14) 0, transparent 45%),
    linear-gradient(135deg, rgba(10,18,36,0.55), rgba(6,10,20,0.78)),
    var(--circuit);
  background-size: 100% 100%, 100% 100%, 100% 100%, 240px 240px;
  background-position: center;
  overflow: hidden;
}
.stats-grid { display: grid; grid-template-columns: 1fr; gap: 26px; position: relative; z-index: 1; }

/* 主暖光扫描带：从左到右穿梭 */
.stats-band::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -20%;
  width: 26%;
  height: 220%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,91,34,0.06) 30%,
    rgba(255,138,61,0.42) 50%,
    rgba(255,91,34,0.06) 70%,
    transparent 100%
  );
  transform: rotate(22deg);
  filter: blur(18px);
  animation: circuit-sweep 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 0;
}

/* 脉冲辉光层 */
.stats-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,138,61,0.22) 0, transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(109,93,246,0.16) 0, transparent 40%);
  opacity: 0.35;
  animation: circuit-pulse 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* 流动数据光点装饰层（由 .circuit-fx 承载） */
.circuit-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.circuit-fx .dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff8a3d;
  box-shadow: 0 0 10px 3px rgba(255,138,61,0.9), 0 0 24px 8px rgba(255,138,61,0.25);
  opacity: 0;
}
.circuit-fx .dot.d1 { top: 28%; left: -4%; animation: circuit-dot 5.2s linear infinite; animation-delay: 0s; }
.circuit-fx .dot.d2 { top: 62%; left: -4%; animation: circuit-dot 6.1s linear infinite; animation-delay: 1.6s; }
.circuit-fx .dot.d3 { top: 46%; left: -4%; animation: circuit-dot 4.8s linear infinite; animation-delay: 2.9s; }

.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .lbl { color: #aeb8cc; font-size: 0.92rem; margin-top: 4px; }

/* ============ Cards / Grid ============ */
.grid { display: grid; gap: 24px; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

.card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
  background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card:hover::after { opacity: 1; }
.card .ic {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: 18px; transition: 0.3s;
}
.card:hover .ic { background: var(--grad-brand); color: #fff; transform: scale(1.05) rotate(-4deg); }
.card .ic svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.18rem; margin-bottom: 9px; }
.card p { color: var(--ink-soft); font-size: 0.95rem; }

/* Module card (products) */
.module {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.module::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.module:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.module:hover::before { transform: scaleX(1); }
.module .m-ic {
  width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fff1ea, #ffe3d3); color: var(--brand); margin-bottom: 16px;
}
.module .m-ic svg { width: 24px; height: 24px; }
.module h3 { font-size: 1.1rem; margin-bottom: 6px; }
.module .m-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--violet); background: var(--violet-soft); padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }
.module p { color: var(--ink-soft); font-size: 0.9rem; }
.module .m-feats { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.module .m-feats span { font-size: 0.74rem; color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }

/* ============ Feature scenario ============ */
/* 移动端单列：DOM 顺序即 头部(标签+标题) → 视觉卡 → 体部(描述+卖点)，
   因此自然呈现"视觉卡夹在标题与描述之间"。桌面端用 grid-areas 处理左右布局。 */
.scenario { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.scenario + .scenario { margin-top: 72px; }
.s-visual { position: relative; border-radius: var(--radius-lg); padding: 36px; min-height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.s-visual.v1 { background: linear-gradient(135deg, #fff1ea, #ffe0cf); }
.s-visual.v2 { background: linear-gradient(135deg, #efeaff, #e3dcff); }
.s-visual.v3 { background: linear-gradient(135deg, #e6fbf4, #d6f3ff); }
/* 风车模块的纯色框收紧内边距，让动态视觉占满框体（桌面 / 移动统一） */
.s-visual:has(.is-wm) { padding: 14px; }
.s-card { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); width: 100%; max-width: 360px; }
.s-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.s-row:last-child { border-bottom: none; }
.s-row .s-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); }
.s-row .s-ic svg { width: 20px; height: 20px; }
.s-row .s-t { font-weight: 700; font-size: 0.92rem; }
.s-row .s-d { font-size: 0.8rem; color: var(--muted); }
.checklist { margin-top: 22px; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-soft); font-size: 0.98rem; }
.checklist li svg { width: 22px; height: 22px; flex: none; color: var(--brand); margin-top: 2px; }

/* ============ Architecture ============ */
.arch { display: grid; grid-template-columns: 1fr; gap: 18px; }
.arch-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.arch-col h4 { font-size: 0.95rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.arch-col h4 .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.arch-col ul { display: grid; gap: 8px; }
.arch-col li { font-size: 0.84rem; color: var(--ink-soft); padding: 8px 12px; background: var(--bg-soft); border-radius: 10px; border: 1px solid var(--line); }

/* ============ Tech stack chips ============ */
.tech-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.tech-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.tech-card h4 { font-size: 1.05rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.tech-card h4 .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.tech-card h4 .ic svg { width: 20px; height: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips span { font-size: 0.82rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft); }

/* ============ Timeline ============ */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 0; }
.tl-item { position: relative; padding: 0 0 40px 40px; border-left: 2px solid var(--line); }
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-item .dot { position: absolute; left: -9px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 0 0 5px var(--brand-soft); }
.tl-item .yr { font-family: var(--font-display); font-weight: 800; color: var(--brand); font-size: 0.95rem; }
.tl-item h4 { font-size: 1.1rem; margin: 4px 0 6px; }
.tl-item p { color: var(--ink-soft); font-size: 0.95rem; }

/* ============ FAQ ============ */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0; margin-bottom: 14px; overflow: hidden; background: #fff; transition: border-color 0.3s, box-shadow 0.3s; }
.faq-item.open { border-color: var(--brand); box-shadow: 0 12px 30px rgba(255, 91, 34, 0.1); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-weight: 700; cursor: pointer; transition: color 0.2s; }
.faq-q:hover { color: var(--brand); }
.faq-q .plus { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform 0.3s; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-a p { padding: 0 24px 22px; color: var(--ink-soft); font-size: 0.95rem; }

/* ============ CTA ============ */
.cta-box { position: relative; background: var(--grad-dark); border-radius: var(--radius-lg); padding: 60px 32px; text-align: center; overflow: hidden; color: #fff; }
.cta-box::before { content: ""; position: absolute; inset: 0; background: var(--grad-mesh); opacity: 0.9; }
.cta-box::after { content: ""; position: absolute; inset: 0; background-image: var(--circuit); background-size: 240px 240px; opacity: 0.12; pointer-events: none; z-index: 0; }
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 { color: #fff; }
.cta-box .lead { color: #c3ccdd; margin: 16px auto 30px; }

/* ============ Contact ============ */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.info-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-item:last-child { border-bottom: none; }
.info-item .ic { width: 44px; height: 44px; border-radius: 12px; flex: none; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.info-item .ic svg { width: 22px; height: 22px; }
.info-item .t { font-weight: 700; font-size: 0.95rem; }
.info-item .d { color: var(--ink-soft); font-size: 0.9rem; transition: color 0.2s; }
.info-item .d.copyable { cursor: pointer; }
.info-item .d.copyable:hover { color: var(--brand); }
.form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.form .row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 12px; font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
.form-ok { display: none; margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: #e9f9ef; color: #15803d; font-weight: 600; font-size: 0.92rem; border: 1px solid #b7ebc8; }
.form-ok.show { display: block; }
.form-err { display: none; margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: #fff2f0; color: #b42318; font-weight: 600; font-size: 0.92rem; border: 1px solid #ffccc7; }
.form-err.show { display: block; }
button[disabled] { opacity: 0.7; cursor: not-allowed; }

/* ============ Footer ============ */
.footer { position: relative; background: var(--bg-dark); color: #aeb8cc; padding: 70px 0 30px; }
.footer::before { content: ""; position: absolute; inset: 0; background-image: var(--circuit); background-size: 240px 240px; opacity: 0.07; pointer-events: none; }
.footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.footer .brand { color: #fff; margin-bottom: 16px; }
.footer .f-about { font-size: 0.92rem; line-height: 1.8; max-width: 320px; }
.footer h5 { color: #fff; font-size: 1rem; margin-bottom: 18px; font-family: var(--font-display); }
.footer-links li { margin-bottom: 4px; }
.footer-links a { color: #aeb8cc; font-size: 0.92rem; display: inline-block; padding: 7px 0; transition: color 0.2s, padding-left 0.2s; }
.footer-links a:hover { color: #fff; padding-left: 4px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 30px; margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.84rem; color: #93a0b8; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; color: #c3ccdd; transition: 0.2s; }
.footer-social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }

/* ============ Reveal animation ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* ============ 科技感电路板动画关键帧 ============ */
@keyframes circuit-sweep {
  0% { transform: rotate(22deg) translateX(-260%); }
  100% { transform: rotate(22deg) translateX(520%); }
}
@keyframes circuit-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.65; }
}
@keyframes circuit-dot {
  0% { left: -4%; opacity: 0; transform: scale(0.6); }
  8% { opacity: 1; transform: scale(1); }
  92% { opacity: 1; transform: scale(1); }
  100% { left: 104%; opacity: 0; transform: scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .phone { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============ 顶部滚动进度条 ============ */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--grad-brand); box-shadow: 0 0 10px rgba(255, 91, 34, 0.6); transition: width 0.12s ease-out; }

/* ============ 复制提示 toast ============ */
.toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 24px); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 300; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============ Breadcrumb / page hero ============ */
.page-hero { padding: 132px 0 56px; background: var(--grad-mesh); position: relative; overflow: hidden; }
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a { display: inline-block; padding: 6px 2px; margin: -6px -2px; color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.page-hero p.lead { margin-top: 16px; }

/* ============ Logo cloud ============ */
.logo-cloud { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.logo-cloud .lc { padding: 12px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-weight: 700; color: var(--ink-soft); font-family: var(--font-display); letter-spacing: -0.01em; transition: transform 0.2s, border-color 0.2s, color 0.2s; }
.logo-cloud .lc:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--brand); }

/* =========================================================
   移动优先响应式：默认单列，逐级展开多列
   ========================================================= */
@media (min-width: 640px) {
  .container { padding: 0 24px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .arch { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form .row { grid-template-columns: 1fr 1fr; }
  .cta-box { padding: 64px 48px; }
}

@media (min-width: 900px) {
  .section { padding: var(--sp-8) 0; }
  .section-sm { padding: 72px 0; }
  .nav-links {
    position: static; flex-direction: row; align-items: center;
    transform: none; opacity: 1; visibility: visible;
    background: none; box-shadow: none; border: none; padding: 0; gap: 6px;
  }
  .nav-links a { padding: 9px 16px; font-size: 0.95rem; }
  .nav-cta .btn-outline { display: inline-flex; }
  .nav-phone { display: inline-flex; }
  .nav-toggle { display: none; }

  .hero { padding: 150px 0 90px; }
  /* 桌面端：文字块整体居左栏中央，phone 居右栏，两者上下居中对齐 */
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas:
      ".   phone"
      "title phone"
      "lead  phone"
      "actions phone"
      "trust phone"
      ".   phone";
    gap: 18px 50px;
    align-items: center;
  }
  .hero-title { grid-area: title; }
  .hero-lead { grid-area: lead; }
  .hero-actions { grid-area: actions; }
  .hero-trust { grid-area: trust; }
  .phone-wrap { grid-area: phone; }
  .scenario {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "head visual" "body visual";
    gap: 26px 56px;
    align-items: center;
  }
  .scenario-head { grid-area: head; align-self: end; }
  .scenario-body { grid-area: body; align-self: start; }
  .s-visual { grid-area: visual; }
  .scenario.reverse { grid-template-areas: "visual head" "visual body"; }
  /* 风车模块：桌面端取消两栏，视觉区整宽居中；改用显式 class，避免 :has() 兼容性导致回落到左右布局 */
  .scenario.is-wm-scenario {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "body" "visual";
    gap: 30px;
    max-width: 1180px;
    margin-left: auto; margin-right: auto;
  }
  .scenario.is-wm-scenario .scenario-head,
  .scenario.is-wm-scenario .scenario-body { max-width: 880px; }
  /* 风车色块约束宽度并居中，不再占满整页，留出空间给解释文字、提升可读性 */
  .scenario.is-wm-scenario .s-visual { max-width: 680px; margin: 0 auto; }
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: 40px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .tech-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .cta-box { padding: 70px 50px; }
}

@media (min-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .arch { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(5, 1fr); }
}

/* 极窄屏：隐藏导航内主 CTA，避免拥挤（移动端仍可由 hero/页脚触达） */
@media (max-width: 420px) {
  .nav-cta .btn-primary { display: none; }
  .nav-phone .ph { display: none; }
}

/* v9: 返回顶部 FAB */
.fab-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--grad-brand); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-brand);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.fab-top.show { opacity: 1; transform: none; pointer-events: auto; }
.fab-top:hover { transform: translateY(-2px); }
.fab-top svg { width: 22px; height: 22px; }
@media (max-width: 420px) { .fab-top { right: 12px; bottom: 12px; width: 42px; height: 42px; } }

/* =========================================================
   移动端阅读优化（≤900px）· 全站统一
   目标：提高单屏信息密度、统一排版节奏、长文阅读更流畅
   说明：全站 6 页共用本样式表，故此处一处修改，所有页面统一生效
   ========================================================= */
@media (max-width: 900px) {
  :root {
    /* 垂直节奏整体收紧（原值 → 新值） */
    --sp-5: 26px;        /* 40  → 26 */
    --sp-6: 34px;        /* 56  → 34  区块标题与内容的间距 */
    --sp-7: 44px;        /* 80  → 44  区块上下留白（相邻区块合计 160px → 88px） */
    --sp-8: 52px;        /* 110 → 52 */
    --radius: 16px;      /* 20  → 16 */
    --radius-lg: 20px;   /* 28  → 20 */
  }

  html { scroll-padding-top: calc(var(--nav-h) + 8px); }
  section { scroll-margin-top: calc(var(--nav-h) + 8px); }

  /* 正文：字号微调 + 行距收紧，每行多容纳约 1 字且保持可读 */
  body { font-size: 15.5px; line-height: 1.68; }

  /* 内容区左右收窄，换取更宽的行宽 */
  .container { padding: 0 16px; }

  /* —— 标题阶梯整体下调，保留层级但减少视觉跳跃 —— */
  .display { font-size: clamp(1.78rem, 7.4vw, 2.6rem); line-height: 1.14; }
  .h2 { font-size: clamp(1.34rem, 5.8vw, 2rem); line-height: 1.26; }
  .h3 { font-size: clamp(1.1rem, 4.2vw, 1.4rem); line-height: 1.34; }
  .lead { font-size: clamp(0.97rem, 3.8vw, 1.1rem); line-height: 1.66; }
  .eyebrow { margin-bottom: 10px; font-size: 0.76rem; }

  /* —— 区块留白 —— */
  .section-sm { padding: 36px 0; }
  .section-head { margin-bottom: var(--sp-6); }
  .page-hero { padding: 104px 0 34px; }
  .hero { padding: 104px 0 48px; }
  .cta-box { padding: 38px 20px; }

  /* —— 栅格与卡片 —— */
  .grid, .grid-2, .grid-3, .grid-4, .tech-grid, .arch { gap: 14px; }
  .stats-grid { gap: 16px; }
  .card { padding: 20px 18px; }
  .card .ic { width: 46px; height: 46px; margin-bottom: 12px; }
  .card h3 { font-size: 1.06rem; margin-bottom: 7px; }
  .card p { font-size: 0.92rem; line-height: 1.66; }

  /* —— FAQ —— */
  .faq-item { margin-bottom: 10px; }
  .faq-q { padding: 15px 16px; gap: 12px; font-size: 0.98rem; }

  /* —— 长文阅读流畅度：连续段落恢复呼吸感（全局 reset 曾将 margin 清零） —— */
  p + p { margin-top: 0.72em; }

  /* —— 中文排版细节：长英文串 / URL 不撑破容器 —— */
  p, .lead, .card p, .faq-a { overflow-wrap: break-word; word-break: break-word; }

  /* —— style-guide 页内联样式同步收紧，保证全站一致 —— */
  body .sg-top { padding: 96px 0 26px; }
  body .sg-sec { padding: 36px 0; }
  body .sg-nav .container { padding: 8px 16px; }
}

/* ============ 视觉卡 / 示意图：悬停(桌面) 或 点触(移动) 浮起 + 流动电流边框 ============ */
@property --beam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes beam-spin { to { --beam: 360deg; } }

.s-card,
.phone-slide {
  position: relative;
  cursor: pointer;
  transition: transform .42s cubic-bezier(.2, .7, .3, 1), box-shadow .42s ease, filter .42s ease, background-color .42s ease;
  will-change: transform;
}

/* 流动电流光束：conic 渐变 + 旋转角度，遮罩只保留 2px 边框 */
.s-card::after,
.phone-slide::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--beam, 0deg),
              rgba(91, 140, 255, 0) 0deg,
              #5b8cff 60deg,
              #00e5ff 130deg,
              #7c5cff 200deg,
              rgba(91, 140, 255, 0) 320deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

/* 悬停 / 点触激活态：轻轻浮起、微微放大、轻微变色 */
.s-card:hover, .s-card.is-lift,
.phone-slide:hover, .phone-slide.is-lift {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 26px 56px rgba(22, 42, 92, .20);
  filter: saturate(1.08) brightness(1.03);
}
.s-card:hover, .s-card.is-lift { background-color: #f8fbff; }
.s-card:hover::after, .s-card.is-lift::after,
.phone-slide:hover::after, .phone-slide.is-lift::after {
  opacity: 1;
  animation: beam-spin 2.8s linear infinite;
}

/* 手机展示块：本身 overflow:hidden，改为贴边内环；悬停/点触时整屏放大并浮起，底图切换为 contain 显示完整画面 */
.phone-slide { overflow: hidden; }
.phone-slide::after { inset: 0; border-radius: 18px; }
.phone-slide:hover, .phone-slide.is-lift { transform: scale(1.06); position: relative; z-index: 6; }

/* ==================================================================
   风车轮动可视化：十字风车 / 3D 旋转木马 / 涡轮叶片
   渐进增强 —— 由 main.js 读取 .s-card 内原有条目自动生成，脚本失效时回退为原列表
   ================================================================== */
@property --beam-cool { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes beam-cool-spin { to { --beam-cool: 360deg; } }

/* 容器接管：风车直接浮在 .s-visual 的渐变底上，去掉白卡外壳 */
.s-card.is-wm {
  background: transparent;
  box-shadow: none;
  padding: 8px 4px 4px;
  max-width: none;
  width: 100%;
  cursor: default;
}
.s-card.is-wm:hover { transform: none; box-shadow: none; filter: none; background: transparent; }
.s-card.is-wm::after { display: none; }
/* 卡片内保留的附加块（如「实时预览」展示区）排在风车下方 */
.s-card.is-wm > *:not(.wm) { position: relative; z-index: 2; margin-top: 16px; }

/* 主题变量：字色 / 图标 / 光束 跟随所在模块底色（v1 橙 / v2 紫 / v3 青），
   取值均为该色系的深色版，保证在白色卡片上与浅渐变底上都有高对比度 */
.s-visual.v1 {
  --wm-ink: #7c3311; --wm-ink-2: #9c4a20; --wm-accent: #e8431a;
  --wm-chip: linear-gradient(135deg, #fff1ea, #ffe0cf);
  --wm-b1: #ff5b22; --wm-b2: #ffb347; --wm-b3: #ff8fb0;
}
.s-visual.v2 {
  --wm-ink: #3a2c93; --wm-ink-2: #5b4cb8; --wm-accent: #6d5df6;
  --wm-chip: linear-gradient(135deg, #efeaff, #e3dcff);
  --wm-b1: #6d5df6; --wm-b2: #a78bfa; --wm-b3: #f0abfc;
}
.s-visual.v3 {
  --wm-ink: #075f51; --wm-ink-2: #0c7f69; --wm-accent: #0ea371;
  --wm-chip: linear-gradient(135deg, #e6fbf4, #d6f3ff);
  --wm-b1: #0ea371; --wm-b2: #38d9c0; --wm-b3: #7dd3fc;
}

.wm { position: relative; width: 100%; }
.wm-title { font-size: 14px; font-weight: 800; color: var(--wm-ink, #3a4264); text-align: center; margin-bottom: 10px; letter-spacing: .02em; }
.wm-stage {
  position: relative; margin: 0 auto;
  width: var(--wm-sw, 600px); height: var(--wm-sh, 560px);
  /* 正位卡片（自动轮动高亮）叠加特效的可调参数 */
  --wm-lift: 16px;     /* 视觉卡浮起距离 */
  --wm-act-scale: 1.14; /* 自动高亮卡片的放大倍率（点击聚焦时由 JS 另行放大到 2 倍居中） */
}
/* 基准尺寸（已回调）：之前放大 2 倍导致风车模块占整页比例过大、文字显小、单屏看不全；
   现缩小基准尺寸，并把色块约束在 680px 居中，桌面端由 JS 按容器等比缩放填充该色块 */
.wm[data-wm="cross"] .wm-stage    { --wm-sw: 600px; --wm-sh: 560px; --wm-cw: 196px; --wm-r: 192px; }
.wm[data-wm="turbo"] .wm-stage    { --wm-sw: 600px; --wm-sh: 560px; --wm-cw: 196px; --wm-r: 192px; }
.wm[data-wm="carousel"] .wm-stage { --wm-sw: 620px; --wm-sh: 540px; --wm-cw: 184px; --wm-r: 180px; perspective: 1000px; }
.wm-inner { position: absolute; inset: 0; z-index: 2; }
.wm[data-wm="cross"] .wm-inner,
.wm[data-wm="turbo"] .wm-inner,
.wm[data-wm="carousel"] .wm-inner { transform-style: preserve-3d; }

.wm-blade {
  position: absolute; left: 50%; top: 50%;
  transition: transform .95s cubic-bezier(.62, .02, .24, 1), opacity .6s ease;
  will-change: transform;
}
.wm[data-wm="carousel"] .wm-blade { backface-visibility: hidden; }

.wm-card {
  position: relative;
  width: var(--wm-card-w, var(--wm-cw, 158px));
  padding: 20px 12px 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(14, 21, 48, .07);
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .22);
  text-align: center;
  transition: transform .95s cubic-bezier(.62, .02, .24, 1), box-shadow .5s ease, border-color .5s ease, filter .5s ease;
}
/* 流动电流光束：蓝→青→紫，仅正位卡片亮起并持续旋转 */
.wm-card::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: inherit; padding: 3px;
  background: conic-gradient(from var(--beam-cool, 0deg),
              #4f7cff 0deg,
              #38e1ff 90deg,
              #a855f7 180deg,
              #4f7cff 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.wm-blade.is-active .wm-card::after { opacity: 1; animation: beam-cool-spin 2.6s linear infinite; }

.wm-blade:not(.is-active) { opacity: .52; z-index: 1; }
.wm-blade.is-active { z-index: 3; }
.wm-blade.is-active .wm-card {
  border-color: color-mix(in srgb, var(--wm-accent, #ff5b22) 42%, transparent);
  box-shadow: 0 30px 60px -16px color-mix(in srgb, var(--wm-b1, #ff5b22) 50%, transparent), 0 6px 16px -4px rgba(15, 23, 42, .18);
  /* 背景轻微变亮 / 饱和（白卡上几乎不可见，但在预览图与彩色图标上明显提亮） */
  filter: brightness(1.06) saturate(1.18);
}

.wm-ic {
  width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 19px;
  display: grid; place-items: center;
  background: var(--wm-chip, linear-gradient(135deg, #fff1ea, #ffe0cf));
  color: var(--wm-accent, #ff5b22);
}
/* 功能预览图模式：把图标区域扩展为卡片内的预览图 */
.wm-ic.has-img {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  margin-bottom: 10px; border-radius: 14px;
  background: transparent; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
.wm-ic.has-img img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
}
.wm-ic svg { width: 37px; height: 37px; }
.wm-no { font-size: 26px; font-weight: 800; }
.wm-name { font-size: 15px; font-weight: 800; color: var(--wm-ink, #2a304a); line-height: 1.45; }
.wm-blade.is-active .wm-name { color: var(--wm-accent, #ff5b22); }

/* 中心轴 */
.wm-hub {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wm-b1, #ff5b22), var(--wm-b2, #ffb347));
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--wm-b1, #ff5b22) 62%, transparent);
  z-index: 1;
}
.wm-hub svg { width: 24px; height: 24px; }
.wm[data-wm="carousel"] .wm-hub { display: none; }

/* 底部说明 + 指示点 */
.wm-foot { margin-top: 16px; text-align: center; }
.wm-cap { font-size: 13.5px; color: var(--wm-ink-2, #6b7390); line-height: 1.7; min-height: 23px; }
.wm-dots { display: flex; gap: 9px; justify-content: center; margin-top: 12px; }
.wm-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(14, 21, 48, .18); cursor: pointer;
  transition: width .35s ease, background .35s ease;
}
.wm-dot.is-active { width: 26px; border-radius: 999px; background: linear-gradient(135deg, var(--wm-b1, #ff5b22), var(--wm-b2, #ffb347)); }

@media (prefers-reduced-motion: reduce) {
  .wm-blade, .wm-card { transition-duration: .01ms; }
  .wm-blade.is-active .wm-card::after { animation: beam-cool-spin 2.6s linear infinite; opacity: 1; }
}
@media (max-width: 640px) {
  /* 风车纯色框突破 .container 的 20px 内边距，占满手机屏宽（尺寸由 JS 单公式自适应） */
  .s-visual:has(.is-wm) {
    padding: 12px;
    margin-inline: -20px;
    border-radius: 20px;
  }
  .wm-title { font-size: 12.5px; margin-bottom: 8px; }
  .wm-card { padding: 13px 8px 11px; border-radius: 15px; }
  .wm-ic { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 8px; }
  .wm-ic.has-img { border-radius: 10px; }
  .wm-ic svg { width: 25px; height: 25px; }
  .wm-no { font-size: 19px; }
  .wm-name { font-size: 12px; line-height: 1.4; }
  .wm-hub { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .wm-hub svg { width: 18px; height: 18px; }
  .wm-cap { font-size: 12.5px; min-height: 21px; }
}
/* 两列布局的中等视口：收窄模块内边距，给放大的风车让出空间 */
@media (min-width: 900px) and (max-width: 1200px) {
  .s-visual { padding: 36px 20px; }
}

/* =========================================================
   角色/业态 幻灯片：合并到一个窗口框内左右切换，叠加底图，
   带三色电流边框 + 2 秒自动轮动 + 点击浮窗放大
   ========================================================= */
.role-slider { width: 100%; max-width: 920px; margin: 0 auto; }
.rs-frame {
  position: relative;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .18);
  overflow: hidden;
  transition: transform .42s cubic-bezier(.2, .7, .3, 1), box-shadow .42s ease;
  will-change: transform;
}
/* 流动电流边框：蓝 → 青 → 紫 */
.rs-frame::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: inherit; padding: 3px;
  background: conic-gradient(from var(--beam-cool, 0deg),
              #4f7cff 0deg, #38e1ff 90deg, #a855f7 180deg, #4f7cff 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
  animation: beam-cool-spin 2.6s linear infinite;
}
.rs-frame > * { position: relative; z-index: 1; }

/* 悬浮放大（桌面 :hover / 移动端点击浮起 .is-lift）：整框浮起 + 明显放大，移开/再次点击恢复；
   内部底图切换为 contain，完整呈现画面，无需再点开灯箱 */
.rs-frame:hover, .rs-frame.is-lift {
  transform: translateY(-14px) scale(1.1);
  z-index: 60;
  box-shadow: 0 54px 120px -30px rgba(15, 23, 42, .45);
}
.rs-frame:hover .rs-bg, .rs-frame.is-lift .rs-bg { object-fit: contain; }

/* 统一：所有视觉卡（角色幻灯片 / 手机样机 / 风车预览缩略图）在悬停或点触浮起时，
   内部图片切换为 contain，完整呈现画面；移开 / 取消恢复 cover 原样 */
.phone-slide:hover img, .phone-slide.is-lift img,
.wm-ic.has-img:hover img, .wm-ic.has-img.is-lift img,
.s-ic.wm-preview:hover img, .s-ic.wm-preview.is-lift img { object-fit: contain; }

.rs-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 16 / 12;
}
.rs-track {
  display: flex;
  height: 100%;
  transition: transform .55s cubic-bezier(.62, .02, .24, 1);
  will-change: transform;
}
.rs-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  cursor: pointer;
}
.rs-bg {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* 占位底图：渐变 + 微纹理 */
.rs-slide.is-placeholder .rs-bg.rs-placeholder {
  background:
    var(--grad-mesh),
    linear-gradient(135deg, #f7f8fc 0%, #eef0f7 100%);
}

/* 占位 slide 居中信息层 */
.rs-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 40px; text-align: center;
  color: var(--ink);
  pointer-events: none;
}
.rs-overlay .rs-ico {
  width: 58px; height: 58px; border-radius: 18px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  background: #fff;
  box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .14);
  color: var(--brand);
}
.rs-overlay .rs-ico svg { width: 28px; height: 28px; }
.rs-overlay strong {
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 800; margin-bottom: 10px;
}
.rs-overlay span {
  color: var(--ink-soft); font-size: 1rem;
  max-width: 460px; line-height: 1.55;
}
.rs-overlay .rs-tags {
  margin-top: 22px; display: flex; flex-wrap: wrap;
  gap: 9px; justify-content: center;
}
.rs-overlay .rs-tags > span {
  font-size: .82rem; font-weight: 700;
  padding: 7px 13px; border-radius: 999px;
  background: #fff; color: var(--brand);
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .1);
}

/* 左下角角色标签 */
.rs-caption {
  position: absolute;
  left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -6px rgba(15, 23, 42, .18);
  color: #1a2036;
  font-size: 14px;
}
.rs-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rs-meta strong {
  display: inline-block;
  margin-right: 6px;
  font-weight: 800;
}
.rs-meta span {
  color: #5b6382;
  font-size: 12.5px;
}

/* 左右切换箭头 */
.rs-nav {
  position: absolute;
  top: 50%;
  width: 44px; height: 44px;
  margin-top: -22px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #2a304a;
  font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, .22);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
  z-index: 3;
}
.rs-nav:hover { transform: scale(1.08); background: #fff; }
.rs-prev { left: 14px; }
.rs-next { right: 14px; }

/* 底部指示点 */
.rs-dots {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 3;
}
.rs-dot {
  width: 8px; height: 8px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: width .35s ease, background .35s ease;
}
.rs-dot.is-active {
  width: 22px; border-radius: 999px;
  background: linear-gradient(135deg, #ff5b22, #ffb347);
}

/* 灯箱（Lightbox）已于交互重构中移除：改为悬停/点触浮窗放大并显示完整画面，无需点击全屏灯箱 */

@media (max-width: 768px) {
  .rs-viewport { aspect-ratio: 16 / 11; border-radius: 18px; }
  .rs-frame:hover, .rs-frame.is-lift { transform: translateY(-10px) scale(1.06); }
  .rs-frame { border-radius: 18px; }
  .rs-frame::after { inset: -2px; padding: 2px; }
  .rs-caption { left: 12px; bottom: 12px; padding: 6px 10px 6px 6px; font-size: 12px; }
  .rs-avatar { width: 28px; height: 28px; }
  .rs-meta span { display: none; }
  .rs-nav { width: 34px; height: 34px; margin-top: -17px; font-size: 18px; }
  .rs-prev { left: 8px; }
  .rs-next { right: 8px; }
  .rs-dots { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-track { transition-duration: .01ms; }
  .rs-frame::after { animation: none; }
}