/* ============================================================
   首页 HERO — 名词定义「滑动球体」视觉
   用 70 个港险名词铺满球面，词条由远及近由小变大、可拖拽旋转、点击查阅
   ============================================================ */

/* 让首页 hero 视觉在移动端也保留（主站 site.css 在 <=1100 会隐藏） */
.home .hero-visual { display: block; }

#termSphere {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  min-height: 0;
  perspective: 900px;
  cursor: grab;
  touch-action: none;
}
#termSphere:active { cursor: grabbing; }

/* 中心辉光 */
#termSphere::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(124,58,237,.22), rgba(56,194,242,.06) 45%, transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}
/* 外圈参考环（略小于容器，贴合词条实际分布的球面轮廓） */
#termSphere::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(124,58,237,.14);
  border-radius: 50%;
  pointer-events: none;
}

.ts-term {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .3px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  background: linear-gradient(96deg, #9fd8f6 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet);
  transform-origin: center;
  will-change: transform, opacity;
  transition: -webkit-text-fill-color .2s ease, text-shadow .2s ease;
}
.ts-term:hover {
  -webkit-text-fill-color: #ffffff;
  color: #fff;
  text-shadow: 0 0 18px rgba(124,58,237,.75);
}

.ts-hint {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--txt-3);
  letter-spacing: .5px;
  pointer-events: none;
  transition: opacity .6s ease;
  white-space: nowrap;
}

/* ============================================================
   首页 ·「百科全书，两条入口」模块卡
   样式对齐百科全书门户页的 .modules / .mcard
   ============================================================ */
.modules { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
a.mcard { display: block; text-decoration: none; color: inherit; }
.mcard {
  position: relative; overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; padding: 34px 32px;
  cursor: pointer; transition: .22s;
}
.mcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.mcard:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--shadow); }
.mcard .ico {
  width: 54px; height: 54px; border-radius: 15px; background: var(--grad-soft);
  border: 1px solid rgba(124,58,237,.3); display: grid; place-items: center; margin-bottom: 20px;
}
.mcard .ico svg { width: 28px; height: 28px; stroke: var(--violet); fill: none; stroke-width: 1.6; }
.mcard h3 { margin: 0 0 10px; font-size: 23px; font-weight: 760; }
.mcard p { margin: 0 0 18px; color: var(--txt-2); font-size: 14px; line-height: 1.7; }
.mcard .meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--txt-3); margin-bottom: 18px; flex-wrap: wrap; }
.mcard .meta b { color: var(--txt); font-weight: 600; }
.mcard .go { font-size: 14px; font-weight: 600; color: var(--cyan); display: inline-flex; align-items: center; gap: 7px; }

@media (max-width: 880px) {
  .modules { grid-template-columns: 1fr; gap: 16px; }
  .mcard { padding: 26px 22px; }
}