/* ============================================================
   统一「能力介绍页」模板样式 capability.css
   适用：能力中心下各能力介绍页（数字人/声音克隆/视频生成/知识库/
         智能硬件/AI Agent/工作流编排/多模态模型）
   结构：banner → intro → feature → scenario → tech → cta(+接入弹窗)
   ============================================================ */

/* ===== Page Banner ===== */
.page-banner{
  background:linear-gradient(135deg,#1E40AF,#3B82F6);
  color:#fff;padding:88px 2rem 52px;text-align:center;
  position:relative;overflow:hidden;
}
.page-banner::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 120%,rgba(255,255,255,.12),transparent 55%);
  pointer-events:none;
}
.page-banner .page-banner-icon{font-size:3.5rem;margin-bottom:14px}
.page-banner h1{font-size:2.6rem;font-weight:900;margin-bottom:10px;letter-spacing:-.02em;position:relative}
.page-banner p{font-size:1.08rem;opacity:.88;max-width:560px;margin:0 auto;line-height:1.7;position:relative}

/* ===== Intro ===== */
.intro{max-width:1200px;margin:0 auto;padding:56px 2rem 0}
.intro-inner{display:flex;align-items:center;gap:52px;flex-wrap:wrap}
.intro-text{flex:1;min-width:300px}
.intro-text .tag{display:inline-block;padding:4px 14px;border-radius:16px;font-size:.75rem;font-weight:700;color:var(--blue);background:var(--blue-bg);margin-bottom:16px}
.intro-text h2{font-size:1.7rem;font-weight:800;color:var(--gray-900);margin-bottom:16px;letter-spacing:-.01em}
.intro-text p{font-size:1rem;color:var(--gray-600);line-height:1.8;margin-bottom:12px}
.intro-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.intro-badge{padding:8px 16px;border-radius:20px;font-size:.8rem;font-weight:600;background:var(--blue-bg);color:var(--blue)}
.intro-badge.purple{background:var(--purple-bg);color:var(--purple)}
.intro-badge.green{background:var(--green-bg);color:var(--green)}
.intro-badge.orange{background:var(--orange-bg);color:var(--orange)}
.intro-badge.teal{background:var(--teal-bg);color:var(--teal)}
.intro-visual{
  flex:1;min-width:300px;background:var(--gray-50);border-radius:var(--radius-xl);
  padding:52px 44px;text-align:center;border:1px solid var(--gray-200);
}
.intro-visual .visual-icon{font-size:5rem;margin-bottom:18px}
.intro-visual h3{font-size:1.25rem;font-weight:700;color:var(--gray-800);margin-bottom:8px}
.intro-visual p{font-size:.88rem;color:var(--gray-500)}

/* ===== Section 通用 ===== */
.section{max-width:1200px;margin:0 auto;padding:60px 2rem 0}
.section-head{text-align:center;margin-bottom:44px}
.section-head .tag{display:inline-block;padding:4px 14px;border-radius:16px;font-size:.75rem;font-weight:700;color:var(--blue);background:var(--blue-bg);margin-bottom:12px}
.section-head h2{font-size:1.8rem;font-weight:800;color:var(--gray-900);letter-spacing:-.01em}
.section-head p{font-size:.95rem;color:var(--gray-500);margin-top:8px}

/* Feature Grid */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-card{
  background:#fff;border-radius:var(--radius-lg);padding:30px 26px;
  border:1px solid var(--gray-100);transition:all .3s;display:flex;flex-direction:column;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,.08)}
.feature-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:16px}
.feature-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;color:var(--gray-900)}
.feature-card p{font-size:.85rem;color:var(--gray-500);line-height:1.7;flex:1}
.feature-card .feature-meta{font-size:.75rem;color:var(--gray-400);margin-top:14px;padding-top:12px;border-top:1px dashed var(--gray-200)}

/* Scenario */
.scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.scenario-card{
  background:var(--gray-50);border-radius:var(--radius-lg);padding:24px 28px;
  border:1px solid var(--gray-200);display:flex;gap:16px;align-items:flex-start;transition:all .3s;
}
.scenario-card:hover{border-color:var(--blue-light);background:#fff}
.scenario-icon{font-size:2rem;flex-shrink:0}
.scenario-card h3{font-size:1rem;font-weight:700;color:var(--gray-800);margin-bottom:6px}
.scenario-card p{font-size:.85rem;color:var(--gray-500);line-height:1.7}

/* Tech Points */
.tech-list{max-width:900px;margin:0 auto}
.tech-item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--gray-100);align-items:flex-start}
.tech-item:last-child{border-bottom:none}
.tech-num{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;
  background:var(--blue-bg);color:var(--blue);
}
.tech-item h4{font-size:1rem;font-weight:700;color:var(--gray-800);margin-bottom:4px}
.tech-item p{font-size:.85rem;color:var(--gray-500);line-height:1.6}

/* ===== CTA（接入入口） ===== */
.cta{max-width:1200px;margin:0 auto;padding:64px 2rem 80px}
.cta-box{
  background:linear-gradient(135deg,#1E40AF,#3B82F6);color:#fff;
  border-radius:var(--radius-xl);padding:52px 44px;text-align:center;position:relative;overflow:hidden;
}
.cta-box::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.cta-box::after{content:'';position:absolute;bottom:-80px;left:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.06)}
.cta-box h2{font-size:1.6rem;font-weight:800;margin-bottom:14px;position:relative}
.cta-box p{font-size:.95rem;opacity:.88;margin-bottom:28px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.7;position:relative}
.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.cta-btn{
  padding:13px 30px;border-radius:10px;font-size:.9rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.4);transition:all .2s;cursor:pointer;
}
.cta-btn:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}
.cta-btn.solid{background:#fff;color:var(--blue);border-color:#fff}
.cta-btn.solid:hover{background:var(--gray-100)}
.cta-btn.ghost{background:transparent;border-color:transparent}
.cta-btn.ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4)}

/* ===== 接入需求弹窗 ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:1000;padding:1rem;
}
.modal-overlay.show{display:flex}
.modal{
  background:#fff;border-radius:var(--radius-xl);max-width:520px;width:100%;
  padding:40px 36px;position:relative;box-shadow:0 25px 60px rgba(0,0,0,.2);
  animation:modalIn .25s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  background:var(--gray-100);border:none;font-size:1rem;color:var(--gray-500);cursor:pointer;transition:all .2s;
}
.modal-close:hover{background:var(--gray-200);color:var(--gray-800)}
.modal-head{text-align:center;margin-bottom:24px}
.modal-head .modal-icon{font-size:2.6rem;margin-bottom:10px}
.modal-head h3{font-size:1.35rem;font-weight:800;color:var(--gray-900)}
.modal-head p{font-size:.85rem;color:var(--gray-500);margin-top:6px}
.modal-field{margin-bottom:16px}
.modal-field label{display:block;font-size:.82rem;font-weight:600;color:var(--gray-700);margin-bottom:6px}
.modal-field label b{color:var(--blue)}
.modal-field input,.modal-field textarea,.modal-field select{
  width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid var(--gray-200);
  font-size:.9rem;outline:none;transition:border-color .2s;font-family:inherit;box-sizing:border-box;
}
.modal-field input:focus,.modal-field textarea:focus,.modal-field select:focus{border-color:var(--blue)}
.modal-field textarea{resize:vertical;min-height:80px}
.modal-submit{
  width:100%;padding:13px;border-radius:10px;border:none;font-size:.95rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#1E40AF,#3B82F6);cursor:pointer;transition:opacity .2s;margin-top:8px;
}
.modal-submit:hover{opacity:.9}
.modal-note{text-align:center;font-size:.75rem;color:var(--gray-400);margin-top:14px}
.modal-success{text-align:center;padding:20px 0;display:none}
.modal-success.show{display:block}
.modal-success .succ-icon{font-size:3.5rem;margin-bottom:12px}
.modal-success h4{font-size:1.3rem;font-weight:800;color:var(--green);margin-bottom:8px}
.modal-success p{font-size:.9rem;color:var(--gray-500);line-height:1.7}

/* ===== 响应式 ===== */
@media (max-width:1024px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .feature-grid{grid-template-columns:1fr}
  .scenario-grid{grid-template-columns:1fr}
  .page-banner h1{font-size:1.9rem}
  .cta-box{padding:40px 24px}
  .modal{padding:32px 22px}
}