/* EDRI Medical Research Skincare - Silver Tech Theme */
:root {
  /* Color Palette - Silver Tech Medical */
  --bg-primary: #f8fafb;
  --bg-secondary: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-card: rgba(255, 255, 255, 0.95);
  
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-light: #a0aec0;
  
  --accent-primary: #2b6cb0;      /* Medical Blue */
  --accent-secondary: #63b3ed;    /* Light Blue */
  --accent-gradient: linear-gradient(135deg, #2b6cb0 0%, #4299e1 50%, #63b3ed 100%);
  --accent-glow: rgba(43, 108, 176, 0.15);
  
  --silver-light: #e2e8f0;
  --silver-medium: #cbd5e0;
  --silver-dark: #a0aec0;
  --silver-gradient: linear-gradient(135deg, #f7fafc 0%, #edf2f7 50%, #e2e8f0 100%);
  
  --success: #38a169;
  --warning: #d69e2e;
  --error: #e53e3e;
  
  /* Shadows & Effects */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 32px var(--accent-glow);
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Spacing */
  --container-max: 1400px;
  --container-padding: clamp(16px, 4vw, 32px);
  
  /* Typography */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, 'Monaco', monospace;
  
  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

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

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Tech Background */
.tech-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(135deg, #f8fafb 0%, #edf2f7 100%);
}

#particles {
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-smooth);
}

.site-header.scrolled {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
  transform: translateY(0);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  min-height: 72px;
}

.logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition-smooth);
}

.logo:hover {
  transform: translateY(-2px);
}

.logo-mark {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo small {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* Navigation */
.nav ul {
  display: flex;
  gap: 8px;
  list-style: none;
  align-items: center;
}

.nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  position: relative;
  transition: all var(--transition-smooth);
  font-size: 15px;
}

.nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-gradient);
  transition: all var(--transition-smooth);
  transform: translateX(-50%);
}

.nav a:hover,
.nav a.active {
  color: var(--accent-primary);
  background: rgba(43, 108, 176, 0.05);
}

.nav a:hover::before,
.nav a.active::before {
  width: 24px;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--silver-light);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-smooth);
  position: relative;
  text-decoration: none;
}

.icon-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-secondary);
  color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--accent-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
}

/* Mobile Menu */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--silver-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-secondary);
  margin: 2px 0;
  border-radius: 2px;
  transition: all var(--transition-smooth);
}

.hamburger:hover {
  border-color: var(--accent-secondary);
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-smooth);
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu ul {
  background: var(--bg-secondary);
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 24px;
  list-style: none;
  border-radius: var(--radius-lg);
  min-width: 280px;
  box-shadow: var(--shadow-xl);
}

.mobile-menu a {
  display: block;
  padding: 16px 0;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--silver-light);
  transition: all var(--transition-smooth);
}

.mobile-menu a:hover {
  color: var(--accent-primary);
  padding-left: 8px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent-gradient);
  color: white;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.btn-primary {
  background: var(--accent-gradient);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--accent-primary);
  color: var(--accent-primary);
}

.btn-outline:hover {
  background: var(--accent-primary);
  color: white;
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-md);
}

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

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero .swiper {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.hero .swiper-slide {
  display: flex;
  align-items: center;
  min-height: 600px;
  padding: 60px;
  background: var(--silver-gradient);
  position: relative;
}

.hero-content {
  flex: 1;
  max-width: 600px;
  z-index: 2;
  display: flex; /* 新增 */
  flex-direction: column; /* 新增 */
  justify-content: center; /* 关键修复：确保内容垂直居中 */
}

.hero-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(43, 108, 176, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
  border: 1px solid rgba(43, 108, 176, 0.2);
}

.hero h1 {
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  line-height: 1.6;
}

.hero-stats {
  display: flex;
  gap: 32px;
  margin: 32px 0;
}

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

.stat-number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-primary);
  font-family: var(--font-mono);
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Floating Product Animation */
.floating-product {
  position: relative;
  animation: float 4s ease-in-out infinite;
}

.floating-product img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.glow-effect {
  position: absolute;
  inset: -20px;
  background: var(--accent-gradient);
  border-radius: var(--radius-xl);
  opacity: 0.2;
  filter: blur(20px);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.05); }
}


/* --- 最终正确的 DNA 螺旋动画 --- */

/* Parent container for the helix */
.dna-helix {
  width: 200px; /* 3D 螺旋结构的视觉宽度 */
  height: 400px; /* 3D 螺旋结构的视觉高度 */
  position: relative; /* 必需，用于子元素的绝对定位 */
  transform-style: preserve-3d; /* 启用子元素的 3D 变换效果 */
  perspective: 1200px; /* 增加透视感，使远近元素有大小变化，增强 3D 效果 */
  animation: dna-rotate 20s linear infinite; /* 整体螺旋的旋转动画 */
  /* 确保 .dna-helix 在 .hero-visual 中居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateX(15deg); /* 初始倾斜，使螺旋以更佳的视角呈现 */
}

/* Keyframes for the overall DNA rotation */
@keyframes dna-rotate {
  0% { transform: rotateX(15deg) rotateY(0deg); } /* 动画开始时，保持初始倾斜，Y轴旋转为0 */
  100% { transform: rotateX(15deg) rotateY(360deg); } /* 动画结束时，Y轴旋转360度，保持倾斜 */
}

/* Individual segment (rung) of the helix */
.helix-segment {
  position: absolute;
  width: 100px;
  height: 3px;
  background: rgba(160, 174, 192, 0.2);
  top: 50%;
  left: 50%;
  border-radius: 2px;
  /* 初始位置，JS或nth-child将覆盖它 */
}

/* 增强两端的球体 */
.helix-segment::before,
.helix-segment::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4299e1 0%, #2b6cb0 100%);
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(66, 153, 225, 0.6);
}
.helix-segment::before { left: -6px; }
.helix-segment::after { right: -6px; }

/* 使用 CSS 生成螺旋结构位置 (替代 JS) */
.helix-segment:nth-child(1) { transform: translate(-50%, -135px) rotateY(0deg); }
.helix-segment:nth-child(2) { transform: translate(-50%, -120px) rotateY(20deg); }
.helix-segment:nth-child(3) { transform: translate(-50%, -105px) rotateY(40deg); }
.helix-segment:nth-child(4) { transform: translate(-50%, -90px) rotateY(60deg); }
.helix-segment:nth-child(5) { transform: translate(-50%, -75px) rotateY(80deg); }
.helix-segment:nth-child(6) { transform: translate(-50%, -60px) rotateY(100deg); }
.helix-segment:nth-child(7) { transform: translate(-50%, -45px) rotateY(120deg); }
.helix-segment:nth-child(8) { transform: translate(-50%, -30px) rotateY(140deg); }
.helix-segment:nth-child(9) { transform: translate(-50%, -15px) rotateY(160deg); }
.helix-segment:nth-child(10) { transform: translate(-50%, 0px) rotateY(180deg); }
.helix-segment:nth-child(11) { transform: translate(-50%, 15px) rotateY(200deg); }
.helix-segment:nth-child(12) { transform: translate(-50%, 30px) rotateY(220deg); }
.helix-segment:nth-child(13) { transform: translate(-50%, 45px) rotateY(240deg); }
.helix-segment:nth-child(14) { transform: translate(-50%, 60px) rotateY(260deg); }
.helix-segment:nth-child(15) { transform: translate(-50%, 75px) rotateY(280deg); }
.helix-segment:nth-child(16) { transform: translate(-50%, 90px) rotateY(300deg); }
.helix-segment:nth-child(17) { transform: translate(-50%, 105px) rotateY(320deg); }
.helix-segment:nth-child(18) { transform: translate(-50%, 120px) rotateY(340deg); }

/* Molecular Structure */
.molecular-structure {
  width: 250px;
  height: 250px;
  position: relative;
}

.molecule {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--accent-gradient);
  border-radius: 50%;
  opacity: 0.8;
  animation: orbit 8s linear infinite;
}

.molecule:nth-child(1) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 0s;
}

.molecule:nth-child(2) {
  top: 20%;
  left: 20%;
  animation-delay: -2.67s;
}

.molecule:nth-child(3) {
  top: 20%;
  right: 20%;
  animation-delay: -5.33s;
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

/* Tech Features */
.tech-features {
  display: flex;
  gap: 24px;
  margin: 24px 0;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-secondary);
}

.tech-item i {
  color: var(--accent-primary);
}

/* Certification Badges */
.certification-badges {
  display: flex;
  gap: 16px;
  margin: 24px 0;
}

.cert-badge {
  padding: 12px 20px;
  background: white;
  border: 2px solid var(--accent-primary);
  color: var(--accent-primary);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
}

/* Swiper Customization */
.swiper-pagination-bullet {
  background: var(--silver-medium);
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  background: var(--accent-primary);
  opacity: 1;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--accent-primary);
  background: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 16px;
}

/* USP Section */
.tech-usp {
  padding: 80px 0;
}

.section-head {
  text-align: center;
  margin-bottom: 60px;
}

.section-head h2 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.section-head p {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.usp-item {
  background: var(--bg-card);
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.usp-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 4px;
  background: var(--accent-gradient);
  transition: left var(--transition-smooth);
}

.usp-item:hover::before {
  left: 0;
}

.usp-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.usp-icon {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
}

.usp-icon i {
  font-size: 48px;
  color: var(--accent-primary);
  position: relative;
  z-index: 2;
}

.icon-bg {
  position: absolute;
  inset: -16px;
  background: var(--accent-glow);
  border-radius: 50%;
  z-index: 1;
}

.usp-item h4 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.usp-item p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.tech-specs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.tech-specs span {
  padding: 4px 12px;
  background: rgba(43, 108, 176, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

/* Premium Product Showcase */
.premium-showcase {
  padding: 80px 0;
  background: var(--silver-gradient);
}

.product-categories {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: white;
  border: 2px solid var(--silver-light);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-smooth);
  font-weight: 500;
}

.category-btn.active,
.category-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(43, 108, 176, 0.05);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.product-showcase {
  display: none;
}

.product-showcase.active {
  display: block;
}

/* Medical Devices Showcase */
.showcase-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}





.product-image-stack {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all var(--transition-smooth);
}



.tech-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 16px;
  background: var(--accent-primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.product-details {
  padding: 32px;
}

.product-details h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.product-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 16px;
  font-style: italic;
}

.efficacy-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tag {
  padding: 6px 12px;
  background: rgba(56, 161, 105, 0.1);
  color: var(--success);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

.product-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.product-tech {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.tech-point {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.tech-point i {
  color: var(--accent-primary);
}

.product-cta {
  margin-top: auto;
}

/* Secondary Products */
.secondary-products {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.secondary-item {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-smooth);
}

.secondary-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.secondary-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.secondary-info {
  padding: 20px;
}

.secondary-info h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.secondary-info p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.efficacy-mini {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.efficacy-mini span {
  padding: 4px 8px;
  background: rgba(43, 108, 176, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
}

/* Cosmetic Products Grid */
.cosmetic-grid {
  display: grid;
  gap: 40px;
}

.cosmetic-category h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 32px;
  color: var(--text-primary);
  text-align: center;
}

.cosmetic-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.cosmetic-item {
  position: relative;
  height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-smooth);
}

.cosmetic-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.cosmetic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 24px;
  transform: translateY(20px);
  transition: all var(--transition-smooth);
}

.cosmetic-item:hover .item-overlay {
  transform: translateY(0);
}

.item-overlay h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.item-overlay p {
  font-size: 14px;
  opacity: 0.9;
}

/* Research Lab Section */
.research-lab {
  padding: 80px 0;
}

.lab-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.lab-visual {
  position: relative;
}

.lab-equipment {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.equipment-item {
  background: white;
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: all var(--transition-smooth);
}

.equipment-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.equipment-item i {
  font-size: 32px;
  color: var(--accent-primary);
  margin-bottom: 12px;
}

.equipment-item span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.lab-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(43, 108, 176, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.lab-info h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.lab-info p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}

.research-metrics {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
}

.metric {
  text-align: center;
}

.metric-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-primary);
  font-family: var(--font-mono);
}

.metric-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Newsletter */
.newsletter {
  background: var(--silver-gradient);
  padding: 80px 0;
  margin-top: 80px;
}

.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.newsletter-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(43, 108, 176, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.newsletter h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.newsletter p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.newsletter-form {
  background: white;
  padding: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.form-group {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.form-group input {
  flex: 1;
  padding: 16px;
  border: 2px solid var(--silver-light);
  border-radius: var(--radius-md);
  font-size: 16px;
  transition: all var(--transition-smooth);
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);
}

.form-note {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* Footer */
.site-footer {
  background: var(--text-primary);
  color: white;
  padding: 60px 0 20px;
  margin-top: 80px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: 40px;
}

.footer-brand .logo {
  color: white;
  margin-bottom: 20px;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 20px;
}

.certifications {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cert {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.footer-section h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: white;
}

.footer-section ul {
  list-style: none;
}

.footer-section li {
  margin-bottom: 8px;
}

.footer-section a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all var(--transition-smooth);
}

.footer-section a:hover {
  color: white;
  padding-left: 4px;
}

.social-links {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  transition: all var(--transition-smooth);
}

.social-link:hover {
  background: var(--accent-primary);
  transform: translateY(-2px);
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-bottom: 8px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
  transition: all var(--transition-smooth);
}

.footer-legal a:hover {
  color: white;
}

/* Product Grid (Products Page) */


.product-hero-container {
  padding: 120px 0 60px;
  text-align: center;
}

.product-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 25vh; /* 给予一定最小高度以观察居中效果 */
  margin-bottom: 60px;
}

.product-hero-content .hero-badge {
  margin-bottom: 20px;
}

.product-hero-content h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.product-hero-content p {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 800px;
  margin: 0 auto;
}

.product-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}


.product-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.stat-card {
  position: relative; /* 添加 position: relative */
  display: flex;
  align-items: center;
  gap: 16px;
  background: white;
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-smooth);
}

.stat-card:hover {
  transform: translateY(-8px); /* 增大了上移距离，效果更明显 */
  box-shadow: var(--shadow-xl);
}

.stat-icon {
  width: 60px;
  height: 60px;
  background: var(--accent-glow);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon i {
  font-size: 24px;
  color: var(--accent-primary);
}

.stat-info {
  text-align: left;
}

.stat-card .stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-primary);
  display: block;
}

.stat-card .stat-label {
  font-size: 14px;
  color: var(--text-muted);
}

/* Product Filters */
.product-filters {
  padding: 40px 0;
}

.filters-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.search-wrapper {
  position: relative;
}

.search-wrapper i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.search-wrapper input {
  width: 100%;
  padding: 16px 16px 16px 48px;
  border: 2px solid var(--silver-light);
  border-radius: var(--radius-md);
  font-size: 16px;
  transition: all var(--transition-smooth);
}

.search-wrapper input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);
}

.category-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: white;
  border: 2px solid var(--silver-light);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-smooth);
  font-size: 14px;
  font-weight: 500;
}

.filter-btn.active,
.filter-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(43, 108, 176, 0.05);
}

.sort-wrapper {
  position: relative;
}

.sort-wrapper select {
  width: 100%;
  padding: 16px;
  border: 2px solid var(--silver-light);
  border-radius: var(--radius-md);
  font-size: 16px;
  background: white;
  cursor: pointer;
  appearance: none;
}

.sort-wrapper i {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Premium Product Grid */
.premium-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 32px;
  padding: 40px 0;
}

.premium-card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-smooth);
  position: relative;
}

.premium-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-xl);
}

.card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  background: var(--accent-primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  z-index: 3;
}

.product-image-container {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--transition-smooth);
}

.premium-card:hover .product-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all var(--transition-smooth);
}

.premium-card:hover .image-overlay {
  opacity: 1;
}

.overlay-content .btn {
  background: white;
  color: var(--accent-primary);
}

.product-info {
  padding: 24px;
}

.product-category {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.product-category i {
  color: var(--accent-primary);
  font-size: 14px;
}

.product-category span {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.product-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
  line-height: 1.4;
}

.product-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 12px;
}

.efficacy-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.efficacy-tag {
  padding: 4px 8px;
  background: rgba(56, 161, 105, 0.1);
  color: var(--success);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
}

.tech-highlight {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(43, 108, 176, 0.05);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.tech-highlight i {
  color: var(--accent-primary);
  font-size: 14px;
}

.tech-highlight span {
  font-size: 12px;
  color: var(--accent-primary);
  font-weight: 500;
}

.product-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}

.price {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary);
  font-family: var(--font-mono);
}

.product-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.favorite-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid var(--silver-light);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
}

.favorite-btn:hover {
  border-color: #e53e3e;
  color: #e53e3e;
  background: rgba(229, 62, 62, 0.05);
}

.favorite-btn.active {
  border-color: #e53e3e;
  background: #e53e3e;
  color: white;
}

.add-to-cart {
  font-size: 14px;
  padding: 10px 16px;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-smooth);
}

.modal.open {
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  background: white;
  border-radius: var(--radius-xl);
  width: min(1000px, 95vw);
  max-height: 90vh;
  overflow: auto;
  position: relative;
  box-shadow: var(--shadow-xl);
  transform: scale(0.9);
  transition: all var(--transition-smooth);
}

.modal.open .modal-dialog {
  transform: scale(1);
}

.modal-dialog.large {
  width: min(1200px, 95vw);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-smooth);
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.modal-body {
  display: flex;
  gap: 32px;
  padding: 32px;
}

.modal-gallery {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-image {
  max-width: 100%;
  max-height: 500px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.gallery-prev {
  left: -60px;
}

.gallery-next {
  right: -60px;
}

.gallery-prev:hover,
.gallery-next:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.modal-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.modal-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.modal-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 16px;
}

.modal-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-primary);
  font-family: var(--font-mono);
  margin-bottom: 20px;
}

.modal-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.modal-efficacy,
.modal-ingredients {
  margin-bottom: 24px;
}

.modal-efficacy h4,
.modal-ingredients h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.efficacy-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.efficacy-list .efficacy-tag {
  padding: 6px 12px;
  background: rgba(56, 161, 105, 0.1);
  color: var(--success);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
}

.ingredients-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.ingredients-list li {
  padding: 8px 12px;
  background: rgba(43, 108, 176, 0.05);
  color: var(--accent-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

/* News Modal Specific */
.news-modal-body {
  flex-direction: column;
  gap: 24px;
}

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

.modal-image img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.news-content {
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 16px;
}

.news-content h3 {
  color: var(--text-primary);
  margin: 24px 0 12px;
}

.news-content p {
  margin-bottom: 16px;
}

/* Load More Button */
.load-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 40px auto 0;
  padding: 16px 32px;
  font-size: 16px;
}

/* Notification */
.notification {
  position: fixed;
  top: 100px;
  right: 24px;
  background: var(--success);
  color: white;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  transform: translateX(400px);
  transition: all var(--transition-smooth);
}

.notification.show {
  transform: translateX(0);
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-content i {
  font-size: 18px;
}

/* Timeline (About Page) */
.timeline-section {
  padding: 80px 0;
}

.interactive-timeline {
  max-width: 1000px;
  margin: 0 auto;
}

.timeline-track {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 60px;
  overflow-x: auto;
  padding: 20px 0;
}

.timeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--silver-light);
  cursor: pointer;
  transition: all var(--transition-smooth);
  min-width: 120px;
}

.timeline-node.active,
.timeline-node:hover {
  border-color: var(--accent-primary);
  background: rgba(43, 108, 176, 0.05);
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.node-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--silver-medium);
  transition: all var(--transition-smooth);
}

.timeline-node.active .node-dot {
  background: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.2);
}

.node-year {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.node-title {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.timeline-details {
  position: relative;
  min-height: 400px;
}

.timeline-panel {
  display: none; /* 关键：默认隐藏所有面板 */
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* 从这里移除了 display: grid; 和 grid-template-columns */
}

.timeline-panel.active {
  display: grid; /* 关键：只在 active 状态下显示为 grid 布局 */
  grid-template-columns: 1fr 1fr;
  gap: 0;
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-image {
  height: 300px;
  overflow: hidden;
}

.panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel-content h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.panel-content p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.panel-highlights {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.highlight {
  padding: 6px 12px;
  background: rgba(43, 108, 176, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

/* Brand Values */
.brand-hero {
  padding: 120px 0 80px;
  text-align: center;
}

.brand-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.brand-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-top: 60px;
}

.value-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: white;
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-smooth);
}

.value-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.value-icon {
  width: 60px;
  height: 60px;
  background: var(--accent-glow);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.value-icon i {
  font-size: 24px;
  color: var(--accent-primary);
}

.value-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.value-content p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Research & Quality */
.research-quality {
  padding: 80px 0;
  background: var(--silver-gradient);
}

.rq-grid {
  display: grid;
  gap: 60px;
}

.rq-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: white;
  padding: 40px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.rq-item:nth-child(even) {
  direction: rtl;
}

.rq-item:nth-child(even) .rq-content {
  direction: ltr;
}

.rq-visual {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* DNA Animation for Research */
.dna-structure {
  width: 200px;
  height: 300px;
  position: relative;
  animation: rotate 10s linear infinite;
}

.dna-strand {
  position: absolute;
  width: 4px;
  height: 100%;
  background: var(--accent-gradient);
  border-radius: 2px;
  left: 50%;
  transform-origin: center;
}

.dna-strand:nth-child(1) {
  animation: helix1 3s ease-in-out infinite;
}

.dna-strand:nth-child(2) {
  animation: helix2 3s ease-in-out infinite;
}

/* Production Animation */
.cleanroom-visual {
  width: 250px;
  height: 250px;
  background: rgba(43, 108, 176, 0.05);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.air-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--accent-primary);
  border-radius: 50%;
  opacity: 0.6;
  animation: float-particle 4s ease-in-out infinite;
}

.air-particle:nth-child(1) {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}

.air-particle:nth-child(2) {
  top: 50%;
  right: 20%;
  animation-delay: 1.5s;
}

.air-particle:nth-child(3) {
  bottom: 30%;
  left: 50%;
  animation-delay: 3s;
}

@keyframes float-particle {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
}

.rq-content h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.rq-content p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.tech-specs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(56, 161, 105, 0.1);
  color: var(--success);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
}

.cert-badges {
  display: flex;
  gap: 16px;
}

.cert-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(43, 108, 176, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* Quality Standards */
.quality-standards {
  padding: 80px 0;
}

.quality-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}

.metric-card {
  background: white;
  padding: 32px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transition: all var(--transition-smooth);
}

.metric-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.metric-icon {
  width: 80px;
  height: 80px;
  background: var(--accent-glow);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.metric-icon i {
  font-size: 32px;
  color: var(--accent-primary);
}

.metric-content h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
}

/* Progress Ring */
.progress-ring {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
}

.ring-progress {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent-primary) 0deg,
    var(--accent-primary) calc(var(--percent, 0) * 3.6deg),
    var(--silver-light) calc(var(--percent, 0) * 3.6deg),
    var(--silver-light) 360deg
  );
  position: relative;
  transition: all 1.5s ease;
}

.ring-progress::before {
  content: '';
  position: absolute;
  inset: 20px;
  background: white;
  border-radius: 50%;
}

.ring-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-primary);
  z-index: 2;
}

/* Global Presence */
.global-presence {
  padding: 80px 0;
  background: var(--silver-gradient);
}

.presence-map {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.map-container {
  position: relative;
  height: 400px;
  background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
  overflow: hidden;
}

.region-marker {
  position: absolute;
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.region-marker:hover {
  transform: scale(1.1);
}

.marker-dot {
  width: 16px;
  height: 16px;
  background: var(--silver-medium);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-smooth);
  position: relative;
}

.marker-dot.active,
.region-marker:hover .marker-dot {
  background: var(--accent-primary);
  box-shadow: 0 0 0 6px rgba(43, 108, 176, 0.2);
}

.marker-label {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transition: all var(--transition-smooth);
}

.region-marker:hover .marker-label,
.region-marker.active .marker-label {
  opacity: 1;
}

.region-info {
  padding: 40px;
}

.region-card {
  display: none;
}

.region-card.active {
  display: block;
  animation: fadeInUp 0.4s ease-out;
}

.region-card h4 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.region-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.region-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.region-stats span {
  padding: 8px 16px;
  background: rgba(43, 108, 176, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

/* News Page */
.news-hero {
  padding: 120px 0 60px;
  text-align: center;
}

.news-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.news-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.news-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.news-stats .stat-item i {
  font-size: 24px;
  color: var(--accent-primary);
}

.news-stats .stat-content {
  text-align: left;
}

/* News Filters */
.news-filters {
  padding: 40px 0;
}

.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: white;
  border: 2px solid var(--silver-light);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-smooth);
  font-weight: 500;
}

.filter-tab.active,
.filter-tab:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(43, 108, 176, 0.05);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Featured Article */
.featured-article {
  padding: 40px 0;
}

.featured-card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  transition: all var(--transition-smooth);
}

.featured-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.featured-image {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 16px;
  background: #d69e2e;
  color: white;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.featured-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.article-category {
  padding: 4px 12px;
  background: rgba(43, 108, 176, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

.article-date {
  color: var(--text-muted);
  font-size: 14px;
}

.featured-content h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
  line-height: 1.3;
}

.featured-content p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.article-highlights {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.read-more {
  align-self: flex-start;
}

/* Premium News Grid */
.premium-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 32px;
  padding: 40px 0;
}

.news-card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-smooth);
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.news-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.news-card-content {
  padding: 24px;
}

.news-card .article-meta {
  margin-bottom: 12px;
}

.news-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
  line-height: 1.4;
}

.news-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.news-card .btn {
  font-size: 14px;
  padding: 8px 16px;
}

/* Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
  
  .featured-card,
  .timeline-panel { /* 这里的 .timeline-panel 也要适配 */
    grid-template-columns: 1fr;
  }
  .featured-image,
  .panel-image {
    height: 250px;
  }
  
  .rq-item {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .rq-item:nth-child(even) {
    direction: ltr;
  }
}

@media (max-width: 900px) {
  .premium-product-grid,
  .premium-news-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .hero .swiper-slide {
    padding: 40px 24px;
    flex-direction: column;
    text-align: center;
  }
  
  .hero-visual {
    margin-top: 40px;
  }
  
  .floating-product img {
    width: 200px;
    height: 200px;
  }
  
  .newsletter-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .modal-body {
    flex-direction: column;
  }
  
  .gallery-prev,
  .gallery-next {
    position: static;
    margin: 16px 8px 0;
  }
}

@media (max-width: 768px) {
  .nav {
    display: none;
  }
  
  .hamburger {
    display: flex;
  }
  
  .hero-stats,
  .research-metrics {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .tech-features {
    flex-direction: column;
    gap: 12px;
  }
  
  .certification-badges {
    justify-content: center;
  }
  
  .product-categories {
    flex-direction: column;
    align-items: center;
  }
  
  .filters-container {
    grid-template-columns: 1fr;
  }
  
  .filter-tabs {
    flex-direction: column;
    align-items: center;
  }
  
  .timeline-track {
    flex-direction: column;
    align-items: center;
  }
  
  .timeline-node {
    min-width: auto;
    width: 100%;
    max-width: 200px;
  }
  
  .brand-values {
    grid-template-columns: 1fr;
  }
  
  .value-item {
    text-align: center;
    flex-direction: column;
  }
  
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
  }
  
  .hero .swiper-slide {
    padding: 24px 16px;
  }
  
  .hero h1 {
    font-size: 28px;
  }
  
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .premium-product-grid,
  .premium-news-grid {
    grid-template-columns: 1fr;
  }
  
  .usp-grid {
    grid-template-columns: 1fr;
  }
  
  .cosmetic-items {
    grid-template-columns: 1fr;
  }
  
  .quality-metrics {
    grid-template-columns: 1fr;
  }
  
  .news-stats {
    flex-direction: column;
    align-items: center;
  }
}

/* Print Styles */
@media print {
  .site-header,
  .mobile-menu,
  .tech-bg,
  .modal,
  .notification {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --text-primary: #000000;
    --text-secondary: #000000;
    --accent-primary: #0000ff;
    --silver-light: #cccccc;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Focus Visible */
.btn:focus-visible,
.icon-btn:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(43, 108, 176, 0.6);
  outline-offset: 2px;
}
/* 产品卡片增强动效 */
.stat-glow {
  position: absolute;
  inset: -8px;
  background: var(--accent-gradient);
  border-radius: var(--radius-xl); /* 匹配更大的悬停效果 */
  opacity: 0;
  filter: blur(16px); /* 增大了模糊度 */
  transition: all var(--transition-smooth);
  pointer-events: none; /* 关键修复：让辉光层不响应鼠标事件 */
}

.stat-card:hover .stat-glow {
  opacity: 0.3;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.6; }
}

/* 产品特色标签 */
.product-features {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}

.feature-tag {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: slideInRight 0.6s ease-out;
}

.feature-tag.hot { background: #ff6b6b; color: white; }
.feature-tag.new { background: #4ecdc4; color: white; }
.feature-tag.recommended { background: #45b7d1; color: white; }
.feature-tag.premium { background: #f39c12; color: white; }
.feature-tag.bestseller { background: #e74c3c; color: white; }
.feature-tag.anti-aging { background: #9b59b6; color: white; }
.feature-tag.repair { background: #27ae60; color: white; }
.feature-tag.acne { background: #16a085; color: white; }
.feature-tag.whitening { background: #f1c40f; color: #333; }

@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 认证徽章增强 */
.card-badge.medical {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  animation: shine 3s ease-in-out infinite;
}

.card-badge.cosmetic {
  background: linear-gradient(135deg, #3498db, #2980b9);
}

.card-badge.special {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  overflow: hidden;
  width: 70px;
}

.card-badge.special::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: slide 2s ease-in-out infinite;
}

@keyframes shine {
  0%, 100% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.3); }
  50% { box-shadow: 0 0 20px rgba(231, 76, 60, 0.6); }
}

@keyframes slide {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 功效标签颜色区分 */
.efficacy-tag.primary {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.2);
}

.efficacy-tag.secondary {
  background: rgba(52, 152, 219, 0.1);
  color: #3498db;
  border: 1px solid rgba(52, 152, 219, 0.2);
}

.efficacy-tag.tertiary {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.2);
}

.efficacy-tag.special {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
  font-weight: 600;
}

/* 搜索建议 */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--silver-light);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

.search-suggestion-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--silver-light);
  transition: all var(--transition-fast);
}

.search-suggestion-item:hover {
  background: var(--accent-glow);
}

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

/* 筛选按钮计数 */
.filter-btn .count {
  background: var(--accent-primary);
  color: white;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-size: 10px;
  margin-left: 6px;
  min-width: 18px;
  text-align: center;
}

.filter-btn.active .count {
  background: white;
  color: var(--accent-primary);
}

/* 结果统计 */
.results-summary {
  text-align: center;
  margin: 20px 0;
  padding: 16px;
  background: rgba(43, 108, 176, 0.05);
  border-radius: var(--radius-md);
}

.results-count {
  font-weight: 700;
  color: var(--accent-primary);
}

/* 产品推荐区域 */
.product-recommendations {
  padding: 80px 0;
  background: var(--silver-gradient);
}

.recommendation-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.rec-tab {
  padding: 12px 24px;
  background: white;
  border: 2px solid var(--silver-light);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-smooth);
  font-weight: 500;
}

.rec-tab.active,
.rec-tab:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(43, 108, 176, 0.05);
  transform: translateY(-2px);
}

.recommendation-content {
  position: relative;
  min-height: 200px;
}

.rec-panel {
  display: none;
}

.rec-panel.active {
  display: block;
  animation: fadeInUp 0.6s ease-out;
}

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

.routine-step {
  background: white;
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  max-width: 200px;
  position: relative;
  transition: all var(--transition-smooth);
}

.routine-step:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.step-number {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  background: var(--accent-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.step-product img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.step-product h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.step-product p {
  font-size: 12px;
  color: var(--text-muted);
}

.routine-arrow {
  font-size: 24px;
  color: var(--accent-primary);
  font-weight: bold;
}

/* Modal增强 */
.gallery-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.gallery-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(43, 108, 176, 0.3);
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.gallery-indicator.active {
  background: var(--accent-primary);
  transform: scale(1.2);
}

.modal-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.modal-badge {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(43, 108, 176, 0.05);
  border-radius: var(--radius-md);
}

.spec-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.spec-value {
  font-weight: 600;
  color: var(--text-primary);
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--silver-medium);
  background: white;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-smooth);
}

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

.qty-input {
  width: 60px;
  height: 32px;
  text-align: center;
  border: 1px solid var(--silver-medium);
  border-radius: var(--radius-sm);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .routine-step {
    max-width: 150px;
  }
  
  .routine-arrow {
    transform: rotate(90deg);
  }
  
  .rec-routine {
    flex-direction: column;
  }
  
  .recommendation-tabs {
    flex-direction: column;
    align-items: center;
  }
  
  .filters-container {
    grid-template-columns: 1fr;
  }
  
  .category-filter {
    flex-direction: column;
  }
}
/* --- 快速预览模态框 (Quick View Modal) 简化版样式 --- */

/* 1. 隐藏图片切换的左右箭头按钮 */
#product-modal .gallery-prev,
#product-modal .gallery-next {
  display: none;
}

/* 2. 隐藏数量选择器 */
#product-modal .quantity-selector {
  display: none;
}

/* 3. (可选) 让“立即购买”按钮在移除数量选择器后居中或占据更大空间 */
#product-modal .modal-actions {
  justify-content: center; /* 让按钮居中 */
}

#product-modal .modal-actions .btn-primary {
  flex-grow: 1; /* 让“立即购买”按钮填充可用空间 */
  text-align: center;
}
/* --- 产品推荐区域 (Product Recommendations) 样式修复 --- */

.product-recommendations {
  padding: 80px 0;
  background: var(--silver-gradient);
}

.recommendation-tabs {
  display: flex;
  justify-content: center;
  gap: 16px; /* 增加了间距以获得更好的外观 */
  margin-bottom: 60px; /* 增加了底部边距 */
  flex-wrap: wrap;
}

.rec-tab {
  padding: 12px 24px;
  background: white;
  border: 2px solid var(--silver-light);
  border-radius: var(--radius-full); /* 使用圆角胶囊按钮 */
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-smooth);
  font-weight: 600; /* 加粗字体 */
  font-size: 14px;
}

.rec-tab.active,
.rec-tab:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(43, 108, 176, 0.05);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.recommendation-content {
  position: relative;
  min-height: 200px; /* 确保切换时有空间 */
}

.rec-panel {
  display: none;
}

.rec-panel.active {
  display: block;
  animation: fadeInUp 0.6s ease-out;
}

.rec-routine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px; /* 增加了间距 */
  flex-wrap: wrap;
}

.routine-step {
  background: white;
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  width: 180px; /* 设定固定宽度 */
  min-height: 200px; /* 设定最小高度以对齐 */
  position: relative;
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.routine-step:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.step-number {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px; /* 增大尺寸 */
  height: 28px; /* 增大尺寸 */
  background: var(--accent-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; /* 增大字体 */
  font-weight: 700;
  border: 2px solid white;
}

.step-product img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.step-product h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
  line-height: 1.3;
}

.step-product p {
  font-size: 12px;
  color: var(--text-muted);
}

.routine-arrow {
  font-size: 28px; /* 增大字体 */
  color: var(--accent-secondary); /* 使用浅蓝色以弱化 */
  font-weight: bold;
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .rec-routine {
    flex-direction: column;
    gap: 40px; /* 增加垂直间距 */
  }
  
  .routine-arrow {
    transform: rotate(90deg);
    margin: -20px 0; /* 调整箭头位置 */
  }
}
/* ==========================================================================
   EDRI 功能增强补丁 (High-Tech Map & Particles)
   请粘贴到 styles.css 的最底部
   ========================================================================== */

/* --- 1. 高级粒子背景 (Canvas) --- */
.tech-bg {
  /* 确保背景固定且不遮挡内容 */
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  z-index: -1;
  background: linear-gradient(135deg, #f8fafb 0%, #edf2f7 100%);
  overflow: hidden;
  pointer-events: none; /* 关键：允许鼠标点击穿透背景 */
}

#particles {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.8; /* 提高一点可见度 */
}

/* --- 2. 全球业务布局 (交互地图) --- */

/* 覆盖原有的 .global-presence 样式，确保容器有深度 */
.global-presence {
  padding: 100px 0;
  position: relative;
  z-index: 2;
  overflow: visible; /* 允许阴影溢出 */
}

/* 新的主布局容器：左地图，右信息 */
.map-interactive-wrapper {
  display: grid;
  grid-template-columns: 1.8fr 1fr; /* 黄金比例分割 */
  background: #ffffff;
  border-radius: 24px;
  /* 高级悬浮阴影 */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8);
  overflow: hidden;
  min-height: 600px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.map-interactive-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(43, 108, 176, 0.15);
}

/* --- 左侧：地图可视化区域 --- */
.map-visual-side {
  position: relative;
  background: linear-gradient(135deg, #f9fafb 0%, #eff4f9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 内阴影增加立体感 */
  box-shadow: inset -10px 0 20px rgba(0,0,0,0.02);
}

.map-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.world-map-img {
  width: 95%;
  height: auto;
  opacity: 0.6;
  /* 科技银灰滤镜 */
  filter: grayscale(100%) contrast(0.9) brightness(1.1);
  transition: transform 0.6s ease;
}

/* 交互热点按钮 */
.hotspot {
  position: absolute;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  transform: translate(-50%, -50%); /* 绝对居中 */
  outline: none;
  padding: 0;
}

/* 热点中心点 */
.hotspot .dot {
  width: 12px;
  height: 12px;
  background: var(--accent-primary); /* 使用您定义的蓝色变量 */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #ffffff;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 2;
}

/* 脉冲波纹动画 */
.hotspot .pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent-primary);
  border-radius: 50%;
  opacity: 0;
  animation: mapPulse 2.5s infinite;
}

@keyframes mapPulse {
  0% { width: 10px; height: 10px; opacity: 0.8; border-width: 2px; }
  50% { opacity: 0.4; }
  100% { width: 60px; height: 60px; opacity: 0; border-width: 0px; }
}

/* 悬浮标签 */
.hotspot .label {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,1);
}

/* 热点激活/悬停状态 */
.hotspot:hover .dot,
.hotspot.active .dot {
  background: var(--accent-secondary);
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.2);
}

.hotspot:hover .label,
.hotspot.active .label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- 右侧：地区详情展示区域 --- */
.region-display-side {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* 上半部分：建筑图片 */
.building-visual-container {
  position: relative;
  width: 100%;
  /* [修改点] 高度从 300px 缩小到 220px，腾出空间给文字 */
  height: 270px; 
  overflow: hidden;
  background: var(--silver-light);
  flex-shrink: 0; /* 防止被挤压 */
}

.building-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.6s ease-in-out, transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.building-img.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* 渐变遮罩，高度稍微改小一点 */
.visual-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 从 80px 减小到 60px */
  background: linear-gradient(to top, #ffffff 0%, transparent 100%);
  z-index: 2;
}

/* 下半部分：文字信息 */
.region-info-container {
  flex: 1;
  position: relative;
  /* [修改点] 减少顶部和底部的 padding，保留左右 padding */
  padding: 20px 32px; 
  overflow: hidden;
}

.region-card {
  position: absolute;
  /* [修改点] 初始定位稍微靠上一点 */
  top: 20px; 
  left: 32px;
  right: 32px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.region-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 10;
}

.region-card h3 {
  font-size: 22px; /* 字体稍微改小一点点 */
  margin-bottom: 10px; /* 间距减小 */
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.region-card h3 small {
  font-size: 12px;
  color: var(--accent-primary);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

.divider {
  width: 40px;
  height: 4px;
  background: var(--accent-gradient);
  border-radius: 2px;
  margin-bottom: 14px; /* [修改点] 间距从 20px 减小到 14px */
}

.region-card p {
  font-size: 14px; /* 字体微调 */
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px; /* [修改点] 间距从 24px 减小到 16px，这是关键 */
}

.region-card .specs {
  list-style: none;
  padding: 0;
  /* 确保列表容器不被隐藏 */
  display: flex;
  flex-direction: column;
}

.region-card .specs li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px; /* [修改点] 列表项间距从 12px 减小到 8px */
  font-size: 13px; /* 字体微调 */
  color: var(--text-primary);
  font-weight: 500;
  padding: 8px 12px; /* 内边距微调 */
  background: var(--bg-primary);
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.region-card .specs li:hover {
  transform: translateX(5px);
  background: white;
  box-shadow: var(--shadow-sm);
}

.region-card .specs li i {
  color: var(--accent-primary);
  width: 20px;
  text-align: center;
}

/* --- 3. 移动端适配 (保持逻辑一致) --- */
@media (max-width: 900px) {
  .map-interactive-wrapper {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 16px;
  }

  .map-visual-side {
    height: 350px; 
  }

  .region-display-side {
    border-left: none;
    border-top: 1px solid var(--silver-light);
  }
  
  .building-visual-container {
    /* 移动端也保持较小的高度 */
    height: 180px; 
  }

  .region-info-container {
    min-height: 350px; /* 增加移动端最小高度，确保放得下 */
    padding: 24px;
  }
  
  .region-card {
    top: 24px; left: 24px; right: 24px;
  }

  .hotspot .label {
    display: none; 
  }
}
/* ==========================================================================
   MOBILE OPTIMIZATION PATCH (Paste at the end of styles.css)
   针对手机端的深度适配与交互优化
   ========================================================================== */

@media (max-width: 768px) {
  
  /* --- 1. 全局布局调整 --- */
  :root {
    --container-padding: 20px; /* 增加手机端两侧留白，避免内容贴边 */
    --radius-xl: 16px; /* 减小圆角半径，节省空间 */
  }

  /* 调整所有版块的垂直间距，避免手机上留白过大 */
  section {
    padding: 60px 0 !important; 
  }

  .reveal {
    /* 手机端减弱入场动画位移，避免卡顿 */
    transform: translateY(20px);
  }

  /* --- 2. 头部导航 (Header) --- */
  .site-header .container {
    padding: 10px 20px;
  }
  
  .logo-mark {
    font-size: 22px; /* 缩小 Logo */
    margin: 0 auto;
  }

  .hamburger {
    display: flex; /* 确保汉堡菜单显示 */
    border: none; /* 移除边框更简洁 */
    padding-right: 0;
  }

  /* 移动端菜单优化 */
  .mobile-menu ul {
    width: 90%; /* 菜单宽度自适应 */
    top: 80px;
    max-height: 80vh;
    overflow-y: auto; /* 允许菜单内滚动 */
  }

  /* --- 3. Hero 区域 (首页首屏) --- */
  .hero {
    min-height: auto;
    padding-top: 100px; /* 为固定的 Header 留出空间 */
    padding-bottom: 40px;
  }

  .hero .swiper-slide {
    flex-direction: column-reverse; /* 图片在上，文字在下，或反之 */
    padding: 20px !important;
    text-align: center;
    min-height: auto;
  }

  .hero-content {
    margin-top: 30px;
    align-items: center; /* 内容居中 */
  }

  .hero h1 {
    font-size: 32px; /* 缩小大标题 */
    line-height: 1.2;
  }
  
  .hero p {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .hero-visual {
    width: 100%;
    margin-top: 0;
    min-height: 250px; /* 确保动画区域有高度 */
  }

  /* 3D 螺旋和图片在手机上缩小 */
  .dna-helix, .floating-product img {
    transform: scale(0.7); 
  }
  
  /* 隐藏复杂的分子动画以提升性能 */
  .molecular-structure {
    transform: scale(0.6);
  }

  .hero-stats {
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  /* --- 4. 全球地图交互 (Global Map) --- */
  .map-interactive-wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  }

  .map-visual-side {
    height: 300px; /* 限制地图高度 */
    width: 100%;
    order: 1; /* 地图在上方 */
  }

  .hotspot {
    width: 30px; 
    height: 30px; /* 增大热点点击区域 */
  }
  
  .hotspot .label {
    display: none !important; /* 手机上隐藏悬浮标签，防止遮挡 */
  }

  .region-display-side {
    order: 2; /* 信息卡片在下方 */
    width: 100%;
    height: auto;
    min-height: auto;
  }

  .building-visual-container {
    display: none; /* 手机端隐藏建筑背景图，节省空间并聚焦文字 */
  }

  .region-info-container {
    padding: 24px;
    min-height: 250px; /* 给文字留出足够高度 */
  }

  .region-card {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    opacity: 0;
    display: none;
  }
  
  .region-card.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s ease;
  }

  /* --- 5. 产品列表与卡片 (Product Grid) --- */
  .product-hero-container {
    padding-top: 100px;
  }

  .product-stats {
    gap: 15px;
  }

  .stat-card {
    width: 100%; /* 统计卡片全宽 */
    justify-content: flex-start;
  }

  /* 筛选器堆叠 */
  .filters-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .category-filter {
    overflow-x: auto; /* 允许横向滚动 */
    padding-bottom: 10px;
    flex-wrap: nowrap; /* 不换行，变成横向滑块 */
    -webkit-overflow-scrolling: touch;
  }
  
  .filter-btn {
    white-space: nowrap; /* 按钮文字不换行 */
    flex-shrink: 0;
  }

  .premium-product-grid {
    grid-template-columns: 1fr; /* 单列显示 */
    gap: 24px;
  }

  /* 手机端卡片悬停效果改为始终显示遮罩或简化 */
  .premium-card .image-overlay {
    background: transparent; /* 移除深色遮罩 */
    opacity: 1; /* 始终显示 */
    align-items: flex-end; /* 按钮沉底 */
    padding: 10px;
    pointer-events: none; /* 让点击穿透到图片 */
  }
  
  .premium-card .image-overlay .overlay-content {
    width: 100%;
    pointer-events: auto;
  }
  
  .premium-card .quick-view {
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--accent-primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  /* --- 6. 产品推荐流程 (Recommendations) --- */
  .rec-routine {
    flex-direction: column; /* 垂直排列步骤 */
    position: relative;
    gap: 40px;
  }

  .routine-step {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .routine-arrow {
    transform: rotate(90deg); /* 箭头向下 */
    margin: -25px 0; /* 调整间距 */
    z-index: 1;
  }

  /* --- 7. 模态框 (Modal) --- */
  .modal-dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0; /* 全屏模式移除圆角 */
    margin: 0;
  }

  .modal-body {
    flex-direction: column;
    padding: 20px;
    overflow-y: auto; /* 内容过长可滚动 */
    height: 100%;
  }

  .modal-close {
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    z-index: 100;
  }

  .modal-gallery {
    height: 250px;
    flex-shrink: 0;
  }
  
  .gallery-image {
    max-height: 240px;
    width: auto;
  }

  .modal-info {
    padding-bottom: 80px; /* 为底部固定按钮留出空间 */
  }

  .modal-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 15px 20px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    z-index: 10;
  }
  
  .modal-actions .btn {
    flex: 1; /* 按钮撑满 */
    justify-content: center;
  }

  /* --- 8. 关于我们 (Timeline & Labs) --- */
  .timeline-track {
    display: flex;
    flex-direction: row; /* 强制横向 */
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 10px 20px;
    gap: 12px;
    width: 100%;
    margin-bottom: 30px;
  }

  .timeline-node {
    min-width: 90px; /* 固定宽度，变成胶囊形状 */
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    border-radius: 50px; /* 胶囊圆角 */
    background: #f8f9fa;
    border: 1px solid #eee;
    margin: 0;
    flex-shrink: 0;
  }

  .timeline-node.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: none; /* 移除位移防止跳动 */
  }

  .timeline-node.active .node-year { color: white; }
  .timeline-node.active .node-title { color: rgba(255,255,255,0.8); }
  .timeline-node .node-dot { display: none; } /* 手机端隐藏圆点，更简洁 */
  
  .node-year { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
  .node-title { font-size: 10px; } 



  .rq-item {
    grid-template-columns: 1fr !important; /* 强制单列 */
    padding: 24px;
    text-align: center;
  }
  
  .rq-item:nth-child(even) {
    direction: ltr; /* 重置文字方向 */
  }

  /* --- 9. 资讯中心 (News) --- */
  .news-stats {
    gap: 15px;
  }
  
  .news-stats .stat-item {
    width: 100%; /* 统计条全宽 */
    justify-content: center;
  }

  .featured-card {
    grid-template-columns: 1fr;
  }
  
  .featured-image {
    height: 200px;
  }
  
  .featured-content {
    padding: 24px;
  }
}

/* ==========================================================================
   EDRI MOBILE FINAL POLISH (Paste at the end of styles.css)
   包含：双列产品布局、显性导航栏、Swiper优化、精细排版
   ========================================================================== */

@media (max-width: 900px) {

  /* --- 1. 全局与基础 --- */
  :root { 
    --container-padding: 16px; 
    --radius-xl: 12px;
  }
  
  section { 
    padding: 40px 0 !important; 
    overflow: hidden; 
  }

  /* --- 2. 头部导航 (Header) - 显性化改造 --- */
  /* 增加头部高度，容纳两行内容 */
  .site-header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    height: auto;
    padding-bottom: 0;
  }

  .header-inner {
    flex-direction: column; /* 垂直排列：上Logo，下导航 */
    align-items: center;
    padding: 10px 0 0 0;
    gap: 10px;
  }

  /* 隐藏汉堡菜单，因为我们要直接显示导航 */
  .hamburger, 
  .mobile-menu {
    display: none !important;
  }

  /* 强制显示导航模块 */
  .nav {
    display: block !important;
    width: 100vw; /* 占满全宽 */
    overflow-x: auto; /* 允许横向滑动 */
    -webkit-overflow-scrolling: touch;
    margin-left: -16px; /* 抵消 container padding */
    margin-right: -16px;
    padding: 0 16px;
    border-top: 1px solid rgba(0,0,0,0.03);
  }

  .nav ul {
    display: flex;
    justify-content: center; /* 居中显示 */
    gap: 20px;
    padding: 12px 0;
    margin: 0;
    width: max-content; /* 让内容撑开宽度 */
    min-width: 100%;
  }

  .nav a {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 0;
    white-space: nowrap;
    font-weight: 500;
  }

  .nav a.active {
    color: var(--accent-primary);
    background: transparent;
  }
  
  /* 调整下划线样式 */
  .nav a::before { bottom: -4px; }

  /* 调整页面顶部内边距，防止被加高的Header遮挡 */
  .hero, .product-hero-container, .brand-hero, .news-hero {
    padding-top: 130px !important; 
  }

  /* --- 3. 首页 Swiper 优化 --- */
  .hero .swiper {
    border-radius: 0;
    overflow: visible;
  }

  .hero .swiper-slide {
    flex-direction: column; 
    padding: 0 10px 30px 10px !important;
    height: auto !important;
    justify-content: flex-start;
    opacity: 1 !important;
  }

  .hero-content {
    order: 2;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-visual {
    order: 1;
    height: 240px;
    width: 100%;
    margin-bottom: 10px;
  }

  /* 缩小3D元素 */
  .dna-helix, .floating-product img { transform: scale(0.6); }
  .molecular-structure { transform: scale(0.5); }

  .hero h1 { font-size: 26px; line-height: 1.3; margin-bottom: 8px; }
  .hero p { font-size: 14px; margin-bottom: 16px; }

  /* Swiper 按钮优化 */
  .swiper-button-next, .swiper-button-prev {
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    margin-top: -80px; /* 向上调整位置，避免遮挡文字 */
  }
  .swiper-button-next:after, .swiper-button-prev:after { font-size: 12px; }

  /* --- 4. 产品列表 (两列布局核心) --- */
  .premium-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 强制两列 */
    gap: 12px !important; /* 卡片间距 */
    padding: 10px 0 !important;
  }

  .premium-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  .product-image-container {
    height: 150px; /* 适当减小图片高度 */
  }

  .product-info {
    padding: 10px;
  }

  /* 标题限制行数 */
  .product-title {
    font-size: 13px;
    line-height: 1.4;
    height: 38px; /* 固定高度确保对齐 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 6px;
  }

  /* 隐藏非必要信息以节省空间 */
  .product-subtitle, 
  .product-category { 
    display: none; 
  }

  /* 标签微调 */
  .efficacy-tags {
    margin-bottom: 8px;
    gap: 4px;
    height: 20px; /* 限制高度只显示一行 */
    overflow: hidden;
  }
  .efficacy-tag {
    font-size: 9px;
    padding: 2px 5px;
  }

  /* 底部价格与按钮 */
  .product-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
  }

  .price {
    font-size: 16px;
  }

  .product-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .add-to-cart {
    flex: 1;
    margin-left: 8px;
    padding: 4px 0;
    height: 30px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .favorite-btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  
  /* 筛选器横向滑动 */
  .filters-container { gap: 16px; }
  .category-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
    gap: 10px;
    justify-content: flex-start;
  }
  .filter-btn { flex-shrink: 0; padding: 8px 14px; font-size: 13px; }

  /* --- 5. 品牌历程 (Timeline) - 横向胶囊 --- */
  .timeline-track {
    display: flex;
    overflow-x: auto;
    padding: 10px 0 20px 0;
    gap: 12px;
    margin-bottom: 20px;
    justify-content: flex-start;
  }

  .timeline-node {
    min-width: auto;
    padding: 8px 16px;
    flex-direction: row; /* 横向排列年份 */
    align-items: center;
    gap: 6px;
    border-radius: 30px;
    background: #f8f9fa;
    border: 1px solid #eee;
    margin: 0;
    flex-shrink: 0;
  }

  .timeline-node.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 10px rgba(43, 108, 176, 0.2);
    transform: none;
  }

  .node-dot { display: none; } /* 隐藏圆点 */
  .node-year { font-size: 14px; margin: 0; color: var(--text-primary); }
  .node-title { display: none; } /* 胶囊模式下隐藏标题，只留年份更简洁 */
  
  .timeline-node.active .node-year { color: white; }

  /* 历程内容卡片优化 */
  .timeline-panel.active {
    grid-template-columns: 1fr;
    margin-top: 10px;
  }
  .panel-image { height: 180px; }
  .panel-content { padding: 20px; }
  .panel-content h3 { font-size: 20px; }

  /* --- 6. 首页其他板块微调 --- */
  
  /* 优势板块横滑 */
  .usp-grid {
    display: flex !important;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 20px;
  }
  .usp-item {
    min-width: 260px;
    padding: 20px;
  }

  /* Secondary Items (图文小卡片) */
  .secondary-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .secondary-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 12px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  .secondary-item img {
    width: 70px; height: 70px;
    border-radius: 8px;
    object-fit: cover;
  }
  .secondary-info { padding: 0; flex: 1; }
  .secondary-info h4 { font-size: 15px; margin-bottom: 4px; }
  .efficacy-mini span { font-size: 10px; padding: 2px 6px; }

  /* Lab Content 布局 */
  .lab-content {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }
  .lab-visual { padding: 30px;  }
  .lab-equipment { grid-template-columns: repeat(2, 1fr); gap: 25px; }
  .equipment-item { padding: 40px; font-size: 20px; }
  .equipment-item i { font-size: 24px; margin-bottom: 8px; }
  .lab-info { padding: 24px; }
  .research-metrics { gap: 20px; }
  .metric-value { font-size: 24px; }

}
  .filter-tabs{
    min-width: auto;
    padding: 8px 16px;
    flex-direction: row; /* 横向排列年份 */
    align-items: center;
    gap: 6px;
    border-radius: 30px;
    margin: 0;
    flex-shrink: 0;
}