/* 站长工具聚合页样式（橙色营销风） */

/* ===== Hero 顶部 ===== */
.tools-hero {
  position: relative; overflow: hidden;
  padding: 80px 24px 56px;
  background:
    radial-gradient(1100px 380px at 82% -12%, rgba(255,138,61,.18), transparent 60%),
    radial-gradient(820px 340px at 8% 0%, rgba(255,61,46,.10), transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  border-bottom: 1px solid var(--line);
}
.th-in { max-width: 820px; margin: 0 auto; text-align: center; }
.tools-hero h1 {
  font-size: 44px; font-weight: 900; letter-spacing: -2px; line-height: 1.12;
  color: var(--ink); margin: 16px 0 16px;
}
.tools-hero h1 .text-grad {
  background: var(--grad-flame); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tools-hero p { font-size: 16px; color: var(--ink-2); line-height: 1.8; max-width: 620px; margin: 0 auto; }
.tools-hero p b { color: var(--or-d); font-weight: 700; }

/* 统计条 */
.th-stats { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; }
.th-stat {
  min-width: 140px; padding: 18px 24px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s;
}
.th-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.th-num {
  font-size: 32px; font-weight: 900; line-height: 1;
  font-family: "JetBrains Mono", monospace; letter-spacing: -1px;
  background: var(--grad-flame); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.th-num .pct { font-size: 17px; -webkit-text-fill-color: var(--or-d); }
.th-lbl { font-size: 13px; color: var(--ink-3); font-weight: 600; margin-top: 6px; }

/* ===== 工具列表区 ===== */
.tools-sec { padding: 44px 24px 88px; background: var(--card); }
.ts-in { max-width: 1200px; margin: 0 auto; }

/* ===== 工具卡片网格（3 列竖排卡片） ===== */
.tc-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

/* 单张卡片（整卡可点击） */
.tc-card {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 26px 24px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); overflow: hidden;
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.tc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-flame); opacity: 0; transition: opacity .28s;
}
.tc-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,107,26,.28);
  box-shadow: 0 16px 36px rgba(255,107,26,.12);
}
.tc-card:hover::before { opacity: 1; }

/* 图标 */
.tc-ic {
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--surf-2); color: var(--or-d);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,107,26,.1);
  transition: background .28s, color .28s, transform .28s, border-color .28s;
  margin-bottom: 18px;
}
.tc-ic svg { width: 26px; height: 26px; }
.tc-card:hover .tc-ic {
  background: var(--grad-flame); color: #fff; border-color: transparent;
  transform: scale(1.06) rotate(-4deg);
}

/* 标题 */
.tc-name { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 10px; letter-spacing: -.3px; }

/* 描述 */
.tc-desc {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.75;
  margin-bottom: 18px; flex: 1;
}

/* 标签 */
.tc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.tc-tag {
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  background: var(--cream-2); padding: 4px 11px; border-radius: 7px;
  transition: color .2s, background .2s;
}
.tc-card:hover .tc-tag { background: var(--surf-2); color: var(--or-d); }

/* 进入工具 CTA（底部，悬停高亮） */
.tc-go {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 800; color: var(--or-d);
  transition: gap .2s;
}
.tc-go svg { width: 15px; height: 15px; }
.tc-card:hover .tc-go { gap: 9px; }

/* ===== 响应式 ===== */
@media (max-width: 1100px) {
  .tc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tools-hero { padding: 58px 18px 44px; }
  .tools-hero h1 { font-size: 31px; }
  .tools-hero p { font-size: 14.5px; }
  .th-stats { gap: 10px; margin-top: 28px; }
  .th-stat { min-width: calc(50% - 6px); padding: 15px; }
  .th-num { font-size: 25px; }
  .tools-sec { padding: 32px 18px 64px; }
}
@media (max-width: 560px) {
  .tc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tools-hero h1 { font-size: 26px; letter-spacing: -1px; }
  .th-stat { padding: 13px 12px; }
  .th-num { font-size: 21px; }
  .th-num .pct { font-size: 14px; }
  .th-lbl { font-size: 11.5px; }
  .tc-card { padding: 24px 20px 20px; }
}