* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  transition: background .5s ease, color .3s;
}

body.light {
  background: radial-gradient(circle at top left, rgba(196, 168, 90, 0.24), transparent 26%),
              radial-gradient(circle at 82% 14%, rgba(182, 100, 60, 0.16), transparent 24%),
              linear-gradient(180deg, #f8f3e8 0%, #f4efe3 42%, #ece4d4 100%);
  color: var(--ink);
}

/* grain 纹理（亮色） */
body.light .grain-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.06;
  background-image: linear-gradient(rgba(20,30,24,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(20,30,24,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at center, black 54%, transparent 100%);
}
/* 轨道装饰（亮色） */
body.light .orbit-ring { position: fixed; border-radius: 999px; border: 1px solid rgba(31,90,67,0.08); pointer-events: none; z-index: 0; }
body.light .orbit-ring.r1 { width: 58vw; height: 58vw; max-width: 760px; max-height: 760px; right: -16vw; top: -10vw; transform: rotate(-12deg); }
body.light .orbit-ring.r2 { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; left: -12vw; top: 18vh; transform: rotate(18deg); }


.container { max-width: 900px; margin: 0 auto; padding: 20px; position: relative; z-index: 1; }

/* 全局滚动条 */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.1); }
body.light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); }

/* 键盘焦点可见性 */
:focus-visible { outline: 2px solid rgba(31,90,67,0.5); outline-offset: 2px; border-radius: 4px; }
body.light :focus-visible { outline-color: rgba(232,200,121,0.5); }

/* ── 右上角按钮 ── */
.intro-actions {
  position: fixed; top: 16px; right: 16px; z-index: 99999;
  display: flex; gap: 8px;
}
.intro-actions button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(23,34,28,0.18);
  background: rgba(255,255,255,0.42);
  color: #1d1d1f; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.intro-actions button:hover { background: rgba(255,255,255,0.62); }
/* 系统深色模式且无 body.light 时恢复浅色文字 */
@media (prefers-color-scheme: dark) {
  body:not(.light) .intro-actions button {
    color: #d1d5db; border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
  }
  body:not(.light) .intro-actions button:hover { background: rgba(255,255,255,0.14); }
}
body.light .intro-actions button {
  border-color: #d1d5db; background: var(--glass); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); color: #000;
}
body.light .intro-actions button:hover { background: #e5e7eb; }
/* ── 亮色模式文字适配 ── */
body.light .hero-title-line { color: #1d1d1f; }
body.light .hero-desc span { color: #6b7370 !important; }
body.light .company-box p { color: #3f4a42 !important; }
body.light .company-box > div:last-child { color: #6b7370 !important; }
body.light .feature-card .label { color: #4a554e !important; }
body.light .v-card h3 { color: #1d1d1f; }
body.light .v-card p { color: #3f4a42 !important; }
body.light .stat-label { color: #6b7370 !important; font-weight: 500; }
body.light .svc-item .svc-label { color: #4a554e !important; }
body.light .section-title { color: #17221c !important; }
body.light .footer .f1 { color: #86868b !important; }
body.light .footer .f2 { color: #a0a0a5 !important; }
body.light .footer .f3 { color: #c0c0c5 !important; }
/* ── 深色模式：所有灰色文字强制白色（仅非 light 时生效）── */
body.light .hero-sub-line { color: #d97706; }
body.light .hero-slogan { color: var(--forest) !important; }
body.light .container .hero-desc strong { color: var(--forest); }
body.light .feature-card { background: var(--glass); border-color: var(--glass-border); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
body.light .feature-card:hover { background: rgba(31,90,67,0.08); border-color: var(--forest); }
body.light .v-card { background: var(--glass); border-color: var(--glass-border); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
body.light .v-card:hover { background: rgba(255,253,248,0.92); border-color: rgba(23,34,28,0.14); }
body.light .company-box { background: var(--card-bg); border-color: var(--forest); }
body.light .stat-item { background: var(--glass); border-color: var(--glass-border); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
body.light .svc-item { background: var(--glass); border-color: var(--glass-border); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
body.light .svc-item:hover { background: rgba(31,90,67,0.08); border-color: var(--forest); }
/* ── 加载遮罩 ── */
.intro-loading {
  position: fixed; inset: 0; z-index: 999999;
  display: none; align-items: center; justify-content: center;
  background: rgba(3,7,18,0.92); backdrop-filter: blur(12px);
  flex-direction: column;
}
.intro-loading.show { display: flex; }
.intro-loading .spinner {
  width: 40px; height: 40px; border: 3px solid rgba(31,90,67,0.2);
  border-top-color: var(--forest); border-radius: 50%;
  animation: spin .8s linear infinite; margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 功能卡片点击跳转加速 */
.intro-loading .lt { font-size: 14px; color: rgba(255,255,255,0.7); }
a { text-decoration: none; color: inherit; }
.container { max-width: 900px; margin: 0 auto; padding: 20px; }

/* ── 玻璃卡片通用样式 ── */
.glass {
  border: 1px solid rgba(23, 34, 28, 0.10);
  background: rgba(255, 251, 243, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(16, 30, 25, 0.14);
  border-radius: 16px;
}
.glass-hover:hover { transform: translateY(-2px); transition: transform .2s ease; }

/* Hero */
.hero {
  text-align: center; padding: 46px 16px 22px;
  animation: heroIn .6s ease both;
}
.hero h1 { font-size: 54px; font-weight: 800; line-height: 1.2; letter-spacing: 1px; font-family: "Songti SC", "SimSun", "Noto Serif SC", serif; }
.g1 { background: linear-gradient(135deg, #1a3a2e, #3d6b4f, #8b6914); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.slogan-sub { display: block; font-size: 24px; margin-top: 16px; font-weight: 600; letter-spacing: 3px; font-family: "Songti SC", "SimSun", "Noto Serif SC", serif; color: var(--copper); }
.hero-desc { margin: 14px auto 6px; max-width: 620px; font-size: 15px; line-height: 1.8; color: var(--muted); letter-spacing: 0.02em; }
@keyframes heroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(31,90,67,0.06); padding: 7px 18px; border-radius: 50px;
  font-size: 13px; color: #2d5a43; margin-bottom: 20px;
  border: 1px solid rgba(31,90,67,0.12); font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif; letter-spacing: 0.02em;
  font-weight: 500;
}
/* AI Input Box — 玻璃质感 */
.ai-input-wrap {
  max-width: 640px; margin: 0 auto 10px; position: relative;
  animation: heroIn .6s ease .2s both;
}
.ai-input-box {
  display: flex; align-items: center;
  border: 1px solid rgba(23,34,28,0.10);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px; padding: 5px; padding-right: 6px;
  transition: all .3s ease;
  box-shadow: 0 8px 32px rgba(16, 30, 25, 0.10);
}
.ai-input-box:focus-within {
  border-color: rgba(31,90,67,0.3);
  box-shadow: 0 0 0 3px rgba(31,90,67,0.08), 0 8px 32px rgba(16,30,25,0.12);
}
.ai-input-box input {
  flex: 1; height: 52px; background: none; border: none; padding: 0 18px;
  color: var(--ink); font-size: 16px; outline: none; font-family: inherit; min-width: 0;
}
.ai-input-box .voice-trigger {
  width: 40px; height: 40px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #f5f0e8, #ede5d6);
  color: #7a6b50; margin-right: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: all .2s ease;
}
.ai-input-box .voice-trigger:hover { background: linear-gradient(135deg, #ede5d6, #ddd4c0); color: #5a4a30; transform: scale(1.06); }
.ai-input-box .submit-trigger {
  width: 48px; height: 48px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, #1a5a43, #134d38);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: all .2s ease; flex-shrink: 0;
}
.ai-input-box .submit-trigger:hover { background: linear-gradient(135deg, #134d38, #0d3d2a); transform: scale(1.04); }
/* Quick asks */
.quick-asks { display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center; margin-top: 14px; animation: heroIn .6s ease .3s both; }
.quick-asks button {
  border: 1px solid rgba(23,34,28,0.08);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 26px; color: #3f4a42; font-size: 13px; padding: 8px 18px;
  cursor: pointer; transition: all .2s ease; font-family: inherit; white-space: nowrap;
  font-weight: 500;
}
.quick-asks button:hover { background: rgba(255,255,255,0.92); border-color: rgba(23,34,28,0.15); transform: translateY(-1px); }
/* Featured Shortcuts — 网格卡片（UI增强：2×3 网格 + 副说明，辨识度更高） */
.featured-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 20px 0 0; animation: heroIn .6s ease .4s both;
}
.featured-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px 14px; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--glass-border);
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  transition: all .25s ease; min-width: 0;
  box-shadow: 0 2px 10px rgba(16,30,25,0.04);
}
.featured-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,30,25,0.10); border-color: rgba(23,34,28,0.14); }
.fi-icon { font-size: 30px; line-height: 1; margin-bottom: 2px; }
.fi-label { font-size: 14px; color: #3f4a42; font-weight: 600; white-space: nowrap; }
/* UI增强：副说明，降低认知成本 */
.fi-sub { font-size: 11px; color: rgba(90,99,92,0.75); line-height: 1.3; text-align: center; white-space: nowrap; }
@media (max-width: 600px) {
  .featured-row { grid-template-columns: repeat(2, 1fr); }
}
/* Section */
.section { margin-bottom: 40px; }
.section-title {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 16px; letter-spacing: 1.5px; display: flex; align-items: center; gap: 8px;
}
/* Company box — 玻璃质感 */
.company-box {
  border: 1px solid rgba(31,90,67,0.12);
  background: rgba(255,251,243,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px; padding: 24px; margin-bottom: 32px;
}
/* Feature grid */
.feature-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
}
.feature-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px; padding: 12px 8px; text-align: center;
  transition: all .2s; cursor: pointer; display: block;
}

/* S级大卡片 — 玻璃质感 */
.feature-grid-s { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.card-s {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: 16px; text-decoration: none;
  border: 1px solid rgba(23,34,28,0.08);
  background: rgba(255,251,243,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .2s; min-height: 68px;
  position: relative; overflow: hidden;
}
/* A级中卡片 */
.feature-grid-m { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.card-m {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-radius: 12px; text-decoration: none;
  border: 1px solid rgba(23,34,28,0.06);
  background: rgba(255,251,243,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12px; color: var(--muted); transition: all .2s;
}
/* ── 浅色模式全局文字颜色修复 ── */
/* ── 卡片入场动画 ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.card-anim { animation: cardIn .45s ease both; }
.card-anim:nth-child(1) { animation-delay: 0s; }
.card-anim:nth-child(2) { animation-delay: 0.06s; }
.card-anim:nth-child(3) { animation-delay: 0.12s; }
.card-anim:nth-child(4) { animation-delay: 0.18s; }
.card-anim:nth-child(5) { animation-delay: 0.24s; }
.card-anim:nth-child(6) { animation-delay: 0.30s; }
.card-anim:nth-child(7) { animation-delay: 0.36s; }
.card-anim:nth-child(8) { animation-delay: 0.42s; }
.card-anim:nth-child(9) { animation-delay: 0.48s; }
.card-anim:nth-child(10) { animation-delay: 0.54s; }
.card-anim:nth-child(11) { animation-delay: 0.60s; }
.card-anim:nth-child(12) { animation-delay: 0.66s; }

/* ── S级卡片悬停增强 ── */
.card-s { position: relative; overflow: hidden; }
.card-s::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px;
  opacity: 0; transition: opacity .4s;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.card-s:hover::after { opacity: 1; }
/* S级卡片微光晕 */
.card-s::before {
  content: ''; position: absolute; inset: -1px; border-radius: 15px;
  opacity: 0; transition: opacity .4s;
  background: inherit; filter: blur(6px); z-index: -1;
}
.card-s:hover::before { opacity: 0.4; }

/* ── 网站化样式 ── */
.value-section { margin: 36px 0 10px; }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.value-card {
  border: 1px solid rgba(23,34,28,0.07);
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-radius: 18px; padding: 26px 24px; transition: all .3s ease;
  box-shadow: 0 2px 12px rgba(16,30,25,0.05);
}
.value-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(16,30,25,0.10); border-color: rgba(23,34,28,0.14); }
/* UI增强：图标落进浅圆底，强化"核心卖点"区块感 */
.vc-icon { font-size: 30px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; line-height: 1; border-radius: 14px; background: rgba(31,90,67,0.07); box-shadow: inset 0 1px 2px rgba(31,90,67,0.06); }
/* UI增强：hover 时顶部森林绿描边，暗示这是重点区块 */
.value-card { position: relative; overflow: hidden; }
.value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--forest),var(--copper)); opacity: 0; transition: opacity .3s ease; }
.value-card:hover::before { opacity: 1; }
.vc-title { font-size: 17px; font-weight: 700; color: #17221c; margin-bottom: 8px; font-family: "Songti SC", "SimSun", "Noto Serif SC", serif; line-height: 1.35; }
.vc-desc { font-size: 14px; color: #5a635c; line-height: 1.7; }
.section-header {
  font-size: 14px; font-weight: 700; color: #2d2d2f;
  margin: 28px 0 6px; padding-left: 2px;
  letter-spacing: 0.5px;
}
.about-section { text-align: center; padding: 30px 0; margin-top: 20px; border-top: 1px solid rgba(23,34,28,0.08); }
.about-section h2 { font-size: 16px; font-weight: 600; color: var(--forest); margin-bottom: 8px; font-family: "Noto Serif SC", serif; }
.about-section p { font-size: 12px; color: var(--muted); max-width: 500px; margin: 0 auto; line-height: 1.6; }
/* ── 微信入口 ── */
.about-wechat { margin-top: 14px; }
.wechat-link { display: inline-block; font-size: 13px; color: var(--copper); text-decoration: none; padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(182,100,60,0.2); transition: all .2s; background: rgba(182,100,60,0.04); }
.wechat-link:hover { background: rgba(182,100,60,0.1); border-color: rgba(182,100,60,0.4); transform: translateY(-1px); }
/* ── 精选知识入口（卡片式，所有用户可见，【2026-08-25】UI 升级） ── */
.kb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 0; }
.kb-item {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 18px 16px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(31,90,67,0.14);
  background: linear-gradient(135deg, rgba(255,251,243,0.85), rgba(255,255,255,0.55));
  box-shadow: 0 2px 8px rgba(23,34,28,0.04);
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}
.kb-item::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(31,90,67,0.04), rgba(182,100,60,0.05));
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.kb-item:hover {
  transform: translateY(-2px);
  border-color: rgba(31,90,67,0.32);
  box-shadow: 0 8px 20px rgba(23,34,28,0.10);
}
.kb-item:hover::before { opacity: 1; }
.kb-icon-wrap {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--forest, #1f5a43), #2d7a5b);
  color: #fff; font-size: 18px; line-height: 1;
  box-shadow: 0 3px 8px rgba(31,90,67,0.25);
}
.kb-label {
  font-size: 15px; font-weight: 700;
  color: #1d1d1f; flex: 1; letter-spacing: 0.3px;
  position: relative; z-index: 1;
}
.kb-sub {
  font-size: 11px; color: rgba(45,90,67,0.6);
  font-weight: 500; line-height: 1.4;
  position: relative; z-index: 1;
}
.kb-arrow {
  position: absolute; top: 14px; right: 14px;
  font-size: 14px; color: rgba(31,90,67,0.32);
  transition: all .25s;
}
.kb-item:hover .kb-arrow { color: var(--forest); transform: translateX(3px); }
body.light .kb-item {
  background: linear-gradient(135deg, rgba(255,251,243,0.95), rgba(255,255,255,0.75));
  border-color: rgba(31,90,67,0.18);
}
body.light .kb-label { color: #1d1d1f; }
body.light .kb-sub { color: rgba(45,90,67,0.55); }
body.dark .kb-item {
  background: linear-gradient(135deg, rgba(45,55,50,0.55), rgba(60,75,68,0.35));
  border-color: rgba(77,154,116,0.18);
}
body.dark .kb-item:hover { border-color: rgba(77,154,116,0.35); }
body.dark .kb-label { color: #e2e8f0; }
body.dark .kb-sub { color: rgba(207,230,216,0.55); }
/* ── 动态数字入场动画 ── */
.stat-num-live { transition: all .4s ease; }
.stat-num-live.loaded { animation: numIn .5s ease both; }
@keyframes numIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Stats 行式 */
.stats-row { display: flex; gap: 10px; margin: 24px 0; }
.stats-row .stat-item {
  flex: 1; text-align: center;
  padding: 14px 8px; border-radius: 16px;
  border: 1px solid rgba(23,34,28,0.06);
  background: rgba(255,251,243,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#toggleMoreBtn {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px; color: rgba(255,255,255,0.3); font-size: 12px;
  padding: 7px 24px; cursor: pointer; font-family: inherit; transition: all .2s ease;
}
#toggleMoreBtn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
body.light #toggleMoreBtn { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); color: #86868b; }
body.light #toggleMoreBtn:hover { background: rgba(0,0,0,0.04); color: #5a5a5e; }

/* ── 骨架屏加载占位 ── */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skel {
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
  background-size: 800px 100%; animation: shimmer 1.8s ease-in-out infinite; border-radius: 8px; display: inline-block;
}
body.light .skel { background: linear-gradient(90deg, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.02) 75%); background-size: 800px 100%; }

/* ── 加载进度条（页面跳转） ── */
.page-loader { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg,var(--forest),var(--forest),#8B5CF6,#f59e0b,var(--forest)); background-size: 200% 100%; z-index: 999999; width: 0; transition: none; }
.page-loader.active { width: 65%; transition: width 1s cubic-bezier(0.23,1,0.32,1); animation: loaderFlow 1.2s linear infinite; }
@keyframes loaderFlow { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.page-loader.done { width: 100%; opacity: 0; transition: width .3s, opacity .3s; }

/* ── 涟漪点击效果 ── */
.ripple { position: relative; overflow: hidden; }
.ripple::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,0.08); opacity: 0; transform: scale(0); transition: none; pointer-events: none; }
.ripple:active::after { opacity: 1; transform: scale(1); transition: transform .3s, opacity .1s; }

/* ── 浮动粒子（背景装饰） ── */
@keyframes floatParticle {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(-100vh) translateX(30px) scale(0.5); opacity: 0; }
}
.particle { position: fixed; width: 3px; height: 3px; border-radius: 50%; pointer-events: none; z-index: 9999; }
/* ── S级卡片悬停增强 ── */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.feature-card .icon { font-size: 24px; margin-bottom: 4px; }
.feature-card .label { font-size: 11px; color: var(--muted); font-weight: 600; }

/* Value cards */
.v-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 32px; }
.v-card { border: 1px solid rgba(23,34,28,0.08);
  background: rgba(255,251,243,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px; padding: 20px 22px; transition: all .3s; }

/* Stats */
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 20px;
}
.stat-item { text-align: center; background: var(--glass); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border: 1px solid rgba(23,34,28,0.08); border-radius: 12px; padding: 16px 8px 12px; }
.stat-num { font-size: 26px; font-weight: 800; color: #2d2d2f; }
.stat-num.gold { color: #d4a017; }
.stat-num.blue { color: #4f46e5; }
.stat-num.pink { color: #e11d48; }
.stat-sub { font-size: 10px; line-height: 1.2; color: #9aa39c; margin-top: 2px; min-height: 12px; }
body.light .stat-sub { color: #9aa39c; }
body.dark .stat-sub { color: #7f8d7e; }
/* Footer */
.footer { text-align: center; padding: 40px 0 20px; border-top: 1px solid rgba(23,34,28,0.08); }
.footer .f1,.footer .f2,.footer .f3,.footer .f4 { font-size: 13px; line-height: 2; }
.footer .f1 { color: var(--muted); letter-spacing: 0.04em; }
/* 8板块 */
.svc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.svc-item {
  border: 1px solid rgba(23,34,28,0.06);
  background: rgba(255,251,243,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px; padding: 10px 8px; text-align: center; display: block; transition: all .2s;
}
/* Responsive */
@media (max-width: 768px) {
  .hero { padding: 36px 12px 20px; }
  .hero h1 { font-size: 34px; letter-spacing: 0.5px; }
  .slogan-sub { font-size: 20px; margin-top: 12px; letter-spacing: 1px; }
  .hero-desc { font-size: 14px; margin: 14px auto 24px; line-height: 1.7; }
  .feature-grid { grid-template-columns: repeat(3,1fr); }
  .v-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; gap: 12px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .svc-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .feature-grid { grid-template-columns: repeat(3,1fr); gap: 4px; }
  .feature-card { padding: 8px 4px; }
  .feature-card .icon { font-size: 16px; }
  .feature-card .label { font-size: 9px; }
}

/* ── 麦克风 SVG 图标（内联兜底，不依赖外部 CSS 缓存）── */
.mic-icon { display:inline-block; width:1.8em; height:1.8em;
  background-image:url("/src/ui/brain-ui/assets/mic-icon.svg");
  background-size:contain; background-repeat:no-repeat;
  background-position:center; vertical-align:-0.4em; flex-shrink:0; }
.mic-icon-lg { width:36px; height:36px; }
.fi-icon > .mic-icon, .ft-card > .mic-icon {
  width:18px !important; height:18px !important; vertical-align:-0.2em; background-size:contain; }
.ai-input-box .voice-trigger > .mic-icon {
  width:28px !important; height:28px !important; vertical-align:middle; }


.feature-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .25s ease;
}
.feature-modal {
  width: 90vw; max-width: 800px; max-height: 85vh;
  background: var(--paper); border-radius: 20px;
  overflow-y: auto; position: relative;
  box-shadow: 0 20px 60px rgba(16,30,25,0.10);
  animation: slideUp .3s ease;
}
.feature-close-btn:hover { background: rgba(0,0,0,0.15); }
.feature-header {
  text-align: center; padding: 40px 24px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.feature-brand {
  font-size: 28px; font-weight: 800;
  background: linear-gradient(135deg,var(--forest),var(--copper));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.feature-stats span {
  background: rgba(31,90,67,0.08); border: 1px solid rgba(31,90,67,0.15);
  color: var(--forest); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
}
.ft-card {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 10px; text-decoration: none;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s;
  border: 1px solid rgba(23,34,28,0.08);
}
body.light .ft-card {
  background: var(--card-bg); color: var(--ink);
  border-color: var(--line-soft);
}
.ft-card:hover {
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(31,90,67,0.12);
}
/* 工具分类标题 */
.ft-category {
  grid-column: 1 / -1;
  font-size: 13px; font-weight: 600; color: var(--forest);
  padding: 12px 0 4px 0; margin-top: 4px;
  border-bottom: 1px solid rgba(31,90,67,0.10);
  letter-spacing: 0.3px;
}
.ft-category:first-child { padding-top: 0; }

/* ═══ 【2026-08-15 改版】全部工具 · 分组网格布局 ═══
 * 74 个工具按分类分组：每组独立区块（标题+徽标数量 + 卡片网格），
 * 卡片用 auto-fill 网格整齐排列，彻底告别竖向堆叠的杂乱。 */
.feature-tools-grid,
#allToolsGrid {
  display: flex; flex-direction: column; gap: 16px;
  padding: 4px 2px;
}
.ft-group {
  background: rgba(31,90,67,0.03);
  border: 1px solid rgba(31,90,67,0.08);
  border-radius: 14px;
  padding: 12px 14px 14px;
}
body.light .ft-group {
  background: var(--card-bg, rgba(255,253,248,0.6));
  border-color: var(--line-soft, rgba(23,34,28,0.08));
}
.ft-group-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--forest);
  margin-bottom: 10px; letter-spacing: 0.4px;
}
.ft-group-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: rgba(31,90,67,0.10); color: var(--forest);
  border-radius: 10px; font-size: 11px; font-weight: 600;
}
.ft-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
.ft-group-grid .ft-card {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; text-decoration: none;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s;
  border: 1px solid rgba(23,34,28,0.08);
  background: rgba(255,255,255,0.5);
}
body.light .ft-group-grid .ft-card {
  background: rgba(255,253,248,0.85); color: var(--ink);
  border-color: rgba(23,34,28,0.10);
}
.ft-group-grid .ft-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(31,90,67,0.14);
  border-color: rgba(31,90,67,0.28);
  background: rgba(255,255,255,0.9);
}
.ft-group-grid .ft-card .ft-card-label {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
/* 深色主题适配 */
body:not(.light) .ft-group { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }
body:not(.light) .ft-group-grid .ft-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
body:not(.light) .ft-group-grid .ft-card:hover { background: rgba(31,90,67,0.18); border-color: rgba(31,90,67,0.4); }
@media (max-width: 560px) {
  .ft-group-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
  .ft-group-grid .ft-card { padding: 8px 10px; font-size: 12px; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }


      .hero-cta-row{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
      .hero-cta{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border-radius:24px;background:linear-gradient(135deg,var(--forest),#2f6b4f);color:#fff;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 8px 22px rgba(31,90,67,0.28);transition:box-shadow .2s;animation:heroCtaBounce 2.2s ease-in-out infinite;}
      .hero-cta:hover{box-shadow:0 14px 30px rgba(31,90,67,0.4);}
      @keyframes heroCtaBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
      .hero-cta-ghost{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:24px;border:1px solid rgba(182,100,60,0.35);color:var(--copper);font-weight:600;font-size:13px;text-decoration:none;background:rgba(182,100,60,0.05);transition:all .2s;}
      .hero-cta-ghost:hover{background:rgba(182,100,60,0.12);}
    

    #allToolsHeader:hover{background:linear-gradient(135deg,rgba(31,90,67,0.16),rgba(182,100,60,0.12));transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,30,25,0.10);}
  

/* ═══ 深色主题（body.dark 森林深绿版）2026-08-20 ═══ */
body.dark {
  --paper: #0e1f18;
  --paper-2: #12281f;
  --sand: #1a3327;
  --ink: #e8e4d8;
  --muted: #a9b9a8;
  --forest: #4d9a74;
  --forest-deep: #0c1d16;
  --copper: #d4895a;
  --glass: rgba(255,255,255,0.05);
  --glass-border: rgba(212,137,90,0.2);
  background: radial-gradient(circle at top left, rgba(61,139,109,0.16), transparent 30%),
              radial-gradient(circle at 85% 12%, rgba(182,100,60,0.10), transparent 26%),
              linear-gradient(180deg, #0c1d16 0%, #0e1f18 45%, #0a1812 100%);
  color: var(--ink);
  transition: background .5s ease, color .3s;
}
body.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
body.dark .grain-overlay { opacity: 0.04; }
body.dark .intro-actions button { color: #e8e4d8; border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.07); }
body.dark .intro-actions button:hover { background: rgba(255,255,255,0.14); }
body.dark .hero-badge { background: rgba(77,154,116,0.14); color: #cfe6d8; border-color: rgba(77,154,116,0.28); }
body.dark .hero-desc { color: #b5c4b8; }
body.dark .hero-hook { color: #8fa895 !important; }
body.dark .g1 { background: linear-gradient(135deg, #6fae8f, #a8d4bc, #d4bc78); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.dark .slogan-sub { color: #d4895a; }
body.dark .ai-input-box { background: rgba(13,29,22,0.78); border-color: rgba(160,190,170,0.16); box-shadow: 0 8px 32px rgba(0,0,0,0.35); }
body.dark .ai-input-box:focus-within { border-color: rgba(77,154,116,0.4); box-shadow: 0 0 0 3px rgba(77,154,116,0.12), 0 8px 32px rgba(0,0,0,0.4); }
body.dark .ai-input-box input { color: #e8e4d8; }
body.dark .ai-input-box .voice-trigger { background: linear-gradient(135deg, #1c3329, #15291f); color: #c9b98c; }
body.dark .ai-input-box .voice-trigger:hover { background: linear-gradient(135deg, #243f31, #1a2f24); color: #dcc88e; }
body.dark .quick-asks button { background: rgba(20,40,31,0.7); border-color: rgba(160,190,170,0.14); color: #cfd9cc; }
body.dark .quick-asks button:hover { background: rgba(40,70,52,0.85); border-color: rgba(77,154,116,0.3); color: #eef4ec; }
body.dark .featured-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.dark .featured-item:hover { border-color: rgba(77,154,116,0.35); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
body.dark .feature-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.dark .feature-card:hover { background: rgba(77,154,116,0.12); border-color: rgba(77,154,116,0.35); }
body.dark .card-s, body.dark .card-m { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.09); }
body.dark .v-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.dark .svc-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.dark .svc-item:hover { background: rgba(77,154,116,0.12); border-color: rgba(77,154,116,0.35); }
body.dark .company-box { background: rgba(255,255,255,0.04); border-color: rgba(77,154,116,0.18); }
body.dark .stats-row .stat-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
body.dark .stat-num { color: #f0ede4; }
body.dark .stat-num.gold { color: #d4bc78; }
body.dark .stat-num.blue { color: #8ea4e8; }
body.dark .stat-num.pink { color: #e88a9e; }
body.dark .stat-label { color: #a9b9a8; }
body.dark .section-header { color: #cfe6d8; }
body.dark .ft-group { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.dark .ft-group-grid .ft-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
body.dark .ft-group-grid .ft-card:hover { background: rgba(77,154,116,0.14); border-color: rgba(77,154,116,0.35); }
body.dark footer, body.dark .site-footer { background: #09150f; color: #8fa895; }
body.dark .hero-cta-ghost { border-color: rgba(212,137,90,0.35); color: #d4895a; background: rgba(212,137,90,0.08); }
body.dark .hero-cta-ghost:hover { background: rgba(212,137,90,0.16); }
body.dark #allToolsHeader:hover { background: linear-gradient(135deg, rgba(77,154,116,0.16), rgba(212,137,90,0.12)); }

/* ── 深色补充：价值卡/快捷卡/知识条目文字提亮 ── */
body.dark .value-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
body.dark .value-card:hover { border-color: rgba(77,154,116,0.4); box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
body.dark .vc-title { color: #f0ede4; }
body.dark .vc-desc { color: #b5c4b8; }
body.dark .vc-icon { background: rgba(77,154,116,0.14); box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); }
body.dark .fi-label { color: #d8e2da; }
body.dark .kb-item { background: rgba(77,154,116,0.06); border-color: rgba(77,154,116,0.15); }
body.dark .kb-item:hover { background: rgba(77,154,116,0.12); border-color: rgba(77,154,116,0.3); }
body.dark .kb-label { color: #cfe6d8; }
body.dark .kb-arrow { color: rgba(207,230,216,0.3); }
body.dark .kb-item:hover .kb-arrow { color: #4d9a74; }