/* ==================== 全局基础配置 ==================== */
:root {
  --primary-color: #f96132;
  --primary-light: #ff743c;
  --primary-dark: #ec5c2f;
  --text-dark: #2e2e2f;
  --text-gray: #666;
  --text-light: #999;
  --text-white: #ffffff;
  --bg-white: #fafafa; /* 页面整体极浅灰 */
  --nav-white: #ffffff; /* 导航栏纯白色 */
  --bg-gray: #f8f9fa;
  --border-gray: #e5e5e5;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); /* 减淡的投影 */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); /* 减淡的投影 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --transition: all 0.3s ease;
  --font-base: 16px;
  --font-footer: 10.4px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 全局思源宋体 */
  font-family: "Source Han Serif", "思源宋体", "Noto Serif SC", "SimSun", serif;
}

html,
body {
  font-size: var(--font-base);
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-white);
  scroll-behavior: smooth;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; vertical-align: middle; border: 0; }

/* container最大宽度66% */
.container {
  width: 1200px;
  max-width: 66%;
  margin: 0 auto;
  padding: 0 15px;
}

/* ==================== 导航栏 ==================== */
.navigator {
  background: var(--nav-white) !important;
  box-shadow: none !important;
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
}

.s-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0;
  flex-wrap: nowrap; /* PC端不换行 */
}

/* Logo区域：gap 0.7rem + 左对齐 */
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: auto;
  justify-content: flex-start;
  margin-bottom: 0;
}

/* Logo链接：图标与文字水平排列 */
.logo a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}

/* Logo图片容器 */
.logo-image {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Logo标题容器 */
.logo-title {
  margin: 0;
  display: flex;
  align-items: center;
}

/* Logo尺寸固定36px */
.logo-image img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* 甲子研究院文字样式：1rem + 加粗 + 字间距 */
.logo-title > p:first-child {
  font-size: 1rem;
  font-weight: 900; /* 加粗 */
  letter-spacing: 0.9px; /* 字间距加大 */
  color: var(--text-dark);
}

/* 导航项：PC端右对齐 */
.s-nav-items {
  display: flex !important; 
  gap: 2rem;
  width: auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.s-nav-item {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  position: relative;
  white-space: nowrap;
}

.s-nav-item.selected,
.s-nav-item:hover { color: var(--primary-color); }

.s-nav-item.selected::after,
.s-nav-item:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
  animation: navUnderline 0.3s ease forwards;
}

@keyframes navUnderline { from { width: 0; } to { width: 80%; } }

/* 隐藏移动端汉堡按钮 */
.mobile-menu-btn {
  display: none !important;
  font-size: 1.5rem;
  color: var(--text-dark);
  cursor: pointer;
  background: transparent;
  border: none;
}

/* ==================== Banner区 ==================== */
.hero-section {
  padding: 2rem 0;
  background: var(--bg-white);
}

.banner-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 2rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none !important; /* Banner去掉投影 */
}

.banner-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==================== 下载按钮 ==================== */
.download-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 5%; /* 上边距5% */
}

/* 下载按钮宽度一致 */
.s-common-button {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: var(--text-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  width: 220px; /* 固定宽度保证一致 */
  justify-content: center;
}

/* 按钮图标样式 */
.btn-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: inline-block;
}

.s-common-button:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ==================== 品牌理念区 ==================== */
.brand-section {
  padding: 5rem 0;
  background: var(--bg-white);
}

.section-header { text-align: center; margin-bottom: 4rem; }
/* 品牌大标题缩小后字号 */
.section-title {
  font-size: 1.6rem; 
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.section-divider {
  display: inline-block;
  width: 60px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 3px;
  margin-bottom: 0.7rem;
}
/* 副标题缩小后字号 */
.section-subtitle {
  color: var(--text-light);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.brand-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* brand-card四周留白加大10%（2rem→2.2rem） */
.brand-card {
  background: white;
  padding: 2.2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); /* 减淡投影 */
  transition: var(--transition);
}

.brand-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md); /* 减淡投影 */
}

/* 品牌图标下方增加留白 */
.brand-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: inline-block;
  color: var(--primary-color);
  margin-bottom: 1.8rem;
}
/* 卡片标题缩小后字号 */
.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-dark);
}
/* 品牌描述文字：字间距加大+缩小后字号 */
.card-desc {
  color: var(--text-gray);
  font-size: 0.81rem;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 1.2px; /* 字间距加大 */
}

/* ==================== 页尾 ==================== */
.s-footer-section {
  background: var(--bg-white);
  color: var(--text-dark);
  padding: 2rem 0;
}

.footer-content { display: flex; align-items: center; justify-content: center; }
.footer-info {
  text-align: center;
  font-size: var(--font-footer);
  line-height: 1.8;
  color: var(--text-gray);
  font-family: "Source Han Serif", "思源宋体", "SimSun", serif;
}

.footer-info a {
  color: var(--primary-color);
  text-decoration: underline;
}

.footer-info a:hover { color: var(--primary-light); }

/* ==================== 响应式适配（移动端） ==================== */
@media (max-width: 768px) {
  .container { max-width: 95%; }
  
  /* 移动端导航栏换行+元素缩小 */
  .s-nav { 
    padding: 0.8rem 0; 
    flex-wrap: wrap;
  }
  .logo-image img { height: 34px; /* 移动端Logo保持34px */ }
  .logo-title > p:first-child { 
    font-size: 0.9rem;
    letter-spacing: 0.8px;
  }
  .s-nav-items { 
    gap: 0.6rem; 
    width: 100%; 
    justify-content: center; 
    margin-top: 0.5rem;
  }
  .s-nav-item { 
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem; 
  }

  /* 移动端下载按钮适配 */
  .s-common-button {
    width: 100%;
    max-width: 220px;
  }
  .download-buttons { 
    flex-direction: column; 
    margin-top: 5%;
    align-items: center;
  }

  /* 移动端品牌元素缩小 */
  .brand-section { padding: 3rem 0; }
  .section-title { font-size: 1.4rem; }
  .brand-icon { width: 36px; height: 36px; }
  .card-title { font-size: 0.9rem; }
  .card-desc { 
    font-size: 0.7rem;
    letter-spacing: 1px; 
  }
  
  .footer-info { font-size: 9.1px; }
}

/* ==================== 交互增强 ==================== */
img {
  opacity: 0;
  transition: opacity 0.6s ease;
}

img.loaded { opacity: 1; }

.nav-scrolled {
  padding: 0.8rem 0 !important;
  box-shadow: none !important;
  background: var(--nav-white) !important;
}

.s-common-button:active {
  transform: translateY(-2px) scale(0.98) !important;
}