/* ============================================================
   Clash下载站 · home.css(首页专属)
   Hero 水印标题、区块头、平台入口网格、三步预览、
   开源背书双栏、clone 命令框、mini-FAQ
   全部引用 base.css 的 :root 令牌。
   ============================================================ */

/* ---- Hero 主格内的状态徽标 ---- */
.hero-flag{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.02em;
  color:var(--text-muted);
}
.hero-flag .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--success);
  flex-shrink:0;
}

/* ---- 壁纸水印大字(比窗口更宽,压在色斑上) ---- */
.hero-watermark{
  position:absolute;z-index:0;
  left:50%;top:44%;
  transform:translate(-50%,-50%);
  width:max-content;
  max-width:96vw;
  font-family:var(--font-display);
  font-size:clamp(56px,10vw,132px);
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
  color:var(--text-muted);
  opacity:.14;
  pointer-events:none;
  user-select:none;
  overflow:hidden;
}

/* ---- 区块头 ---- */
.sec-head{max-width:640px;margin-bottom:28px}
.sec-kicker{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;font-weight:600;letter-spacing:.14em;
  color:var(--accent);
  background:var(--accent-tint);
  border-radius:var(--r-pill);
  padding:3px 12px;
  margin-bottom:12px;
}
.sec-head p{
  margin-top:10px;
  font-size:13.5px;line-height:1.75;
  color:var(--text-muted);
}
.sec-foot{margin-top:24px}
.link-more{
  font-size:14px;font-weight:600;
  color:var(--accent);
}
.link-more:hover{color:var(--accent-dark)}

/* ---- 平台入口网格 ---- */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.plat-grid>*{min-width:0}
.plat-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--bg-panel);
  border:1px solid var(--hairline);
  border-radius:var(--r-tile);
  box-shadow:var(--shadow-tile);
  padding:20px 22px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.plat-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:var(--shadow-tile-up);
}
.plat-icon{
  width:42px;height:42px;border-radius:11px;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.plat-icon svg{width:23px;height:23px;flex-shrink:0}
.plat-card-name{font-size:15.5px;font-weight:700}
.plat-card-note{
  font-size:12.5px;line-height:1.65;
  color:var(--text-muted);
}
.plat-card-go{
  margin-top:auto;
  font-size:13px;font-weight:600;
  color:var(--accent);
}
.plat-card-more{background:var(--bg-panel-2)}
.plat-card-more .plat-icon{background:var(--bg-panel)}

/* ---- 三步快速上手 ---- */
.qs-steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.qs-steps>*{min-width:0}
.qs-step{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--mica-strong);
  border:1px solid var(--mica-border);
  border-radius:var(--r-tile);
  box-shadow:var(--shadow-tile);
  padding:20px;
}
.qs-num{
  width:34px;height:34px;border-radius:10px;
  background:var(--accent);
  color:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:15px;font-weight:650;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:var(--shadow-btn);
}
.qs-body h3{font-size:15px;margin-bottom:6px}
.qs-body p{
  font-size:13px;line-height:1.75;
  color:var(--text-muted);
}

/* ---- 开源背书双栏 ---- */
.trust-cols{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:28px;
  align-items:start;
}
.trust-cols>*{min-width:0}
.trust-text p{
  font-size:14px;line-height:1.85;
  color:var(--text-muted);
  margin-bottom:1em;
}

/* clone 命令框 */
.clone-box{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-tile);
  padding:12px 14px;
}
.clone-cmd{
  font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:.01em;
  color:var(--text);
  overflow-x:auto;
  white-space:nowrap;
  flex:1;
  min-width:0;
}
.clone-copy{
  flex-shrink:0;
  font-size:12.5px;font-weight:600;
  color:var(--accent);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:9px;
  padding:7px 15px;
  transition:color .15s ease,border-color .15s ease;
}
.clone-copy:hover{border-color:var(--accent)}
.clone-copy.copied{
  color:var(--success);
  border-color:var(--success);
  background:var(--success-tint);
}

/* 事实面板 */
.trust-facts{
  background:var(--bg-panel);
  border:1px solid var(--hairline);
  border-radius:var(--r-tile);
  box-shadow:var(--shadow-tile);
  padding:8px 20px;
}
.fact-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-top:11px;
  padding-bottom:11px;
}
.fact-row+.fact-row{border-top:1px solid var(--hairline)}
.fact-key{
  font-size:12.5px;font-weight:550;
  color:var(--text-muted);
  flex-shrink:0;
}
.fact-val{
  font-size:12px;
  color:var(--text);
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

/* ---- mini-FAQ ---- */
.faq-mini{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.faq-mini>*{min-width:0}
.faq-mini li{
  background:var(--bg-panel);
  border:1px solid var(--hairline);
  border-radius:var(--r-tile);
  box-shadow:var(--shadow-tile);
  padding:18px 20px;
}
.faq-q{
  font-size:14.5px;font-weight:650;
  margin-bottom:8px;
}
.faq-a{
  font-size:13px;line-height:1.75;
  color:var(--text-muted);
}
.faq-a a{
  color:var(--accent);
  font-weight:600;
  white-space:nowrap;
}
.faq-a a:hover{color:var(--accent-dark)}

/* ---- 响应式 ---- */
@media (max-width:900px){
  .plat-grid{grid-template-columns:1fr 1fr}
  .qs-steps{grid-template-columns:1fr}
  .trust-cols{grid-template-columns:1fr}
}

@media (max-width:760px){
  .hero-watermark{display:none}
}

@media (max-width:640px){
  .plat-grid{grid-template-columns:1fr}
  .faq-mini{grid-template-columns:1fr}
  .sec-head{margin-bottom:20px}
}