/* ============================================================
 * 墨迹提取大师 · 首页页面级样式（CSP 合规外链版）
 * 编制：XT-AIGC-UPGRADE-20260910 · 任务 #886
 * 来源：原 index.html 内联 <style> 块 + 原内联 style 属性 → 类名化
 * 合规：style-src 'self'（callguard.cn CSP default-src 'self'）
 * ============================================================ */

/* ---------- Hero ---------- */
.product-hero h1 { font-size: 52px; }
.product-hero .cg-hero-subtitle { max-width: 760px; margin-left: auto; margin-right: auto; }
.product-hero .hero-visual {
  margin-top: 48px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px;
  padding: 28px; backdrop-filter: blur(10px);
  max-width: 800px; margin-left: auto; margin-right: auto; text-align: left;
}
.product-hero .hero-visual h3 { color: #fff; font-size: 18px; margin-bottom: 12px; }
.product-hero .hero-visual p { color: rgba(255, 255, 255, 0.75); font-size: 15px; line-height: 1.7; }
.product-hero .cg-hero-meta { margin-top: 40px; }
.cg-nav-actions .ink-nav-login { color: rgba(255, 255, 255, 0.8); }

/* ---------- 功能标签 ---------- */
.feature-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.feature-tags .tag {
  padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--cg-slate-100); color: var(--cg-slate-600);
}

/* ---------- 三步上手 ---------- */
.ink-bg-surface { background: var(--bg-surface); }
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.workflow-step { position: relative; padding: 24px; }
.workflow-step:not(:last-child)::after {
  content: '→'; position: absolute; top: 40px; right: -22px;
  font-size: 24px; color: var(--cg-slate-300);
}
.workflow-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cg-primary), var(--cg-accent));
  color: #fff; font-size: 24px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; box-shadow: var(--shadow-md);
}
.workflow-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.workflow-step p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

/* ---------- 价格 ---------- */
.ink-pro-note {
  font-size: 14px; color: var(--cg-warn); font-weight: 700;
  margin: -12px 0 16px;
}

/* ---------- FAQ ---------- */
.faq-section { background: var(--bg-surface); }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 24px;
}
.faq-item h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); }
.faq-item p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

/* ---------- 底部 CTA ---------- */
.portal-cta {
  background: linear-gradient(135deg, var(--cg-slate-900) 0%, #1e3a8a 100%);
  color: #fff; text-align: center;
}
.ink-cta-title { font-size: var(--text-3xl); font-weight: 800; margin: var(--space-4) 0 var(--space-3); }
.ink-cta-sub { color: rgba(255, 255, 255, 0.75); font-size: var(--text-lg); margin-bottom: var(--space-8); }
.ink-cta-btn { background: #fff; color: var(--cg-primary-700); }

/* ---------- AI 文档结构化（新增能力卡） ---------- */
.ink-ai-band { background: linear-gradient(135deg, #0f766e 0%, #0e7490 55%, #1e3a8a 100%); color: #fff; }
.ink-ai-band .cg-section-header h2 { color: #fff; }
.ink-ai-band .cg-section-header p { color: rgba(255, 255, 255, 0.82); }
.ink-ai-band .cg-label { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ink-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.ink-ai-card {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px; padding: 24px; backdrop-filter: blur(8px);
}
.ink-ai-card .ink-ai-ico { font-size: 26px; margin-bottom: 10px; }
.ink-ai-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.ink-ai-card p { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); }
.ink-ai-actions { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ink-ai-btn-solid { background: #fff; color: #0f766e; }
.ink-ai-note { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, 0.7); text-align: center; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .ink-ai-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .product-hero h1 { font-size: 34px; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-step:not(:last-child)::after { display: none; }
}