/* ==========================================================================
   VPNGive — AI tools page (zh-CN/ai-tools.html)
   Page-scoped styles. All colors come from :root tokens in base.css.
   ========================================================================== */

/* --------------------------------------------------------------- hero --- */
.hero-ai{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:56px;
  padding-bottom:40px;
}
.hero-beams{
  position:absolute;
  top:0;left:0;right:0;
  height:100%;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-beams i{
  position:absolute;
  top:0;
  display:block;
  width:8px;
  border-radius:0 0 var(--r-xs) var(--r-xs);
}
.hero-beams i:nth-child(1){left:5%;height:58%;background:linear-gradient(180deg,var(--beam-cyan-strong),var(--beam-fade-cyan))}
.hero-beams i:nth-child(2){left:13%;height:34%;width:6px;background:linear-gradient(180deg,var(--beam-indigo-mid),var(--beam-fade-indigo))}
.hero-beams i:nth-child(3){left:24%;height:72%;width:10px;background:linear-gradient(180deg,var(--beam-cyan-mid),var(--beam-fade-cyan))}
.hero-beams i:nth-child(4){left:38%;height:26%;width:6px;background:linear-gradient(180deg,var(--beam-indigo-soft),var(--beam-fade-indigo))}
.hero-beams i:nth-child(5){left:52%;height:64%;background:linear-gradient(180deg,var(--beam-indigo-strong),var(--beam-fade-indigo))}
.hero-beams i:nth-child(6){left:64%;height:38%;width:7px;background:linear-gradient(180deg,var(--beam-cyan-soft),var(--beam-fade-cyan))}
.hero-beams i:nth-child(7){left:77%;height:70%;width:9px;background:linear-gradient(180deg,var(--beam-cyan-mid),var(--beam-fade-cyan))}
.hero-beams i:nth-child(8){left:88%;height:30%;width:6px;background:linear-gradient(180deg,var(--beam-indigo-mid),var(--beam-fade-indigo))}
.hero-beams i:nth-child(9){left:95%;height:52%;background:linear-gradient(180deg,var(--beam-cyan-soft),var(--beam-fade-cyan))}
.hero-ai-inner{position:relative;z-index:1}

.h1-mark{
  background-image:linear-gradient(180deg,transparent 64%,var(--accent-wash) 64%);
  background-repeat:no-repeat;
  padding-bottom:2px;
}
.hero-lede{
  margin-top:18px;
  max-width:640px;
  font-size:16px;
  line-height:1.82;
  color:var(--muted);
}
.hero-lede strong{color:var(--ink);font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-trust{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--muted);
}
.hero-platforms{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.hero-platforms .platforms{gap:14px 22px}

/* ------------------------------------------------------------ factors --- */
.ai-factors{display:flex;flex-direction:column;gap:1px;margin-top:8px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.ai-factor{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:16px;
  padding:22px 22px;
  background:var(--panel);
  min-width:0;
}
.ai-factor .idx{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--accent);
  padding-top:3px;
}
.ai-factor h3{font-size:17px;margin-bottom:8px}
.ai-factor p{font-size:14.5px;line-height:1.8;color:var(--muted);max-width:700px}

/* --------------------------------------------------------------- list --- */
.ai-list{
  counter-reset:ai-step;
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:8px;
  padding-left:0;
  list-style:none;
}
.ai-list > li{
  counter-increment:ai-step;
  position:relative;
  padding-left:52px;
  min-width:0;
}
.ai-list > li::before{
  content:counter(ai-step,decimal-leading-zero);
  position:absolute;
  left:0;top:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:var(--r-pill);
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--accent);
}
.ai-list h3{font-size:16.5px;margin-bottom:7px}
.ai-list p{font-size:14.5px;line-height:1.8;color:var(--muted);max-width:700px}

/* ------------------------------------------------------------- scenes --- */
.ai-scenes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:8px;
}
.ai-scene{
  min-width:0;
  padding:20px 18px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}
.ai-scene-k{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--accent);
  margin-bottom:8px;
}
.ai-scene h3{font-size:16px;margin-bottom:8px}
.ai-scene p{font-size:14px;line-height:1.78;color:var(--muted)}

/* ---------------------------------------------------------- table note --- */
.ai-table-note{
  margin-top:14px;
  font-size:13.5px;
  line-height:1.76;
  color:var(--muted);
  max-width:760px;
}
.ai-table-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------- advice --- */
.ai-advice{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-top:8px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
}
.ai-advice-item{
  min-width:0;
  padding:20px 20px;
  background:var(--panel);
}
.ai-advice-item h3{font-size:16px;margin-bottom:7px}
.ai-advice-item p{font-size:14px;line-height:1.78;color:var(--muted)}

.ai-plan-note{margin-top:22px}
.ai-plan-text{font-size:14px;line-height:1.82;color:var(--muted)}
.ai-plan-text b{color:var(--ink);font-weight:700}
.ai-plan-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ---------------------------------------------------------------- cta --- */
.ai-cta{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:26px 26px;
  border-radius:var(--r-lg);
  background:var(--ink);
  color:var(--on-dark);
  box-shadow:var(--shadow-dark);
}
.ai-cta::before{
  content:"";
  position:absolute;
  top:0;right:-40px;bottom:0;
  width:240px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--cyan) 100%);
  -webkit-mask-image:radial-gradient(circle at 3px 3px,#000 1.2px,transparent 1.6px);
  mask-image:radial-gradient(circle at 3px 3px,#000 1.2px,transparent 1.6px);
  -webkit-mask-size:6px 6px;
  mask-size:6px 6px;
  opacity:.5;
  pointer-events:none;
}
.ai-cta-copy{position:relative;z-index:1;min-width:0;max-width:640px}
.ai-cta-brand{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--cyan)}
.ai-cta-title{margin-top:8px;font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--on-dark);line-height:1.35}
.ai-cta-text{margin-top:8px;font-size:13.5px;line-height:1.72;color:var(--on-dark-soft)}
.ai-cta .btn{position:relative;z-index:1;flex-shrink:0;white-space:nowrap}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:1040px){
  .ai-scenes{grid-template-columns:1fr}
  .ai-advice{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-ai{padding-top:40px;padding-bottom:30px}
  .hero-lede{font-size:15px}
  .ai-factor{grid-template-columns:1fr;gap:6px;padding:18px 16px}
  .ai-factor .idx{padding-top:0}
  .ai-list > li{padding-left:44px}
  .ai-list > li::before{width:30px;height:30px;font-size:10.5px}
  .ai-cta{padding:22px 20px}
  .ai-cta-title{font-size:18px}
}
@media (max-width:640px){
  .hero-beams i{width:5px}
  .hero-beams i:nth-child(3),
  .hero-beams i:nth-child(7){width:6px}
  .hero-cta{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .hero-beams i{opacity:.7}
}