/* =========================================================
   全屋定制企业官网模板 — 全局样式
   ---------------------------------------------------------
   配色：4 套方案，靠 <html data-theme="..."> 切换，默认「方案一 温润木色」。
        · 色值与对比度校核结果见《配色规范.md》
        · 可视化切换 / 给客户选色 → palette.html
   换配色只需改这里的令牌，其余样式不用动。
   ========================================================= */

:root {
    /* ===== 与配色无关的令牌 ===== */
    --white:         #ffffff;
    --border-radius: 12px;
    --shadow:        0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:     0 10px 34px rgba(0, 0, 0, 0.10);
    --max-width:     1380px;
    --header-h:      88px;
}

/* ---------------------------------------------------------
   方案一 · 永信红（默认，配 LOGO）
   --------------------------------------------------------- */
:root,
[data-theme="red"] {
    --primary-color:  #B01F2E;   /* 中国红：配 LOGO 主色 */
    --primary-dark:   #8A1622;
    --primary-rgb:    176, 31, 46;
    --accent-color:   #2C3E50;   /* 深蓝灰：辅助克制色 */
    --accent-rgb:     44, 62, 80;
    --bg-color:       #F6F6F7;   /* 浅灰白 */
    --text-color:     #2c2c2c;   /* 正文深灰 */
    --text-light:     #707070;   /* 辅助字（原 #8a8a8a 对比度仅 3.15:1，已加深） */
    --line-color:     #E5E5E7;
    --dark-surface:   #1C1C1E;   /* 页脚近黑 */
    --dark-surface-2: #2A2A2D;
}

/* ---------------------------------------------------------
   方案二 · 墨绿 + 香槟金
   --------------------------------------------------------- */
[data-theme="green"] {
    --primary-color:  #2d4a3e;
    --primary-dark:   #1f3329;
    --primary-rgb:    45, 74, 62;
    --accent-color:   #c9a96e;
    --accent-rgb:     201, 169, 110;
    --bg-color:       #faf8f5;
    --text-color:     #2a2a2a;
    --text-light:     #66756d;
    --line-color:     #e8e4dd;
    --dark-surface:   #16241d;
    --dark-surface-2: #20362b;
}

/* ---------------------------------------------------------
   方案三 · 高级灰 + 哑光黑
   --------------------------------------------------------- */
[data-theme="gray"] {
    --primary-color:  #1c1c1c;
    --primary-dark:   #0d0d0d;
    --primary-rgb:    28, 28, 28;
    --accent-color:   #b8b0a8;
    --accent-rgb:     184, 176, 168;
    --bg-color:       #f5f4f2;
    --text-color:     #2c2c2c;
    --text-light:     #707070;
    --line-color:     #e6e4e0;
    --dark-surface:   #1c1c1c;
    --dark-surface-2: #2b2b2b;
}

/* ---------------------------------------------------------
   方案四 · 莫兰迪蓝灰
   --------------------------------------------------------- */
[data-theme="blue"] {
    --primary-color:  #5b6b7a;
    --primary-dark:   #3e4c5a;
    --primary-rgb:    91, 107, 122;
    --accent-color:   #e8dfd3;
    --accent-rgb:     232, 223, 211;
    --bg-color:       #fbf9f6;
    --text-color:     #2e353d;
    --text-light:     #6c747d;
    --line-color:     #e9e5df;
    --dark-surface:   #29333c;
    --dark-surface-2: #39434d;
}

/* ===================== 基础重置 ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 锚点跳转平滑滚动 */
html { scroll-behavior: smooth; }

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    color: var(--text-color);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; }

/* 锚点跳转时避开吸顶导航，避免标题被遮住 */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ===================== 通用标题 ===================== */
.section-title { text-align: center; margin-bottom: 28px; }
.section-title h2 { font-size: 42px; font-weight: 700; margin-bottom: 14px; letter-spacing: -.5px; }
.section-title h2 span { color: var(--primary-color); }
.section-title p { font-size: 16.5px; color: var(--text-light); line-height: 1.7; }

.section { padding: 84px 0; }
.section.alt { background: var(--bg-color); }
/* 紧凑区块：内容型页面（如关于我们）用，比默认少一档留白 */
.section.tight { padding: 26px 0; }
.section.tight .section-title { margin-bottom: 18px; }
.section.tight .section-title h2 { font-size: 28px; }

/* ===================== 通用按钮 ===================== */
.btn-primary {
    display: inline-block;
    /* 纯色 + 中性微阴影：比"彩色发光渐变"克制，也更耐看 */
    background: var(--primary-color);
    color: var(--white);
    padding: 12px 36px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    transition: all 0.3s;
    text-align: center;
}
.btn-primary:hover { transform: translateY(-2px); background: var(--primary-dark); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); }

.btn-outline {
    display: inline-block;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 34px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s;
    text-align: center;
}
.btn-outline:hover { background: var(--primary-color); color: var(--white); }

/* ===================== 顶部导航 ===================== */
.header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h);
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 50px; width: auto; }

/* Logo 缺图时用文字兜底，避免导航栏出现破图 */
.logo .logo-fallback {
    font-size: 22px; font-weight: 700; color: var(--primary-color); letter-spacing: 1px;
}

.main-nav { display: flex; gap: 30px; align-items: center; }
.main-nav > li { position: relative; }
.main-nav > li > a { font-size: 16px; font-weight: 500; padding: 10px 0; display: block; }
.main-nav > li:hover > a { color: var(--primary-color); }

.dropdown {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: var(--white); min-width: 180px;
    box-shadow: var(--shadow); border-radius: 8px; padding: 10px 0;
    opacity: 0; visibility: hidden; transition: all 0.3s;
}
.main-nav > li:hover .dropdown { opacity: 1; visibility: visible; }
/* 键盘可达：Tab 聚焦到一级菜单（或其内部任一链接）时同样展开二级菜单，
   否则二级项 visibility:hidden 根本拿不到焦点，键盘用户永远点不进去 */
.main-nav > li:focus-within .dropdown { opacity: 1; visibility: visible; }

/* 宽版下拉（设计案例）：条目多，排成三栏，避免下拉拉得过头顶到底 */
@media (min-width: 769px) {
    .dropdown.wide {
        width: 480px;
        max-width: calc(100vw - 40px);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 8px;
        padding: 12px 14px;
    }
    .dropdown.wide li.dropdown-label { grid-column: 1 / -1; }
    .dropdown.wide li.dropdown-label:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
    .dropdown.wide li a { padding: 7px 12px; }
}
.dropdown li a { display: block; padding: 8px 20px; font-size: 14px; white-space: nowrap; }
.dropdown li a:hover { background: var(--bg-color); color: var(--primary-color); }

.nav-cta {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    color: var(--white) !important;
    padding: 10px 24px !important;
    border-radius: 30px;
    font-size: 14px !important;
    font-weight: 600;
}
/* 移动端菜单按钮：用原生 button，键盘 Tab 能聚焦、回车能触发 */
.mobile-toggle { display: none; cursor: pointer; align-items: center; justify-content: center; line-height: 0;
    background: none; border: none; padding: 0; color: inherit; }
.mobile-toggle svg { display: block; }

/* 键盘「跳转到主要内容」：平时移出屏幕外，聚焦时才出现 */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 9999;
    background: var(--primary-color); color: #fff; padding: 10px 18px;
    border-radius: 0 0 6px 0; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* 统一的键盘焦点圈：鼠标点击不出现，Tab 才出现 */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.sidebar-item:focus-visible, .mobile-toggle:focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 4px;
}

/* ===================== 首屏轮播 ===================== */
.banner {
    position: relative;
    height: 800px;              /* 对应 1920×800 的轮播图 */
    max-height: 92vh;           /* 屏幕矮的笔记本上自动收窄，避免整屏被占满 */
    min-height: 460px;
    overflow: hidden;
    /* 背景图缺失时显示品牌深色，不会露出白色空白 */
    background-color: var(--primary-dark);
    color: var(--white);
}
.banner-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--primary-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s;
}
.banner-slide.on { opacity: 1; visibility: visible; }
.banner-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}
.banner-content { position: relative; z-index: 1; max-width: 820px; padding: 0 20px; }
.banner-content h1, .banner-content h2 {
    font-size: 52px; font-weight: bold; margin-bottom: 20px; line-height: 1.3;
}
.banner-content p { font-size: 20px; margin-bottom: 35px; }
.banner-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.banner-buttons .btn-primary { font-size: 18px; padding: 15px 40px; }

/* 轮播上的浅色描边按钮 */
.btn-ghost-light {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    transition: background 0.3s, transform 0.3s;
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.34); transform: translateY(-2px); }

/* 左右切换箭头：默认隐藏，鼠标移入才出现 */
.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, background 0.3s;
    z-index: 3;
}
.banner:hover .banner-arrow { opacity: 1; }
.banner-arrow:hover { background: rgba(255, 255, 255, 0.38); }
.banner-arrow.prev { left: 24px; }
.banner-arrow.next { right: 24px; }

/* 指示圆点 */
.banner-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
    z-index: 3;
}
.banner-dots button {
    width: 30px; height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.45);
    transition: all 0.3s;
    cursor: pointer;
}
.banner-dots button.on { background: #fff; width: 44px; }

/* ===================== 信任数据条 ===================== */
.trust-bar { background: var(--bg-color); padding: 30px 0; }
/* 用 auto-fit 自适应列数：几条数据就铺几列，增减条目不会留空洞 */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; text-align: center; }
.trust-item .number { font-size: 36px; font-weight: bold; color: var(--primary-color); }
.trust-item .label { font-size: 14px; color: var(--text-light); margin-top: 5px; }

/* ===================== 产品栅格 ===================== */
.products { padding: 44px 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.product-card {
    background: var(--white); border-radius: var(--border-radius);
    overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.product-card img { width: 100%; height: 300px; object-fit: cover; background: var(--bg-color); }
.product-info { padding: 24px 20px; text-align: center; }
.product-info h3 { font-size: 20px; margin-bottom: 8px; }
.product-info p { font-size: 14.5px; color: var(--text-light); margin-bottom: 12px; }
.product-info .more { font-size: 13px; color: var(--primary-color); }

/* 下拉菜单里的小分组标题（如「按空间查看」） */
.dropdown-label {
    font-size: 12px;
    color: var(--text-light);
    padding: 9px 20px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--line-color);
    cursor: default;
}

/* ===================== 案例分组（空间案例 / 风格案例共用） ===================== */
.case-group { margin-bottom: 58px; }
.case-group:last-child { margin-bottom: 0; }
.case-group-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 22px;
    padding-left: 14px;
    border-left: 4px solid var(--primary-color);
}
.case-group-title span { font-size: 13px; font-weight: 400; color: var(--text-light); }

/* ===================== 案例栅格 ===================== */
.cases { padding: 44px 0; background: var(--bg-color); }
/* 自适应列数：2 个案例铺 2 列、3 个铺 3 列，不会留下半排空位 */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 28px; }
.case-card {
    position: relative; border-radius: var(--border-radius); overflow: hidden;
    box-shadow: var(--shadow); cursor: pointer; display: block;
}
.case-card img {
    /* 与素材同比例（4:3），常规宽度下完整显示；卡片过宽时 max-height 兜底、cover 裁剪 */
    width: 100%; aspect-ratio: 4 / 3; max-height: 380px; object-fit: cover;
    transition: transform 0.5s; background: var(--bg-color);
}
.case-card:hover img { transform: scale(1.05); }
.case-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 56px 22px 22px;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 40%, rgba(0,0,0,.35) 72%, transparent 100%);
    color: var(--white);
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.case-overlay h3 { font-size: 23px; margin-bottom: 6px; font-weight: 700; }
.case-overlay p { font-size: 15px; opacity: 0.92; }
.case-overlay .case-group-title {
    display: inline-block;
    background: rgba(176,31,46,.92);
    color: #fff;
    font-size: 11.5px;
    letter-spacing: .5px;
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 9px;
    text-shadow: none;
}

/* ---------- 案例图点击放大（灯箱） ---------- */
/* 悬停出现放大镜角标 + 放大光标，提示"可以点开看大图" */
.ci-media { position: relative; margin: 0; cursor: zoom-in; }
.ci-media::after {
    content: ''; position: absolute; right: 12px; bottom: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / 18px no-repeat;
    opacity: 0; transition: opacity 0.25s;
}
.case-item:hover .ci-media::after,
.real-item:hover .ci-media::after { opacity: 1; }

.lightbox {
    display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    z-index: 10000; /* 高于微信弹窗(9999) */
    background: rgba(17, 15, 13, 0.92);
}
.lightbox.on { display: flex; align-items: center; justify-content: center; }
.lb-stage { margin: 0; text-align: center; }
.lb-stage img {
    display: block; margin: 0 auto;
    max-width: 92vw; max-height: 70vh; object-fit: contain;
    border-radius: 6px; background: #111;
}
.lb-stage figcaption { color: #ddd; font-size: 14px; margin-top: 14px; }
.lb-close, .lb-arrow {
    position: absolute; color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.lb-close:hover, .lb-arrow:hover { background: rgba(255, 255, 255, 0.28); }
.lb-close { top: 18px; right: 22px; width: 44px; height: 44px; }
.lb-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lb-arrow.prev { left: 20px; }
.lb-arrow.next { right: 20px; }
.lb-foot {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 34px 22px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}
.lb-count { color: #ccc; font-size: 14px; }

/* ===================== 环保材料 ===================== */
.materials { padding: 44px 0; }
.materials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.material-item {
    text-align: center; padding: 30px 20px;
    border: 1px solid var(--line-color); border-radius: var(--border-radius);
    transition: all 0.3s;
}
.material-item:hover { border-color: var(--primary-color); box-shadow: var(--shadow); }
.material-item .icon { font-size: 42px; margin-bottom: 15px; display: block; }
.material-item h3 { font-size: 18px; margin-bottom: 10px; }
.material-item p { font-size: 13px; color: var(--text-light); }

/* ===================== 定制流程 + 获客转化 ===================== */
.process-conversion { padding: 44px 0; background: var(--bg-color); }
.conversion-card {
    background: var(--white); border-radius: 20px; box-shadow: var(--shadow-lg);
    display: flex; overflow: hidden;
}
.conversion-left {
    width: 40%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 30px 24px; color: var(--white);
}
.conversion-left h2 { font-size: 24px; text-align: center; margin-bottom: 30px; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 10px; }
.process-item { text-align: center; background: rgba(255,255,255,0.15); border-radius: 10px; padding: 15px 5px; }
.process-item .icon { font-size: 24px; display: block; margin-bottom: 6px; }
.process-item span:last-child { font-size: 13px; }

.conversion-right {
    width: 60%; padding: 30px 36px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.conversion-right h2 { font-size: 28px; margin-bottom: 10px; text-align: center; }
.conversion-right h2 span { color: var(--primary-color); }
.conversion-right .subtitle { font-size: 14px; color: var(--text-light); margin-bottom: 25px; text-align: center; }
.conversion-right .subtitle strong { color: var(--primary-color); }
.fake-input {
    width: 100%; max-width: 480px;
    background: var(--bg-color); border: 1px solid var(--line-color); border-radius: 8px;
    padding: 14px 18px; font-size: 15px; color: #aaa; text-align: center;
    margin-bottom: 15px; cursor: pointer; transition: all 0.3s;
}
.fake-input:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* ===================== 页脚 ===================== */
.footer { background: var(--dark-surface); color: #aaa; padding: 60px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 20px; margin-bottom: 40px; }
.footer-col h4 { color: var(--accent-color); font-size: 16px; margin-bottom: 18px; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 13px; color: #999; transition: color 0.3s; }
.footer-col a:hover { color: var(--accent-color); }
.footer-bottom {
    border-top: 1px solid #333; padding-top: 20px;
    text-align: center; font-size: 13px; color: #666;
}
.footer-bottom p + p { margin-top: 8px; }

/* 美邦数智 品牌植入 —— LOGO 为深色字，加白色底片保证在深色页脚上清晰可见 */
.powered-by {
    display: flex; justify-content: center; align-items: center; gap: 14px;
    padding: 22px 0 8px; margin-top: 24px; border-top: 1px solid #333;
    flex-wrap: wrap;
}
.powered-by a {
    display: inline-flex; align-items: center;
    background: #ffffff; padding: 8px 18px; border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.powered-by a:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.powered-by img { height: 40px; width: auto; display: block; }
.powered-by .pb-text { font-size: 13px; color: #999; }

/* ===================== 悬浮侧边栏 =====================
   深色竖栏，每项 = 线性图标 + 文字标签。
   旧版是三个白色圆按钮 + emoji 图标，emoji 在部分设备上会渲染成方块，已弃用。 */
.float-sidebar {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    background: var(--dark-surface-2);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);
    max-height: calc(100vh - 140px);
}
.sidebar-item {
    width: 74px;
    padding: 11px 4px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--white);
    cursor: pointer;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    transition: background 0.25s;
}
.sidebar-item:last-child { border-bottom: none; }
.sidebar-item:hover { background: var(--accent-color); }
.sidebar-item svg { width: 23px; height: 23px; display: block; }
.sidebar-item .text { font-size: 12px; line-height: 1.15; letter-spacing: 0.3px; }

/* ===================== 微信弹窗 ===================== */
.modal {
    display: none; position: fixed; z-index: 9999; left: 0; top: 0;
    width: 100%; height: 100%; background: rgba(0,0,0,0.5);
}
.modal.show { display: block; }
.modal-content {
    position: relative;
    background: #fff; padding: 30px; border-radius: 12px;
    width: 300px; margin: 150px auto; text-align: center;
}
.modal-content img { width: 100%; border-radius: 8px; background: var(--bg-color); }
.modal-content p { margin-top: 15px; font-size: 14px; color: #333; }
.modal-content .modal-tip { font-size: 12px; color: #707070; margin-top: 6px; }
.modal-close {
    position: absolute; top: 10px; right: 12px;
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: var(--bg-color); color: var(--text-light);
    font-size: 16px; line-height: 1; cursor: pointer; transition: all 0.25s;
}
.modal-close:hover { background: var(--primary-color); color: var(--white); }

/* =========================================================
   内页专用样式
   ========================================================= */

/* 内页页头：极简一条（标题 + 简介 + 面包屑同一行），桌面端约 52px */
.page-hero {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: var(--white);
    padding: 64px 0 58px;
    position: relative;
    overflow: hidden;
}
.page-hero::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.10), transparent 55%);
}
.page-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    flex-wrap: wrap;
    position: relative;
}
/* 标题与简介同组；简介放不下时整组换行，不会把标题挤变形 */
.ph-left {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}
.page-hero h1 {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.25;
    margin-bottom: 12px;
}
.page-hero-sub {
    font-size: 17px;
    opacity: 0.85;
    line-height: 1.7;
}
.page-hero-crumb { font-size: 12px; opacity: 0.8; white-space: nowrap; }
.page-hero-crumb a { color: inherit; }
.page-hero-crumb a:hover { text-decoration: underline; }
.page-hero-crumb span { margin: 0 6px; opacity: 0.6; }

/* 页内锚点导航条（产品 / 案例 / 材料 等分类跳转） */
.anchor-nav {
    background: var(--white); border-bottom: 1px solid var(--line-color);
    position: sticky; top: var(--header-h); z-index: 900;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.anchor-nav .inner {
    display: flex; gap: 6px; overflow-x: auto; padding: 7px 0;
    scrollbar-width: none;
}
.anchor-nav .inner::-webkit-scrollbar { display: none; }
.anchor-nav a {
    flex-shrink: 0; font-size: 14px; color: var(--text-color);
    padding: 6px 16px; border-radius: 30px; transition: all 0.25s;
    border: 1px solid transparent;
}
.anchor-nav a:hover { color: var(--primary-color); background: var(--bg-color); }
.anchor-nav a.active { background: var(--primary-color); color: var(--white); font-weight: 600; }

/* ===================== 商办空间页：按场景分组 =====================
   分组 id 与导航二级菜单的锚点对应；组内仍是 .prod-block（和家庭空间页同一套） */
.prod-group { margin-bottom: 10px; }
.prod-group:last-child { margin-bottom: 0; }
.prod-group-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 8px;
    padding-left: 14px;
    border-left: 4px solid var(--primary-color);
    color: var(--text-color);
}
.prod-group-title span { font-size: 13px; font-weight: 400; color: var(--text-light); }

/* ===================== 产品详情区块（左图轮播 + 右文，左右交替） ===================== */
.prod-block {
    display: grid;
    grid-template-columns: 1.6fr 1fr;   /* 左图大、右文小 */
    gap: 40px;
    align-items: center;
    padding: 46px 0;
    border-bottom: 1px solid var(--line-color);
}
.prod-block:last-of-type { border-bottom: none; }
/* 图片恒在左侧大区、文字恒在右侧小区——不做左右交替（水平哥明确要求：
   "左侧图片区加大、右侧缩小"，交替会把图片换到右边，与要求冲突） */

/* ---------- 左侧产品图轮播 ---------- */
.prod-media {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--bg-color);
}
.pg-track { position: relative; height: 460px; }
.pg-track img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
}
.pg-track img.on { opacity: 1; visibility: visible; }

/* 左右箭头：默认隐藏，鼠标移入才出现 */
.pg-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.38); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity 0.3s, background 0.3s;
    z-index: 3;
}
.prod-media:hover .pg-arrow { opacity: 1; }
.pg-arrow:hover { background: var(--primary-color); }
.pg-arrow.prev { left: 14px; }
.pg-arrow.next { right: 14px; }

/* 指示点 */
.pg-dots {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 7px; z-index: 3;
}
.pg-dots button {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: all 0.3s; cursor: pointer;
}
.pg-dots button.on { background: #fff; width: 22px; border-radius: 4px; }

/* 右上角计数 */
.pg-count {
    position: absolute; right: 14px; top: 14px;
    font-size: 12px; color: #fff;
    background: rgba(0, 0, 0, 0.45);
    padding: 3px 10px; border-radius: 20px;
    z-index: 3;
}

/* ---------- 右侧文字（列变窄，字号相应收一点） ---------- */
.prod-body h2 { font-size: 24px; font-weight: 600; margin-bottom: 7px; }
.prod-body .prod-sub { font-size: 13.5px; color: var(--primary-color); margin-bottom: 14px; }
.prod-body > p { font-size: 14.5px; color: #666; margin-bottom: 18px; line-height: 1.85; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.prod-tags span {
    font-size: 12.5px; color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.08); padding: 4px 12px; border-radius: 20px;
}

/* 规格表 */
.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 20px; }
.spec-table th, .spec-table td { padding: 10px 14px; border: 1px solid var(--line-color); text-align: left; }
.spec-table th { background: var(--bg-color); font-weight: 600; width: 96px; color: var(--text-color); }
.spec-table td { color: #666; }

/* 环保材料：四类材料说明 */
.mat-section { padding: 44px 0; border-bottom: 1px solid var(--line-color); }
.mat-section:last-of-type { border-bottom: none; }
.mat-head { text-align: center; margin-bottom: 36px; }
.mat-head .badge {
    display: inline-block; font-size: 13px; font-weight: 600; color: var(--primary-color);
    background: rgba(var(--accent-rgb), 0.34); border: 1px solid rgba(var(--accent-rgb), 0.75);
    padding: 4px 15px; border-radius: 20px; margin-bottom: 12px;
}
.mat-head h2 { font-size: 28px; font-weight: 600; margin-bottom: 10px; }
.mat-head p { font-size: 14px; color: var(--text-light); max-width: 760px; margin: 0 auto; }

.mat-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--white);
    border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); }
.mat-table th {
    background: var(--primary-color); color: var(--white);
    padding: 14px 18px; text-align: left; font-weight: 600; font-size: 14px;
}
.mat-table td { padding: 13px 18px; border-bottom: 1px solid var(--line-color); color: #666; }
.mat-table tr:last-child td { border-bottom: none; }
.mat-table tr:hover td { background: var(--bg-color); }
.mat-table td strong { color: var(--text-color); }

/* =========================================================
   定制知识库（knowledge.html）—— 面向 AI 抓取友好的内容栏
   ========================================================= */

/* 知识分类：卡片网格 */
.kb-topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kb-topic {
    background: var(--white); border: 1px solid var(--line-color);
    border-radius: var(--border-radius); padding: 26px 24px;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.kb-topic:hover { border-color: var(--primary-color); box-shadow: var(--shadow); }
.kb-topic h3 { font-size: 17px; margin-bottom: 8px; }
.kb-topic > p { font-size: 13.5px; color: var(--text-light); line-height: 1.75; margin-bottom: 14px; }
.kb-topic ul { list-style: none; }
.kb-topic li { position: relative; padding-left: 16px; margin-bottom: 9px; }
.kb-topic li::before {
    content: ''; position: absolute; left: 0; top: 7px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color);
}
.kb-topic li a { font-size: 13.5px; color: var(--text-color); }
.kb-topic li a:hover { color: var(--primary-color); }

/* 精选文章：两列卡片 */
.kb-article-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.kb-article {
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
    background: var(--white); border: 1px solid var(--line-color);
    border-radius: var(--border-radius); padding: 22px 24px;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.kb-article:hover { border-color: var(--primary-color); box-shadow: var(--shadow); }
.kb-article h3 { font-size: 16px; line-height: 1.5; margin-bottom: 10px; }
.kb-article h3 a { color: var(--text-color); }
.kb-article h3 a:hover { color: var(--primary-color); }
.kb-article p { font-size: 13.5px; color: var(--text-light); line-height: 1.85; }
.kb-article-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-light); }
.kb-article-meta .kb-cat { color: var(--primary-color); font-weight: 600; }

/* 数据速查：表格堆叠 */
.kb-fact-list { display: flex; flex-direction: column; gap: 30px; }
.kb-fact h3 { font-size: 16px; margin-bottom: 12px; }

/* 品牌标准事实 */
.kb-canonical { max-width: 900px; margin: 0 auto; }
.kb-canonical .mat-table td:first-child { width: 180px; white-space: nowrap; }
.kb-note { font-size: 13px; color: var(--text-light); line-height: 1.8; margin-top: 14px; }

/* 环保知识卡片 */
.knowledge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.knowledge-card {
    background: var(--white); border: 1px solid var(--line-color);
    border-radius: var(--border-radius); padding: 26px 24px;
    border-top: 3px solid var(--primary-color); transition: all 0.3s;
}
.knowledge-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.knowledge-card h3 { font-size: 17px; margin-bottom: 10px; }
.knowledge-card p { font-size: 14px; color: var(--text-light); line-height: 1.85; }

/* 等级说明条 */
.grade-legend {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px;
}
.grade-item {
    text-align: center; padding: 22px 16px; border-radius: var(--border-radius);
    background: var(--white); border: 1px solid var(--line-color);
}
.grade-item .lv { font-size: 26px; font-weight: 700; color: var(--primary-color); margin-bottom: 6px; }
.grade-item .nm { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.grade-item .ds { font-size: 13px; color: var(--text-light); }

/* 案例筛选按钮 */
.case-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 38px; }
.case-filter button {
    padding: 9px 24px; border: 1px solid var(--line-color); border-radius: 30px;
    font-size: 14px; color: var(--text-color); background: var(--white); transition: all 0.25s;
}
.case-filter button:hover { border-color: var(--primary-color); color: var(--primary-color); }
.case-filter button.active {
    background: var(--primary-color); border-color: var(--primary-color);
    color: var(--white); font-weight: 600;
}

/* 案例详情卡（带信息条） */
.case-item {
    background: var(--white); border-radius: var(--border-radius);
    overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s; display: block;
}
.case-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.case-item img { width: 100%; aspect-ratio: 4 / 3; max-height: 380px; object-fit: cover; background: var(--bg-color); }
.case-item .ci-body { padding: 20px 22px 22px; }
.case-item .ci-body h3 { font-size: 17px; margin-bottom: 10px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-light); margin-bottom: 12px; }
.case-meta span::before { content: '·'; margin-right: 6px; opacity: 0.5; }
.case-meta span:first-child::before { display: none; }
.case-item .ci-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.case-item .ci-tags span {
    font-size: 12px; color: var(--primary-color); background: rgba(var(--primary-rgb), 0.08);
    padding: 3px 12px; border-radius: 20px;
}

/* VR 案例区 */
.vr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vr-item {
    position: relative; border-radius: var(--border-radius); overflow: hidden;
    box-shadow: var(--shadow); cursor: pointer;
}
.vr-item img { width: 100%; aspect-ratio: 4 / 3; max-height: 340px; object-fit: cover; background: var(--bg-color); }
.vr-item .vr-mask {
    position: absolute; inset: 0; background: rgba(0,0,0,0.35);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--white); transition: background 0.3s;
}
.vr-item:hover .vr-mask { background: rgba(0,0,0,0.5); }
.vr-item .vr-play {
    width: 56px; height: 56px; border-radius: 50%; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 12px;
}
.vr-item .vr-name { font-size: 15px; }

/* 关于我们：品牌数字 */
/* 同样用 auto-fit：3 条或 4 条都能铺满，不会留半格空位 */
.about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; text-align: center; }
.about-stats .as-item { padding: 28px 16px; background: var(--white); border-radius: var(--border-radius); box-shadow: var(--shadow); }
.about-stats .as-num { font-size: 34px; font-weight: 700; color: var(--primary-color); }
.about-stats .as-label { font-size: 14px; color: var(--text-light); margin-top: 4px; }

/* 正文字段（品牌介绍 / 隐私政策） */
.prose { max-width: 900px; margin: 0 auto; font-size: 15.5px; line-height: 2; color: #555; }
.prose h2 { font-size: 22px; color: var(--text-color); margin: 34px 0 14px; }
.prose h3 { font-size: 17px; color: var(--text-color); margin: 24px 0 10px; }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 16px 22px; list-style: disc; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text-color); }

/* 品牌故事：一段式正文 + 半透明背景画面（白色遮罩压在图上，文字仍清晰）
   要点：① 字体显著加大（≥80%，实测 +94%）；② 上下留白再拉大，长文案也能舒展容纳；
        ③ 遮罩保持 85% + 文字 #2c2c2c，大字压图仍清晰（可读性优先，遮罩不低于 80%）。 */
.prose.brand-story {
    margin-top: 22px;
    max-width: none;          /* 与上方数据条两侧对齐，不再居中收窄 */
    padding: 88px 64px;       /* 上下留白再加大，区块整体高度充足，长故事也不拥挤 */
    border-radius: var(--border-radius);
    background:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url('../images/about/brand-bg.jpg') center / cover no-repeat;
    box-shadow: var(--shadow);
}
.prose.brand-story h2 { margin-top: 0; font-size: 38px; color: var(--text-color); }
/* 遮罩加深、文字再加重，保证压在图片上仍清晰可读 */
.prose.brand-story { color: #2c2c2c; }
.prose.brand-story p { font-size: 30px; font-weight: 400; line-height: 1.95; margin-bottom: 0; }

/* 图集 */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery figure {
    border-radius: var(--border-radius); overflow: hidden;
    background: var(--white); box-shadow: var(--shadow);
}
.gallery img { width: 100%; aspect-ratio: 4 / 3; max-height: 340px; object-fit: cover; background: var(--bg-color); }
.gallery figcaption { padding: 11px 14px; font-size: 13px; color: var(--text-light); }

/* 招聘岗位 */
.job-list { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }
.job-item {
    display: flex; justify-content: space-between; align-items: center; gap: 18px;
    background: var(--white); border: 1px solid var(--line-color);
    border-left: 4px solid var(--primary-color); border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: 22px 26px; transition: all 0.3s;
}
.job-item:hover { box-shadow: var(--shadow); }
.job-info h3 { font-size: 17px; margin-bottom: 6px; }
.job-info p { font-size: 13.5px; color: var(--text-light); }
.job-salary { font-size: 16px; font-weight: 600; color: var(--primary-color); white-space: nowrap; }

/* 服务保障：预约卡 */
.booking-card {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white); border-radius: 14px; padding: 20px 32px; box-shadow: var(--shadow-lg);
    flex-wrap: wrap;
}
.booking-card .bk-text h2 { font-size: 19px; margin-bottom: 5px; }
.booking-card .bk-text p { font-size: 13px; opacity: 0.9; }
.booking-card .bk-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.booking-card .btn-primary { background: var(--white); color: var(--primary-color); box-shadow: none; padding: 10px 26px; font-size: 15px; }
.booking-card .btn-primary:hover { background: #f2f2f2; box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.booking-card .btn-ghost {
    display: inline-block; border: 2px solid rgba(255,255,255,0.7); color: var(--white);
    padding: 8px 26px; border-radius: 30px; font-size: 15px; font-weight: 600; transition: all 0.3s;
}
.booking-card .btn-ghost:hover { background: var(--white); color: var(--primary-color); }

/* 服务流程步骤 */
.step-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.step-item { text-align: center; position: relative; }
.step-item .st-no {
    width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--white); border: 2px solid var(--primary-color); color: var(--primary-color);
    display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
}
.step-item h3 { font-size: 15px; margin-bottom: 6px; }
.step-item p { font-size: 12.5px; color: var(--text-light); }

/* 常见问题手风琴 */
.faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--white); border: 1px solid var(--line-color);
    border-radius: var(--border-radius); overflow: hidden; transition: all 0.3s;
}
.faq-item.open { border-color: var(--primary-color); box-shadow: var(--shadow); }
.faq-q {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 18px 24px; font-size: 16px; font-weight: 500; cursor: pointer;
}
.faq-q .faq-icon {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--bg-color); color: var(--primary-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; transition: transform 0.3s, background 0.3s, color 0.3s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--primary-color); color: var(--white); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a .faq-a-inner { padding: 0 24px 20px; font-size: 14.5px; color: #666; line-height: 1.9; }

/* 客户见证 */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
    background: var(--white); border-radius: var(--border-radius); padding: 30px 28px;
    box-shadow: var(--shadow); border: 1px solid var(--line-color); position: relative;
}
.review-card::before {
    content: '\201C'; position: absolute; top: 8px; left: 20px;
    font-size: 64px; font-family: Georgia, serif; line-height: 1;
    color: var(--primary-color); opacity: 0.14;
}
.review-card p { font-size: 14.5px; color: #666; line-height: 1.9; position: relative; }
.review-who { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-color); }
.review-who b { font-size: 15px; }
.review-who span { display: block; font-size: 13px; color: var(--text-light); }

/* 售后政策条目 */
.policy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.policy-item {
    background: var(--white); border-radius: var(--border-radius);
    padding: 28px 24px; box-shadow: var(--shadow); border-top: 3px solid var(--primary-color);
}
.policy-item .pi-icon { font-size: 30px; margin-bottom: 14px; display: block; }
.policy-item h3 { font-size: 16.5px; margin-bottom: 10px; }
.policy-item p { font-size: 14px; color: var(--text-light); line-height: 1.85; }

/* ===================== 公司信息（关于我们） ===================== */
.company-info {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 36px;
    align-items: stretch;   /* 左右两卡等高 */
}
.company-facts {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.fact {
    display: flex;
    gap: 18px;
    padding: 10px 26px;
    border-bottom: 1px solid var(--line-color);
    font-size: 14.5px;
}
.fact:last-child { border-bottom: none; }
.fact .lb { flex-shrink: 0; width: 84px; color: var(--text-light); font-size: 14px; }
.fact .val { color: var(--text-color); word-break: break-all; }
.fact .val a { color: var(--primary-color); font-weight: 500; }
.fact .val a:hover { text-decoration: underline; }
.fact .map-link { margin-left: 12px; font-size: 13.5px; white-space: nowrap; }

.company-qr {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 28px 24px;
    text-align: center;
    display: flex; flex-direction: column;   /* 与左侧信息卡等高，内容垂直居中 */
    align-items: center; justify-content: center;
}
.company-qr img { width: 180px; margin: 0 auto 14px; border-radius: 8px; background: var(--bg-color); }
.company-qr p { font-size: 14px; color: var(--text-light); }

/* ===================== 真实案例：可参观小区 ===================== */
.real-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.real-item {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s;
}
.real-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.real-item img { width: 100%; aspect-ratio: 4 / 3; max-height: 360px; object-fit: cover; background: var(--bg-color); display: block; }
.real-name {
    padding: 13px 16px;
    font-size: 14.5px;
    text-align: center;
    color: var(--text-color);
}
.sample-note {
    text-align: center;
    margin-top: 22px;
    color: var(--text-light);
    font-size: 13.5px;
}

/* 通用转化通栏（内页底部） */
.cta-strip {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: var(--white); text-align: center; padding: 38px 0;
}
.cta-strip h2 { font-size: 28px; margin-bottom: 12px; }
.cta-strip p { font-size: 15px; opacity: 0.92; margin-bottom: 26px; }
.cta-strip .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-strip .btn-primary { background: var(--white); color: var(--primary-color); box-shadow: none; }
.cta-strip .btn-primary:hover { background: #f2f2f2; }
.cta-strip .btn-ghost {
    display: inline-block; border: 2px solid rgba(255,255,255,0.7); color: var(--white);
    padding: 10px 34px; border-radius: 30px; font-size: 16px; font-weight: 600; transition: all 0.3s;
}
.cta-strip .btn-ghost:hover { background: var(--white); color: var(--primary-color); }

/* 空状态 */
.empty-tip { text-align: center; padding: 40px 20px; color: var(--text-light); font-size: 15px; }

/* ===================== 智能制造 ===================== */
.base-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.base-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s;
}
.base-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.base-card img { width: 100%; height: 300px; object-fit: cover; background: var(--bg-color); display: block; }
.base-body { padding: 24px 26px 28px; }
.base-body h3 { font-size: 19px; margin-bottom: 10px; }
.base-body p { font-size: 14.5px; color: var(--text-light); line-height: 1.85; }

.system-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.system-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 32px 26px;
    text-align: center;
    box-shadow: var(--shadow);
    border-top: 3px solid var(--primary-color);
    transition: all 0.3s;
}
.system-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.system-card .sc-icon {
    width: 58px; height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
}
.system-card h3 { font-size: 18px; margin-bottom: 8px; }
.system-card p { font-size: 14px; color: var(--text-light); }

/* 图文左右交替 */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
}
.feature-row.reverse .feature-media { order: 2; }
.feature-media img {
    width: 100%; height: 400px; object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    background: var(--bg-color);
    display: block;
}
.feature-text .badge {
    display: inline-block;
    font-size: 13px; font-weight: 600;
    color: var(--primary-color);
    background: rgba(var(--accent-rgb), 0.34);
    border: 1px solid rgba(var(--accent-rgb), 0.75);
    padding: 4px 15px; border-radius: 20px;
    margin-bottom: 14px;
}
.feature-text h2 { font-size: 28px; font-weight: 600; margin-bottom: 16px; }
.feature-text > p { font-size: 15px; color: #666; line-height: 1.95; margin-bottom: 24px; }

.feature-list { display: flex; flex-direction: column; gap: 14px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list .fl-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: var(--border-radius);
    background: var(--bg-color);
    color: var(--primary-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.feature-list strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.feature-list em { font-style: normal; font-size: 13.5px; color: var(--text-light); }

/* ===================== 板块小图标（内联 SVG） =====================
   全站图标统一用线性 SVG，不再用 emoji —— emoji 在部分设备上会渲染成方块或彩色贴图。 */
.material-item .icon { color: var(--primary-color); font-size: 0; }
.material-item .icon svg { width: 42px; height: 42px; }
.process-item .icon svg { width: 24px; height: 24px; }
.policy-item .pi-icon { color: var(--primary-color); font-size: 0; }
.policy-item .pi-icon svg { width: 30px; height: 30px; }
.system-card .sc-icon svg { width: 26px; height: 26px; }
.feature-list .fl-icon svg { width: 20px; height: 20px; }

/* 图标在容器内居中 */
.material-item .icon svg,
.process-item .icon svg,
.policy-item .pi-icon svg { display: block; margin: 0 auto; }

/* 按钮里的图标与文字对齐 */
.btn-primary svg, .btn-outline svg, .btn-ghost svg, .btn-ghost-light svg {
    width: 17px; height: 17px;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 6px;
}

/* ===================== 配色方案页（palette.html） ===================== */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.theme-card {
    position: relative;
    background: var(--white);
    border: 1.5px solid var(--line-color);
    border-radius: var(--border-radius);
    padding: 24px 26px 24px;
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.theme-card:hover { border-color: var(--primary-color); transform: translateY(-3px); box-shadow: var(--shadow); }
.theme-card.on { border: 2px solid var(--primary-color); padding: 23.5px 25.5px 23.5px; }
.theme-card.on::after {
    content: '✓ 使用中';
    position: absolute; top: 20px; right: 24px;
    font-size: 12px; font-weight: 600;
    color: var(--primary-color);
    background: rgba(var(--accent-rgb), 0.45);
    padding: 3px 12px; border-radius: 20px;
}
.tc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.tc-head h3 { font-size: 20px; font-weight: 600; }
.tc-tag { font-size: 12px; color: var(--primary-color); }
.tc-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; margin-bottom: 18px; }
.sw { display: flex; flex-direction: column; gap: 5px; }
.sw i { display: block; height: 40px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.07); }
.sw b { font-size: 12px; font-weight: 600; letter-spacing: 0.2px; }
.sw em { font-size: 11.5px; font-style: normal; color: var(--text-light); }
.tc-desc { font-size: 13.5px; color: #666; line-height: 1.8; margin-bottom: 10px; }
.tc-fit { font-size: 12.5px; color: var(--text-light); }

/* 效果预览 */
.pv-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.pv-row .btn-outline { font-size: 16px; }
.badge-standalone {
    display: inline-block; font-size: 13px; font-weight: 600;
    color: var(--primary-color);
    background: rgba(var(--accent-rgb), 0.34);
    border: 1px solid rgba(var(--accent-rgb), 0.75);
    padding: 4px 15px; border-radius: 20px;
}
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pv-card {
    background: var(--white); border-radius: var(--border-radius);
    box-shadow: var(--shadow); padding: 22px 24px 24px;
}
.pv-card-img { height: 120px; border-radius: 8px; background: var(--bg-color); margin-bottom: 16px; }
.pv-card h3 { font-size: 18px; margin-bottom: 5px; }
.pv-card .pv-sub { font-size: 13px; color: var(--primary-color); margin-bottom: 10px; }
.pv-card > p { font-size: 13.5px; color: #666; line-height: 1.8; margin-bottom: 14px; }
.pv-tip { text-align: center; margin-top: 24px; font-size: 13px; color: var(--text-light); }

/* 正文里的代码片段（选色页说明用） */
.prose code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.9em;
    background: var(--bg-color);
    border: 1px solid var(--line-color);
    padding: 1px 6px; border-radius: 4px;
}
.prose .muted { color: var(--text-light); font-size: 14px; }

/* ===================== 打印优化 ===================== */
@media print {
    .header, .footer, .float-sidebar, .cta-strip, .banner { display: none; }
    .page-hero { background: none; color: #000; padding: 10px 0; }
    body { font-size: 12pt; }
}

/* ---------- 永信：业务范围页（2026-11-15 新增） ---------- */
.service-list { display: flex; flex-direction: column; gap: 0; }

.service-block {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
    padding: 34px 0;
    border-bottom: 1px solid var(--line-color);
}
.service-block:last-child { border-bottom: 0; }

.sb-num {
    font-size: 30px;
    font-weight: 800;
    color: var(--primary-color);
    opacity: .28;
    line-height: 1;
    letter-spacing: -1px;
    padding-top: 4px;
}

.sb-body h2 { font-size: 23px; margin-bottom: 12px; letter-spacing: -.3px; }

.sb-desc {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-light);
    margin-bottom: 16px;
    max-width: 780px;
}

.sb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sb-tags span {
    font-size: 12.5px;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--line-color);
    border-radius: 6px;
    padding: 5px 12px;
}

.sb-note {
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 4px;
}

/* 页面内锚点导航（案例页） */
.anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 44px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line-color);
}
.anchor-nav a {
    font-size: 14px;
    padding: 8px 18px;
    border: 1px solid var(--line-color);
    border-radius: 999px;
    color: var(--text-color);
    transition: all .2s;
}
.anchor-nav a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* 案例分组 */
.case-group { margin-bottom: 56px; }
.case-group:last-of-type { margin-bottom: 0; }
.case-group .case-group-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 26px;
    padding-left: 14px;
    border-left: 4px solid var(--primary-color);
    letter-spacing: -.3px;
}
/* 覆盖 .case-overlay 内的同名小标题：分组大标题不要红底 */
.case-group > .case-group-title {
    background: none;
    color: var(--text-color);
    display: block;
    padding: 0 0 0 14px;
    border-radius: 0;
}

@media (max-width: 768px) {
    .service-block { grid-template-columns: 1fr; gap: 2px; padding: 26px 0; }
    .sb-num { font-size: 20px; padding-top: 0; margin-bottom: 4px; }
    .sb-body h2 { font-size: 19px; }
    .company-facts { grid-template-columns: repeat(2,1fr) !important; }
}


/* ---------- 2026-11-15 桌面优先放大 ---------- */
@media (min-width: 1400px) {
    :root { --max-width: 1440px; }
    .section-title h2 { font-size: 46px; }
    .product-card img { height: 320px; }
}
@media (min-width: 1700px) {
    :root { --max-width: 1560px; }
}

/* 业务页在大屏上更舒展 */
@media (min-width: 1200px) {
    .service-block { grid-template-columns: 120px 1fr; padding: 46px 0; }
    .sb-num { font-size: 40px; }
    .sb-body h2 { font-size: 27px; }
    .sb-desc { font-size: 16.5px; }
    .sb-tags span { font-size: 13.5px; padding: 7px 15px; }
}

/* 案例分组标题在大屏放大 */
@media (min-width: 1200px) {
    .case-group .case-group-title { font-size: 32px; margin-bottom: 32px; }
    .case-group { margin-bottom: 76px; }
}

/* ---------- 永信：招聘页 ---------- */
.job-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 28px;
    align-items: start;
}
.job-side { display: flex; flex-direction: column; gap: 20px; }

.job-card {
    background: #fff;
    border: 1px solid var(--line-color);
    border-radius: 14px;
    padding: 30px 32px;
    position: relative;
}
.job-card.job-main {
    border: 2px solid var(--primary-color);
    box-shadow: 0 12px 36px rgba(var(--primary-rgb), .10);
    padding: 38px 40px;
}
.job-card h3 { font-size: 22px; margin-bottom: 6px; letter-spacing: -.3px; }
.job-card.job-main h3 { font-size: 30px; margin-bottom: 8px; }

.job-badge {
    position: absolute;
    top: -12px; left: 32px;
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 999px;
}

.job-sub { font-size: 14px; color: var(--text-light); margin-bottom: 22px; }

.job-sec { margin-bottom: 22px; }
.job-label {
    font-size: 12px;
    letter-spacing: 2.5px;
    color: var(--text-light);
    font-weight: 600;
    margin-bottom: 10px;
}
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.job-tags span {
    font-size: 13.5px;
    background: var(--bg-color);
    border: 1px solid var(--line-color);
    border-radius: 7px;
    padding: 6px 14px;
    color: var(--text-color);
}
.job-list { margin: 0; padding-left: 18px; }
.job-list li {
    font-size: 14.5px;
    line-height: 2;
    color: var(--text-light);
}
.job-card.job-main .job-list li { font-size: 15px; }

@media (max-width: 900px) {
    .job-grid { grid-template-columns: 1fr; }
    .job-card.job-main { padding: 28px 24px; }
    .job-card.job-main h3 { font-size: 24px; }
}

/* ---------- 企业文化加强版 ---------- */
.culture-wrap { display: flex; flex-direction: column; gap: 28px; }
.culture-quote {
    font-size: 22px;
    line-height: 1.85;
    font-weight: 300;
    letter-spacing: .3px;
    opacity: .95;
    padding-left: 24px;
    border-left: 3px solid var(--primary-color);
    max-width: 760px;
}
.culture-three { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.culture-item {
    background: rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 26px 26px 28px;
}
.culture-item .ci-label {
    font-size: 11.5px;
    letter-spacing: 3px;
    opacity: .5;
    margin-bottom: 12px;
}
.culture-item .ci-text {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.75;
}
.culture-beliefs {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    background: rgba(255,255,255,.1);
    border-radius: 12px;
    overflow: hidden;
}
.culture-belief {
    background: var(--dark-surface);
    padding: 24px 22px;
}
.culture-belief .cb-num {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--primary-color);
    opacity: .9;
    margin-bottom: 8px;
    font-weight: 700;
}
.culture-belief .cb-t {
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 6px;
}
.culture-belief .cb-d {
    font-size: 13px;
    line-height: 1.75;
    opacity: .62;
}
@media (max-width: 900px) {
    .culture-three { grid-template-columns: 1fr; }
    .culture-beliefs { grid-template-columns: repeat(2,1fr); }
    .culture-quote { font-size: 18px; }
}

/* ---------- 企业文化（按手册排版） ---------- */
.cul-block { margin-bottom: 56px; }
.cul-block:last-of-type { margin-bottom: 0; }

.cul-h {
    display: flex; align-items: center; gap: 14px;
    font-size: 21px; font-weight: 700;
    margin-bottom: 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.13);
}
.cul-h span {
    width: 30px; height: 30px;
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 50%;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex: none; opacity: .85;
}

.cul-item { margin-bottom: 28px; }
.cul-item:last-child { margin-bottom: 0; }

.cul-t {
    font-size: 15.5px; font-weight: 700;
    color: #fff; opacity: .95;
    margin-bottom: 14px;
    padding-left: 12px;
    border-left: 3px solid var(--primary-color);
}

.cul-rows { display: flex; flex-direction: column; gap: 12px; }
.cul-rows.four { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; }

.cul-rows > div { font-size: 14.5px; line-height: 1.8; }
.cul-rows > div b {
    display: inline-block;
    min-width: 100px;
    color: #fff; font-weight: 700;
    margin-right: 10px;
}
.cul-rows > div span { color: rgba(255,255,255,.66); }

.cul-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.cul-card {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    padding: 24px 26px;
}
.cul-card .cc-t {
    font-size: 16.5px; font-weight: 700;
    margin-bottom: 10px; color: #fff;
}
.cul-card .cc-d {
    font-size: 13.8px; line-height: 1.85;
    color: rgba(255,255,255,.62);
}

.cul-vision { display: flex; flex-direction: column; gap: 16px; }
.cul-vision > div { font-size: 15px; line-height: 1.8; }
.cul-vision > div b {
    display: inline-block; min-width: 130px;
    color: #fff; font-weight: 700; margin-right: 12px;
}
.cul-vision > div span { color: rgba(255,255,255,.66); }

.cul-declare {
    margin-top: 16px;
    padding: 34px 38px;
    background: rgba(var(--primary-rgb), .16);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 11px 11px 0;
}
.cul-declare .cd-label {
    font-size: 11.5px; letter-spacing: 3px;
    color: var(--primary-color);
    opacity: .95; font-weight: 700;
    margin-bottom: 14px;
}
.cul-declare p {
    font-size: 16px; line-height: 2;
    color: rgba(255,255,255,.88);
}

@media (max-width: 900px) {
    .cul-rows.four { grid-template-columns: 1fr; }
    .cul-cards { grid-template-columns: 1fr; }
    .cul-rows > div b { min-width: auto; display: block; margin-bottom: 4px; }
    .cul-vision > div b { min-width: auto; display: block; margin-bottom: 4px; }
    .cul-declare { padding: 26px 22px; }
}