/* ========== 荣嘉精密机械官网 - 工业蓝 + 橙色主题（机械设备行业风） ========== */
:root {
  --brand: #0d4e96;          /* 主色：工业蓝 */
  --brand-dark: #0a3a6b;
  --brand-darker: #06294f;   /* 深蓝：页脚/深色区块 */
  --brand-light-bg: #eff6fd;
  --accent: #f26b0f;         /* 强调色：机械橙 */
  --accent-dark: #e05e00;
  --accent-light: #ff8a33;
}

* { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  background: #ffffff;
  color: #1e293b;
}

/* ---------- 导航（白色商务风） ---------- */
.site-header {
  transition: background-color 0.35s, box-shadow 0.35s;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 42, 77, 0.08);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(15, 42, 77, 0.12);
}
.nav-link { position: relative; color: #0a3a6b; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 3px;
  background: var(--accent);
  transition: width 0.3s;
}
.nav-link:hover, .nav-link.active { color: var(--accent); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.header-phone {
  background: linear-gradient(135deg, var(--accent-light), var(--accent) 55%, var(--accent-dark));
  color: #fff;
  box-shadow: 0 6px 18px rgba(242, 107, 15, 0.35);
  transition: transform 0.25s, box-shadow 0.25s;
}
.header-phone:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(242, 107, 15, 0.45); }

/* ---------- 按钮 ---------- */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-light), var(--accent) 55%, var(--accent-dark));
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(242, 107, 15, 0.35);
  transition: transform 0.25s, box-shadow 0.25s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(242, 107, 15, 0.5); }
.btn-blue {
  background: linear-gradient(135deg, #2a7fc4, #0d4e96 60%, #0a3a6b);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(13, 78, 150, 0.35);
  transition: transform 0.25s, box-shadow 0.25s;
}
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(13, 78, 150, 0.5); }
.btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  transition: all 0.25s;
}
.btn-outline:hover { border-color: var(--accent-light); color: var(--accent-light); transform: translateY(-2px); }

/* ---------- Hero 轮播 ---------- */
.hero-slide { opacity: 0; visibility: hidden; transition: opacity 1s ease; }
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-slide.active .hero-anim { animation: heroIn 0.9s ease both; }
.hero-slide.active .hero-anim:nth-child(2) { animation-delay: 0.12s; }
.hero-slide.active .hero-anim:nth-child(3) { animation-delay: 0.24s; }
.hero-slide.active .hero-anim:nth-child(4) { animation-delay: 0.36s; }
.hero-slide.active .hero-anim:nth-child(5) { animation-delay: 0.48s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-dot { transition: all 0.3s; }
.hero-dot.active { width: 32px; background: var(--accent); }

/* ---------- 卡片（硬朗工业风：小圆角 + 悬停描边） ---------- */
.product-card { transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s; border: 1px solid #e2e8f0; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(10, 58, 107, 0.16); border-color: var(--accent); }
.product-card .card-img { transition: transform 0.6s; }
.product-card:hover .card-img { transform: scale(1.08); }

.news-card { transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s; border: 1px solid #e2e8f0; }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10, 58, 107, 0.14); border-color: var(--accent); }

.gallery-item { transition: transform 0.35s, box-shadow 0.35s; }
.gallery-item:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10, 58, 107, 0.25); }

/* ---------- 滚动显现动画 ---------- */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ---------- 区块标题 ---------- */
.section-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-dark); font-weight: 700; letter-spacing: 4px; font-size: 14px;
}
.section-badge::before, .section-badge::after {
  content: ''; width: 28px; height: 3px;
  background: var(--accent);
}
.section-badge::after { background: rgba(242, 107, 15, 0.35); }

/* ---------- 品牌墙 ---------- */
.brand-card { opacity: 1; transition: all 0.35s; border: 1px solid #e2e8f0; background: #fff; }
.brand-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 12px 28px rgba(2, 32, 71, 0.10); }

/* ---------- 已下架标签 ---------- */
.delisted-tag {
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
  padding: 4px 14px; border-radius: 6px; font-size: 13px;
  transition: all 0.25s;
}
.delisted-tag:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- 页脚 ---------- */
.footer-link { color: #b8c9dd; transition: color 0.25s, padding-left 0.25s; }
.footer-link:hover { color: var(--accent-light); padding-left: 6px; }

/* ---------- 移动端菜单 ---------- */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: #ffffff; border-top: 1px solid #e2e8f0; }
.mobile-menu.open { max-height: 480px; }
.mobile-menu a { color: #0a3a6b !important; border-color: #eef2f7 !important; }

/* ---------- 表单 ---------- */
.form-input {
  width: 100%; border: 1px solid #dbe3ec; border-radius: 8px;
  padding: 12px 16px; font-size: 15px; background: #fff;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 78, 150, 0.15); }

/* ---------- 资讯详情正文 ---------- */
.article-content { line-height: 1.9; color: #334155; font-size: 16px; }
.article-content p { margin: 0 0 16px; }
.article-content img { max-width: 100%; border-radius: 8px; margin: 12px 0; }
.article-content h2, .article-content h3 { color: #06294f; font-weight: 700; margin: 24px 0 12px; }

/* ---------- 装饰 ---------- */
.text-gradient-accent {
  background: linear-gradient(135deg, #ff8a33, #f26b0f 60%, #e05e00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.divider-accent { height: 4px; width: 64px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 2px; }
.blueprint-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.diag-stripes {
  background-image: repeating-linear-gradient(-45deg, rgba(242, 107, 15, 0.12) 0 12px, transparent 12px 24px);
}

/* 滚动条 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #eef2f7; }
::-webkit-scrollbar-thumb { background: #9fb3c8; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ========== H5 移动端 App 风格（≤1023px 生效，桌面端无感） ========== */

/* 底部 Tab 栏占位，防止遮住内容 */
@media (max-width: 1023px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* 底部 Tab 栏（H5 标配） */
.h5-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 24px rgba(15, 42, 77, 0.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 1023px) { .h5-tabbar { display: block; } }
.h5-tabbar-inner { display: grid; grid-template-columns: repeat(5, 1fr); height: 60px; }
.h5-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: #64748b; font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  -webkit-tap-highlight-color: transparent; transition: color 0.2s;
}
.h5-tab i { font-size: 20px; }
.h5-tab.active { color: var(--accent); }
.h5-tab.active i { transform: translateY(-1px); }
.h5-tab:active { color: var(--accent-dark); }

/* Hero 手机高度：为底部 Tab 栏让位 */
.hero-section { height: calc(100vh - 76px); min-height: 520px; }
@supports (height: 100svh) { .hero-section { height: calc(100svh - 76px); } }
@media (min-width: 1024px) { .hero-section { height: 100vh; min-height: 640px; } }

/* 过滤标签条：手机横向滑动（通栏、隐藏滚动条） */
.filter-scroll { -webkit-overflow-scrolling: touch; }
@media (max-width: 1023px) {
  .filter-scroll {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: -16px; padding-inline: 16px; padding-bottom: 4px;
  }
  .filter-scroll::-webkit-scrollbar { display: none; }
  .filter-scroll > * { flex-shrink: 0; }
}

/* 表单与正文：iOS 聚焦自动缩放防护 */
@media (max-width: 1023px) {
  .form-input { font-size: 16px; }
  .article-content { font-size: 15px; line-height: 1.85; }
}

/* 触摸设备：去掉悬停粘滞，改为按压反馈 */
@media (hover: none) {
  .product-card:hover, .news-card:hover, .gallery-item:hover, .brand-card:hover { transform: none; }
  .product-card:active { transform: scale(0.98); }
  .news-card:active { transform: scale(0.98); }
}

/* 全局触摸优化 */
a, button, .h5-tab { -webkit-tap-highlight-color: transparent; }

/* Hero 压暗层：与 banner 设计稿配套，只压左侧文案区 */
.hero-scrim {
  background: linear-gradient(90deg, rgba(3,20,40,.55) 0%, rgba(3,20,40,.28) 26%, rgba(3,20,40,0) 46%);
}

/* 首页 hero 标题：尊重文案中的换行，避免长标题被自动断成半个词 */
#hero h1 { white-space: pre-line; }

/* 移动端：竖屏裁切会落在左侧深蓝版块与羽化带上，改为整幅压暗 + 裁向照片区 */
@media (max-width: 1023px) {
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(3,20,40,.58) 0%, rgba(3,20,40,.66) 46%, rgba(3,20,40,.80) 100%),
      linear-gradient(90deg, rgba(3,20,40,.46) 0%, rgba(3,20,40,.30) 55%, rgba(3,20,40,.18) 100%);
  }
  #hero .hero-slide img { object-position: 88% center; }
}