/* ============================================================
   VPNBQ — ai.css
   页面专属样式:AI 工具加速专题(chatgpt.html)
   只消费 base.css 的设计令牌,不重复定义公共组件
   ============================================================ */

/* ---------- 首屏:左文案 + 右线路示意 ---------- */
.ai-hero{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:56px;
  align-items:center;
}
.hero .copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  min-width:0;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.12;
  letter-spacing:-.02em;
}
.hero .lede{max-width:560px}
.cta-row{margin-top:2px}
.hero .trust{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  font-size:13px;
  color:var(--text-2);
}
.hero .trust span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.hero .trust svg{width:14px;height:14px;flex-shrink:0;color:var(--success)}

/* ---------- 线路示意图面板 ---------- */
.link-diagram{
  min-width:0;
  background:var(--bg-panel);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-panel);
  padding:28px 26px 24px;
}
.ld-row{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.ld-label{
  width:64px;
  flex:0 0 64px;
  font:500 11px/1 var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
}
.ld-items{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
.ld-link{
  position:relative;
  display:block;
  height:22px;
  margin-left:32px;
  border-left:1px dashed var(--border-strong);
}
.ld-link::after{
  content:"";
  position:absolute;
  left:-3px;
  top:8px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 3px var(--tint-10);
}
.ld-note{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--border-soft);
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-3);
}

/* ---------- 敏感点四格 ---------- */
.ai-points{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:36px;
}
.ai-point{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px 24px 26px;
  background:var(--bg-panel);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-panel);
}
.ai-point h3{font-size:17px;font-weight:500;line-height:1.4}
.ai-point p{font-size:14px;line-height:1.8;color:var(--text-2)}

/* ---------- 分场景面板 ---------- */
.scene{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:28px;
  align-items:start;
}
.scene-copy{min-width:0}
.scene-copy h3{margin-bottom:10px}
.scene-copy p{font-size:14.5px;line-height:1.8;color:var(--text-2)}
.scene-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.scene-list li{
  display:flex;
  gap:9px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-2);
  min-width:0;
}
.scene-list li::before{
  content:"";
  width:5px;
  height:5px;
  margin-top:8px;
  border-radius:1px;
  background:var(--accent-2);
  flex-shrink:0;
}
.scene-side{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 18px 18px;
  border-radius:var(--r-md);
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
}
.scene-side .k{
  font:500 11px/1 var(--font-mono);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-3);
}
.scene-side .v{
  font-size:13.5px;
  line-height:1.6;
  color:var(--text);
}
.scene-side .v + .k{margin-top:10px}

/* ---------- 选线建议 ---------- */
.pick-list{
  counter-reset:pick;
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:34px;
  max-width:840px;
}
.pick-list > li{
  position:relative;
  padding-left:48px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-2);
  min-width:0;
}
.pick-list > li::before{
  counter-increment:pick;
  content:counter(pick,decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  font:500 12px/1 var(--font-mono);
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--tint-16);
}
.pick-list strong{color:var(--text)}
.pick-list a{color:var(--accent);border-bottom:1px solid var(--tint-16)}
.pick-list a:hover{border-bottom-color:var(--accent)}
#pick .cta-row{margin-top:34px}

/* ---------- FAQ 补充链接 ---------- */
.faq-more{
  margin-top:18px;
  font-size:13.5px;
  color:var(--text-3);
}
.faq-more a{color:var(--accent)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .ai-hero{grid-template-columns:1fr;gap:36px}
  .scene{grid-template-columns:1fr;gap:20px}
  .scene-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .scene-side .v + .k{margin-top:0}
}
@media (max-width:768px){
  .hero-title{font-size:clamp(27px,7vw,36px)}
  .ai-points{grid-template-columns:1fr}
  .link-diagram{padding:22px 20px 20px}
}
@media (max-width:640px){
  .ld-row{gap:10px}
  .ld-label{width:auto;flex:0 0 auto}
  .ld-link{margin-left:16px}
  .pick-list > li{padding-left:40px}
}