/* =====================================================================
   河南铠越耐火材料有限公司 · 全站样式 style.css
   由 React 工程 src/ 下 13 个 CSS 按序合并生成（顺序与原 Vite 全局注入一致）
   后续新增样式请追加到文末“转换补充节”之后，勿插入各源文件分区内部
   ===================================================================== */

/* =============================================================
   源文件分区：index.css
   ============================================================= */
/* Global Variables */
:root {
  --color-primary: #123157;
  --color-primary-hover: #0a1c32;
  --color-secondary: #1a1a1a;
  --color-bg-light: #f8fafc;
  --color-bg-white: #ffffff;
  --color-text-main: #2b3542;
  --color-text-light: #64748b;
  --color-text-white: #ffffff;
  --color-border: #e2e8f0;
  
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  --container-width: 1280px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  
  --shadow-soft: 0 20px 40px -10px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--color-text-main);
  background-color: var(--color-bg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-normal);
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  padding-top: 80px; /* Offset for fixed header */
  padding-bottom: 60px; /* Space above footer */
}

/* Utility Classes */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Animations */
.animate-fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-in {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.animate-fade-in.is-visible {
  opacity: 1;
}

.animate-delay-100 { transition-delay: 0.1s; }
.animate-delay-200 { transition-delay: 0.2s; }
.animate-delay-300 { transition-delay: 0.3s; }
.animate-delay-400 { transition-delay: 0.4s; }

/* =============================================================
   源文件分区：components/Header/Header.css
   ============================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-bg-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  height: 80px;
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header__logo-img {
  max-height: 50px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.header__logo-en {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-secondary);
  letter-spacing: 1px;
}

.header__logo-cn {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-main);
}

/* Desktop Nav */
.nav__list {
  display: flex;
  gap: 30px;
}

.nav__item {
  position: relative;
}

.nav__link {
  font-size: 16px;
  color: var(--color-text-main);
  font-weight: 500;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-normal);
}

.nav__item:hover .nav__link,
.nav__link.active {
  color: var(--color-primary);
}

.nav__item:hover .nav__link::after,
.nav__link.active::after {
  width: 100%;
}

/* Dropdown */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--color-bg-white);
  min-width: 160px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
  padding: 10px 0;
}

.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: 10px 20px;
  color: var(--color-text-main);
  font-size: 14px;
  text-align: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav__dropdown-link:hover {
  background-color: var(--color-bg-light);
  color: var(--color-primary);
}

/* Actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__search-btn {
  color: var(--color-text-main);
  transition: color var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__search-btn:hover {
  color: var(--color-primary);
}

.header__mobile-toggle {
  display: none;
  color: var(--color-text-main);
}

/* Lang Switcher */
.lang-switcher {
  position: relative;
}

.lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--color-text-main);
  padding: 5px 10px;
}

.lang-switcher__btn:hover {
  color: var(--color-primary);
}

.lang-switcher__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--color-bg-white);
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-fast);
  padding: 8px 0;
}

.lang-switcher__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switcher__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 20px;
  font-size: 14px;
  color: var(--color-text-main);
}

.lang-switcher__link:hover, .lang-switcher__link.is-active {
  background-color: var(--color-bg-light);
  color: var(--color-primary);
}


/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background-color: var(--color-bg-white);
  overflow-y: auto;
  z-index: 999;
  padding: 20px;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-nav__item {
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-nav__link {
  display: block;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
  flex: 1;
}

.mobile-nav__accordion-toggle {
  padding: 10px;
  color: var(--color-text-light);
  transition: transform var(--transition-fast);
}

.mobile-nav__accordion-toggle.is-open {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.mobile-nav__accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.mobile-nav__accordion-content.is-open {
  max-height: 300px; /* arbitrary large enough height */
}

.mobile-nav__sublist {
  padding-bottom: 15px;
  padding-left: 15px;
}

.mobile-nav__sublink {
  display: block;
  padding: 10px 0;
  color: var(--color-text-light);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 992px) {
  .header__nav {
    display: none;
  }

  .header__mobile-toggle {
    display: block;
  }

  .mobile-menu {
    display: block;
  }
}

/* =============================================================
   源文件分区：components/Footer/Footer.css
   ============================================================= */
.footer {
  background-color: #161616;
  color: #999999;
  padding-top: 80px;
}

.footer__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 60px;
  gap: 40px;
}

/* Brand */
.footer__brand {
  flex: 1.5;
  min-width: 250px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.footer__logo-img {
  max-height: 60px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.footer__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.footer__logo-en {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-white);
  letter-spacing: 1px;
}

.footer__logo-cn {
  font-size: 16px;
  font-weight: 600;
  color: #cccccc;
}

.footer__desc {
  font-size: 14px;
  line-height: 1.6;
  color: #999;
  max-width: 350px;
}

.footer__heading {
  color: var(--color-text-white);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}

.footer__contact-section {
  flex: 1;
  min-width: 250px;
  display: flex;
  justify-content: flex-end;
}

.footer__contact {
  display: flex;
  flex-direction: column;
}

.footer__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
}

.footer__qrs {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.footer__qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #999;
}

.footer__qr-box {
  width: 80px;
  height: 80px;
  background-color: #333;
  border-radius: 4px;
}

/* Links */
.footer__links-wrapper {
  display: flex;
  gap: 60px;
  flex: 2;
  min-width: 400px;
}

.footer__link-group {
  flex: 1;
}

.footer__link-list li {
  margin-bottom: 12px;
}

.footer__link-list a {
  font-size: 14px;
  transition: color var(--transition-fast);
}

.footer__link-list a:hover {
  color: var(--color-primary);
}

/* Subscribe */
.footer__subscribe {
  flex: 1;
  min-width: 250px;
  display: flex;
  justify-content: flex-end;
}

.footer__search-box {
  display: flex;
  background-color: #333;
  border-radius: 20px;
  overflow: hidden;
  height: 40px;
  width: 100%;
  max-width: 300px;
}

.footer__input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0 15px;
  color: var(--color-text-white);
  outline: none;
}

.footer__input::placeholder {
  color: #777;
}

.footer__search-btn {
  background-color: #444;
  color: var(--color-text-white);
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.footer__search-btn:hover {
  background-color: var(--color-primary);
}

/* Bottom */
.footer__bottom {
  background-color: #111;
  padding: 24px 0;
  font-size: 13px;
  color: #666;
}

.footer__bottom .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer__friendly-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #888;
}

.footer__friendly-links a {
  transition: color var(--transition-fast);
}

.footer__friendly-links a:hover {
  color: var(--color-primary);
}

.footer__friendly-links .divider {
  color: #444;
}

.footer__copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.footer__copyright a {
  transition: color var(--transition-fast);
}

.footer__copyright a:hover {
  color: var(--color-primary);
}

/* Responsive */
@media (max-width: 992px) {
  .footer__links-wrapper {
    min-width: 100%;
    flex-wrap: wrap;
    gap: 30px;
  }
  
  .footer__subscribe {
    justify-content: flex-start;
  }
}

@media (max-width: 576px) {
  .footer__container {
    flex-direction: column;
    gap: 40px;
  }
  
  .footer__link-group {
    min-width: 120px;
  }
}

/* =============================================================
   源文件分区：components/SearchModal/SearchModal.css
   ============================================================= */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.search-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease forwards;
}

.search-modal__content {
  position: relative;
  width: 100%;
  max-width: 800px;
  background-color: var(--color-bg-white);
  margin-top: 100px;
  padding: 50px;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  z-index: 2001;
}

.search-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-text-light);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.search-modal__close:hover {
  color: var(--color-primary);
  transform: rotate(90deg);
}

.search-modal__title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
  color: var(--color-secondary);
}

.search-modal__input-group {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 10px;
}

.search-modal__input {
  flex: 1;
  border: none;
  font-size: 20px;
  padding: 10px;
  outline: none;
  background: transparent;
  color: var(--color-text-main);
}

.search-modal__input::placeholder {
  color: #aaa;
}

.search-modal__submit {
  color: var(--color-primary);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.search-modal__submit:hover {
  transform: scale(1.1);
}

.search-modal__suggestions {
  margin-top: 20px;
  font-size: 14px;
  color: var(--color-text-light);
}

.search-modal__suggestions button {
  color: var(--color-primary);
  margin-left: 15px;
  font-size: 14px;
}

.search-modal__suggestions button:hover {
  text-decoration: underline;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .search-modal__content {
    margin: 20px;
    padding: 30px 20px;
    width: calc(100% - 40px);
  }
  
  .search-modal__input {
    font-size: 16px;
  }
}

/* =============================================================
   源文件分区：pages/Home/Home.css
   ============================================================= */
.home {
  overflow-x: hidden;
  width: 100%;
}

/* Shared Component Styles */
.section {
  padding: 120px 0;
}

.section__title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--color-secondary);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.text-white { color: #fff; }
.text-gray { color: #cbd5e1; }
.mt-2 { margin-top: 10px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.text-center { text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 49, 87, 0.25);
}

.btn--with-icon {
  gap: 10px;
}

.btn__icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-text-white);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1. Hero Section */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.hero__bg.is-active {
  opacity: 1;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
  z-index: 2;
}

.hero__container {
  position: relative;
  z-index: 10;
  width: 100%;
}

.hero__content {
  max-width: 800px;
  color: var(--color-text-white);
  text-align: left;
}

.hero__title {
  font-size: 54px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.hero__subtitle {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.9);
}

.hero__pagination {
  margin-top: 60px;
  display: flex;
  gap: 12px;
}

.hero__dot {
  width: 30px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.hero__dot.is-active {
  background-color: var(--color-primary);
  width: 50px;
}

/* 2. About Section */
.about {
  position: relative;
  background-color: #f8f9fa; /* Ensure there is a light background color */
  overflow: hidden;
}
.about::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vw;
  background-image: radial-gradient(var(--color-primary) 1.5px, transparent 1.5px);
  background-size: 15px 15px;
  opacity: 0.1;
  /* Use a basic SVG mask of a world map */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 651"><path d="M129 181c-8-5-18-5-25-13-14-17-38-31-31-57 2-6 8-11 12-16 6-9 4-22 6-32 3-18 20-27 34-36 10-6 19-15 31-15 15 1 29 9 43 14 36 11 75-3 111-1 30 1 54 22 81 29 17 4 33-1 47-11 16-10 33-25 53-23 20 1 33 22 51 32 35 18 80 18 107 48 5 6 12 11 20 14 17 6 38 4 56 6 42 4 82 23 124 23 48 0 83-36 123-53 28-12 55-24 86-24 16 0 31 10 46 16 11 4 23 4 34-1 12-5 24-11 36-16 11-5 22-7 33-3 15 5 28 15 36 29 11 19 8 44 20 62 13 21 31 39 49 57 11 11 18 27 21 42 3 19-4 39-4 58-1 25-10 47-14 71-4 22 2 46 2 68 0 29-19 55-27 82-10 33-7 70-13 103-6 30-18 57-30 84-7 16-19 29-23 46-5 18 2 41-7 55-8 12-19 21-28 32-13 17-29 32-44 48-18 19-35 39-55 57-25 21-55 35-86 46-17 6-36 5-54 2-25-5-49-16-72-27-23-10-44-23-68-33-31-13-64-15-97-15-28 0-54-3-81-12-15-5-28-14-38-27-10-14-15-32-18-49-4-23-8-46-14-68-6-20-17-38-23-58-7-23-7-48-9-72-2-19-14-36-24-52-16-25-34-48-52-71-12-16-25-30-36-46-9-13-16-29-22-44-6-15-8-33-15-47-8-15-22-26-34-38-16-16-32-32-50-46-23-18-49-33-75-47-22-12-46-21-69-32-23-11-47-22-70-34-19-10-38-21-56-34-14-10-27-23-38-36-12-15-21-32-33-47-13-15-29-27-43-41-11-11-21-24-32-36-11-12-22-26-32-39-11-14-22-30-34-43z" fill="black"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 651"><path d="M129 181c-8-5-18-5-25-13-14-17-38-31-31-57 2-6 8-11 12-16 6-9 4-22 6-32 3-18 20-27 34-36 10-6 19-15 31-15 15 1 29 9 43 14 36 11 75-3 111-1 30 1 54 22 81 29 17 4 33-1 47-11 16-10 33-25 53-23 20 1 33 22 51 32 35 18 80 18 107 48 5 6 12 11 20 14 17 6 38 4 56 6 42 4 82 23 124 23 48 0 83-36 123-53 28-12 55-24 86-24 16 0 31 10 46 16 11 4 23 4 34-1 12-5 24-11 36-16 11-5 22-7 33-3 15 5 28 15 36 29 11 19 8 44 20 62 13 21 31 39 49 57 11 11 18 27 21 42 3 19-4 39-4 58-1 25-10 47-14 71-4 22 2 46 2 68 0 29-19 55-27 82-10 33-7 70-13 103-6 30-18 57-30 84-7 16-19 29-23 46-5 18 2 41-7 55-8 12-19 21-28 32-13 17-29 32-44 48-18 19-35 39-55 57-25 21-55 35-86 46-17 6-36 5-54 2-25-5-49-16-72-27-23-10-44-23-68-33-31-13-64-15-97-15-28 0-54-3-81-12-15-5-28-14-38-27-10-14-15-32-18-49-4-23-8-46-14-68-6-20-17-38-23-58-7-23-7-48-9-72-2-19-14-36-24-52-16-25-34-48-52-71-12-16-25-30-36-46-9-13-16-29-22-44-6-15-8-33-15-47-8-15-22-26-34-38-16-16-32-32-50-46-23-18-49-33-75-47-22-12-46-21-69-32-23-11-47-22-70-34-19-10-38-21-56-34-14-10-27-23-38-36-12-15-21-32-33-47-13-15-29-27-43-41-11-11-21-24-32-36-11-12-22-26-32-39-11-14-22-30-34-43z" fill="black"/></svg>');
  mask-size: 80% auto;
  -webkit-mask-size: 80% auto;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  z-index: 1;
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.about__desc {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.8;
  margin-bottom: 30px;
}

.about__image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about__logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255,255,255,0.9);
  padding: 15px 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.about__logo-en {
  font-weight: 800;
  color: var(--color-primary);
  font-size: 20px;
}

.about__logo-cn {
  font-weight: 600;
  color: var(--color-text-main);
}

.about__stats {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid var(--color-border);
  padding-top: 40px;
}

.stat-item {
  flex: 1;
  text-align: left;
}

.stat-item__label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
}

.stat-item__label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
}

.stat-item__value {
  color: #004d9d;
}

.stat-item__value .animated-counter-text {
  font-size: 80px;
  font-weight: 300;
  letter-spacing: -2px;
}

.stat-item__value .animated-counter-suffix {
  font-size: 16px;
  font-weight: 400;
  margin-left: 4px;
  letter-spacing: 0;
  color: #004d9d;
}

/* 3. Solutions Section */
.solutions {
  position: relative;
  color: var(--color-text-white);
  padding: 100px 0;
  background-color: #111; /* Ensure dark background fallback */
}

.solutions__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.15; /* Use opacity instead of filter for better compatibility and text contrast */
  z-index: 1;
}

.solutions__container {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 40px;
}

.solutions__desc p {
  line-height: 1.8;
}

.solutions__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.solution-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-normal);
}

.solution-card:hover {
  box-shadow: var(--shadow-hover);
}

.solution-card__img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.solution-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(8, 20, 40, 0.95) 0%, rgba(10, 30, 60, 0.3) 50%, transparent 100%);
  transition: background 0.5s ease;
}

.solution-card:hover .solution-card__img {
  transform: scale(1.08);
}

.solution-card:hover .solution-card__overlay {
  background: linear-gradient(to top, rgba(8, 20, 40, 0.95) 0%, rgba(10, 30, 60, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);
}

.solution-card__content {
  position: relative;
  z-index: 10;
  padding: 40px 30px;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-card:hover .solution-card__content {
  transform: translateY(-8px);
}

.solution-card__title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  color: #fff;
}

.solution-card__desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
  line-height: 1.7;
  opacity: 1;
}

.solution-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-white);
  opacity: 1;
  transition: color 0.3s ease;
}

.solution-card__link:hover {
  color: var(--color-primary);
}

/* 4. Products Section */
.section.products {
  padding-bottom: 0;
}

.products__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.products__tabs-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

@media (min-width: 769px) {
  .products__tabs-wrapper {
    width: auto;
  }
}

.tab-scroll-btn {
  display: none; /* Hidden by default on desktop if not needed, or we can just show on mobile */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  cursor: pointer;
  flex-shrink: 0;
  z-index: 10;
  transition: all var(--transition-fast);
}

.tab-scroll-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.products__tabs {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid var(--color-border);
}

.products__tab {
  padding: 10px 0;
  font-size: 16px;
  color: var(--color-text-main);
  font-weight: 500;
  position: relative;
}

.products__tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-normal);
}

.products__tab:hover, .products__tab.is-active {
  color: var(--color-primary);
}

.products__tab.is-active::after {
  width: 100%;
}

.products__desc {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.8;
  max-width: 800px;
  margin-bottom: 40px;
}

.products__slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.products__carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 440px;
  display: flex;
  align-items: flex-end; /* Align to bottom */
  justify-content: center;
  overflow: visible;
}

.product-slide {
  position: absolute;
  top: auto;
  bottom: 0; /* Attach to bottom */
  width: 28%; /* Adjusted width to fit 3 cards without overlap */
  height: auto;
  aspect-ratio: 4/3;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  background: transparent;
  display: flex;
  align-items: flex-end; /* Image sits at bottom */
  justify-content: center;
  transform-origin: bottom center; /* Scale from bottom */
}

.product-slide.is-center {
  left: 50%;
  z-index: 10;
  transform: translate(-50%, 0) scale(1.15);
  opacity: 1;
}

.product-slide.is-left {
  left: 0;
  z-index: 5;
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

.product-slide.is-right {
  left: 100%;
  z-index: 5;
  transform: translate(-100%, 0) scale(1);
  opacity: 1;
}

.product-slide.is-hidden {
  left: 50%;
  z-index: 1;
  transform: translate(-50%, 0) scale(0.5);
  opacity: 0;
}

.products__image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure transparent PNGs fit properly without cropping */
  object-position: bottom center; /* Keep image flush with the bottom */
}

.products__image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(100px, 20vw, 350px);
  font-weight: 900;
  color: rgba(0,0,0,0.04); /* Faint gray text for white background */
  pointer-events: none;
  letter-spacing: 5px;
  z-index: 1; /* Placed behind the product slides */
  white-space: nowrap;
  line-height: 1;
}

.slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  transition: all var(--transition-fast);
  background-color: var(--color-bg-white);
  flex-shrink: 0;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 20;
  cursor: pointer;
}

.slider-btn--prev {
  left: 2%;
}

.slider-btn--next {
  right: 2%;
}

.slider-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
}

.products__footer {
  position: relative;
  width: 100vw;
  height: 120px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 60px;
  overflow: hidden;
}

.products__footer-curve {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f9fa; /* Light grey background for curve */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
}

/* 5. Focus Section */
.focus-section {
  position: relative;
  padding: 120px 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax effect */
  text-align: center;
}

.focus-section__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}

.focus-section__container {
  position: relative;
  z-index: 10;
}

.focus-section__content {
  max-width: 800px;
  margin: 0 auto;
}

.focus-section__title {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-white);
  margin-bottom: 30px;
}

.focus-section__desc {
  font-size: 16px;
  color: #ddd;
  line-height: 2;
}

/* 6. News Section */
.section.news {
  background-color: #fcfcfc;
  position: relative;
  overflow: hidden;
}

.news__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.news__tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--color-border);
}

.news__tab {
  padding: 10px 0;
  font-size: 16px;
  color: var(--color-text-main);
  font-weight: 500;
  position: relative;
}

.news__tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-normal);
}

.news__tab.is-active, .news__tab:hover {
  color: var(--color-primary);
}

.news__tab.is-active::after {
  width: 100%;
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.news-card {
  display: flex;
  background-color: var(--color-bg-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-normal);
  cursor: pointer;
  border: 1px solid var(--color-border);
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
  background-color: var(--color-primary);
}

.news-card__img-wrapper {
  width: 45%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.news-card__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card:hover .news-card__img-wrapper img {
  transform: scale(1.05);
}

.news-card__content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
}

.news-card__date {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: 12px;
  transition: color var(--transition-normal);
}

.news-card:hover .news-card__date {
  color: rgba(255, 255, 255, 0.8);
}

.news-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 20px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-normal);
}

.news-card:hover .news-card__title {
  color: var(--color-text-white);
}

.news-card__link {
  margin-top: auto;
  font-size: 14px;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  transition: color var(--transition-normal);
}

.news-card:hover .news-card__link {
  color: var(--color-text-white);
}

.news__pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ddd;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.dot.is-active, .dot:hover {
  background-color: var(--color-primary);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .solutions__container {
    grid-template-columns: 1fr;
  }
  .solutions__desc {
    max-width: 800px;
  }
}

@media (max-width: 992px) {
  .about__grid {
    grid-template-columns: 1fr;
  }
  
  .about__stats {
    flex-wrap: wrap;
    gap: 30px 10px;
  }
  
  .stat-item {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
  }
  
  .solutions__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .about__stats {
    gap: 30px 10px;
  }
  .stat-item {
    flex: 0 0 calc(50% - 10px);
  }
  
  .hero__title {
    font-size: 32px;
  }
  
  .section {
    padding: 50px 0;
  }
  
  .products__header {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .products__tabs-wrapper {
    width: 100%;
    position: relative;
    padding: 0 35px; /* Make room for buttons */
  }

  .tab-scroll-btn {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .tab-scroll-btn--left {
    left: 0;
  }
  
  .tab-scroll-btn--right {
    right: 0;
  }

  .products__tabs {
    width: 100%; /* Constrain width to force overflow */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding-bottom: 10px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
  
  .products__tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }
  
  .products__tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  .products__carousel {
    height: 60vw;
    min-height: 250px;
  }
  
  .products__desc {
    margin-bottom: 20px;
  }
  
  .solutions__cards {
    grid-template-columns: 1fr;
  }
  
  .news__grid {
    grid-template-columns: 1fr;
  }
  
  .products__slider {
    position: relative;
    width: 100%;
  }
  
  .slider-btn {
    display: flex; /* Restore visibility */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
  }
  
  .slider-btn--prev { left: -10px; }
  .slider-btn--next { right: -10px; }
  
  .products__image-text {
    font-size: 20vw;
  }
  
  /* Show only one center card on mobile */
  .product-slide {
    width: 80%;
  }
  
  .product-slide.is-left,
  .product-slide.is-right {
    opacity: 0;
    pointer-events: none;
    left: 50%;
    transform: translate(-50%, 0) scale(0.8);
    z-index: 1;
  }
  
  .product-slide.is-center {
    width: 80%;
    transform: translate(-50%, 0) scale(1);
  }
}

/* =============================================================
   源文件分区：pages/Products/Products.css
   ============================================================= */
.products-page {
  background-color: #f9f9f9;
}

.products-hero {
  position: relative;
  height: 320px;
  background-image: url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.products-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(18, 49, 87, 0.85) 0%, rgba(18, 49, 87, 0.5) 100%);
}

.products-hero__content {
  position: relative;
  z-index: 1;
}

.products-hero__content h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.products-hero__content p {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #eee;
}

.products-main {
  margin-top: 60px;
  margin-bottom: 80px;
}

.products-layout {
  display: flex;
  gap: 40px;
}

/* Sidebar */
.products-sidebar {
  width: 240px;
  flex-shrink: 0;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-btn {
  width: 100%;
  text-align: center;
  padding: 14px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.category-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.category-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Product Content */
.products-content {
  flex: 1;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.product-card {
  background: #fff;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.product-card__img-wrapper {
  display: block;
  width: 100%;
  padding-top: 75%; /* 4:3 aspect ratio */
  position: relative;
  background-color: #e9e9e9;
  overflow: hidden;
}

.product-card__img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.product-card:hover .product-card__img-wrapper img {
  transform: scale(1.05);
}

.product-card__info {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.product-card__title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.product-card__link {
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
}

.product-card__link:hover {
  text-decoration: underline;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #ddd;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(.disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.page-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.page-dots {
  color: #999;
  padding: 0 4px;
}

/* Responsive */
@media (max-width: 992px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .products-layout {
    flex-direction: column;
  }
  
  .products-sidebar {
    width: 100%;
  }

  .category-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .category-item {
    flex: 1 1 calc(33.333% - 8px);
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .category-item {
    flex: 1 1 calc(50% - 6px);
  }
}

/* =============================================================
   源文件分区：pages/ProductDetail/ProductDetail.css
   ============================================================= */
.product-detail-page {
  background-color: #f9f9f9;
}

/* Breadcrumb */
.breadcrumb {
  padding: 20px 0;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb a {
  color: #333;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb-separator {
  color: #999;
}

.breadcrumb-current {
  color: var(--color-primary);
}

/* Top Hero Section */
.product-hero {
  display: flex;
  gap: 40px;
  background: #fff;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.product-hero__image-wrapper {
  flex: 0 0 500px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.product-hero__image-wrapper img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.product-hero__info {
  flex: 1;
}

.product-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

.product-desc {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 24px;
}

.product-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.product-features li {
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-diamond {
  color: var(--color-primary);
  font-size: 12px;
}

.product-actions {
  display: flex;
  gap: 16px;
}

.btn {
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.btn--primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background-color: #084382;
}

.btn--outline {
  background-color: transparent;
  border: 1px solid #333;
  color: #333;
}

.btn--outline:hover {
  background-color: #333;
  color: #fff;
}

/* Main Content Layout */
.product-main {
  margin-bottom: 80px;
}

.product-layout {
  display: flex;
  gap: 40px;
}

/* Sidebar */
.product-sidebar {
  width: 240px;
  flex-shrink: 0;
}

.sidebar-group {
  background: #fff;
  border: 1px solid #eee;
  margin-bottom: 24px;
}

.sidebar-list {
  display: flex;
  flex-direction: column;
}

.sidebar-item {
  border-bottom: 1px solid #eee;
}

.sidebar-item:last-child {
  border-bottom: none;
}

.sidebar-item a {
  display: block;
  padding: 16px 20px;
  color: #333;
  font-size: 15px;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.sidebar-item.active {
  background-color: var(--color-primary);
}

.sidebar-item.active a {
  color: #fff;
}

.sidebar-item:not(.active) a:hover {
  color: var(--color-primary);
  background-color: #f9f9f9;
}

.sidebar-title {
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid #eee;
}

.sidebar-news {
  padding: 0;
}

.sidebar-news-item {
  border-bottom: 1px solid #eee;
}

.sidebar-news-item:last-child {
  border-bottom: none;
}

.sidebar-news-item a {
  display: block;
  padding: 12px 20px;
  font-size: 13px;
  color: #666;
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition-fast);
}

.sidebar-news-item a:hover {
  color: var(--color-primary);
}

/* Right Content */
.product-content {
  flex: 1;
  background: #fff;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.content-section {
  margin-bottom: 60px;
}

.content-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #eee;
}

.section-subtitle {
  font-size: 14px;
  color: #666;
  margin-top: -16px;
  margin-bottom: 24px;
}

/* Advantages */
.advantage-item {
  margin-bottom: 24px;
}

.advantage-item h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.advantage-item p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* Table */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.specs-table th,
.specs-table td {
  border: 1px solid #eee;
  padding: 12px 16px;
  text-align: center;
}

.specs-table th {
  background-color: #f9f9f9;
  font-weight: 600;
  color: #333;
}

.specs-table td {
  color: #666;
}

/* Applications Grid */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.app-card {
  background: #f9f9f9;
  padding: 16px;
}

.app-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 16px;
}

.app-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.app-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

/* Inquiry Form */
.inquiry-form {
  display: flex;
  gap: 24px;
}

.form-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-right {
  flex: 1;
  display: flex;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  font-size: 14px;
  transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: #fff;
}

.form-textarea {
  resize: none;
  height: 100%;
  min-height: 150px;
}

/* Related Products */
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.related-card {
  display: block;
  text-align: center;
  text-decoration: none;
  background: #f9f9f9;
  padding: 16px;
  transition: transform var(--transition-fast);
}

.related-card:hover {
  transform: translateY(-4px);
}

.related-card__img {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.related-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.related-card__name {
  font-size: 14px;
  color: #333;
}

/* Responsive */
@media (max-width: 1024px) {
  .product-hero {
    flex-direction: column;
  }
  
  .product-hero__image-wrapper {
    flex: none;
    width: 100%;
  }

  .product-layout {
    flex-direction: column;
  }
  
  .product-sidebar {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .applications-grid {
    grid-template-columns: 1fr;
  }
  
  .inquiry-form {
    flex-direction: column;
  }
  
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .product-features {
    grid-template-columns: 1fr;
  }
  
  .specs-table {
    display: block;
    overflow-x: auto;
  }
}

/* =============================================================
   源文件分区：pages/Solutions/Solutions.css
   ============================================================= */
.solutions-page {
  /* page styles */
}

.solutions-hero {
  position: relative;
  height: 480px;
  background-image: url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  color: #fff;
}

.solutions-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(10, 25, 50, 0.9) 0%, rgba(10, 25, 50, 0.4) 100%);
}

.solutions-hero__content {
  position: relative;
  z-index: 1;
  padding: 0 40px;
}

.solutions-hero__content h1 {
  font-size: 54px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -1px;
}

.solutions-hero__content p {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.8);
}

.btn-explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
}

.btn-explore:hover {
  background-color: var(--color-primary-hover);
  transform: translateX(5px);
  box-shadow: var(--shadow-hover);
}

.solutions-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 50px;
}

.solutions-tab {
  padding: 10px 24px;
  font-size: 15px;
  color: var(--color-text-main);
  background: transparent;
  border: 1px solid var(--color-border);
  transition: all var(--transition-normal);
  border-radius: 2px;
}

.solutions-tab.active,
.solutions-tab:hover {
  border-color: #000;
  color: #000;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}

.solution-item-card {
  background: #fff;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.solution-item-card:hover {
  transform: translateY(-8px);
}

.solution-item-card__img {
  display: block;
  width: 100%;
  padding-top: 66%; /* 3:2 ratio */
  position: relative;
  background: #e5e7eb; /* matches the grey in design */
  overflow: hidden;
}

.solution-item-card__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-item-card:hover .solution-item-card__img img {
  transform: scale(1.05);
}

.solution-item-card__info {
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.solution-item-card__info h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-main);
  transition: color var(--transition-fast);
}

.solution-item-card:hover .solution-item-card__info h3 {
  color: var(--color-primary);
}

.solution-item-card__link {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 500;
}

.solution-item-card__link:hover {
  text-decoration: underline;
}

/* Pagination */
.solutions-main .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.solutions-main .page-btn {
  min-width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.solutions-main .page-btn:hover:not(.disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.solutions-main .page-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.solutions-main .page-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f8fafc;
}

@media (max-width: 992px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .solutions-tabs {
    flex-wrap: wrap;
    gap: 15px;
  }
  .solutions-tab {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .solutions-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   源文件分区：pages/SolutionDetail/SolutionDetail.css
   ============================================================= */
.solution-detail-page {
  /* Global page styles */
}

/* Hero */
.sd-hero {
  position: relative;
  height: 500px;
  background-image: url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.sd-hero__overlay {
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background: linear-gradient(to right, rgba(18, 49, 87, 0.85) 0%, rgba(18, 49, 87, 0.5) 100%);
}

.sd-hero__content {
  position: relative;
  z-index: 1;
}

.sd-hero__content h1 {
  font-size: 54px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.sd-hero__content p {
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* Products Grid */
.sd-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 30px;
}

.sd-product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: all var(--transition-normal);
}

.sd-product-card:hover {
  transform: translateY(-8px);
}

.sd-product-card__img {
  width: 100%;
  padding-top: 60%;
  position: relative;
  background-color: var(--color-bg-light);
  overflow: hidden;
  margin-bottom: 24px;
  border-radius: 4px;
  transition: all var(--transition-normal);
}

.sd-product-card:hover .sd-product-card__img {
  box-shadow: var(--shadow-hover);
}

.sd-product-card__img img {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sd-product-card:hover .sd-product-card__img img {
  transform: scale(1.05);
}

.sd-product-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sd-product-card__name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.sd-product-card__more {
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 20px;
}

.sd-line {
  flex: 1;
  height: 1px;
  background-color: var(--color-primary);
  margin-right: 15px;
  opacity: 0.6;
}

.sd-more-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 1px;
}

/* Features Grid */
.sd-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sd-feature-card {
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-main);
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.sd-feature-card:hover {
  background-color: var(--color-primary);
  border-color: transparent;
  color: #fff;
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.sd-feature-icon {
  margin-bottom: 24px;
  color: var(--color-primary);
  transition: color var(--transition-normal);
}

.sd-feature-card:hover .sd-feature-icon {
  color: #fff;
}

.sd-feature-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.4;
  transition: color var(--transition-normal);
}

.sd-feature-card p {
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
  text-align: justify;
  text-align-last: center; 
  color: var(--color-text-light);
  transition: color var(--transition-normal);
}

.sd-feature-card:hover p {
  color: rgba(255, 255, 255, 0.9);
}

/* Bottom Info Section */
.sd-info-wrapper {
  display: flex;
  gap: 60px;
  align-items: center;
}

.sd-info-text {
  flex: 1;
}

.sd-info-text h2 {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.sd-info-text p {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 15px;
  text-align: justify;
}

.sd-info-text p:last-child {
  margin-bottom: 0;
}

.sd-info-img {
  flex: 1;
}

.sd-info-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 1024px) {
  .sd-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sd-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sd-info-wrapper {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .sd-products-grid, .sd-features-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   源文件分区：pages/News/News.css
   ============================================================= */
.news-page {
  /* Page specific styles */
}

/* Hero */
.news-hero {
  position: relative;
  height: 400px;
  background-image: url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.news-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.news-hero__content {
  position: relative;
  z-index: 1;
}

.news-hero__content h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.news-hero__content p {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 4px;
}

/* Layout */
.news-layout {
  display: flex;
  gap: 40px;
}

.news-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.news-content {
  flex: 1;
  min-width: 0; /* Prevent flex overflow */
}

/* Sidebar Widgets */
.sidebar-widget {
  padding: 30px 24px;
  margin-bottom: 30px;
}

.bg-light {
  background-color: #f9f9f9;
}

.widget-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.widget-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-primary);
}

.widget-contact-list {
  font-size: 14px;
  color: #666;
}

.widget-contact-list li {
  margin-bottom: 12px;
  line-height: 1.5;
}

.widget-contact-list .label {
  color: #333;
}

.widget-hot-news {
  list-style: none;
}

.widget-hot-news li {
  margin-bottom: 16px;
}

.widget-hot-news a {
  display: block;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  /* Truncate to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

.widget-hot-news a:hover {
  color: var(--color-primary);
}

/* Sidebar Products Grid */
.widget-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.widget-product-card {
  display: block;
  text-align: center;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #eee;
  transition: box-shadow var(--transition-fast);
}

.widget-product-card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.widget-product-card .img-box {
  width: 100%;
  padding-top: 75%;
  position: relative;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  overflow: hidden;
}

.widget-product-card .img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-product-card .product-name {
  font-size: 12px;
  color: #333;
}

/* Tabs */
.news-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

.news-tab {
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 140px;
  text-align: center;
  transition: all var(--transition-fast);
}

.news-tab.active,
.news-tab:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* News List */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 60px;
}

.news-item {
  display: flex;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-item__img {
  width: 280px;
  flex-shrink: 0;
  /* Instead of a placeholder color, let's just make sure the image covers it */
  position: relative;
  background-color: var(--color-primary); /* Use primary color as fallback */
  overflow: hidden;
}

.news-item__img::before {
  content: "";
  display: block;
  padding-top: 66%; /* 3:2 aspect ratio */
}

.news-item__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.news-item:hover .news-item__img img {
  transform: scale(1.05);
}

.news-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-item__date {
  font-size: 14px;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.news-item__title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.4;
  transition: color var(--transition-fast);
}

.news-item__title:hover {
  color: var(--color-primary);
}

.news-item__desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item__link {
  margin-top: auto;
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 500;
  display: inline-block;
  align-self: flex-start;
}

.news-item__link:hover {
  text-decoration: underline;
}

/* Pagination (reusing general pagination styles) */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.page-btn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #ddd;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.page-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.page-btn:not(.active):not(.disabled):hover {
  background-color: #f5f5f5;
  color: var(--color-primary);
}
.page-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f5f5f5;
}
.page-dots {
  color: #666;
  padding: 0 4px;
}

/* Responsive */
@media (max-width: 992px) {
  .news-layout {
    flex-direction: column;
  }
  
  .news-sidebar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .sidebar-widget {
    flex: 1;
    min-width: 280px;
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .news-item {
    flex-direction: column;
    gap: 20px;
  }
  
  .news-item__img {
    width: 100%;
  }
}

/* =============================================================
   源文件分区：pages/NewsDetail/NewsDetail.css
   ============================================================= */
.news-detail-page {
  background-color: #f9f9f9;
}

.article-wrapper {
  margin: 0 auto;
  background-color: #fff;
  padding: 60px 80px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid #eee;
  margin-bottom: 60px;
}

.article-header {
  text-align: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 30px;
  margin-bottom: 40px;
}

.article-title {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  color: #888;
  font-size: 14px;
}

.article-content {
  font-size: 16px;
  color: #444;
  line-height: 2;
}

.article-content p {
  margin-bottom: 24px;
  text-indent: 2em;
}

.article-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
}

.article-content img {
  width: 100%;
  border-radius: 4px;
  margin: 30px 0;
}

.article-footer {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.article-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #666;
  margin-bottom: 40px;
}

.article-tags a {
  padding: 4px 12px;
  background-color: #f5f5f5;
  color: #666;
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.article-tags a:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.article-navigation {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-navigation a {
  font-size: 15px;
  color: #666;
  transition: color var(--transition-fast);
  display: flex;
}

.article-navigation a:hover {
  color: var(--color-primary);
}

.nav-label {
  color: #999;
  width: 70px;
  flex-shrink: 0;
}

.nav-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 768px) {
  .article-wrapper {
    padding: 30px 20px;
  }
  
  .article-title {
    font-size: 24px;
  }
  
  .article-meta {
    flex-wrap: wrap;
    gap: 15px;
  }
}

/* =============================================================
   源文件分区：pages/About/About.css
   ============================================================= */
.about-page {
  /* No top padding needed if hero handles it, but let's assume it spans full width under the header */
}

.about-hero {
  position: relative;
  height: 400px;
  background-image: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.about-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.about-hero__content {
  position: relative;
  z-index: 1;
}

.about-hero__content h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.about-hero__content p {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.section-padding {
  padding: 80px 0;
}

.text-center {
  text-align: center;
}

.bg-light {
  background-color: #f9f9f9;
}

.about-intro__text {
  margin: 0 auto 40px;
  font-size: 15px;
  line-height: 1.8;
  color: #555;
}

.about-intro__text p {
  margin-bottom: 16px;
}

.about-stats {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid var(--color-border);
  padding-top: 40px;
}

.stat-item {
  flex: 1;
  text-align: left;
}

.stat-label {
  display: block;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
}

.stat-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
}

.stat-value {
  color: #004d9d;
}

.stat-value .animated-counter-text {
  font-size: 80px;
  font-weight: 300;
  letter-spacing: -2px;
}

.stat-value .animated-counter-suffix {
  font-size: 16px;
  font-weight: 400;
  margin-left: 4px;
  letter-spacing: 0;
  color: #004d9d;
}

/* Capabilities */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.capability-card {
  background: #fff;
  padding: 40px 20px;
  text-align: center;
  transition: all var(--transition-normal);
  border: 1px solid #eee;
}

.capability-card:hover {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(10, 86, 166, 0.2);
}

.cap-icon {
  margin-bottom: 24px;
  color: var(--color-primary);
}

.capability-card:hover .cap-icon {
  color: #fff;
}

.capability-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 600;
}

.capability-card p {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.8;
}

/* Workshops */
.workshops-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
}

.workshop-card {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.workshop-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.workshop-card:hover img {
  transform: scale(1.05);
}

.workshop-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 86, 166, 0.85);
  color: #fff;
  padding: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  transform: translateY(0);
  transition: all var(--transition-normal);
}

/* Certificates */
.certificates-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.certificate-card {
  background: #fff;
  padding: 20px;
  border: 1px solid #eee;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  text-align: center;
}

.certificate-card img {
  max-width: 100%;
  height: auto;
  border: 1px solid #f5f5f5;
}

/* Partners */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.partner-card {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #eee;
border-radius: 4px;
transition: all var(--transition-fast);
overflow: hidden;
}

.partner-card a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
}

.partner-card img {
max-width: 90%;
max-height: 70px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.6;
transition: all var(--transition-normal);
}

.partner-card:hover {
border-color: var(--color-primary);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.partner-card:hover img {
filter: grayscale(0);
opacity: 1;
}

/* Responsive */
@media (max-width: 992px) {
  .about-stats {
    flex-wrap: wrap;
    gap: 30px 10px;
  }
  .stat-item {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
  }
  .capabilities-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .workshops-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .certificates-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .about-stats {
    gap: 30px 10px;
  }
  .stat-item {
    flex: 0 0 calc(50% - 10px);
  }
  .capabilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .about-stats {
    gap: 20px;
    flex-direction: column;
  }
  .capabilities-grid {
    grid-template-columns: 1fr;
  }
  .workshops-grid {
    grid-template-columns: 1fr;
  }
  .certificates-grid {
    grid-template-columns: 1fr;
  }
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================================
   源文件分区：pages/Contact/Contact.css
   ============================================================= */
.contact-page {
  /* page styles */
}

.contact-hero {
  position: relative;
  height: 400px;
  background-image: url('https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.contact-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.contact-hero__content {
  position: relative;
  z-index: 1;
}

.contact-hero__content h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.contact-hero__content p {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 4px;
}

/* Info row */
.contact-info__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}

.info-card {
  padding: 40px;
}

.info-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.info-card:hover .info-icon {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(10, 86, 166, 0.2);
}

.info-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.info-card p {
  font-size: 16px;
  color: #666;
}

/* Map Section */
.map-wrapper {
  margin-top: 40px;
  border: 1px solid #eee;
  padding: 10px;
  background: #fff;
}

.map-wrapper img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

/* 高德地图容器 */
.map-wrapper .map-container {
  width: 100%;
  height: 480px;
  display: block;
}
.map-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: #999;
  font-size: 14px;
  text-align: center;
  padding: 0 20px;
}

/* 高德地图信息窗体 */
.amap-info-custom { padding: 6px 10px; min-width: 200px; }
.amap-info-custom h4 { margin: 0 0 6px; font-size: 15px; color: #333; }
.amap-info-custom p { margin: 3px 0; color: #666; font-size: 13px; }
.amap-info-custom i { margin-right: 4px; }

/* Form Section */
.contact-form-section {
  position: relative;
  background-image: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1920&q=80'); /* Using a world map watermark image if possible, or just solid */
  background-size: cover;
  background-position: center;
  background-color: #f9f9f9;
}

.contact-form-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(249,249,249, 0.9); /* Fade out the background map */
}

.contact-form-section .container {
  position: relative;
  z-index: 1;
}

.form-wrapper {
  max-width: 1000px;
  margin: 40px auto 0;
}

.contact-form {
  display: flex;
  gap: 30px;
}

.form-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-right {
  flex: 1;
}

.form-input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #ddd;
  background-color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-textarea {
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: 16px 20px;
  border: 1px solid #ddd;
  background-color: #fff;
  font-size: 14px;
  outline: none;
  resize: none;
  transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
}

.btn-submit {
  display: inline-block;
  padding: 14px 40px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
}

.btn-submit:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(10, 86, 166, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .contact-info__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .contact-form {
    flex-direction: column;
  }
  
  .form-textarea {
    min-height: 150px;
  }
}

/* =====================================================================
   转换补充节（转换工程追加，勿删）
   1) 原 React 内联 style 全部外置为下述语义化 class
   2) Font Awesome 图标替换 lucide 后，用下述尺寸/颜色类复现原 svg 尺寸
   ===================================================================== */

/* ---------- A. 首页 hero 三张背景图（原 HERO_SLIDES 内联背景） ---------- */
.hero__bg--1 { background-image: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1920&q=80'); }
.hero__bg--2 { background-image: url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?auto=format&fit=crop&w=1920&q=80'); }
.hero__bg--3 { background-image: url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&w=1920&q=80'); }

/* ---------- B. 首页“解决方案”区背景 ---------- */
.solutions__bg { background-image: url('../images/bg.jpg'); }

/* ---------- C. 首页 focus 区背景 + 按钮行内修正 ---------- */
.focus-section { background-image: url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?auto=format&fit=crop&w=1920&q=80'); }
.focus-cta-btn { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- D. 首页 news 区内容层（原 container 内联 relative/z-index） ---------- */
.news__container { position: relative; z-index: 10; }

/* ---------- E. 方案详情标题/内距修正（原内联 margin/border/padding） ---------- */
.sd-products__title { margin-bottom: 50px; border: none; padding-bottom: 0; }
.sd-features--flush { padding-top: 0; }

/* ---------- F. 联系页内距/标题修正（原内联） ---------- */
.contact-map--flush { padding-top: 0; }
.contact-form-section .section-title--plain { border: none; padding-bottom: 0; margin-bottom: 8px; }
.form-submit { margin-top: 30px; }

/* ---------- G. AnimatedCounter 数字滚动组件布局（原内联） ---------- */
.animated-counter { display: inline-flex; align-items: flex-start; }
.animated-counter-text { line-height: 0.9; }
.animated-counter-suffix { margin-top: 5px; }

/* ---------- H. ParticleWave 粒子波浪画布（原内联） ---------- */
.particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- I. Font Awesome 图标：基座 + 尺寸类（对应原 lucide size） ---------- */
i.fa-solid, i.fa-brands, i.fa-regular {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.125em;
}
.fa-size-14 { font-size: 14px; }
.fa-size-16 { font-size: 16px; }
.fa-size-20 { font-size: 20px; }
.fa-size-22 { font-size: 22px; }
.fa-size-24 { font-size: 24px; }
.fa-size-26 { font-size: 26px; }
.fa-size-32 { font-size: 32px; }
.fa-size-36 { font-size: 36px; }
.fa-size-48 { font-size: 48px; }

/* 原 lucide color 属性外置 */
.icon-kairo-blue { color: #0a56a6; }
.icon-white { color: #ffffff; }

/* ---------- J. JS 驱动的显隐辅助类（首页产品 Tab 组 / 首页新闻 Tab·分页卡片） ---------- */
.tab-panel.is-hidden { display: none; }
.news-panel.is-hidden { display: none; }
.news-grid-item.is-hidden { display: none; }
/* 让非激活的产品轮播组不参与布局（display:none 时保持内部 position 布局不散乱） */
.products__carousel.is-hidden { display: none; }

/* ---------- K. 首页新闻区多 Tab 分组网格（原 .news__grid 单容器拆为每 Tab 一个 .news-panel） ---------- */
.news-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}
@media (max-width: 992px) {
  .news-panel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .news-panel { grid-template-columns: 1fr; }
}

/* ---------- L. 移动端菜单开关图标切换（原 React 条件渲染 Menu / X） ---------- */
.header__mobile-toggle.is-open .fa-bars { display: none; }
.header__mobile-toggle .fa-xmark { display: none; }
.header__mobile-toggle.is-open .fa-xmark { display: inline-block; }

/* ---------- M. 搜索弹窗静态常驻 + 默认隐藏（原 React 条件渲染，仅 open 时挂载） ---------- */
.search-modal { display: none; }
.search-modal.is-open { display: flex; }

/* ---------- N. 讯睿 CMS 分页（config/page/pc/xr0067.php 输出，样式对齐原 .page-btn） ---------- */
.pagination-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pagination-list .page-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.pagination-list .page-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.pagination-list .page-btn:hover:not(.disabled):not(.active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination-list .page-btn:hover:not(.disabled):not(.active) a { color: inherit; }
.pagination-list .page-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.pagination-list .page-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f5f5f5;
}

/* ---------- O. CMS 标签输出调整（导航类 <a> 复用按钮样式时补齐） ---------- */
.category-btn,
.news-tab,
.solutions-tab,
.product-card__title,
.product-card__link,
.news-item__title,
.news-item__link,
.news-item__img,
.widget-product-card,
.solution-item-card__link,
.related-card__name {
  text-decoration: none;
}
.category-btn { display: block; }
.news-tab,
.solutions-tab { display: inline-block; }
.widget-hot-news li a { text-decoration: none; }

/* ---------- P. 搜索结果页 / 内嵌默认分页（search_all 使用讯睿搜索分页） ---------- */
.search-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--color-bg-light);
  border-radius: 6px;
  color: #555;
  font-size: 14px;
}
.search-summary strong { color: var(--color-primary); font-weight: 600; }
.search-empty { text-align: center; padding: 70px 0; }
.search-empty p { margin-bottom: 28px; font-size: 16px; color: #666; }

.pagination > ul.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pagination > ul.pagination > li { list-style: none; }
.pagination > ul.pagination > li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 14px;
}
.pagination > ul.pagination > li.active a,
.pagination > ul.pagination > li a:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.pagination > ul.pagination > li.total { font-size: 13px; color: #888; }

/* =====================================================================
   Q. 公共内页横幅 page-hero（top.html）
   ===================================================================== */
.page-hero {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(18, 49, 87, 0.85) 0%, rgba(10, 28, 50, 0.7) 100%);
}
.page-hero__content {
  position: relative;
  z-index: 2;
}
.page-hero__content h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.page-hero__content p {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #ddd;
  margin-bottom: 20px;
}
.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.page-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s;
}
.page-hero__breadcrumb a:hover {
  color: #fff;
}
.page-hero__breadcrumb i {
  font-size: 10px;
  opacity: 0.6;
}
@media (max-width: 768px) {
  .page-hero { height: 280px; }
  .page-hero__content h1 { font-size: 28px; }
}

/* =====================================================================
   R. 404 酷炫错误页
   ===================================================================== */
.error-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0e27;
  overflow: hidden;
  z-index: 9999;
}
.error-page__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(18, 49, 87, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 49, 87, 0.15) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
  from { transform: translate(0, 0); }
  to { transform: translate(50px, 50px); }
}
.error-page__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 49, 87, 0.4) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}
.error-page__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px;
}
.error-page__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.error-page__digit {
  font-size: 120px;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.6);
  line-height: 1;
  animation: digitFloat 3s ease-in-out infinite;
}
.error-page__digit--1 { animation-delay: 0s; }
.error-page__digit--2 { animation-delay: 0.6s; }
.error-page__digit--0 {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  -webkit-text-stroke: 0;
}
.error-page__gear {
  font-size: 50px;
  color: rgba(255, 255, 255, 0.8);
  animation: gearSpin 4s linear infinite;
}
@keyframes gearSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes digitFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.error-page__title {
  font-size: 28px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
}
.error-page__desc {
  font-size: 15px;
  color: #8899aa;
  margin-bottom: 30px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.error-page__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.error-page__btn {
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  text-decoration: none;
}
.error-page__btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.error-page__btn--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 49, 87, 0.5);
}
.error-page__btn--outline {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.error-page__btn--outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.error-page__search {
  max-width: 400px;
  margin: 0 auto;
}
.error-page__search form {
  display: flex;
  gap: 10px;
}
.error-page__search input {
  flex: 1;
  padding: 12px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}
.error-page__search input::placeholder { color: #667788; }
.error-page__search input:focus { border-color: rgba(255, 255, 255, 0.6); }
.error-page__search button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.error-page__search button:hover { background: var(--color-primary-hover); }
@media (max-width: 768px) {
  .error-page__digit { font-size: 80px; }
  .error-page__digit--0 { width: 80px; height: 80px; }
  .error-page__gear { font-size: 34px; }
  .error-page__title { font-size: 22px; }
}

/* =====================================================================
   S. 资质荣誉列表页
   ===================================================================== */
.certificates-page .certificates-main { padding: 60px 0 80px; }
.certificates-filter {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.certificates-filter__pill {
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: var(--color-text-main);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}
.certificates-filter__pill:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.certificates-filter__pill.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}
.certificate-item__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.certificate-item__img-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  background: #f5f5f5;
}
.certificate-item__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.certificate-item__link:hover .certificate-item__img-wrapper img {
  transform: scale(1.05);
}
.certificate-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 49, 87, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  color: #fff;
}
.certificate-item__link:hover .certificate-item__overlay {
  opacity: 1;
}
.certificate-item__info {
  padding: 16px 0;
  text-align: center;
}
.certificate-item__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 6px;
  line-height: 1.4;
}
.certificate-item__date {
  font-size: 13px;
  color: var(--color-text-light);
}

/* =====================================================================
   T. 资质荣誉详情页
   ===================================================================== */
.cert-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-light);
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 30px;
  transition: color 0.2s;
}
.cert-detail__back:hover { color: var(--color-primary); }
.cert-detail__card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  margin-bottom: 60px;
}
.cert-detail__media {
  position: relative;
  height: 500px;
  overflow: hidden;
}
.cert-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cert-detail__tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--color-primary);
  color: #fff;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}
.cert-detail__body { padding: 40px; }
.cert-detail__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 20px;
  line-height: 1.4;
}
.cert-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.cert-detail__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-light);
}
.cert-detail__meta-item i { color: var(--color-primary); }
.cert-detail__content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-main);
}
.cert-detail__related { margin-top: 60px; }
.cert-detail__related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 30px;
}
.cert-detail__related-item {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cert-detail__related-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 12px;
}
.cert-detail__related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.cert-detail__related-item:hover .cert-detail__related-img img {
  transform: scale(1.05);
}
.cert-detail__related-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-main);
  text-align: center;
}

/* =====================================================================
   U. 客户列表页
   ===================================================================== */
.clients-page .clients-main { padding: 60px 0 80px; }
.clients-filter {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.clients-filter__pill {
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: var(--color-text-main);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}
.clients-filter__pill:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.clients-filter__pill.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}
.client-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.client-card__link:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}
.client-card__img-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f5f5f5;
}
.client-card__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.client-card__link:hover .client-card__img-wrapper img {
  transform: scale(1.05);
}
.client-card__info { padding: 20px; }
.client-card__name {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 8px;
}
.client-card__desc {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 12px;
}
.client-card__more {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* =====================================================================
   V. FAQ 页面
   ===================================================================== */
.faq-page .faq-main { padding: 60px 0 80px; }
.faq-header {
  text-align: center;
  margin-bottom: 50px;
}
.faq-header .section-title { margin-bottom: 12px; }
.faq-header .section-subtitle {
font-size: 16px;
color: var(--color-text-light);
margin-top: 8px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto 40px;
}
.faq-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.faq-item:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.faq-item__question {
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.faq-item__question h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0;
  transition: color 0.2s;
}
.faq-item.open .faq-item__question h3 {
  color: var(--color-primary);
}
.faq-item__toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
}
.faq-item.open .faq-item__toggle {
  background: var(--color-primary);
  color: #fff;
}
.faq-item__toggle .fa-minus { display: none; }
.faq-item.open .faq-item__toggle .fa-plus { display: none; }
.faq-item.open .faq-item__toggle .fa-minus { display: inline-block; }
.faq-item__answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}
.faq-item.open .faq-item__answer {
  max-height: 500px;
  opacity: 1;
}
.faq-item__answer-inner {
  padding: 0 28px 22px;
  color: var(--color-text-light);
  font-size: 14px;
  line-height: 1.8;
}
.faq-item__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  text-decoration: none;
  transition: gap 0.2s;
}
.faq-item__link:hover { gap: 10px; }
.faq-cta {
  margin-top: 60px;
  background: var(--color-bg-light);
  padding: 40px;
  border-radius: 12px;
  text-align: center;
}
.faq-cta h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-text-main);
}
.faq-cta p {
  font-size: 15px;
  color: var(--color-text-light);
  margin-bottom: 24px;
}
.faq-cta__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}