/* ============================================================
   ai.html 页面专属样式（2026-10-25 重构版 v2）
   规范：global.css（公共容器/字体/菜单）+ 本页 ai.css（区块专属）
   设计目标：与 development 页视觉拉开差异
     - 深色科技渐变 Hero（不用图片 banner）
     - 数字编号卡片 / 横向时间轴 / 原生手风琴 FAQ / 大数字信任墙
     - 主色：科技蓝紫 #2b6cff + 青 #22d3ee + 紫 #7c5cff + 暖橙 #ff7a45
   头部/底部 include 沿用全站，不在此修改
   ============================================================ */

/* ---------- 内容容器：宽屏居中 + 两侧留白 ----------
   全站 .all 仅在小屏断点才有 width:96%，桌面端无宽度约束会贴边；
   本页统一补：96% 宽 + 1200 上限 + 居中 + 24px 内边距，任何屏宽都不贴边 */
.ai-hero .all,.ai-pain .all,.ai-what .all,.ai-benefits .all,.ai-steps .all,.ai-services .all,.ai-trust .all,.ai-faq .all,.ai-cta .all{width:96%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}

/* ---------- 公共区块标题 ---------- */
.ai-sec-title{font-weight:700;font-size:30px;color:#1f2a44;text-align:center;margin:0 0 14px;letter-spacing:.5px}
.ai-sec-title--left{text-align:left}
.ai-sec-sub{font-size:15px;color:#5b6678;text-align:center;max-width:760px;margin:0 auto 40px;line-height:26px}
.ai-eyebrow{display:inline-block;font-size:13px;font-weight:700;color:#2b6cff;background:#eaf0ff;padding:5px 14px;border-radius:20px;margin-bottom:16px}

/* ---------- 按钮 ---------- */
.ai-btn{display:inline-block;font-size:16px;font-weight:700;padding:14px 34px;border-radius:8px;text-decoration:none;transition:all .25s ease;cursor:pointer;border:none}
.ai-btn--primary{background:linear-gradient(120deg,#2b6cff,#22d3ee);color:#fff;box-shadow:0 8px 22px rgba(43,108,255,.35)}
.ai-btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(43,108,255,.45)}
.ai-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.ai-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.ai-btn--lg{padding:18px 52px;font-size:18px;margin-top:8px}

/* ---------- Hero ---------- */
.ai-hero{position:relative;background:linear-gradient(135deg,#0c1e4f 0%,#16357a 55%,#0e1f4d 100%);color:#fff;overflow:hidden;padding:96px 0 84px}
.ai-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 80%)}
.ai-hero-glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.ai-hero-glow--blue{width:340px;height:340px;background:#2b6cff;top:-80px;right:8%}
.ai-hero-glow--cyan{width:260px;height:260px;background:#22d3ee;bottom:-90px;left:6%}
.ai-hero-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px}
.ai-hero-left{flex:1;max-width:620px}
.ai-hero-tag{display:inline-block;font-size:13px;color:#bfe9ff;border:1px solid rgba(34,211,238,.5);padding:6px 16px;border-radius:20px;margin-bottom:22px}
.ai-hero-title{font-size:42px;line-height:1.25;font-weight:800;margin:0 0 20px;letter-spacing:1px}
.ai-hero-sub{font-size:16px;line-height:28px;color:#c8d6f5;margin:0 0 30px;max-width:560px}
.ai-hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.ai-hero-trust{list-style:none;display:flex;gap:26px;flex-wrap:wrap;padding:0;margin:0}
.ai-hero-trust li{font-size:14px;color:#dbe6ff;display:flex;align-items:center;gap:8px}
.ai-hero-trust li i{width:7px;height:7px;border-radius:50%;background:#22d3ee;display:inline-block;box-shadow:0 0 8px #22d3ee}
.ai-hero-right{flex:1;max-width:420px;display:flex;justify-content:center}
.ai-hero-right svg{max-width:380px}

/* ---------- 痛点四卡 ---------- */
.ai-pain{background:#fff;padding:78px 0}
.ai-pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px}
.ai-pain-card{background:#f5f7fb;border:1px solid #eef1f7;border-radius:14px;padding:34px 24px;text-align:center;transition:all .25s ease}
.ai-pain-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,42,68,.1);border-color:#cfe0ff}
.ai-ico{width:54px;height:54px;color:#2b6cff;margin-bottom:14px}
.ai-pain-card h3{font-size:18px;color:#1f2a44;margin:0 0 10px}
.ai-pain-card p{font-size:14px;color:#5b6678;line-height:22px;margin:0}

/* ---------- AI 是什么 ---------- */
.ai-what{background:#f5f7fb;padding:78px 0}
.ai-what-inner{display:flex;align-items:center;gap:50px}
.ai-what-text{flex:1}
.ai-what-text p{font-size:15px;color:#4a5570;line-height:27px;margin:0 0 16px}
.ai-what-list{list-style:none;padding:0;margin:18px 0 0}
.ai-what-list li{position:relative;padding-left:26px;font-size:15px;color:#1f2a44;line-height:30px}
.ai-what-list li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:linear-gradient(120deg,#2b6cff,#22d3ee)}
.ai-what-visual{flex:1;max-width:420px;display:flex;justify-content:center}

/* ---------- 四个好处（数字编号）---------- */
.ai-benefits{background:#fff;padding:78px 0}
.ai-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.ai-benefit-card{position:relative;background:linear-gradient(160deg,#f7faff,#eef3ff);border:1px solid #e6ecfb;border-radius:16px;padding:42px 26px 34px;overflow:hidden;transition:all .25s ease}
.ai-benefit-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(43,108,255,.15)}
.ai-benefit-no{position:absolute;top:14px;right:20px;font-size:46px;font-weight:800;font-style:italic;color:rgba(43,108,255,.12)}
.ai-benefit-card .ai-ico{color:#2b6cff;margin-bottom:16px}
.ai-benefit-card h3{font-size:20px;color:#1f2a44;margin:0 0 12px}
.ai-benefit-card p{font-size:14px;color:#5b6678;line-height:23px;margin:0}

/* ---------- 标准交付六步（时间轴）---------- */
.ai-steps{background:#0c1e4f;padding:80px 0;color:#fff}
.ai-steps .ai-sec-title{color:#fff}
.ai-steps .ai-sec-sub{color:#aab8e0}
.ai-steps-track{position:relative;display:flex;justify-content:space-between;margin-top:54px;padding-top:8px}
.ai-steps-track::before{content:"";position:absolute;top:30px;left:6%;right:6%;height:3px;background:linear-gradient(90deg,#2b6cff,#22d3ee,#7c5cff);opacity:.5}
.ai-step{flex:1;text-align:center;position:relative;z-index:1;padding:0 10px}
.ai-step-dot{width:60px;height:60px;border-radius:50%;background:#10204d;border:3px solid #2b6cff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 0 0 6px rgba(43,108,255,.12)}
.ai-step-ico{width:30px;height:30px;color:#22d3ee}
.ai-step h3{font-size:17px;color:#fff;margin:0 0 8px}
.ai-step p{font-size:13px;color:#aab8e0;line-height:21px;margin:0 auto;max-width:160px;text-align:center}

/* ---------- 能做的 6 类开发 ---------- */
.ai-services{background:#fff;padding:78px 0}
.ai-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.ai-service-card{display:flex;align-items:center;gap:18px;background:#f7f9fd;border:1px solid #eef1f7;border-radius:14px;padding:24px 26px;transition:all .25s ease}
.ai-service-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,42,68,.1)}
.ai-service-ico{width:70px;height:70px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--c1),var(--c2));flex-shrink:0}
.ai-service-ico img{display:block}
/* 透明底文字图标（AI/APP/IOT/WEB）统一漂白为白色，略带投影保证在浅色渐变上也可读 */
.ai-service-ico img.ico-w{filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(12,30,79,.22))}
.ai-service-card h3{font-size:18px;color:#1f2a44;margin:0}

/* ---------- 为什么选榜一：数字墙 + 徽章 ---------- */
.ai-trust{background:#f5f7fb;padding:80px 0}
.ai-trust-stats{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;margin:30px 0 46px}
.ai-stat{text-align:center}
.ai-stat b{display:block;font-size:48px;font-weight:800;background:linear-gradient(120deg,#2b6cff,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.ai-stat b span{font-size:30px}
.ai-stat em{display:block;font-style:normal;font-size:15px;color:#5b6678;margin-top:10px}
.ai-trust-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ai-badge{background:#fff;border:1px solid #eef1f7;border-radius:14px;padding:30px 24px;transition:all .25s ease}
.ai-badge:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,42,68,.1);border-color:#cfe0ff}
.ai-badge-ico{width:40px;height:40px;color:#2b6cff;margin-bottom:14px}
.ai-badge h3{font-size:17px;color:#1f2a44;margin:0 0 10px}
.ai-badge p{font-size:13px;color:#5b6678;line-height:21px;margin:0}

/* ---------- FAQ 手风琴 ---------- */
.ai-faq{background:#fff;padding:80px 0}
.ai-faq-list{max-width:880px;margin:40px auto 0;display:flex;flex-direction:column;gap:14px}
.ai-faq-item{background:#f5f7fb;border:1px solid #eef1f7;border-radius:12px;overflow:hidden}
.ai-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:20px 26px;font-size:17px;font-weight:600;color:#1f2a44}
.ai-faq-item summary::-webkit-details-marker{display:none}
.ai-faq-sign{position:relative;width:18px;height:18px;flex-shrink:0}
.ai-faq-sign::before,.ai-faq-sign::after{content:"";position:absolute;background:#2b6cff;transition:all .25s ease}
.ai-faq-sign::before{top:8px;left:0;width:18px;height:2.4px}
.ai-faq-sign::after{top:0;left:8px;width:2.4px;height:18px}
.ai-faq-item[open] .ai-faq-sign::after{transform:rotate(90deg);opacity:0}
.ai-faq-body{padding:0 26px 22px;font-size:14px;color:#5b6678;line-height:24px}

/* ---------- 底部 CTA ---------- */
.ai-cta{background:linear-gradient(120deg,#16357a,#0c1e4f);color:#fff;padding:70px 0;text-align:center}
.ai-cta-inner h2{font-size:28px;font-weight:700;margin:0 0 12px}
.ai-cta-inner p{font-size:15px;color:#c8d6f5;margin:0 0 26px}

/* ============================================================
   响应式
   ============================================================ */
@media screen and (max-width:1100px){
	.ai-hero-title{font-size:34px}
	.ai-pain-grid,.ai-benefits-grid{grid-template-columns:repeat(2,1fr)}
	.ai-trust-badges{grid-template-columns:repeat(2,1fr)}
	.ai-services-grid{grid-template-columns:repeat(2,1fr)}
	.ai-steps-track{flex-wrap:wrap;gap:30px 0}
	.ai-steps-track::before{display:none}
	.ai-step{flex:0 0 33.33%;margin-bottom:30px}
}
@media screen and (max-width:768px){
	.ai-hero{padding:70px 0 60px}
	.ai-hero-inner{flex-direction:column;text-align:center;justify-content:center;gap:30px}
	.ai-hero-left{max-width:100%}
	.ai-hero-btns,.ai-hero-trust{justify-content:center}
	.ai-hero-right{order:-1;max-width:300px}
	.ai-hero-title{font-size:30px}
	.ai-what-inner{flex-direction:column;gap:30px}
	.ai-what-text .ai-sec-title--left{text-align:center}
	.ai-sec-title{font-size:24px}
	.ai-pain-grid,.ai-benefits-grid,.ai-trust-badges,.ai-services-grid{grid-template-columns:1fr}
	.ai-trust-stats{gap:34px}
	.ai-step{flex:0 0 50%;text-align:center}
	.ai-step h3,.ai-step p{text-align:center}
	.ai-step p{max-width:100%;margin-left:auto;margin-right:auto}
	.ai-cta-inner h2{font-size:22px}
}
@media screen and (max-width:420px){
	.ai-step{flex:0 0 100%}
	.ai-hero-title{font-size:26px}
}