/* ==========================================================================
   Clash官网 · home.css(首页专属)
   Hero 装饰容器 / 平台入口网格 / 快速上手三步 / 信任背书 / FAQ 精选 / 更多链接行
   全部取值引用 base.css 的 :root 设计令牌
   ========================================================================== */

/* --- Hero 右侧动画容器:裸放,无边框无底色,窄屏隐藏 --- */
.hero-viz {
  position: relative;
  min-height: 300px;
}

@media (max-width: 720px) {
  .hero-viz {
    display: none;
  }
}

/* --- Hero 装饰:数据流动画(hx13) --- */
.hx13-svg{position:absolute;inset:0;width:100%;height:100%}
.hx13-m{position:absolute;inset:0}
.hx13-p{position:absolute;width:5px;height:5px;margin:-2.5px;background:#0E9BE0;box-shadow:0 0 7px #0E9BE099}
.hx13-m1{animation:hx13-a1 10s linear infinite}
.hx13-m2{animation:hx13-a2 14s linear infinite;animation-delay:2s}
.hx13-m3{animation:hx13-a3 12s linear infinite;animation-delay:5s}
@keyframes hx13-a1{0%{transform:translate(0,0);opacity:0}5%{opacity:.9}40%{transform:translate(42%,0)}62%{transform:translate(42%,32%)}94%{transform:translate(80%,32%);opacity:.9}100%{transform:translate(80%,32%);opacity:0}}
@keyframes hx13-a2{0%{transform:translate(0,0);opacity:0}5%{opacity:.9}42%{transform:translate(32%,0)}60%{transform:translate(32%,14%)}94%{transform:translate(72%,14%);opacity:.9}100%{transform:translate(72%,14%);opacity:0}}
@keyframes hx13-a3{0%{transform:translate(0,0);opacity:0}6%{opacity:.9}38%{transform:translate(18%,0)}68%{transform:translate(18%,22%)}94%{transform:translate(32%,22%);opacity:.9}100%{transform:translate(32%,22%);opacity:0}}
@media (prefers-reduced-motion:reduce){.hx13 *{animation:none!important}}

/* --- 区块末尾"更多"链接行 --- */
.more-line {
  margin-top: 22px;
  margin-bottom: 0;
}

.more-line a {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-core-deep);
}

.more-line a:hover {
  color: var(--c-core);
  text-decoration: underline;
}

/* --- 平台入口网格 --- */
.plat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}

.plat-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-pane);
  padding: 22px 20px;
}

.plat-cell:hover {
  background: var(--c-pane-2);
}

.plat-cell svg {
  flex-shrink: 0;
  color: var(--c-core-deep);
}

.plat-cell h3 {
  margin: 0;
  font-size: 15px;
}

.plat-cell p {
  margin: 0;
  flex: 1;
  color: var(--c-ink-soft);
  font-size: 13px;
  line-height: 1.7;
}

/* --- 快速上手三步 --- */
.qs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}

.qs-step {
  min-width: 0;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-pane);
  padding: 22px 24px;
}

.qs-num {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--c-core-deep);
  border: 1px solid var(--c-line);
  padding: 2px 9px;
  margin-bottom: 12px;
}

.qs-step h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.qs-step p {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: 13px;
  line-height: 1.8;
}

/* --- 信任背书区 --- */
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.trust-text p {
  color: var(--c-ink-soft);
  font-size: 14px;
}

.trust-text p:last-child {
  margin-bottom: 0;
}

.trust-side {
  border: 1px solid var(--c-line);
  background: var(--c-pane);
  padding: 20px 22px;
}

.trust-side-label {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 10px;
}

.trust-facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.trust-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--c-line);
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 13px;
}

.trust-facts li:last-child {
  padding-bottom: 0;
}

.trust-facts span {
  color: var(--c-ink-soft);
}

.trust-facts b {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-core-deep);
}

/* --- FAQ 精选 --- */
.faqmini {
  border: 1px solid var(--c-line);
  background: var(--c-pane);
}

.faqmini-item {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
  gap: 10px 24px;
  align-items: baseline;
  padding: 15px 20px;
}

.faqmini-item > * {
  min-width: 0;
}

.faqmini-item + .faqmini-item {
  border-top: 1px solid var(--c-line);
}

.faqmini-item:hover {
  background: var(--c-pane-2);
}

.faqmini-item strong {
  font-size: 14px;
  color: var(--c-ink);
}

.faqmini-item span {
  font-size: 13px;
  color: var(--c-ink-soft);
  line-height: 1.7;
}

.faqmini-item a {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-core-deep);
}

.faqmini-item a:hover {
  color: var(--c-core);
  text-decoration: underline;
}

/* --- 响应式 --- */
@media (max-width: 900px) {
  .plat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qs-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .faqmini-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .plat-grid {
    grid-template-columns: 1fr;
  }

  .plat-cell {
    padding: 18px;
  }

  .qs-step {
    padding: 18px;
  }

  .trust-side {
    padding: 16px;
  }
}