/* ============================================================
   方案 C：翡翠信赖 (Jade)
   墨绿 + 琥珀 | 安全 / 合规 / 可持续 / 稳重可信
   用法：在 styles.css 之后加载，覆盖 :root 变量即可换肤
   ============================================================ */
:root {
  /* 主色 - 墨绿 */
  --primary: #0e7c66;
  --primary-dark: #0a5c4c;
  --primary-light: #2ba88f;
  --primary-bg: #e9f6f2;

  /* 强调色 - 琥珀 */
  --accent: #f2a007;
  --accent-dark: #d98a00;
  --accent-light: #fff7e6;

  /* 绿色阶 */
  --blue-50: #f0faf7;
  --blue-100: #dcf3ed;
  --blue-200: #b8e7db;
  --blue-300: #85d4c2;
  --blue-400: #4bbba3;
  --blue-500: #2ba88f;
  --blue-600: #12907a;
  --blue-700: #0e7c66;
  --blue-800: #0a5c4c;
  --blue-900: #073d33;

  /* 琥珀阶 */
  --orange-50: #fff7e6;
  --orange-100: #ffefcc;
  --orange-200: #ffdf99;
  --orange-300: #fdcb5c;
  --orange-400: #f8b62b;
  --orange-500: #f2a007;

  /* 文字 */
  --text: #0f1e1a;
  --text-secondary: #4b5a56;

  /* 圆角：柔和 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* 阴影：淡绿调、轻盈 */
  --shadow-sm: 0 1px 3px rgba(14, 124, 102, 0.08);
  --shadow-card: 0 2px 10px rgba(14, 124, 102, 0.07);
  --shadow-md: 0 10px 26px rgba(14, 124, 102, 0.13);
  --shadow-lg: 0 18px 42px rgba(10, 92, 76, 0.16);
  --shadow-xl: 0 26px 56px rgba(10, 92, 76, 0.20);

  /* 首屏渐变：深林 → 翡翠 */
  --hero-bg: linear-gradient(135deg, #04211b 0%, #0b4e42 58%, #159a80 100%);
}

/* ===== 模板中硬编码的 SVG 颜色跟随主题 ===== */
[fill="#0052cc" i] { fill: var(--primary); }
[fill="#ff6b35" i] { fill: var(--accent); }
[stroke="#0052cc" i] { stroke: var(--primary); }
[stroke="#ff6b35" i] { stroke: var(--accent); }
[fill="#3366ff" i] { fill: var(--primary-light); }

/* ===== 首屏：柔和绿光 ===== */
.hero { position: relative; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(56% 56% at 74% 34%, rgba(43, 168, 143, 0.30), transparent 72%),
    radial-gradient(48% 48% at 12% 80%, rgba(242, 160, 7, 0.18), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }

/* ===== 按钮：圆润、稳重 ===== */
.btn {
  border-radius: var(--radius-lg);
}
.btn-primary,
.btn-accent {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: transparent;
}
.btn-accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* ===== 卡片：浅色描边 + 柔和阴影 ===== */
.advantage-card,
.service-card,
.card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(14, 124, 102, 0.12);
  box-shadow: var(--shadow-card);
}
.advantage-card:hover,
.service-card:hover {
  border-color: rgba(14, 124, 102, 0.28);
  box-shadow: var(--shadow-lg);
}

/* ===== 板块标题：双色短线 ===== */
.section-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}

/* ===== 页脚：深林底 ===== */
.footer {
  background: linear-gradient(180deg, #073d33 0%, #04211b 100%);
}