/* ============================================================
   观智悦心 · 官网设计系统 Design System  v2
   Brand: 智感自然 · 科技悦心
   ------------------------------------------------------------
   本版核心变更（v2）：
   1) 色板全部回收到 logo 三原色：绿 #30AE24 / 蓝 #0066B4 / 黄绿 #BAC060
   2) 全面取消近黑色大色块（原 #0B2A18 / #12381F / #04170F），改为浅色渐变
   3) 版心 1280 → 1800，字号阶整体上移，首屏满高
   4) 语义分工：绿=品牌主体 / 蓝=技术与数据 / 黄绿=AI+园艺与指标点缀
   ============================================================ */

:root {
  /* ---------- 品牌绿 Green（核心，取自 logo 叶片 #30AE24） ---------- */
  --c-brand-900: #0E2C16; /* 仅极少量文字使用，不作大面积底色 */
  --c-brand-800: #143D1E;
  --c-brand-700: #186B28; /* 深色文字绿，白底对比 6.4:1 */
  --c-brand-600: #1F8630; /* 主按钮 / 链接绿，白底对比 4.65:1 */
  --c-brand-500: #30AE24; /* ★ logo 绿：图标、图形、进度、选中态 */
  --c-brand-400: #57C24A;
  --c-brand-300: #8AD97F;
  --c-brand-200: #C4ECBA;
  --c-brand-100: #E0F5D9;
  /* Logo 取色：柠檬黄 + 黄底深墨字 */
  --c-logo-yellow: #B8C05C;
  --c-logo-yellow-2: #C8D070;
  --c-logo-yellow-3: #A5AD4B;
  --c-on-yellow: #1C2A12;
  --c-brand-050: #F3FAEF;

  /* ---------- 科技蓝 Tech Blue（取自 logo 外环 #0066B4，只用于技术与数据语义） ---------- */
  --c-tech-800: #004B85;
  --c-tech-700: #005A9E;
  --c-tech-600: #0066B4; /* ★ logo 蓝 */
  --c-tech-500: #1B80CA;
  --c-tech-400: #4B9DD9;
  --c-tech-300: #86BAE4;
  --c-tech-100: #E3F0FB;
  --c-tech-050: #F3F8FD;

  /* ---------- 自然黄绿 Lime（取自 logo 顶冠 #BAC060，只用于 AI+园艺与指标点缀） ---------- */
  --c-lime-700: #6E7530; /* 黄绿系可读文字色，白底 4.9:1 */
  --c-lime-600: #97A03C;
  --c-lime-500: #BAC060; /* ★ logo 黄绿 */
  --c-lime-300: #D8DC9E;
  --c-lime-100: #F0F2D6;
  --c-lime-050: #F9FAEE;

  /* ---------- 兼容别名（旧组件仍在引用，统一指向新绿） ---------- */
  --c-olive: #30AE24;
  --c-olive-2: #8AD97F;
  --c-olive-soft: rgba(48, 174, 36, .14);
  --c-olive-ink: #186B28;
  --c-energy: #30AE24;
  --c-energy-2: #8AD97F;
  --c-energy-soft: rgba(48, 174, 36, .14);
  --c-glow: rgba(31, 134, 48, .16);

  /* ---------- 中性 Neutral（偏冷白，带极淡绿调，压低"脏"感） ---------- */
  --c-ink: #14201A;
  --c-ink-2: #26332B;
  --c-slate: #4D5A53;
  --c-mute: #7E8B84;
  --c-line: #E5ECE7;
  --c-line-2: #F1F5F2;
  --c-paper: #FFFFFF;
  --c-mist: #F7FAF8;
  --c-sage: #EFF6F0;
  --c-haze: #F4FAF3;
  --c-wash: #EAF6FB;

  /* ---------- 字体 Font ---------- */
  --font-sans: "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Noto Sans SC",
    "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-latin: "Optima", "Palatino Linotype", Palatino, Georgia, "Songti SC", serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ---------- 字阶 Type Scale（16 基准，约 1.25 比例，6 级可见） ---------- */
  --fs-display: clamp(2.75rem, 4.6vw, 4.5rem);     /* 44 → 72，中文 8 字以内不折行 */
  --fs-h1: clamp(2.125rem, 3.6vw, 3.375rem);       /* 34 → 54 */
  --fs-h2: clamp(1.75rem, 2.9vw, 2.75rem);         /* 28 → 44 */
  --fs-h3: clamp(1.25rem, 1.6vw, 1.625rem);        /* 20 → 26 */
  --fs-h4: 1.0625rem;                              /* 17 */
  --fs-lead: clamp(1.0625rem, 1.1vw, 1.1875rem);   /* 17 → 19 */
  --fs-body: 1rem;                                 /* 16 */
  --fs-sm: .9375rem;                               /* 15 */
  --fs-xs: .8125rem;                               /* 13 */
  --fs-micro: .6875rem;                            /* 11 */

  /* 中文行高：标题 1.14–1.3，正文 1.75–1.8（中文比西文需要更高行距） */
  --lh-display: 1.14;
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.78;
  --ls-tight: -.008em;  /* 中文负字距 ≥ -0.02em 开始糊，这里刻意保守 */
  --ls-wide: .16em;

  /* ---------- 间距 Spacing（4 / 8 的倍数） ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;
  --s-13: 128px; --s-14: 160px;

  /* 版心：1440 及以下与原来完全一致；1600 / 1920 等宽屏继续撑开到 1800，避免两侧大片空白 */
  --gutter: clamp(24px, 4vw, 88px);
  --maxw: 1800px;
  --maxw-narrow: 1080px;
  --maxw-text: 760px;
  --pad-section: clamp(72px, 8vw, 136px);

  /* ---------- 圆角 Radius ---------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --r-xl: 26px; --r-2xl: 34px; --r-3xl: 44px; --r-pill: 999px;

  /* ---------- 阴影 Shadow（绿调、低透明，避免"糊"） ---------- */
  --sh-xs: 0 1px 2px rgba(16, 40, 24, .05);
  --sh-sm: 0 2px 10px rgba(16, 40, 24, .05);
  --sh-md: 0 10px 28px -12px rgba(16, 40, 24, .16);
  --sh-lg: 0 22px 48px -20px rgba(16, 40, 24, .20);
  --sh-xl: 0 40px 90px -40px rgba(16, 40, 24, .26);
  --sh-brand: 0 14px 30px -14px rgba(31, 134, 48, .42);
  --sh-focus: 0 0 0 3px rgba(48, 174, 36, .28);

  /* ---------- 动效 Motion ---------- */
  --e-out: cubic-bezier(.22, .68, .32, 1);
  --e-inout: cubic-bezier(.65, .02, .28, 1);
  --e-spring: cubic-bezier(.34, 1.42, .48, 1);
  --t-fast: .18s;
  --t-base: .32s;
  --t-slow: .62s;
  --t-x: 1.05s;

  --header-h: 84px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-2);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-brand-500); outline-offset: 3px; border-radius: var(--r-xs); }
::selection { background: var(--c-brand-200); color: var(--c-brand-900); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-mist); }
::-webkit-scrollbar-thumb { background: var(--c-brand-200); border-radius: var(--r-pill); border: 3px solid var(--c-mist); }
::-webkit-scrollbar-thumb:hover { background: var(--c-brand-300); }

/* ============================================================
   排版 Typography
   ============================================================ */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-tight); font-weight: 700; }
.t-h1 { font-size: var(--fs-h1); line-height: 1.24; letter-spacing: var(--ls-tight); font-weight: 700; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.28; letter-spacing: var(--ls-tight); font-weight: 700; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.45; font-weight: 600; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.5; font-weight: 600; }
.t-lead { font-size: var(--fs-lead); line-height: 1.82; color: var(--c-slate); }
.t-body { font-size: var(--fs-body); }
.t-sm { font-size: var(--fs-sm); }
.t-xs { font-size: var(--fs-xs); }
.t-mute { color: var(--c-mute); }
.t-slate { color: var(--c-slate); }
.t-ink { color: var(--c-ink); }
.t-brand { color: var(--c-brand-600); }
.t-center { text-align: center; }
.t-balance { text-wrap: balance; }
.t-hide-mobile { display: inline; }

/* 装饰性衬线拉丁 / 编号 / 等宽 */
.latin { font-family: var(--font-latin); font-weight: 400; letter-spacing: .04em; }
.num-deco { font-family: var(--font-latin); font-size: 1.05em; font-weight: 400; letter-spacing: .06em; }
.mono { font-family: var(--font-mono); font-size: .72em; letter-spacing: .1em; text-transform: uppercase; }

/* 标签 / 眉题 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-brand-600); font-weight: 600;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-brand-500));
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--c-brand-500), transparent);
}
.eyebrow--light { color: var(--c-brand-200); }
.eyebrow--light::before { background: linear-gradient(90deg, transparent, var(--c-brand-300)); }
.eyebrow--light::after { background: linear-gradient(90deg, var(--c-brand-300), transparent); }
.eyebrow--tech { color: var(--c-tech-600); }
.eyebrow--tech::before { background: linear-gradient(90deg, transparent, var(--c-tech-500)); }
.eyebrow--tech::after { background: linear-gradient(90deg, var(--c-tech-500), transparent); }
/* 蓝版小标：用于「监测 · 辅导 · 训练 · 体验」这类环节词，与 Logo 蓝对齐 */
.eyebrow--blue { color: var(--c-tech-600); }
.eyebrow--blue::before { background: linear-gradient(90deg, transparent, var(--c-tech-600)); }
.eyebrow--blue::after { background: linear-gradient(90deg, var(--c-tech-600), transparent); }
.eyebrow--lime { color: var(--c-lime-700); }
.eyebrow--lime::before { background: linear-gradient(90deg, transparent, var(--c-lime-500)); }
.eyebrow--lime::after { background: linear-gradient(90deg, var(--c-lime-500), transparent); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); line-height: 1.4;
  background: var(--c-brand-050); color: var(--c-brand-700);
  border: 1px solid var(--c-brand-100);
  white-space: nowrap;
}
.chip--ghost { background: transparent; border-color: var(--c-line); color: var(--c-slate); }
.chip--light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); color: #fff; backdrop-filter: blur(8px); }
.chip--dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.chip--tech { background: var(--c-tech-050); border-color: var(--c-tech-100); color: var(--c-tech-700); }
.chip--lime { background: var(--c-lime-050); border-color: var(--c-lime-100); color: var(--c-lime-700); }

/* ============================================================
   布局 Layout
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--text { max-width: var(--maxw-text); }
.section { position: relative; padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section--mist { background: var(--c-mist); }
.section--sage { background: linear-gradient(180deg, var(--c-paper), var(--c-sage) 72%, var(--c-sage)); }
.section--dark { background: var(--c-brand-900); color: rgba(255, 255, 255, .82); }
.section--dark .t-h1, .section--dark .t-h2, .section--dark .t-h3 { color: #fff; }
.section--dark .t-lead, .section--dark .t-slate { color: rgba(255, 255, 255, .68); }

/* 12 列栅格 */
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; } .col-3 { grid-column: span 3; }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-10); margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head__text { max-width: 720px; }
.sec-head__title { margin-top: var(--s-4); }
.sec-head__desc { margin-top: var(--s-4); }
.sec-head__lead { max-width: 440px; }
.sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.sec-head--center .sec-head__text { max-width: 860px; }

.grid { display: grid; gap: var(--s-6); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }

/* 区块共用光斑（浅色科技感，替代原深色蒙版） */
.glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.glow--green { background: radial-gradient(circle, rgba(48, 174, 36, .17), transparent 70%); }
.glow--blue { background: radial-gradient(circle, rgba(0, 102, 180, .13), transparent 70%); }
.glow--lime { background: radial-gradient(circle, rgba(186, 192, 96, .20), transparent 70%); }

/* ============================================================
   组件 · 按钮 Button
   ============================================================ */
.btn {
  --btn-h: 48px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--btn-h); padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; cursor: pointer;
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
    background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out),
    border-color var(--t-base) var(--e-out);
  overflow: hidden; isolation: isolate;
}
.btn__icon { width: 15px; height: 15px; flex: none; transition: transform var(--t-base) var(--e-out); }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }

/* 主按钮统一取 Logo 的柠檬黄：黄底压深墨字，保证白底上的对比度 */
.btn--primary {
  background: var(--c-logo-yellow); color: var(--c-on-yellow);
  box-shadow: 0 12px 28px -16px rgba(140, 148, 52, .85);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--c-logo-yellow-2), var(--c-logo-yellow) 55%, var(--c-logo-yellow-3));
  opacity: 0; transition: opacity var(--t-base) var(--e-out);
}
.btn--primary:hover { transform: translateY(-2px); color: #16200F; box-shadow: 0 18px 38px -16px rgba(140, 148, 52, .95); }
.btn--primary:hover::after { opacity: 1; }

.btn--dark { background: var(--c-brand-700); color: #fff; }
.btn--dark:hover { transform: translateY(-2px); background: var(--c-brand-600); box-shadow: var(--sh-lg); }

.btn--ghost { background: rgba(255, 255, 255, .7); color: var(--c-ink); border: 1px solid var(--c-line); }
.btn--ghost:hover { border-color: var(--c-brand-300); color: var(--c-brand-700); background: var(--c-brand-050); transform: translateY(-2px); }

.btn--light { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px); }
.btn--light:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); transform: translateY(-2px); }

.btn--white { background: #fff; color: var(--c-brand-700); box-shadow: var(--sh-md); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }

.btn--lg { --btn-h: 56px; padding: 0 34px; font-size: var(--fs-body); }
.btn--sm { --btn-h: 40px; padding: 0 18px; font-size: var(--fs-xs); }

/* 文字按钮 */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-brand-700);
  padding-bottom: 3px; position: relative;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform var(--t-base) var(--e-out);
}
.link-arrow:hover::after { transform: scaleX(0); }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t-base) var(--e-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--light { color: var(--c-brand-200); }

/* ============================================================
   组件 · 卡片 Card
   ============================================================ */
.card {
  position: relative; background: var(--c-paper);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-brand-100); }
.card__body { padding: var(--s-7); }
.card__media { position: relative; overflow: hidden; background: var(--c-sage); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out); }
.card:hover .card__media img { transform: scale(1.05); }

/* 媒体遮罩（改为品牌绿调，不再是近黑） */
.card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20, 61, 30, .74) 100%); }
.card__scrim--soft { background: linear-gradient(180deg, rgba(20, 61, 30, .04) 0%, rgba(20, 61, 30, .1) 45%, rgba(20, 61, 30, .78) 100%); }

/* 素材图位（真实产品图 / 肖像位） */
.slot {
  position: relative; display: grid; place-items: center;
  background: linear-gradient(180deg, #F8FBF7 0%, #EDF5EE 100%);
  overflow: hidden;
}
.slot::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(31, 134, 48, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 134, 48, .07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(85% 70% at 50% 45%, #000 30%, transparent 78%);
}
.slot__mark { position: relative; text-align: center; padding: var(--s-6); color: var(--c-brand-700); }
.slot__icon { width: 34px; height: 34px; margin: 0 auto var(--s-3); opacity: .55; }
.slot__title { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; }
.slot__meta { margin-top: 6px; font-size: var(--fs-xs); color: var(--c-mute); }
.slot__corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--c-brand-400); opacity: .5; }
.slot__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.slot__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.slot__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.slot__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* ============================================================
   组件 · 表单 Form
   ============================================================ */
.field { position: relative; display: block; }
.field__label { display: block; font-size: var(--fs-xs); color: var(--c-slate); margin-bottom: 7px; font-weight: 500; }
.field__label .req { color: var(--c-brand-500); }
.input, .textarea, .select {
  width: 100%; min-height: 50px; padding: 13px 16px;
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.textarea { min-height: 112px; resize: vertical; line-height: 1.7; }
.input::placeholder, .textarea::placeholder { color: #A8B3AD; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--c-brand-200); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--c-brand-500); box-shadow: 0 0 0 3px rgba(48, 174, 36, .14);
}
.field.is-error .input, .field.is-error .textarea, .field.is-error .select { border-color: #D9534F; background: #FEF6F5; }
.field__err {
  display: none; margin-top: 6px; font-size: var(--fs-xs); color: #C4453F;
  align-items: center; gap: 5px;
}
.field__err::before { content: "!"; width: 13px; height: 13px; border-radius: 50%; background: #D9534F; color: #fff; font-size: 9px; display: grid; place-items: center; font-weight: 700; }
.field.is-error .field__err { display: flex; }
.field.is-valid .input, .field.is-valid .textarea { border-color: var(--c-brand-300); }

/* ============================================================
   组件 · 模态 Modal
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--s-6);
  background: rgba(16, 32, 24, .5); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--e-out), visibility var(--t-base);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
  position: relative; width: min(960px, 100%); max-height: 88vh; overflow: auto;
  background: var(--c-paper); border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  transform: translateY(18px) scale(.985); opacity: 0;
  transition: transform var(--t-slow) var(--e-out), opacity var(--t-slow) var(--e-out);
}
.modal.is-open .modal__box { transform: none; opacity: 1; }
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(8px);
  display: grid; place-items: center; transition: background var(--t-fast), transform var(--t-fast);
}
.modal__close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.modal__close svg { width: 16px; height: 16px; }
body.no-scroll { overflow: hidden; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 40px; z-index: 300;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: var(--r-pill);
  background: var(--c-brand-600); color: #fff; font-size: var(--fs-sm);
  box-shadow: 0 18px 40px -18px rgba(31, 134, 48, .6);
  transition: transform var(--t-base) var(--e-out), opacity var(--t-base) var(--e-out);
}
.toast.is-show { transform: translate(-50%, 0); opacity: 1; }
.toast__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-lime-300); flex: none; }

/* 跳过链接 */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 400;
  padding: 12px 20px; background: var(--c-brand-600); color: #fff; border-radius: var(--r-sm);
  transition: top var(--t-base) var(--e-out);
}
.skip-link:focus { top: 16px; }

/* 阅读进度 */
.progress {
  position: fixed; top: 0; left: 0; z-index: 210;
  height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-400) 55%, var(--c-tech-600));
}

/* 返回顶部 */
.to-top {
  position: fixed; right: 28px; bottom: 28px; z-index: 120;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-paper); color: var(--c-brand-700);
  box-shadow: var(--sh-lg); border: 1px solid var(--c-line);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base), background var(--t-fast);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-brand-500); color: #fff; border-color: var(--c-brand-500); }
.to-top svg { width: 17px; height: 17px; }

/* ============================================================
   滚动显现 Scroll Reveal
   ============================================================ */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--e-out), transform .9s var(--e-out);
  transition-delay: var(--rd, 0ms);
}
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="scale"] { transform: scale(.955); }
[data-reveal="mask"] { opacity: 1; clip-path: inset(0 0 100% 0); transform: none; transition: clip-path 1.1s var(--e-out) var(--rd, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }

/* 跑马灯 */
.mq { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq__track { display: flex; align-items: center; gap: 40px; width: max-content; animation: mqRun 34s linear infinite; }
.mq:hover .mq__track { animation-play-state: paused; }
@keyframes mqRun { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .mq__track { animation: none; }
}
/* 屏幕阅读器专用文字（全站通用，2026-11-03 从 product-flow.css 提到这里） */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}