/* =============================================
   子羡科技官网 - AI智能服务页样式
   ============================================= */

/* AI主题色变量扩展 */
:root {
  --ai-primary: #7c3aed;
  --ai-primary-light: rgba(124, 58, 237, 0.08);
  --ai-gradient-chatbot: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  --ai-gradient-content:  linear-gradient(135deg, #db2777 0%, #7c3aed 100%);
  --ai-gradient-analytics: linear-gradient(135deg, #0891b2 0%, #059669 100%);
  --ai-gradient-automation: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
}

/* 服务导航 - 复用service样式 */
.service-nav { background: var(--bg-white); border-bottom: 1px solid var(--border); position: sticky; top: 72px; z-index: 100; }
.service-nav-inner { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.service-nav-item { padding: 18px 32px; font-size: 15px; font-weight: 500; color: var(--text-sub); border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; transition: var(--transition); text-decoration: none; display: block; }
.service-nav-item:hover, .service-nav-item.active { color: var(--ai-primary); border-bottom-color: var(--ai-primary); }

/* 服务详情区 */
.service-detail { padding: 80px 0; }
.service-detail:nth-child(odd) { background: var(--bg-white); }
.service-detail:nth-child(even) { background: var(--bg-gray); }
.service-detail-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.service-detail:nth-child(even) .service-detail-inner { direction: rtl; }
.service-detail:nth-child(even) .service-detail-inner > * { direction: ltr; }

.service-detail-visual { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; position: relative; }
.service-visual-bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
.service-visual-bg.bg-gradient-chatbot    { background: var(--ai-gradient-chatbot); }
.service-visual-bg.bg-gradient-content   { background: var(--ai-gradient-content); }
.service-visual-bg.bg-gradient-analytics { background: var(--ai-gradient-analytics); }
.service-visual-bg.bg-gradient-automation { background: var(--ai-gradient-automation); }
.service-visual-icon { width: 80px; height: 80px; background: rgba(255,255,255,.15); border-radius: 20px; display: flex; align-items: center; justify-content: center; }
.service-visual-icon svg { color: #fff; }
.service-visual-label { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.8); }

/* 浮动特性卡片 */
.floating-badges { position: absolute; inset: 0; }
.floating-badge { position: absolute; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 8px 14px; font-size: 13px; color: #fff; font-weight: 500; }
.floating-badge.pos1 { top: 20px; left: 20px; }
.floating-badge.pos2 { top: 20px; right: 20px; }
.floating-badge.pos3 { bottom: 20px; left: 20px; }
.floating-badge.pos4 { bottom: 20px; right: 20px; }

.service-detail-tag { display: inline-block; padding: 5px 14px; background: var(--ai-primary-light); color: var(--ai-primary); border-radius: 100px; font-size: 12px; font-weight: 600; margin-bottom: 16px; }
.service-detail-title { font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: var(--secondary); margin-bottom: 8px; line-height: 1.2; }
.service-detail-desc { font-size: 16px; color: var(--text-sub); line-height: 1.9; margin-bottom: 28px; }

.service-features { margin-bottom: 28px; }
.service-feature-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.service-feature-item:last-child { border-bottom: none; }
.feature-check { width: 20px; height: 20px; background: var(--ai-primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.feature-check svg { color: var(--ai-primary); }
.feature-text { font-size: 15px; color: var(--text-main); line-height: 1.6; }

.service-cases-label { font-size: 13px; font-weight: 600; color: var(--text-light); margin-bottom: 12px; letter-spacing: .5px; text-transform: uppercase; }
.service-cases-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

/* AI紫色标签 */
.tag-purple { background: rgba(124, 58, 237, 0.08); color: var(--ai-primary); border: 1px solid rgba(124, 58, 237, 0.2); padding: 4px 12px; border-radius: 100px; font-size: 13px; font-weight: 500; display: inline-block; }
.tag-purple-light { background: rgba(124, 58, 237, 0.08); color: var(--ai-primary); border: 1px solid rgba(124, 58, 237, 0.2); padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 500; display: inline-block; }

.service-price { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--ai-primary-light); border-radius: var(--radius-sm); margin-bottom: 24px; }
.service-price-label { font-size: 14px; color: var(--text-sub); }
.service-price-value { font-size: 22px; font-weight: 800; color: var(--ai-primary); }
.service-price-note { font-size: 12px; color: var(--text-light); }

/* AI实施流程 */
.ai-process-section { padding: 80px 0; background: linear-gradient(135deg, #0f0a1e 0%, #1a0533 50%, #0a1628 100%); }
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.process-card { padding: 32px 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(124, 58, 237, 0.2); border-radius: var(--radius); transition: var(--transition); position: relative; overflow: hidden; }
.process-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ai-primary), #a78bfa); opacity: 0; transition: var(--transition); }
.process-card:hover { background: rgba(124, 58, 237, 0.1); border-color: rgba(124, 58, 237, 0.5); transform: translateY(-4px); }
.process-card:hover::before { opacity: 1; }
.process-step { font-size: 44px; font-weight: 900; color: rgba(124, 58, 237, 0.3); line-height: 1; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.process-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.process-desc { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.7; }

/* 典型案例 */
.cases-section { padding: 80px 0; background: var(--bg-white); }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; transition: var(--transition); position: relative; overflow: hidden; }
.case-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--ai-primary), #a78bfa); }
.case-card:hover { border-color: var(--ai-primary); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.12); transform: translateY(-2px); }
.case-card-body { margin-bottom: 20px; }
.case-card-title { font-size: 18px; font-weight: 700; color: var(--secondary); margin-bottom: 12px; }
.case-card-desc { font-size: 15px; color: var(--text-sub); line-height: 1.8; }
.case-card-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* AI标签 */
.section-tag.ai-tag { background: rgba(124,58,237,.2); color: #a78bfa; border: 1px solid rgba(124,58,237,.35); }
.section-tag.ai-tag-light { background: rgba(124,58,237,.08); color: var(--ai-primary); border: 1px solid rgba(124,58,237,.2); }

/* 响应式 */
@media (max-width: 1024px) {
    .service-detail-inner { grid-template-columns: 1fr; }
    .service-detail:nth-child(even) .service-detail-inner { direction: ltr; }
    .service-detail-visual { max-width: 480px; }
    .process-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .service-detail { padding: 60px 0; }
    .process-grid { grid-template-columns: 1fr; }
    .service-nav-item { padding: 14px 20px; }
    .cases-grid { grid-template-columns: 1fr; }
    .cases-section { padding: 60px 0; }
}