/* ============================================================
   Clash官网2026 · 首页专属样式(home.css)
   Hero 轨道动画定位 / 下载入口网格 / 信任背书 / 问答精选
   ============================================================ */

/* ---------- Hero:文案在左,轨道动画裸放漂在右侧背景 ---------- */
.hero{position:relative;overflow-x:clip}
.hero .wrap{position:relative}
.hero-orbit{
  position:absolute;
  top:0;
  right:0;
  width:520px;
  height:520px;
  overflow:visible;
  pointer-events:none;
  z-index:0;
}
.hero-orbit .hx1{
  transform:translate(597px,-555px) scale(1.15);
  transform-origin:center;
}
.hero .hero-kicker,
.hero .hero-title,
.hero .hero-actions,
.hero .hero-lede,
.hero .hero-chips{
  position:relative;
  z-index:1;
}
@media (max-width:1100px){
  .hero-orbit{width:420px;height:420px}
  .hero-orbit .hx1{transform:translate(430px,-430px) scale(1)}
}
@media (max-width:900px){
  .hero-orbit{width:340px;height:340px}
  .hero-orbit .hx1{transform:translate(300px,-320px) scale(.85)}
}
@media (max-width:720px){
  .hero-orbit{display:none}
}
.hx1-orb{position:absolute;left:50%;top:50%;border:1px solid #FF7A1A22;border-radius:50%;animation:hx1-spin linear infinite}
.hx1-o1{width:40%;padding-top:40%;margin:-20% 0 0 -20%;animation-duration:18s}
.hx1-o2{width:64%;padding-top:64%;margin:-32% 0 0 -32%;animation-duration:26s;animation-direction:reverse}
.hx1-o3{width:88%;padding-top:88%;margin:-44% 0 0 -44%;animation-duration:30s}
.hx1-dot{position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#FF7A1A;box-shadow:0 0 8px #FF7A1A99}
.hx1-o2 .hx1-dot{background:#FFE8D0;box-shadow:0 0 6px #FFE8D066;width:4px;height:4px;top:-2px;margin-left:-2px}
.hx1-core{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#FF7A1A;box-shadow:0 0 24px 6px #FF7A1A55;animation:hx1-pulse 8s ease-in-out infinite}
@keyframes hx1-spin{to{transform:rotate(360deg)}}
@keyframes hx1-pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.hx1 *{animation:none!important}}

/* ---------- 区块引言 / 收尾链接 ---------- */
.sec-lede{
  max-width:68ch;
  color:var(--signal-dim);
  margin-bottom:clamp(24px,4vw,36px);
}
.sec-more{
  margin-top:clamp(24px,4vw,36px);
  margin-bottom:0;
}
.sec-more a{
  font-family:var(--font-mono);
  font-size:13.5px;
  letter-spacing:.08em;
  color:var(--ember);
}
.sec-more a:hover{color:var(--ember-deep)}

/* ---------- 下载入口:平台舷窗网格 ---------- */
.port-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.port-grid>*{min-width:0}
.port-card{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:clamp(20px,3vw,26px);
  background:var(--deck-1);
  border:1px solid var(--hairline);
  border-radius:var(--edge);
  box-shadow:var(--panel-glow);
  color:var(--signal);
  text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.port-card:hover{
  border-color:var(--ember);
  box-shadow:0 0 26px var(--halo);
  color:var(--signal);
}
.port-card .port-ico{
  color:var(--ember);
  display:inline-flex;
}
.port-card .port-code{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.24em;
  color:var(--signal-dim);
}
.port-card .port-name{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  line-height:1.3;
}
.port-card .port-note{
  font-size:13.5px;
  line-height:1.7;
  color:var(--signal-dim);
}
.port-card .port-go{
  margin-top:auto;
  padding-top:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--ember);
}
.port-card:hover .port-go{color:var(--ember-deep)}
@media (max-width:960px){
  .port-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .port-grid{grid-template-columns:1fr}
}

/* ---------- 信任背书:事实清单 + 侧栏命令面板 ---------- */
.trust-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:clamp(24px,4vw,44px);
  align-items:start;
}
.trust-grid>*{min-width:0}
.trust-facts{
  display:grid;
  gap:clamp(20px,3vw,30px);
}
.trust-fact{
  padding-left:18px;
  border-left:1px solid var(--rail);
}
.trust-fact h3{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:18px;
  margin-bottom:.5em;
}
.trust-fact .fact-code{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ember);
  flex-shrink:0;
}
.trust-fact p{
  color:var(--signal-dim);
  font-size:14.5px;
  margin:0;
}
.trust-side .panel h3{margin-top:0;font-size:18px}
.trust-side .cmd-box{margin-top:14px;margin-bottom:14px}
.trust-side .side-note{
  font-size:13px;
  color:var(--signal-dim);
  margin:0;
}
@media (max-width:860px){
  .trust-grid{grid-template-columns:1fr}
}

/* ---------- 常见问题精选 ---------- */
.qa-picks{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.qa-picks>li{
  min-width:0;
  margin:0;
  padding:clamp(18px,3vw,24px);
  background:var(--deck-1);
  border:1px solid var(--hairline);
  box-shadow:var(--panel-glow);
}
.qa-picks h3{
  font-size:16px;
  margin-bottom:.55em;
}
.qa-picks h3 a{color:var(--signal);text-decoration:none}
.qa-picks h3 a:hover{color:var(--ember)}
.qa-picks p{
  margin:0;
  font-size:14px;
  color:var(--signal-dim);
}
@media (max-width:720px){
  .qa-picks{grid-template-columns:1fr}
}