/* ===== 纺织业主题配色变量 ===== */
:root {
  --primary: #2b5797; /* 深蓝色 - 专业稳重 */
  --secondary: #87ceeb; /* 天蓝色 - 清新自然 */
  --accent: #f0f8ff; /* 淡蓝色 - 轻盈透气 */
  --textile-blue: #4682b4; /* 钢蓝色 - 工业感 */
  --textile-gray: #708090; /* 石板灰 - 纺织机械色 */
  --cream: #f5f5dc; /* 米色 - 天然纤维色 */
  --light: #ffffff;
  --dark: #2c3e50;
  --text-gray: #5a6c7d;
  --border-light: #e1e8ed;
  --shadow: 0 8px 25px rgba(43, 87, 151, 0.1);
  --shadow-hover: 0 12px 35px rgba(43, 87, 151, 0.15);
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--textile-blue) 100%);
  --textile-pattern: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(135, 206, 235, 0.1) 35px, rgba(135, 206, 235, 0.1) 70px);
}

/* ===== 响应式增强补充（2025 modernize） ===== */
html{font-size:16px;}@media (max-width:1200px){html{font-size:15.5px;}}@media (max-width:992px){html{font-size:15px;}}@media (max-width:768px){html{font-size:15px;}}@media (max-width:480px){html{font-size:14.5px;}}
body{word-wrap:break-word;}
.container{max-width:1280px;} /* 适度放宽桌面宽度 */

/* 流式标题尺寸 */
h1,.hero-title{font-size:clamp(1.9rem,4.2vw,46px);}
h2{font-size:clamp(1.5rem,3.2vw,36px);} 
h3{font-size:clamp(1.15rem,2.2vw,24px);} 

/* 自适应网格：使用 repeat(auto-fill) 提升在奇数项目下的均匀性 */
.features-grid,.products-grid,.news-list-grid,.generic-cards-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
@media (max-width:860px){.features-grid,.products-grid,.news-list-grid,.generic-cards-grid{gap:24px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}}
@media (max-width:640px){.features-grid,.products-grid,.news-list-grid,.generic-cards-grid{gap:20px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}}
@media (max-width:420px){.features-grid,.products-grid,.news-list-grid,.generic-cards-grid{grid-template-columns:1fr;}}

/* 产品卡片缩略图统一高度在小屏下调整 */
.product-card .product-image img{object-fit:cover;width:100%;height:220px;}
@media (max-width:860px){.product-card .product-image img{height:200px;}}
@media (max-width:640px){.product-card .product-image img{height:160px;}}
@media (max-width:420px){.product-card .product-image img{height:200px;}}

/* 顶部导航在 980px 即切换为移动抽屉，避免“半挤压” */
@media (max-width:980px){.nav-menu{display:none;} .mobile-menu-toggle{display:flex;} .logo h1{font-size:26px;}}
@media (max-width:560px){.logo h1{font-size:22px;}}

/* 顶部欢迎条在小屏折叠/可滑动 */
@media (max-width:640px){.top-bar-container{flex-direction:column;align-items:flex-start;gap:6px;} .contact-top{width:100%;display:flex;flex-wrap:wrap;gap:14px;} }

/* 横向可滚动的分类按钮容器（旧模板假设存在 .product-categories 等） */
.product-categories,.news-categories,.flag-filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:8px 6px;background:linear-gradient(135deg,#fff,#f5f8fc);border:1px solid var(--border-light);border-radius:14px;}
@media (max-width:640px){.product-categories,.news-categories,.flag-filter-bar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;} .product-categories::-webkit-scrollbar,.news-categories::-webkit-scrollbar,.flag-filter-bar::-webkit-scrollbar{display:none;} .product-categories button,.news-categories button,.flag-filter-bar button{flex:0 0 auto;}}

/* 分类按钮样式统一提升可点击面积 */
.product-categories .category-btn{background:#fff;border:1px solid var(--border-light);padding:8px 18px;border-radius:20px;font-size:14px;cursor:pointer;transition:var(--transition);} 
.product-categories .category-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);} 
.product-categories .category-btn.active{background:var(--primary);color:#fff;box-shadow:0 6px 18px -4px rgba(43,87,151,.45);} 

/* Hero 统计在窄屏折行居中 */
@media (max-width:860px){.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));row-gap:14px;}}
@media (max-width:560px){.hero-stats{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));}}

/* 关于页双列 -> 单列已存在，这里补充边距缩减 */
@media (max-width:600px){.company-intro-grid{gap:26px;} }

/* 时间轴在极窄屏左右留白缩减 */
@media (max-width:480px){.timeline{padding-left:22px;} .timeline::before{left:8px;} .time-item{padding-left:38px;} }

/* 图片懒加载淡入标记 */
img[data-lazy]{opacity:0;transition:opacity .6s ease,transform .6s ease;transform:translateY(6px);} img[data-lazy].loaded{opacity:1;transform:none;}

/* 辅助：隐藏元素在大屏显示小屏隐藏 variant */
.hide-mobile{display:block;} .show-mobile{display:none;} @media (max-width:640px){.hide-mobile{display:none !important;} .show-mobile{display:block !important;}}


/* ===== 全局重置 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* 列表样式重置 */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

body {
  font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  line-height: 1.7;
  color: var(--dark);
  background-color: var(--light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul, ol {
  list-style: none;
}

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

/* ===== 容器与布局 ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-fluid {
  width: 100%;
  padding: 0 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  padding: 0 15px;
}

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* ===== 按钮组件 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
}

.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.6s;
}

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

.btn-primary {
  background: var(--gradient);
  color: var(--light);
  box-shadow: 0 4px 15px rgba(43, 87, 151, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(43, 87, 151, 0.4);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--dark);
}

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

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

.btn-large {
  padding: 18px 36px;
  font-size: 18px;
}

/* ===== 顶部栏 ===== */
.top-bar {
  background: var(--textile-gray);
  color: var(--light);
  padding: 10px 0;
  font-size: 14px;
}

.top-bar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.welcome-text i {
  color: var(--secondary);
}

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

.phone-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-top i {
  color: var(--secondary);
}

/* ===== 头部导航 ===== */
header {
  background: var(--light);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.logo h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  position: relative;
}

.logo h1::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
}

.logo span {
  color: var(--secondary);
}

.nav-menu {
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav-menu .main-nav {
  display: flex;
  gap: 40px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu .main-nav > li {
  position: relative;
  list-style: none;
}

/* 导航内语言下拉适配 */
.nav-menu .nav-lang-item{display:flex;align-items:center;}
.nav-menu .nav-lang-item .lang-dropdown{margin-left:0;}
.nav-menu .nav-lang-item .lang-trigger{padding:8px 14px;font-size:14px;}
.nav-menu .nav-lang-item .lang-menu{right:0;left:auto;}
@media (max-width:980px){
  .nav-menu .nav-lang-item{display:none;} /* 桌面导航隐藏后克隆的移动端版本仍在抽屉中 */
}

.nav-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--dark);
  padding: 10px 0;
  position: relative;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.nav-menu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: var(--transition);
  transform: translateX(-50%);
}

.nav-menu li a:hover::after,
.nav-menu li a.active::after {
  width: 100%;
}

.nav-menu li a:hover,
.nav-menu li a.active {
  color: var(--primary);
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: var(--box-shadow);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.nav-menu .main-nav > li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  list-style: none;
}

.dropdown-menu li a {
  display: block;
  padding: 12px 20px;
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 400;
  transition: var(--transition);
  border-bottom: none;
}

.dropdown-menu li a:hover {
  background-color: var(--bg-light);
  color: var(--primary);
  padding-left: 25px;
}

.dropdown-menu li a::after {
  display: none;
}

/* ===== 移动端菜单 ===== */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  position: relative;
  z-index: 10001; /* 确保高于其它层 */
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--dark);
  border-radius: 2px;
  transition: var(--transition);
}

/* 叠加遮罩 */
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.3s;z-index:9998;}
.mobile-overlay.active{opacity:1;visibility:visible;}

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background: #fff;
  box-shadow: 0 0 30px rgba(0,0,0,.15);
  transform: translateX(-105%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-right: 1px solid var(--border-light);
  display: block !important;
}
.mobile-nav.active {
  transform: translateX(0) !important; /* 强制覆盖潜在后续样式 */
}

.mobile-nav-content {
  padding: 80px 20px 20px;
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav > .mobile-nav-content > ul > li {
  border-bottom: 1px solid var(--border-light);
}

.mobile-nav a {
  display: block;
  padding: 15px 0;
  color: var(--dark);
  font-weight: 500;
  transition: var(--transition);
  text-decoration: none;
}

.mobile-nav a:hover,
.mobile-nav a.active {
  color: var(--primary);
  padding-left: 10px;
}

.mobile-submenu {
  padding-left: 20px;
  background: var(--bg-light);
  margin-top: 10px;
  border-radius: 8px;
  list-style: none;
}

.mobile-submenu a {
  font-size: 14px;
  padding: 10px 0;
  color: var(--text-gray);
}

.mobile-contact {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border-light);
}

.mobile-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: var(--text-gray);
}

.mobile-contact-item i {
  color: var(--primary);
  width: 20px;
}

/* 移动端遮罩层 */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 9998;
}

.mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-open {
  overflow: hidden;
}

/* ===== 移动端菜单 ===== */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 5px;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--primary);
  transition: var(--transition);
}
.mobile-menu-toggle{border:1px solid var(--border-light);border-radius:8px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);}
.mobile-menu-toggle:active{transform:scale(.92);} 
.mobile-menu-open #mobileMenuToggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.mobile-menu-open #mobileMenuToggle span:nth-child(2){opacity:0;}
.mobile-menu-open #mobileMenuToggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ===== 卡片组件 ===== */
.card {
  background: var(--light);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--border-light);
}

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

.card-header {
  padding: 20px;
  background: var(--accent);
  border-bottom: 1px solid var(--border-light);
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 15px 20px;
  background: var(--accent);
  border-top: 1px solid var(--border-light);
}

/* ===== 标题样式 ===== */
.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 15px;
  position: relative;
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 60px;
  height: 4px;
  background: var(--gradient);
  border-radius: 2px;
  transform: translateX(-50%);
}

.section-title p {
  font-size: 18px;
  color: var(--text-gray);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 小徽章，用于 section 左上角或标题上方的短文本展示 */
.section-badge {
  display: inline-block;
  background: var(--gradient);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(43,87,151,0.12);
}

/* 关于页专用微调：保证 card 与间距更舒适 */
.company-intro-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
}

.company-text h2 { margin-top: 6px; margin-bottom: 14px; }
.company-text p { color: var(--text-gray); line-height: 1.8; margin-bottom: 14px; }
.company-figure .floating-card {
  background: linear-gradient(180deg, #fff, #f8fbff);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

/* 小屏幕适配 */
@media (max-width: 900px) {
  .company-intro-grid { grid-template-columns: 1fr; }
  .section-title { text-align: left; }
}

/* ===== 分隔线 ===== */
.divider {
  height: 1px;
  background: var(--border-light);
  margin: 40px 0;
}

.divider-gradient {
  height: 2px;
  background: var(--gradient);
  margin: 40px 0;
  border-radius: 1px;
}

/* ===== 辅助类 ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-gray { color: var(--text-gray); }

.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.bg-cream { background-color: var(--cream); }

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 50px; }

.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }
.mb-5 { margin-bottom: 50px; }

.p-1 { padding: 10px; }
.p-2 { padding: 20px; }
.p-3 { padding: 30px; }
.p-4 { padding: 40px; }
.p-5 { padding: 50px; }

.d-flex { display: flex; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

.gap-1 { gap: 10px; }
.gap-2 { gap: 20px; }
.gap-3 { gap: 30px; }

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  
  .top-bar-container {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .contact-top {
    justify-content: center;
  }
  
  .header-container {
    padding: 10px 15px;
  }
  
  .logo h1 {
    font-size: 24px;
  }
  
  /* 隐藏桌面端导航，显示移动端菜单按钮 */
  .nav-menu {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .section-title h2 {
    font-size: 28px;
  }
  
  .btn {
    padding: 12px 24px;
    font-size: 14px;
  }
  
  .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .col-md-4 { flex: 0 0 100%; max-width: 100%; }
  .col-md-3 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 480px) {
  .section-title h2 {
    font-size: 24px;
  }
  
  .section-title p {
    font-size: 16px;
  }
}

/* ===== 纺织纹理效果 ===== */
.textile-pattern {
  background-image: var(--textile-pattern);
}

/* 发展历程时间轴样式 */
.timeline {
  position: relative;
  padding-left: 40px;
  margin-top: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--secondary), var(--primary));
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(43,87,151,0.06);
  z-index: 0;
}

.time-item {
  position: relative;
  padding: 18px 20px 18px 56px;
  border-radius: 10px;
  background: #ffffff;
  margin-bottom: 18px;
  border: 1px solid rgba(43,87,151,0.08); /* 更明显的边框颜色 */
  box-shadow: 0 8px 30px rgba(43,87,151,0.06);
  z-index: 1;
}

.time-item .dot {
  position: absolute;
  left: 14px;
  top: 22px;
  width: 14px;
  height: 14px;
  background: var(--light);
  border: 4px solid var(--primary);
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(43,87,151,0.12);
  z-index: 2;
}

.time-item h4 { margin: 0 0 6px 0; font-size: 16px; color: var(--textile-blue); font-weight:700; }
.time-item p { margin: 0; color: var(--text-gray); }

.time-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(43,87,151,0.08);
  border-color: rgba(43,87,151,0.18);
}

@media (max-width: 768px) {
  .timeline { padding-left: 28px; }
  .timeline::before { left: 12px; }
  .time-item { padding-left: 40px; }
  .time-item .dot { left: 6px; }
}

.weave-effect {
  position: relative;
  overflow: hidden;
}

.weave-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(43, 87, 151, 0.03) 2px, rgba(43, 87, 151, 0.03) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(135, 206, 235, 0.03) 2px, rgba(135, 206, 235, 0.03) 4px);
  pointer-events: none;
}

/* ===== 加载动画 ===== */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--accent);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== 滚动条样式 ===== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--accent);
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--textile-blue);
}

/* ===== 通用页头横幅 ===== */
.page-hero{background:linear-gradient(135deg,var(--primary),var(--textile-blue));color:#fff;padding:70px 0 60px;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(60deg,rgba(255,255,255,.15)0 16px,transparent 16px 32px);opacity:.3;}
.page-hero .page-hero-inner{position:relative;z-index:2;}
.page-hero .hero-title{margin:0 0 18px;font-size:44px;letter-spacing:1px;}
.page-hero .hero-desc{margin:0;max-width:760px;font-size:15px;line-height:1.7;opacity:.9;}
@media (max-width:600px){.page-hero{padding:60px 0 50px;} .page-hero .hero-title{font-size:34px;} }

/* ===== 语言下拉（Globe） ===== */
.lang-dropdown{position:relative;margin-left:22px;font-size:13px;z-index:1200;}
/* 允许在移动端显示（稍后通过克隆放入抽屉） */
@media (max-width:860px){
  .lang-dropdown{display:inline-block;}
  .mobile-nav .lang-dropdown{margin:20px 0 0 0;display:block;}
  .mobile-nav .lang-dropdown .lang-trigger{width:100%;justify-content:space-between;padding:12px 16px;font-size:15px;border-radius:14px;}
  .mobile-nav .lang-dropdown .lang-menu{position:static;opacity:1;transform:none;pointer-events:auto;box-shadow:none;border:1px solid var(--border-light);margin:10px 0 0 0;backdrop-filter:none;}
  .mobile-nav .lang-dropdown.open .lang-menu{transform:none;}
  .mobile-nav .lang-dropdown .lang-menu:before{display:none;}
  .mobile-nav .lang-dropdown .lang-menu li{padding:12px 14px;font-size:14px;}
}
.lang-dropdown .lang-trigger{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ffffff 0%,#f4f7fb 100%);border:1px solid var(--border-light);padding:6px 14px;border-radius:20px;font-size:13px;line-height:1;cursor:pointer;color:#2c3e50;font-weight:500;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:background .25s,border-color .25s,box-shadow .25s,transform .25s;}
.lang-dropdown .lang-trigger:hover{background:#fff;border-color:#d0dae2;box-shadow:0 4px 14px rgba(43,87,151,.12);} 
.lang-dropdown .lang-trigger:active{transform:translateY(1px);} 
.lang-dropdown .lang-trigger i{color:var(--primary);font-size:15px;}
.lang-dropdown .lang-trigger .chevron{width:8px;height:8px;display:inline-block;position:relative;}
.lang-dropdown .lang-trigger .chevron:before,.lang-dropdown .lang-trigger .chevron:after{content:'';position:absolute;left:0;top:50%;width:8px;height:1.5px;background:#4a5b6b;transform-origin:center;transition:.3s;}
.lang-dropdown .lang-trigger .chevron:before{transform:translateY(-1px) rotate(40deg);} 
.lang-dropdown .lang-trigger .chevron:after{transform:translateY(1px) rotate(-40deg);} 
.lang-dropdown.open .lang-trigger .chevron:before{transform:translateY(0) rotate(-40deg);} 
.lang-dropdown.open .lang-trigger .chevron:after{transform:translateY(0) rotate(40deg);} 

.lang-dropdown .lang-menu{list-style:none;margin:8px 0 0;padding:8px;position:absolute;right:0;top:100%;background:#fff;border:1px solid var(--border-light);border-radius:14px;min-width:210px;box-shadow:0 10px 32px -6px rgba(43,87,151,.28);opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;transition:.28s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(6px);z-index:1300;}
.lang-dropdown .lang-menu.open-up{top:auto;bottom:100%;margin-top:0;margin-bottom:8px;}
.lang-dropdown.open .lang-menu{opacity:1;transform:translateY(4px) scale(1);pointer-events:auto;}
.lang-dropdown .lang-menu li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13px;color:#2c3e50;position:relative;overflow:hidden;--hover-bg:linear-gradient(135deg,var(--primary),var(--textile-blue));}
.lang-dropdown .lang-menu li .l-label{font-weight:500;}
.lang-dropdown .lang-menu li .l-code{font-size:11px;letter-spacing:.5px;color:#6b7b8c;background:#eef3f7;padding:2px 6px;border-radius:6px;font-weight:600;}
.lang-dropdown .lang-menu li.active{background:var(--primary);color:#fff;box-shadow:0 4px 14px -2px rgba(43,87,151,.4);} 
.lang-dropdown .lang-menu li.active .l-code{background:rgba(255,255,255,.18);color:#fff;}
.lang-dropdown .lang-menu li:not(.active):hover{background:linear-gradient(135deg,#f5faff,#edf3f9);} 
.lang-dropdown .lang-menu li:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.lang-dropdown .lang-menu:before{content:"";position:absolute;top:-6px;right:26px;width:12px;height:12px;background:#fff;border:1px solid var(--border-light);border-bottom:none;border-right:none;transform:rotate(45deg);} 
.lang-dropdown .lang-menu.open-up:before{top:auto;bottom:-6px;transform:rotate(225deg);} 

/* 鼠标悬停兜底（若 JS 未执行，可直接 hover 打开） */
.no-js .lang-dropdown:hover .lang-menu{opacity:1;transform:translateY(4px) scale(1);pointer-events:auto;}

/* 深色模式预留(如果后续添加 .dark-theme) */
.dark-theme .lang-dropdown .lang-trigger{background:linear-gradient(135deg,#1e2832,#283544);color:#d5dde5;border-color:#2f3f51;}
.dark-theme .lang-dropdown .lang-menu{background:#1f2a35;border-color:#2f3f51;}
.dark-theme .lang-dropdown .lang-menu li{color:#d5dde5;}
.dark-theme .lang-dropdown .lang-menu li:not(.active):hover{background:linear-gradient(135deg,#253240,#2e3d4c);} 
.dark-theme .lang-dropdown .lang-menu li .l-code{background:#2c3b49;color:#96a8b8;} 
.dark-theme .lang-dropdown .lang-menu li.active{background:linear-gradient(135deg,#2b5797,#4682b4);} 

/* 旧移动端语言标签已移除 */