body {
    container: body / inline-size;
    position: relative;
    min-height: 100vh;
    height: auto; /* 允许页面内容超出首屏 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 内容从上到下排列，避免首尾撑满 */
    background-color: transparent; /* 顶部区域显示视频背景，其他区域按模块背景显示 */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 隐藏横向滚动 */
    overflow-y: auto;   /* 允许纵向滚动，页脚与视频分区显示 */
    --minContent: 1019;
    --hSizing: FILL;
    --vSizing: FILL;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: STRETCH;
}

/* 视频背景样式 - 与网页整体固定 */
.video-background {
    position: relative; /* 分区显示：普通块级，不固定 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* 视频占满首屏 */
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%);
    background-size: 400% 400%;
    animation: videoBackground 20s ease infinite;
    will-change: transform; /* 优化性能 */
}

@keyframes videoBackground {
	0% { background-position: 0% 50%; }
	25% { background-position: 100% 0%; }
	50% { background-position: 100% 100%; }
	75% { background-position: 0% 100%; }
	100% { background-position: 0% 50%; }
}

/* 视频元素样式 - 确保正确显示 */
.bg-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;  /* 视频在最底层 */
	display: block;
	box-sizing: border-box;
}

/* 视频加载成功时显示 */
.video-background.video-loaded .bg-video {
	display: block;
}

.video-background.video-loaded {
	background: transparent; /* 视频加载成功时背景透明 */
}

/* 视频遮罩层 - 50%不透明黑色遮罩 */
.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);  /* 50%不透明黑色遮罩 */
	z-index: 1;  /* 遮罩层在视频之上 */
	display: none;  /* 默认隐藏遮罩层 */
}

/* 只在视频加载成功时显示遮罩层 */
.video-background.video-loaded .video-overlay {
	display: block;
}



/* header - 首屏适配 */

.header {
    container: header / inline-size;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 16px 24px;
    border: 1px solid var(--n3-10);
    background-color: #000; /* 头部背景色，提升可读性 */
    flex-shrink: 0; /* 防止头部被压缩 */
    --minContent: 1019;
    --hSizing: FILL;
    --vSizing: HUG;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: MIN;
}

.header-row1 {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-grow: 1;
	--minContent: 747;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: CENTER;
}

.header-logo {
	width: 160px; height: 22px;
	flex-shrink: 0;
	--minContent: 160;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}



/* form */

.form {
	width: 100%; height: 37px;
	max-width: 351px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	background-color: var(--n3-10);
	padding: 4px 4px 4px 16px;
	border: 1px solid var(--n3-10);
	border-radius: 50px;
	--minContent: 351;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.form-text {
	flex-grow: 1;
	text-align: left;
	--minContent: 262;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: CENTER;
}

.form-ico {
	width: 56px;
	flex-shrink: 0;
	align-self: stretch;
	border-radius: 8px;
	--minContent: 56;
	--hSizing: FIXED;
	--vSizing: FILL;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: STRETCH;
}
/* end form*/


.header-row2 {
	margin-left: 1px;
	width: 180px;
	display: flex;
	align-items: center;
	gap: 36px;
	flex-shrink: 0;
	padding: 12px 8px;
	--minContent: 181;
	--hSizing: FIXED;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-text-nat {
	min-width: 62px;
	flex-grow: 1;
	text-align: center;
	--minContent: 62;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-text-tab {
	min-width: 62px;
	color: var(--t2);
	text-align: center;
	--minContent: 64;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-row-right {
	display: flex;
	align-items: center;
	gap: 24px;
	--minContent: 176;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-ico {
	width: 24px; height: 24px;
	flex-shrink: 0;
	--minContent: 24;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-row3 {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	background: url(../assets/header/header-row.png) center / contain no-repeat;
	padding: 4px 14px;
	--minContent: 128;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-graphic {
	margin-top: 1px;
	width: 16px; height: 22px;
	flex-shrink: 0;
	--minContent: 16;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.header-text-symbol {
	text-align: center;
	--minContent: 80;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}
/* main - 首屏适配 */

.main {
	container: main / inline-size;
	display: flex;
	flex-direction: column;
	gap: 48px;
	flex: 1; /* 占据剩余空间 */
	justify-content: center; /* 内容居中 */
	align-items: center; /* 水平居中 */
	--minContent: 1019;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}


.col {
    position: fixed; z-index: -2; top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding-right: 5px;
    padding-bottom: 0; /* 移除大额底部内边距，避免产生额外滚动空间 */
    overflow: hidden; /* 背景图仅限首屏范围 */
    --minContent: 1249;
    --hSizing: FILL;
    --vSizing: HUG;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: MIN;
}

.background-pattern {
	flex-shrink: 0;
	--minContent: 1244;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

/* col-bottom - 首屏适配 */

.col-bottom {
	position: absolute; /* 改为绝对定位 */
	z-index: 2;  /* 提高层级，确保在遮罩层之上 */
	top: 50%; /* 垂直居中 */
	left: 50%; /* 水平居中 */
	transform: translate(-50%, -50%); /* 完美居中 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 21px;
	width: auto; /* 自适应宽度 */
	--minContent: 709;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: CENTER;
	--pConstraintVertical: CENTER;
}

.img-home-title {
	margin-top: -1px;
	width: 100%; height: 128px;
	max-width: 697px;
	flex-shrink: 0;
	--minContent: 453;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: CENTER;
	--pConstraintVertical: MIN;
}

.row-bottom {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 7px;
	background: url(../assets/row.png) center / contain no-repeat, linear-gradient(var(--n4-5), var(--n4-5)) top left / auto auto no-repeat;
	padding: 14px 49px;
	margin: 0 auto; /* 水平居中 */
	--minContent: 212;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: CENTER;
	--pConstraintVertical: MAX;
}

.ico {
	margin-top: 4px;
	width: 20px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	--minContent: 20;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.text-symbol {
	text-align: center;
	--minContent: 100;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}



/** breakpoints (margin / paddings) **/

@media screen and (max-width: 768px) {
	.header {
		padding-inline: var(--margin-sm);
	}
}



/* container queries (flex rows) */

@container body (width < 1017px) {
	.header {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.header > .header-row1 {
		width: 100%;
	}
}

@container header (width < 743px) {
	.header-row1 {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.header-row1 > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
	}
}

/* ---------------- Footer styles copied from mall page ---------------- */
/* 基础布局与外观 */
.footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--t1);
  background-color: #000;
  padding: 20px;
  border-top: 1px solid var(--n3-10);
}
.footer .nat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--n3-10);
}
.footer .nat-logo { width: 240px; }
.footer .nat-row-right {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.footer .nat-col-left,
.footer .nat-col-right {
  max-width: 290px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.footer .nat-row-bottom1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer .nat-col {
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.footer .nat-row-bottom2 {
  display: flex;
  align-items: center;
  gap: 13px;
}

/* 字体风格与大小（与商城页一致） */
.footer .t1-regular {
  color: var(--t2);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.667;
}
.footer .t2-regular1 {
  color: var(--t3);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.571;
}
.footer .t2-regular2 {
  color: var(--t2);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.571;
}

/* 图标尺寸修正 */
.footer .nat1 .nat-logo-pc {
  width: auto;
  height: 22px;
  aspect-ratio: auto;
  display: block;
  object-fit: contain;
}

/* 底部对齐修正 */
.footer .nat-row-bottom2 { justify-content: flex-start; }
.footer .nat-row-bottom1 { min-height: 22px; }

/* 布局固定，避免行内换行堆叠 */
.footer .nat-row {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.footer .nat-row-right {
  flex-direction: row !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
}

/* 全宽出血背景 + 固定内容宽度，保持与商城页一致 */
.footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  box-sizing: border-box;
}
.footer .nat {
  width: 1376px;
  max-width: 1376px;
  min-width: 1376px;
  margin: 0 auto;
}

/* 响应式回退（兼容小屏） */
@media (max-width: 1335px) {
  .footer .nat-row-bottom2 {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 13px;
  }
}
@media (max-width: 867px) {
  .footer .nat-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
@media (max-width: 627px) {
  .footer .nat-row-right {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
  }
}