/* ===== 信息化系统开发页面样式 ===== */

/* Hero */
.xxh-hero { padding: 80px 0 60px; background: #fafafa; }
.xxh-hero-content { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 40px; }
.xxh-hero-text { flex: 1; max-width: 550px; }
.xxh-hero-badge { display: inline-block; background: #f3f0ff; padding: 6px 16px; border-radius: 20px; font-size: 13px; color: #4935ff; margin-bottom: 20px; border: 1px solid #e5e0ff; }
.xxh-hero-title { font-size: 44px; line-height: 1.2; margin-bottom: 20px; font-weight: 700; }
.xxh-hero-title span { color: #4935ff; }
.xxh-hero-desc { color: #666; margin-bottom: 30px; font-size: 15px; line-height: 1.8; }
.xxh-hero-actions { display: flex; gap: 16px; }
.xxh-hero-stats { display: flex; gap: 40px; margin-top: 40px; }
.xxh-h-stat h3 { font-size: 32px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.xxh-h-stat p { font-size: 14px; color: #999; }
.xxh-hero-graphic { flex: 1; max-width: 550px; position: relative; }
.xxh-hero-macbook {
    background: #f5f5f7; border-radius: 12px; padding: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
    color: #bbb; font-size: 14px; border: 1px solid #e5e5e5; position: relative;
}
.xxh-hero-macbook img { border-radius: 8px; }
.xxh-bubble-stat {
    position: absolute; right: 20px; top: -20px;
    background: #fff; padding: 8px 16px; border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); font-size: 14px;
    border: 1px solid #eee; color: #4935ff; font-weight: 600;
}
.xxh-bubble-stat span { color: #666; font-weight: normal; margin-left: 5px; }

/* 核心竞争优势 */
.core-advantage { padding: 80px 0; background: #fff; text-align: center; }
.core-advantage h2 { font-size: 32px; margin-bottom: 10px; }
.core-advantage > p { color: #666; margin-bottom: 50px; font-size: 15px; }
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: left; }
.adv-card { background: #fbfbfd; border: 1px solid #eee; border-radius: 16px; padding: 30px; position: relative; }
.adv-card h4 { margin-top: 20px; margin-bottom: 10px; font-size: 18px; }
.adv-card p { color: #666; font-size: 14px; line-height: 1.6; }
.adv-card .icon-box { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.adv-card .icon-box img { width: 26px; height: 26px; }
.adv-card.border-purple { border-color: #e0e0ff; background: #fcfcff; }
.adv-card.border-purple .icon-box { background: #4935ff; }
.adv-card.border-blue { border-color: #e0f0ff; background: #fcfeff; }
.adv-card.border-blue .icon-box { background: #dbeafe; }
.adv-card.border-orange { border-color: #ffe8d0; background: #fffcf9; }
.adv-card.border-orange .icon-box { background: #fef3c7; }
.index-tag { position: absolute; top: -12px; left: 30px; background: #fff; padding: 0 10px; font-size: 14px; color: #999; }

/* 核心服务 */
.core-services { padding: 80px 0; background: #fafbfc; }
.sec-label { color: #4935ff; font-weight: 700; font-size: 14px; letter-spacing: 1px; margin-bottom: 10px; display: block; text-transform: uppercase; }
.sec-heading { font-size: 32px; margin-bottom: 40px; color: #1a1a1a; }
.service-grid { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.service-list { flex: 1; display: flex; flex-direction: column; gap: 30px; }
.service-item h4 { font-size: 18px; margin-bottom: 8px; color: #1a1a1a; }
.service-item p { color: #666; font-size: 14px; line-height: 1.6; }
.service-graphic { flex: 1; background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #eee; position: relative; }
.service-graphic-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.service-graphic-header h5 { font-size: 16px; }
.mock-chart { width: 100%; height: 120px; background: #f0f2f6; border-radius: 8px; display: flex; align-items: flex-end; justify-content: space-around; padding: 10px 20px; margin-bottom: 20px; }
.mock-bar { width: 15%; background: #4935ff; border-radius: 4px 4px 0 0; }
.stat-badge { position: absolute; left: -50px; bottom: 30px; background: #fff; padding: 10px 20px; border-radius: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #eee; text-align: center; }
.stat-badge strong { display: block; font-size: 18px; color: #4935ff; }
.stat-badge span { font-size: 12px; color: #666; }

/* 技术栈 */
.tech-stack { padding: 80px 0; background: #fafbfc; text-align: center; }
.tech-stack h2 { font-size: 32px; margin-bottom: 10px; }
.tech-stack > p { color: #666; margin-bottom: 50px; }
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
.tech-item { background: #fff; border-radius: 12px; padding: 30px 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.tech-icon-wrap { width: 56px; height: 56px; border-radius: 50%; background: #f4f0ff; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.tech-icon-wrap img { width: 28px; height: 28px; }
.tech-item h4 { font-size: 16px; margin-bottom: 8px; }
.tech-item p { font-size: 13px; color: #666; line-height: 1.5; }

/* 服务流程 */
.xxh-process { padding: 80px 0; background: #fff; text-align: center; }
.xxh-process h2 { font-size: 32px; margin-bottom: 10px; }
.xxh-process > p { color: #666; margin-bottom: 50px; }
.xxh-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
.p-item { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 30px; position: relative; }
.p-num { font-size: 24px; font-weight: 700; color: #e0e0e0; margin-bottom: 15px; }
.p-item h4 { font-size: 16px; margin-bottom: 8px; }
.p-item p { font-size: 13px; color: #666; line-height: 1.5; }

/* FAQ */
.xxh-faq { padding: 80px 0; background: #fafbfc; }
.xxh-faq .container { text-align: center; }
.xxh-faq h2 { font-size: 32px; margin-bottom: 10px; }
.xxh-faq > p { color: #666; margin-bottom: 40px; }
.faq-list { max-width: 800px; margin: 0 auto; text-align: left; }

/* CTA */
.xxh-cta { background: #3b2bf5; border-radius: 24px; margin: 0 20px 60px; padding: 60px 40px; text-align: center; color: #fff; }
.xxh-cta h2 { font-size: 32px; margin-bottom: 10px; }
.xxh-cta p { opacity: 0.8; font-size: 14px; margin-bottom: 30px; }
.xxh-cta .btn-primary { background: #fff; color: #3b2bf5; padding: 12px 40px; font-size: 15px; }

/* 响应式 */
@media (max-width: 992px) {
    .xxh-hero-content { flex-direction: column; }
    .xxh-hero-graphic { max-width: 100%; }
    .adv-grid { grid-template-columns: 1fr; }
    .service-grid { flex-direction: column; }
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
    .xxh-process-grid { grid-template-columns: 1fr 1fr; }
    .stat-badge { left: 20px; }
}
@media (max-width: 768px) {
    .xxh-hero { padding: 40px 0 30px; }
    .xxh-hero-title { font-size: 26px; }
    .xxh-hero-desc { font-size: 13px; line-height: 1.7; }
    .xxh-hero-actions { flex-direction: column; gap: 10px; }
    .xxh-hero-actions .btn { width: 100%; text-align: center; }
    .xxh-hero-stats { gap: 20px; }
    .xxh-h-stat h3 { font-size: 22px; }
    .xxh-h-stat p { font-size: 12px; }
    .xxh-hero-macbook { aspect-ratio: 16/10; }
    .xxh-bubble-stat { padding: 6px 12px; font-size: 12px; right: 12px; top: -12px; }
    .core-advantage { padding: 40px 0; }
    .core-advantage h2 { font-size: 21px; }
    .core-advantage > p { font-size: 13px; margin-bottom: 30px; }
    .adv-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .adv-card { padding: 22px 18px; }
    .adv-card h4 { font-size: 16px; margin-top: 16px; }
    .adv-card p { font-size: 13px; }
    .adv-card .icon-box { width: 42px; height: 42px; }
    .index-tag { font-size: 12px; left: 18px; }
    .core-services { padding: 40px 0; }
    .sec-heading { font-size: 21px; margin-bottom: 30px; }
    .service-grid { flex-direction: column; gap: 30px; }
    .service-list { gap: 24px; }
    .service-item h4 { font-size: 16px; }
    .service-item p { font-size: 13px; }
    .service-graphic { padding: 20px; }
    .mock-chart { height: 90px; }
    .stat-badge { left: 10px; bottom: 20px; padding: 8px 14px; }
    .stat-badge strong { font-size: 16px; }
    .tech-stack { padding: 40px 0; }
    .tech-stack h2 { font-size: 21px; }
    .tech-stack > p { font-size: 13px; margin-bottom: 30px; }
    .tech-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .tech-item { padding: 22px 16px; }
    .tech-icon-wrap { width: 48px; height: 48px; }
    .tech-item h4 { font-size: 15px; }
    .tech-item p { font-size: 12px; }
    .xxh-process { padding: 40px 0; }
    .xxh-process h2 { font-size: 21px; }
    .xxh-process > p { font-size: 13px; margin-bottom: 30px; }
    .xxh-process-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .p-item { padding: 22px 18px; }
    .p-num { font-size: 20px; }
    .p-item h4 { font-size: 15px; }
    .p-item p { font-size: 12px; }
    .xxh-faq { padding: 40px 0; }
    .xxh-faq h2 { font-size: 21px; }
    .xxh-cta { margin: 0 12px 36px; padding: 36px 18px; border-radius: 18px; }
    .xxh-cta h2 { font-size: 22px; }
    .xxh-cta p { font-size: 13px; }
    .xxh-cta .btn-primary { padding: 12px 28px; font-size: 14px; }
}

@media (max-width: 480px) {
    .xxh-hero { padding: 30px 0 30px; }
    .xxh-hero-title { font-size: 22px; }
    .xxh-hero-desc { font-size: 13px; }
    .xxh-hero-stats { gap: 16px; }
    .xxh-h-stat h3 { font-size: 20px; }
    .core-advantage, .core-services, .tech-stack, .xxh-process, .xxh-faq { padding: 36px 0; }
    .core-advantage h2, .sec-heading, .tech-stack h2, .xxh-process h2, .xxh-faq h2 { font-size: 18px; }
    .adv-grid { grid-template-columns: 1fr; }
    .tech-grid { grid-template-columns: 1fr; }
    .xxh-process-grid { grid-template-columns: 1fr; }
    .adv-card, .service-item { padding: 16px; }
    .xxh-cta { margin: 0 10px 24px; padding: 30px 16px; }
    .xxh-cta h2 { font-size: 19px; }
    .xxh-cta p { font-size: 13px; }
    .xxh-cta .btn { width: 100%; text-align: center; }
}