/* ============================================================
   迁居兴家 UI v2 设计规范层（渐进美化 · 批次 A）
   加载顺序：fontawesome → site.css → 动态主题 → 本文件
   本文件为覆盖层：不改 site.css 源文件，删除本文件引用即回滚。
   设计方向：橙收敛为强调色，白/浅灰为主，留白呼吸感。
   ============================================================ */

/* ===== 1. Design Tokens ===== */
:root {
    --ui-ink: #1d2433;          /* 标题 */
    --ui-text: #4c5568;         /* 正文 */
    --ui-muted: #8a92a6;        /* 次级说明 */
    --ui-bg: #f6f7fa;           /* 区块浅灰底 */
    --ui-line: #e9ecf2;         /* 分隔线/描边 */
    --ui-soft: #fff3ec;         /* 浅橙底 */
    --ui-radius: 14px;
    --ui-shadow: 0 6px 24px rgba(29, 36, 51, .07);
    --ui-shadow-hover: 0 12px 32px rgba(29, 36, 51, .13);
}

body {
    color: var(--ui-text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--ui-ink); }

/* ===== 2. Hero：橙满屏 → 浅色呼吸感 ===== */
.hero {
    background: linear-gradient(165deg, #fff3ec 0%, #ffffff 68%) !important;
    color: var(--ui-ink);
}
.hero-overlay { background: none !important; }
.hero h1 { color: var(--ui-ink) !important; }
.hero h1 span { color: var(--primary-color) !important; text-shadow: none !important; }
.hero .hero-subtitle { color: var(--ui-text) !important; }
.hero .hero-stat strong { color: var(--primary-color) !important; text-shadow: none !important; }
.hero .hero-stat span { color: var(--ui-muted) !important; }
.hero .hero-badge {
    background: #ffffff !important;
    border: 1px solid #ffd9c4 !important;
    color: var(--primary-color) !important;
    text-shadow: none !important;
    box-shadow: var(--ui-shadow);
}
.hero .btn-outline {
    color: var(--ui-ink) !important;
    border-color: #d9dde6 !important;
    background: #ffffff !important;
}
.hero .btn-outline:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: #ffffff !important;
}
/* hero 内白底估价卡：浅底上加强投影层次 */
.hero .hero-form-card,
.hero .quick-quote-card {
    box-shadow: var(--ui-shadow-hover) !important;
    border-radius: var(--ui-radius);
}

/* ===== 2b. Hero 配套组件（原为橙底白字设计，浅色 hero 下成套反转） ===== */
.hero-stats {
    background: transparent !important;
    padding: 4px 0 !important;
    border-top: 1px solid var(--ui-line);
    border-bottom: 1px solid var(--ui-line);
    max-width: 560px;
}
.hero-actions.hero-cta2 .btn-quote {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}
.hero-actions.hero-cta2 .btn-quote:hover {
    background: var(--primary-dark) !important;
    color: #ffffff !important;
}
.hero-actions.hero-cta2 .btn-quote .cta-ic {
    background: rgba(255, 255, 255, .22) !important;
    color: #ffffff !important;
}
.hero-actions.hero-cta2 .btn-phone {
    background: #ffffff !important;
    border: 2px solid #d9dde6 !important;
    color: var(--ui-ink) !important;
    backdrop-filter: none;
}
.hero-actions.hero-cta2 .btn-phone .cta-ic {
    background: var(--ui-soft) !important;
    color: var(--primary-color) !important;
}
.hero-actions.hero-cta2 .btn-phone:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.hero-trust.trust-v3 span {
    background: #ffffff !important;
    border: 1px solid var(--ui-line) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow);
}
.hero-trust.trust-v3 span i { color: var(--primary-color) !important; }
.hero-micro { color: var(--ui-muted) !important; }
.hero-micro i { color: #22c55e !important; }

/* ===== 3. 区块标题系统 ===== */
.section-header h2 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: var(--ui-ink) !important;
    letter-spacing: .01em;
}
.section-header p { color: var(--ui-muted) !important; }
section h2 { letter-spacing: .01em; }

/* ===== 4. 卡片系统统一 ===== */
.service-card, .pricing-card, .review-card, .knowledge-card, .case-card,
.credential-item, .process-step, .team-item, .entrance-card {
    background: #ffffff;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    transition: transform .22s ease, box-shadow .22s ease;
}
.service-card:hover, .pricing-card:hover, .review-card:hover, .knowledge-card:hover,
.case-card:hover, .credential-item:hover, .team-item:hover, .entrance-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ui-shadow-hover);
}

/* 图标方块统一：浅橙底 + 橙图标 */
.service-icon, .pricing-icon, .credential-item i, .step-icon {
    border-radius: 12px;
}
.service-icon, .pricing-icon {
    background: var(--ui-soft) !important;
    color: var(--primary-color) !important;
}

/* ===== 5. 按钮系统 ===== */
.btn { border-radius: 10px; }
.btn-primary {
    box-shadow: 0 4px 14px rgba(255, 77, 0, .24);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 77, 0, .3);
}

/* ===== 6. 区块底色交替（白 / 浅灰呼吸节奏） ===== */
.recommended-services, .pricing-transparency, .credentials,
.knowledge-empowerment, .social-proof {
    background: var(--ui-bg);
}

/* ===== 7. 导航：去重阴影改细线 + active 橙色下划线 ===== */
.header { box-shadow: 0 1px 0 var(--ui-line) !important; }
.nav-menu a {
    font-weight: 500;
    color: var(--ui-ink);
}
.nav-menu a:hover, .nav-menu a.active { color: var(--primary-color); }

/* ===== 8. 评价星色收敛（品牌橙） ===== */
.review-rating, .stars { color: #ffb400; }

/* ===== 9. 流程步骤 ===== */
.step-number {
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
}

/* ===== 10. 移动端节奏 ===== */
@media (max-width: 768px) {
    .section-header h2 { font-size: 1.35rem !important; }
    .service-card, .pricing-card, .knowledge-card, .review-card {
        border-radius: 12px;
    }
    .hero { padding: 40px 0 32px !important; }
    .hero h1 { font-size: 1.5rem !important; }
}

/* ===== 12. [批次B → 10-31 修订] 内容页头橘色化（与首页 hero 同款渐变，成套白字反转） ===== */
.services-hero, .pc-hero, .page-hero, .ar-hero, .svc-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff;
}
.services-hero h1, .pc-hero h1, .page-hero h1, .ar-hero h1, .svc-hero h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.services-hero p, .pc-hero p, .page-hero p, .ar-hero p, .ar-hero .sub, .svc-hero p, .svc-hero .sub {
    color: rgba(255,255,255,.92) !important;
    text-shadow: none;
}
.pc-hero span, .page-hero .ph-badge, .page-hero .hero-badge, .services-hero .hero-badge {
    color: #ffffff !important;
    opacity: .92;
}
/* 区域页/服务详情页 hero：按钮成套反转（p1 白底橙字主按钮 / p2 半透明白描边副按钮） */
.ar-hero, .svc-hero { border-bottom: none !important; }
.ar-hero .cta .p1, .svc-hero .cta .p1 { background:#ffffff !important; color:var(--primary-dark) !important; }
.ar-hero .cta .p2, .svc-hero .cta .p2 { background:rgba(255,255,255,.14) !important; color:#ffffff !important; border-color:#ffffff !important; }

/* ===== 13. [批次B] 保留橙底的区块：标题恢复白色 =====
   （ui-v2 全局 h1-h4 深色规则会波及这些橙底区块，逐类恢复） */
.page-header h1, .page-header h2, .page-header h3, .page-header p,
.estimate-hero h1, .estimate-hero h2, .estimate-hero p,
.booking-hero h1, .booking-hero h2, .booking-hero p,
.payment-hero h1, .order-hero h1, .coupon-hero h1,
.customer-hero h1, .customer-hero p,
.section-hero h1, .section-hero p,
.invite-hero h1, .cities-section h1, .cities-section h2, .cities-section h3,
.auth-page h1, .auth-page h2, .auth-page h3,
.customer-welcome h1, .customer-welcome h2,
.cta-banner h1, .cta-banner h2, .cta-banner h3, .cta-banner p,
.footer-cta h1, .footer-cta h2, .footer-cta h3, .footer-cta p {
    color: #ffffff !important;
}
.page-header .breadcrumb a, .page-header .breadcrumb span,
.page-hero .breadcrumb a, .page-hero .breadcrumb span {
    color: rgba(255, 255, 255, .85) !important;
}
.page-header .breadcrumb a, .page-hero .breadcrumb a { color: #ffffff !important; }

/* ===== 14. [批次B] 服务详情页头（services/* 白底区）标题统一深色 ===== */
.svc-hero, .service-detail-hero { color: var(--ui-ink); }


/* ===== 15. [批次C] 问答详情页（/wenda/*）卡片精致化 ===== */
.wq-item {
    border-radius: var(--ui-radius) !important;
    border-color: var(--ui-line) !important;
    box-shadow: var(--ui-shadow) !important;
    padding: 22px 26px !important;
}
.wq-item h2 {
    color: var(--ui-ink) !important;
    position: relative;
    padding-left: 40px;
}
.wq-item h2::before {
    content: 'Q';
    position: absolute;
    left: 0;
    top: 0;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 27px;
    text-align: center;
}
.wq-item p { color: var(--ui-text) !important; }

/* ===== 16. [批次C] FAQ 索引页卡片统一 ===== */
.faq-cat-card {
    background: #ffffff !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--ui-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.faq-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ui-shadow-hover);
    border-color: #ffcdb2 !important;
}
.faq-cat-card:hover .faq-idx-topic { background: var(--primary-color); color: #fff !important; }

/* ===== 17. [批次C] 文章列表卡片 ===== */
.article-card {
    background: #ffffff;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    transition: transform .22s ease, box-shadow .22s ease;
}
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ui-shadow-hover);
}

/* ===== 18. [批次C] 文章详情阅读体验 ===== */
.article-body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--ui-text);
}
.article-body h2 {
    position: relative;
    padding-left: 14px;
    margin-top: 2em;
    font-size: 1.25rem;
}
.article-body h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: .18em;
    width: 5px;
    height: 1em;
    border-radius: 3px;
    background: var(--primary-color);
}
.article-body h3 {
    font-size: 1.08rem;
    margin-top: 1.6em;
    color: var(--ui-ink);
}
.article-body p { margin: 1em 0; }
.article-body img { border-radius: 10px; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li { margin: .4em 0; }
.article-body blockquote {
    background: var(--ui-soft);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
    padding: 12px 18px;
    margin: 1.2em 0;
    color: var(--ui-ink);
}
.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.article-body th, .article-body td {
    border: 1px solid var(--ui-line);
    padding: 9px 12px;
    text-align: left;
}
.article-body th {
    background: var(--ui-soft);
    color: var(--ui-ink);
    font-weight: 700;
}
.article-body tr:nth-child(even) td { background: #fafbfc; }
.article-meta { color: var(--ui-muted); }

.article-body h2, .article-body h3, .article-header h1 {
    color: var(--ui-ink) !important;
}
.article-card { box-shadow: var(--ui-shadow) !important; }
.article-card:hover { box-shadow: var(--ui-shadow-hover) !important; }

/* ===== 19. [批次D] 移动端专项精修 ===== */
@media (max-width: 768px) {
    /* 顶部客户登录/注册小按钮隐藏（文字换行难看，且抽屉内已有大按钮） */
    .nav-login-btn, .nav-register-btn { display: none !important; }

    /* 抽屉菜单项触控舒适化 + active 橙色指示 */
    .mobile-nav a {
        padding: 14px 6px !important;
        font-weight: 500;
        color: var(--ui-ink);
    }
    .mobile-nav a.active {
        color: var(--primary-color) !important;
        font-weight: 700;
        padding-left: 10px !important;
        border-left: 3px solid var(--primary-color);
    }
    .mobile-nav ul { padding: 4px 16px !important; }
    .mobile-nav .mobile-auth-buttons { padding: 14px 16px !important; }
    .mobile-nav .mobile-auth-buttons .btn {
        flex: 1;
        padding: 11px 0 !important;
        font-size: 15px;
        text-align: center;
    }

    /* hero 双按钮移动端纵排满宽 */
    .hero-actions.hero-cta2 { flex-direction: column; gap: 12px; }
    .hero-actions.hero-cta2 .btn { width: 100%; }

    /* 问答卡片移动端内边距收敛 */
    .wq-item { padding: 18px 16px !important; }
    .wq-item h2 { padding-left: 36px; font-size: 16.5px !important; }

    /* 底部快捷栏与页面内容分隔 */
    .mobile-contact-bar { border-top: 1px solid var(--ui-line); }
    .mobile-contact-btn { color: var(--ui-text); }
    .mobile-contact-btn.quote { color: var(--primary-color); }

    /* 返回顶部按钮 */
    .back-to-top {
        background: var(--primary-color) !important;
        color: #fff !important;
        border-radius: 50% !important;
        box-shadow: var(--ui-shadow-hover) !important;
    }
}

/* ===== 20. [反馈 2026-10-30] 首页 hero 恢复橘色背景（罗老大拍板） ===== */
.hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff;
}
.hero-overlay { background: none !important; }
.hero h1 { color: #ffffff !important; }
.hero h1 span { color: #ffffff !important; text-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important; }
.hero .hero-subtitle { color: rgba(255, 255, 255, .92) !important; }
.hero .hero-stat strong { color: #ffffff !important; text-shadow: none !important; }
.hero .hero-stat span { color: rgba(255, 255, 255, .85) !important; }
.hero .hero-badge {
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.hero .btn-outline {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .85) !important;
    background: rgba(255, 255, 255, .12) !important;
}
.hero .btn-outline:hover {
    background: rgba(255, 255, 255, .24) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
.hero-stats {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, .3);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.hero-actions.hero-cta2 .btn-quote {
    background: #ffffff !important;
    color: var(--primary-dark) !important;
}
.hero-actions.hero-cta2 .btn-quote:hover {
    background: #fff7f3 !important;
    color: var(--primary-dark) !important;
}
.hero-actions.hero-cta2 .btn-quote .cta-ic {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)) !important;
    color: #ffffff !important;
}
.hero-actions.hero-cta2 .btn-phone {
    background: rgba(255, 255, 255, .14) !important;
    border: 2px solid rgba(255, 255, 255, .85) !important;
    color: #ffffff !important;
}
.hero-actions.hero-cta2 .btn-phone .cta-ic {
    background: rgba(255, 255, 255, .22) !important;
    color: #ffffff !important;
}
.hero-actions.hero-cta2 .btn-phone:hover {
    background: rgba(255, 255, 255, .26) !important;
    color: #ffffff !important;
}
.hero-trust.trust-v3 span {
    background: rgba(255, 255, 255, .18) !important;
    border: 1px solid rgba(255, 255, 255, .34) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.hero-trust.trust-v3 span i { color: #ffffff !important; }
.hero-micro { color: rgba(255, 255, 255, .85) !important; }
.hero-micro i { color: #ffffff !important; }

/* ===== 21. [反馈] 服务城市 + 北京各区：胶囊流 → 卡片网格 ===== */
.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    max-width: 1000px;
    margin: 0 auto;
}
.city-card {
    background: #ffffff;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease;
}
.city-card .fas { color: var(--primary-color); font-size: 20px; margin-bottom: 8px; display: block; }
.city-card b { display: block; font-size: 16px; color: var(--ui-ink); margin-bottom: 4px; }
.city-card span { font-size: 12px; color: var(--ui-muted); display: block; }
.city-card.is-core {
    border-color: #ffcdb2;
    background: linear-gradient(180deg, #fff6f0, #ffffff);
}
.city-card.is-core::after {
    content: '核心';
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
}
.city-card:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow-hover); }

.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    max-width: 1040px;
    margin: 0 auto;
}
.area-card {
    background: #ffffff;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    padding: 14px 12px;
    text-decoration: none;
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.area-card b { display: block; font-size: 15px; color: var(--ui-ink); margin-bottom: 4px; }
.area-card span { font-size: 12px; color: var(--ui-muted); }
.area-card span i { font-size: 10px; margin-left: 2px; transition: transform .2s ease; }
.area-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: var(--ui-shadow-hover);
    text-decoration: none;
}
.area-card:hover span { color: var(--primary-color); }
.area-card:hover span i { transform: translateX(3px); }
.area-card.area-all { background: var(--primary-color); border-color: var(--primary-color); }
.area-card.area-all b, .area-card.area-all span { color: #ffffff; }
.area-card.area-all span { opacity: .88; }
.area-card.area-all:hover { background: var(--primary-dark); }

@media (max-width: 768px) {
    .city-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .area-grid { grid-template-columns: repeat(2, 1fr); }
    .city-card { padding: 14px 8px; }
    .city-card b { font-size: 14px; }
}

/* ============================================================
   段 22：统一页脚栅格（v9）
   根因：site.css 合并产物中 home.css 源的基础规则
   .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
   排在 style.css 源 @media(min-width:1024px) repeat(5,1fr) 之后，
   同特异性后到先赢 → 全站桌面页脚被压成 4 列。
   此处强制 5 列（与在线估价页基准一致），断点：>1024 五列 / 769-1024 两列 / ≤768 交还原生规则。
   ============================================================ */
@media (min-width: 1025px) {
    .footer-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 32px !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 24px !important; }
}

/* ===== 23. [10-31] 主题渗透补漏：模板/内容内联硬编码色改为主题变量（后台换主题即跟随） ===== */
.article-crumbs a, .article-back a { color: var(--primary-color) !important; }
.article-header h1, .article-body h2, .article-body h3, .article-body strong,
.related-section h3 { color: var(--secondary-color) !important; }
.article-meta .tag { background: var(--primary-light) !important; color: var(--primary-color) !important; }
.article-body a { color: var(--primary-color) !important; }
.article-body th, .article-detail th, .pc-page th, .pc-wrap th {
    background: var(--primary-light) !important;
}