/* ============================================================
   VPNCZ — ai.css
   AI 工具专题页专属样式：页面头部（点阵纹理 + 珊瑚柔光）、
   事实胶囊行、卡片网格、表格内标签组、代码块。
   仅本页引用，不覆盖 base.css / components.css 的任何既有类。
   ============================================================ */

/* ---------- 1. 页面头部 ---------- */
.ai-hero{
  position:relative;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);
  padding-top:72px;
  padding-bottom:64px;
  overflow-x:clip;
  max-width:100%;
}
.ai-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,rgba(var(--ink-rgb),.07) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 78%);
  pointer-events:none;
}
.ai-hero::after{
  content:"";
  position:absolute;
  top:-140px;
  right:-120px;
  width:460px;
  height:460px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.16) 0%,rgba(var(--accent-rgb),0) 68%);
  pointer-events:none;
}
.ai-hero .wrap{position:relative;z-index:1}
.ai-hero .eyebrow{margin-bottom:18px}
.ai-hero h1{max-width:17em}
.ai-hero .lede{margin-top:18px}
.ai-hero .cta-row{margin-top:28px}
.ai-hero .trust{margin-top:26px}

/* ---------- 2. 事实胶囊行 ---------- */
.ai-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.ai-facts li{min-width:0;max-width:100%}

/* ---------- 3. 卡片网格 ---------- */
.ai-cards{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.ai-cards>*{min-width:0}
.ai-cards.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.ai-cards .panel-soft h3{margin-bottom:10px}

/* ---------- 4. 区块小标题下的引导段 ---------- */
.sec-head .lede{margin-top:14px}

/* ---------- 5. 表格内标签组 ---------- */
.ai-tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- 6. 代码块 ---------- */
.ai-code{
  background:var(--ink);
  color:rgba(var(--white-rgb),.92);
  border-radius:var(--r-md);
  padding:16px 18px;
  margin:16px 0 22px;
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.7;
  overflow-x:auto;
  max-width:100%;
}
.ai-code code{color:inherit;font-size:inherit}

/* ---------- 7. 响应式 ---------- */
@media (max-width:900px){
  .ai-hero{padding-top:48px;padding-bottom:48px}
}
@media (max-width:640px){
  .ai-hero{padding-top:36px;padding-bottom:40px}
  .ai-hero::after{width:280px;height:280px;top:-100px;right:-110px}
  .ai-hero h1{max-width:100%}
  .ai-cards{grid-template-columns:1fr}
  .ai-cards.cols-2{grid-template-columns:1fr}
  .ai-code{font-size:12px;padding:14px}
}