/* ===========================================================
   绿春翔 lcx365.com — 清爽极简增强层 v2
   在 site.css 之后加载，仅做视觉与动态增强，
   不改文案、结构、表格与事实口径。保留品牌绿 #74BE5B。
   设计取向：扁平化（发丝描边代替厚阴影）、纯净底色、
   克制留白、清晰层级 —— 真正的「极简 / 清爽」。
   渐进增强：reveal 初始隐藏态仅在 html.anim 下生效，
   JS 失效则内容默认可见。
   =========================================================== */

/* 锚点跳转避开吸顶导航 */
html { scroll-padding-top: 88px; }

/* ---- 纯净中性色（谷歌式白净底 + 单一品牌绿点缀） ---- */
:root {
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --line: #E8EBE7;
  --line-soft: #F2F5F0;
  /* 更克制的圆角：由 Material 的 20/16px 收敛为 16/12px，更接近谷歌的利落感 */
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  /* 阴影极度收敛：默认几乎只是发丝线，仅 hover 给一点浮起反馈 */
  --shadow-sm: 0 1px 2px rgba(20, 33, 26, 0.03);
  --shadow: 0 2px 10px -6px rgba(20, 60, 30, 0.10);
  --shadow-lg: 0 8px 24px -14px rgba(20, 60, 30, 0.18);
}

/* ---- 留白与层级节奏：更大气、更统一 ---- */
.sec { padding: 96px 0; }
.sec-tight { padding: 60px 0; }
.sec-head { margin-bottom: 48px; }
.sec-head h2 { margin-bottom: 12px; letter-spacing: -0.02em; }
.sec-lead { font-size: 15.5px; line-height: 1.78; color: var(--muted); }

/* ---- 统一揭示动画系统 ---- */
html.anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  will-change: opacity, transform;
}
html.anim .reveal.in { opacity: 1; transform: none; }

/* ---- 卡片：扁平化 —— 用发丝描边代替厚阴影 ---- */
.card {
  box-shadow: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--green-100);
}
.card h3 { letter-spacing: -0.01em; }

/* ---- 品类格：同样扁平 ---- */
.catgrid a, .catgrid div {
  box-shadow: none;
  border: 1px solid var(--line);
}
.catgrid a:hover { border-color: var(--green-100); box-shadow: var(--shadow); }

/* ---- 事实卡 / 表格容器：扁平 ---- */
.factsheet { box-shadow: none; border: 1px solid var(--line); }
.table-wrap { box-shadow: none; border: 1px solid var(--line); }

/* ---- 首屏数字条：去阴影，发丝描边 ---- */
.facts div {
  box-shadow: none;
  border: 1px solid var(--line-soft);
}
.facts div:hover { border-color: var(--green-100); }

/* ---- 流程条 / 标签：扁平描边 ---- */
.flow > div { box-shadow: none; border: 1px solid var(--line); }
.flow > div:hover { border-color: var(--green-100); box-shadow: var(--shadow); }
.tags span { box-shadow: none; border: 1px solid var(--line); }

/* ---- hero：白净、大气、光斑极淡 ---- */
.hero {
  padding: 84px 0 56px;
  background:
    radial-gradient(560px 300px at 85% -10%, rgba(116, 190, 91, 0.07) 0%, rgba(116, 190, 91, 0) 60%),
    linear-gradient(180deg, #F5F9F1 0%, #FFFFFF 82%);
}
.hero h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.18; }
.hero .ans { font-size: 17px; max-width: 38em; }

/* ---- 表格：清晰、紧凑、对齐统一、不拆断数字/日期 ---- */
table.data { border: 1px solid var(--line); }
table.data th {
  background: var(--green-025);
  color: var(--green-800);
  border-bottom: 1px solid var(--line);
}
table.data td {
  vertical-align: top;
  padding: 14px 18px;
  line-height: 1.7;
}
table.data td:first-child {
  white-space: nowrap;          /* 指标列短标签不换行，消除空旷错位 */
  font-weight: 600;
  color: var(--ink);
  width: 116px;
}
table.data tbody tr:hover td { background: #FAFDF7; }
/* 不拆断数字与日期 */
.nw { white-space: nowrap; }

/* ---- 导航：滚动后加深分层感（吸顶更扎实，但仍克制） ---- */
.hdr {
  transition: box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hdr.scrolled {
  box-shadow: 0 1px 2px rgba(20, 33, 26, 0.04), 0 8px 24px -16px rgba(20, 60, 30, 0.22);
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--line);
}

/* ---- 滚动进度条 ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, var(--brand), var(--green-600));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.08s linear;
  pointer-events: none;
}

/* ---- 价格表分页器（承接 500+ 行，干净不卡） ---- */
.price-pager { margin-top: 18px; display: flex; justify-content: center; }
.pager-inner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pager-btn {
  font-size: 13.5px; font-weight: 600; color: var(--green-800);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s, color 0.16s;
}
.pager-btn:hover:not([disabled]) { border-color: var(--green-500); color: var(--green-700); }
.pager-btn.on { background: var(--green-600); border-color: var(--green-600); color: #fff; cursor: default; }
.pager-btn[disabled] { opacity: 0.45; cursor: default; }
.pager-ell { color: var(--faint); padding: 0 2px; }
.pager-info { font-size: 12.5px; color: var(--muted); margin-left: 8px; }

/* ---- 合作品牌标签：更清爽，带轻交互 ---- */
.brand-tag {
  transition: transform 0.18s var(--ease), box-shadow 0.18s,
    border-color 0.18s, background 0.18s, color 0.18s;
}
.brand-tag:hover {
  transform: translateY(-2px);
  border-color: var(--green-100);
  background: var(--green-050);
  color: var(--green-800);
}

/* ---- 品牌名：动态排版 + 夸张动作（仅允许动效时启用） ----
   入口：错峰“弹入”——从底部缩放+旋转飞入，带回弹缓动；
   悬浮：放大+旋转+品牌渐变填充+绿调辉光，动作夸张。
   不改动任何文案与事实口径，仅装饰。 */
@media (prefers-reduced-motion: no-preference) {
  html.anim .brand-tags .brand-tag {
    transition: opacity .55s var(--ease),
                transform .85s cubic-bezier(.34, 1.56, .64, 1);
  }
  html.anim .brand-tags .brand-tag.reveal:not(.in) {
    opacity: 0;
    transform: translateY(48px) scale(.2) rotate(-14deg);
    transform-origin: 50% 120%;
  }
  /* 偶数列反向旋转，墙面更“活” */
  html.anim .brand-tags .brand-tag.reveal:nth-child(even):not(.in) {
    transform: translateY(48px) scale(.2) rotate(14deg);
  }
  /* 每三列从左下错位飞入，强化动态排版感 */
  html.anim .brand-tags .brand-tag.reveal:nth-child(3n):not(.in) {
    transform: translate(-30px, 48px) scale(.2) rotate(-9deg);
  }
  /* 悬浮：动作大且夸张 */
  html.anim .brand-tags .brand-tag:hover {
    transform: translateY(-16px) scale(1.22) rotate(-7deg);
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 28px 48px -16px rgba(14, 163, 114, .55);
    z-index: 3;
  }
  html.anim .brand-tags .brand-tag:hover:nth-child(even) {
    transform: translateY(-16px) scale(1.22) rotate(7deg);
  }
}

/* ---- 清晰的键盘焦点（无障碍） ---- */
:focus-visible {
  outline: 2.5px solid var(--green-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- 友好降级：用户偏好减少动态效果 ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================================================
   BOLD + DYNAMIC 增强层（在清爽底子上做“大胆 + 动态”）
   对标 Google 产品页：大字号强层级、品牌渐变强调、
   首屏动态光晕、更强揭示、数字滚动（count-up）。
   仍遵守渐进增强与 reduced-motion 降级。
   =========================================================== */
:root {
  --grad: linear-gradient(115deg, #0EA372 0%, #1FC28A 45%, #5BD99B 100%);
}

/* 渐变文字（关键词高亮 / 大数字） */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--green-700);
  white-space: nowrap;
}

/* ---- 更大胆的层级：首屏与板块标题放大、加粗、收紧字距 ---- */
.hero h1 {
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.028em;
  max-width: 13.4em;
}
.phead h1 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800; letter-spacing: -0.02em;
}
.sec-head h2 {
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 800; letter-spacing: -0.025em;
}
.eyebrow {
  font-weight: 700; letter-spacing: 0.14em; color: var(--green-700);
}
.sec-lead { font-size: 16.5px; }

/* ---- 首屏动态光晕：两团缓慢漂移的柔光，营造“动态”氛围 ---- */
.hero { position: relative; overflow: hidden; }
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(46px); opacity: 0.6; pointer-events: none; z-index: 0;
}
.hero::before {
  width: 540px; height: 540px; top: -170px; right: -130px;
  background: radial-gradient(circle at 32% 30%, rgba(31,194,138,0.50), rgba(31,194,138,0) 70%);
  animation: lcx-aurora-a 15s ease-in-out infinite alternate;
}
.hero::after {
  width: 480px; height: 480px; bottom: -210px; left: -150px;
  background: radial-gradient(circle at 60% 40%, rgba(91,217,155,0.40), rgba(91,217,155,0) 70%);
  animation: lcx-aurora-b 19s ease-in-out infinite alternate;
}
.hero .wrap { position: relative; z-index: 1; }
@keyframes lcx-aurora-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-46px, 34px, 0) scale(1.14); }
}
@keyframes lcx-aurora-b {
  from { transform: translate3d(0,0,0) scale(1.06); }
  to   { transform: translate3d(54px, -34px, 0) scale(1.2); }
}

/* ---- 更强的揭示：位移 + 轻微缩放，更“动态” ---- */
html.anim .reveal {
  transform: translateY(26px) scale(0.985);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.anim .reveal.in { transform: none; }

/* ---- 卡片悬浮更明显：抬升 + 绿调辉光 + 顶部渐变线 ---- */
.card {
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
  position: relative;
}
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.32s var(--ease);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 42px -22px rgba(20,90,50,0.45);
  border-color: var(--green-100);
}
.card:hover::after { transform: scaleX(1); }

/* ---- 按钮更灵动 ---- */
.btn { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s; }
.btn-primary:hover { transform: translateY(-3px) scale(1.02); }
.btn-ghost:hover { transform: translateY(-3px); }

/* ---- 滚动进度条更醒目 ---- */
.scroll-progress { height: 4px; background: var(--grad); }

/* ---- 数字统计卡：更大胆的渐变数字 + 更强悬浮 ---- */
.stat b {
  font-size: clamp(30px, 4vw, 46px);
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--green-700);
}
.stat:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 42px -22px rgba(20,90,50,0.45);
  border-color: var(--green-100);
}
.countnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- reduced-motion：关掉光晕等位移/循环动画（揭示已由上方处理） ---- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none !important; }
  .card::after { transition: none !important; }
}

/* ============================================================
   首页：核心亮点自动滚动跑马灯 + 品类横向自动滚动（动态层）
   原则：渐进增强——JS 失效内容仍可滑到；reduced-motion 退化为
   可手动横向滚动；纯装饰，不改文案与事实口径。
   ============================================================ */

/* ---- 核心亮点跑马灯（深色底、浅字、强对比，突出重点、略过次要） ---- */
.lcx-ticker {
  background: linear-gradient(115deg, #0B2C1B 0%, #103A26 58%, #0E9F6E 150%);
  color: #EAF6EE;
  overflow: hidden;
  padding: 13px 0;
  position: relative;
}
.lcx-ticker::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 64px;
  background: linear-gradient(90deg, #0B2C1B, rgba(11, 44, 27, 0));
  z-index: 2; pointer-events: none;
}
.lcx-ticker::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 64px;
  background: linear-gradient(270deg, #0E9F6E, rgba(14, 159, 110, 0));
  z-index: 2; pointer-events: none;
}
.lcx-ticker-track {
  display: flex; width: max-content;
  animation: lcx-marquee 32s linear infinite;
}
.lcx-ticker:hover .lcx-ticker-track { animation-play-state: paused; }
.lcx-set { display: flex; align-items: center; }
.lcx-ticker-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 22px; font-size: 14.5px; font-weight: 600;
  white-space: nowrap; letter-spacing: .01em;
}
.lcx-ticker-item b { color: #fff; font-weight: 800; }
.lcx-ticker-item::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #1FC28A; margin-left: 22px; flex: 0 0 5px;
}
@keyframes lcx-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- 品类：横向无缝循环（两侧渐隐收边，卡片不会硬切在边缘） ---- */
@media (prefers-reduced-motion: no-preference) {
  .catgrid.lcx-scroll {
    display: flex; flex-wrap: nowrap; gap: 14px;
    overflow-x: auto; padding-bottom: 8px;
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    /* 内容在遮罩下滚动：两端渐隐到页面底色，中间完全不透明 */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  }
  .catgrid.lcx-scroll::-webkit-scrollbar { display: none; }
  .catgrid.lcx-scroll a { flex: 0 0 240px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  /* 窄屏遮罩收窄，否则两侧渐隐占比过大 */
  .catgrid.lcx-scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  }
  .catgrid.lcx-scroll a { flex: 0 0 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .lcx-ticker { overflow-x: auto; }
  .lcx-ticker-track { animation: none; }
}

/* ============================================================
   首页中屏「价格动态」弹层（Google 风格：浅蓝 + 大圆角 + 克制）
   ============================================================ */
.lcx-pp {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(32,33,36,.34);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.lcx-pp.show { opacity: 1; visibility: visible; }
.lcx-pp-card {
  width: min(400px, 94vw); background: #fff; border-radius: 24px;
  box-shadow: 0 24px 60px -20px rgba(32,33,36,.4); overflow: hidden;
  transform: translateY(14px) scale(.98);
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
  font-family: inherit;
}
.lcx-pp.show .lcx-pp-card { transform: none; }
.lcx-pp-hd { display:flex; justify-content:space-between; align-items:flex-start;
  padding: 18px 20px 14px; background: #E8F0FE; }
.lcx-pp-hd b { font-size: 17px; color: #202124; letter-spacing: .2px; }
.lcx-pp-hd i { display:block; font-style:normal; font-size:12px; color:#5f6368; margin-top:3px; }
.lcx-pp-close { border:0; background:transparent; font-size:22px; line-height:1;
  color:#5f6368; cursor:pointer; padding:0 4px; }
.lcx-pp-tabs { display:flex; gap:8px; padding:14px 20px 0; flex-wrap:wrap; }
.lcx-pp-tab { border:0; background:#f1f3f4; color:#3c4043; font-size:12.5px;
  padding:7px 13px; border-radius:999px; cursor:pointer; transition:background .2s,color .2s; }
.lcx-pp-tab.on { background:#1a73e8; color:#fff; }
.lcx-pp-headline { margin:12px 20px 0; font-size:12.5px; color:#5f6368; line-height:1.65; }
.lcx-pp-body { padding:8px 20px 4px; max-height: 46vh; overflow-y:auto; }
.lcx-pp-row { display:flex; align-items:center; gap:10px; padding:11px 0;
  border-bottom:1px solid #f1f3f4; }
.lcx-pp-row:last-child { border-bottom:0; }
.lcx-pp-cat { flex:1; font-size:14px; color:#202124; }
.lcx-pp-avg { font-size:13px; color:#3c4043; font-variant-numeric:tabular-nums; }
.lcx-pp-avg i { font-style:normal; font-size:10.5px; color:#9aa0a6; margin-left:3px; }
.lcx-pp-chg { font-size:12.5px; font-weight:600; min-width:66px; text-align:right;
  font-variant-numeric:tabular-nums; }
.lcx-pp-chg.up { color:#d93025; }   /* 涨 = 红 */
.lcx-pp-chg.down { color:#188038; } /* 跌 = 绿 */
.lcx-pp-chg.flat { color:#5f6368; }
.lcx-pp-chg.new { color:#9aa0a6; font-weight:400; }
.lcx-pp-empty { font-size:13px; color:#9aa0a6; padding:14px 0; }
.lcx-pp-ft { padding:14px 20px 18px; border-top:1px solid #f1f3f4;
  display:flex; flex-direction:column; gap:11px; }
.lcx-pp-ft span { font-size:11.5px; color:#9aa0a6; line-height:1.55; }
.lcx-pp-cta { align-self:flex-start; background:#1a73e8; color:#fff; text-decoration:none;
  font-size:13px; font-weight:600; padding:9px 18px; border-radius:999px; }
.lcx-pp-cta:hover { background:#1765cc; }
@media (prefers-reduced-motion: reduce) {
  .lcx-pp, .lcx-pp-card { transition: none; }
  .lcx-pp-card { transform: none; }
}