/* 丰禾云管家官网 - 公共样式（Tailwind 工具类之外的补充） */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #f8f9ff;
  color: #0b1c30;
}

/* 品牌徽标：绿色圆角方块 + "丰" 字，纯 CSS 实现，避免额外图片请求 */
.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #005136 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 81, 54, 0.25);
}
.brand-badge.sm {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 10px;
}

/* 卡片悬浮效果 */
.bento-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bento-card:hover {
  transform: translateY(-6px);
}

/* 渐变时间轴竖线 */
.timeline-gradient {
  background: linear-gradient(to bottom, #006c49 0%, #006c49 100%);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Hero 区抽象渐变背景，替代实景图，避免使用境外图床 */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(16, 185, 129, 0.18), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(29, 78, 216, 0.12), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(0, 108, 73, 0.10), transparent 55%);
  pointer-events: none;
}

.dark-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, #0b1c30 0%, #0f3d33 55%, #005136 100%);
  overflow: hidden;
}
.dark-mesh::before,
.dark-mesh::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.dark-mesh::before {
  width: 420px;
  height: 420px;
  background: rgba(16, 185, 129, 0.35);
  top: -120px;
  right: -80px;
}
.dark-mesh::after {
  width: 360px;
  height: 360px;
  background: rgba(29, 78, 216, 0.25);
  bottom: -140px;
  left: -60px;
}

/* 仪表盘模拟卡片中的柱状图/折线图，纯 CSS 绘制 */
.mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 96px;
}
.mock-bars span {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #10b981 0%, #006c49 100%);
  opacity: 0.85;
}

.mock-line {
  width: 100%;
  height: 56px;
}

/* 场景色块图标底纹 */
.scenario-visual {
  position: relative;
  overflow: hidden;
}
.scenario-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: 0.5;
}

/* 联系我们地图区域：点阵网格 + 定位标记，替代实景地图图片 */
.map-grid {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #dce9ff;
  background-image:
    linear-gradient(#c7d7ef 1px, transparent 1px),
    linear-gradient(90deg, #c7d7ef 1px, transparent 1px);
  background-size: 32px 32px;
}

/* 移动端导航菜单 */
#mobile-nav {
  display: none;
}
#mobile-nav.open {
  display: flex;
  flex-direction: column;
}

/* 滚动淡入动画基础类 */
.reveal {
  transition: all 0.7s ease-out;
  opacity: 0;
  transform: translateY(24px);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}