:root{
  /* 暗色(默认)。跟 console 共用 localStorage 键 kc-theme, 两边主题一致。 */
  --bg:#202124; --surface:#303134; --fg:#e8eaed; --fg2:#bdc1c6;
  --muted:#9aa0a6; --border:#5f6368; --accent:#8ab4f8; --accent2:#669df6;
  --accent-soft:#c2e7ff; --pure:#ffffff;
  --card:#2a2b2e; --card-hover:#35363a; --shadow:rgba(0,0,0,.35);
  --grad1:#33333669; --grad2:#1d1d2354; --grad3:#171c27ba;
  --nav-bg:rgba(32,33,36,.72); --nav-bg-solid:rgba(32,33,36,.95);
  --nav-border:rgba(255,255,255,.06);   /* 暗色下要几乎看不见, 不能用不透明灰 */
  --research:#bdc1c6;   /* 暗色: 比 logo(#e8eaed) 略暗, 与亮色下的关系一致 */
  --grid-line:rgba(255,255,255,.045);
}
html[data-theme="light"]{
  /* 跟控制台(AdminLTE 默认亮色)对齐: body #f4f6f9 / 卡片白 / 正文 #212529
     / primary #007bff / muted #6c757d / border #dee2e6 */
  --bg:#f4f6f9; --surface:#e9ecef; --fg:#212529; --fg2:#343a40;
  --muted:#6c757d; --border:#dee2e6; --accent:#007bff; --accent2:#0069d9;
  --accent-soft:#004a99; --pure:#212529;
  --card:#ffffff; --card-hover:#f8f9fa; --shadow:rgba(0,0,0,.1);
  --grad1:#f4f6f969; --grad2:#e9ecef54; --grad3:#ffffffba;
  --nav-bg:rgba(255,255,255,.82); --nav-bg-solid:rgba(255,255,255,.96);
  --nav-border:rgba(0,0,0,.08);
  --research:#2f3034;   /* 亮色: 指定色值 */
  --grid-line:rgba(0,0,0,.05);
}
/* 首屏大标题在暗色下有蓝色辉光, 亮色下辉光会糊成一团, 关掉 */
/* 全站不用发光: 稳重优先 */
.hero-title,.sc-title,.search-title{text-shadow:none}
/* 不引 Google Fonts CDN —— 国内访问慢且不稳。"Google Sans" 保留在字体栈里,
   本机有就用, 没有就回落到系统 UI 字体, 视觉差异很小但省一次跨境请求。 */

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  overflow-x: hidden;
  scroll-behavior: smooth; /* 全局平滑滚动 */
  /* 去除滚动条 */
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
}
/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
body::-webkit-scrollbar {
  display: none;
}

a {
  color: var(--fg);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.scroll-container {
  /* 隐藏滚动条 */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* .section { */
/* height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  color: white;
  text-align: center;
  width: 100%;
  box-sizing: border-box; */
/* } */
.section {
  min-height: 100vh;
  width: 100%;
  padding-top: 70px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: calc(var(--vh, 1vh) * 100);
  height: fit-content; /* 关键：允许内容撑开高度 */
}

.section h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.section p {
  font-size: 1.2rem;
  max-width: 600px;
  line-height: 1.6;
}

.nav-dots {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  margin: 10px 0;
  cursor: pointer;
  transition: transform 0.3s, background-color 0.3s;
}

.dot.active {
  background-color: white;
  transform: scale(1.3);
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
  }
  60% {
  }
}

/* Hero Section - First Screen */
.hero-section {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 原来是一层蓝色渐变底。去渐变后不能留实心蓝(整屏会变蓝),
     首屏底色跟全站一致, 视觉重量交给上面那层网格。 */
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Animated background */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 原来是三层蓝色光晕在缓慢浮动。改成正交网格 —— 不发光, 靠结构感立住。 */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 45%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 45%, #000 35%, transparent 100%);
  pointer-events: none;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(20px) rotate(-1deg);
  }
}

.hero-content {
  text-align: center;
  z-index: 1;
  max-width: 800px;
  padding: 0 2rem;
  animation: slideInUp 1s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  color: var(--accent);
  font-size: 4.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  letter-spacing: -0.02em;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    filter: drop-shadow(0 0 10px rgba(138, 180, 248, 0.3));
  }
  to {
    filter: drop-shadow(0 0 30px rgba(138, 180, 248, 0.6));
  }
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--fg2);
  margin-bottom: 3rem;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  animation: fadeIn 1s ease-out 0.5s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.scroll-hint {
  position: fixed;
  bottom: 1.5rem;
  inset-inline-end: 1.75rem;   /* 挪到右下角, 不再压着正文中线 */
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  animation: bounce 2s infinite;
  cursor: pointer;
  transition: color 0.3s ease;
  text-align: center;
  white-space: nowrap;
}

.scroll-hint:hover {
  color: var(--accent);
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

.scroll-arrow {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.2rem;
  animation: arrowBounce 2s infinite;
}

@keyframes arrowBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(5px);
  }
  60% {
    transform: translateY(2px);
  }
}

/* introduction Styles */
.introduction-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.introduction-title {
  /* font-size: 1.85rem !important; */
  padding-bottom: 2rem;
  color: var(--pure);
}
.introduction-content {
  color: var(--fg2);
  font-size: 1.25rem;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  padding: 1rem 16rem;
}
.slide-up {
  animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Search Section - Second Screen */
.search-section {
  width: 100%;
  /* 不再自己要 100vh —— 父级 .section 已是 min-height:100vh + padding-top:70px,
     叠加后 section7 比视口高 70px, 滚到顶时底部会露出下一屏的蓝边。 */
  min-height: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 内边距挪给 .search-container —— 留在这里会让蓝块左右下各差一条白边;
     align-items 用 stretch, 否则蓝块宽度会被内容撑不满。 */
  align-items: stretch;
  padding: 0;
  background-color: var(--bg);
  position: relative;
}

.search-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;        /* 从 .search-section 挪过来的 */
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  animation: fadeInUp 1.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down {
  animation: slideDown 0.8s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.search-title {
  font-size: 3.75rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--pure);
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  letter-spacing: -0.02em;
}

.search-tagline {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2rem;
  text-align: center;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 400;
}

/* Search Box */
.search-box {
  width: 100%;
  max-width: 800px;
  display: flex;
  border: 1px solid var(--border)00;
  border-radius: 24px;
  padding: 0.5rem 1rem;
  background-color: var(--border);
  margin: 0 auto;
  transition: all 0.3s ease;
}

.search-box:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px var(--shadow);
}

.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 4px 16px var(--shadow);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background-color: transparent;
  color: var(--fg);
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 400;
}

.search-box input::placeholder {
  color: var(--muted);
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 400;
}

.search-box button {
  border: none;
  /* background-color: var(--accent-soft); */
  background: var(--accent);
  color: var(--bg);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  transition: all 0.3s ease;
}

.search-box button:hover {
  box-shadow: 0 8px 30px var(--shadow);
}

/* Features Section */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
  max-width: 800px;
  width: 100%;
}

.feature {
  text-align: center;
  padding: 2rem;
  background: rgba(48, 49, 52, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(95, 99, 104, 0.1);
  transition: all 0.3s ease;
}

.feature:hover {
  background: rgba(48, 49, 52, 0.8);
  border-color: rgba(138, 180, 248, 0.4);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.feature-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 0.5rem;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.feature-desc {
  font-size: 0.95rem;
  color: var(--muted);
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* Footer */
footer {
  width: 100%;
  text-align: center;
  padding: 1rem 1rem;
  font-size: 0.875rem;
  color: var(--border);
  background: rgba(16, 16, 20, 0.8);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(95, 99, 104, 0.2);
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  position: absolute;
  bottom: 0;
}

footer a:hover {
  color: var(--accent);
}

/* Responsive Design */

@media (max-width: 480px) {
  .hero-content {
    padding: 0 1rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .search-title {
    font-size: 2rem;
  }

  .search-box {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .search-box button {
    width: 100%;
  }
}

/* Navigation Styles */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* 跟主题走, 别写死深色 —— 白天模式下深色导航会跟浅色页面打架 */
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nav-border);
  padding: 1rem 2rem;
  transition: all 0.3s ease;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.navbar.scrolled {
  background: var(--nav-bg-solid);
  backdrop-filter: blur(20px);
  border-bottom-color: var(--nav-border);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pure);
  text-decoration: none;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  letter-spacing: -0.02em;
  transition: all 0.3s ease;
}

.nav-logo:hover {
  color: var(--accent2);
  text-decoration: none;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: var(--fg2);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  height: 100%;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.nav-link:hover {
  color: var(--accent);
  background: rgba(138, 180, 248, 0.1);
  text-decoration: none;
}

.nav-link:active {
  transform: translateY(0);
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg2);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.mobile-menu-toggle:hover {
  color: var(--accent);
  background: rgba(138, 180, 248, 0.1);
}

/* Mobile Navigation Styles */

/* Adjust hero section for fixed navbar */
.hero-section {
  height: 100vh;
  box-sizing: border-box;
  padding-top: 80px; /* Add space for fixed navbar */
}

/* FAQ */
.faq-list {
  margin-left: 2rem;
}

.FAQs-text {
  padding: 1rem;
}
.FAQs-text h1 {
  position: absolute;
  left: 6rem;
  top: 1rem;
}
.FAQs-text h4 {
  position: absolute;
  left: 6rem;
  top: 5rem;
  color: rgba(255, 255, 255, 0.3);
}

.faq-item {
  border-bottom: 0.0625rem solid transparent; /* 保留边框占位 */
  position: relative;
}
.faq-item-line {
  width: 100%;
  height: 0.0425rem;
  background-image: var(--bg);
  position: absolute;
  left: 0;
  bottom: 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  padding: 1.25rem 1.5625rem 1.25rem 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease;
  position: relative;
  border-radius: 0.625rem;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.faq-question:hover {
  color: var(--accent);
  background: rgba(138, 180, 248, 0.1);
  box-shadow: 0 4px 12px var(--shadow);
  transition: all 0.3s;
}

.faq-toggle {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.125rem;
  font-weight: bold;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-right: 0.9375rem;
}

.question-text {
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  /* color: var(--bg); */
  margin: 0;
  flex: 1;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  /* background: white; */
}

.faq-answer-content {
  padding: 0.725rem 1.5625rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}
.faq-answer-content p {
  font-size: 0.9375rem;
  text-align: left;
}

.faq-answer p {
  margin-bottom: 0.9375rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* 平滑动画 */
.faq-item {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.container-price {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
}

.header {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  background: var(--accent);
  color: var(--bg);
  margin: -1rem -1rem 2rem -1rem;
  border-radius: 0 0 1.5rem 1.5rem;
}

.header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.header p {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.hero-stats {
  background: rgba(255, 255, 255, 0.2);
  padding: 1rem;
  border-radius: 0.75rem;
  display: flex;
  justify-content: space-around;
  backdrop-filter: blur(0.625rem);
  border: 0.0625rem solid rgba(255, 255, 255, 0.3);
}

.hero-stat {
  text-align: center;
}

.hero-number {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
}

.hero-label {
  font-size: 0.8rem;
  opacity: 0.9;
}

.value-proposition {
  background: var(--accent);
  color: var(--bg);
  text-align: center;
  padding: 1.25rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 0.5rem 1.5625rem var(--shadow);
}

.value-text {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.value-detail {
  font-size: 0.9rem;
  opacity: 0.9;
}

.api-grid {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.85rem;
}

.api-card {
  width: 18rem;
  background: var(--surface);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 0.25rem 1.25rem var(--shadow);
  border: 0.0625rem solid var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.api-card::before { content: none; /* blue-bar removed 0823 */ }

.api-card:hover {
  box-shadow: 0 0.75rem 2.5rem var(--shadow);
  border-color: var(--accent);
}

.api-card.featured::before { content: none; /* blue-bar removed 0823 */ }

.featured-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--accent);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.api-header {
  margin-bottom: 1.25rem;
}

.api-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pure);
  margin-bottom: 0.5rem;
}

.api-code {
  font-family: "SF Mono", "Monaco", "Courier New", monospace;
  font-size: 0.8rem;
  color: var(--fg2);
  background: var(--bg);
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  display: inline-block;
  border: 0.0625rem solid var(--border);
}

.pricing-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--fg);
  border-radius: 0.75rem;
}

.price-info {
  flex: 1;
}

.price-main {
  font-size: 2rem;
  font-weight: 700;
  color: var(--bg);
  line-height: 1;
}

.price-unit {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.price-single {
  text-align: right;
  color: var(--muted);
}

.price-single-value {
  font-size: 0.9rem;
  font-weight: 600;
}

.price-single-label {
  font-size: 0.75rem;
}

.comparison-section {
  background: #fef2f2;
  border: 0.0625rem solid #fecaca;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.comparison-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.competitor-info {
  flex: 1;
}

.competitor-name {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.125rem;
}

.competitor-price {
  font-size: 1rem;
  font-weight: 600;
  color: #ef4444;
}

.savings-badge {
  background: #ef4444;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 1.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.savings-calculation {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.features-list {
  list-style: none;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--accent);
}

.feature-item:last-child {
  margin-bottom: 0;
}

.feature-icon {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  flex-shrink: 0;
  margin: auto 0;
}

.unique-badge {
  background: var(--muted);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 1.25rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.cta-section {
  text-align: center;
  margin-top: 2.5rem;
  padding: 2rem 1rem;
  background: var(--surface);
  border-radius: 1.25rem;
  box-shadow: 0 0.25rem 1.25rem var(--shadow);
  border: 0.0625rem solid var(--border);
}

.cta-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pure);
  margin-bottom: 0.5rem;
}

.cta-subtitle {
  color: var(--fg2);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.cta-button {
  background: var(--accent);
  color: var(--bg);
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0.25rem 1.25rem var(--shadow);
}

.cta-button:hover {
  box-shadow: 0 0.5rem 1.875rem var(--shadow);
}

/* 动画效果 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(1.875rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .api-card {
  animation: slideUp 0.6s ease-out forwards;
} */

/* .api-card:nth-child(1) {
  animation-delay: 0.1s;
}
.api-card:nth-child(2) {
  animation-delay: 0.2s;
}
.api-card:nth-child(3) {
  animation-delay: 0.3s;
} */
/* 引导区域 */
.guide-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.guide-card-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.guide-title {
  font-size: 1.4rem;
  padding-bottom: 3rem;
  color: var(--pure);
}
.guide-card {
  margin: 1rem;
  width: 14rem;
  height: 16rem;
  padding: 1rem;
  box-sizing: border-box;
  /* border: 0.0625rem solid var(--accent); */
  background-color: var(--bg);
  border-radius: 2rem;
  color: var(--fg2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.825rem;
}
.guide-icon {
  padding: 3rem 0 1rem;
  width: 3rem;
  height: auto;
}
.guide-text {
  text-indent: 2em;
}

.gradient-border {
  position: relative;
  width: 14rem;
  height: 16rem;
  border-radius: 25px;
}
.gradient-border::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: var(--accent);
  z-index: -1;
  border-radius: inherit;
}
@keyframes rotateGradient {
  from {
    background-image: var(--accent);
  }
  to {
    background-image: var(--accent);
  }
}
.animated::before {
  animation: rotateGradient 5s linear infinite;
}

.guide-card.featured::before {
  height: 0.375rem;
  background: var(--accent);
}
.guide-next1 {
  padding-top: 2rem;
  font-size: 1.6rem;
}
.guide-next2 {
  padding-top: 2rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* 优势区域 */
.container-advantage {
  padding: 6rem 0 4rem;
  text-align: center;

  border-radius: 0 0 3rem 3rem;
  margin-bottom: 4rem;
}

.container-advantage h2 {
  color: var(--accent);
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.container-advantage p {
  font-size: 1rem;
  color: var(--fg2);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.advantage-stats {
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
  border-radius: 0.635rem;
}

.advantage-stat {
  text-align: center;
}

.advantage-stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  display: block;
}

.advantage-stat-label {
  font-size: 1rem;
  color: var(--fg2);
  margin-top: 0.5rem;
}

/* 价值主张 */
.value-section {
  padding: 4rem 0;
  text-align: center;
}

.value-highlight {
  background: var(--accent);
  color: var(--bg);
  padding: 2rem 3rem;
  border-radius: 2rem;
  display: inline-block;
  margin-bottom: 3rem;
  box-shadow: 0 1rem 3rem var(--shadow);
}

.value-highlight h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.value-highlight p {
  font-size: 1.1rem;
  opacity: 0.9;
}
@media (max-width: 768px) {
  .section {
    height: fit-content;
    touch-action: pan-y;
    overscroll-behavior: none;
    margin-bottom: 0;
  }
  .api-grid {
    display: flex;
    flex-direction: column; /* 单列布局 */
    gap: 1.5rem;
  }

  .api-card {
    width: 100%;
    max-width: 350px;
  }
  body {
    padding: 0.625rem;
  }

  .faq-title {
    padding: 1.25rem;
  }

  .faq-title h1 {
    font-size: 1.5rem;
  }

  .faq-question {
    padding: 0.9375rem 1.25rem;
  }

  .faq-answer-content {
    padding: 1.25rem;
  }

  .question-text {
    font-size: 0.9375rem;
    padding-right: 0.9375rem;
  }
  .hero-section {
    height: 100vh;
    box-sizing: border-box;
    padding-top: 70px; /* Adjust for mobile navbar height */
  }
  .section h1 {
    font-size: 2.5rem;
  }
  .section p {
    font-size: 1rem;
  }
  .nav-dots {
    right: 15px;
  }
  .hero-title {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .search-title {
    font-size: 2.5rem;
  }

  .features {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .navbar {
    padding: 1rem;
  }

  .nav-menu {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(32, 33, 36, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(95, 99, 104, 0.1);
    flex-direction: column;
    padding: 2rem;
    gap: 1rem;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px var(--shadow);
  }

  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem;
    font-size: 1.1rem;
    border-radius: 8px;
  }

  .mobile-menu-toggle {
    display: block;
  }
  .container-advantage {
    margin-bottom: 0;
  }
  .introduction-content {
    padding: 1rem;
  }
}

/* == mobile-3col 0823 == */

@media (max-width: 768px) {

  .api-grid { flex-direction: row; flex-wrap: nowrap; gap: 0.4rem; align-items: stretch; padding: 0 0.4rem; }

  .api-card { width: 33.33%; max-width: none; min-width: 0; padding: 0.8rem 0.45rem; border-radius: 0.75rem; }

  .api-header { margin-bottom: 0.6rem; }

  .api-name { font-size: 0.85rem; }

  .api-code { font-size: 0.55rem; word-break: break-all; padding: 0.15rem 0.3rem; }

  .pricing-section { flex-direction: column; gap: 0.3rem; }

  .price-main { font-size: 1.5rem; }

  .price-unit, .price-single-label { font-size: 0.6rem; }

  .price-single-value { font-size: 0.85rem; }

  .comparison-section { padding: 0.5rem 0.3rem; }

  .comparison-header { flex-direction: column; gap: 0.25rem; }

  .competitor-info, .competitor-name, .competitor-price { font-size: 0.6rem; }

  .savings-badge { font-size: 0.55rem; padding: 0.15rem 0.4rem; }

  .savings-calculation { font-size: 0.55rem; }

  .feature-item { font-size: 0.62rem; }

  .features-list { gap: 0.25rem; }

}


/* ===== 后台接管后新增: 首屏卡片 / 主题切换 / 语种 / 头像 ===== */
/* 三张卡片桌面端强制一行等宽; flex-wrap:wrap + flex-basis:280px 会让第三张
   在中等宽度下折行(实测过), 所以这里用 nowrap + flex:1 1 0 平分。 */
.hero-cards{display:flex;gap:1.25rem;justify-content:center;align-items:stretch;
  flex-wrap:nowrap;margin:2.25rem auto 0;padding:0 1rem;width:100%;max-width:1080px}
.hero-card{flex:1 1 0;min-width:0;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:1.75rem 1.5rem;text-align:left;transition:.25s;
  text-decoration:none;color:inherit;display:block}
.hero-card:hover{background:var(--card-hover);border-color:var(--accent);box-shadow:0 10px 28px var(--shadow);text-decoration:none}
.hero-card .hc-icon{font-size:1.6rem;color:var(--accent);margin-bottom:.6rem;line-height:1}
.hero-card .hc-name{font-size:1.15rem;font-weight:600;color:var(--fg);margin-bottom:.45rem}
.hero-card .hc-desc{font-size:.9rem;color:var(--muted);line-height:1.6}
.hero-card .hc-more{margin-top:auto;padding-top:.9rem;font-size:.85rem;color:var(--accent)}
.hero-card{display:flex;flex-direction:column}

/* 扩散特效: 噪声字符宽度和目标字符不同会让整行抖动 ——
   容器给定高、内容不换行, 保证动画期间页面不跳。 */
.hero-subtitle{margin-top:1.75rem;min-height:2.6em;display:flex;
  align-items:flex-start;justify-content:center}
.text-diffusion{display:inline-block;max-width:min(92vw,860px)}

/* 导航右侧工具区 */
.nav-tools{display:flex;align-items:center;gap:.25rem;margin-left:.5rem}
.nav-tool{position:relative}
.nav-tool>button svg{display:block}
.nav-tool>button{background:none;border:0;color:var(--fg2);cursor:pointer;
  padding:.4rem .55rem;border-radius:8px;font-size:.95rem;line-height:1}
.nav-tool>button:hover{background:var(--surface);color:var(--fg)}
.nav-pop{display:none;position:absolute;top:calc(100% + .4rem);inset-inline-end:0;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 24px var(--shadow);min-width:170px;padding:.35rem 0;z-index:1200}
.nav-pop.show{display:block}
.nav-pop a{display:block;padding:.5rem 1rem;color:var(--fg2);font-size:.9rem;
  text-decoration:none;white-space:nowrap}
.nav-pop a:hover{background:var(--surface);color:var(--fg);text-decoration:none}
.nav-pop a.on{color:var(--accent)}
.nav-pop .np-head{padding:.5rem 1rem;border-bottom:1px solid var(--border);margin-bottom:.3rem}
.nav-pop .np-head b{display:block;color:var(--fg);font-size:.9rem}
.nav-pop .np-head span{color:var(--muted);font-size:.78rem}
/* 头像用控制台同一张图和同一套尺寸(.kc-avatar: 28px 圆形 object-fit:cover) */
.nav-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;
  background:#e3e3e3;display:block}

/* 移动端 */
@media(max-width:768px){
  .hero-cards{flex-wrap:wrap;flex-direction:column;align-items:stretch;gap:.9rem;margin-top:1.75rem}
  .hero-card{flex:1 1 auto}
  .hero-subtitle{min-height:4.2em}
  .hero-card{max-width:none;padding:1.25rem 1.15rem}
  .hero-card .hc-desc{font-size:.85rem}
  .nav-tools{margin-left:auto;margin-inline-end:.5rem}
  .nav-tool>button{padding:.35rem .45rem}
  .nav-pop{min-width:150px}
}
/* 阿拉伯语 RTL */
html[dir="rtl"] .hero-card{text-align:right}

/* ===== 页脚 ===== */
.site-footer{margin-top:2rem;text-align:center}
.sf-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.25rem 1.1rem;font-size:.85rem}
.sf-links a{color:var(--muted);text-decoration:none;white-space:nowrap}
.sf-links a:hover{color:var(--accent);text-decoration:none}
.sf-lang{display:inline-flex;flex-wrap:wrap;gap:.25rem .7rem;align-items:center}
.sf-lang a.on{color:var(--accent)}
.sf-icp{font-size:.8rem;color:var(--muted)}
.sf-icp a{color:var(--muted);text-decoration:none}
.sf-icp a:hover{color:var(--accent)}
@media(max-width:768px){
  .sf-links{gap:.35rem .8rem;font-size:.8rem}
  .sf-icp{font-size:.72rem;line-height:1.7}
}

/* ===== 品牌屏(最后一屏): 蓝底 + 标语 + 页脚接轨 ===== */
/* 字体: Noto Serif SC 900(思源宋体 Heavy)。国内不走 Google Fonts CDN,
   用服务器本地的子集文件; 文件不存在时自动回落到系统宋体, 页面不会坏。
   子集生成命令见交接说明。 */
@font-face{
  font-family:"KS Serif";
  src:url("/fonts/NotoSerifSC-Black-subset.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
/* 父级 .section 已经是 min-height:100vh + padding-top:70px。
   这里再要 100vh 会让内容总高超出一屏, 页脚被挤到可视区外,
   露出 body 的深色底 —— 这就是蓝块下面那条深色带的由来。
   改成 flex:1 填满父级剩余高度。 */
.brand-section{
  --gblue:#174EA6;              /* Google Blue 900, 官方蓝色阶里最深的一档 */
  --slogan:clamp(1.75rem,4.5vw,3.5rem);   /* 标语字号, logo 宽度也绑它 */
  background:var(--gblue); color:#fff;
  /* 正常流末尾块, 不用绝对定位(会盖住搜索框)。
     .search-container 的 flex:1 把它顶到底, section7 总高仍是一屏。 */
  position:static; flex:none;
  width:100%; align-self:stretch;
  display:flex; flex-direction:column; min-height:auto;
}
/* 标语区: 给足上下留白但不撑满一屏 */
/* 蓝块加高, 上下留白对称 */
.bs-inner{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3.5rem,11vh,7rem) clamp(1.25rem,6vw,5rem) clamp(3.5rem,11vh,7rem)}
/* logo 宽度 = 标语一个汉字的宽度, 用同一个 clamp 绑定, 两者永远同步缩放 */
.bs-brand{margin-bottom:clamp(.9rem,2.2vh,1.5rem);line-height:0}
.bs-brand .ks-logo{width:var(--slogan);height:auto}
.bs-slogan{
  font-family:"KS Serif","Noto Serif SC","Source Han Serif SC","Source Han Serif CN",
    "Songti SC","STSong","SimSun",serif;
  font-weight:900; line-height:1.15; margin:0;
  font-size:var(--slogan);
}
/* 页脚跟蓝色区域接轨: 同底色, 上面一条淡分隔线 */
/* 原 footer 规则带 background:rgba(16,16,20,.8) + backdrop-filter:blur,
   会把蓝色盖成深色。这里显式清掉, 页脚跟蓝块同色。 */
.brand-section .site-footer{
  /* 原 footer 规则是 position:absolute;bottom:0(为了在 .search-section 里贴底),
     挪进品牌屏后没有 relative 参照, 会压到标语上 —— 这里改回正常文档流。
     背景和 backdrop-filter 也得清掉, 否则深色底盖住蓝色。 */
  position:static; margin:0;
  padding:.5rem clamp(1.25rem,6vw,5rem);
  background:transparent; backdrop-filter:none;
  border-top:1px solid rgba(255,255,255,.25); text-align:left;
  color:rgba(255,255,255,.8);
}
/* 页脚一行: 左边链接, 右边 ICP。高度对齐控制台页脚的 52px。 */
.brand-section .site-footer{display:flex;align-items:center;justify-content:space-between;
  gap:1rem 1.5rem;flex-wrap:wrap;min-height:52px}
.brand-section .sf-links{justify-content:flex-start;flex:1 1 auto}
.brand-section .sf-icp{margin:0;text-align:end;flex:0 1 auto;white-space:nowrap}
.brand-section .sf-links a,.brand-section .sf-icp,.brand-section .sf-icp a{color:rgba(255,255,255,.8)}
.brand-section .sf-links a:hover,.brand-section .sf-icp a:hover{color:#fff}

/* 页脚语种: 折叠展开, 跟控制台一个交互 */
.sf-lang{position:relative;display:inline-block}
.sf-lang>button svg{vertical-align:-4px}
.sf-lang>button{background:none;border:0;color:inherit;cursor:pointer;
  font-size:inherit;padding:0;font-family:inherit}
.brand-section .sf-lang>button{color:rgba(255,255,255,.8)}
.brand-section .sf-lang>button:hover{color:#fff}
.sf-lang-pop{display:none;position:absolute;bottom:calc(100% + .5rem);inset-inline-start:0;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 24px var(--shadow);min-width:180px;padding:.35rem 0;z-index:1200;
  max-height:60vh;overflow:auto}
.sf-lang-pop.show{display:block}
.sf-lang-pop a{display:block;padding:.5rem 1rem;color:var(--fg2);font-size:.9rem;
  white-space:nowrap;text-decoration:none}
.sf-lang-pop a:hover{background:var(--surface);color:var(--fg);text-decoration:none}
.sf-lang-pop a.on{color:var(--accent)}
@media(max-width:768px){
  .scroll-hint{bottom:1rem;inset-inline-end:1rem}
}
html[dir="rtl"] .brand-section .site-footer,
html[dir="rtl"] .brand-section .bs-inner{text-align:right}

/* ===== 规模屏(section2): 爬虫与预测能力 ===== */
.scale-section{width:100%;max-width:1180px;margin:0 auto;
  padding:0 clamp(1rem,4vw,2.5rem);display:flex;flex-direction:column;gap:clamp(1.5rem,4vh,2.75rem)}
.sc-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1rem,3vw,2.5rem);align-items:center}
.sc-title{font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:700;color:var(--fg);margin:0 0 .75rem}
.sc-lead{color:var(--muted);font-size:clamp(.9rem,1.1vw,1.02rem);line-height:1.75;margin:0 0 1.5rem}
.sc-stats{display:flex;flex-wrap:wrap;gap:clamp(1rem,2.5vw,2.25rem)}
.sc-stat{display:flex;flex-direction:column;gap:.2rem}
.sc-stat b{font-size:clamp(1.5rem,2.8vw,2.25rem);font-weight:700;color:var(--accent);line-height:1}
.sc-stat b span{font-size:.55em;margin-inline-start:.1em}
.sc-stat>span{font-size:.8rem;color:var(--muted)}

/* 爬虫扩散图: 用 currentColor, 明暗两态自动跟随 */
.sc-vis{color:var(--accent);min-width:0}
.crawl-svg{width:100%;height:auto;display:block;max-height:46vh}

.sc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(.9rem,2vw,1.5rem)}
.sc-panel{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:clamp(.9rem,1.8vw,1.4rem)}
.sc-panel-h{font-weight:600;color:var(--fg);margin-bottom:.9rem;font-size:.98rem}
.sc-panel-h i{color:var(--accent);margin-inline-end:.4rem}
.sc-panel-p{color:var(--muted);font-size:.86rem;line-height:1.7;margin:0 0 1rem}
.sc-table{width:100%;border-collapse:collapse;font-size:.85rem}
.sc-table th{color:var(--muted);font-weight:500;text-align:center;padding:.35rem .3rem;
  border-bottom:1px solid var(--border);white-space:nowrap}
.sc-table th:first-child{text-align:start}
.sc-table td{padding:.45rem .3rem;text-align:center;color:var(--fg2);border-bottom:1px solid var(--border)}
.sc-table td:first-child{text-align:start;color:var(--muted)}
.sc-table tr:last-child td{border-bottom:0}
.sc-model{padding:.7rem 0;border-top:1px solid var(--border)}
.sc-model:first-of-type{border-top:0;padding-top:0}
.sc-model-n{font-weight:600;color:var(--accent);font-size:.92rem;margin-bottom:.25rem}
.sc-model-d{color:var(--muted);font-size:.82rem;line-height:1.65}

@media(max-width:900px){
  .sc-top{grid-template-columns:1fr}
  .sc-vis{order:-1}
  .crawl-svg{max-height:30vh}
  .sc-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .sc-stats{gap:1rem}
  .sc-table{font-size:.78rem}
  .sc-table th,.sc-table td{padding:.3rem .15rem}
}

/* ===== 锋芒: 优势屏的几何背景 ===== */
/* 不用发光不用渐变 —— 锐角切割 + 斜线 + 2003 起的年代刻度轴。
   currentColor 跟主题走, 明暗都能用同一份。 */
.container-advantage{position:relative;isolation:isolate}
.adv-geo{position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  color:var(--fg);opacity:.5;pointer-events:none}
html[data-theme="light"] .adv-geo{opacity:.65}
.adv-era{margin-top:1.1rem;font-size:.82rem;letter-spacing:.04em;color:var(--muted)}
@media(max-width:768px){
  .adv-geo{opacity:.35}
  .adv-era{font-size:.74rem;line-height:1.7}
}

/* 最后一屏: 父级的 align-items:center 会让子项按内容宽收缩,
   蓝块必须铺满整行, 这里显式拉伸。 */
#section7{align-items:stretch}

/* ===== Kuaisou 词标 =====
   用 CSS mask 而不是 <img>: mask 只取 SVG 的 alpha, 颜色由 background-color 决定,
   写成 currentColor 就自动跟随所在位置的文字色 —— 明暗模式、蓝底白字都不用换文件。
   宽高比 1182:237 = 4.99:1, 高度定死宽度按比例算, 不会跳版。 */
.ks-logo{
  display:inline-block; vertical-align:middle;
  height:1em; aspect-ratio:1182/237; width:auto;
  background-color:currentColor;
  -webkit-mask:url("/icon/kuaisou-logo.svg") no-repeat center/contain;
  mask:url("/icon/kuaisou-logo.svg") no-repeat center/contain;
}
/* 导航: 跟原来的站名文字同一个视觉重量 */
.nav-logo .ks-logo{height:26px}
.nav-logo{display:inline-flex;align-items:center}
/* Kuaisou Research: 词标 + Research 文字, 基线对齐 */
.search-title{display:flex;align-items:center;justify-content:center;gap:.35em;flex-wrap:wrap}
.search-title .ks-logo{height:.92em}
@media(max-width:768px){
  .nav-logo .ks-logo{height:20px}
}

/* Research 的字色。#2f3034 是亮色下的指定值; 暗色下它在 #202124 上对比度仅 1.1:1
   (几乎不可见), 所以按同样的"比 logo 略暗"关系换成 #bdc1c6。 */
.search-title span{color:var(--research)}
@media(max-width:768px){
  .brand-section .site-footer{justify-content:flex-start}
  .brand-section .sf-icp{text-align:start;white-space:normal}
}

/* ===== 导航产品下拉 =====
   照控制台 AdminLTE 的 dropdown 规格: .3rem 圆角、item 内边距 .25rem 1.5rem、
   分隔线 1px、header 小号灰字。颜色全部走主题变量, 明暗自动适配。 */
.nav-dd{position:relative}
.nav-dd-caret{font-size:.75em;margin-inline-start:.3em;transition:transform .2s}
.nav-dd .nav-link[aria-expanded="true"] .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-menu{
  display:none;position:absolute;top:calc(100% + .55rem);inset-inline-start:0;
  min-width:320px;padding:.5rem 0;z-index:1200;
  background:var(--card);border:1px solid var(--border);border-radius:.3rem;
  box-shadow:0 .5rem 1rem var(--shadow);
}
.nav-dd-menu.show{display:block}
.ddm-label{padding:.35rem 1.25rem .5rem;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.ddm-item{display:flex;align-items:flex-start;gap:.75rem;
  padding:.55rem 1.25rem;color:var(--fg2);text-decoration:none}
.ddm-item:hover{background:var(--surface);color:var(--fg);text-decoration:none}
.ddm-ico{flex:0 0 34px;height:34px;border-radius:.3rem;background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.9rem}
.ddm-item:hover .ddm-ico{background:var(--accent);color:var(--card)}
.ddm-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ddm-txt b{font-weight:600;font-size:.92rem;color:var(--fg);white-space:nowrap}
.ddm-txt small{font-size:.79rem;color:var(--muted);line-height:1.4}
.ddm-slim{padding-top:.4rem;padding-bottom:.4rem}
.ddm-slim .ddm-ico{flex-basis:26px;height:26px;font-size:.78rem}
.ddm-slim .ddm-txt b{font-weight:400;font-size:.88rem;color:var(--fg2)}
.ddm-item:hover .ddm-txt b{color:var(--fg)}
.ddm-sep{height:1px;background:var(--border);margin:.5rem 0}

@media(max-width:768px){
  /* 窄屏导航是收起的汉堡菜单, 下拉改成内联展开, 不做浮层 */
  .nav-dd-menu{position:static;min-width:0;width:100%;border:0;box-shadow:none;
    background:transparent;padding:.25rem 0}
  .ddm-item{padding:.5rem .75rem}
  .ddm-txt small{display:none}
}
html[dir="rtl"] .nav-dd-menu{inset-inline-start:auto;inset-inline-end:0}