:root {
  --ink: #211d2b;
  --muted: #77727f;
  --cream: #faf8f4;
  --purple: #7260d8;
  --lavender: #e9e5fb;
  --line: #e7e2dc;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
.site-header {
  height: 76px;
  padding: 0 max(6vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250, 248, 244, 0.82);
  backdrop-filter: blur(15px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  box-shadow: 0 2px 8px rgba(33, 29, 43, 0.16);
}
.desktop-nav {
  display: flex;
  align-items: center; /* 强制垂直居中，解决高低不平 */
  justify-content: center; /* 水平居中 */
  gap: 24px; /* 间距 */
  color: #85808b;
  font-size: 16px;
  flex-wrap: nowrap; /* 强制不换行 */
}

/* 统一所有链接和按钮的样式 */
.desktop-nav a,
.desktop-nav button,
.desktop-nav .nav-link {
  margin: 0 !important; /* 清除所有外边距 */
  padding: 0 !important; /* 清除内边距，防止撑开高度 */
  line-height: 1; /* 锁定行高 */
  text-decoration: none;
  color: inherit; /* 继承父级颜色 */
  display: inline-flex; /* 内部也使用 Flex 对齐 */
  align-items: center;
  white-space: nowrap; /* 禁止文字换行 */
}

.desktop-nav a:hover,
.desktop-nav .active {
  color: var(--ink);
}
.desktop-nav a:hover,
.desktop-nav .active {
  color: var(--ink);
}
.desktop-nav .active:after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: var(--purple);
  border-radius: 50%;
  margin: 7px auto 0;
}
.menu-toggle {
  display: none;
  border: 0;
  background: none;
  font-size: 24px;
}
.hero {
  min-height: 710px;
  padding: 170px max(10vw, 40px) 90px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #e7e1f7 0%, #f9e2d0 48%, #f8eee8 100%);
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.35),
    transparent 70%
  );
  pointer-events: none;
}
.hero-copy {
  max-width: 620px;
  position: relative;
  z-index: 1;
}
.eyebrow {
  color: var(--purple);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 20px;
}
.hero h1 {
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.12;
  letter-spacing: -0.065em;
  margin: 0 0 25px;
  font-weight: 900;
}
.hero h1 em,
.category-intro h2 em {
  color: var(--purple);
  font-style: normal;
}
.hero-description {
  max-width: 425px;
  color: #6e6975;
  line-height: 1.9;
  font-size: 15px;
  margin-bottom: 34px;
}
.primary-button,
.outline-button {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  border-radius: 99px;
  padding: 15px 22px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  transition: 0.25s;
}
.primary-button:hover {
  transform: translateY(-3px);
  background: var(--purple);
}
.primary-button span,
.outline-button span {
  font-size: 20px;
  line-height: 10px;
}
.hero-orbit {
  position: absolute;
  border: 1px solid rgba(114, 96, 216, 0.25);
  border-radius: 50%;
  z-index: 0;
}
.orbit-large {
  width: 570px;
  height: 570px;
  right: 6%;
  top: 100px;
}
.orbit-small {
  width: 300px;
  height: 300px;
  right: 18%;
  top: 235px;
  background: rgba(255, 255, 255, 0.2);
}
.hero-orbit:after {
  content: "✦";
  position: absolute;
  color: #fff;
  font-size: 42px;
  right: 7%;
  top: 6%;
  text-shadow: 0 0 30px #fff;
}
.glow-one,
.glow-two {
  position: absolute;
  border-radius: 50%;
  filter: blur(5px);
}
.glow-one {
  width: 360px;
  height: 360px;
  background: #b5a6ed;
  opacity: 0.28;
  right: 15%;
  top: 170px;
}
.glow-two {
  width: 240px;
  height: 240px;
  background: #f2a77d;
  opacity: 0.23;
  right: 3%;
  bottom: -80px;
}
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: max(10vw, 40px);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #8b8494;
  display: flex;
  gap: 10px;
  align-items: center;
}
.scroll-hint span {
  width: 28px;
  height: 1px;
  background: var(--purple);
}
.content-section {
  max-width: 1180px;
  margin: auto;
  padding: 110px 32px;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 45px;
}
.section-heading h2,
.category-intro h2 {
  font-size: 43px;
  letter-spacing: -0.06em;
  margin: 0;
}
.text-link {
  font-size: 13px;
  color: var(--muted);
}
.text-link span {
  color: var(--purple);
  font-size: 20px;
  margin-left: 8px;
}
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
}
.article-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #eee9e4;
  transition: 0.3s;
}
.article-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 35px rgba(42, 29, 66, 0.09);
}
.card-visual {
  height: 200px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.card-visual > span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
.visual-purple {
  background: linear-gradient(135deg, #8071df, #433678);
}
.visual-orange {
  background: linear-gradient(135deg, #f1b27f, #db725c);
}
.visual-blue {
  background: linear-gradient(135deg, #9cc9d9, #55729a);
}
.visual-symbol {
  font-family: serif;
  color: rgba(255, 255, 255, 0.9);
  font-size: 132px;
  line-height: 1;
  position: absolute;
  right: 27px;
  bottom: -18px;
  transform: rotate(-18deg);
}
.card-content {
  padding: 24px;
}
.card-meta {
  font-size: 11px;
  color: var(--purple);
  margin: 0 0 15px;
}
.card-content h3 {
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}
.card-content > p:not(.card-meta) {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 20px;
}
.read-more {
  font-size: 12px;
  font-weight: 700;
}
.category-section {
  background: #eeebf7;
  padding: 100px max(10vw, 40px);
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 8%;
}
.category-intro h2 {
  font-size: 54px;
  line-height: 1.1;
}
.category-intro > p:last-child {
  color: var(--muted);
  font-size: 14px;
  margin-top: 24px;
}
.category-list a {
  display: grid;
  grid-template-columns: 40px 1fr 110px 25px;
  align-items: center;
  padding: 23px 0;
  border-bottom: 1px solid #d8d2e7;
  transition: 0.25s;
}
.category-list a:hover {
  color: var(--purple);
  padding-left: 8px;
}
.category-list span {
  font-size: 12px;
  color: #a49db6;
}
.category-list strong {
  font-size: 17px;
}
.category-list small {
  color: #918b9d;
  font-size: 12px;
}
.category-list b {
  font-size: 21px;
  font-weight: 400;
}
.about-section {
  max-width: 980px;
  margin: auto;
  padding: 110px 32px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.about-badge {
  flex: 0 0 110px;
  height: 110px;
  border-radius: 35px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 52px;
  font-weight: 900;
}
.about-section h2 {
  font-size: 29px;
  margin: 0 0 12px;
  letter-spacing: -0.05em;
}
.about-section p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
  max-width: 530px;
  margin: 0;
}
.outline-button {
  margin-left: auto;
  background: transparent;
  border: 1px solid #cfc8dc;
  color: var(--ink);
  white-space: nowrap;
}
.outline-button:hover {
  background: var(--ink);
  color: #fff;
}
footer {
  border-top: 1px solid var(--line);
  padding: 28px max(6vw, 32px);
  display: flex;
  gap: 25px;
  justify-content: space-between;
  color: #99939e;
  font-size: 12px;
}
footer div {
  display: flex;
  gap: 20px;
}
footer a:hover {
  color: var(--purple);
}
@media (max-width: 700px) {
  .site-header {
    height: 64px;
    padding: 0 20px;
  }
  .desktop-nav {
    display: none;
  }
  .desktop-nav.mobile-open {
    position: absolute;
    display: flex;
    top: 64px;
    left: 0;
    right: 0;
    padding: 18px 20px 22px;
    flex-direction: column;
    gap: 18px;
    background: rgba(250, 248, 244, 0.98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 25px rgba(33, 29, 43, 0.08);
  }
  .desktop-nav.mobile-open a {
    font-size: 15px;
  }
  .desktop-nav.mobile-open .active:after {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .hero {
    min-height: 680px;
    padding: 140px 25px 70px;
  }
  .hero h1 {
    font-size: 46px;
  }
  .hero-description {
    font-size: 14px;
  }
  .orbit-large {
    width: 360px;
    height: 360px;
    right: -130px;
    top: 370px;
  }
  .orbit-small {
    width: 190px;
    height: 190px;
    right: -30px;
    top: 455px;
  }
  .glow-one {
    right: -50px;
    top: 410px;
  }
  .content-section {
    padding: 75px 20px;
  }
  .section-heading {
    align-items: start;
  }
  .section-heading h2 {
    font-size: 36px;
  }
  .article-grid {
    grid-template-columns: 1fr;
  }
  .card-visual {
    height: 170px;
  }
  .category-section {
    padding: 75px 25px;
    display: block;
  }
  .category-intro {
    margin-bottom: 42px;
  }
  .category-intro h2 {
    font-size: 47px;
  }
  .category-list a {
    grid-template-columns: 35px 1fr 20px;
  }
  .category-list small {
    display: none;
  }
  .about-section {
    padding: 75px 25px;
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .about-badge {
    width: 75px;
    height: 75px;
    border-radius: 23px;
    font-size: 35px;
  }
  .about-section h2 {
    font-size: 23px;
  }
  .about-section .outline-button {
    grid-column: 1/-1;
    justify-self: start;
    margin: 12px 0 0;
  }
  footer {
    padding: 25px 20px;
    flex-wrap: wrap;
  }
  footer span:nth-child(2) {
    order: 3;
    width: 100%;
  }
}
/* --- 顶部导航栏的搜索按钮微调 --- */
.nav-link {
  cursor: pointer;
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承文字颜色 */
  font-size: inherit; /* 保证字号和别的菜单一样大 */
  line-height: inherit; /* 保证行高一致，这对齐很关键 */
  white-space: nowrap; /* 【关键】禁止文字换行 */
  display: inline-flex; /* 【关键】用 inline-flex 替代 inline-block，对齐更稳 */
  align-items: center; /* 内部文字垂直居中 */
  margin: 0; /* 【关键】清除所有外边距，防止把别人挤走 */
}

/* --- 搜索弹窗背景 (遮罩层) --- */
.search-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
  backdrop-filter: blur(8px); /* 毛玻璃效果 */
  z-index: 9999;
  display: none; /* 默认隐藏 */
  justify-content: center;
  align-items: flex-start;
  padding-top: 15vh; /* 距离顶部的距离 */
}

/* 激活时显示 (JS控制) */
.search-modal-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

/* --- 搜索框主体 --- */
.search-modal-content {
  width: 600px;
  max-width: 90%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  padding: 24px;
  border: 1px solid #f0f0f0;
}

.search-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  color: #333;
  font-weight: bold;
  font-size: 1.1rem;
}

.close-icon {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 28px;
  color: #999;
  line-height: 1;
  padding: 0;
}
.close-icon:hover {
  color: #333;
}

/* --- 输入框样式 (仿图4圆角风格) --- */
#modalSearchInput {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  border: 2px solid #eee;
  border-radius: 50px; /* 大圆角 */
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s;
  background: #f9f9f9;
}

#modalSearchInput:focus {
  border-color: #6c5ce7; /* 聚焦时的紫色边框 */
  background: #fff;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.1);
}

/* --- 搜索结果列表 --- */
.search-results-list {
  margin-top: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.result-item {
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 8px;
}

.result-item:hover {
  background: #f0f2f5;
}

.result-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
  font-size: 16px;
}

.result-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 只显示两行摘要 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 定义淡入动画的关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px); /* 从上面一点点落下来 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 确保所有导航链接样式统一 */
.nav-link {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父级颜色，保证和别的菜单一样 */
  font-size: inherit; /* 保证字号一样大 */
  display: inline-block;
  padding: 10px 0; /* 增加一点上下点击区域，和别的菜单手感一致 */
  margin: 0 15px; /* 左右间距，你可以根据实际情况调整这个数值 */
  cursor: pointer;
}
/* 鼠标悬停时的效果，最好也和别的菜单保持一致 */
.nav-link:hover {
  opacity: 0.7; /* 或者改成你网站特有的高亮色 */
}
/* --- 手机端菜单强制修复 --- */
@media (max-width: 768px) {
  /* 1. 找到承载菜单的容器，强制它变成垂直列表 */
  .desktop-nav {
    flex-direction: column !important; /* 强制垂直排列 */
    align-items: flex-start !important; /* 强制左对齐 */
    gap: 0 !important; /* 清除间距，用 padding 控制 */
    width: 100%;
    padding: 20px 0;
  }

  /* 2. 让所有菜单项（包括搜索）都占满一行并左对齐 */
  .desktop-nav a,
  .desktop-nav .nav-link {
    display: block !important; /* 强制占满一行 */
    width: 100% !important; /* 宽度拉满 */
    text-align: left !important; /* 文字靠左 */
    padding: 15px 24px !important; /* 设置统一的上下左右内边距 */
    margin: 0 !important; /* 清除所有外边距 */
    box-sizing: border-box; /* 防止宽度计算溢出 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 可选：加个淡淡的分割线 */
  }

  /* 3. 如果“搜索”之前有特殊的 ID 样式，这里也要覆盖掉 */
  .search-trigger {
    width: 100% !important;
    text-align: left !important;
    padding: 15px 24px !important;
  }
}