/* ========================================
   theme.css - 主题视觉（可整体替换换肤）
   视觉方向：深蓝工业 + 青铜点缀 + 浅灰底
   ======================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;600&family=Noto+Serif+SC:wght@500;600&display=swap");

:root {
  --color-bg: #f3f5f7;
  --color-bg-alt: #e8ecef;
  --color-surface: #ffffff;
  --color-text: #1c2430;
  --color-heading: #0c1b2a;
  --color-muted: #5a6573;
  --color-primary: #0a4d68;
  --color-primary-dark: #063548;
  --color-accent: #9a7b4f;
  --color-accent-light: #c4a574;
  --color-link: #0a4d68;
  --color-link-hover: #9a7b4f;
  --color-border: #d5dbe3;
  --color-success: #2d6a4f;
  --color-danger: #9b2226;
  --color-header-bg: rgba(12, 27, 42, 0.94);
  --color-header-text: #f0f3f6;
  --color-footer-bg: #0c1b2a;
  --color-footer-text: #c5cdd6;
  --color-hero-overlay: linear-gradient(180deg, transparent 40%, rgba(12, 27, 42, 0.72) 100%);
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-sm: 0 1px 3px rgba(12, 27, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(12, 27, 42, 0.08);
  --container-width: 1200px;
  --header-height: 72px;
  --section-padding: 4.5rem;
  --space-md: 1.25rem;
  --font-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-body: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse at 10% 0%, rgba(10, 77, 104, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(154, 123, 79, 0.05) 0%, transparent 45%),
    var(--color-bg);
  color: var(--color-text);
}

.header {
  background: var(--color-header-bg);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header__logo-text,
.nav__link,
.lang-switch__link,
.search-box__btn {
  color: var(--color-header-text);
}

.nav__link:hover { color: var(--color-accent-light); }
.nav__link--active { color: var(--color-accent-light); }
.nav__link--active::after { background: var(--color-accent); }
.lang-switch__link.is-current { color: var(--color-accent-light); font-weight: 600; }

.search-box__input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-header-text);
  border-radius: var(--radius-sm);
}

.search-box__input::placeholder { color: rgba(240, 243, 246, 0.45); }
.hamburger__bar { background: var(--color-header-text); }

.hero__caption { background: var(--color-hero-overlay); }
.hero__title { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.swiper-pagination-bullet { background: #fff; opacity: 0.45; }
.swiper-pagination-bullet-active { background: var(--color-accent-light); opacity: 1; }

.section--alt { background: var(--color-bg-alt); }
.section__title { font-family: var(--font-display); color: var(--color-heading); }
.section__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-accent);
  margin: 0.85rem auto 0;
}

.stats__item {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-primary);
}

.stats__value { color: var(--color-primary); font-family: var(--font-display); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { background: #82653f; color: #fff; }
.btn--outline { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.product-card {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
}

.product-card__title { color: var(--color-heading); }
.product-card__link { color: var(--color-accent); }

.news-item {
  background: var(--color-surface);
  padding: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease;
}

.news-item:hover { box-shadow: var(--shadow-md); }

.advantage-item {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-bottom: 3px solid var(--color-accent);
}

.advantage-item__icon { color: var(--color-primary); }

.page-banner {
  background:
    linear-gradient(135deg, rgba(10, 77, 104, 0.92) 0%, rgba(12, 27, 42, 0.88) 100%),
    url("../images/default.jpg") center/cover;
  color: #fff;
}

.page-banner__title { color: #fff; font-family: var(--font-display); }

.filter-bar__select,
.form-group__input,
.form-group__textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s;
}

.filter-bar__select:focus,
.form-group__input:focus,
.form-group__textarea:focus { border-color: var(--color-primary); }

.tabs__btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
}

.tabs__btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.pagination__btn,
.pagination__page {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.pagination__page.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.pagination__btn:hover,
.pagination__page:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__page.is-active:hover { color: #fff; }

.detail__main-img { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.detail__thumb { border-radius: var(--radius-sm); border: 2px solid transparent; }
.detail__thumb.is-active { border-color: var(--color-accent); }
.detail__params-row { border-bottom-color: var(--color-border); }

.contact-info__icon {
  background: rgba(10, 77, 104, 0.1);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
}

.contact-map {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-bg-alt);
}

.form-msg.is-success { color: var(--color-success); }
.form-msg.is-error { color: var(--color-danger); }

.footer { background: var(--color-footer-bg); color: var(--color-footer-text); }
.footer__brand-name { color: #fff; font-family: var(--font-display); }
.footer__nav-link { color: var(--color-footer-text); }
.footer__nav-link:hover { color: var(--color-accent-light); }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.cert-grid__img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}

.about-content h2,
.detail__content h2,
.news-detail__content h2 {
  margin: 1.5rem 0 0.75rem;
  font-family: var(--font-display);
}

.news-detail__meta { color: var(--color-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.news-detail__cover {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim-fade-up { animation: fadeUp 0.7s ease both; }
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }

@keyframes countPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.stats__value.is-counting { animation: countPulse 0.4s ease; }
