/* ============================================================
   casta-sub.com — 新版视觉改版样式 (redesign)
   参考风格：kiofre.com (鼠尾草绿 Sage Green 现代电商风)
   应用方式：置于现有 style.css 之后加载（见 应用说明.md）
   ============================================================ */

/* ---------- 1. 设计 Token（全局变量） ---------- */
:root {
  /* 品牌色系：鼠尾草绿（参考 kiofre #8ABB91，工厂版加深） */
  --brand: #6B8F71;            /* 主品牌绿 */
  --brand-dark: #55755B;       /* 深绿（hover/深背景） */
  --brand-light: #8FAE8B;      /* 浅绿（点缀/渐变） */
  --brand-soft: #EFF4EF;       /* 极浅绿（区块背景） */
  --accent: #D9A441;           /* 金色点缀（CTA 辅助，克制使用） */
  --ink: #24312A;              /* 主文字（墨绿黑） */
  --ink-light: #5C6B62;        /* 次级文字 */
  --line: #E2E8E3;             /* 分隔线 */
  --bg-white: #FFFFFF;
  --bg-soft: #F7F9F7;          /* 页面浅背景 */
  --shadow-sm: 0 4px 16px rgba(36, 49, 42, 0.08);
  --shadow-md: 0 12px 32px rgba(36, 49, 42, 0.12);
  --radius: 14px;
  --font-head: 'Raleway', 'Poppins', sans-serif;
  --font-body: 'Open Sans', 'Microsoft YaHei', sans-serif;
}

/* ---------- 2. 字体引入 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Raleway:wght@500;600;700;800&display=swap');

/* ---------- 3. 全局基础 ---------- */
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-white);
  letter-spacing: 0.2px;
}

h1, h2, h3, h4, h5, .product_head h2, .about_h2, .news_title,
.adv_title, .footer_menu_first {
  font-family: var(--font-head);
  color: var(--ink);
}

/* ---------- 4. 顶栏 Top Bar ---------- */
div.top_menu {
  background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand) 100%);
  height: 44px;
  line-height: 44px;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.4px;
}
div.top_menu a {
  color: #fff;
}
div.top_menu a:hover {
  color: #fff;
  opacity: 0.85;
}

/* 顶栏社交图标 */
div.top_menu .fa {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  margin-left: 6px;
  transition: background 0.25s ease, transform 0.25s ease;
}
div.top_menu .fa:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

/* ---------- 5. 导航 Nav ---------- */
nav.navbar.navbar-default.navbar-fixed-top {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 2px 12px rgba(36,49,42,0.06);
  border: none;
  margin-top: 44px;
}
nav.navbar .navbar-nav > li > a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.5px;
  padding: 22px 18px;
  position: relative;
  transition: color 0.25s ease;
}
nav.navbar .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px;
  bottom: 12px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
nav.navbar .navbar-nav > li > a:hover,
nav.navbar .navbar-nav > li.open > a,
nav.navbar .navbar-nav > li.active > a {
  color: var(--brand);
  background: transparent;
}
nav.navbar .navbar-nav > li > a:hover::after,
nav.navbar .navbar-nav > li.active > a::after {
  transform: scaleX(1);
}

/* 下拉菜单 */
nav.navbar .dropdown-menu {
  border: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  padding: 10px 0;
  margin-top: 0;
}
nav.navbar .dropdown-menu > li > a {
  font-size: 13px;
  color: var(--ink);
  padding: 10px 24px;
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
}
nav.navbar .dropdown-menu > li > a:hover {
  color: var(--brand);
  background: var(--brand-soft);
  padding-left: 30px;
}

/* 语言切换器 */
div.language-switcher .language-btn {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 14px;
  transition: border-color 0.25s;
}
div.language-switcher .language-btn:hover {
  border-color: var(--brand);
}

/* ---------- 6. Hero 轮播 ---------- */
div.flash .bx-wrapper .bx-viewport {
  border: none;
  box-shadow: none;
  left: 0;
}
div.flash .bx-wrapper .bxslider li {
  position: relative;
}
/* 深色渐变遮罩提升文字可读性 */
div.flash .bx-wrapper .bxslider li::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(36,49,42,0.55) 0%,
    rgba(36,49,42,0.18) 50%,
    rgba(36,49,42,0.05) 100%);
  pointer-events: none;
}

/* 轮播分页圆点 */
div.flash .bx-wrapper .bx-pager.bx-default-pager a {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.3s, transform 0.3s;
}
div.flash .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: var(--brand-light);
  transform: scale(1.25);
}

/* ---------- 7. 统计框（数字滚动区） ---------- */
div.our_service {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  padding: 60px 15px;
}
div.our_service .ve {
  position: relative;
  padding: 26px 14px;
  border-radius: var(--radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
div.our_service .ve:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.06);
}
div.our_service .icon {
  margin-bottom: 12px;
}
div.our_service .icon img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
div.our_service .value {
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
div.our_service p {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ---------- 8. 区块通用标题 ---------- */
div.product_head h2 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 14px;
}
div.product_head span {
  background: var(--brand) !important;
  height: 3px !important;
  border-radius: 3px;
}
div.product_head p {
  color: var(--ink-light);
  font-size: 15px;
}

/* ---------- 9. CTA 按钮 ---------- */
a.about_btn, a.adv_btn {
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  border-radius: 30px !important;
  padding: 10px 28px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 6px 18px rgba(107,143,113,0.35);
}
a.about_btn:hover, a.adv_btn:hover {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(85,117,91,0.4);
  color: #fff !important;
  text-decoration: none;
}

/* ---------- 10. 产品卡片 ---------- */
div.product_list .adv,
div.news_list .news_box {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s;
}
div.product_list .adv:hover,
div.news_list .news_box:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-light);
}
div.product_list .adv img,
div.news_list .news_box img {
  transition: transform 0.5s ease;
}
div.product_list .adv:hover img,
div.news_list .news_box:hover img {
  transform: scale(1.05);
}
div.product_list .adv_desc,
div.news_list .news_desc {
  padding: 20px 22px 24px;
}
div.product_list .adv_title,
div.news_list .news_title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  margin: 8px 0 10px;
}
div.product_list .adv_title a,
div.news_list .news_title a {
  color: var(--ink);
}
div.product_list .adv_title a:hover,
div.news_list .news_title a:hover {
  color: var(--brand);
}
div.product_list .adv_desc p,
div.news_list .news_desc p {
  color: var(--ink-light);
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- 11. WHY CHOOSE US ---------- */
div.adv_bg {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%) !important;
}
div.adv_bg .about_head h2 {
  color: #fff;
}
div.adv_bg .about_head p {
  color: rgba(255,255,255,0.85);
}
div.adv_bg .about_head span {
  background: var(--accent) !important;
}
div.adv_bg .advantage {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 14px;
  transition: background 0.3s ease, transform 0.3s ease;
}
div.adv_bg .advantage:hover {
  background: rgba(255,255,255,0.14);
  transform: translateX(6px);
}
div.adv_bg .advantage_desc h2 {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
div.adv_bg .advantage_desc h2 a {
  color: #fff;
}
div.adv_bg .advantage_desc h2 a:hover {
  color: var(--accent);
}
div.adv_bg .advantage_desc p {
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  line-height: 1.7;
}
div.adv_bg .advantage a#about img {
  border-radius: 10px;
}

/* ---------- 12. About 区块 ---------- */
div.about_bg .about_img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
div.about_bg .about_h2 {
  font-size: 28px;
  font-weight: 700;
}
div.about_bg .about_p {
  color: var(--brand);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
}
div.about_bg .about_content {
  color: var(--ink-light);
  line-height: 1.8;
}

/* ---------- 13. NEWS ---------- */
div.news_bg {
  background: var(--bg-soft);
}
div.news_list .news_desc p i {
  color: var(--brand);
}

/* ---------- 14. 页脚 Footer ---------- */
footer {
  background: #1F2A23 !important;   /* 深墨绿 */
  color: rgba(255,255,255,0.78);
}
footer h2, footer h3, footer .about_h2,
footer .footer_menu_first,
footer .mm h2, footer .mm h3 {
  color: #fff !important;
}
footer .footer_menu_first {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 10px;
}
footer .footer_menu_first::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--brand-light);
}
footer a {
  color: rgba(255,255,255,0.72);
  transition: color 0.25s, padding-left 0.25s;
}
footer a:hover {
  color: var(--brand-light);
  padding-left: 4px;
  text-decoration: none;
}
footer .footer-bar {
  background: #182019 !important;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

/* ---------- 15. 在线客服浮动按钮 ---------- */
#ser_main a#floatShow1 {
  background: var(--brand) !important;
  border-radius: 10px 0 0 10px !important;
}
#ser_main ul li.online_title {
  background: var(--brand) !important;
}

/* ---------- 16. 回到顶部按钮 ---------- */
a.back_top, .back-to-top, #backTop, .cd-top, .go-top {
  background: var(--brand) !important;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
a.back_top:hover, .back-to-top:hover, #backTop:hover, .cd-top:hover, .go-top:hover {
  background: var(--brand-dark) !important;
}

/* ---------- 17. 滚动入场动效微调 ---------- */
[data-move-y] {
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* ---------- 18. 语言切换下拉美化 ---------- */
div.language-switcher div.language-item {
  border-radius: 6px;
  transition: background 0.2s;
}
div.language-switcher div.language-item:hover {
  background: var(--brand-soft);
}

/* ---------- 19. 响应式微调 ---------- */
@media (max-width: 767px) {
  div.top_menu {
    height: auto;
    line-height: 2.2;
    padding: 4px 12px;
    font-size: 12px;
  }
  nav.navbar.navbar-default.navbar-fixed-top {
    margin-top: 0;
  }
  div.our_service {
    padding: 40px 12px;
  }
  div.our_service .value {
    font-size: 32px;
  }
  div.product_head h2 {
    font-size: 26px;
  }
}