:root {
  --btn-font-size: 0.2em;             /* 按钮字体大小，使用相对单位以响应式适配 */
  --btn-padding: 14px 36px;           /* 按钮内边距，控制按钮高度和宽度 */
  --btn-gap: 24px;                    /* 两个按钮之间的水平间距 */
}

/* 英雄图区域（首页顶部大图） */
.hero-banner {
  width: 100%;                        /* 宽度100% */
  height: 100vh;                      /* 高度为整个视口高度 */
  background-image: url("banner.jpg"); /* 设置背景图像路径 */
  background-size: cover;             /* 背景图覆盖整个区域，可能裁剪 */
  background-position: center;        /* 背景图居中显示 */
  background-repeat: no-repeat;       /* 背景图不重复 */
  position: relative;                 /* 设置相对定位，方便内部绝对定位元素使用 */
  padding-top: 120px;                 /* 为顶部导航栏预留空间 */
}

/* 标题容器区域 */
.title-box {
  position: absolute;                 /* 绝对定位，便于精确摆放 */
  top: 50%;                           /* 距顶部50% */
  left: 12%;                          /* 距左侧12% */
  transform: translateY(-50%);        /* 垂直居中对齐 */
}

/* 标题组合（主+副标题） */
.title-group {
  display: inline-block;              /* 使其在内部内容宽度内排列 */
}

/* 主标题样式 */
.main-title {
  font-size: 3em;                     /* 字体大小为3倍基础字体大小 */
  font-weight: 700;                   /* 字体加粗（粗体） */
  color: rgba(255, 255, 255, 1.0);    /* 白色不透明文字 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 1.0); /* 黑色阴影增强对比度 */
  line-height: 1.2;                   /* 行高为1.2倍字体大小 */
}

/* 副标题样式 */
.sub-title {
  font-size: 1.2em;                   /* 副标题字体稍小 */
  color: rgba(255, 255, 255, 0.7);    /* 半透明白色字体 */
  margin-top: 0.3em;                  /* 上边距增加一些空间 */
  font-weight: 500;                   /* 字体稍加粗 */
  text-align: center;                 /* 文本居中 */
  display: block;                     /* 转为块级显示以独占一行 */
}

/* 按钮区域布局 */
.button-group {
  margin-top: 30px;                   /* 与标题之间的垂直间距 */
  display: flex;                      /* 使用 Flex 布局 */
  gap: var(--btn-gap);                /* 使用变量控制按钮间距 */
  flex-wrap: wrap;                    /* 超出部分换行 */
}

/* 通用按钮样式 */
.btn {
  display: inline-flex;               /* 使用 inline-flex 便于居中内容 */
  align-items: center;                /* 垂直居中 */
  justify-content: center;            /* 水平居中 */
  padding: var(--btn-padding);        /* 使用变量控制按钮内边距 */
  border-radius: 999px;               /* 超大圆角，实现圆形按钮样式 */
  font-size: var(--btn-font-size);    /* 使用变量控制字体大小 */
  font-weight: 400;                   /* 字体正常粗细 */
  text-decoration: none;              /* 去除链接下划线 */
  transition: all 0.3s ease;          /* 所有属性缓动过渡 */
  text-align: center;                 /* 文本居中 */
  text-shadow: none;                  /* 不使用文字阴影 */
  line-height: 1;                     /* 行高1，紧凑显示 */
  white-space: nowrap;               /* 不换行，保持按钮在一行 */
  min-width: 160px;                   /* 最小宽度，保持一致性 */
  font-family: "Microsoft YaHei", "Helvetica Neue", sans-serif; /* 设置字体 */
}

/* 白色实心按钮（立即购买） */
.btn-buy {
  background-color: white;           /* 背景白色 */
  color: black;                      /* 字体黑色 */
  border: none;                      /* 无边框 */
}

.btn-buy:hover {
  background-color: #e6e6e6;         /* 悬停时略微变灰 */
}

/* 白色边框按钮（观看视频） */
.btn-video {
  background-color: transparent;     /* 背景透明 */
  color: white;                      /* 字体白色 */
  border: 2px solid white;           /* 白色边框 */
}

.btn-video:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 悬停时背景变淡 */
}

.btn-video .icon {
  margin-left: 8px;                  /* 图标左边距 */
  font-size: 0.9em;                  /* 图标大小略小 */
}

/* 全宽展示图片区域 */
.image-section {
  width: 100%;                       /* 占满整行 */
}

/* 全宽图片容器 */
.full-image-section {
  width: 100%;                       /* 宽度100% */
}

/* 图片设置 */
.full-image {
  width: 100%;                       /* 图片自适应宽度 */
  display: block;                    /* 避免空隙 */
}

/* 页面底部说明区域 */
.bottom-note {
  padding: 60px 20px;                /* 上下60px，左右20px的内边距 */
  background-color: #000000;         /* 背景为浅灰色 */
  font-size: 14px;                   /* 字体大小14px */
  line-height: 1.8;                  /* 行高1.8倍字体大小 */
  color: #787878;                       /* 深灰字体颜色 */
}

/* 底部说明容器最大宽度 */
.note-container {
  max-width: 1200px;                 /* 最大宽度为1200px */
  margin: 0 auto;                    /* 居中显示 */
}