/* ==========================================================

   🎨 品牌色变量 · 改这一个区块，全站同步变化

   ========================================================== */

:root {

    /* 主强调色（金色系） */

    --color-accent:       #c9a961;

    --color-accent-light: #e0c88a;

    --color-accent-dark:  #8a7340;



    /* 主色（墨黑） */

    --color-brand:        #1a1a2e;

    --color-brand-dark:   #0f0f1a;

    --color-brand-light:  #f5f5f0;



    /* 米白奶油色 */

    --color-cream:        #faf7f2;

    --color-cream-dark:   #f0ebe0;



    /* 品牌金 */

    --color-gold:         #c9a961;



    /* 点缀 */

    --color-ink:          #1a1a2e;

    --color-ink-soft:     #4a4a5e;

    --color-text-muted:   #6b7c93;



    /* 字体 */

    --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'SimSun', 'STSong', serif;

    --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;



    /* 圆角 */

    --radius-sm: 6px;

    --radius-md: 10px;

    --radius-lg: 16px;

    --radius-xl: 24px;



    /* 阴影 */

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);

    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);

    --shadow-gold: 0 8px 30px rgba(201, 169, 97, 0.28);



    /* 过渡 */
    --transition: all 0.25s ease;

    /* ==========================================================
       RGB 变量（供 Tailwind CDN 使用）
       Tailwind 用 rgb(var(--color-xxx-rgb) / <alpha-value>) 引用，
       改这里就能同步改 Tailwind 的工具类颜色（如 text-accent）
       ========================================================== */
    --color-accent-rgb:       201 169 97;
    --color-accent-light-rgb: 224 200 138;
    --color-accent-dark-rgb:  138 115 64;
    --color-brand-rgb:        26 26 46;
    --color-brand-dark-rgb:   15 15 26;
    --color-brand-light-rgb:  245 245 240;
    --color-cream-rgb:        250 247 242;
    --color-cream-dark-rgb:   240 235 224;
    --color-gold-rgb:         201 169 97;
    --color-ink-rgb:          26 26 46;
}



/* ==========================================================
   鼎盛寄卖行 · 全站统一样式表
   ==========================================================

   📖 使用说明：
   - 编辑器里 Ctrl+F 搜索【分区名】可精准跳转
   - 所有前台页面的样式都收在本文件，不要写内联 style
   - 新增样式时，放到对应的分区下面

   📖 快速索引：
   ───────────────────────────────────────────

   【基础层】
     【全局重置】      重置、body、字体、滚动条
     【标题系统】      page-title / section-title / card-title
     【按钮系统】      btn-primary / btn-outline / btn-cta
     【卡片系统】      card-soft / card-cream
     【区块背景】      section-hero / white / cream / brand
     【强调元素】      border-accent-left / step-circle

   【导航与页脚】
     【顶部导航】      nav 全局
     【导航链接】      nav-link / mobile-nav-link
     【页脚基础】      页脚整体
     【页脚扩展】      footer-top
     【地图区块】      联系我们页地图跳转

   【页面专属】
     【关于我们页】    section-title--left / team-avatar
     【案例详情页】    topic-badge / case-excerpt
     【资讯详情页】    news-excerpt
     【品类页】        category-placeholder
     【优势页】        compare-table

   【工具与适配】
     【工具类】        text-preline
     【移动端适配】    响应式规则

   ========================================================== */

/* 全局 */

/* 全局 */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--color-ink);
    line-height: 1.7;
    background: #ffffff;
}

/* ==========================================
   标题系统（统一管理）
   ========================================== */
.page-title {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.25;
    letter-spacing: 0.02em;
}
@media (min-width: 768px) {
    .page-title { font-size: 3rem; }
}

.section-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-ink);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}
@media (min-width: 768px) {
    .section-title { font-size: 1.875rem; }
}

.section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}
@media (min-width: 768px) {
    .section-subtitle { font-size: 1rem; }
}

.subtitle-accent {
    color: #f55211;
    font-weight: 600;
}

.card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: 0.01em;
}
/* ==========================================
   按钮系统
   ========================================== */
.btn-primary {
    display: inline-block;
    background: linear-gradient(135deg, #f55211 0%, #ff7a3d 100%);
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 82, 17, 0.3);
}

.btn-outline {
    display: inline-block;
    border: 1px solid #f55211;
    color: #f55211;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: #fff3e0;
}

.btn-cta {
    display: inline-block;
    background: linear-gradient(135deg, #f55211 0%, #1486c2 100%);
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(20, 134, 194, 0.35);
}

/* ==========================================
   卡片系统
   ========================================== */
.card-soft {
    background: #fff;
    border: 1px solid #ffe0c2;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}
.card-soft:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(20, 134, 194, 0.15);
}

.card-cream {
    background: linear-gradient(180deg, #ffffff 0%, #fff3e0 100%);
    border: 1px solid #ffe0c2;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}
.card-cream:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(20, 134, 194, 0.15);
}

/* ==========================================
   区块背景
   ========================================== */
.section-hero {
    background: linear-gradient(135deg, #fff3e0 0%, #ffffff 50%, #e8f4fb 100%);
}
.section-cream {
    background: linear-gradient(135deg, #fff3e0 0%, #ffffff 100%);
}
.section-cream-reverse {
    background: linear-gradient(135deg, #ffffff 0%, #fff3e0 100%);
}
.section-white {
    background: #ffffff;
}
.section-brand {
    background: linear-gradient(135deg, #1486c2 0%, #0f6b9e 100%);
    color: #ffffff;
}

/* ==========================================
   强调元素
   ========================================== */
.border-accent-left {
    border-left: 4px solid #f55211;
    padding-left: 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
    background: linear-gradient(90deg, #fff3e0 0%, #ffffff 100%);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.step-circle {
    background: linear-gradient(135deg, #f55211 0%, #1486c2 100%);
    color: #fff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ==========================================
   导航
   ========================================== */
nav {
    box-shadow: 0 2px 12px rgba(20, 134, 194, 0.08);
    backdrop-filter: blur(10px);
}
#mobileMenu { transition: all 0.3s ease; }

/* ==========================================
   通用
   ========================================== */
img { max-width: 100%; height: auto; }
button:active { transform: scale(0.97); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fff3e0; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f55211, #1486c2);
    border-radius: 4px;
}

/* ==========================================
   导航专属样式
   ========================================== */
.nav-link {
    color: #1a1a2e;
    font-weight: 500;
    transition: color 0.2s ease;
}
.nav-link:hover {
    color: #f55211;
}

.mobile-nav-link {
    display: block;
    padding: 0.5rem 0;
    color: #1a1a2e;
    font-weight: 500;
    transition: color 0.2s ease;
}
.mobile-nav-link:hover {
    color: #f55211;
}

/* ==========================================
   页脚专属样式
   ========================================== */
.footer-link {
    color: #e8f4fb;
    transition: color 0.2s ease;
}
.footer-link:hover {
    color: #f55211;
}
/* ==========================================
   地图跳转区块（联系我们页面）
   ========================================== */
.map-jump-block {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* 无图片时的降级样式 */
.map-jump-block:not(:has(img)) {
    background: linear-gradient(135deg, #fff3e0 0%, #ffffff 50%, #e8f4fb 100%);
    text-align: center;
    transition: all 0.3s ease;
}
.map-jump-block:not(:has(img)):hover {
    background: linear-gradient(135deg, #ffe0c2 0%, #fff3e0 50%, #d6ecf8 100%);
}

/* 有图片时的图片样式 */
.map-jump-block img {
    width: 100%;
    height: 24rem;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* 悬浮按钮容器 */
.map-jump-block .btn-primary {
    pointer-events: none;
}

/* 鼠标悬停时按钮上浮 */
.map-jump-block:hover .btn-primary {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(245, 82, 17, 0.4);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .map-jump-block img {
        height: 16rem;
    }
}
.text-preline {
    white-space: pre-line;
    word-break: break-word;
}



/* ==========================================

   页脚专属样式（扩展）

   ========================================== */

.footer-top {

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}




/* ==========================================

   关于我们页专属样式

   ========================================== */

.section-title--left {

    text-align: left;

}

.section-title--white {

    color: #ffffff;

}

.team-avatar {

    background: linear-gradient(135deg, #fff3e0, #ffe0c2);

}




/* ==========================================

   案例详情页专属样式

   ========================================== */

.topic-badge {

    background: #fff3e0;

    color: #f55211;

}

.page-title--left {

    text-align: left;

}

.case-excerpt {

    border-left: 4px solid #f55211;

    background: #fff3e0;

}




/* ==========================================

   资讯详情页专属样式

   ========================================== */

.news-excerpt {

    border-left: 4px solid #f55211;

    background: #fff3e0;

}




/* ==========================================

   品类页专属样式

   ========================================== */

.category-placeholder {

    background: linear-gradient(135deg, #fff3e0 0%, #ffe0c2 100%);

}




/* ==========================================

   优势页专属样式

   ========================================== */

.compare-table thead {

    background: linear-gradient(135deg, #f55211 0%, #1486c2 100%);

}




/* ==========================================

   图片点击预览（Lightbox）

   ========================================== */

.lightbox-img {

    cursor: zoom-in;

    transition: opacity 0.2s;

}

.lightbox-img:hover {

    opacity: 0.92;

}



.lightbox-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.9);

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 2rem;

    cursor: zoom-out;

    animation: lightbox-fade-in 0.2s ease;

}

.lightbox-overlay.active {

    display: flex;

}

.lightbox-overlay img {

    max-width: 95vw;

    max-height: 95vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);

}

.lightbox-close {

    position: absolute;

    top: 1.5rem;

    right: 1.5rem;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    border: none;

    font-size: 24px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.2s;

    font-family: inherit;

}

.lightbox-close:hover {

    background: rgba(255, 255, 255, 0.3);

}



@keyframes lightbox-fade-in {

    from { opacity: 0; }

    to { opacity: 1; }

}




/* ==========================================================

   🎨 阶段四 · 品牌视觉升级

   ========================================================== */



/* ---- 1. 按钮：金色渐变 + 悬浮上浮 ---- */

.btn-primary {

    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;

    color: var(--color-ink) !important;

    font-weight: 600;

    border-radius: var(--radius-md);

    box-shadow: 0 4px 14px rgba(201, 169, 97, 0.25);

    transition: var(--transition);

    letter-spacing: 0.02em;

}

.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-gold);

}



.btn-outline {

    border: 1.5px solid var(--color-accent) !important;

    color: var(--color-accent-dark) !important;

    border-radius: var(--radius-md);

    font-weight: 600;

    transition: var(--transition);

    background: transparent;

}

.btn-outline:hover {

    background: var(--color-cream);

    border-color: var(--color-accent-dark) !important;

}



.btn-cta {

    background: linear-gradient(135deg, var(--color-ink) 0%, #2a2a3e 100%) !important;

    color: #fff !important;

    border-radius: var(--radius-md);

    font-weight: 600;

    padding: 0.85rem 2.2rem;

    transition: var(--transition);

    box-shadow: 0 4px 14px rgba(26, 26, 46, 0.2);

    letter-spacing: 0.02em;

}

.btn-cta:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 30px rgba(26, 26, 46, 0.3);

    background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%) !important;

}



/* ---- 2. 卡片：更大圆角 + 更柔阴影 + 悬浮金色边框 ---- */

.card-soft,

.card-cream {

    border-radius: var(--radius-lg);

    border: 1px solid rgba(201, 169, 97, 0.15);

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}

.card-soft {

    background: #fff;

}

.card-cream {

    background: linear-gradient(180deg, #fff 0%, var(--color-cream) 100%);

}

.card-soft:hover,

.card-cream:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-gold);

    border-color: var(--color-accent);

}



/* ---- 3. 区块标题：金色下划线 + 更宽间距 ---- */

.section-title {

    position: relative;

    padding-bottom: 1rem;

    margin-bottom: 0.75rem;

}

.section-title::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 60px;

    height: 3px;

    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);

    border-radius: 2px;

}

.section-title--left::after {

    left: 0;

    transform: none;

}



/* ---- 4. 装饰线：section 之间加细微金色分隔 ---- */

.section-white + .section-cream,

.section-cream + .section-white,

.section-white + .section-cream-reverse,

.section-cream-reverse + .section-white {

    border-top: 1px solid rgba(201, 169, 97, 0.12);

}



/* ---- 5. 强调区块：金色左竖线加强 ---- */

.border-accent-left {

    border-left: 3px solid var(--color-accent) !important;

    background: linear-gradient(90deg, rgba(201, 169, 97, 0.06) 0%, transparent 100%) !important;

    padding: 1rem 1.25rem !important;

    border-radius: 0 var(--radius-md) var(--radius-md) 0;

    transition: var(--transition);

}

.border-accent-left:hover {

    border-left-width: 5px !important;

    background: linear-gradient(90deg, rgba(201, 169, 97, 0.12) 0%, transparent 100%) !important;

}



/* ---- 6. 步骤圆：金色渐变 + 外发光 ---- */

.step-circle {

    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;

    color: var(--color-ink) !important;

    font-weight: 800;

    box-shadow: 0 4px 14px rgba(201, 169, 97, 0.3);

    transition: var(--transition);

}

.step-circle:hover {

    transform: scale(1.08);

    box-shadow: var(--shadow-gold);

}



/* ---- 7. 副标题：金色加粗 + 字间距 ---- */

.subtitle-accent {

    color: var(--color-accent-dark) !important;

    font-weight: 600;

    letter-spacing: 0.08em;

}



/* ---- 8. Hero 区：加金箔背景纹理 ---- */

.section-hero {

    background:

        radial-gradient(circle at 20% 30%, rgba(201, 169, 97, 0.08) 0%, transparent 40%),

        radial-gradient(circle at 80% 70%, rgba(201, 169, 97, 0.06) 0%, transparent 45%),

        linear-gradient(135deg, var(--color-cream) 0%, #ffffff 50%, var(--color-brand-light) 100%) !important;

    position: relative;

}



/* ---- 9. 卡片图片：悬浮放大 ---- */

.card-soft img,

.card-cream img {

    transition: transform 0.4s ease;

}

.card-soft:hover img,

.card-cream:hover img {

    transform: scale(1.05);

}

.card-soft,

.card-cream {

    overflow: hidden;

}



/* ---- 10. 表格：金色表头 + 悬浮高亮 ---- */

.compare-table thead {

    background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%) !important;

    color: #fff !important;

}

.compare-table thead th {

    font-weight: 600;

    letter-spacing: 0.03em;

}

.compare-table tbody tr {

    transition: background 0.2s;

}

.compare-table tbody tr:hover {

    background: rgba(201, 169, 97, 0.06);

}



/* ---- 11. 页脚：深墨黑 + 金色装饰线 ---- */

.section-brand {

    background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-brand-dark) 100%) !important;

    color: #fff;

    position: relative;

}

.section-brand::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);

}

.footer-link {

    color: rgba(255, 255, 255, 0.75) !important;

    transition: var(--transition);

    position: relative;

}

.footer-link:hover {

    color: var(--color-accent) !important;

    padding-left: 4px;

}



/* ---- 12. 话题标签：金底墨字 ---- */

.topic-badge {

    background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-cream-dark) 100%) !important;

    color: var(--color-accent-dark) !important;

    border: 1px solid rgba(201, 169, 97, 0.3);

    font-weight: 600;

    transition: var(--transition);

}

.topic-badge:hover {

    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%) !important;

    color: #fff !important;

}



/* ---- 13. 详情页：摘要区金色底纹 ---- */

.case-excerpt,

.news-excerpt {

    border-left: 4px solid var(--color-accent) !important;

    background: linear-gradient(90deg, rgba(201, 169, 97, 0.08) 0%, rgba(201, 169, 97, 0.02) 100%) !important;

    border-radius: 0 var(--radius-md) var(--radius-md) 0;

}



/* ---- 14. 品类占位区：金色渐变 ---- */

.category-placeholder {

    background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-cream-dark) 100%) !important;

    border-radius: var(--radius-md);

    transition: var(--transition);

}

.card-soft:hover .category-placeholder {

    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%) !important;

}



/* ---- 15. 全局：链接悬浮金色 ---- */

a {

    transition: color 0.2s;

}



/* ---- 16. 滚动条：金色细条 ---- */

::-webkit-scrollbar {

    width: 6px;

    height: 6px;

}

::-webkit-scrollbar-track {

    background: var(--color-cream);

}

::-webkit-scrollbar-thumb {

    background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark));

    border-radius: 3px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--color-accent-dark);

}



/* ---- 17. 移动端微调 ---- */

@media (max-width: 768px) {

    .section-title::after {

        width: 40px;

    }

    .btn-primary,

    .btn-cta,

    .btn-outline {

        padding: 0.65rem 1.5rem;

        font-size: 0.9rem;

    }

}






/* ==========================================================

   🎨 阶段四 · 第二步：品牌装饰升级

   ========================================================== */



/* ---- 1. Hero 区装饰光斑（增强高级感） ---- */

.section-hero::before {

    content: "";

    position: absolute;

    top: -50px;

    right: -50px;

    width: 300px;

    height: 300px;

    background: radial-gradient(circle, rgba(201, 169, 97, 0.18) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}

.section-hero::after {

    content: "";

    position: absolute;

    bottom: -80px;

    left: -60px;

    width: 240px;

    height: 240px;

    background: radial-gradient(circle, rgba(201, 169, 97, 0.12) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}

.section-hero > * {

    position: relative;

    z-index: 1;

}



/* ---- 2. 卡片：悬停时顶部浮现金色细线 ---- */

.card-soft::before,

.card-cream::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 0;

    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);

    transition: height 0.3s ease;

    z-index: 2;

}

.card-soft:hover::before,

.card-cream:hover::before {

    height: 2px;

}



/* ---- 3. Section 标题：两侧装饰点 ---- */

.section-title {

    display: block;

}

.section-title::before {

    content: "";

    display: inline-block;

    width: 24px;

    height: 1px;

    background: var(--color-accent);

    vertical-align: middle;

    margin-right: 12px;

    opacity: 0.6;

}

.section-title::after {

    /* 保留第一步的底部金色线 */

    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 60px;

    height: 3px;

    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);

    border-radius: 2px;

}

.section-title--left::before {

    display: none;

}



/* ---- 4. 页脚：金色装饰网格 ---- */

.section-brand {

    position: relative;

    overflow: hidden;

}

.section-brand::after {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(201, 169, 97, 0.05) 1px, transparent 1px),

        linear-gradient(90deg, rgba(201, 169, 97, 0.05) 1px, transparent 1px);

    background-size: 60px 60px;

    pointer-events: none;

    opacity: 0.5;

}

.section-brand > * {

    position: relative;

    z-index: 1;

}



/* ---- 5. 分类/案例/资讯卡片：角落装饰角标 ---- */

.card-soft {

    position: relative;

}

.card-soft::after {

    content: "";

    position: absolute;

    top: 12px;

    right: 12px;

    width: 20px;

    height: 20px;

    border-top: 2px solid var(--color-accent);

    border-right: 2px solid var(--color-accent);

    opacity: 0;

    transition: opacity 0.3s;

    pointer-events: none;

    border-top-right-radius: 4px;

}

.card-soft:hover::after {

    opacity: 0.8;

}



/* ---- 6. 数据卡片（如"为什么选择我们"）：数字放大 ---- */

.card-cream .text-3xl,

.card-cream .text-4xl {

    transition: transform 0.3s ease;

    display: inline-block;

}

.card-cream:hover .text-3xl,

.card-cream:hover .text-4xl {

    transform: scale(1.15) rotate(-5deg);

}



/* ---- 7. 流程步骤：连接线 ---- */

@media (min-width: 768px) {

    .grid.grid-cols-2.md\:grid-cols-5 > .text-center {

        position: relative;

    }

    .grid.grid-cols-2.md\:grid-cols-5 > .text-center:not(:last-child)::after {

        content: "";

        position: absolute;

        top: 32px;

        right: -30%;

        width: 60%;

        height: 1px;

        background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);

        opacity: 0.4;

        pointer-events: none;

    }

}



/* ---- 8. FAQ 条目：悬停金色左线加粗 ---- */

.border-accent-left {

    position: relative;

}



/* ---- 9. Hero 主标题：金色装饰下划线 ---- */

.section-hero .page-title {

    position: relative;

    padding-bottom: 12px;

}

.section-hero .page-title::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 80px;

    height: 3px;

    background: linear-gradient(90deg, var(--color-accent), transparent);

    border-radius: 2px;

}



/* ---- 10. 详情页：正文首段首字放大（首字下沉） ---- */

.prose > p:first-of-type::first-letter {

    font-family: var(--font-serif);

    font-size: 3.2em;

    font-weight: 700;

    color: var(--color-accent-dark);

    float: left;

    line-height: 0.9;

    margin: 0.1em 0.15em 0 0;

}



/* ---- 11. 手机端微调 ---- */

@media (max-width: 768px) {

    .section-hero::before,

    .section-hero::after {

        width: 150px;

        height: 150px;

    }

    .section-brand::after {

        background-size: 40px 40px;

    }

    .prose > p:first-of-type::first-letter {

        font-size: 2.5em;

    }

}






/* ==========================================================

   🎨 中英混排标题（给 h2.section-title 加 data-en 属性即可）

   示例：<h2 class="section-title" data-en="WHY CHOOSE US">为什么选择我们</h2>

   ========================================================== */



.section-title[data-en] {

    padding-bottom: 3.2rem !important;

    position: relative;

}



/* 覆盖原有左侧短金线，改为显示英文小字 */

.section-title[data-en]::before {

    content: attr(data-en);

    position: absolute;

    bottom: 1.1rem;

    left: 50%;

    transform: translateX(-50%);

    display: block;

    width: auto;

    height: auto;

    background: none;

    margin: 0;

    font-family: var(--font-sans);

    font-size: 0.72rem;

    font-weight: 500;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    color: var(--color-accent);

    opacity: 0.8;

    white-space: nowrap;

    vertical-align: baseline;

}



/* 底部金色线保持，宽度略加 */

.section-title[data-en]::after {

    bottom: 0;

    width: 80px;

}



/* 左对齐变体（用于关于我们页） */

.section-title--left[data-en]::before {

    left: 0;

    transform: none;

}

.section-title--left[data-en]::after {

    left: 0;

    transform: none;

}



/* 手机端缩小 */

@media (max-width: 768px) {

    .section-title[data-en] {

        padding-bottom: 2.6rem !important;

    }

    .section-title[data-en]::before {

        font-size: 0.62rem;

        letter-spacing: 0.25em;

        bottom: 0.9rem;

    }

}



/* ==========================================================

   导航 Logo（图片 + 中英品牌名）

   ========================================================== */

.site-logo-wrap {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

}

.site-logo-img {

    height: 40px;

    width: auto;

    max-width: 60px;

    flex-shrink: 0;

    border-radius: 6px;

    object-fit: contain;

}

.site-logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}

.site-logo-cn {

    font-family: var(--font-serif);

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--color-accent-dark);

    letter-spacing: 0.02em;

    white-space: nowrap;

}

.site-logo-en {

    font-family: var(--font-sans);

    font-size: 0.58rem;

    font-weight: 500;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: var(--color-accent);

    opacity: 0.75;

    margin-top: 3px;

    white-space: nowrap;

}

@media (max-width: 768px) {

    .site-logo-img { height: 32px; max-width: 45px; }

    .site-logo-cn { font-size: 0.95rem; }

    .site-logo-en { font-size: 0.52rem; letter-spacing: 0.18em; }

}



/* ==========================================================
   🚨 H1 中英文排版终极修复（覆盖所有冲突）
   ========================================================== */
.page-title[data-en] {
    display: block !important; 
    line-height: 1.15 !important; 
    text-align: inherit !important; /* 强制继承父级的居中 */
    padding-bottom: 0 !important;   /* 干掉之前的内边距干扰 */
    position: relative !important;
}

/* 强行冲刷前面的 absolute 定位和金线代码 */
.page-title[data-en]::after {
    content: attr(data-en) !important; 
    display: block !important;
    position: static !important; /* 回归正常文档流，这样才会跟着中文居中 */
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    
    text-align: inherit !important; /* 英文自身也居中 */
    margin-top: 3px !important;     /* 极限距离，紧贴 */
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 3px !important;
    text-indent: 3px !important;    /* 视觉居中补偿 */
    text-transform: uppercase !important;
    color: var(--color-accent) !important;
    opacity: 0.9 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    .page-title[data-en]::after {
        font-size: 12px !important;
        letter-spacing: 2px !important;
        text-indent: 2px !important;
        margin-top: 2px !important;
    }
}


/* ==========================================================
   语义色：页面里不再写死颜色，统一由这里控制
   后台「网站设置」选风格时，会覆盖这几个类的取值
   ========================================================== */
.link-accent { color: var(--color-accent); }
.link-accent:hover { color: var(--color-accent-dark); }
.accent-border { border-color: var(--color-accent); }
.field-focus:focus { border-color: var(--color-accent); }
.btn-submit { background: var(--color-accent); color: var(--color-ink); }
.btn-submit:hover { background: var(--color-accent-dark); }

/* 首屏标签：描边胶囊 + 主色圆点 */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    background: transparent;
    white-space: nowrap;
}
.hero-tag::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* 首屏标签强制一行 */
.hero-tags {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hero-tags::-webkit-scrollbar { display: none; }
.hero-tags > .hero-tag { flex: 0 0 auto; }
@media (max-width: 480px) {
    .hero-tags { gap: 7px; }
    .hero-tag { font-size: 0.7rem; padding: 3px 9px; gap: 5px; }
}

/* 首屏标签强制一行：用 body 前缀压过 Tailwind 的 .flex-wrap */
body .hero-tags {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 9px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body .hero-tags::-webkit-scrollbar { display: none; }
body .hero-tags > .hero-tag { flex: 0 0 auto; }
@media (max-width: 480px) {
    body .hero-tags { gap: 6px; }
    body .hero-tags > .hero-tag { font-size: 0.68rem; padding: 3px 8px; gap: 4px; }
}

/* 导航项多时收紧：字号缩小 + 允许换行，保持一行不挤爆 */
header .hidden.md\:flex {
    gap: 0.3rem !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.15rem !important;
}
header .nav-link {
    font-size: 0.79rem !important;
    padding: 0.1rem 0.3rem !important;
    white-space: nowrap;
    letter-spacing: 0;
}
@media (min-width: 1280px) {
    header .nav-link { font-size: 0.875rem !important; }
}

/* ==========================================================
   品牌理念·中国风
   ========================================================== */
.beliefs{position:relative;overflow:hidden;padding:6rem 0 5rem;background:linear-gradient(135deg,var(--color-brand) 0%,var(--color-brand-dark) 100%);color:var(--color-brand-light)}
.beliefs::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.06),transparent 55%),radial-gradient(circle at 85% 80%,rgba(255,255,255,.04),transparent 55%);pointer-events:none}
.beliefs-watermark{position:absolute;right:-1.5rem;top:-2rem;font-size:18rem;font-family:"Songti SC","SimSun",serif;color:rgba(255,255,255,.04);line-height:.8;pointer-events:none;user-select:none}
.beliefs-inner{position:relative;max-width:72rem;margin:0 auto;padding:0 1.5rem;z-index:1}
.beliefs-head{text-align:center;margin-bottom:3.5rem}
.beliefs-title{font-family:"Songti SC","SimSun",serif;font-size:2.4rem;letter-spacing:.5em;text-indent:.5em;font-weight:600;margin:0;color:#fff}
.beliefs-sub{margin-top:.9rem;font-size:.72rem;letter-spacing:.32em;color:var(--color-accent);text-transform:uppercase}
.beliefs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.belief{position:relative;padding:2rem 1.25rem 0;border-top:1px solid rgba(255,255,255,.12)}
.belief-index{position:absolute;top:.55rem;left:1.25rem;font-family:serif;font-size:1.5rem;color:var(--color-accent);opacity:.75}
.belief-label{display:block;writing-mode:vertical-rl;font-family:"Songti SC","SimSun",serif;font-size:1.5rem;letter-spacing:.35em;color:var(--color-accent);height:6.5rem;margin-left:auto}
.belief-text{margin-top:1.5rem;font-family:"Songti SC","SimSun",serif;font-size:1rem;line-height:2.1;letter-spacing:.06em;color:rgba(255,255,255,.86)}
@media(max-width:768px){.beliefs-grid{grid-template-columns:1fr;gap:1.5rem}.belief-label{writing-mode:horizontal-tb;height:auto;margin:1rem 0 0;letter-spacing:.3em}.beliefs-title{font-size:1.8rem}}

/* ==========================================================
   创始人·大将之风
   ========================================================== */
.founder{position:relative;overflow:hidden;padding:5rem 0;background:var(--color-cream)}
.founder-bg{position:absolute;inset:0;background:radial-gradient(circle at 78% 30%,rgba(0,0,0,.07),transparent 55%);pointer-events:none}
.founder-inner{position:relative;display:grid;grid-template-columns:320px 1fr;gap:3.5rem;align-items:center;max-width:64rem;margin:0 auto;padding:0 1.5rem;z-index:1}
.founder-portrait{mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
.founder-portrait img{width:100%;height:440px;object-fit:cover;object-position:center top;display:block}
.founder-portrait-fallback{width:100%;height:440px;display:flex;align-items:center;justify-content:center;font-family:"Songti SC",serif;font-size:8rem;color:var(--color-accent);background:rgba(0,0,0,.05)}
.founder-eyebrow{font-size:.7rem;letter-spacing:.35em;color:var(--color-accent);text-transform:uppercase}
.founder-name{font-family:"Songti SC","SimSun",serif;font-size:3rem;letter-spacing:.18em;margin:.6rem 0 0;color:var(--color-ink)}
.founder-rule{width:64px;height:2px;background:var(--color-accent);margin:1.5rem 0}
.founder-bio{font-family:"Songti SC","SimSun",serif;font-size:1.05rem;line-height:2;letter-spacing:.04em;color:#4b5563;max-width:34rem;margin:0}
.founder-sign{margin:2rem 0 0;font-family:"Songti SC","SimSun",serif;font-size:1.1rem;letter-spacing:.3em;color:var(--color-accent)}
@media(max-width:768px){.founder-inner{grid-template-columns:1fr;gap:2rem}.founder-portrait img,.founder-portrait-fallback{height:320px}.founder-name{font-size:2.2rem}}

/* ==========================================================
   发展历程·科技感交错时间轴
   ========================================================== */
.timeline-section{position:relative;overflow:hidden;padding:5rem 0;background:linear-gradient(180deg,var(--color-brand) 0%,var(--color-brand-dark) 100%);color:var(--color-brand-light)}
.timeline-section::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.timeline-inner{position:relative;max-width:64rem;margin:0 auto;padding:0 1.5rem;z-index:1}
.timeline{position:relative;margin:3.5rem 0 0;padding:0;list-style:none}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(to bottom,transparent,var(--color-accent) 12%,var(--color-accent) 88%,transparent)}
.tl-item{position:relative;width:50%;padding:0 2.5rem;margin-bottom:2.5rem;box-sizing:border-box}
.tl-left{left:0;text-align:right}
.tl-right{left:50%;text-align:left}
.tl-dot{position:absolute;top:1.5rem;width:12px;height:12px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 4px rgba(0,0,0,.25),0 0 20px var(--color-accent)}
.tl-left .tl-dot{right:-6px}
.tl-right .tl-dot{left:-6px}
.tl-card{display:inline-block;text-align:left;padding:1.25rem 1.5rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.05)}
.tl-year{display:block;font-family:"Songti SC",serif;font-size:1.9rem;letter-spacing:.08em;color:var(--color-accent);line-height:1}
.tl-title{margin:.5rem 0 0;font-size:1.05rem;color:var(--color-brand-light)}
.tl-desc{margin:.5rem 0 0;font-size:.86rem;line-height:1.8;color:rgba(255,255,255,.72)}
@media(max-width:768px){.timeline::before{left:8px}.tl-item{width:100%;left:0;padding-left:2rem;padding-right:0;text-align:left}.tl-left .tl-dot,.tl-right .tl-dot{left:2px;right:auto}}

/* ==========================================================
   核心团队·大圆头像
   ========================================================== */
.team-card{display:flex;flex-direction:column;align-items:center;padding:1.75rem 1rem}
.team-avatar-lg{width:9rem;height:9rem;border-radius:50%;object-fit:cover;display:block;box-shadow:0 12px 28px rgba(0,0,0,.16),0 0 0 4px rgba(255,255,255,.65)}
.team-avatar-fallback{display:flex;align-items:center;justify-content:center;font-family:serif;font-size:2.6rem;background:rgba(0,0,0,.05);color:var(--color-accent);box-shadow:none}


/* 营业执照：居中 + 主题投影 */
.license-block{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:3rem;text-align:center}
.license-img{display:block;width:100%;max-width:22rem;border-radius:12px;background:#fff;
    box-shadow:0 20px 44px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06)}

/* 联系页真实地图 */
.map-embed{position:relative;width:100%;height:24rem;overflow:hidden}
.map-embed iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15)}
.map-embed-cta{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);box-shadow:0 10px 24px rgba(0,0,0,.25)}
@media (max-width:768px){.map-embed{height:18rem}}