/* 导入外部字体（从原内联样式转移过来，统一管理） */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700');

/* 基础全局样式：移动端优先（先适配小屏设备，再向上兼容） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免padding/margin导致元素溢出 */
}

/* 页面全局样式（从原内联样式转移，解决样式冲突） */
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(120deg, #0a2540 0%, #1e3a8a 100%);
  color: #e3e8ee;
  line-height: 1.6;
}

/* 核心容器：统一页面宽度，居中显示（整合内联样式，优化响应式） */
.container {
  width: 100%; /* 移动端默认占满屏幕 */
  max-width: 1200px; /* 贴合原内联样式，避免大屏内容过宽 */
  margin: 0 auto; /* 居中 */
  padding: 0 15px; /* 左右留白，避免内容贴边 */
}

/* 通用样式：导航栏、标题、文本、列表等基础元素 */
.page-title {
  font-size: 24px;
  font-weight: 700;
  margin: 20px 0;
}
.section-title {
  font-size: 20px;
  margin: 15px 0;
}
.section-desc {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.tech-list {
  list-style: none;
  display: flex;
  flex-direction: column; /* 移动端默认纵向排列 */
  gap: 15px;
}
.tech-item {
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* 适配深色背景，提升边框可见性 */
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05); /* 适配深色背景，增加列表项层次感 */
}
.tech-item-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.tech-item-desc {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9; /* 适配深色背景，优化文本可读性 */
}

/* 导航栏基础样式（默认桌面端） */
.nav {
  display: flex;
  flex-wrap: wrap; /* 导航项太多时自动换行 */
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 适配深色背景，优化边框可见性 */
}
.nav-item {
  margin: 5px 10px;
  font-size: 16px;
  color: #e3e8ee; /* 明确导航文字颜色，适配深色背景 */
  text-decoration: none; /* 去除链接下划线 */
  opacity: 0.9;
}
.nav-item:hover {
  opacity: 1; /* hover效果，提升交互体验 */
}

/* 顶部区域通用样式（公司名称、横幅） */
.company-name {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0;
  text-align: center; /* 居中显示，提升美观度 */
}
.banner {
  height: 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); /* 增加横幅背景，提升层次感 */
  margin-bottom: 20px;
}
.banner-title {
  font-size: 24px;
  font-weight: 700;
  margin: 10px 0;
}
.banner-desc {
  font-size: 16px;
  margin: 10px 0;
  opacity: 0.9;
}
.banner-btn {
  font-size: 14px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #3b82f6;
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
}
.banner-btn:hover {
  background: #2563eb; /* 按钮hover效果，提升交互体验 */
}

/* -------------------------- 常用设备尺寸适配（媒体查询） -------------------------- */
/* 1. 小屏手机（320px - 374px）：如iPhone SE、低端安卓机 */
@media (min-width: 320px) and (max-width: 374px) {
  .page-title {
    font-size: 20px; /* 缩小标题字体 */
    margin: 15px 0;
  }
  .section-title {
    font-size: 18px;
  }
  .section-desc {
    font-size: 14px;
  }
  .tech-item {
    padding: 10px; /* 减少内边距，适配小屏 */
  }
  .tech-item-title {
    font-size: 16px;
  }
  .tech-item-desc {
    font-size: 13px;
  }
}

/* 2. 标准手机（375px - 424px）：如iPhone 12/13/14、主流安卓机 */
@media (min-width: 375px) and (max-width: 424px) {
  .page-title {
    font-size: 22px;
  }
  .section-title {
    font-size: 19px;
  }
  .section-desc {
    font-size: 15px;
  }
  .tech-item {
    padding: 12px;
  }
}

/* 3. 大屏手机（425px - 767px）：如大屏安卓机、iPhone Plus系列 */
@media (min-width: 425px) and (max-width: 767px) {
  .container {
    padding: 0 20px; /* 增加留白，提升体验 */
  }
  .tech-list {
    gap: 20px;
  }
}

/* 4. 平板（768px - 1023px）：如iPad mini/air、安卓平板 */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 90%; /* 平板宽度占屏幕90%，避免过宽 */
  }
  .tech-list {
    flex-direction: row; /* 平板横向排列（2列） */
    flex-wrap: wrap;
    gap: 20px;
  }
  .tech-item {
    width: calc(50% - 10px); /* 2列布局，减去gap的一半 */
  }
  .page-title {
    font-size: 28px;
  }
  .section-title {
    font-size: 24px;
  }
}

/* 5. 小屏电脑（1024px - 1439px）：如13/14寸笔记本 */
@media (min-width: 1024px) and (max-width: 1439px) {
  .container {
    width: 85%;
  }
  .tech-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
  }
  .tech-item {
    width: calc(33.33% - 17px); /* 3列布局 */
  }
}

/* 6. 大屏电脑（1440px及以上）：如台式机、16寸+笔记本 */
@media (min-width: 1440px) {
  .container {
    width: 75%; /* 大屏缩小宽度，避免内容拉得太开 */
  }
  .tech-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
  }
  .tech-item {
    width: calc(25% - 22px); /* 4列布局 */
  }
  .page-title {
    font-size: 32px;
  }
  .section-title {
    font-size: 26px;
  }
}

/* -------------------------- 移动端核心压缩（767px以下，强制生效） -------------------------- */
@media (max-width: 767px) {
  /* 1. 公司名称区域（压缩高度，缩小字体） */
  .company-name {
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    text-align: left !important; /* 左对齐，节省横向空间 */
  }

  /* 2. 导航栏（垂直排列，大幅压缩高度） */
  .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 3px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  .nav-item {
    font-size: 11px !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    opacity: 0.8 !important;
  }

  /* 3. 横幅区域（强制缩小高度，紧凑排版） */
  .banner {
    height: 120px !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
  }
  .banner-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 5px 0 !important;
  }
  .banner-desc {
    font-size: 10px !important;
    margin: 3px 0 !important;
    opacity: 0.8 !important;
  }
  .banner-btn {
    font-size: 10px !important;
    padding: 4px 8px !important;
    margin: 5px 0 !important;
  }
}