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

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

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

: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;
    }
}