/* =====================================================
   组件层 · 星图 / 精密制图语言
   规则：直角、hairline 细分隔、无浮起阴影；
   卡片靠「共边格架 + 角标记」建立层次，不靠圆角与投影。
   ===================================================== */

/* ================= 滚动进度条 ================= */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 1200;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .1s linear;
}

/* ================= 顶部导航 ================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  transition: background-color .3s ease, height .3s ease;
}
.site-header::before {
  /* 顶部一条极淡的星图刻度，滚动时不动，给导航一个「仪表」底子 */
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 3px;
  background-image: repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 8px);
  opacity: .35;
  pointer-events: none;
}
.site-header.is-scrolled {
  height: 64px;
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  padding-right: var(--sp-6);
  border-right: 1px solid var(--rule);
}
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__cn {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-1);
}
.brand__en {
  margin-top: 3px;
  font-family: var(--font-latin);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--text-3);
}

/* 一级导航 */
.nav {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 1024px) { .nav { display: flex; } }

.nav__item { position: relative; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-2);
  transition: color .2s;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--text-1); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link .fa-solid { font-size: 9px; opacity: .5; transition: transform .25s; }
.nav__item:hover .nav__link .fa-chevron-down { transform: rotate(180deg); }

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: -130px;
  width: 600px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--bg-0);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px rgba(4, 8, 18, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
}
.nav__item:hover .mega,
.nav__item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega__link {
  display: flex;
  gap: 11px;
  padding: 13px 12px;
  border: 1px solid transparent;
  transition: background-color .2s, border-color .2s;
}
.mega__link:hover { background: var(--bg-1); border-color: var(--rule); }
.mega__icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  color: var(--accent);
  font-size: 13px;
}
.mega__title { display: block; font-size: .9375rem; font-weight: 600; color: var(--text-1); }
.mega__desc { display: block; margin-top: 3px; font-size: .75rem; color: var(--text-3); line-height: 1.5; }

/* 右侧操作区 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
@media (max-width: 639px) {
  .header-actions .header-cta { display: none; }
  .brand__en { display: none; }
  .brand { border-right: 0; padding-right: 0; }
  .header-inner { gap: 10px; }
}

/* 主题切换 */
.theme-toggle {
  position: relative;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text-2);
  transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle .fa-solid,
.theme-toggle .fa-regular { font-size: 14px; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* 汉堡 */
.menu-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text-1);
}
@media (min-width: 1024px) { .menu-btn { display: none; } }

/* 移动端抽屉 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg-0);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .38s var(--ease-out), visibility .38s;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.drawer__top .brand { border-right: 0; padding-right: 0; }
.drawer__body { padding: var(--sp-5) var(--gutter); overflow-y: auto; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 2px;
  font-size: 1.0625rem;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  color: var(--text-1);
}
.drawer__link .fa-solid { color: var(--text-3); font-size: 11px; }
.drawer__sub { padding-left: 2px; }
.drawer__sub a {
  display: flex;
  justify-content: space-between;
  padding: 12px 2px;
  font-size: .875rem;
  color: var(--text-2);
  border-bottom: 1px dashed var(--rule);
}
.drawer__sub a span { color: var(--text-3); font-size: .75rem; }
.drawer__foot { padding: var(--sp-5) var(--gutter) var(--sp-7); border-top: 1px solid var(--rule); }
.drawer__contact { display: grid; gap: 12px; margin-bottom: var(--sp-4); }
.drawer__contact a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text-2); font-size: .9375rem; }
.drawer__contact .fa-solid, .drawer__contact .fa-brands { color: var(--accent); width: 18px; }

/* 移动端触控：顶栏图标按钮按 44×44 给足命中区，
   38×38 在手机上容易点空；抽屉关闭按钮同样处理。 */
@media (max-width: 1023px) {
  .theme-toggle, .menu-btn { width: 44px; height: 44px; }
  .drawer__link { min-height: 44px; display: flex; align-items: center; }
  .drawer__sub a { min-height: 40px; align-items: center; }
}

/* ================= 按钮 =================
   直角 + 对角双切（左上 + 右下），是这套语言里最直接的「工程板」信号。
   单切在整宽按钮上会被读成「圆角不准」，双切才是明确的意图。 */
.btn {
  position: relative;
  --btn-cut: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 0;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .22s, border-color .22s, color .22s, transform .22s var(--ease-out);
}
.btn .fa-solid, .btn .fa-regular, .btn .fa-brands { font-size: 12px; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent-fill);
  color: #fff;
  clip-path: polygon(
    var(--btn-cut) 0,
    100% 0,
    100% calc(100% - var(--btn-cut)),
    calc(100% - var(--btn-cut)) 100%,
    0 100%,
    0 var(--btn-cut)
  );
}
.btn--primary:hover { background: var(--accent-fill-hover); }

/* 描边按钮用直角 + 底部 2px 指示条：
   描边与 clip-path 冲突（斜边没有边框），所以这里不做切角 */
.btn--ghost {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--text-1);
}
.btn--ghost::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--ease-out);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost:hover::after { transform: scaleX(1); }

.btn--quiet {
  background: transparent;
  color: var(--text-2);
  padding-inline: 12px;
}
.btn--quiet:hover { color: var(--accent); }

.btn--sm { --btn-cut: 10px; padding: 10px 18px; font-size: .8125rem; }
.btn--lg { --btn-cut: 15px; padding: 17px 34px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ================= 标签 ================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 2px solid var(--accent);
  background: none;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
}
.pill__dot { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text-2);
  font-size: .8125rem;
  transition: border-color .2s, color .2s;
}
.chip:hover { border-color: var(--accent); color: var(--text-1); }
.chip i { color: var(--accent); font-size: 13px; }

/* ================= 格架单元 =================
   同一语言贯穿全站：1px 边框 + 悬停时出现的对角角标 */
.card {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid var(--rule);
  background: var(--cell);
  transition: border-color .3s, background-color .3s;
}
.card:hover { border-color: var(--border-brand); }
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.card:hover::before, .card:hover::after { opacity: 1; }

.card__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  margin-bottom: var(--sp-5);
  color: var(--accent);
  font-size: 16px;
}
.card__title { font-size: 1.0625rem; margin-bottom: 10px; letter-spacing: -.01em; }
.card__text { color: var(--text-2); font-size: .875rem; line-height: 1.75; }

.card__arrow {
  position: absolute;
  right: 18px; top: 18px;
  color: var(--text-3);
  font-size: 12px;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity .25s, transform .25s;
}
.card:hover .card__arrow { opacity: 1; transform: none; color: var(--accent); }

/* 卡网格共边：与首页 .bento 同一手法。
   1px 间隙透出容器底色（线条色），卡片自身不再画边框，
   否则相邻两卡的边框会叠成 2px 双线。 */
.grid:has(> .card) {
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.grid:has(> .card) > .card { border: 0; }
.grid:has(> .card) > .card:hover { background: var(--bg-2); }

/* ================= 页脚 ================= */
.site-footer {
  position: relative;
  background: var(--bg-1);
  border-top: 1px solid var(--rule);
}
.footer-top {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-10) var(--sp-8);
}
@media (min-width: 900px) {
  .footer-top {
    grid-template-columns: 1.55fr .85fr .85fr 1.25fr;
    gap: 0;
  }
  /* 分栏之间用竖线切开，而不是留白，收掉「卡片堆叠」的松散感 */
  .footer-top > * { padding-inline: var(--sp-6); }
  .footer-top > *:first-child { padding-left: 0; }
  .footer-top > *:last-child { padding-right: 0; }
  .footer-top > * + * { border-left: 1px solid var(--rule); }
}
.footer-brand .brand { margin-bottom: var(--sp-5); border-right: 0; padding-right: 0; }
.footer-desc { color: var(--text-2); font-size: .875rem; max-width: 34ch; line-height: 1.8; }
.footer-social { display: flex; gap: 8px; margin-top: var(--sp-5); }
.footer-social a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  color: var(--text-2);
  font-size: 14px;
  transition: color .2s, border-color .2s;
}
.footer-social a:hover { color: var(--accent); border-color: var(--accent); }

.footer-title {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-5);
}
.footer-links { display: grid; gap: 2px; }
.footer-links a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--text-2);
  font-size: .875rem;
  transition: color .2s, transform .2s;
}
.footer-links a:hover { color: var(--accent); transform: translateX(3px); }

/* 联系方式：标签在上、值在下，行间用细线，取消「磁贴」 */
.contact-tiles { display: grid; }
.contact-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  font-size: .875rem;
  color: var(--text-1);
  text-align: left;
  width: 100%;
  transition: color .2s;
}
.contact-tile:first-child { padding-top: 0; }
.contact-tile:hover { color: var(--accent); }
.contact-tile__icon { display: none; }
.contact-tile__label {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--text-3);
  line-height: 1.2;
  display: block;
}
.contact-tile__value {
  font-family: var(--font-latin);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  font-weight: 600;
  display: block;
  margin-top: 3px;
}
.contact-tile__copy { margin-left: auto; color: var(--text-3); font-size: 11px; opacity: .45; transition: opacity .2s; }
.contact-tile:hover .contact-tile__copy { opacity: 1; color: var(--accent); }

/* 公众号二维码 */
.qr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--sp-5);
}
.qr-row img {
  width: 64px; height: 64px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--rule);
}
.qr-row__text { display: grid; gap: 4px; }
.qr-row__text strong { font-size: .8125rem; font-weight: 600; }
.qr-row__text span { font-size: .75rem; color: var(--text-3); line-height: 1.5; }

.footer-addr {
  display: flex;
  gap: 8px;
  margin-top: var(--sp-4);
  font-size: .75rem;
  line-height: 1.7;
  color: var(--text-3);
}
.footer-addr i { margin-top: 3px; color: var(--accent); flex-shrink: 0; }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--text-3);
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-bottom a { color: var(--text-3); transition: color .2s; }
.footer-bottom a:hover { color: var(--accent); }
.footer-bottom__links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ================= 返回顶部 ================= */
.fab-top {
  position: fixed;
  right: 22px;
  bottom: calc(24px + var(--mobilebar-h));
  z-index: 900;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: var(--bg-0);
  color: var(--text-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .28s var(--ease-out);
}
.fab-top.is-on { opacity: 1; visibility: visible; transform: none; }
.fab-top:hover { color: var(--accent); border-color: var(--accent); }

/* 移动端吸底 CTA */
.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 950;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px var(--gutter) calc(9px + env(safe-area-inset-bottom));
  background: var(--header-bg);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px) { .mobile-bar { display: none; } }
@media (max-width: 767px) {
  :root { --mobilebar-h: 66px; }
}

/* ================= Toast ================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 1300;
  transform: translate(-50%, 12px);
  padding: 11px 20px;
  border: 1px solid var(--accent);
  background: var(--bg-0);
  color: var(--text-1);
  font-size: .8125rem;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: all .26s var(--ease-out);
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ================= 表单 ================= */
.field { display: grid; gap: 8px; margin-bottom: var(--sp-4); }
.field__label {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field__input,
.field__select,
.field__area {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text-1);
  font-size: .9375rem;
  transition: border-color .2s;
}
.field__input:focus,
.field__select:focus,
.field__area:focus {
  outline: none;
  border-color: var(--accent);
}
.field__area { min-height: 132px; resize: vertical; }