@font-face {
  font-family: "Noto Sans SC Display";
  src: url("assets/fonts/NotoSansSC-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --hero-text-opacity: 1;
  --hero-image-opacity: 1;
  --story-image-scale: 0;  /* 先留着，不再主要使用 */

  /* 四张“我的故事”图的透明度与缩放 */
  --story-image1-opacity: 1;
  --story-image2-opacity: 0;
  --story-image3-opacity: 0;
  --story-image4-opacity: 0;

  --story-image1-scale: 1;
  --story-image2-scale: 1;
  --story-image3-scale: 1;
  --story-image4-scale: 1;
}

/* 基础样式 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
/* 确保全局背景是黑色，但内容允许看到底下的图 */
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Serif SC", "PingFang SC",
    "Microsoft Yahei", system-ui, sans-serif;
}
.page-content {
  background: #050505;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    system-ui, -webkit-pictograph, "PingFang SC", "Microsoft Yahei",
    "Helvetica Neue", Arial, sans-serif;
}

/* ===== 顶部导航栏 ===== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;

  /* 改成完全透明背景 */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ===== 顶部导航栏 ===== */

.site-header {
  position: relative;   /* ✅ 不再固定，在文档流里正常滚动 */
  z-index: 20;           /* 仍然压在英雄图片上面 */
  background: transparent;
}

.site-header__inner {
  width: 100%;
  padding: 25px 30px; /* 左右更靠近屏幕边缘 */
  display: flex;
  align-items: center;
}

/* 左上 Logo 默认稍微淡一点 */
.site-logo img {
  height: 30px;
  width: auto;
  opacity: 0.70;               /* 默认轻微变淡 */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* hover 变亮 + 轻微上浮（可选但很高级） */
.site-logo:hover img {
  opacity: 1;                  /* 变亮 */
}

/* 右侧图标组 */
.header-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px; /* 图标之间的间隔 */
}

/* 图标按钮样式 */
.icon-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;

  display: flex;
  align-items: center;
}

.icon-btn img {
  height: 17px;   /* 你可以改成 22/24/28 根据你的PNG大小 */
  width: auto;
  opacity: 0.70;  /* 稍微淡一点，符合极简风格 */
  transition: opacity 0.2s ease;
}

/* 单独调大语言图标 */
.icon-lang img {
  height: 30px;   /* 想多大调多大，比如 36px, 40px */
}

/* Hover 交互 */
.icon-btn:hover img {
  opacity: 1;
}

.site-nav a {
  color: #f5f5f5;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-nav a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* main 需要给顶部导航留位置，否则会被盖住 */
main {
  position: relative;
  z-index: 2;           /* 比背景图高 */
  min-height: 100vh;
}

/* ===== 英雄区 ===== */

.hero {
  position: relative;
  height: 100vh;        /* 和视口同高：整屏英雄区 */
  overflow: visible;
  background: transparent;   /* ⚠️ 一定要透明，否则会挡住图片 */
}

/* 背景图片：铺满整屏 */
.hero-image {
  position: fixed;          /* ✅ 固定在视口，不随内容滚动 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;            /* 始终铺满一屏 */
  object-fit: cover;
  display: block;

  opacity: var(--hero-image-opacity); /* ✅ 由 JS 控制透明度 */
  pointer-events: none;               /* 不挡点击 */
  z-index: 0;                /* 比 header/main 低，比 body 高 */

  filter: grayscale(100%);            /* 你原来有的话可以保留 */
}

/* 左下角大字 */
.hero-title {
  position: absolute;
  left: clamp(24px, 7vw, 96px);
  bottom: 28vh;   /* 往上移：越大越靠上 */
  z-index: 1; /* 文字在图片上面 */

  font-size: clamp(36px, 8vw, 100px);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.05;
  white-space: nowrap;

  color: rgba(255, 252, 245);
  pointer-events: none;
  transition: color 0.15s ease-out;

  font-family: "Noto Serif SC", serif; 
  font-weight: 900;   /* 变粗 */
    /* 下面是新加的辉光效果 🔽 */
  text-shadow:
    0 0 4px rgba(255, 250, 240, 0.8),   /* 贴着字的小柔光 */
    0 0 14px rgba(255, 247, 238, 0.55), /* 稍远一点的暖光晕 */
    0 0 32px rgba(255, 245, 236, 0.35); /* 很淡的远光，配合右边立方体 */
}

/* 空白缓冲区（与英雄图片一样高） */
.spacer {
  height: 70vh;      /* 与英雄图一样高 */
  background: #000;   /* 保持纯黑，让淡出过渡自然 */
}

/* ===== 后续内容区域 ===== */

.page-content {
  padding: 56px 24px 60px;
  max-width: 960px;
  margin: 0 auto;
  background: #050505;
}

.page-content h1 {
  font-size: 28px;
  margin-bottom: 16px;
}

.page-content p {
  line-height: 1.6;
  margin-bottom: 12px;
  color: #d0d0d0;
}

/* ===== About 自我介绍区 ===== */

.about {
  background: #000;
  color: #FFFCF5;
  padding: 0px 6vw 96px;
  font-family: "Microsoft YaHei", "PingFang SC", "Heiti SC", "Noto Sans SC", sans-serif;
}

.about-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 56px;
}

/* 左侧大字标题 */
.about-left {
  flex: 0 0 35%;
  margin-left: -2vw;
  margin-top: 0;
}

.about-title {
  margin: 0;
  font-size: clamp(40px, 7vw, 83px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  font-weight: 300;
  /* 灰色可以根据你 logo 调整 */
  color: #FFFCF5;
  font-family: "Microsoft YaHei", "PingFang SC", "Heiti SC", "Noto Sans SC", sans-serif;
  text-shadow:
    0 0 4px rgba(255, 250, 240, 0.8),
    0 0 14px rgba(255, 247, 238, 0.55),
    0 0 32px rgba(255, 245, 236, 0.35);
}

/* 右侧正文 */
.about-right {
  flex: 0 0 50%;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.6;
  color: #FFFCF5;
  font-family: "Microsoft YaHei", "PingFang SC", "Heiti SC", "Noto Sans SC", sans-serif;
}

.about-right p {
  margin: 0 0 28px;
}

.about-tagline {
  font-size: 22px;
  font-weight: 300;
  margin-bottom: 18px;
  text-indent: 2.5em;     /* 首行缩进两格 */
}

/* ✅ 西文（英文 / 意大利语）取消首行缩进 */
html[lang="en"] .about-tagline,
html[lang="en"] .about-right p,
html[lang="it"] .about-tagline,
html[lang="it"] .about-right p {
  text-indent: 0;
}

/* 英文 & 意大利语：左侧标题整体下移 */
html[lang="en"] .about-left,
html[lang="it"] .about-left {
  margin-top: 5vw;   /* ✅ 推荐从 3~5vw 微调 */
}

/* 外框整体 */
.about-button-split {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;

  font-family: "Microsoft YaHei", "PingFang SC", "Heiti SC",
    "Noto Sans SC", sans-serif;

  font-size: 16px;
  color: #FFFCF5;

  border: 1px solid #FFFCF5;
  border-radius: 0;
  margin-top: 32px;

  transition: none;
}

/* 左侧文本 */
.about-button-split .btn-text {
  padding: 12px 32px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFCF5;
}

/* 右侧方块（不旋转） */
.about-button-split .btn-arrow {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-left: 1px solid #FFFCF5;
  background: transparent;
  color: #FFFCF5;
  box-shadow:
    0 0 6px rgba(255, 250, 240, 0.80),
    0 0 14px rgba(255, 247, 238, 0.55),
    0 0 28px rgba(255, 245, 236, 0.35);
  text-shadow:
    0 0 4px rgba(255, 250, 240, 0.8),
    0 0 12px rgba(255, 247, 238, 0.55);
}

/* 真正旋转的是这个小箭头 span */
.about-button-split .arrow-icon {
  display: inline-block;
  font-size: 18px;
  transition: transform 0.25s ease, color 0.25s ease;
}

/* hover 状态 */

.about-button-split:hover {
  border-color: rgba(255, 255, 255, 0.4); /* 外框不变色，可有可无 */
}

/* 左侧不变 */
.about-button-split:hover .btn-text {
  background: transparent;
  color: #ffffff;
}

/* 右侧：背景变白，箭头变黑 */
.about-button-split:hover .btn-arrow {
  background: #ffffff;
  color: #000000;
}

/* 只有箭头旋转 -45° */
.about-button-split:hover .arrow-icon {
  color: #000000;
  transform: rotate(-45deg);
}

.services-section * {
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
               "Noto Sans SC", Arial, sans-serif !important;
}

/* ===== 我的故事 区 ===== */
.my-story-section {
  background: #000;
  color: #FFFCF5;
  padding: 280px 0 0;  /* 上 280px，让标题进入视窗；下方 0 px */
  min-height: 520vh;       /* 给四张图留足滚动距离，可再微调 */
  position: relative;
  overflow: visible;
}

/* 标题：固定在视窗中线（可以继续配合你之前的模糊逻辑） */
.my-story-title {
  margin: 0;
  font-size: clamp(120px, 8vw, 240px);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-align: center;

  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  z-index: 0;

  transition: filter 0.35s ease-out;

  text-shadow:
    0 0 4px rgba(255, 250, 240, 0.8),
    0 0 14px rgba(255, 247, 238, 0.55),
    0 0 32px rgba(255, 245, 236, 0.35);
  font-family: "Microsoft YaHei", "PingFang SC", "Heiti SC",
               "Noto Sans SC", sans-serif;
}

/* 保留你之前的模糊效果 */
.my-story-title.is-blurred {
  filter: blur(4px);
}

/* 图片容器：整块贴住视窗，始终全屏 */
.my-story-image-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 2;      /* 这一行我们等下讲 */
  margin-top: 45vh;  /* ⭐ 新增：控制图片“晚一点”才出现 */
}

/* 图片本体：只负责铺满 */
.my-story-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
}

/* 每一张“故事画面”的容器：负责透明度/缩放，让文字同步出现 */
.my-story-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;

  opacity: 0;
  transform: scale(1);
  transition:
    opacity 0.25s linear,
    transform 0.25s linear;
}

/* 右下角时间说明（与“我的故事”同气质） */
.my-story-caption{
  position: absolute;
  right: 42px;
  bottom: 34px;

  color: #FFFCF5;
  font-family: "Microsoft YaHei", "PingFang SC", "Heiti SC", "Noto Sans SC", sans-serif;

  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-align: right;

  opacity: 0.9;
  pointer-events: none;

  text-shadow:
    0 0 4px rgba(255, 250, 240, 0.8),
    0 0 14px rgba(255, 247, 238, 0.55),
    0 0 32px rgba(255, 245, 236, 0.35);
}

/* 四张图分别由 CSS 变量控制 */
.my-story-frame--1{
  opacity: var(--story-image1-opacity);
  transform: scale(var(--story-image1-scale));
}

.my-story-frame--2{
  opacity: var(--story-image2-opacity);
  transform: scale(var(--story-image2-scale));
}

.my-story-frame--3{
  opacity: var(--story-image3-opacity);
  transform: scale(var(--story-image3-scale));
}

.my-story-frame--4{
  opacity: var(--story-image4-opacity);
  transform: scale(var(--story-image4-scale));
}

.services-section {
  width: 100%;
  padding: 90px 3vw;
  box-sizing: border-box;
  background: #000;
}

/* ===== 标题部分（保持左对齐） ===== */
/* 让“一人内容制造机”跟 about 左侧标题一样 */
.services-header h1 {
  margin: 0 0 10px 0;
  font-size: clamp(40px, 7vw, 83px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  font-weight: 300;
  color: #FFFCF5;
  text-shadow:
    0 0 4px rgba(255, 250, 240, 0.8),
    0 0 14px rgba(255, 247, 238, 0.55),
    0 0 32px rgba(255, 245, 236, 0.35);
}

/* 让“我崇尚‘现代文艺复兴人’…”跟 about 右侧正文一样 */
.services-header p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: #FFFCF5;
  margin-bottom: 90px;
  max-width: 650px; /* 可以略微大一点，按你感觉改 */
}

/* ===== 两列卡片布局（更像你参考图） ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 10px;

  max-width: 2100px;   /* 🔥 原来 1800px */
  margin: 0 auto;
}

/* ===== 卡片样式（更紧凑、参考图风格） ===== */
.service-card {
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 36px;
  min-height: auto;

  transition: 
    background 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

/* ✅ hover 必须写在外面 */
.service-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.service-card h2 {
  font-size: 22px;
  margin-bottom: 16px;
  font-weight: 500;
}

.service-card p {
  font-size: 15px;
  line-height: 1.55;
  color: #cfcfcf;
}

/* Hover 轻微浮起 */
.service-card:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.12);
}

/* 卡片整体统一字体（黑体） */
.service-card,
.service-card * {
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
               "Noto Sans SC", Arial, sans-serif !important;
}

/* 卡片标题风格 */
.service-card h2 {
  font-size: 26px;
  font-weight: 300;          /* 稍比段落重一点，清晰但不突兀 */
  color: #FFFCF5;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

/* 卡片正文风格（和 about-right 统一） */
.service-card p {
  font-size: 16px;
  font-weight: 300;          /* 和你的 about-right 完全一致 */
  line-height: 1.6;
  color: #9c9c9c;            /* 比标题略浅一点，层级更好 */
  max-width: 100%;   /* 🔥 原来 90% */
}

/* ===== 账号推广区：底部渐变背景图 ===== */
.account-section {
  background: #000000;          /* 和整体页面保持一致的纯黑背景 */
  padding: 0px 0 0px;       /* 和上方内容、底部留出一点呼吸感 */
}

.account-inner {
  max-width: 1450px;            /* 区块整体宽度，避免贴满屏幕 */
  margin: 0 auto;
  padding: 0 0.5vw;               /* 和页面边缘留一点间距 */
}

/* 包住图片的容器，用来做圆角和遮罩 */
.account-image-mask {
  position: relative;
  overflow: hidden;             /* 让遮罩和圆角一起裁剪图片 */
  border-radius: 0px;          /* 图片不再是生硬的直角，可按喜好调 */
}

/* 实际图片 */
.account-image {
  display: block;
  width: 100%;
  height: auto;
}

/* 顶部黑色渐变遮罩：让图片上方自然融进页面黑色背景 */
.account-image-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* 上方黑 → 中间半透明 → 下方透明 */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.75) 18%,
    rgba(0, 0, 0, 0.3) 40%,
    transparent 70%
  );
}

/* 中心内容块：头像 + 按钮 */
.account-center-block {
  position: absolute;
  left: 50%;
  top: 60%;                         /* 整块的位置：略低于几何中心 */
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;                        /* 头像和按钮之间的距离 */
}

/* 圆形头像 */
.account-avatar {
  width: 210px;                     /* 头像大小，可改 120~180px */
  height: 210px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ===============================
   在这里找到我 —— 发光描边按钮
   和「更多关于我」右箭头保持一致
================================= */
.account-cta-button {
  text-decoration: none;   /* ✅ 关键：去掉下划线 */
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em; /* 建议保留轻微字距，让按钮更稳重 */
  color: #ffffff;

  padding: 12px 44px;
  background-color: #000000;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 0;
  cursor: pointer;

  /* ▼ 在这里加入辉光，与「一人内容制造机」完全一致 */
  text-shadow:
    0 0 4px rgba(255, 250, 240, 0.8),
    0 0 14px rgba(255, 247, 238, 0.55),
    0 0 32px rgba(255, 245, 236, 0.35);
  
  box-shadow: 0 0 0 rgba(255,255,255,0);
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.35s ease;
}

/* Hover */
.account-cta-button:hover {
  background-color: #ffffff;
  color: #000000;
  border-color: #ffffff;

  box-shadow:
    0 0 8px rgba(255,250,240,0.80),
    0 0 16px rgba(255,247,238,0.55),
    0 0 32px rgba(255,245,236,0.35);
}

/* 可选：简单的 hover 效果 */
.account-cta-button:hover {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* 按钮下方的短句（等线体、轻盈、无辉光） */
.account-quote {
  margin: 0;
  margin-top: -40px;      /* 让它离按钮稍微近一点，可根据你的截图微调 */
  
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.5em;  /* 汉字大字距，高级、稀疏、极简 */
  line-height: 1.8;
  
  color: #1A1A1A;         /* 深灰色，符合你底部背景的氛围 */
  text-align: center;

  font-family: 
    "DengXian", 
    "Microsoft YaHei", 
    "PingFang SC", 
    "Noto Sans SC", 
    sans-serif;
}

/* 图标区域容器 */
.account-socials {
  margin-top: -40px;
  display: flex;
  justify-content: center;
  gap: 39px;            /* 图标之间的距离 */
  flex-wrap: wrap;      /* 小屏幕自动换行 */ 

  transform: translateX(-3px); /* ← 向左移动 20px */
}

/* 单个项目 */
.social-item {
  display: flex;
  align-items: center;
  gap: 10px;            /* 图标与文字之间距离 */
  text-decoration: none;
  color: #1A1A1A;       /* 深灰，与短句一致 */
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.05em;

  font-family: 
    "DengXian",
    "Microsoft YaHei",
    "PingFang SC",
    "Noto Sans SC",
    sans-serif;

  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 图标大小 */
.social-item img {
  width: 24px;
  height: 24px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

/* hover 效果：轻微变亮与上浮 */
.social-item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.social-item:hover img {
  opacity: 1;
}

/* 整个底部区块 */
.footer-icon-section {
  background: #000000;
  padding: 28px 0 18px;   /* 上下留白，保持呼吸感 */
  text-align: center;
}

/* 图标按钮容器 */
.footer-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  transition: 
    border-color 0.25s ease,
    box-shadow 0.35s ease,
    transform 0.25s ease;
}

/* 图标本身 */
.footer-icon-btn img {
  width: 32px;
  height: 32px;
  opacity: 0.9;
  transition: opacity 0.25s ease, filter 0.35s ease;
  transform: none;        /* 删掉 translateY(-90px) */
}

/* hover 时：只有图标发光 */
.footer-icon-btn:hover img {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6))
          drop-shadow(0 0 14px rgba(255,255,255,0.35));
}

/* 悬停：发光、变亮、轻微浮起 */
.footer-icon-btn:hover {
  border-color: #ffffff;
  box-shadow: none;   /* ❌ 外框不发光 */
}

.footer-icon-btn:hover img {
  opacity: 1;
}

/* ===== Hero 区 · 底部文字导航（正文语言风格） ===== */

.hero-nav {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 36px;
}

.hero-nav a {
  /* ✅ 与“现代文艺复兴人…”正文完全一致 */
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: #FFFCF5;

  font-family: 
    "Microsoft YaHei",
    "PingFang SC",
    "Heiti SC",
    "Noto Sans SC",
    sans-serif;

  text-decoration: none;

  /* 导航需要一点“秩序感”，但不破坏正文气质 */
  letter-spacing: 0.12em;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

  display: inline-block;
  width: auto;
}

/* hover：极其克制 */
.hero-nav a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* ===== 底部无限滚动文本（最终版） ===== */
.marquee-section{
  background:#000;
  overflow:hidden;
  height: 260px;          /* 容器高度小于文字高度 => 自动裁切 */
  padding: 0;             /* 不要再用大 padding 顶出空白 */
  margin-top: 50px;   /* ✅ 拉开与上方导航的距离（核心） */
}

/* ✅ 英文 & 意大利语：底部大字更贴近页面底部 */
html[lang="zh-CN"] .marquee-section,
html[lang="en"] .marquee-section,
html[lang="it"] .marquee-section{
  height: 230px;
}

html[lang="en"] .marquee-track,
html[lang="it"] .marquee-track{
  transform: translateY(80px);
}

.marquee-track{
  display:flex;
  width:max-content;
  animation: marquee-left 52s linear infinite;
  transform: translateY(60px);  /* ✅ 只把文字往下推，形成“底部遮挡” */
}

.marquee-track span {
  font-family: "Noto Sans SC Display", sans-serif;
  font-weight: 500;
  font-size: 210px;
  color: #faf5ea;
  letter-spacing: 0.10em;

  /* ⚠️ 把之前所有 text-shadow 都删掉 */
}

@keyframes marquee-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ===== 目录页：自上而下滑出的纯黑整屏 ===== */
.menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 999;                 /* 确保盖住所有内容 */
  background: #000;

  transform: translateY(-100%);
  transition: transform 0.55s ease;
  will-change: transform;

  /* 目录页滑出时禁止点到下面的内容 */
  pointer-events: none;
}

/* 打开状态：滑到视口内 */
.menu-overlay.is-open{
  transform: translateY(0);
  pointer-events: auto;
}

/* 可选：右上角关闭按钮（先给一个最简单的） */
.menu-overlay__close{
  width: 36px;   /* 原来 56px */
  height: 36px;  /* 原来 56px */
  position: absolute;
  top: 22px;
  right: 26px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.menu-overlay__close:hover{
  opacity: 1;
}

/* ===== 目录页（参考图样式） ===== */
.menu-overlay{
  background:#000;
  z-index:9999;
}

.menu-panel{
  position: absolute;
  top: 7vh;
  left: clamp(20px, 3vw, 48px); 
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 36px);
  width: min(56vw, 900px);  /* ✅ 关键：一整条横向 hover 区域 */
}

.menu-overlay .menu-panel .menu-link{
  display: block;
  width: 100%;
  padding: 0;
  color: #faf5ea;
  text-decoration: none;
  font-family: "Noto Sans SC Display", "PingFang SC", "Microsoft Yahei", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: clamp(44px, 6.0vw, 110px);
  line-height: 0.95;
  transition: color 0.30s ease;
}

/* 当前页面：强状态辉光（非 hover） */
.menu-overlay .menu-panel .menu-link.is-active{
  color: #FFFCF5;

  text-shadow:
    0 0 4px rgba(255, 250, 240, 0.8),
    0 0 14px rgba(255, 247, 238, 0.55),
    0 0 36px rgba(255, 245, 236, 0.35),
    0 0 72px rgba(255, 243, 234, 0.15);

  /* 可选：略微更稳重 */
  letter-spacing: 0.03em;
}

/* hover：只有非当前页才变灰 */
.menu-overlay .menu-panel .menu-link:hover:not(.is-active){
  color: #4d4d4d;
}

/* 右上角 X */
.menu-overlay__close{
  position: absolute;
  top: 29px; /* 可选：稍微贴近角落 */
  right: 45px;
  font-size: 44px;
  color: #faf5ea;
  opacity: 0.9;

  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.9;

    opacity: 0.7;                  /* 平时有点透明 */
  transition: opacity 0.2s ease;  /* 平滑变化 */
}

.menu-overlay__close:hover,
.menu-overlay__close:active{
  opacity: 1;                    /* 触摸/悬停变不透明 */
}

.menu-overlay__close:hover{ opacity: 1; }

.menu-overlay__close-icon{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* 底部外链栏（固定在底部） */
.menu-bottom{
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 28px;

  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ✅ 四等分 */
  align-items: center;

  padding: 0;

  border: 1px solid #faf5ea;
}

.menu-bottom > .menu-bottom__item{
  position: relative;
}

/* 除了最后一个，其余右侧画分隔线 */
.menu-bottom > .menu-bottom__item:not(:last-child)::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 26px;
  background: #faf5ea;
}

/* 底部外链栏：变矮 */
.menu-bottom__item{
  position: relative;
  height: 100%;              /* ✅ 铺满这一等分 */
  
  color: #faf5ea;
  font-family: "Noto Sans SC Display", "PingFang SC", "Microsoft Yahei", sans-serif;

  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-decoration: none;
  opacity: 0.9;

  /* 过渡 */
  transition: background-color 0.25s ease, color 0.25s ease;

  padding: 12px 0;   /* ✅ 灰色背景的高度来源 */
}

.menu-bottom__item:hover{
  background-color: #1b1b1b;
  color: #faf5ea;
}

.menu-bottom__sep{ display:none; }

.menu-bottom .ext{
  font-size: 16px;
  transform: translateY(-1px);
}

.menu-arrow{
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: inline-block;

  transform: rotate(0deg);              /* 初始角度 */
  transition: transform 0.25s ease;     /* 关键：旋转过渡 */
}

.menu-bottom__item:hover .menu-arrow{
  transform: rotate(45deg);
}

/* ===== 语言切换下拉 ===== */
.lang-switch{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 9999;

  margin: 0;
  padding: 0;
  list-style: none;

  min-width: 50px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #faf5ea;
  box-shadow: 0 0 18px rgba(250,245,234,0.08);

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;

  right: -12px;   /* ← 向右推，数值你可以在 -8 ~ -20px 微调 */
}

.lang-switch.is-open .lang-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-item{
  width: 100%;
  padding: 12px 14px;  /* ✅ 把“呼吸感”给 item 本身 */
  background: transparent;
  border: none;

  color: #faf5ea;
  font-family: 
    "Noto Sans SC",
    "PingFang SC",
    "Microsoft YaHei",
    "Heiti SC",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: left;

  cursor: pointer;

  line-height: 0.7;
}

.lang-item:hover{
  background: rgba(77,77,77,0.65);
}

.lang-item.is-active{
  background: rgba(77,77,77,0.85);
}

/* 菜单打开时锁定页面滚动（比直接写 body.style.overflow 更稳） */
body.is-locked {
  overflow: hidden;
}


/* 响应式：小屏幕上下布局 */
@media (max-width: 900px) {
  .about-inner {
    flex-direction: column;
    gap: 32px;
  }

  .about-left,
  .about-right {
    flex: 1 1 auto;
  }

  .about {
    padding: 72px 6vw 96px;
  }
}

/* ===============================
   Responsive Patch (Paste to END)
================================ */

/* 让页面在所有设备都有“统一边距”可控 */
:root{
  --gutter: clamp(16px, 4vw, 64px);
}

/* ---------- <= 1024px (平板横屏) ---------- */
@media (max-width: 1024px){
  /* About：字体稍收一点 */
  .about-right{ font-size: 20px; }
  .about-inner{ gap: 40px; }

  /* Services：整体留白小一点 */
  .services-section{ padding: 72px var(--gutter); }

  /* 我的故事：标题稍小，滚动距离略短 */
  .my-story-section{ min-height: 460vh; }
  .my-story-title{ font-size: clamp(88px, 9vw, 170px); }
}

/* ---------- <= 900px (你已有断点，这里补细节) ---------- */
@media (max-width: 900px){
  .about-left{ margin-left: 0; }
  .about-right{ font-size: 18px; }
  .about-tagline{ font-size: 18px; }
}

/* ---------- <= 768px (手机/平板竖屏关键断点) ---------- */
@media (max-width: 768px){
  /* 只影响按钮：让它在 about-right 内居中 */
  .about-right{
    display: flex;
    flex-direction: column;
  }
  .about-button-split{
    align-self: center;
  }

  /* Header 内边距 */
  .site-header__inner{ padding-inline: var(--gutter); }
  .page-content{ padding-inline: var(--gutter); }

  /* Hero 标题 */
  .hero-title{
    white-space: normal;
    max-width: 10.5em;
    bottom: 18vh;
    left: var(--gutter);
  }

  /* Hero 底部导航 */
  .hero-nav{
    gap: 18px;
    flex-wrap: wrap;
    padding-inline: var(--gutter);
  }

  /* Services：两列 => 一列 */
  .services-grid{ grid-template-columns: 1fr; }
  .service-card{ padding: 26px; min-height: 0; }

  /* 账号区：移动端尺寸 */
  .account-avatar{ width: 140px; height: 140px; }
  .account-cta-button{
    font-size: 18px;
    padding: 10px 26px;
  }
  .account-quote{
    font-size: 14px;
    letter-spacing: 0.22em;
    line-height: 1.9;
    margin-top: -10px;
    padding-inline: 10px;
  }
  .account-socials{
    gap: 18px;
    margin-top: -10px;
    transform: none;
  }
  .social-item{ font-size: 14px; }
  .social-item img{ width: 20px; height: 20px; }

  /* 目录页：列表区域占满一点，底部四等分 => 2x2 */
  .menu-panel{
    left: var(--gutter);
    width: calc(100vw - (var(--gutter) * 2));
  }
  .menu-bottom{
    left: var(--gutter);
    right: var(--gutter);
    grid-template-columns: repeat(2, 1fr);
  }
  /* 2列时竖分隔线不再适用：关掉 */
  .menu-bottom > .menu-bottom__item::after{ display:none; }

  /* 跑马灯：整体变矮，字号变小 */
  .marquee-section{
    height: 160px;
    margin-top: 36px;
  }
  .marquee-track{ transform: translateY(34px); }
  .marquee-track span{ font-size: 120px; }
}

/* ---------- <= 480px (小屏手机) ---------- */
@media (max-width: 480px){
  /* Hero 标题再收一点，避免三行太挤 */
  .hero-title{
    font-size: clamp(40px, 13vw, 74px);
    max-width: 9.5em; /* 保持你之前允许换行的逻辑 */
  }

  /* Services 卡片：文字更舒展 */
  .service-card h2{ font-size: 22px; }
  .service-card p{ font-size: 15px; max-width: 100%; }

  /* 我的故事再短一点，适配很矮的屏幕 */
  .my-story-section{ min-height: 320vh; }

  /* 账号区按钮更适合拇指点击 */
  .account-cta-button{
    width: 100%;
    text-align: center;
  }

  /* 跑马灯再小一点 */
  .marquee-section{ height: 140px; }
  .marquee-track span{ font-size: 96px; }
}

@media (min-width: 769px){
  .services-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}