/* ==========================================================================
   你好关键帧 (Hello Keyframe) - 官方网站样式系统
   设计理念：Apple 的留白 + Arc Browser 的现代感 + Notion 的简洁 + B站UP主页的作品感
   色彩体系：活力橙 #FF6B00 / 暖金 #F59E0B / 黑曜黑 #0F172A / 极简白 #F8FAFC
   ========================================================================== */

/* 1. CSS 变量与设计规范 */
:root {
  --primary: #FF6B00;
  --primary-hover: #FF7A1A;
  --primary-active: #E65100;
  --primary-light: rgba(255, 107, 0, 0.08);
  --primary-glow: rgba(255, 107, 0, 0.25);
  
  --accent-gold: #F59E0B;
  --accent-gold-light: rgba(245, 158, 11, 0.12);
  --accent-blue: #00AEEC;
  --accent-purple: #8B5CF6;
  --accent-green: #10B981;
  
  --bg-page: #F8FAFC;
  --bg-page-alt: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-card-glass: rgba(255, 255, 255, 0.88);
  --bg-dark-glass: rgba(15, 23, 42, 0.85);
  --bg-dark-card: #141416;
  
  --text-main: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-light: #F8FAFC;
  
  --border-color: #E2E8F0;
  --border-light: rgba(226, 232, 240, 0.8);
  --border-focus: #FF6B00;
  
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 6px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 16px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 16px 32px -6px rgba(0, 0, 0, 0.08), 0 6px 12px -4px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 20px 36px -8px rgba(0, 0, 0, 0.09), 0 4px 16px -2px rgba(255, 107, 0, 0.08);
  --shadow-glow: 0 0 28px rgba(255, 107, 0, 0.22);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  
  --header-height: 72px;
  --container-max: 1200px;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. 重置与基础排版 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-main);
  background-color: var(--bg-page);
  line-height: 1.6;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: var(--bg-page);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease-smooth);
}

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

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

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

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* 3. 顶部主导航栏 (Site Header) */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: var(--bg-card-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
  z-index: 100;
  transition: background 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

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

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.logo-box {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

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

.brand-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.brand-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 107, 0, 0.15);
}

.nav-links {
  display: flex;
  align-items: center;
  background: var(--bg-page-alt);
  padding: 4px;
  border-radius: var(--radius-pill);
  gap: 4px;
}

.nav-item {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 6px 20px;
  border-radius: var(--radius-pill);
  transition: all 0.2s var(--ease-smooth);
  position: relative;
}

.nav-item:hover {
  color: var(--text-main);
}

.nav-item.active {
  background: var(--bg-card);
  color: var(--text-main);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-btn-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  transition: all 0.2s var(--ease-smooth);
}

.social-btn-pill:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-1px);
}

.social-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  transition: all 0.2s var(--ease-smooth);
}

.social-btn-icon:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-light);
}

/* 4. 单页视图容器与横向平滑滑动转场 (Horizontal Slide Viewport) */
.pages-viewport {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  min-height: calc(100vh - 72px);
}

/* Unused legacy view styles removed */

@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutLeft {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-50px); }
}

@keyframes slideOutRight {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(50px); }
}

/* 5. 首页 (Home View) */
.hero-section {
  padding: 64px 0 48px;
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  align-items: center;
  gap: 48px;
}

.hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}

.hero-tag-pill .tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.hero-title {
  font-size: 52px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-main);
  margin-bottom: 20px;
}

.hero-title .highlight-orange {
  color: var(--primary);
}

.hero-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  background: var(--primary);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
  transition: all 0.25s var(--ease-smooth);
}

.btn-hero-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.45);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
  transition: all 0.25s var(--ease-smooth);
}

.btn-hero-secondary:hover {
  background: var(--bg-page-alt);
  border-color: #CBD5E1;
  transform: translateY(-2px);
}

.hero-visual-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.hero-visual-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-card-hover);
}

.visual-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.visual-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-smooth);
}

.hero-visual-card:hover .visual-cover {
  transform: scale(1.04);
}

.visual-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.3s var(--ease-spring);
}

.visual-play-btn svg {
  margin-left: 3px;
}

.hero-visual-card:hover .visual-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--primary);
  border-color: var(--primary);
}

.visual-info-box {
  padding: 16px 20px;
  background: #141416;
}

.visual-tag-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}

.visual-title-sub {
  font-size: 14px;
  font-weight: 600;
  color: #F1F5F9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 6. 全网数据统计栏 (Stats Grid) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 32px 0 64px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

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

.stat-value-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.stat-number {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-main);
  font-feature-settings: 'tnum';
}

.stat-unit {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  margin-left: 2px;
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 6px;
}

.stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* 7. 精选视频节目 (Videos Showcase) */
.section-wrap {
  margin-bottom: 72px;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}

.section-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.section-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-page-alt);
  padding: 4px;
  border-radius: var(--radius-pill);
}

.filter-btn {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  transition: all 0.2s var(--ease-smooth);
}

.filter-btn:hover {
  color: var(--text-main);
}

.filter-btn.active {
  background: #0F172A;
  color: #ffffff;
  font-weight: 600;
}

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

.video-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
  display: flex;
  flex-direction: column;
}

.video-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.video-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.video-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-smooth);
}

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

.video-cat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.video-duration-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-feature-settings: 'tnum';
}

.video-content {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.video-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.45;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 12px;
}

.video-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--bg-page-alt);
}

/* 8. 合作伙伴 / 测评生态 (Brand Partners - Clean Modern Badges) */
.partners-section {
  padding: 48px 0 64px;
  text-align: center;
}

.partners-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
}

.partners-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 32px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.partner-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-xs);
  transition: all 0.2s var(--ease-smooth);
  min-height: 96px;
  text-decoration: none;
  color: inherit;
}

.partner-card:hover {
  border-color: #CBD5E1;
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.partner-logo-img {
  max-width: 90px;
  max-height: 34px;
  object-fit: contain;
  filter: none;
  opacity: 0.85;
  transition: all 0.25s ease;
}

.partner-card:hover .partner-logo-img {
  filter: none;
  opacity: 1;
}

.partner-en {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1E293B;
}

.partner-cn {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.partner-gear {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

/* 9. 素材分享页 (Materials View) */
.materials-header-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  margin: 24px 0 36px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.banner-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.banner-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 12px;
}

.banner-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 500px;
}

.banner-art-wrap {
  display: flex;
  justify-content: flex-end;
}

.banner-art-img {
  max-height: 180px;
  width: auto;
  object-fit: contain;
}

.materials-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}

.search-input-wrap {
  position: relative;
  width: 280px;
}

.search-input-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.search-input {
  width: 100%;
  height: 38px;
  padding: 0 16px 0 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 13px;
  color: var(--text-main);
  outline: none;
  transition: all 0.2s var(--ease-smooth);
}

.search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.material-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

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

.mat-cover-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.mat-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-smooth);
}

.material-card:hover .mat-cover-img {
  transform: scale(1.05);
}

.mat-cat-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.mat-size-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.mat-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mat-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.45;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mat-includes {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mat-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-page-alt);
}

.mat-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.btn-copy-link {
  flex: 1;
  height: 34px;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s var(--ease-smooth);
}

.btn-copy-link:hover {
  background: #ffffff;
  border-color: #CBD5E1;
  color: var(--primary);
}

.btn-copy-code {
  height: 34px;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.2s var(--ease-smooth);
}

.btn-copy-code:hover {
  background: #ffffff;
  border-color: #CBD5E1;
  color: var(--primary);
}

.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 36px 0 60px;
}

.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease-smooth);
}

.page-btn:hover {
  border-color: #CBD5E1;
  color: var(--text-main);
}

.page-btn.active {
  background: #0F172A;
  color: #ffffff;
  border-color: #0F172A;
  font-weight: 700;
}

/* 10. 加入我们页 (Join Us - Clean High-End Typography & Yellow Accent) */
.join-header-wrap {
  text-align: center;
  max-width: 720px;
  margin: 48px auto 44px;
}

.join-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 16px;
}

.join-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.benefit-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(245, 158, 11, 0.4);
}

.benefit-num {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-gold-light);
  color: #D97706;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.benefit-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.benefit-card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.jobs-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
}

.jobs-sec-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
}

.jobs-sec-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 64px;
}

.job-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s var(--ease-smooth);
}

.job-card:hover {
  border-color: #CBD5E1;
  box-shadow: var(--shadow-md);
}

.job-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.job-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.job-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}

.job-type-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.job-location {
  font-size: 13px;
  color: var(--text-muted);
}

.job-salary-badge {
  font-size: 13px;
  font-weight: 600;
  color: #D97706;
  background: var(--accent-gold-light);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.job-columns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 20px;
}

.job-column-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.job-bullet-list {
  list-style: none;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.job-bullet-list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
}

.job-bullet-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
}

.job-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--bg-page-alt);
}

.job-perks {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-apply-job {
  padding: 8px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s var(--ease-smooth);
}

.btn-apply-job:hover {
  background: #0F172A;
  color: #ffffff;
  border-color: #0F172A;
}

/* 11. 关于我们页 (About Us) */
.about-hero-wrap {
  text-align: center;
  max-width: 760px;
  margin: 48px auto 40px;
}

.about-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 16px;
}

.about-manifesto-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 36px 44px;
  margin-bottom: 48px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.about-manifesto-card p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  text-align: center;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

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

.team-avatar-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-page-alt);
  border: 2px solid var(--border-color);
}

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

.team-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.team-role {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.team-major {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.team-quote {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 14px;
  padding: 0 4px;
}

.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.team-tag-pill {
  font-size: 10px;
  background: var(--bg-page-alt);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* 12. 商务合作模块 (Business Cooperation Card) */
.biz-coop-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 40px 48px;
  margin-bottom: 64px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 40px;
}

.biz-tag {
  font-size: 11px;
  font-weight: 700;
  color: #D97706;
  background: var(--accent-gold-light);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 8px;
}

.biz-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 10px;
}

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

.biz-steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.biz-step-item {
  background: var(--bg-page);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}

.biz-step-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  font-family: var(--font-mono);
}

.biz-step-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin: 2px 0;
}

.biz-step-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.biz-qr-box {
  background: #141416;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.biz-qr-img {
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
}

.biz-wx-label {
  font-size: 13px;
  color: #94A3B8;
  margin-bottom: 12px;
}

.biz-wx-label strong {
  color: #F8FAFC;
}

.btn-copy-wx {
  width: 100%;
  padding: 10px 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s var(--ease-smooth);
}

.btn-copy-wx:hover {
  background: var(--primary-hover);
}

/* 13. 全站页脚 (Site Footer) */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  background: var(--bg-card);
  padding: 40px 0 32px;
}

.footer-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo {
  width: 28px;
  height: 28px;
}

.footer-slogan {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-nav a, .footer-nav button {
  font-size: 13px;
  color: var(--text-secondary);
  transition: color 0.2s var(--ease-smooth);
}

.footer-nav a:hover, .footer-nav button:hover {
  color: var(--primary);
}

.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--bg-page-alt);
  padding-top: 20px;
}

/* 14. Toast 提示框 */
.toast-box {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--ease-spring);
  z-index: 1000;
}

.toast-box.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 15. 响应式适配 */
@media (max-width: 1024px) {
  .hero-section {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 0 32px;
  }
  .hero-title {
    font-size: 40px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .materials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .materials-header-banner, .biz-coop-card {
    grid-template-columns: 1fr;
  }
  .banner-art-wrap {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 32px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .videos-grid {
    grid-template-columns: 1fr;
  }
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .materials-grid {
    grid-template-columns: 1fr;
  }
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .job-columns-grid {
    grid-template-columns: 1fr;
  }
  .footer-top-row, .footer-bottom-row {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}
/* Hero 视频卡片 AE Wiggle 微旋转漂浮动效 */
@keyframes heroWiggleFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(-1.1deg); }
  50% { transform: translateY(3px) rotate(0.8deg); }
  75% { transform: translateY(-3px) rotate(-0.8deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.hero-video-card {
  background: #0D1117;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  animation: heroWiggleFloat 7.5s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.hero-video-card:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}

.hero-video-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.hero-video-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.hero-video-card:hover .hero-video-cover {
  transform: scale(1.04);
}

.hero-play-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.hero-play-badge:hover {
  transform: scale(1.12);
  background: var(--primary);
  border-color: var(--primary);
}

.hero-video-meta {
  padding: 14px 18px 18px;
  background: #0D1117;
}

.hero-video-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}

.hero-video-title {
  font-size: 14px;
  font-weight: 600;
  color: #F1F5F9;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ====================================================
 * 页面切换滑动体系 (Screen Sliding Transitions)
 * ==================================================== */
/* ====================================================
 * 手机桌面级硬件加速视口与连续水平滑轨系统 (Smooth Carousel Slider)
 * 彻底消除闪烁与白屏，提供原生 APP 级平滑左右滑动转场体验
 * ==================================================== */
#app-main, .app-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: calc(100vh - 72px);
  box-sizing: border-box;
}

.views-slider-track {
  display: flex;
  width: 100%;
  align-items: flex-start;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  transform: translate3d(0%, 0, 0);
}

.page-view {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  display: block !important;
  opacity: 0.92;
  transition: opacity 0.35s ease;
  vertical-align: top;
}

.page-view.active {
  opacity: 1;
}

/* 被后台关闭隐藏的板块彻底脱离 flex 布局，其余页面无缝拼接滑动 */
.page-view.view-disabled {
  display: none !important;
}

/* ====================================================
 * 导航滑块系统 (Nav Glider)
 * ==================================================== */
.nav-links {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(241, 245, 249, 0.95);
  padding: 4px;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
}

.nav-glider {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  background: #FF6B00;
  border-radius: 9999px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  box-shadow: 0 2px 10px rgba(255, 107, 0, 0.35);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.nav-links .nav-item {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  padding: 8px 18px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.25s ease;
  color: #64748B;
  text-decoration: none;
}

.nav-links .nav-item:hover {
  color: #0F172A;
}

.nav-links .nav-item.active {
  color: #FFFFFF;
}

/* 社交按钮 */
.social-btn-pill#header-social-xhs:hover {
  background: rgba(255, 36, 66, 0.08);
  border-color: rgba(255, 36, 66, 0.3);
  color: #FF2442;
}

/* ====================================================
 * 素材页分类药丸与筛选 (Category Pills)
 * ==================================================== */
.materials-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 28px 0;
}

.category-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cat-pill-btn {
  padding: 7px 18px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-pill-btn:hover {
  border-color: #CBD5E1;
  color: #0F172A;
  background: #F8FAFC;
  transform: translateY(-1px);
}

.cat-pill-btn.active {
  background: #FF6B00;
  color: #FFFFFF;
  border-color: #FF6B00;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.32);
}

/* ====================================================
 * 合作品牌区域 (Partners Grid & Cards)
 * ==================================================== */
.partners-section {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid #E2E8F0;
  text-align: center;
}

.partners-title {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.partners-subtitle {
  font-size: 14px;
  color: #64748B;
  margin-bottom: 32px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .partners-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

.partner-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 125px;
}

.partner-card:hover {
  border-color: #FF6B00;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08), 0 2px 8px -2px rgba(255, 107, 0, 0.15);
}

.partner-logo-box {
  width: 100%;
  height: 48px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border: none;
}

.partner-logo-img {
  max-width: 130px;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none; opacity: 1;
  transition: all 0.25s ease;
}

.partner-card:hover .partner-logo-img {
  filter: none; opacity: 1;
  transform: scale(calc(var(--p-scale, 1) * 1.06));
}

.partner-logo-monogram {
  font-size: 15px;
  font-weight: 800;
  color: #FF6B00;
  letter-spacing: -0.02em;
}

.partner-name {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 2px;
}

.partner-gear {
  font-size: 11px;
  color: #94A3B8;
  line-height: 1.3;
}


/* ====================================================
 * Hero 视频卡片 AE Wiggle 微旋转漂浮动效
 * ==================================================== */
@keyframes aeWiggleFloat {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  20% {
    transform: translate3d(-3px, -5px, 0) rotate(-0.7deg);
  }
  40% {
    transform: translate3d(4px, -8px, 0) rotate(0.6deg);
  }
  60% {
    transform: translate3d(2px, -3px, 0) rotate(-0.45deg);
  }
  80% {
    transform: translate3d(-3px, -6px, 0) rotate(0.5deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

.hero-visual-card,
#hero-feature-card {
  animation: aeWiggleFloat 8s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

.hero-visual-card:hover,
#hero-feature-card:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.02);
}

/* Additional styles for full layout & component fidelity */
.hero-left {
  flex: 1;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.hero-video-anchor {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.visual-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-video-anchor:hover .visual-img {
  transform: scale(1.03);
}

.play-overlay-btn {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(11, 15, 25, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.hero-video-anchor:hover .play-overlay-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--primary);
  border-color: #FFFFFF;
}

.video-quality-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--primary);
  font-weight: 800;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 107, 0, 0.3);
  letter-spacing: 0.05em;
}

.visual-card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 16px;
  background: linear-gradient(180deg, rgba(11, 15, 25, 0) 0%, rgba(11, 15, 25, 0.95) 85%);
  color: #FFFFFF;
  pointer-events: none;
}

.visual-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.visual-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-num-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.stat-num {
  font-size: 34px;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}

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

.tab-btn {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-btn:hover {
  border-color: var(--text-main);
  color: var(--text-main);
}

.tab-btn.active {
  background: var(--text-main);
  color: #FFFFFF;
  border-color: var(--text-main);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.video-card-anchor {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.video-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0B0F19;
}

.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-card:hover .video-thumb-img {
  transform: scale(1.04);
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11, 15, 25, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-card:hover .video-play-overlay {
  opacity: 1;
  transform: scale(1);
  background: var(--primary);
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(11, 15, 25, 0.8);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-feature-settings: 'tnum';
}

.video-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.video-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  margin-top: auto;
}

.banner-content {
  max-width: 620px;
  z-index: 2;
}

.banner-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: rgba(255, 107, 0, 0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.banner-svg-art {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.search-input-box {
  position: relative;
  min-width: 260px;
}

.search-input-box input {
  width: 100%;
  padding: 9px 16px 9px 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 13px;
  color: var(--text-main);
  outline: none;
  transition: all 0.2s ease;
}

.search-input-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

.search-input-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.mat-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0B0F19;
}

.mat-badge-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(11, 15, 25, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.mat-badge-size {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(11, 15, 25, 0.8);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-feature-settings: 'tnum';
}

.mat-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mat-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}

.mat-ep-tag {
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.mat-pwd-tag {
  background: var(--primary-light);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mat-pwd-tag:hover {
  background: var(--primary);
  color: #FFFFFF;
}

.mat-action-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.empty-state-box {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

.join-hero-wrap {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.join-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.job-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.job-salary {
  font-size: 14px;
  font-weight: 700;
  color: #D97706;
}

.job-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.6;
}

.job-reqs-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.job-reqs {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.job-reqs li {
  font-size: 13px;
  color: var(--text-main);
  position: relative;
  padding-left: 14px;
  line-height: 1.5;
}

.job-reqs li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
}

.job-action-row {
  display: flex;
  justify-content: flex-end;
}

.team-avatar-box {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
  border: 2px solid var(--border-color);
}

.team-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.team-works {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 6px 10px;
  border-radius: 6px;
  width: 100%;
}

.step-num {
  font-size: 11px;
  font-weight: 800;
  color: #FF6B00;
  margin-bottom: 4px;
}

.step-name {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.step-sub {
  font-size: 11px;
  color: #94A3B8;
  line-height: 1.4;
}


/* ====================================================
 * 手机和平板端移动端全新 APP 级显示系统
 * (仅在 <= 1024px 与 <= 768px 生效，完全不影响电脑端显示)
 * ==================================================== */

/* 移动端汉堡切换按钮 (PC 端默认隐藏) */
.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
  z-index: 101;
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
  transition: all 0.25s ease;
}

.mobile-menu-toggle.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 移动端全屏/下拉抽屉菜单 */
.mobile-nav-drawer {
  display: none;
}

@media (max-width: 900px) {
  /* 隐藏 PC 端横排导航条与冗长的社媒胶囊按钮，腾出清爽顶部空间 */
  #main-nav-links {
    display: none !important;
  }
  .header-actions .social-btn-pill {
    display: none !important;
  }
  .mobile-menu-toggle {
    display: flex !important;
  }

  /* 移动端下拉抽屉 (z-index 提高到 9999 避免被主体元素遮挡，并且未打开时 display: none) */
  .mobile-nav-drawer {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-nav-drawer.open {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-nav-inner {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-15px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .mobile-nav-drawer.open .mobile-nav-inner {
    transform: translateY(0);
  }

  .mobile-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #1E293B;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mobile-nav-item:hover, .mobile-nav-item.active {
    background: #FFF7ED;
    border-color: #FF6B00;
    color: #EA580C;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.08);
  }

  .mobile-nav-icon {
    font-size: 18px;
  }

  .mobile-social-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #E2E8F0;
  }

  .mobile-social-title {
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
  }

  .mobile-social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .m-social-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
  }

  .m-social-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .m-social-dot.b { background: #00A1D6; }
  .m-social-dot.d { background: #000000; }
  .m-social-dot.x { background: #FF2442; }
  .m-social-dot.e { background: #EA580C; }

  /* 移动端 Hero 区域紧凑化 */
  .hero-section {
    padding: 24px 0 20px !important;
    gap: 20px !important;
  }
  .hero-title {
    font-size: 30px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
  }
  .hero-tag-pill {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
  .hero-desc {
    font-size: 14px !important;
    margin-bottom: 18px !important;
  }
  .hero-actions {
    display: flex;
    gap: 10px !important;
  }
  .btn-hero-primary, .btn-hero-secondary {
    padding: 10px 18px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* 移动端 4 大统计数据改为 APP 式 2x2 宫格，高内聚美观 */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 20px 0 !important;
  }
  .stat-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .stat-num-row .stat-num {
    font-size: 26px !important;
  }
  .stat-card .stat-label {
    font-size: 12.5px !important;
  }
  .stat-card .stat-sub {
    font-size: 10.5px !important;
  }

  /* 移动端视频网格单列沉浸式卡片 */
  .video-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 移动端合作品牌 2 列紧凑流式展示 */
  .partners-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .partner-card {
    padding: 12px 10px !important;
    min-height: 100px !important;
    height: 100px !important;
  }
  .partner-logo-box {
    height: 38px !important;
    overflow: hidden !important;
  }
  .partner-logo-img {
    max-width: 100px !important;
    max-height: 30px !important;
    /* 窄屏下限制缩放上限，避免放大的 LOGO 溢出卡片 */
    transform: scale(min(var(--p-scale, 1), 1)) !important;
  }

  /* 素材分享页面移动端筛选器横向滑动条 (符合移动端 App 交互体验) */
  .category-pills-wrap {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-pills-wrap::-webkit-scrollbar {
    display: none;
  }
  .materials-filter-bar {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .search-input-box {
    width: 100% !important;
  }
  .materials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 关于我们与加入我们移动端卡片紧凑排版 */
  .about-manifesto-card {
    padding: 20px 16px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .biz-coop-card {
    padding: 20px 16px !important;
    gap: 20px !important;
  }
}


/* 品牌标志文字图片样式 (精确呈现官方设计字型，删去STUDIO) */
.brand-logo-text-img {
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}

.brand-wrap:hover .brand-logo-text-img {
  transform: scale(1.02);
}

@media (max-width: 640px) {
  .brand-logo-text-img {
    height: 24px;
    max-width: 120px;
  }
}


/* 素材 Banner 右侧插画容器自适应呼吸漂浮动效 */
.banner-art-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  will-change: transform;
  animation: artWrapGentleFloat 10s ease-in-out infinite;
}

@keyframes artWrapGentleFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-8px) rotate(0.6deg);
  }
  66% {
    transform: translateY(4px) rotate(-0.5deg);
  }
}


/* 导航栏完整官方设计 LOGO 图片 (图形与文字浑然一体、比例完美) */
.brand-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  text-decoration: none;
}

.brand-full-logo-img {
  height: 35px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.brand-wrap:hover .brand-full-logo-img {
  transform: scale(1.02);
  opacity: 0.95;
}


/* ====================================================
 * 首页底部合作伙伴：纯 LOGO 极简展示与缩放控制器
 * ==================================================== */

.partners-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* LOGO 大小缩放调节控件 */
.partner-scale-ctrl-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 30px;
  padding: 6px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  user-select: none;
}

.scale-ctrl-icon {
  font-size: 14px;
}

.scale-ctrl-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
}

.btn-scale-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.btn-scale-step:hover {
  background: #FF6B00;
  border-color: #FF6B00;
  color: #FFFFFF;
}

#partner-scale-slider {
  width: 90px;
  height: 4px;
  accent-color: #FF6B00;
  cursor: pointer;
}

.scale-val-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #FF6B00;
  background: #FFF7ED;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 42px;
  text-align: center;
}

.btn-scale-reset {
  background: transparent;
  border: none;
  font-size: 11.5px;
  color: #94A3B8;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}

.btn-scale-reset:hover {
  background: #F1F5F9;
  color: #334155;
}

/* 纯 LOGO 卡片：去掉冗余文字，只留居中LOGO */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.partner-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 86px;
  box-sizing: border-box;
  /* 外框尺寸恒定：无论 LOGO 缩放多少，卡片本身绝不改变大小 */
  height: 86px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.partner-card:hover {
  border-color: #FF6B00;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08), 0 2px 8px -2px rgba(255, 107, 0, 0.15);
}

.partner-logo-box {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  margin: 0;
  /* 内框高度也恒定，缩放后的 LOGO 不会撑高它 */
  overflow: hidden;
}

.partner-logo-img {
  max-width: 130px;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none; opacity: 1;
  transition: transform 0.25s ease;
  /* --p-scale 由 JS 按后台设置注入；未设置时默认 1 */
  transform-origin: center center;
  transform: scale(var(--p-scale, 1));
  will-change: transform;
}

.partner-card:hover .partner-logo-img {
  filter: none; opacity: 1;
  /* 在后台设定的缩放基础上再放大 6%，两者叠加而非互相覆盖 */
  transform: scale(calc(var(--p-scale, 1) * 1.06));
}

@media (max-width: 1200px) {
  .partners-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .partners-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  .partners-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .partner-scale-ctrl-wrap {
    width: 100%;
    justify-content: space-between;
  }
  #partner-scale-slider {
    flex: 1;
  }
}

@media (max-width: 600px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}


/* 合作伙伴标题与副标题完全居中排版 */
.partners-header-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: 28px !important;
  width: 100% !important;
}

.partners-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.partners-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 680px !important;
}

/* 彻底去除品牌LOGO上的灰度滤镜，保持原汁原味的鲜明色彩与清晰度 */
.partner-logo-img {
  filter: none !important;
  opacity: 1 !important;
  -webkit-filter: none !important;
}

.partner-card:hover .partner-logo-img {
  filter: none !important;
  opacity: 1 !important;
  /* 与后台设定的 --p-scale 叠加，不要用固定值覆盖 */
  transform: scale(calc(var(--p-scale, 1) * 1.06));
}


/* ====================================================
 * 「加入我们 (Join Us)」整页全新高颜值现代化美学设计
 * ==================================================== */

/* Join Hero 视觉横幅 (双栏层次与光影) */
.join-hero-banner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 24px;
  padding: 48px 52px;
  color: #FFFFFF;
  margin-top: 16px;
  margin-bottom: 48px;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.35);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.join-hero-banner::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.25) 0%, rgba(255, 107, 0, 0) 70%);
  pointer-events: none;
}

.join-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12.5px;
  font-weight: 700;
  color: #FFB020;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.join-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6B00;
  box-shadow: 0 0 10px #FF6B00;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

.join-hero-title {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 18px;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.join-hero-title .highlight-orange {
  color: #FF6B00;
  background: linear-gradient(135deg, #FF9E2C 0%, #FF5500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.join-hero-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #94A3B8;
  margin-bottom: 30px;
  max-width: 520px;
}

.join-quick-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.j-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.j-stat-num {
  font-size: 20px;
  font-weight: 900;
  color: #FFFFFF;
}

.j-stat-label {
  font-size: 11.5px;
  color: #94A3B8;
}

.j-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.15);
}

/* 右侧赋能卡片 (Perks Card) */
.join-perks-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.perks-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  padding-bottom: 12px;
}

.perk-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.perk-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 107, 0, 0.15);
  border: 1px solid rgba(255, 107, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.perk-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.perk-text strong {
  font-size: 14px;
  color: #F8FAFC;
  font-weight: 700;
}

.perk-text span {
  font-size: 12.5px;
  color: #94A3B8;
  line-height: 1.5;
}

/* 岗位筛选头部栏 */
.join-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 20px;
  flex-wrap: wrap;
}

.join-sub-heading {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 4px;
}

.join-sub-p {
  font-size: 13.5px;
  color: #64748B;
}

.join-type-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 30px;
}

.j-filter-btn {
  background: transparent;
  border: none;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.j-filter-btn:hover {
  color: #0F172A;
}

.j-filter-btn.active {
  background: #FFFFFF;
  color: #0F172A;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 现代化岗位卡片列表 */
.jobs-list-modern {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
}

.job-card-modern {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.job-card-modern:hover {
  border-color: #FF6B00;
  box-shadow: 0 16px 32px -4px rgba(255, 107, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.job-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.job-badges-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.job-group-pill {
  font-size: 12px;
  font-weight: 700;
  color: #FF6B00;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 3px 10px;
  border-radius: 20px;
}

.job-loc-pill {
  font-size: 12px;
  color: #64748B;
  background: #F8FAFC;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #F1F5F9;
}

.job-title-modern {
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.job-salary-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: #FFFBEB;
  border: 1px solid #FEF3C7;
  padding: 8px 16px;
  border-radius: 12px;
}

.salary-label {
  font-size: 11px;
  color: #92400E;
  font-weight: 600;
}

.salary-val {
  font-size: 14px;
  font-weight: 800;
  color: #B45309;
}

/* 职责与要求清晰左右分栏 */
.job-card-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.job-spec-box {
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 14px;
  padding: 18px 20px;
}

.job-spec-box.highlight {
  background: #FAFAFA;
}

.job-spec-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 10px;
}

.job-spec-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #475569;
  line-height: 1.7;
}

.job-spec-list li {
  margin-bottom: 4px;
}

.job-card-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
  gap: 16px;
  flex-wrap: wrap;
}

.job-tip-text {
  font-size: 12.5px;
  color: #94A3B8;
}

.btn-job-apply-primary {
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.btn-job-apply-primary:hover {
  background: #FF6B00;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.3);
}

/* 底部自荐与投递卡片 */
.join-bottom-cta {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 36px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.cta-left h3 {
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
}

.cta-left p {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.6;
}

.btn-cta-email {
  background: #FF6B00;
  color: #FFFFFF;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.25);
}

.btn-cta-email:hover {
  background: #EA580C;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(234, 88, 12, 0.35);
}

@media (max-width: 900px) {
  .join-hero-banner {
    grid-template-columns: 1fr !important;
    padding: 28px 20px !important;
    gap: 24px !important;
  }
  .join-hero-title {
    font-size: 28px !important;
  }
  .job-card-content-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .join-bottom-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px !important;
  }
}


/* 彻底消除所有 AIGC 水印与 AI 生成浮标 */
[data-aigc-mark],
p[data-aigc-mark="1"],
p[data-aigc-mark],
.aigc-watermark,
.ai-generated-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* 极简素雅视频卡片元数据样式 (纯描边爱心 + 纯文本日期) */
.video-meta-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #64748B !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.heart-icon-stroke {
  color: #94A3B8 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.video-card:hover .heart-icon-stroke {
  color: #EF4444 !important;
  transform: scale(1.15) !important;
}

.video-meta-date {
  color: #94A3B8 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}


/* ====================================================
 * 「关于我们 (About Us)」电影级影像厂牌美学系统
 * (彻底重构：删除多余时间轴与旧卡片，主创阵容+商业定制双核驱动)
 * ==================================================== */

/* 1. 顶部电影级品牌标头 (Cinematic Hero Header) */
.about-cinema-hero {
  padding: 40px 0 36px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 36px;
  position: relative;
}

.about-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 5px 14px;
  border-radius: 30px;
  font-size: 11.5px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.cinema-rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  animation: cinemaPulse 1.8s infinite;
}

@keyframes cinemaPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

.about-cinema-title {
  font-size: 38px;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  line-height: 1.25;
}

.about-cinema-subtitle {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.7;
}

/* 2. 板块通用头部 */
.about-section-container {
  margin-bottom: 56px;
}

.about-section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 16px;
}

.section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-badge-pill {
  font-size: 11px;
  font-weight: 800;
  color: #FF6B00;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.about-modern-title {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.section-sub-desc {
  font-size: 13.5px;
  color: #64748B;
}

/* 3. 主创团队网格与现代化卡片 (Team Grid Modern) */
.team-grid-modern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.team-card-modern {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 24px 20px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.team-card-modern:hover {
  border-color: #FF6B00;
  box-shadow: 0 16px 32px -4px rgba(255, 107, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
  transform: translateY(-3px);
}

.team-card-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.team-avatar-ring {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #FF9E2C, #FF5500);
  flex-shrink: 0;
}

.team-avatar-pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  display: block;
}

.team-meta-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.team-member-name {
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
}

.team-member-role {
  font-size: 12px;
  font-weight: 700;
  color: #EA580C;
}

.team-member-major {
  font-size: 11px;
  color: #94A3B8;
}

/* 金句卡片气泡 */
.team-quote-bubble {
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.6;
  font-style: italic;
  display: flex;
  gap: 4px;
}

.quote-mark {
  color: #FF6B00;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.quote-content {
  margin: 0;
  flex: 1;
}

.team-card-bottom-works {
  font-size: 11.5px;
  color: #64748B;
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px dashed #F1F5F9;
}

.works-label {
  font-weight: 700;
  color: #0F172A;
  margin-right: 4px;
}

.works-content {
  color: #475569;
}

/* 4. 商业合作与品牌定制全新双栏横幅 (Commercial Partnership Banner) */
.biz-partnership-banner {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 44px;
  align-items: center;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 44px 48px;
  box-shadow: 0 12px 30px -5px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
}

.biz-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: #D97706;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.biz-main-title {
  font-size: 28px;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.biz-main-desc {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 580px;
}

/* 3步合作流程网格 */
.biz-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.biz-flow-step {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.biz-flow-step:hover {
  border-color: #FF6B00;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.08);
}

.step-badge-num {
  font-size: 13px;
  font-weight: 900;
  color: #FF6B00;
  background: #FFF7ED;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-title-text {
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
}

.step-sub-text {
  font-size: 11px;
  color: #94A3B8;
  line-height: 1.4;
}

/* 右侧对接微信卡片 (Connect Card) */
.biz-connect-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.connect-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.connect-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #0F172A;
}

.connect-status-live {
  font-size: 10.5px;
  font-weight: 700;
  color: #10B981;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 2px 7px;
  border-radius: 20px;
}

.connect-qr-wrap {
  width: 148px;
  height: 148px;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.connect-qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.connect-info-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wx-id-label {
  font-size: 10.5px;
  color: #94A3B8;
  text-transform: uppercase;
}

.wx-id-value {
  font-size: 16px;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: 0.5px;
}

.btn-connect-action {
  width: 100%;
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.btn-connect-action:hover {
  background: #FF6B00;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.3);
}

/* 5. 响应式布局优化 */
@media (max-width: 1100px) {
  .team-grid-modern {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .biz-partnership-banner {
    grid-template-columns: 1fr !important;
    padding: 32px 24px !important;
    gap: 28px !important;
  }
}

@media (max-width: 640px) {
  .about-cinema-title {
    font-size: 28px !important;
  }
  .team-grid-modern {
    grid-template-columns: 1fr !important;
  }
  .biz-flow-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}


/* ====================================================
 * 关于我们一屏完整呈现专属排版优化 (无需往下滑动即可通览全部)
 * ==================================================== */

/* 顶部精简标头 */
#view-about {
  padding-top: 10px !important;
}

.about-cinema-hero {
  padding: 12px 0 16px !important;
  margin: 0 auto 16px !important;
  text-align: center !important;
}

.about-cinema-title {
  font-size: 28px !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
}

.about-cinema-subtitle {
  font-size: 13px !important;
  color: #64748B !important;
  line-height: 1.5 !important;
}

/* 板块间距紧凑化 */
.about-section-container {
  margin-bottom: 20px !important;
}

.about-section-header {
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}

.about-modern-title {
  font-size: 18px !important;
  font-weight: 800 !important;
}

.section-sub-desc {
  font-size: 12px !important;
  color: #94A3B8 !important;
}

/* 主创卡片紧凑轻巧化 */
.team-grid-modern {
  gap: 14px !important;
}

.team-card-modern {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  gap: 10px !important;
}

.team-card-top-row {
  gap: 10px !important;
}

.team-avatar-ring {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

.team-member-name {
  font-size: 14.5px !important;
}

.team-member-role {
  font-size: 11px !important;
}

.team-member-major {
  font-size: 10.5px !important;
}

.team-quote-bubble {
  padding: 8px 10px !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  border-radius: 8px !important;
}

.quote-mark {
  font-size: 14px !important;
}

.team-card-bottom-works {
  font-size: 11px !important;
  padding-top: 6px !important;
}

/* 商业合作与品牌定制横幅紧凑排版 */
.biz-partnership-banner {
  padding: 20px 28px !important;
  border-radius: 18px !important;
  gap: 28px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.biz-eyebrow {
  margin-bottom: 6px !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
}

.biz-main-title {
  font-size: 20px !important;
  margin-bottom: 6px !important;
}

.biz-main-desc {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}

.biz-flow-grid {
  gap: 10px !important;
}

.biz-flow-step {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  gap: 8px !important;
}

.step-badge-num {
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
}

.step-title-text {
  font-size: 12.5px !important;
}

.step-sub-text {
  font-size: 10px !important;
}

/* 右侧微信二维码对接卡片紧凑化 */
.biz-connect-card {
  padding: 14px 18px !important;
  border-radius: 14px !important;
  gap: 8px !important;
}

.connect-card-title {
  font-size: 13px !important;
}

.connect-status-live {
  font-size: 10px !important;
  padding: 1px 6px !important;
}

.connect-qr-wrap {
  width: 96px !important;
  height: 96px !important;
  padding: 4px !important;
  border-radius: 10px !important;
}

.wx-id-label {
  font-size: 9.5px !important;
}

.wx-id-value {
  font-size: 14px !important;
}

.btn-connect-action {
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
}


/* ====================================================
 * 视口高度贴合与空白彻底消除规则 (Seamless Footer Docking)
 * 彻底消除各板块切换后的多余空白滚动距离，内容一结束立即紧密接驳页脚
 * ==================================================== */

/* ====================================================
 * 现代弹性吸底系统 (Flexbox Sticky Footer)
 * 1. 当页面内容较少时(如关于我们)，主体自然向下伸展，将页脚平稳推至屏幕最底端，绝不悬浮在半空；
 * 2. 当内容较多时(如首页/素材)，正常随内容延伸，无多余中间大空白；
 * 3. 切换页面时高度平滑过渡，零颠簸、零突兀。
 * ==================================================== */

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ====================================================
 * 优雅自然贴底系统 (Natural Content Footer Docking)
 * 1. 视口高度严格绑定活动板块，彻底消除任何非活动页面的溢出空白；
 * 2. 页面在视口内居底自然呈现，不悬浮居中，滚动体验流畅无断层。
 * ==================================================== */

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#app-main, .app-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.views-slider-track {
  display: flex;
  width: 100%;
  align-items: flex-start;
}

.page-view {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.page-view.view-disabled {
  display: none !important;
}

.site-footer {
  flex-shrink: 0;
  margin-top: 0 !important;
  padding: 36px 0 24px !important;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

@media (max-width: 640px) {
  .site-footer {
    margin-top: 24px !important;
    padding: 32px 0 20px !important;
  }
}


/* ====================================================
 * 首页 Hero 区域与关键数据卡片视觉放大 (Bold & Impactful)
 * ==================================================== */

.hero-section {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  align-items: center !important;
  gap: 48px !important;
  padding: 56px 0 44px !important;
}

/* 平板与竖屏：Hero 必须塌缩为单列，否则右栏会被压成几十像素、按钮文字被迫换行 */
@media (max-width: 1024px) {
  .hero-section {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 0 32px !important;
  }
}

@media (max-width: 640px) {
  .hero-section {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 0 20px !important;
  }
}

/* 顶部小标语 */
.hero-tag-pill {
  font-size: 14.5px !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 22px !important;
}

.hero-tag-pill .tag-dot {
  width: 9px !important;
  height: 9px !important;
}

/* 主标语标题字号显著放大 */
.hero-title {
  font-size: 64px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 24px !important;
}

/* 描述文字放大 */
.hero-desc {
  font-size: 18px !important;
  line-height: 1.75 !important;
  max-width: 580px !important;
  margin-bottom: 38px !important;
  color: #475569 !important;
}

/* 交互行动按钮放大 */
.btn-hero-primary {
  font-size: 16.5px !important;
  padding: 15px 34px !important;
  border-radius: 30px !important;
  gap: 10px !important;
}

.btn-hero-secondary {
  font-size: 16.5px !important;
  padding: 15px 32px !important;
  border-radius: 30px !important;
  gap: 10px !important;
}

/* 右侧置顶视频大卡片视觉放大 */
.hero-visual-card,
#hero-feature-card {
  border-radius: 20px !important;
  box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.16) !important;
}

.visual-card-footer {
  padding: 20px 22px !important;
}

.visual-card-title,
#hero-video-title {
  font-size: 16.5px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

.visual-tag,
#hero-video-badge {
  font-size: 12.5px !important;
  padding: 4px 10px !important;
  margin-bottom: 8px !important;
}

/* 4大关键数据卡片视觉放大 */
.stats-grid {
  gap: 24px !important;
  margin: 36px 0 68px !important;
}

.stat-card {
  padding: 28px 32px !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05) !important;
}

.stat-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 32px -4px rgba(255, 107, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.stat-num-row .stat-num {
  font-size: 46px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

.stat-num-row .stat-unit {
  font-size: 24px !important;
  font-weight: 800 !important;
  margin-left: 3px !important;
}

.stat-card .stat-label {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-top: 10px !important;
  color: #0F172A !important;
}

.stat-card .stat-sub {
  font-size: 13px !important;
  margin-top: 5px !important;
  color: #64748B !important;
}

@media (max-width: 1024px) {
  .hero-title {
    font-size: 46px !important;
  }
  .stat-num-row .stat-num {
    font-size: 36px !important;
  }
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 34px !important;
  }
  .hero-desc {
    font-size: 15px !important;
  }
  .stat-num-row .stat-num {
    font-size: 30px !important;
  }
}


/* ====================================================
 * 顶部导航栏高度与舒适排版 (Header Comfort Restoration)
 * ==================================================== */
header.site-header, .site-header {
  height: 72px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
}

.header-inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.brand-wrap {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.brand-full-logo-img {
  height: 38px !important;
  width: auto !important;
  max-width: 195px !important;
  object-fit: contain !important;
}

/* 竖屏 / 平板：LOGO 随屏收窄，避免在窄屏占掉半个导航栏 */
@media (max-width: 1024px) {
  .brand-full-logo-img {
    height: 31px !important;
    max-width: 158px !important;
  }
}

@media (max-width: 640px) {
  .brand-full-logo-img {
    height: 26px !important;
    max-width: 128px !important;
  }
}

@media (max-width: 400px) {
  .brand-full-logo-img {
    height: 23px !important;
    max-width: 114px !important;
  }
}

.nav-links {
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.social-btn-pill {
  height: 36px !important;
}

.social-btn-icon {
  width: 36px !important;
  height: 36px !important;
}


/* ====================================================
 * 底部栏标准自然沉底系统 (Normal Bottom Docking)
 * 1. 底部栏永远稳定在整个显示界面的最底端（随页面自然流式排版）；
 * 2. 绝不跟随内容出现突然大幅度抬升或弹跳，视觉体验稳定、平静、自然；
 * 3. 当内容短时（如关于我们），由弹性容器自然撑开使 footer 贴合视口底端，无需任何滚动。
 * ==================================================== */

html {
  height: 100% !important;
}

body {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

#app-main, .app-viewport {
  flex: 1 0 auto !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  height: auto !important;
  max-height: none !important;
  transition: none !important;
}

.views-slider-track {
  display: flex !important;
  width: 100% !important;
  align-items: flex-start !important;
}

.page-view {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

.page-view.view-disabled {
  display: none !important;
}

/* 底部栏规整常驻在页面底端 */
footer.site-footer, .site-footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  padding: 32px 0 24px !important;
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-color) !important;
  width: 100% !important;
}


/* ====================================================
 * 视频筛选器工具栏与 FLIP 一镜到底动画样式
 * ==================================================== */

.video-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 时间排序按钮组 */
.video-sort-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--bg-page-alt);
  padding: 3px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
}

.btn-time-sort {
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-time-sort:hover {
  color: var(--text-main);
}

.btn-time-sort.active {
  background: var(--bg-card);
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 视频卡片平滑位移过渡保护 */
.video-card {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@media (max-width: 900px) {
  .video-toolbar-right {
    width: 100%;
    justify-content: space-between;
    margin-top: 12px;
  }
}


/* ==========================================================================
 * 动效系统 v1 (Motion System)
 * ---------------------------------------------------------------------------
 * 设计原则：
 *   1. 只对 transform / opacity 做动画，强制走 GPU 合成层，避免重排重绘
 *   2. 所有动画均由一个统一的 IntersectionObserver 驱动，零 scroll 监听抖动
 *   3. 完整尊重 prefers-reduced-motion，眩晕敏感用户自动静态降级
 *   4. 移动端 / 触屏设备自动关闭 3D 倾斜、磁吸与光标跟随类效果
 * ========================================================================== */

:root {
  /* 动效时长阶梯 */
  --mo-dur-instant: 0.14s;
  --mo-dur-fast: 0.22s;
  --mo-dur-base: 0.42s;
  --mo-dur-slow: 0.68s;
  --mo-dur-lazy: 0.9s;

  /* 入场位移动量 */
  --mo-rise-sm: 14px;
  --mo-rise: 24px;
  --mo-rise-lg: 36px;

  /* 弹性缓动：起手快、收尾极缓，最接近「物理停下来」的手感 */
  --mo-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mo-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --mo-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 错峰步长 */
  --mo-stagger: 70ms;
}

/* --------------------------------------------------------------------------
 * 1. 滚动入场系统 (Scroll Reveal)
 * -------------------------------------------------------------------------- */

.mo-reveal {
  opacity: 0;
  transform: translate3d(0, var(--mo-rise), 0);
  transition:
    opacity var(--mo-dur-slow) var(--mo-ease-out),
    transform var(--mo-dur-slow) var(--mo-ease-out);
  transition-delay: var(--mo-delay, 0ms);
  will-change: opacity, transform;
}

.mo-reveal.mo-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 动效执行完毕后释放合成层，避免长列表长期占用显存 */
.mo-reveal.mo-done {
  will-change: auto;
}

/* 入场方向变体 */
.mo-reveal-left {
  transform: translate3d(calc(-1 * var(--mo-rise-lg)), 0, 0);
}
.mo-reveal-right {
  transform: translate3d(var(--mo-rise-lg), 0, 0);
}
.mo-reveal-scale {
  transform: translate3d(0, var(--mo-rise-sm), 0) scale(0.965);
}
.mo-reveal-blur {
  filter: blur(6px);
  transition:
    opacity var(--mo-dur-slow) var(--mo-ease-out),
    transform var(--mo-dur-slow) var(--mo-ease-out),
    filter var(--mo-dur-slow) var(--mo-ease-out);
  transition-delay: var(--mo-delay, 0ms);
}
.mo-reveal-left.mo-in,
.mo-reveal-right.mo-in,
.mo-reveal-scale.mo-in,
.mo-reveal-blur.mo-in {
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* --------------------------------------------------------------------------
 * 2. 数字滚动计数 (Number Rolling)
 * -------------------------------------------------------------------------- */

.stat-num-row .stat-num.mo-counting {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 数字下方的进度线：从左向右生长，与计数同步 */
.stat-card .mo-count-bar {
  position: relative;
  height: 2px;
  margin-top: 14px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.stat-card .mo-count-bar::after {
  content: "";
  position: absolute;
  inset: 0 100% 0 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent-gold));
  transition: right 1.05s var(--mo-ease-out);
}

.stat-card.mo-in .mo-count-bar::after {
  right: 0;
}

/* --------------------------------------------------------------------------
 * 3. 卡片光标聚光灯与 3D 倾斜 (Spotlight + Tilt)
 * -------------------------------------------------------------------------- */

.mo-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform var(--mo-dur-base) var(--mo-ease-out),
    box-shadow var(--mo-dur-base) var(--mo-ease-out),
    border-color var(--mo-dur-fast) ease;
}

/* 真正做倾斜的是内层包裹，避免和外层 hover 的 translateY 打架 */
.mo-tilt.mo-tilting {
  transform: none !important;
  box-shadow:
    0 18px 40px -8px rgba(15, 23, 42, 0.16),
    0 6px 16px -4px rgba(255, 107, 0, 0.16) !important;
}

.mo-tilt-inner {
  transform:
    perspective(1000px)
    rotateX(var(--mo-rx, 0deg))
    rotateY(var(--mo-ry, 0deg))
    translate3d(0, 0, var(--mo-tz, 0px));
  transition: transform var(--mo-dur-base) var(--mo-ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

/* 跟随光标的高光层 */
.mo-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mo-dur-base) ease;
  background: radial-gradient(
    240px circle at var(--mo-mx, 50%) var(--mo-my, 50%),
    rgba(255, 107, 0, 0.14),
    rgba(255, 180, 90, 0.06) 40%,
    transparent 68%
  );
  z-index: 3;
}

.mo-spot.mo-spot-on::before {
  opacity: 1;
}

/* 封面缓慢推近 */
.mo-zoom-media {
  transition: transform var(--mo-dur-lazy) var(--mo-ease-out);
  will-change: transform;
}

.mo-tilt.mo-tilting .mo-zoom-media,
.mo-zoom-host:hover .mo-zoom-media {
  transform: scale(1.055);
}

/* --------------------------------------------------------------------------
 * 4. 按钮磁吸与点击涟漪 (Magnetic + Ripple)
 * -------------------------------------------------------------------------- */

.mo-magnetic {
  position: relative;
  transform: translate3d(var(--mo-mg-x, 0px), var(--mo-mg-y, 0px), 0);
  transition: transform var(--mo-dur-base) var(--mo-ease-spring);
  will-change: transform;
}

.mo-magnetic.mo-mg-off {
  transition: transform var(--mo-dur-slow) var(--mo-ease-back);
}

.mo-ripple-host {
  position: relative;
  overflow: hidden;
}

.mo-ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 4;
  animation: moRippleGrow 0.62s var(--mo-ease-out) forwards;
}

.mo-ripple.mo-ripple-dark {
  background: radial-gradient(circle, rgba(255, 107, 0, 0.26), rgba(255, 107, 0, 0));
}

@keyframes moRippleGrow {
  from { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* 按下时的物理回弹 */
.mo-pressable {
  transition:
    transform var(--mo-dur-instant) ease,
    box-shadow var(--mo-dur-fast) ease;
}

.mo-pressable.mo-pressed {
  transform: scale(0.965) !important;
}

/* --------------------------------------------------------------------------
 * 5. 导航胶囊幽灵预告与点击扩散波 (Nav Glider Preview + Shockwave)
 * -------------------------------------------------------------------------- */

.nav-glider-ghost {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 9999px;
  background: rgba(255, 107, 0, 0.16);
  border: 1px dashed rgba(255, 107, 0, 0.42);
  box-sizing: border-box;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition:
    transform var(--mo-dur-base) var(--mo-ease-spring),
    width var(--mo-dur-base) var(--mo-ease-spring),
    top var(--mo-dur-base) var(--mo-ease-spring),
    height var(--mo-dur-base) var(--mo-ease-spring),
    opacity var(--mo-dur-fast) ease;
}

.nav-glider-ghost.mo-ghost-on {
  opacity: 1;
}

.nav-shockwave {
  position: absolute;
  border-radius: 9999px;
  border: 1.5px solid var(--primary);
  pointer-events: none;
  z-index: 3;
  animation: moShockwave 0.62s var(--mo-ease-out) forwards;
}

@keyframes moShockwave {
  from { transform: scale(0.9); opacity: 0.85; }
  to { transform: scale(1.75); opacity: 0; }
}

/* --------------------------------------------------------------------------
 * 6. 顶部滚动进度条与导航收缩 (Scroll Progress + Header Condense)
 * -------------------------------------------------------------------------- */

.mo-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary), var(--accent-gold));
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

.site-header.mo-condensed {
  box-shadow: 0 4px 22px -6px rgba(15, 23, 42, 0.14) !important;
}

.site-header.mo-condensed .header-inner {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  transition: padding var(--mo-dur-base) var(--mo-ease-out);
}

.site-header .header-inner {
  transition: padding var(--mo-dur-base) var(--mo-ease-out);
}

/* --------------------------------------------------------------------------
 * 7. Hero 视差与光标响应 (Hero Parallax)
 * -------------------------------------------------------------------------- */

.mo-parallax {
  transform: translate3d(var(--mo-px, 0px), var(--mo-py, 0px), 0);
  transition: transform var(--mo-dur-lazy) var(--mo-ease-out);
  will-change: transform;
}

/* --------------------------------------------------------------------------
 * 8. 合作品牌无缝跑马灯 (Partner Marquee)
 * -------------------------------------------------------------------------- */

.mo-marquee {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  /* 两端渐隐遮罩：让卡片在边缘柔和淡出，而不是被硬生生切断。
     遮罩区间按容器收窄后重新调，让淡出更明显、视觉更聚拢。 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 5%, #000 14%, #000 86%, rgba(0, 0, 0, 0.35) 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 5%, #000 14%, #000 86%, rgba(0, 0, 0, 0.35) 95%, transparent 100%);
}

.mo-marquee + .mo-marquee {
  margin-top: 16px;
}

.mo-marquee-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  will-change: transform;
  animation: moMarqueeScroll var(--mo-marquee-duration, 46s) linear infinite;
}

.mo-marquee-reverse .mo-marquee-track {
  animation-direction: reverse;
}

.mo-marquee:hover .mo-marquee-track {
  animation-play-state: paused;
}

@keyframes moMarqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.mo-marquee .partner-card {
  flex: 0 0 auto;
  width: 190px;
}

/* --------------------------------------------------------------------------
 * 9. 分区标题竖条生长与扫光点缀 (Accent Bar + Sweep)
 * -------------------------------------------------------------------------- */

.mo-accent-bar {
  position: relative;
  padding-left: 16px !important;
}

.mo-accent-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent-gold));
  transform: translateY(-50%);
  transition: height var(--mo-dur-slow) var(--mo-ease-back);
  transition-delay: 160ms;
}

.mo-accent-bar.mo-in::before {
  height: 82% !important;
}

/* 细线扫光：用于分区之间的呼吸感 */
.mo-sweep {
  position: relative;
  overflow: hidden;
}

.mo-sweep::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.55), transparent);
  animation: moSweepMove 4.5s var(--mo-ease-out) infinite;
  pointer-events: none;
}

@keyframes moSweepMove {
  0% { left: -60%; opacity: 0; }
  12% { opacity: 1; }
  55% { left: 105%; opacity: 0; }
  100% { left: 105%; opacity: 0; }
}

/* --------------------------------------------------------------------------
 * 10. 切页内容错峰入场 (View Switch Stagger)
 * -------------------------------------------------------------------------- */

/* 切页内容错峰入场 (View Switch Stagger)
 * 注意：顶层区块的 opacity 只由这一条链路控制，避免与 mo-reveal 抢属性造成闪帧 */
.page-view.mo-view-enter > .container > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: moViewEnter var(--mo-dur-slow) var(--mo-ease-out) forwards;
}

/* 滑轨启动前先「上膛」：把动画暂停在起始帧（即 opacity:0），
 * 这样目标页面滑进视野时是空的，不会先亮一下被打回再淡入 */
.page-view.mo-view-armed > .container > * {
  animation-play-state: paused;
}

@keyframes moViewEnter {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --------------------------------------------------------------------------
 * 11. FLIP 封面共享元素增强 (Shared Element Cover)
 * -------------------------------------------------------------------------- */

.video-card .video-thumb-box,
.material-card .mat-cover-wrap {
  overflow: hidden;
}

.video-card.mo-flip-media .video-thumb-img,
.material-card.mo-flip-media .mat-cover-img {
  transition: transform var(--mo-dur-slow) var(--mo-ease-out);
}

/* --------------------------------------------------------------------------
 * 12. 无障碍降级：尊重系统「减少动态效果」设置
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mo-reveal,
  .mo-reveal-left,
  .mo-reveal-right,
  .mo-reveal-scale,
  .mo-reveal-blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .mo-marquee-track {
    animation: none !important;
    transform: none !important;
  }

  .mo-sweep::after,
  .mo-ripple,
  .nav-shockwave {
    animation: none !important;
    display: none !important;
  }

  .page-view.mo-view-enter > .container > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .mo-tilt-inner,
  .mo-parallax,
  .mo-magnetic {
    transform: none !important;
  }

  .stat-card .mo-count-bar::after {
    transition: none !important;
    right: 0 !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
 * 13. 触屏 / 窄屏降级：关闭依赖精细指针的交互
 * -------------------------------------------------------------------------- */

@media (hover: none), (pointer: coarse) {
  .mo-spot::before {
    display: none;
  }

  .mo-magnetic {
    transform: none !important;
  }

  .mo-tilt.mo-tilting {
    box-shadow: none !important;
  }
}

@media (max-width: 900px) {
  .mo-marquee .partner-card {
    width: 148px;
  }

  .mo-marquee-track {
    gap: 12px;
  }

  .page-view.mo-view-enter > .container > * {
    animation-duration: 0.42s;
  }
}


/* ====================================================
 * 竖屏 / 移动端显示修复系统 v1 (Portrait Display Fix)
 * 修复目标：
 *   1. 按钮文字换行 / 溢出 / 显示不全
 *   2. 首页 Hero 双栏在窄屏挤压变形
 *   3. 数据卡片、筛选药丸、社交卡片在窄屏错位
 * 原则：只做约束与收敛，不改动任何业务结构与动效时序。
 * ==================================================== */

/* ---------- 1. 按钮文字完整性：任何按钮都不得换行或超出自身 ---------- */
/* 注：仅针对纯文字按钮，不含卡片式/图标式元素 */
.btn-hero-primary,
.btn-hero-secondary,
.btn-cta-email,
.btn-connect-action,
.btn-job-apply-primary,
.btn-time-sort,
.btn-copy-link,
.tab-btn,
.cat-pill-btn,
.j-filter-btn,
.btn-modal-save,
.btn-modal-cancel,
.btn-submit-primary {
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.2;
}

/* 允许在极端窄屏下收缩，但文字仍不断行 */
@media (max-width: 640px) {
  .btn-hero-primary,
  .btn-hero-secondary,
  .btn-cta-email,
  .btn-connect-action,
  .btn-job-apply-primary {
    max-width: 100%;
    min-width: 0;
  }
}

/* ---------- 2. 网格容器防挤压：子项允许收缩 ---------- */
.hero-section > *,
.stats-grid > *,
.team-grid-modern > *,
.biz-flow-grid > *,
.join-perks-card > *,
.partners-grid > * {
  min-width: 0;
}

/* ---------- 3. 移动端专属收敛 ---------- */
@media (max-width: 900px) {
  /* Hero 左右两栏在窄屏一律纵向堆叠 */
  .hero-section {
    grid-template-columns: 1fr !important;
  }

  /* 移动端不应再出现悬停位移造成的抖动 */
  .btn-hero-primary:hover,
  .btn-hero-secondary:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  /* Hero 按钮组改为等宽纵向排布，避免半宽按钮把文字挤到换行 */
  .hero-actions,
  .hero-cta-row,
  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero-actions .btn-hero-primary,
  .hero-actions .btn-hero-secondary,
  .hero-cta-row .btn-hero-primary,
  .hero-cta-row .btn-hero-secondary,
  .hero-buttons .btn-hero-primary,
  .hero-buttons .btn-hero-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* 数字卡片：2x2 宫格下统一字号，防止长数字撑破卡片 */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stat-num-row .stat-num {
    font-size: 28px !important;
  }

  .stat-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .stat-card .stat-label,
  .stat-card .stat-sub {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 分类药丸：横向滚动，避免换行错乱 */
  .cat-pill-row,
  #materials-category-pills,
  #video-filter-tabs,
  #jobs-type-filters,
  #video-sort-controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .cat-pill-row::-webkit-scrollbar,
  #materials-category-pills::-webkit-scrollbar,
  #video-filter-tabs::-webkit-scrollbar,
  #jobs-type-filters::-webkit-scrollbar,
  #video-sort-controls::-webkit-scrollbar {
    display: none;
  }

  .cat-pill-btn,
  .tab-btn,
  .j-filter-btn,
  .btn-time-sort {
    flex: 0 0 auto !important;
  }

  /* 素材/视频列表在窄屏单列 */
  .materials-grid,
  .videos-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 400px) {
  /* 极窄屏进一步压缩字号，保证一行放得下 */
  .btn-hero-primary,
  .btn-hero-secondary {
    font-size: 14.5px !important;
    padding: 13px 16px !important;
  }

  .stat-num-row .stat-num {
    font-size: 24px !important;
  }

  .stat-card {
    padding: 12px !important;
  }
}

/* ---------- 4. 全局防横向溢出兜底 ---------- */
/* 注意：切勿在 html/body 上设置 overflow-x:hidden！
   那会创建新的滚动容器，导致 IntersectionObserver 以错误元素为根，
   使 .mo-reveal 元素永远无法触发入场动画（实测会残留 14 个 opacity:0 元素）。
   改为只约束具体容器。

   ⚠️ 2026-09-25 修正：原先这里把 .container 也设成 max-width:100%，
   导致桌面端 --container-max(1080px) 被覆盖、内容在宽屏上顶到全宽。
   .container 的宽度已由 var(--container-max) 自己约束，
   这里只保留真正需要兜底的容器，且只在窄屏生效。 */
.app-viewport,
#app-main,
.page-view,
.view-container {
  max-width: 100%;
}

@media (max-width: 1200px) {
  .container {
    max-width: 100%;
  }
}

/* 通铺元素（跑马灯 / 页脚等）也跟随主容器收窄居中，
   避免在大屏上横贯整屏、视觉过于发散。
   内层用同样的 --container-max，保持与内容区对齐。 */
.mo-marquee,
.mo-marquee-stack {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  border-radius: 14px;
}


/* ---------- 5. 视频筛选工具栏窄屏收敛（补丁） ---------- */
@media (max-width: 900px) {
  /* 工具栏整体在窄屏纵向堆叠，标题占满整行 */
  .video-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .video-toolbar-right {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* 分类标签横向滚动，绝不换行撑破容器 */
  .category-tabs {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .category-tabs::-webkit-scrollbar {
    display: none;
  }

  .category-tabs .tab-btn {
    flex: 0 0 auto !important;
  }

  .video-sort-wrap {
    align-self: flex-start !important;
    max-width: 100% !important;
  }
}

/* Hero 右侧卡片：单列堆叠时与左栏等宽，避免 2px 溢出 */
@media (max-width: 900px) {
  .hero-visual-card,
  #hero-feature-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ---------- 6. 区块标题行窄屏堆叠（修正：父容器实为 .section-head-row） ---------- */
@media (max-width: 900px) {
  .section-head-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .section-head-row > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* ====================================================
 * 7. 页面高度自适应（Page Height Auto-Fit） —— 2026-09-25
 * ====================================================
 *
 * 【问题】滑轨是横向 flex 行：.views-slider-track { display:flex }
 *   四个 .page-view 是 flex 兄弟，各自 flex: 0 0 100%（等宽，横向排开）。
 *   flex 行的高度 = 所有子项中的「最大高度」。
 *   首页内容最长（约 3300px），于是：
 *     track 高 3300px → #app-main 高 3300px → 文档高 3543px
 *   切换到「素材分享」（内容仅 756px）时，track 仍是 3300px，
 *   用户必须多滚 2500+px 才能看到 Footer。
 *   —— 这就是「其它页面继承首页高度」的根因。
 *
 * 【修复】保持横向 flex（滑动定位必须靠它），只把「滑轨高度」夹到激活页高度：
 *   1) JS 量取当前激活页的内容高度，写入 CSS 变量 --active-view-h
 *   2) #app-main 与 .views-slider-track 都取该变量作为 height
 *   3) 超出部分由 #app-main 的 overflow:hidden 裁掉 → 短页面不再留白
 *   4) Footer 紧跟，紧贴内容
 *
 * 【硬约束】
 *   - 绝不使用 100vh × N
 *   - 绝不固定高度；无 JS 时变量为 auto，退化为「按最高页撑开」，内容永远可见
 *   - 只动高度相关属性，不碰宽度、不碰滑动定位、不碰动效
 *
 * 【血泪教训】曾用「非激活页 position:absolute 脱离文档流」的写法 —— 那是错的！
 *   absolute 后所有页都堆在 left:0/top:0，横向间距全丢，
 *   track 的 translate3d(-100%) 只是把整堆一起推走 → 页面互相重叠 + 切页空白。
 *   横向滑轨布局**必须**让页面留在 flex 行内。
 * ==================================================== */

/* 7.1 body：取消 flex 撑高（此前 body{display:flex;flex-direction:column;
        #app-main{flex:1 0 auto}} 会把 main 强行拉到至少 100vh，
        footer 因此被推到底部，短页面下方留出大块空白）。
        改为普通块流，内容多高就多高。 */
html {
  height: auto !important;
  min-height: 100% !important;
}

body {
  display: block !important;
  flex-direction: unset !important;
  min-height: 100vh !important;   /* 仅作「内容不足时铺满首屏」的地板，不撑高子元素 */
  height: auto !important;
}

/* 7.2 主容器：高度交给 JS 按当前页写 --active-view-h；无 JS 时 auto */
#app-main,
.app-viewport {
  display: block !important;
  flex: none !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  min-height: 0 !important;
  max-height: none !important;
  /* JS 就绪后写入具体 px，实现「切页即变高」；未写入时 auto 自适应 */
  height: var(--active-view-h, auto) !important;
  transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 7.3 滑轨：保持横向 flex（滑动定位依赖它），高度夹到激活页高度。
        变量由 JS 写在 #app-main 上，此处继承。
        未激活页仍留在 flex 行内（横向排开），只是高度超出部分被裁掉。 */
.views-slider-track {
  display: flex !important;
  width: 100% !important;
  align-items: flex-start !important;
  position: relative !important;
  height: var(--active-view-h, auto) !important;
  transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 7.4 页面视图：保持 flex 项（横向 100% 宽并排），绝不做 absolute */
.page-view {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  position: relative !important;
}

/* 7.5 被后台关闭的视图彻底移除 */
.page-view.view-disabled {
  display: none !important;
}

/* 7.6 Footer：永远紧跟内容，不吸底、不撑高 */
footer.site-footer,
.site-footer {
  flex: none !important;
  margin-top: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* 7.7 移动端：同样规则，无需单独覆盖（这里只保留安全兜底） */
@media (max-width: 900px) {
  #app-main,
  .app-viewport {
    min-height: 0 !important;
  }
}


/* ====================================================
 * 8. 版权信息仅在首页显示 —— 2026-09-25
 * ====================================================
 * 需求：只有首页显示页脚的版权 / ICP 备案行，其他视图（素材分享、加入我们、
 *       关于我们）不显示版权信息，只保留页面内容。
 *
 * 实现：视图切换时由 app.js 给 <html> 加/去 .hkf-not-home 类，
 *       并同步在 index.html 的 <head> 内联脚本里按 hash 预置（零闪烁）。
 *
 * 说明：只隐藏最下方的版权 / ICP 那一行（.footer-bottom-row），
 *       页脚上方的品牌与导航行（.footer-top-row）保留，仍可用于跳转。
 *       若希望其他页面连整个页脚都不显示，把下面选择器换成 .site-footer 即可。
 * ==================================================== */
html.hkf-not-home .footer-bottom-row {
  display: none !important;
}

/* 版权行隐藏后，页脚上边距收紧一点，避免底部显得空 */
html.hkf-not-home .site-footer {
  padding-bottom: 26px !important;
}