@charset "UTF-8";
/* ==========================================================================
   VPNWY · ai.css
   AI 工具加速专题页专属样式
   只补充本页新组件:页首点阵装饰 / 工具卡网格 / 线路类型条
   base.css 与 components.css 已有的类不在此重复定义
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页首与通用块间距
   -------------------------------------------------------------------------- */
.ai-intro{position:relative;overflow-x:clip;}
.ai-intro-inner{position:relative;z-index:1;max-width:58em;}
.ai-intro .lede{max-width:42em;margin-top:var(--sp-5);}
.ai-chips{margin-top:var(--sp-5);}
.ai-intro .hero-actions{margin-top:var(--sp-6);}
.ai-decor{
  position:absolute;
  top:0;
  right:0;
  width:min(360px,42%);
  height:220px;
  background-image:radial-gradient(circle,var(--accent-a12) 1.05px,transparent 1.05px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%,var(--text) 0%,transparent 72%);
  mask-image:radial-gradient(120% 100% at 100% 0%,var(--text) 0%,transparent 72%);
  pointer-events:none;
  z-index:0;
}
.ai-block{margin-top:var(--sp-7);}

/* --------------------------------------------------------------------------
   2. 工具卡网格
   -------------------------------------------------------------------------- */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.tool-card{
  display:flex;
  flex-direction:column;
  padding:var(--sp-6);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--sh-1);
  min-width:0;
}
.tool-head{display:flex;align-items:center;gap:10px;min-width:0;}
.tool-card p{margin-top:var(--sp-3);font-size:14.5px;line-height:1.72;color:var(--text-muted);}
.tool-card p strong{color:var(--text);font-weight:600;}
.tool-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:var(--sp-5);}

/* --------------------------------------------------------------------------
   3. 线路类型条
   -------------------------------------------------------------------------- */
.ai-types{display:grid;gap:12px;}
.ai-type{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  box-shadow:var(--sh-1);
  min-width:0;
}
.ai-type .lk{flex-shrink:0;margin-top:3px;}
.ai-type p{min-width:0;font-size:14.5px;line-height:1.7;color:var(--text-muted);}

/* --------------------------------------------------------------------------
   4. 响应式
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .tool-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .ai-decor{display:none;}
}
@media (max-width:520px){
  .ai-type{flex-direction:column;gap:8px;}
  .ai-type .lk{margin-top:0;}
}