:root {
  /* 亮色占位：沿用当前粉白风格，必要时可切换 */
  --bg: #FFFCFC;
  --bg-elevated: #FFFFFF;
  --bg-hover: #FFF7F7;
  --line: #F9F1F1;

  --text-strong: #0A0A0B;
  --text: #333333;
  --text-subtle: #666666;
  --text-muted: #9CA3AF;

  --primary: #f43f5e; /* rose-500 */
  --primary-600: #e11d48; /* rose-600 */
  --glow: #fb7185;      /* rose-400 */

  /* 渐变令牌（用于按钮/标题等） */
  --brand-grad-start: #f43f5e;
  --brand-grad-end: #fb7185;

  /* 与内容页切换器兼容的变量名映射 */
  --grad-start: var(--brand-grad-start);
  --grad-end: var(--brand-grad-end);
}

html, body { background: var(--bg); color: var(--text); }

/* 轻量映射（不改变现有 index.css，只提供变量兼容） */
.gradient-text { background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 顶部导航下载按钮：白底彩色渐变描边（浅色主题下可见） */
.nav-outline-gradient {
  background:
    linear-gradient(180deg, #ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-end)) border-box;
  color: var(--primary);
  border: 2px solid transparent;
  border-radius: 9999px;
  box-shadow: 0 6px 16px rgba(244,63,94,0.15);
}
.nav-outline-gradient:hover { filter: brightness(1.02); box-shadow: 0 8px 20px rgba(244,63,94,0.20); }

/* 首屏与 CTA 主按钮：品牌渐变填充 */
.hero-button-gradient {
  background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-end));
  color: #fff;
  border: 0;
  box-shadow: 0 8px 20px rgba(244,63,94,0.25);
}
.hero-button-gradient:hover { filter: brightness(1.04); box-shadow: 0 10px 26px rgba(244,63,94,0.30); }

/* Footer 统一背景与气泡动画（低灰度、半透明） */
.footer { position: relative; overflow: visible; background: #F9FAFB; }
.footer .container { overflow: visible; } /* 确保容器不裁剪下拉菜单 */
.footer-decor { 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  overflow: hidden; /* 只对装饰元素应用overflow hidden，不影响下拉菜单 */
}
.footer-decor .fa {
  position: absolute;
  color: rgb(245 69 99 / 41%);
  will-change: transform, opacity;
  animation: footerFloat var(--fdur, 18s) ease-in-out infinite;
  opacity: var(--fopa, 0.20);
}
@keyframes footerFloat {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}