:root {
  --btn-font-size: 0.2em;           /* 按钮字体大小 */
  --btn-padding: 14px 36px;         /* 按钮内边距 */
  --btn-gap: 24px;                  /* 按钮之间的间距 */
}

* {
  margin: 0;                        /* 所有元素外边距清零 */
  padding: 0;                       /* 所有元素内边距清零 */
  box-sizing: border-box;          /* 设置盒模型为 border-box，便于计算宽高 */
}

html, body {
  width: 100%;                     /* 页面宽度100% */
  min-height: 100%;               /* 最小高度为100%视口高 */
  font-family: "Microsoft YaHei", "Helvetica Neue", sans-serif;  /* 设置字体 */
  font-weight: 400;               /* 字体默认粗细为400（正常） */
  overflow-x: hidden;             /* 禁止页面横向滚动条 */
}

/* 通用居中容器 */
.wrapper {
  max-width: 1200px;              /* 最大宽度为1200px */
  width: 100%;                    /* 宽度100% */
  margin: 0 auto;                 /* 居中显示 */
  display: flex;                 /* 使用 flex 布局 */
  align-items: center;          /* 垂直居中 */
  justify-content: space-between; /* 子元素之间左右对齐 */
}

/* 搜索框样式（导航栏中间） */
.search {
  padding: 6px 12px;              /* 内边距上下6px，左右12px */
  border-radius: 20px;            /* 圆角边框 */
  border: none;                   /* 无边框 */
  width: 200px;                   /* 宽度200px */
}

/* 页脚部分整体 */
.site-footer {
  background-color: #111;         /* 页脚背景颜色为深灰色 */
  color: #ccc;                    /* 默认字体颜色为浅灰色 */
  font-size: 14px;                /* 字体大小为14px */
  line-height: 1.6;               /* 行高1.6倍字体大小 */
}

/* 页脚横幅（上部分区域） */
.footer-banner {
  background-color: #222;         /* 背景颜色更深 */
  padding: 40px 20px;             /* 上下40px，左右20px的内边距 */
  text-align: center;             /* 文本居中 */
}

.footer-banner h3 {
  font-size: 20px;                /* 标题字体大小20px */
  color: white;                   /* 标题颜色为白色 */
  margin-bottom: 10px;            /* 标题下边距10px */
}

.footer-banner p {
  margin-bottom: 20px;            /* 段落下边距20px */
}

.footer-download-btn {
  background-color: #0073e6;      /* 按钮背景为蓝色 */
  color: white;                   /* 字体颜色为白色 */
  padding: 12px 24px;             /* 按钮内边距 */
  border-radius: 999px;           /* 超大圆角（胶囊形状） */
  text-decoration: none;          /* 去除链接下划线 */
}

/* 四列链接区域 */
.footer-links {
  padding: 40px 20px;             /* 内边距40px上下，左右20px */
  background-color: #1a1a1a;      /* 背景为更深的灰色 */
}

.footer-column {
  flex: 1;                        /* 平均分列宽度 */
  min-width: 180px;              /* 最小宽度180px */
  margin-bottom: 20px;            /* 下边距20px */
}

.footer-column h4 {
  color: white;                   /* 标题颜色白色 */
  margin-bottom: 12px;            /* 下边距12px */
}

.footer-column ul {
  list-style: none;               /* 去除无序列表前的点 */
}

.footer-column ul li {
  margin-bottom: 8px;             /* 每一项下边距8px */
}

.footer-column ul li a {
  color: #ccc;                    /* 链接字体浅灰色 */
  text-decoration: none;          /* 去除下划线 */
}

.footer-column ul li a:hover {
  color: #fff;                    /* 鼠标悬浮变为白色 */
}

/* 邮箱订阅样式 */
.subscribe-form input[type="email"] {
  padding: 8px;                   /* 内边距8px */
  border: none;                   /* 无边框 */
  border-radius: 4px;             /* 圆角4px */
  width: 70%;                     /* 宽度70% */
  margin-right: 8px;              /* 右边距8px */
}

.subscribe-form button {
  padding: 8px 12px;              /* 按钮内边距 */
  background-color: #0073e6;      /* 背景蓝色 */
  color: white;                   /* 字体颜色白色 */
  border: none;                   /* 无边框 */
  border-radius: 4px;             /* 圆角4px */
}

/* 底部版权区域 */
.footer-bottom {
  padding: 20px;                  /* 内边距20px */
  background-color: #0d0d0d;      /* 背景为更深的黑色 */
  text-align: center;             /* 内容居中 */
}

.footer-bottom-links {
  margin-bottom: 10px;            /* 底部链接组下边距10px */
}

.footer-bottom-links a {
  margin: 0 10px;                 /* 左右间距10px */
  color: #888;                    /* 链接文字颜色为中灰 */
  text-decoration: none;          /* 去掉下划线 */
}

.footer-bottom-links a:hover {
  color: #fff;                    /* 鼠标悬浮变白 */
}

.footer-legal {
  font-size: 12px;                /* 字体大小为12px */
  color: #666;                    /* 字体颜色为深灰 */
}

/* 中等屏幕响应式（平板） */
@media (max-width: 768px) {
  .top-header .wrapper,
  .navbar .wrapper {
    flex-direction: column;       /* 垂直排列 */
    align-items: flex-start;      /* 左对齐 */
    padding: 10px 20px;           /* 内边距 */
    gap: 6px;                     /* 间距6px */
  }

  .navbar .menu {
    margin-top: 8px;              /* 菜单上边距8px */
  }

  .navbar .menu a {
    margin-left: 0;               /* 左边距为0 */
    margin-right: 15px;           /* 右边距15px */
    font-size: 0.9em;             /* 字体稍小 */
  }

  .footer-links {
    flex-direction: column;       /* 页脚四列纵向排列 */
  }
}

/* 小屏幕响应式（手机） */
@media (max-width: 480px) {
  .footer-links {
    flex-direction: column;       /* 页脚列纵向排列 */
  }

  .subscribe-form input[type="email"] {
    width: 100%;                  /* 宽度100% */
    margin-bottom: 10px;          /* 下边距10px */
  }

  .subscribe-form button {
    width: 100%;                  /* 按钮宽度100% */
  }
}