html { scroll-behavior: smooth; }
/* =====================================================
   畅时科技 (Canse) - 前台设计系统 v2.0
   设计语言: 现代云厂商级企业视觉 (Clean Enterprise Cloud)
   品牌蓝: #004890 | 辅色: 深蓝 #003A75 | 浅蓝分区: #F5F9FD
   原则: 干净留白 / 卡片化 / 柔和阴影 / 统一圆角 / 高对比可读
   响应式: Mobile First | 无障碍: WCAG AA
   ===================================================== */

/* ==================== Design Tokens ==================== */
:root {
    /* 品牌主色：取自站点 Logo 主色 #004890，全部色阶同源，保证 AA 对比度 */
    --primary:        #004890;   /* 品牌装饰蓝 */
    --primary-600:    #0059A8;   /* 按钮/链接(浅底) 满足 4.5:1 */
    --primary-700:    #003A75;   /* hover / 深色文字 */
    --primary-500:    #1568B4;
    --primary-400:    #3E88C8;
    --primary-200:    #A9CBE8;
    --primary-300:    #6FA8D8;
    --primary-100:    #D5E5F3;
    --primary-050:    #EDF4FA;   /* 极浅蓝底 */
    --primary-tint:   #F5F9FD;   /* 分区底色 */
    --bg-tint:        #F5F9FD;   /* 摘要/简介区背景 */
    --primary-darker: #002B58;

    /* 深色 (暗部区块) */
    --ink-900: #071F3A;
    --ink-800: #0B2C4F;
    --bg-dark: #071F3A;

    /* 文字 */
    --text-dark:  #0F1F33;
    --text-body:  #45526A;
    --text-gray:  #5C6877;   /* 5.6:1 / 白 · 5.3:1 / #F5F9FD */
    --text-light: #66727F;   /* 4.9:1 / 白 · 4.6:1 / #F5F9FD */
    --text-white: #ffffff;

    /* 背景 / 中性 */
    --bg-white:  #ffffff;
    --bg-light:  #F5F9FD;
    --bg-soft:   #EEF3FA;
    --bg-lighter:#E9F0F8;
    --border:        #E6ECF3;
    --border-light:  #F0F3F8;

    /* 功能色 */
    --success:     #10B981;
    --success-bg:  #ECFDF5;
    --danger:      #EF4444;
    --danger-bg:   #FEF2F2;
    --warning:     #F59E0B;
    --warning-bg:  #FFFBEB;

    /* 阴影 (柔和, 企业级) */
    --shadow-sm:  0 1px 2px rgba(15,31,51,.05), 0 1px 3px rgba(15,31,51,.06);
    --shadow:     0 4px 14px rgba(15,31,51,.06), 0 2px 6px rgba(15,31,51,.04);
    --shadow-md:  0 10px 30px rgba(15,31,51,.08);
    --shadow-lg:  0 20px 50px rgba(15,31,51,.12);
    --shadow-blue:    0 12px 28px rgba(0,72,144,.18);
    --shadow-blue-lg: 0 20px 48px rgba(0,72,144,.24);

    /* 圆角 */
    --radius-sm: 10px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* 过渡 */
    --ease: cubic-bezier(.4,0,.2,1);
    --transition: all .3s var(--ease);
    --transition-fast: all .18s ease;

    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

    /* 布局 */
    --header-height: 104px;
    --container-max: 1200px;
}

/* ==================== Reset & Base ==================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}
body {
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-body);
    background: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a {
    color: var(--primary-600);
    text-decoration: none;
    transition: var(--transition-fast);
}
a:hover { color: var(--primary-700); }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark);
    line-height: 1.28;
    font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { margin-bottom: 1em; color: var(--text-body); }

/* ==================== Utilities ==================== */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.text-gradient {
    background: linear-gradient(120deg, #fff 0%, #C9DDF0 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .82rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--primary-300);
    padding: 7px 16px; border-radius: var(--radius-full);
    background: rgba(111,168,255,.14); border: 1px solid rgba(111,168,255,.35);
    margin-bottom: 20px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: all .25s ease;
}
.eyebrow:hover {
    background: rgba(111,168,255,.2);
    border-color: rgba(111,168,255,.5);
    transform: translateY(-1px);
}
.eyebrow .ico { width: 15px; height: 15px; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; }

/* 入场动画: 改用 CSS 自动播放(fill-mode both), 不再依赖 JS 加 .visible 才显示,
   避免 JS 未触发时整块内容永久 opacity:0 导致页面"空白"。JS 的 .visible 仍兼容。 */
.fade-in {
    opacity: 0;
    transform: translateY(26px);
    animation: fadeInUp .7s var(--ease) both;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

.section-padding { padding: 96px 0; }

/* ==================== Buttons ==================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 9px; padding: 13px 30px; font-size: 1rem; font-weight: 600;
    border-radius: var(--radius); border: 2px solid transparent;
    cursor: pointer; transition: var(--transition);
    text-decoration: none; line-height: 1.4; white-space: nowrap; font-family: inherit;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--primary-300); outline-offset: 2px; }
.btn .ico { width: 18px; height: 18px; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    color: #fff; box-shadow: 0 8px 20px rgba(0,89,168,.28);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-700) 0%, #002B58 100%); color: #fff; box-shadow: var(--shadow-blue); }

.btn-outline {
    background: rgba(255,255,255,.08); color: #fff;
    border-color: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.btn-outline:hover { background: #fff; color: var(--primary-700); border-color: #fff; }

.btn-outline-primary { background: var(--bg-white); color: var(--primary-700); border-color: var(--primary-100); }
.btn-outline-primary:hover { background: var(--primary-050); color: var(--primary-700); border-color: var(--primary); }

.btn-lg { padding: 15px 38px; font-size: 1.05rem; }
.btn-sm { padding: 9px 20px; font-size: .9rem; }

/* ==================== SVG Icon System ==================== */
.ico {
    width: 24px; height: 24px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.ico-fill { fill: currentColor; stroke: none; }

/* ==================== Site Header ==================== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
    height: var(--header-height);
}
.site-header.scrolled {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}
.header-inner {
    max-width: var(--container-max); margin: 0 auto; height: 100%;
    padding: 0 20px; display: flex; align-items: center;
    justify-content: space-between; gap: 22px;
}
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { width: auto; height: 44px; max-width: 232px; object-fit: contain; object-position: left center; }

/* 三段式布局：Logo | 居中菜单 | 搜索（原右侧 CTA 已移除） */
.main-nav { height: 100%; flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: 4px; height: 100%; }
.nav-item { height: auto; }
.nav-item > a {
    display: flex; align-items: center; padding: 9px 16px; border-radius: 9px;
    color: var(--text-body); font-weight: 500; font-size: .96rem; line-height: 1.4;
    position: relative; white-space: nowrap;
    transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-item:hover > a { color: var(--primary-700); background: var(--primary-050); }
.nav-item.active > a { color: var(--primary-700); font-weight: 600; background: var(--primary-050); }

/* 头部右侧操作区 */
.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.header-actions .site-search { position: relative; display: flex; align-items: center; }
.header-actions .site-search input {
    width: 156px; max-width: 32vw; padding: 8px 34px 8px 14px;
    border: 1px solid var(--border); border-radius: 999px; background: #fff;
    font-size: .82rem; color: var(--text-dark); outline: none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.header-actions .site-search input::placeholder { color: var(--text-light); }
.header-actions .site-search input:focus {
    border-color: var(--primary-300); box-shadow: 0 0 0 3px rgba(0,72,144,.08);
}
.header-actions .site-search button {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--text-light);
    display: flex; padding: 5px; transition: color .2s var(--ease);
}
.header-actions .site-search button:hover { color: var(--primary); }
.header-actions .site-search button .ico { width: 16px; height: 16px; }

/* 头部右侧「联系我们」主按钮（位于 .header-actions 内） */
.nav-cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 22px; margin-left: 0;
    font-size: .92rem; font-weight: 600; line-height: 1; white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,89,168,.24);
    flex-shrink: 0;
}
.nav-cta:hover { box-shadow: 0 8px 20px rgba(0,89,168,.3); }
.site-search { flex-shrink: 0; }

/* Hamburger */
.hamburger {
    display: none; flex-direction: column; gap: 5px; background: none;
    border: none; cursor: pointer; padding: 8px;
}
.hamburger .bar { width: 24px; height: 2px; background: var(--text-dark); border-radius: 2px; transition: var(--transition-fast); }
.hamburger.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-overlay { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(11,27,51,.5); z-index: 999; }
.mobile-menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: 80%; max-width: 330px;
    background: var(--bg-white); z-index: 1001; transform: translateX(100%);
    transition: transform .3s var(--ease); padding: 80px 24px 24px; box-shadow: var(--shadow-lg);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-nav-list li { margin-bottom: 4px; }
.mobile-nav-list a {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    color: var(--text-body); font-weight: 500; border-radius: var(--radius-sm);
}
.mobile-nav-list a:hover, .mobile-nav-list li.active a { background: var(--primary-050); color: var(--primary-700); }
.main-content { padding-top: var(--header-height); }

/* ==================== Home Hero ==================== */
@keyframes index-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}
.home-hero {
    min-height: 72vh;
    display: flex; align-items: center;
    background: linear-gradient(135deg, #003A75 0%, #004890 52%, #002B58 100%);
    position: relative; overflow: hidden; padding: 90px 0 80px;
}
.home-hero::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background-image:
        radial-gradient(60% 50% at 18% 22%, rgba(120,170,255,.35) 0%, transparent 60%),
        radial-gradient(50% 50% at 85% 75%, rgba(77,141,255,.4) 0%, transparent 60%);
    pointer-events: none;
}
/* Hero 浮动光晕 */
.home-hero::after {
    content: '';
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(111,168,240,.2) 0%, rgba(0,72,144,.06) 35%, transparent 70%);
    top: -120px; right: -100px;
    animation: index-orb 9s ease-in-out infinite alternate;
}
@keyframes index-orb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-20px, 24px) scale(1.06); }
}
.home-hero .hero-grid-bg {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}
.home-hero-content {
    position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto;
    padding: 0 20px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
    align-items: center; width: 100%;
    animation: index-fade-up .7s ease-out both;
}
.home-hero-text h1 {
    color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.5rem); line-height: 1.15;
    margin-bottom: 22px; letter-spacing: -.02em; font-weight: 800;
}
.home-hero-text p { color: rgba(255,255,255,.9); font-size: clamp(1.02rem, 1.8vw, 1.2rem); margin-bottom: 32px; line-height: 1.85; max-width: 520px; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-buttons .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    box-shadow: 0 8px 24px rgba(0,72,144,.35), 0 2px 6px rgba(0,0,0,.1);
    transition: all .3s ease;
}
.hero-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,72,144,.45), 0 4px 12px rgba(0,0,0,.12);
}
.hero-buttons .btn-outline:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.5);
}
.hero-trust { margin-top: 36px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.7); font-size: .88rem; animation: index-fade-up .7s ease .3s both; }
.hero-trust .divider { width: 1px; height: 28px; background: rgba(255,255,255,.25); }
.hero-trust strong { color: #fff; font-weight: 600; }

/* Hero visual: glass product panel */
.home-hero-visual { position: relative; }
.hero-panel {
    position: relative; z-index: 2;
    background: rgba(255,255,255,.11); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(7,25,55,.42), inset 0 1px 0 rgba(255,255,255,.1);
    overflow: hidden;
    animation: heroFloat 7s ease-in-out infinite;
    transition: all .4s ease;
}
.home-hero-visual:hover .hero-panel {
    box-shadow: 0 28px 68px rgba(7,25,55,.5), inset 0 1px 0 rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.3);
}
.hero-panel-bar {
    display: flex; align-items: center; gap: 7px; padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.16);
}
.hero-panel-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); }
.hero-panel-bar .dot:nth-child(1){ background:#FF6B6B; }
.hero-panel-bar .dot:nth-child(2){ background:#FFD166; }
.hero-panel-bar .dot:nth-child(3){ background:#51E08A; }
.hero-panel-title { margin-left: 8px; color: rgba(255,255,255,.85); font-size: .85rem; font-weight: 600; }
.hero-panel-body { padding: 22px; display: grid; gap: 14px; }
.hero-stat {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius); padding: 14px 16px; color: #fff;
}
.hero-stat .ico { width: 26px; height: 26px; color: #A9CBE8; }
.hero-stat strong { display: block; font-size: .95rem; font-weight: 600; }
.hero-stat em { font-style: normal; font-size: .8rem; color: rgba(255,255,255,.65); }
.hero-chat { display: grid; gap: 8px; }
.hero-chat-bubble {
    display: flex; align-items: center; gap: 8px; align-self: flex-start;
    background: rgba(255,255,255,.14); color: #fff; font-size: .86rem;
    padding: 10px 14px; border-radius: 12px 12px 12px 4px; max-width: 90%;
}
.hero-chat-bubble .ico { width: 16px; height: 16px; color: #FFD166; }
.hero-chat-reply {
    justify-self: flex-end; background: #fff; color: var(--text-dark);
    font-size: .86rem; padding: 10px 14px; border-radius: 12px 12px 4px 12px; max-width: 90%;
    box-shadow: var(--shadow-sm);
}
.hero-chip {
    position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
    background: #fff; color: var(--primary-700); font-size: .82rem; font-weight: 600;
    padding: 9px 15px; border-radius: var(--radius-full); box-shadow: var(--shadow-md);
}
.hero-chip .ico { width: 16px; height: 16px; }
.hero-chip--1 { top: -18px; left: -22px; animation: heroFloat 6s ease-in-out infinite; }
.hero-chip--2 { bottom: -16px; right: -10px; animation: heroFloat 6s ease-in-out infinite 1.2s; }
@keyframes heroFloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }

/* ==================== Section Titles ==================== */
.section-title {
    text-align: center; margin-bottom: 14px; position: relative; letter-spacing: .01em;
}
.section-title::after {
    content: ''; display: block; width: 52px; height: 3px; margin: 18px auto 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-300));
}
.section-subtitle {
    text-align: center; color: var(--text-gray); margin-bottom: 56px; font-size: 1.05rem;
    max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.8;
}

/* ==================== Business Cards ==================== */
.business-section { position: relative; }
.business-section::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-200), transparent);
}
.business-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.business-card {
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 44px 38px; transition: var(--transition); position: relative; overflow: hidden;
}
.business-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-300));
    transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.business-card:hover { border-color: var(--primary-200); box-shadow: 0 18px 44px rgba(0,72,144,.15), 0 6px 18px rgba(15,31,51,.06); transform: translateY(-8px); }
.business-card:hover::before { transform: scaleX(1); }
.business-icon {
    width: 68px; height: 68px; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary-100), var(--primary-050));
    border: 1px solid var(--primary-300);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-600); margin-bottom: 22px; transition: all .3s ease;
    box-shadow: 0 6px 18px rgba(0,72,144,.1);
}
.business-icon .ico { width: 30px; height: 30px; }
.business-card:hover .business-icon { background: linear-gradient(135deg, var(--primary), var(--primary-700)); color: #fff; border-color: transparent; transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 28px rgba(0,72,144,.38); }
.business-card h3 { font-size: 1.38rem; margin-bottom: 12px; font-weight: 700; color: var(--text-dark); }
.business-card p { color: var(--text-gray); margin-bottom: 20px; }
.product-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-600); font-weight: 600; font-size: .95rem; }
.product-link .ico { width: 16px; height: 16px; }
.product-link::after { content: '\2192'; display: inline-block; margin-left: 6px; transition: transform .25s var(--ease); }
.business-card:hover .product-link::after, .product-card:hover .product-link::after { transform: translateX(4px); }
.business-card:hover .product-link, .product-card:hover .product-link { gap: 10px; }

/* ==================== About Summary ==================== */
.about-summary-section {
    background:
        radial-gradient(ellipse 70% 45% at 15% 0%, rgba(0,72,144,.03) 0%, transparent 60%),
        var(--bg-tint);
    position: relative;
}
.about-summary-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
.about-summary-text h2 { margin-bottom: 20px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--text-dark); }
.about-summary-text p { color: var(--text-body); margin-bottom: 24px; }
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.stat-item {
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px 22px; text-align: center; transition: all .3s cubic-bezier(.22,1,.36,1);
    position: relative; overflow: hidden;
}
.stat-item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-300));
    transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.stat-item:hover { box-shadow: 0 12px 32px rgba(0,72,144,.12); transform: translateY(-5px); border-color: var(--primary-200); }
.stat-item:hover::before { transform: scaleX(1); }
.stat-number { display: block; font-size: 1.85rem; font-weight: 800; color: var(--primary-700); line-height: 1.2; letter-spacing: -.01em; }
.stat-label { font-size: .9rem; color: var(--text-gray); margin-top: 4px; }

/* ==================== Products Grid ==================== */
/* Products section bg */
.products-grid-wrapper > .container { position: relative; }
.products-grid-wrapper::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,72,144,.15), transparent);
}
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.product-card {
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 34px 24px; transition: var(--transition); cursor: pointer; position: relative; overflow: hidden;
    text-align: center;
    display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--primary-200); box-shadow: 0 16px 40px rgba(0,72,144,.13), 0 6px 16px rgba(15,31,51,.07); transform: translateY(-6px); }
.product-icon {
    width: 76px; height: 76px; border-radius: 20px;
    background: linear-gradient(135deg, var(--primary-100), var(--primary-050));
    border: 1px solid rgba(0,72,144,.18);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-600); margin: 0 auto 20px; transition: var(--transition-fast);
    box-shadow: 0 8px 18px rgba(0,72,144,.14);
}
.product-icon .ico { width: 40px; height: 40px; }
.product-card:hover .product-icon { background: linear-gradient(135deg, var(--primary), var(--primary-700)); color: #fff; border-color: transparent; transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 26px rgba(0,72,144,.34); }
.product-card h4 { font-size: 1.2rem; margin-bottom: 10px; font-weight: 700; color: var(--text-dark); }
.product-card p { color: var(--text-gray); font-size: .92rem; margin-bottom: 16px; }
.product-card .product-link { font-size: .9rem; margin-top: auto; align-self: center; padding-top: 6px; }

/* Empty-state icon (shared with backend .empty-state) */
.empty-state-icon .ico { width: 46px; height: 46px; opacity: .35; margin: 0 auto; }

/* ==================== Advantages (dark) ==================== */
.advantages-section {
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--primary-darker) 100%);
    color: #fff; position: relative; overflow: hidden;
}
.advantages-section::after {
    content: ''; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(77,141,255,.3) 0%, transparent 70%); pointer-events: none;
}
.advantages-section .section-title { color: #fff; }
.advantages-section .section-title::after { background: linear-gradient(90deg, var(--primary-300), #fff); }
.advantages-section .section-subtitle { color: rgba(255,255,255,.72); }
.advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; z-index: 1; }
.advantage-item { text-align: center; padding: 24px 14px; transition: all .3s ease; }
.advantage-icon {
    width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    border: 1px solid rgba(159,196,255,.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-300); transition: all .3s ease;
}
.advantage-icon .ico { width: 32px; height: 32px; }
.advantage-item:hover .advantage-icon { background: linear-gradient(135deg, var(--primary), var(--primary-600)); border-color: transparent; color: #fff; transform: scale(1.1) translateY(-2px); box-shadow: 0 12px 28px rgba(0,72,144,.45); }
.advantage-item h4 { color: #fff; font-size: 1.08rem; margin-bottom: 8px; }
.advantage-item p { color: rgba(255,255,255,.7); font-size: .92rem; margin: 0; }

/* ==================== CTA ==================== */
.cta-section {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary) 50%, var(--primary-400) 100%);
    padding: 72px 0; text-align: center; position: relative; overflow: hidden;
}
/* CTA — consolidated */
.cta-section::before {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.14) 0%, transparent 55%);
    pointer-events: none;
}
.cta-section::after {
    content: '';
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 65%);
    pointer-events: none;
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section h2 { color: #fff; margin-bottom: 16px; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; }
.cta-section p { color: rgba(255,255,255,.9); font-size: 1.1rem; margin-bottom: 34px; }
.cta-section .btn-primary {
    background: #fff; color: var(--primary-700); font-weight: 700;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    transition: all .3s ease;
}
.cta-section .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.cta-section .btn-primary:active { transform: translateY(-1px); }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-buttons .btn-primary { background: #fff; color: var(--primary-700); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.cta-buttons .btn-primary:hover { background: var(--primary-050); color: var(--primary-700); }
.cta-buttons .btn-outline { border-color: rgba(255,255,255,.6); }
.cta-contact-info { margin-top: 26px; color: rgba(255,255,255,.82); font-size: .95rem; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.cta-contact-info span { display: inline-flex; align-items: center; gap: 7px; }
.cta-contact-info .ico { width: 17px; height: 17px; }

/* ==================== Inner Page Hero ==================== */
.page-hero {
    background: linear-gradient(135deg, #003A75 0%, #004890 52%, #002B58 100%);
    padding: 128px 0 88px; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(140,180,235,.20) 0%, transparent 42%);
}
/* Page Hero 浮动光晕 */
.page-hero::after {
    content: '';
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    width: 440px; height: 440px;
    background: radial-gradient(circle, rgba(111,168,240,.2) 0%, rgba(0,72,144,.06) 35%, transparent 70%);
    top: -100px; right: -80px;
    animation: ph-orb 9s ease-in-out infinite alternate;
}
@keyframes ph-orb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-18px, 20px) scale(1.06); }
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: 16px; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; animation: fade-up .6s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.page-hero p { color: rgba(255,255,255,.9); font-size: 1.12rem; max-width: 600px; margin: 0 auto; line-height: 1.7; animation: fade-up .6s ease .15s both; }

/* ==================== About Page ==================== */
.about-content { max-width: 900px; margin: 0 auto; }

/* About Block — 主内容区 */
.about-block {
    margin-bottom: 48px;
}
.about-heading {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--text-dark); font-weight: 800;
    margin-bottom: 24px !important;
    padding-bottom: 14px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--primary), transparent) 1;
    position: relative;
}
.about-heading::after {
    content: ''; position: absolute; bottom: -3px; left: 0; width: 60px; height: 3px;
    background: var(--primary); border-radius: 2px;
}
.about-body > p {
    color: var(--text-body);
    font-size: 1.04rem; line-height: 1.9; margin-bottom: 18px;
    text-indent: 0;
}
.about-body > p strong { color: var(--primary-700); font-weight: 700; }

/* Mission Block — 视觉独立区块 */
.about-mission-block {
    background:
        linear-gradient(135deg, var(--primary-tint) 0%, rgba(0,72,144,.03) 100%);
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}
.about-mission-block::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-300));
    opacity: .7;
}
.about-mission-heading {
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    color: var(--primary-700); font-weight: 700;
    margin-bottom: 16px !important;
    display: flex; align-items: center;
}
.about-mission-desc {
    color: var(--text-body);
    font-size: 1.08rem; line-height: 1.75;
    margin-bottom: 20px;
    font-style: italic;
    color: var(--primary-600);
}
.about-mission-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 14px;
}
.about-mission-list li {
    display: flex; align-items: baseline; gap: 10px;
    padding-left: 0; color: var(--text-body);
    font-size: .98rem; line-height: 1.65;
    position: relative;
}
.about-mission-list li::before {
    content: none !important;
}
.mission-label {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: #fff;
    font-size: .82rem; font-weight: 700;
    padding: 3px 12px; border-radius: 20px;
    white-space: nowrap; flex-shrink: 0;
}

/* Legacy about content styles preserved for DB content */
.about-content h2 { margin: 40px 0 18px; }
.about-content h3 { margin: 28px 0 12px; }
.about-content p { color: var(--text-body); }
.about-content ul { margin: 0 0 1em 0; padding-left: 0; }
.about-content li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--text-body); }
.about-content li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }

/* (about-split 图文布局已移除 — 配图已删除) */

.about-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.value-card {
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 38px 30px 34px; transition: all .35s cubic-bezier(.22,1,.36,1);
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.value-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-300));
    transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.value-card:hover { box-shadow: 0 18px 44px rgba(0,72,144,.15), 0 6px 18px rgba(15,31,51,.06); transform: translateY(-8px); border-color: var(--primary-200); }
.value-card:hover::before { transform: scaleX(1); }
.value-icon {
    width: 64px; height: 64px; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary-100), var(--primary-050)); border: 1px solid var(--primary-300);
    display: flex; align-items: center; justify-content: center; color: var(--primary-600);
    margin-bottom: 20px; transition: all .3s ease;
}
.value-icon .ico { width: 30px; height: 30px; }
.value-card:hover .value-icon { background: linear-gradient(135deg, var(--primary), var(--primary-700)); color: #fff; border-color: transparent; transform: translateY(-3px) scale(1.08); box-shadow: 0 12px 26px rgba(0,72,144,.38); }
.value-card h4 { color: var(--primary-700); margin-bottom: 12px; font-size: 1.22rem; font-weight: 700; }
.value-card p { color: var(--text-gray); margin: 0; font-size: .96rem; line-height: 1.7; }

/* ==================== WorkBuddy Page ==================== */
.wb-intro-box { background: linear-gradient(135deg, var(--primary-050), #fff); border-radius: var(--radius-lg); padding: 48px 40px; margin-bottom: 56px; border: 1px solid var(--primary-100); }
.wb-intro-box h2, .wb-intro-box h3 { color: var(--primary-700); margin-bottom: 14px; }
.wb-intro-box p { color: var(--text-body); margin: 0 0 1em; }
.wb-intro-box ul { margin: 0; padding: 0; display: grid; gap: 12px; }
.wb-intro-box li { position: relative; padding-left: 32px; color: var(--text-body); }
.wb-intro-box li::before {
    content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
    border-radius: 50%; background: var(--success-bg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wb-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.wb-feature-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; transition: var(--transition); }
.wb-feature-card:hover { box-shadow: var(--shadow-blue); transform: translateY(-4px); border-color: var(--primary-100); }
.wb-feature-icon { width: 50px; height: 50px; border-radius: var(--radius-sm); background: var(--primary-050); border: 1px solid var(--primary-100); display: flex; align-items: center; justify-content: center; color: var(--primary-600); margin-bottom: 16px; }
.wb-feature-icon .ico { width: 24px; height: 24px; }
.wb-feature-card h4 { color: var(--text-dark); margin-bottom: 8px; }
.wb-feature-card p { color: var(--text-gray); font-size: .92rem; margin: 0; }

.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 880px; margin: 0 auto; align-items: start; }
.pricing-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 34px; position: relative; transition: var(--transition); }
.pricing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pricing-card.highlighted { border: 2px solid var(--primary); box-shadow: var(--shadow-blue-lg); }
.pricing-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--primary-300)); color: #fff; padding: 5px 26px; border-radius: var(--radius-full); font-size: .85rem; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,72,144,.35); }
.pricing-name { font-size: 1.4rem; margin-bottom: 8px; color: var(--text-dark); }
.pricing-price { display: flex; align-items: baseline; gap: 4px; margin: 16px 0 4px; flex-wrap: wrap; }
.price-original { color: var(--text-light); text-decoration: line-through; font-size: .95rem; }
.price-value { font-size: 2.4rem; font-weight: 800; color: var(--primary-700); line-height: 1; }
.price-unit { color: var(--text-gray); font-size: .95rem; }
.price-placeholder { font-size: 1.6rem; font-weight: 800; color: var(--primary-700); }
.pricing-features { margin: 24px 0 30px; border-top: 1px solid var(--border-light); padding-top: 20px; }
.pricing-features li { position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--text-body); font-size: .95rem; }
.pricing-features li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-050); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155FC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155FC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ==================== Contact Page ==================== */
/* 非对称侧栏+主区布局：左侧紧凑信息栏(约38%)，右侧表单主区(约62%) */
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.35fr; gap: 40px; align-items: stretch; }
.contact-info-card { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); border-radius: var(--radius-lg); padding: 42px 32px; color: #fff; display: flex; flex-direction: column; height: 100%; }
.contact-info-card h3 { color: #fff; margin-bottom: 6px; font-size: 1.3rem; }
.contact-info-card .contact-sub { color: #fff; font-size: .92rem; margin-bottom: 22px; line-height: 1.65; }
.info-item { display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start; }
.info-icon { width: 50px; height: 50px; background: rgba(255,255,255,.15); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; color: #fff; }
.info-icon .ico { width: 24px; height: 24px; }
.info-detail label { display: block; color: rgba(255,255,255,.7); font-size: .82rem; font-weight: 600; margin-bottom: 3px; letter-spacing: .03em; }
.info-detail p, .info-detail value, .info-detail a { color: rgba(255,255,255,.92); margin: 0; font-size: .98rem; }
.info-detail a:hover { color: #fff; }

/* 数据库联系方式补充内容（位于蓝色卡片内，强制白字以保证对比度） */
.contact-extra { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.contact-extra p { color: #fff !important; margin-bottom: 10px; line-height: 1.8; }
.contact-extra p:last-child { margin-bottom: 0; }
.contact-extra strong { color: #fff; }
.contact-extra a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.contact-form { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 32px; height: 100%; }
.contact-form h3 { color: var(--text-dark); margin-bottom: 6px; }
.contact-form .form-group { margin-bottom: 14px; }
.form-group label { display: block; font-weight: 600; font-size: .92rem; color: var(--text-dark); margin-bottom: 6px; }
.required { color: var(--danger); }
.form-control { width: 100%; padding: 12px 16px; font-size: .98rem; font-family: inherit; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-white); color: var(--text-body); transition: var(--transition-fast); outline: none; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0,72,144,.12); }
.form-control.form-error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(239,68,68,.1); }
textarea.form-control { resize: vertical; min-height: 96px; }
.error-msg { color: var(--danger); font-size: .82rem; margin-top: 4px; min-height: 1px; }
.btn-submit { width: 100%; padding: 14px; }
.btn-submit .ico { width: 18px; height: 18px; }

/* Toast */
.toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-20px); z-index: 2000; padding: 14px 24px; border-radius: var(--radius); font-size: .95rem; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; transition: all .35s var(--ease); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { background: var(--success); color: #fff; }
.toast-error { background: var(--danger); color: #fff; }

/* ==================== Footer ==================== */
.site-footer { margin-top: 0; }
.footer-top { background: var(--ink-900); padding: 64px 0 44px; color: rgba(255,255,255,.72); }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-wordmark { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 14px; letter-spacing: .01em; }
.footer-desc { color: rgba(255,255,255,.62); font-size: .92rem; line-height: 1.8; max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; position: relative; padding-bottom: 10px; }
.footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-300)); }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: rgba(255,255,255,.68); font-size: .92rem; }
.footer-col ul a:hover { color: #fff; padding-left: 4px; }
.contact-list li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.68); font-size: .92rem; margin-bottom: 10px; }
.contact-list .ico { width: 18px; height: 18px; color: var(--primary-300); flex: none; }
.contact-list a { color: rgba(255,255,255,.68); }
.contact-list a:hover { color: #fff; }
.footer-bottom { background: #08152A; padding: 20px 0; text-align: center; color: rgba(255,255,255,.5); font-size: .86rem; border-top: 1px solid rgba(255,255,255,.06); }
.footer-bottom a { color: rgba(255,255,255,.6); }
.footer-bottom a:hover { color: #fff; }

/* ==================== Responsive ==================== */
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .section-padding { padding: 108px 0; }
}
@media (min-width: 992px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .products-grid { grid-template-columns: repeat(4, 1fr); }
    .advantages-grid { grid-template-columns: repeat(4, 1fr); }
    .about-summary-grid { grid-template-columns: 1.3fr 1fr; }
    .contact-layout { grid-template-columns: 0.85fr 1.35fr; }
    .business-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .about-values-grid { grid-template-columns: repeat(3, 1fr); }
    .wb-feature-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1.8fr 1fr 1fr; }
}
@media (max-width: 991px) {
    .home-hero-content { grid-template-columns: 1fr; gap: 44px; text-align: center; }
    .home-hero-text p { margin-left: auto; margin-right: auto; }
    .hero-buttons, .hero-trust { justify-content: center; }
    .home-hero-visual { max-width: 460px; margin: 0 auto; }
    .about-summary-grid { grid-template-columns: 1fr; gap: 36px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .advantages-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-layout { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
    .about-values-grid, .wb-feature-grid { grid-template-columns: 1fr; }
    .about-mission-block { padding: 28px 24px; }
    .mission-label { font-size: .76rem; padding: 2px 10px; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
}
@media (max-width: 767px) {
    .main-nav, .nav-list, .nav-cta { display: none; }
    .hamburger { display: flex; }
    .logo-img { width: auto; height: 34px; max-width: 180px; }
    .section-padding { padding: 64px 0; }
    .business-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .advantages-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .home-hero { padding: 60px 0; }
    .page-hero { padding: 110px 0 60px; }
    .news-hero { min-height: 320px; }
    .news-hero-inner { padding: 0 20px 36px; }
    .news-hero-title { font-size: clamp(1.45rem, 6vw, 2rem); }
    .news-related .section-head { margin-bottom: 20px; }
    .about-mission-block { padding: 24px 20px; }
    .about-mission-list li { flex-wrap: wrap; }
    .value-card { padding: 30px 22px 26px; }
    .contact-form, .contact-info-card { padding: 28px 22px; }
    .wb-intro-box { padding: 32px 24px; }
    .hero-chip--1 { left: -6px; } .hero-chip--2 { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* =====================================================
   以下为后台管理样式 (保留原样, 请勿修改)
   ===================================================== */
.admin-wrapper {
    /* 侧边栏为 position:fixed 浮层(不占网格轨道), 故此处不使用两列网格,
       主区通过 .admin-main 的 margin-left:260px 让位。
       若保留 grid:260px 1fr, 会导致 .admin-main 被错放到第1列(260px窄列), 内容塌陷不可见。 */
    display: block;
    min-height: 100vh;
}
.admin-sidebar {
    background: linear-gradient(180deg, var(--bg-dark) 0%, #111827 100%);
    color: #fff;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 100;
    overflow-y: auto;
}
.admin-sidebar-brand {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-sidebar-brand img {
    height: 30px; width: auto; max-width: 176px;
    background: #fff; padding: 6px 9px; border-radius: 8px;
}
.admin-sidebar-brand span {
    display: none;          /* 新版 Logo 已含"畅时科技"字样，避免重复 */
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-nav { padding: 16px 0; }
.admin-nav-label {
    padding: 8px 20px;
    font-size: 0.76rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.06em;
    margin-top: 12px;
}
.admin-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
}
.admin-nav a:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.admin-nav a.active {
    background: rgba(27,110,207,0.15);
    color: #fff;
    border-left-color: var(--primary);
}
.admin-nav a .nav-arrow { margin-left: auto; font-size: 0.78rem; opacity: 0.5; }

.admin-main {
    margin-left: 260px;
    background: var(--bg-light);
    min-height: 100vh;
}
.admin-topbar {
    background: var(--bg-white);
    padding: 14px 28px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
}
.admin-breadcrumb { font-size: 0.9rem; color: var(--text-gray); }
.admin-breadcrumb strong { color: var(--text-dark); }
.admin-user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}
.admin-user-menu a {
    color: var(--text-gray);
    font-size: 0.86rem;
}
.admin-user-menu a:hover { color: var(--primary); }

.admin-content { padding: 28px; }

/* Admin Cards 统计卡 */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 22px 24px;
    border: 1px solid var(--border);
}
.stat-card .stat-card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 12px;
}
.stat-card .stat-card-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.2;
}
.stat-card .stat-card-label {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-top: 2px;
}

/* Admin Panel 容器 */
.admin-panel {
    background: var(--bg-white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
}
.admin-panel-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-panel-header h3 { margin: 0; font-size: 1.1rem; }
.admin-panel-body { padding: 24px; }

/* Admin Table */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.admin-table th {
    background: var(--bg-lighter);
    padding: 11px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.admin-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.admin-table tr:hover td { background: var(--bg-lighter); }
.admin-table .status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}
.status-unread { background: var(--primary-light); color: var(--primary); }
.status-read { background: var(--bg-light); color: var(--text-gray); }
.status-replied { background: var(--success-bg); color: var(--success); }
.status-active { background: var(--success-bg); color: var(--success); }
.status-disabled { background: var(--bg-light); color: var(--text-light); }

.action-btns { display: flex; gap: 6px; }
.btn-action {
    padding: 5px 12px;
    font-size: 0.82rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-body);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-action:hover { background: var(--bg-lighter); border-color: var(--primary); color: var(--primary); }
.btn-action-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

/* Admin Form */
.admin-form { max-width: 720px; }
.admin-form .form-group { margin-bottom: 18px; }
.admin-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 5px;
}
.admin-form .form-control {
    font-size: 0.93rem;
    padding: 10px 14px;
}

/* Summernote 编辑器适配 - 正常流内宽高 */
.note-editor {
    margin-bottom: 16px;
    border-radius: var(--radius-sm) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}
.note-editor .note-editing-area {
    min-height: 220px !important;
}
.note-editor .note-editable {
    min-height: 200px !important;
    display: block !important;
}
/* 确保 summernote 替换后的 textarea 隐藏不会影响布局 */
textarea.summernote-editor {
    /* Summernote 会隐藏此元素,保留供降级使用 */
}

/* Admin Login Page */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--primary-darker) 100%);
    padding: 20px;
}
.login-box {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}
.login-box h2 { text-align: center; margin-bottom: 8px; }
.login-box .login-subtitle {
    text-align: center;
    color: var(--text-gray);
    margin-bottom: 28px;
    font-size: 0.92rem;
}
.login-box .btn { width: 100%; margin-top: 8px; }
.login-error {
    background: var(--danger-bg);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    margin-bottom: 16px;
    display: none;
}
.login-error.show { display: block; }

/* Empty State */
.empty-state {
    text-align: center;
    padding: 70px 20px;
    color: var(--text-light);
    background: var(--bg-lighter);
    border-radius: var(--radius-lg);
}
.empty-state-icon { font-size: 3rem; margin-bottom: 14px; opacity: 0.35; }

/* Pagination (admin) */
.pagination-admin {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 20px;
}
.pagination-admin a,
.pagination-admin span {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.87rem;
    color: var(--text-body);
}
.pagination-admin a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination-admin .active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Responsive Admin */
@media (max-width: 900px) {
    .admin-wrapper { grid-template-columns: 1fr; }
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 280px;
    }
    .admin-sidebar.show { transform: translateX(0); z-index: 200; }
    .admin-main { margin-left: 0; }
    .admin-hamburger { display: flex; }
    .admin-content { padding: 16px; }
}
.admin-hamburger {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--text-gray);
}
@media (max-width: 900px) { .admin-hamburger { display: flex; } }

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-box {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 28px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-light);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover { background: var(--danger-bg); color: var(--danger); }

/* Confirm Dialog */
.confirm-dialog { text-align: center; }
.confirm-dialog p { margin-bottom: 24px; font-size: 1rem; }
.confirm-btns { display: flex; gap: 12px; justify-content: center; }

/* ============================================================
   WorkBuddy 产品页 (参考 CodeBuddy work / pricing 视觉)
   ============================================================ */

/* ---------- Hero ---------- */
.wb-hero {
    position: relative;
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--primary-darker) 55%, var(--primary-700) 100%);
    padding: 120px 0 96px;
    overflow: hidden;
    text-align: center;
}
.wb-hero .hero-grid-bg {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 100%);
}
/* Hero 浮动光晕装饰 */
.wb-hero::before,
.wb-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.wb-hero::before {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(77,141,255,.22) 0%, rgba(0,72,144,.08) 40%, transparent 70%);
    top: -160px; right: -120px;
    animation: wb-float-orb 8s ease-in-out infinite alternate;
}
.wb-hero::after {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(111,168,240,.15) 0%, transparent 65%);
    bottom: -80px; left: -80px;
    animation: wb-float-orb 10s ease-in-out infinite alternate-reverse;
}
@keyframes wb-float-orb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20px, -24px) scale(1.08); }
}
@keyframes wb-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}
.wb-hero-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; animation: wb-fade-up .7s ease-out both; }
.wb-hero-eyebrow { animation-delay: .12s; }
.wb-hero-title { animation-delay: .22s; }
.wb-hero-sub { animation-delay: .34s; }
.wb-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--primary-300);
    padding: 7px 18px; border: 1px solid rgba(111,168,240,.45); border-radius: var(--radius-full);
    background: rgba(111,168,240,.14); margin-bottom: 24px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.wb-hero-title {
    color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.15;
    letter-spacing: -.02em; margin-bottom: 18px; font-weight: 800;
}
.wb-hero-grad {
    background: linear-gradient(90deg, #8EC5FF, #D4E8FF, #A8D2FF);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    background-size: 200% 100%;
    animation: wb-shimmer 4s ease-in-out infinite alternate;
}
@keyframes wb-shimmer {
    from { background-position: 0% center; }
    to { background-position: 100% center; }
}
.wb-hero-sub { color: rgba(255,255,255,.86); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.8; margin: 0 auto 30px; max-width: 660px; }
.wb-hero-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 34px; }
.wb-tag {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.94); font-size: .88rem; font-weight: 500;
    padding: 10px 18px; border-radius: var(--radius-full);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: all .25s ease;
}
.wb-tag:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.38); transform: translateY(-1px); }
.wb-tag .ico { width: 16px; height: 16px; color: var(--primary-300); flex-shrink: 0; }
.wb-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.wb-hero-actions .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    box-shadow: 0 8px 24px rgba(0,72,144,.35), 0 2px 6px rgba(0,0,0,.1);
    transition: all .3s ease;
}
.wb-hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,72,144,.45), 0 4px 12px rgba(0,0,0,.12);
}
.wb-hero-actions .btn-outline {
    background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.32);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.wb-hero-actions .btn-outline:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); color: #fff; transform: translateY(-2px); }

/* ---------- 通用区块标题 ---------- */
.wb-h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--text-dark); letter-spacing: -.01em; margin-bottom: 16px; line-height: 1.25; }
.wb-h2-center { font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--text-dark); letter-spacing: -.01em; margin-bottom: 14px; line-height: 1.25; text-align: center; }
.wb-sec-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.wb-sec-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.wb-sec-head .section-subtitle { margin-bottom: 0; }
@media (max-width: 767px) {
    .wb-sec-head { margin-bottom: 40px; }
}

/* ---------- 专家团概览 ---------- */
.wb-overview-sec {
    background: var(--bg-white);
    position: relative;
}
.wb-overview-sec::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-200), transparent);
}
.wb-overview { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.wb-overview-text .wb-lead { color: var(--text-body); font-size: 1.08rem; line-height: 1.85; margin-bottom: 32px; }
.wb-stat-row { display: flex; gap: 40px; flex-wrap: wrap; }
.wb-stat { display: flex; flex-direction: column; gap: 4px; }
.wb-stat-num { font-size: 2.2rem; font-weight: 800; color: var(--primary-700); line-height: 1.1; letter-spacing: -.02em; }
.wb-stat { transition: transform .25s ease; }
.wb-stat:hover { transform: scale(1.04); }
.wb-stat:hover .wb-stat-num { color: var(--primary); }
.wb-stat-plus { font-size: 1.3rem; vertical-align: super; }
.wb-stat-label { font-size: .92rem; color: var(--text-gray); }
.wb-overview-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
.wb-mini-card {
    display: flex; gap: 18px; align-items: flex-start;
    background: linear-gradient(135deg, var(--primary-tint), #fff 120%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius); padding: 24px; transition: all .3s ease;
}
.wb-mini-card:hover { border-color: var(--primary-200); box-shadow: 0 8px 28px rgba(0,72,144,.12); transform: translateY(-4px); }
.wb-mini-icon {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary), var(--primary-700));
    color: #fff; display: flex; align-items: center; justify-content: center;
}
.wb-mini-icon .ico { width: 24px; height: 24px; }
.wb-mini-card h4 { color: var(--text-dark); margin-bottom: 4px; font-size: 1.05rem; }
.wb-mini-card p { color: var(--text-gray); font-size: .92rem; margin: 0; line-height: 1.6; }
.wb-intro-rich { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border-light); }
.wb-intro-rich p { color: var(--text-body); line-height: 1.85; }

/* ---------- 全场景智能体 ---------- */
.wb-scenarios {
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(0,72,144,.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0,72,144,.03) 0%, transparent 55%),
        var(--bg-light);
    position: relative;
}
.wb-scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.wb-scenario-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px 30px; transition: all .35s cubic-bezier(.22,1,.36,1);
    position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.wb-scenario-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-300));
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.wb-scenario-card:hover { box-shadow: 0 20px 48px rgba(0,72,144,.15), 0 8px 20px rgba(15,31,51,.06); transform: translateY(-8px); border-color: var(--primary-200); }
.wb-scenario-card:hover::before { transform: scaleX(1); }
.wb-scenario-icon {
    width: 62px; height: 62px; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary-100), var(--primary-050)); border: 1px solid var(--primary-300);
    color: var(--primary-600); display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; transition: all .3s ease;
    flex-shrink: 0;
}
.wb-scenario-icon .ico { width: 30px; height: 30px; }
.wb-scenario-card:hover .wb-scenario-icon { background: linear-gradient(135deg, var(--primary), var(--primary-700)); color: #fff; border-color: transparent; transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 24px rgba(0,72,144,.35); }
.wb-scenario-card h3 { color: var(--text-dark); font-size: 1.28rem; margin-bottom: 14px; line-height: 1.35; font-weight: 700; }
.wb-sce-who { color: var(--text-body); font-size: .9rem; margin-bottom: 12px; line-height: 1.6; }
.wb-sce-who strong { color: var(--primary-700); }
.wb-sce-desc { color: var(--text-gray); font-size: .95rem; line-height: 1.75; margin-bottom: 18px; }
.wb-sce-tasks { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px dashed var(--border); display: grid; gap: 11px; }
.wb-sce-tasks li { position: relative; padding-left: 26px; color: var(--text-body); font-size: .92rem; line-height: 1.55; }
.wb-sce-tasks li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%;
    background: var(--primary-100);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155FC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155FC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: background .2s ease;
}
.wb-sce-tasks li:hover::before { background: var(--primary-300); }
.wb-features-rich { margin-top: 48px; }
.wb-features-rich p { color: var(--text-body); line-height: 1.85; }

/* ---------- 定价方案 ---------- */
.wb-pricing {
    background:
        radial-gradient(ellipse 70% 45% at 50% 100%, rgba(0,72,144,.03) 0%, transparent 60%),
        var(--bg-white);
}
.wb-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.wb-plan-card {
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 36px 30px 32px; position: relative; transition: all .35s cubic-bezier(.22,1,.36,1);
    display: flex; flex-direction: column;
}
.wb-plan-card:hover { box-shadow: 0 16px 40px rgba(0,72,144,.13), 0 6px 16px rgba(15,31,51,.07); transform: translateY(-6px); border-color: var(--primary-200); }
.wb-plan-card.is-popular {
    border: 2px solid var(--primary);
    box-shadow: 0 20px 52px rgba(0,72,144,.22), 0 8px 20px rgba(15,31,51,.08);
    background: linear-gradient(180deg, var(--primary-tint) 0%, var(--bg-white) 35%);
    position: relative;
    z-index: 1;
}
.wb-plan-card.is-popular:hover { transform: translateY(-8px); box-shadow: 0 28px 64px rgba(0,72,144,.28), 0 10px 28px rgba(15,31,51,.1); }
.wb-plan-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--primary-300)); color: #fff;
    padding: 5px 22px; border-radius: var(--radius-full); font-size: .82rem; font-weight: 700;
    white-space: nowrap; box-shadow: 0 6px 16px rgba(0,72,144,.35);
}
.wb-plan-name { font-size: 1.35rem; color: var(--text-dark); margin-bottom: 6px; text-align: center; }
.wb-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 22px; min-height: 52px; }
.wb-price-old { color: var(--text-gray); text-decoration: line-through; font-size: .95rem; }
.wb-price-now { font-size: 2.8rem; font-weight: 800; color: var(--primary-700); line-height: 1; letter-spacing: -.02em; }
.wb-price-consult { font-size: 1.8rem; }
.wb-price-unit { color: var(--text-gray); font-size: .95rem; }
.wb-plan-features { list-style: none; margin: 0 0 28px; padding: 22px 0 0; border-top: 1px solid var(--border-light); display: grid; gap: 13px; flex: 1; }
.wb-plan-features li { position: relative; padding-left: 28px; color: var(--text-body); font-size: .94rem; line-height: 1.5; }
.wb-plan-features li::before {
    content: ''; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%;
    background: var(--primary-100);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155FC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155FC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wb-plan-cta { width: 100%; justify-content: center; margin-top: auto; }

/* ---------- 合作优势 (标题白字适配) ---------- */
.advantages-section .wb-sec-head .eyebrow-light {
    border-color: rgba(159,196,255,.4); color: #A9CBE8; background: rgba(159,196,255,.12);
}

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
    .wb-overview { grid-template-columns: 1fr; gap: 36px; }
    .wb-scenario-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .wb-hero { padding: 96px 0 72px; }
    .wb-scenario-grid { grid-template-columns: 1fr; }
    .wb-stat-row { gap: 28px; }
    .wb-plan-grid { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 480px) {
    .wb-stat-row { gap: 20px; }
    .wb-stat-num { font-size: 1.7rem; }
    .wb-hero-tags { gap: 8px; }
    .wb-tag { font-size: .82rem; padding: 7px 12px; }
}

/* =====================================================
   新闻中心 / 知识库 (新增栏目)
   ===================================================== */

/* 区块简介 */
.news-intro {
    max-width: 820px; margin: 0 auto 48px; text-align: center;
    font-size: 1.05rem; line-height: 1.9; color: var(--text-gray);
}

/* ---------- 新闻卡片网格 ---------- */
.news-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.news-card {
    display: flex; flex-direction: column;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    transition: var(--transition); text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm);
}
.news-card:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-blue); transform: translateY(-6px);
}
.news-card-cover {
    position: relative; min-height: 180px; aspect-ratio: 16 / 9; background: var(--primary-tint); overflow: hidden;
}
.news-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.news-card:hover .news-card-cover img { transform: scale(1.06); }
.news-card-cover-ph {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--primary-100), var(--primary-050));
}
.news-card-date {
    position: absolute; left: 12px; bottom: 12px;
    background: rgba(11,27,51,.72); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    font-size: .78rem; padding: 4px 12px; border-radius: var(--radius-full); letter-spacing: .02em;
}
.news-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.news-card-body h4 { font-size: 1.12rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; line-height: 1.45; }
.news-card-body p { color: var(--text-gray); font-size: .92rem; line-height: 1.7; margin-bottom: 16px; flex: 1; }
.news-card-more {
    font-size: .9rem; font-weight: 600; color: var(--primary-600);
    display: inline-flex; align-items: center; gap: 4px;
}
.news-card:hover .news-card-more { gap: 8px; }

/* ---------- 详情页 ---------- */
.breadcrumb-nav { font-size: .9rem; color: var(--text-gray); margin-bottom: 8px; }
.breadcrumb-nav a { color: var(--primary-600); text-decoration: none; }
.breadcrumb-nav a:hover { text-decoration: underline; }
.breadcrumb-nav span { color: var(--text-dark); }

/* ==================== News Detail — Cover Banner Hero (header image only) ==================== */
.news-hero {
    position: relative;
    min-height: 340px;
    display: flex; align-items: flex-end;
    overflow: hidden;
    background: linear-gradient(135deg, #002B58 0%, #0059A8 55%, #004890 100%);
}
.news-hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
.news-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-hero::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    background: linear-gradient(to top,
        rgba(8,24,52,.55) 0%, rgba(8,24,52,.18) 55%, transparent 100%);
}
.news-hero-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--container-max);
    margin: 0 auto; padding: 0 20px 40px;
}
.news-hero .breadcrumb-nav { color: rgba(255,255,255,.82); margin-bottom: 0; }
.news-hero .breadcrumb-nav a { color: rgba(255,255,255,.97); }
.news-hero .breadcrumb-nav a:hover { text-decoration: underline; }
.news-hero .breadcrumb-nav span { color: #fff; }
/* 横幅上的栏目文字(与列表页 .page-hero 一致) */
.news-hero-text { position: relative; z-index: 2; }
.news-hero-text h1 {
    color: #fff; margin: 0 0 12px; font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
}
.news-hero-text p {
    color: rgba(255,255,255,.9); margin: 0; font-size: 1.05rem;
    max-width: 640px; line-height: 1.7;
}

/* 标题区：移至横幅下方白底，深色文字清晰可读 */
.article-header { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.article-header .article-title {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; color: var(--text-dark);
    line-height: 1.35; margin: 0 0 16px; letter-spacing: -.01em;
}
.article-header .article-meta {
    display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; border: none;
}
.article-header .article-meta span {
    display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--text-gray);
}
.article-header .article-meta .ico { width: 16px; height: 16px; color: var(--primary-600); }

/* 相关阅读 */
.news-related { background: var(--bg-tint); border-top: 1px solid var(--border); }
.news-related .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 28px;
}
.news-related .section-title {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 800; color: var(--text-dark);
    margin: 0; position: relative; padding-left: 16px;
}
.news-related .section-title::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 22px; border-radius: 3px;
    background: linear-gradient(180deg, var(--primary-500), var(--primary-700));
}
.news-related .section-more {
    font-size: .92rem; font-weight: 600; color: var(--primary-600);
    text-decoration: none; white-space: nowrap;
}
.news-related .section-more:hover { text-decoration: underline; }

.article-container { max-width: 820px; }
.article-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: var(--text-dark); line-height: 1.35; margin-bottom: 18px; letter-spacing: -.01em; }
.article-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--text-gray); }
.article-meta .ico { width: 16px; height: 16px; color: var(--primary-600); }
.article-cover { margin-bottom: 28px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.article-cover img { width: 100%; display: block; }
.article-content { font-size: 1.02rem; line-height: 1.95; color: var(--text-body); }
.article-content p { margin-bottom: 18px; }
.article-content h2, .article-content h3 { color: var(--text-dark); margin: 28px 0 14px; font-weight: 700; }
.article-content img { max-width: 100%; border-radius: var(--radius-sm); margin: 8px 0 18px; }
.article-content ul, .article-content ol { margin: 0 0 18px 1.3em; }
.article-content li { margin-bottom: 8px; }
.article-back { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }

/* ---------- 文章分享栏（新闻详情页 · 正文之后 / 页脚之上） ---------- */
.article-share {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border);
}
.article-share__label { color: var(--text-gray); font-size: .875rem; }

.share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--bg-white); color: var(--text-gray);
    font-size: .8125rem; line-height: 1.4; text-decoration: none;
    cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.share-btn .ico { width: 16px; height: 16px; }
.share-btn:hover { border-color: var(--primary-200); color: var(--primary-700); background: var(--primary-050); transform: translateY(-1px); }
.share-btn:focus-visible { outline: 3px solid var(--primary-300); outline-offset: 2px; }
.share-btn--wechat { color: #07C160; }
.share-btn--wechat:hover { color: #06A552; border-color: #A6E9C6; background: #F3F8FD; }
.share-btn--qq:hover { color: #004890; border-color: var(--primary-200); background: var(--primary-050); }
.share-btn--weibo:hover { color: #E6162D; border-color: #F6C3CA; background: #FFF5F6; }
.share-btn--link:hover { color: var(--primary-700); }

/* 分享弹层（微信引导 / 二维码 / 复制链接 共用） */
.share-modal {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    display: none; align-items: center; justify-content: center;
    padding: 20px; background: rgba(11, 27, 51, .55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    z-index: 2000;
}
.share-modal.is-open { display: flex; }
.share-modal-open { overflow: hidden; }
.share-modal__box {
    position: relative; width: 100%; max-width: 380px;
    background: var(--bg-white); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 26px 24px 22px;
    animation: share-pop .22s ease;
}
@keyframes share-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.share-modal__close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: 0; font-size: 22px; line-height: 1;
    color: var(--text-light); cursor: pointer;
}
.share-modal__close:hover { color: var(--text-dark); }
.share-modal__title { margin: 0 0 16px; font-size: 1.0625rem; font-weight: 700; color: var(--text-dark); text-align: center; }
.share-modal__body { text-align: center; }
.share-tip { margin: 0 0 14px; font-size: .8125rem; color: var(--text-gray); line-height: 1.7; }
.share-tip--warn { color: var(--warning); }

.share-qr { display: flex; align-items: center; justify-content: center; min-height: 188px; margin-bottom: 14px; }
.share-qr img, .share-qr canvas, .share-qr table { border-radius: var(--radius-sm); }
.share-qr table { border-collapse: collapse; margin: 0 auto; }

/* 微信引导层内的分享卡片预览 */
.share-card {
    display: flex; gap: 12px; align-items: center; text-align: left;
    padding: 12px; margin-bottom: 16px;
    background: var(--primary-tint); border: 1px solid var(--primary-100); border-radius: var(--radius-sm);
}
.share-card__img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: 0 0 56px; background: var(--bg-soft); }
.share-card__meta { min-width: 0; }
.share-card__title { margin: 0 0 4px; font-size: .9rem; font-weight: 700; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.share-card__desc { margin: 0; font-size: .78rem; color: var(--text-gray); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.share-guide { padding: 10px 12px; background: var(--bg-light); border-radius: var(--radius-sm); margin-bottom: 14px; }
.share-guide__text { margin: 0; font-size: .8125rem; color: var(--text-body); line-height: 1.7; }

/* 复制链接区（二维码不可用时作为最终降级） */
.share-copy { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.share-copy__input {
    width: 100%; box-sizing: border-box; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: .78rem; color: var(--text-gray); background: var(--bg-light);
}
.share-btn--copy { justify-content: center; }

/* 加载态 */
.share-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 0; }
.share-loading__text { font-size: .8125rem; color: var(--text-gray); }
.share-spinner {
    display: inline-block; width: 26px; height: 26px;
    border: 3px solid var(--primary-100); border-top-color: var(--primary-600);
    border-radius: 50%; animation: share-spin .8s linear infinite;
}
@keyframes share-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .article-share { gap: 8px; }
    .share-btn { padding: 6px 12px; font-size: .78rem; }
    .share-modal__box { padding: 22px 18px 18px; }
}

/* ---------- 知识库列表 ---------- */
.kb-group { margin-bottom: 44px; }
.kb-group-title { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 18px; }
.kb-group-title .ico { width: 22px; height: 22px; color: var(--primary-600); }
.kb-list { display: flex; flex-direction: column; gap: 12px; }
.kb-item {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 22px; text-decoration: none; color: inherit; transition: var(--transition); box-shadow: var(--shadow-sm);
}
.kb-item:hover { border-color: var(--primary-200); box-shadow: var(--shadow-blue); transform: translateX(4px); }
.kb-item-title { font-size: 1.02rem; font-weight: 600; color: var(--text-dark); }
.kb-item-sum { flex: 1; min-width: 0; font-size: .9rem; color: var(--text-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-item-arrow { color: var(--primary-600); margin-left: auto; }
.kb-item-arrow .ico { width: 20px; height: 20px; }

/* ---------- 知识库两栏布局(左侧分类导航) ---------- */
.kb-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
.kb-sidebar { position: -webkit-sticky; position: sticky; top: 96px; }
.kb-nav { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-sm); }
.kb-nav-title { font-size: .76rem; font-weight: 700; color: var(--text-gray); letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px 10px; }
.kb-nav a { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-dark); text-decoration: none; font-size: .95rem; font-weight: 500; line-height: 1.3; transition: var(--transition); }
.kb-nav a .ico { width: 18px; height: 18px; color: var(--primary-600); flex: none; }
.kb-nav a:hover { background: var(--bg-light); color: var(--primary-700); }
.kb-nav a.active { background: var(--bg-light); color: var(--primary-700); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary-600); }
.kb-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-nav-count { margin-left: auto; font-size: .76rem; color: var(--text-gray); background: var(--bg-light); border-radius: 20px; padding: 1px 9px; font-weight: 600; flex: none; }
.kb-nav a.active .kb-nav-count { color: var(--primary-700); background: #fff; }
/* 详情页正文在右栏铺满 */
.kb-layout .article-container { max-width: 100%; }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .kb-layout { grid-template-columns: 1fr; gap: 20px; }
    .kb-sidebar { position: static; }
    .kb-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
    .kb-nav-title { width: 100%; padding: 2px 8px 4px; }
    .kb-nav a { flex: 0 1 auto; }
    .kb-nav-count { margin-left: 6px; }
}
@media (max-width: 640px) {
    .news-grid { grid-template-columns: 1fr; }
    .article-meta { gap: 12px; }
    .kb-item { flex-wrap: wrap; }
    .kb-item-sum { flex-basis: 100%; white-space: normal; order: 3; }
}

/* ============ 新闻列表分页 (前台) ============ */
.news-pagination { margin-top: 40px; }
.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-body);
  background: #fff;
  text-decoration: none;
  transition: all .2s var(--ease);
}
.pagination .page-link:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.pagination .page-link.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}
.pagination .page-dots {
  display: inline-flex;
  align-items: center;
  padding: 9px 4px;
  color: var(--text-gray);
}
@media (max-width: 480px) {
  .pagination .page-link { min-width: 38px; padding: 8px 10px; font-size: .85rem; }
  .news-pagination { margin-top: 32px; }
}

/* ==========================================================================
   WorkBuddy 页面重构 (结构/视觉参考 workbuddy.cn 首页 + 企业版定价页)
   ========================================================================== */

/* ---------- 无障碍: 仅屏幕阅读器可见 ---------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==================== Hero ==================== */
.wx-hero {
    position: relative; overflow: hidden;
    padding: 112px 0 96px;
    background: linear-gradient(158deg, #07162B 0%, #0B1B33 42%, #123A63 100%);
    color: #fff;
}
.wx-hero-grid {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
    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: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 30%, transparent 100%);
}
.wx-hero-glow {
    position: absolute; width: 720px; height: 720px; right: -180px; top: -240px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(26, 111, 224, .34) 0%, rgba(26, 111, 224, 0) 68%);
}
.wx-hero-wrap {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center;
}

.wx-eyebrow {
    display: inline-flex; align-items: center;
    font-size: .84rem; font-weight: 600; letter-spacing: .05em;
    color: #A9CBE8; background: rgba(159, 196, 255, .12);
    border: 1px solid rgba(159, 196, 255, .32);
    padding: 7px 16px; border-radius: var(--radius-full); margin-bottom: 22px;
}
.wx-hero-title {
    font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; line-height: 1.1;
    letter-spacing: -.02em; margin: 0 0 8px; color: #fff;
}
.wx-hero-slogan {
    font-size: clamp(1.35rem, 2.8vw, 2rem); font-weight: 700; line-height: 1.35;
    margin: 0 0 20px;
    background: linear-gradient(100deg, #6FA8D8 0%, #A9CBE8 45%, #ffffff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wx-dot { margin: 0 .35em; opacity: .55; font-weight: 400; }
.wx-hero-sub {
    color: rgba(255, 255, 255, .8); font-size: 1.02rem; line-height: 1.9;
    margin: 0 0 26px; max-width: 560px;
}
.wx-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.wx-tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .86rem; color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
    padding: 8px 15px; border-radius: var(--radius-full);
    transition: all .25s var(--ease);
}
.wx-tag:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .32); transform: translateY(-2px);
}
.wx-hero-tags .wx-tag .ico { width: 16px; height: 16px; color: var(--primary-300); flex-shrink: 0; }
.wx-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.wx-hero-actions .btn-primary {
    background: #fff; color: var(--primary-700); border-color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.wx-hero-actions .btn-primary:hover { background: #EDF4FA; transform: translateY(-2px); }
.wx-hero-actions .btn-outline {
    color: #fff; border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .06);
}
.wx-hero-actions .btn-outline:hover {
    background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7);
    color: #fff; transform: translateY(-2px);
}

/* ==================== 产品演示卡 ==================== */
.wx-demo {
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius-lg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
    overflow: hidden;
    animation: wx-demo-in .8s var(--ease) .25s both;
}
@keyframes wx-demo-in {
    from { opacity: 0; transform: translateY(26px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.wx-demo-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 13px 18px; background: rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.wx-demo-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .24); }
.wx-demo-dot:first-child { background: #FF5F57; }
.wx-demo-dot:nth-child(2) { background: #FEBC2E; }
.wx-demo-dot:nth-child(3) { background: #28C840; }
.wx-demo-title { margin-left: 8px; font-size: .82rem; color: rgba(255, 255, 255, .6); letter-spacing: .02em; }
.wx-demo-body { padding: 20px; display: grid; gap: 16px; }

.wx-demo-ask, .wx-demo-reply { display: flex; gap: 11px; align-items: flex-start; }
.wx-demo-ask p {
    margin: 0; background: rgba(26, 111, 224, .2); border: 1px solid rgba(111, 168, 240, .3);
    color: #EBF3FA; font-size: .93rem; line-height: 1.65;
    padding: 11px 15px; border-radius: 14px 14px 14px 4px;
}
.wx-demo-av {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: #CBD9EE;
    background: rgba(255, 255, 255, .1);
}
.wx-demo-av-ai {
    background: linear-gradient(135deg, var(--primary), var(--primary-300)); color: #fff;
}
.wx-demo-reply .wx-demo-av .ico { width: 16px; height: 16px; }
.wx-demo-main { flex: 1; min-width: 0; display: grid; gap: 13px; }
.wx-demo-say { margin: 0; color: rgba(255, 255, 255, .82); font-size: .93rem; line-height: 1.7; }

.wx-demo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.wx-demo-steps li {
    position: relative; padding-left: 26px; font-size: .88rem;
    color: rgba(255, 255, 255, .72); line-height: 1.55;
}
.wx-demo-steps li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: rgba(255, 255, 255, .09);
}
.wx-demo-steps li.is-done::before {
    background-color: var(--success);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.wx-demo-steps li.is-doing { color: #fff; }
.wx-demo-steps li.is-doing::before {
    background: var(--primary-400);
    animation: wx-pulse 1.4s ease-in-out infinite;
}
@keyframes wx-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.8); }
}

.wx-demo-files { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-file {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; color: #DCE8FA;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
    padding: 7px 12px; border-radius: var(--radius-sm);
}
.wx-demo-files .wx-file .ico { width: 14px; height: 14px; color: var(--primary-300); }
.wx-demo-note { margin: 0; font-size: .74rem; color: rgba(255, 255, 255, .4); }

/* ==================== 能力概览 ==================== */
.wx-overview-sec { background: var(--bg-white); }
.wx-overview { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.wx-lead { color: var(--text-body); font-size: 1.05rem; line-height: 1.9; margin-bottom: 30px; }
.wx-stat-row { display: flex; gap: 40px; flex-wrap: wrap; }
.wx-stat { display: flex; flex-direction: column; gap: 3px; transition: transform .25s var(--ease); }
.wx-stat:hover { transform: scale(1.04); }
.wx-stat-num {
    font-size: 2.1rem; font-weight: 800; color: var(--primary-700);
    line-height: 1.1; letter-spacing: -.02em; transition: color .25s var(--ease);
}
.wx-stat:hover .wx-stat-num { color: var(--primary); }
.wx-stat-plus { font-size: 1.25rem; vertical-align: super; }
.wx-stat-label { font-size: .9rem; color: var(--text-gray); }

.wx-overview-cards { display: grid; gap: 16px; }
.wx-mini-card {
    display: flex; gap: 16px; align-items: center; min-height: 104px;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 24px;
    transition: all .3s var(--ease);
}
.wx-mini-card:hover {
    border-color: var(--primary-200); box-shadow: 0 10px 30px rgba(26, 111, 224, .12);
    transform: translateY(-3px);
}
.wx-mini-icon {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
    background: var(--primary-050); border: 1px solid var(--primary-100);
    display: flex; align-items: center; justify-content: center; color: var(--primary-600);
}
.wx-mini-card .wx-mini-icon .ico { width: 22px; height: 22px; }
.wx-mini-card h4 { font-size: 1.02rem; color: var(--text-dark); margin: 0 0 5px; }
.wx-mini-card p { font-size: .9rem; color: var(--text-gray); margin: 0; line-height: 1.6; }

/* ==================== 办公生态 ==================== */
.wx-eco { background: var(--bg-light); }
.wx-eco-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.wx-eco-item {
    text-align: center; background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px 14px;
    min-height: 176px; display: flex; flex-direction: column; justify-content: flex-start;
    transition: all .3s var(--ease);
}
.wx-eco-item:hover {
    border-color: var(--primary-200); box-shadow: var(--shadow-blue); transform: translateY(-5px);
}
.wx-eco-icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-050), var(--primary-100));
    display: flex; align-items: center; justify-content: center; color: var(--primary-600);
}
.wx-eco-item .wx-eco-icon .ico { width: 24px; height: 24px; }
.wx-eco-item h4 { font-size: .98rem; color: var(--text-dark); margin: 0 0 6px; }
.wx-eco-item p { font-size: .82rem; color: var(--text-gray); margin: 0; line-height: 1.55; }

/* ==================== 企业版报价（参照 workbuddy.cn/pricing enterprise） ==================== */
.wx-price-sec { background: var(--bg-white); }
.wx-promo {
    display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap;
    max-width: 800px; margin: -18px auto 48px;
    background: linear-gradient(100deg, var(--primary-050), #fff 70%);
    border: 1px solid var(--primary-100); border-radius: var(--radius-full);
    padding: 12px 26px;
}
.wx-promo-tag {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-size: .84rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-400));
    padding: 6px 15px; border-radius: var(--radius-full);
}
.wx-promo .wx-promo-tag .ico { width: 14px; height: 14px; }
.wx-promo p { margin: 0; font-size: .9rem; color: var(--text-body); line-height: 1.6; }

.wx-price-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;
    max-width: 940px; margin: 0 auto; align-items: stretch;
}
.wx-price-card {
    position: relative; display: flex; flex-direction: column;
    min-height: 1240px;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm); transition: all .35s var(--ease);
}
.wx-price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.wx-price-card.is-popular { border: 2px solid var(--primary); box-shadow: var(--shadow-blue); }
.wx-price-card.is-popular:hover { transform: translateY(-6px); box-shadow: var(--shadow-blue-lg); }

.wx-price-badge {
    position: absolute; top: 16px; right: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-400)); color: #fff;
    padding: 5px 14px; border-radius: var(--radius-full);
    font-size: .76rem; font-weight: 700; letter-spacing: .03em;
    box-shadow: 0 4px 12px rgba(26, 111, 224, .3);
}

.wx-price-top { padding: 36px 32px 28px; border-bottom: 1px solid var(--border-light); }
.wx-price-name {
    font-size: 1.45rem; font-weight: 700; color: var(--text-dark);
    margin: 0 0 14px; letter-spacing: -.01em;
}
.wx-price-amount { display: flex; align-items: baseline; gap: 2px; margin-bottom: 10px; min-height: 54px; }
.wx-cur { font-size: 1.4rem; font-weight: 700; color: var(--primary-600); }
.wx-num { font-size: 3rem; font-weight: 800; color: var(--primary-700); line-height: 1; letter-spacing: -.03em; }
.wx-num-txt { font-size: 2rem; }
.wx-per { font-size: .95rem; color: var(--text-gray); margin-left: 6px; }
.wx-price-seat {
    display: inline-block; font-size: .84rem; color: var(--primary-700);
    background: var(--primary-050); border: 1px solid var(--primary-100);
    padding: 4px 13px; border-radius: var(--radius-full); margin-bottom: 14px;
}
.wx-price-tagline { font-size: .94rem; color: var(--text-body); line-height: 1.7; margin: 0 0 18px; }
.wx-price-tel {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 1.02rem; font-weight: 700; color: var(--text-dark);
    text-decoration: none; margin-bottom: 18px;
}
.wx-price-tel .ico { width: 17px; height: 17px; color: var(--primary-600); }
.wx-price-tel:hover { color: var(--primary-600); }
.wx-price-cta { width: 100%; justify-content: center; }

.wx-price-body { padding: 26px 32px 32px; flex: 1; display: flex; flex-direction: column; }
.wx-price-subtitle {
    font-size: .92rem; font-weight: 700; color: var(--text-dark);
    margin: 0 0 16px; letter-spacing: .02em;
}
.wx-feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wx-feat-list li { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: .93rem; color: var(--text-body); line-height: 1.6; }
.wx-feat-list .wx-feat-ico {
    flex-shrink: 0; width: 13px; height: 13px; margin-top: 3px; padding: 3px;
    color: #fff; background: var(--primary-600); border-radius: 50%;
}
.wx-excl {
    flex-shrink: 0; font-style: normal; font-size: .72rem; font-weight: 700;
    color: var(--primary-700); background: var(--primary-050);
    border: 1px solid var(--primary-100);
    padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap;
}
.wx-limited {
    flex-shrink: 0; font-style: normal; font-size: .72rem; font-weight: 700;
    color: #92400E; background: var(--warning-bg);
    border: 1px solid #FDE68A;
    padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap;
}
a.wx-limited {
    display: inline-flex; align-items: center; gap: 2px;
    text-decoration: none; cursor: pointer; transition: all .2s var(--ease);
}
a.wx-limited::after { content: '\203A'; font-size: .82rem; line-height: 1; }
a.wx-limited:hover {
    background: #FEF3C7; border-color: #FCD34D; color: #78350F;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .28);
}
a.wx-limited:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }

.wx-promo-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--primary-700); font-weight: 600; text-decoration: none;
    border-bottom: 1px solid var(--primary-200); transition: all .2s var(--ease);
}
.wx-promo-link .ico { width: 14px; height: 14px; }
.wx-promo-link:hover { color: var(--primary-600); border-bottom-color: var(--primary-600); }
.wx-price-note {
    max-width: 820px; margin: 28px auto 0; text-align: center;
    font-size: .86rem; color: var(--text-gray); line-height: 1.8;
}

/* CTA 电话 */
.wx-cta-tel { margin-top: 18px; font-size: 1rem; color: rgba(255, 255, 255, .85); }
.wx-cta-tel a {
    color: #fff; font-weight: 700; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.wx-cta-tel a:hover { border-bottom-color: #fff; }

/* ==================== 响应式 ==================== */
@media (max-width: 1100px) {
    .wx-eco-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
    .wx-hero-wrap { grid-template-columns: 1fr; gap: 44px; }
    .wx-hero-copy { text-align: center; }
    .wx-hero-sub { margin-left: auto; margin-right: auto; }
    .wx-hero-tags, .wx-hero-actions { justify-content: center; }
    .wx-overview { grid-template-columns: 1fr; gap: 36px; }
    .wx-price-grid { grid-template-columns: 1fr; max-width: 520px; }
    .wx-price-card { min-height: 0; }
}
@media (max-width: 768px) {
    .wx-hero { padding: 88px 0 72px; }
    .wx-stat-row { gap: 26px; }
    .wx-eco-grid { grid-template-columns: repeat(2, 1fr); }
    .wx-promo {
        flex-direction: column; text-align: center;
        border-radius: var(--radius-lg); gap: 10px; padding: 16px 20px;
    }
    .wx-price-top { padding: 32px 24px 24px; }
    .wx-price-body { padding: 24px; }
    .wx-num { font-size: 2.5rem; }
}
@media (max-width: 480px) {
    .wx-stat-num { font-size: 1.7rem; }
    .wx-eco-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .wx-eco-item { min-height: 0; padding: 20px 10px; }
    .wx-hero-actions .btn { width: 100%; }
    /* 报价卡次级按钮窄屏纵排，防电话号码溢出 */
    .epc-secondary { flex-direction: column; }
    .epc-sec-btn { width: 100%; }
}

/* 尊重系统「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
    .wx-demo { animation: none; }
    .wx-demo-steps li.is-doing::before { animation: none; }
    .wx-price-card:hover,
    .wx-mini-card:hover,
    .wx-eco-item:hover,
    .wx-stat:hover { transform: none; }
}

/* ==========================================================================
   活动规则页 (promotion.php)
   ========================================================================== */

/* ---------- Hero ---------- */
.act-hero-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .84rem; font-weight: 600; letter-spacing: .04em;
    color: #FFE9B8; background: rgba(245, 158, 11, .18);
    border: 1px solid rgba(252, 211, 77, .42);
    padding: 7px 16px; border-radius: var(--radius-full); margin-bottom: 18px;
}
.page-hero .act-hero-tag .ico { width: 15px; height: 15px; }
.act-br { display: none; }

.act-period {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
    font-size: 1.02rem; font-weight: 600; color: #fff;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
    padding: 11px 24px; border-radius: var(--radius-full);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.act-period .ico { width: 17px; height: 17px; color: #FFD98A; }

/* ---------- 正文容器 ---------- */
.act-wrap { max-width: 880px; margin: 0 auto; }

.act-section {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 30px 34px;
    margin-bottom: 20px; box-shadow: var(--shadow-sm);
    transition: box-shadow .3s var(--ease);
}
.act-section:hover { box-shadow: var(--shadow); }

.act-h2 {
    display: flex; align-items: center; gap: 13px;
    font-size: 1.18rem; font-weight: 700; color: var(--text-dark);
    margin: 0 0 16px; letter-spacing: -.01em; line-height: 1.4;
}
.act-num {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .92rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-400));
    box-shadow: 0 4px 12px rgba(26, 111, 224, .26);
}
.act-h3 {
    font-size: 1rem; font-weight: 700; color: var(--text-dark);
    margin: 22px 0 12px; padding-left: 11px;
    border-left: 3px solid var(--primary);
}
.act-body { color: var(--text-body); font-size: .97rem; line-height: 1.9; }
.act-body p { margin: 0 0 12px; }
.act-body p:last-child { margin-bottom: 0; }
.act-body strong { color: var(--primary-700); font-weight: 700; }
.act-lead {
    font-size: 1.3rem; font-weight: 700; color: var(--primary-700);
    letter-spacing: -.01em; margin: 0;
}

/* ---------- 计算方式 ---------- */
.act-formula { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.act-formula li {
    display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap;
    background: var(--primary-050); border: 1px solid var(--primary-100);
    border-radius: var(--radius-sm); padding: 13px 16px;
    font-size: .93rem; color: var(--text-dark);
}
.act-f-label {
    flex-shrink: 0; font-size: .78rem; font-weight: 700; color: #fff;
    background: var(--primary-600); padding: 3px 11px; border-radius: var(--radius-full);
    line-height: 1.5;
}
.act-f-text { flex: 1; min-width: 200px; line-height: 1.65; }

/* ---------- 实例演示 ---------- */
.act-example {
    background: linear-gradient(160deg, #FFFBF0, #FFF7E6);
    border: 1px solid #FDE68A; border-radius: var(--radius);
    padding: 22px 24px; margin-top: 6px;
}
.act-example-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 1rem; font-weight: 700; color: #92400E; margin: 0 0 12px;
}
.act-example .act-example-title .ico { width: 18px; height: 18px; }
.act-example p { margin: 0 0 10px; font-size: .95rem; color: #6B4E12; }
.act-example-list { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 9px; }
.act-example-list li { font-size: .95rem; color: #6B4E12; line-height: 1.75; }
.act-example-list strong { color: #92400E; font-weight: 700; }
.act-example-list em { font-style: normal; color: #8A6A2F; font-size: .88rem; }
.act-example-note {
    margin: 0; padding-top: 12px; border-top: 1px dashed #FCD9A0;
    font-size: .9rem; color: #8A6A2F;
}

/* ---------- 提示框 ---------- */
.act-note {
    display: flex; gap: 13px; align-items: flex-start;
    background: var(--warning-bg); border: 1px solid #FDE68A;
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm); padding: 16px 18px;
}
.act-note-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #FEF3C7; color: #92400E;
}
.act-note .act-note-icon .ico { width: 16px; height: 16px; }
.act-note p { margin: 0; font-size: .94rem; color: #6B4E12; line-height: 1.75; }
.act-note-strong { font-weight: 700; color: #92400E; margin-bottom: 4px; }

/* ---------- 列表 ---------- */
.act-list { margin: 0; padding-left: 22px; display: grid; gap: 11px; }
.act-list li { font-size: .96rem; line-height: 1.85; padding-left: 4px; }
.act-list li::marker { color: var(--primary-600); font-weight: 700; }

/* ---------- 返回 ---------- */
.act-back { text-align: center; margin-top: 32px; }
.act-back .btn { display: inline-flex; align-items: center; gap: 7px; }
.act-back .btn .ico { width: 16px; height: 16px; }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .act-br { display: block; }
    .act-section { padding: 24px 20px; }
    .act-h2 { font-size: 1.06rem; }
    .act-lead { font-size: 1.12rem; }
    .act-period { font-size: .9rem; padding: 10px 18px; }
    .act-f-text { min-width: 100%; }
}
@media (max-width: 480px) {
    .act-num { width: 28px; height: 28px; font-size: .84rem; }
    .act-example { padding: 18px 16px; }
}

/* ==========================================================================
   富文本统一作用域 (.rich-text)
   用途：收口后台富文本编辑器(Summernote)产出的新闻正文 / 页面富文本块
   解决问题：
     1) 编辑器内联 style(font-size/color/width) 与页面设计系统冲突
     2) 全局 ul,ol{list-style:none} 吃掉正文列表符号
     3) 正文 h2/h3 未设字号，继承全局大标题尺寸导致层级塌陷
     4) 图片固定像素宽、表格与长链接在移动端溢出
   设计原则：全部沿用站点既有 design token，仅在作用域内生效，不影响其他区块
   ========================================================================== */
.rich-text {
    font-size: 1rem;
    line-height: 1.95;
    color: var(--text-body);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 中和编辑器注入的内联字号 / 颜色（内联样式优先级高，需 !important 覆盖） */
.rich-text,
.rich-text p,
.rich-text span,
.rich-text li,
.rich-text td,
.rich-text font {
    font-size: inherit !important;
    color: inherit !important;
}
.rich-text p { margin: 0 0 18px; }
.rich-text p:last-child { margin-bottom: 0; }

/* 标题层级：明确低于文章主标题(2.3rem)，恢复可读性层级 */
.rich-text h2 { font-size: 1.5rem !important;  line-height: 1.45; margin: 34px 0 14px; font-weight: 700; color: var(--text-dark); }
.rich-text h3 { font-size: 1.25rem !important; line-height: 1.5;  margin: 28px 0 12px; font-weight: 700; color: var(--text-dark); }
.rich-text h4 { font-size: 1.1rem !important;  line-height: 1.55; margin: 24px 0 10px; font-weight: 700; color: var(--text-dark); }
.rich-text h5,
.rich-text h6 { font-size: 1rem !important; margin: 20px 0 10px; font-weight: 700; color: var(--text-dark); }

/* 列表：恢复项目符号与缩进（全局 ul,ol{list-style:none} 会吃掉） */
.rich-text ul { list-style: disc !important;    margin: 0 0 18px 1.4em !important; padding-left: 1.4em; }
.rich-text ol { list-style: decimal !important; margin: 0 0 18px 1.4em !important; padding-left: 1.4em; }
.rich-text ul ul { list-style: circle; }
.rich-text ol ol { list-style: lower-alpha; }
.rich-text li { margin-bottom: 8px; line-height: 1.9; }

/* 图片：流式 · 居中 · 防变形，中和编辑器固定 width/height */
.rich-text img {
    display: block;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    border-radius: var(--radius-sm);
    margin: 20px auto;
}

/* 链接：允许断行，防长 URL 撑破容器 */
.rich-text a { color: var(--primary-600); text-decoration: underline; overflow-wrap: anywhere; }

/* 图片对齐：后台编辑器可设置左浮动/右浮动；未浮动（默认或"居中"按钮清除浮动后）居中显示 */
.rich-text img[style*="float: left"],
.rich-text img[style*="float:left"] { float: left; margin: 6px 22px 14px 0; }
.rich-text img[style*="float: right"],
.rich-text img[style*="float:right"] { float: right; margin: 6px 0 14px 22px; }

/* 表格：横向滚动容器，防移动端溢出 */
.rich-text table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 20px 0;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rich-text th,
.rich-text td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.rich-text th { background: var(--bg-light); font-weight: 600; color: var(--text-dark); }

/* 引用 / 代码块 */
.rich-text blockquote {
    margin: 20px 0;
    padding: 12px 18px;
    border-left: 4px solid var(--primary-600);
    background: var(--bg-light);
    color: var(--text-gray);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.rich-text pre { background: var(--ink-900); color: #E6EDF3; padding: 14px 16px; border-radius: var(--radius-sm); overflow-x: auto; font-size: .9rem; line-height: 1.7; }
.rich-text code { background: #F2F5F9; padding: 2px 6px; border-radius: 4px; font-size: .92em; }
.rich-text pre code { background: none; padding: 0; color: inherit; }
.rich-text hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

/* 移动端收敛 */
@media (max-width: 640px) {
    .rich-text { font-size: .97rem; line-height: 1.85; }
    .rich-text h2 { font-size: 1.3rem !important; }
    .rich-text h3 { font-size: 1.12rem !important; }
    .rich-text h4 { font-size: 1.02rem !important; }
    .rich-text img { margin: 16px auto; }
}
/* ===== workb.cn UI 优化增强层 (2026-09-14) ===== */
:root{--wb-focus:#2563eb}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,iframe,embed,object,svg{max-width:100%}
img,video{height:auto}
::selection{background:rgba(37,99,235,.16);color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--wb-focus);outline-offset:2px;border-radius:4px}
a,button,.btn,[role="button"]{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- 知识库多级导航 (category + menu_path 树) ---------- */
.kb-nav { max-height: calc(100vh - 130px); overflow-y: auto; }
.kb-nav-branch { margin: 1px 0; }
.kb-nav a.kb-nav-top { font-weight: 600; }
.kb-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-400); flex: none; margin: 0 2px; }
.kb-subnav { list-style: none; margin: 2px 0 4px 20px; padding-left: 14px; border-left: 1px dashed var(--border); }
.kb-subnav li { margin: 1px 0; }
.kb-subnav a { padding: 7px 10px; font-size: .9rem; }
.kb-subnav .kb-nav-count { font-size: .7rem; padding: 0 7px; }
.kb-subgroup-title { font-size: .98rem; font-weight: 700; color: var(--primary-700); margin: 22px 0 10px; padding-left: 10px; border-left: 3px solid var(--primary-500); line-height: 1.4; }
@media (max-width: 992px) {
    .kb-nav { max-height: none; overflow: visible; }
    .kb-nav-branch { display: contents; }
    .kb-subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border-left: none; }
    .kb-subnav li { display: flex; margin: 0; }
    .kb-subnav a { padding: 8px 10px; }
    .kb-nav-dot { display: none; }
    .kb-subgroup-title { margin-top: 16px; }
}

/* ---------- 企业版报价卡（结构对齐官方 pricing, 配色/圆角/线条遵循站点设计系统） ---------- */
.epc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.epc-card { position: relative; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.epc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.epc-card.is-popular { border: 2px solid var(--primary); box-shadow: 0 20px 52px rgba(0,72,144,.22), 0 8px 20px rgba(15,31,51,.08); background: linear-gradient(180deg, var(--primary-tint) 0%, var(--bg-white) 35%); }
.epc-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, var(--primary), var(--primary-400)); color: #fff; font-size: 14px; font-weight: 700; border-radius: var(--radius-full); padding: 5px 16px; box-shadow: 0 4px 12px rgba(0,72,144,.22); }
.epc-badge .ico { width: 14px; height: 14px; }
.epc-header { margin-top: 20px; }
.epc-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.epc-title { margin: 0; font-size: 26px; font-weight: 700; color: var(--text-dark); }
.epc-update { display: inline-block; background: var(--primary-050); color: var(--primary-700); font-size: 14px; border-radius: var(--radius-sm); padding: 4px 10px; line-height: 1.4; font-weight: 500; }
.epc-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.epc-price { font-size: 30px; font-weight: 700; color: var(--text-dark); line-height: 1.2; }
.epc-cur { font-size: 18px; font-weight: 600; margin-right: 2px; }
.epc-per { font-size: 14px; font-weight: 400; color: var(--text-gray); }
.epc-price-txt { font-size: 24px; }
.epc-minseat { font-size: 13px; color: var(--text-gray); }
.epc-desc { margin: 8px 0 0; font-size: 14px; color: var(--text-body); line-height: 1.6; }
.epc-buy { display: flex; align-items: center; justify-content: center; width: 100%; height: 51px; margin-top: 20px; background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); color: #fff !important; font-size: 15px; font-weight: 600; letter-spacing: 2px; border-radius: var(--radius); text-decoration: none; box-shadow: 0 8px 20px rgba(0,89,168,.28); transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.epc-buy:hover { background: linear-gradient(135deg, var(--primary-700) 0%, #002B58 100%); color: #fff !important; box-shadow: var(--shadow-blue); transform: translateY(-1px); }
.epc-secondary { display: flex; gap: 12px; margin-top: 12px; }
.epc-sec-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 47px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-white); font-size: 13px; color: var(--text-dark) !important; text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); white-space: nowrap; }
.epc-sec-btn:hover { border-color: var(--primary-400); color: var(--primary-700) !important; box-shadow: var(--shadow-sm); }
.epc-sec-btn img { width: 16px; height: 16px; }
.epc-divider { height: 1px; background: var(--border); margin: 20px 0; }
.epc-activity { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--primary-100); background: var(--primary-050); border-radius: var(--radius); padding: 12px 16px; }
.epc-act-avatar { width: 32px; height: 32px; flex: none; }
.epc-act-main { min-width: 0; }
.epc-act-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.epc-act-title { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.epc-act-badge { background: var(--primary-100); color: var(--primary-700); font-size: 11px; border-radius: var(--radius-sm); padding: 2px 8px; font-weight: 600; }
.epc-act-desc { margin: 4px 0 0; font-size: 13px; color: var(--text-body); line-height: 1.6; }
.epc-act-link { color: var(--primary-600) !important; font-weight: 500; text-decoration: none; white-space: nowrap; }
.epc-act-link:hover { color: var(--primary-700) !important; text-decoration: underline; }
.epc-act-link .ico { width: 13px; height: 13px; vertical-align: -2px; }
.epc-features { margin-top: 22px; }
.epc-group-header { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-dark); margin: 18px 0 10px; }
.epc-group-header img { width: 20px; height: 20px; }
.epc-amp { color: var(--text-light); font-weight: 500; }
.epc-list { list-style: none; margin: 0; padding: 0; }
.epc-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-body); line-height: 1.65; padding: 5px 0; }
.epc-feat-ico { width: 15px; height: 15px; flex: none; margin-top: 4px; }
.epc-main-divider { height: 1px; background: var(--border); margin: 24px 0 4px; }
.epc-bonus-title { margin: 14px 0 2px; font-size: 12px; color: var(--text-light); }
.epc-bonus-groups .epc-group-header { margin-top: 16px; }
/* 尊享版: 内置权益"即将上线"整体置灰 */
.epc-card.is-offline .epc-bonus-groups .epc-list li { color: var(--text-light); }
.epc-card.is-offline .epc-bonus-groups .epc-feat-ico { filter: grayscale(1); opacity: .4; }
@media (max-width: 992px) {
    .epc-grid { grid-template-columns: 1fr; gap: 20px; }
    .epc-card { padding: 28px 18px; }
    .epc-title { font-size: 22px; }
    .epc-price { font-size: 26px; }
}

/* ---------- AI 场景（参照官网 AI SCENARIOS, 站点配色体系） ---------- */
.wx-tabs { max-width: 1080px; margin: 0 auto; }
.wx-tabbar { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 30px; }
.wx-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 26px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-white); font-size: .95rem; font-weight: 600; color: var(--text-body); cursor: pointer; transition: all .25s var(--ease); }
.wx-tab .ico { width: 15px; height: 15px; }
.wx-tab:hover { border-color: var(--primary-300); color: var(--primary-700); }
.wx-tab.is-active { background: linear-gradient(135deg, var(--primary), var(--primary-400)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(0,72,144,.28); }
.wx-scn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 44px 40px; }
.wx-scn.is-active { animation: scnIn .45s var(--ease); }
@keyframes scnIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wx-scn-kicker { display: inline-block; background: var(--primary-050); color: var(--primary-700); font-size: .82rem; font-weight: 700; border-radius: var(--radius-sm); padding: 4px 12px; margin-bottom: 14px; }
.wx-scn-copy h3 { font-size: 1.7rem; font-weight: 800; color: var(--text-dark); line-height: 1.35; margin: 0 0 14px; }
.wx-scn-copy p { font-size: 1rem; color: var(--text-body); line-height: 1.8; margin: 0 0 18px; }
.wx-scn-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.wx-scn-chips span { font-size: .8rem; color: var(--primary-700); background: var(--primary-050); border: 1px solid var(--primary-100); border-radius: var(--radius-full); padding: 4px 12px; font-weight: 500; }
/* 场景视觉 mock（纯 CSS, 与演示卡同语言） */
.wx-scn-visual { min-width: 0; }
.scn-mock { background: linear-gradient(180deg, var(--primary-050), var(--bg-white)); border: 1px solid var(--primary-100); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.scn-mock-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.scn-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--primary-100); }
.scn-mock-bar i:first-child { background: var(--primary-300); }
.scn-mock-bar span { margin-left: 8px; font-size: .75rem; color: var(--text-light); font-weight: 600; }
.scn-report-title { font-size: 1.05rem; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; }
.scn-report-metrics { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.scn-report-metrics b { font-size: .72rem; color: var(--primary-700); background: var(--bg-white); border: 1px solid var(--primary-100); border-radius: var(--radius-sm); padding: 3px 9px; font-weight: 600; }
.scn-bars { display: flex; align-items: flex-end; gap: 12px; height: 110px; padding: 0 6px; }
.scn-bars i { flex: 1; height: var(--h, 50%); background: linear-gradient(180deg, var(--primary-400), var(--primary)); border-radius: 6px 6px 3px 3px; opacity: .9; }
.scn-doc-cover { height: 74px; border-radius: 10px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 60%, var(--primary-300) 100%); margin-bottom: 12px; position: relative; overflow: hidden; }
.scn-doc-cover::after { content: ""; position: absolute; right: -18px; top: -18px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.16); }
.scn-doc-line { height: 10px; border-radius: 5px; background: var(--primary-100); margin: 8px 0; }
.scn-doc-line.w80 { width: 80%; } .scn-doc-line.w60 { width: 60%; } .scn-doc-line.w70 { width: 70%; }
.scn-doc-files { display: flex; gap: 8px; margin-top: 14px; }
.scn-doc-files span { font-size: .72rem; font-weight: 700; color: var(--primary-700); background: var(--bg-white); border: 1px solid var(--primary-100); border-radius: var(--radius-sm); padding: 3px 10px; }
.scn-canvas { position: relative; height: 150px; border-radius: 10px; background: var(--bg-white); border: 1px dashed var(--primary-100); overflow: hidden; }
.scn-shape { position: absolute; border-radius: 12px; }
.scn-shape.a { width: 46%; height: 58%; left: 6%; top: 12%; background: linear-gradient(135deg, var(--primary), var(--primary-400)); }
.scn-shape.b { width: 30%; height: 30%; right: 8%; top: 10%; border-radius: 50%; background: var(--primary-100); }
.scn-shape.c { width: 34%; height: 26%; right: 8%; bottom: 10%; background: linear-gradient(135deg, var(--primary-300), var(--primary-100)); }
.scn-shape.line { width: 46%; height: 8px; left: 6%; bottom: 14%; border-radius: 4px; background: var(--primary-100); }
.scn-code-line { display: flex; gap: 8px; margin: 9px 0; }
.scn-code-line i { height: 9px; border-radius: 4px; }
.scn-code-line .t1 { background: var(--primary-300); } .scn-code-line .t2 { background: var(--primary-100); } .scn-code-line .t3 { background: var(--primary-200, #BFDBFE); }
.scn-code-line i.w25 { width: 25%; } .scn-code-line i.w30 { width: 30%; } .scn-code-line i.w40 { width: 40%; } .scn-code-line i.w45 { width: 45%; } .scn-code-line i.w50 { width: 50%; } .scn-code-line i.w60 { width: 60%; } .scn-code-line i.w70 { width: 70%; }
.scn-code-ok { margin-top: 12px; font-size: .8rem; font-weight: 700; color: var(--primary-700); background: var(--bg-white); border: 1px solid var(--primary-100); border-radius: var(--radius-sm); padding: 7px 12px; display: inline-block; }
@media (max-width: 992px) {
    .wx-scn { grid-template-columns: 1fr; gap: 26px; padding: 28px 20px; }
    .wx-scn-copy h3 { font-size: 1.4rem; }
    .wx-tabbar { gap: 8px; }
    .wx-tab { padding: 8px 18px; font-size: .88rem; }
}

/* ---------- 安全合规（参照官网 PRIVACY & SECURITY） ---------- */
.wsec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.wsec-item { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px 26px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.wsec-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.wsec-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--primary-400)); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 8px 18px rgba(0,72,144,.24); }
.wsec-icon svg { width: 26px; height: 26px; }
.wsec-item h4 { font-size: 1.08rem; font-weight: 700; color: var(--text-dark); margin: 0 0 10px; }
.wsec-item p { font-size: .9rem; color: var(--text-body); line-height: 1.75; margin: 0; }
@media (max-width: 992px) {
    .wsec-grid { grid-template-columns: 1fr; }
}

/* ---------- 企业智能体办公套件（内容源: pricing?tab=enterprise） ---------- */
.suite-sec { background: linear-gradient(180deg, var(--primary-050) 0%, var(--bg-page) 100%); }
.suite-strip { display: flex; justify-content: center; align-items: stretch; gap: 14px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; }
.suite-product { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 118px; min-height: 96px; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 8px; text-align: center; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.suite-product:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.suite-product img { width: 34px; height: 34px; }
.suite-product span { font-size: .78rem; font-weight: 600; color: var(--text-dark); line-height: 1.35; }
.suite-strip-note { text-align: center; font-size: .82rem; color: var(--text-light); margin: 14px 0 30px; }
.suite-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.suite-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px 28px; }
.suite-card.suite-agent { grid-column: 1 / -1; }
.suite-card-copy h3 { font-size: 1.22rem; font-weight: 800; color: var(--text-dark); margin: 0 0 8px; }
.suite-card-copy > p { font-size: .92rem; color: var(--text-body); line-height: 1.7; margin: 0 0 18px; }
.suite-agent-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.suite-agent-col { background: var(--primary-050); border: 1px solid var(--primary-100); border-radius: var(--radius); padding: 20px 20px 16px; }
.suite-tag { display: inline-block; background: linear-gradient(135deg, var(--primary), var(--primary-400)); color: #fff; font-size: .74rem; font-weight: 700; border-radius: var(--radius-full); padding: 3px 12px; margin-bottom: 10px; }
.suite-agent-col h4 { font-size: .98rem; font-weight: 700; color: var(--text-dark); margin: 0 0 6px; }
.suite-agent-col p { font-size: .85rem; color: var(--text-body); margin: 0 0 10px; line-height: 1.6; }
.suite-agent-col em { font-style: normal; font-size: .76rem; color: var(--text-light); }
.suite-manage-list { list-style: none; margin: 0; padding: 0; }
.suite-manage-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.suite-manage-list li:last-child { border-bottom: none; }
.suite-manage-list .ico { width: 20px; height: 20px; flex: none; color: var(--primary); margin-top: 2px; }
.suite-manage-list h4 { font-size: .95rem; font-weight: 700; color: var(--text-dark); margin: 0 0 3px; }
.suite-manage-list p { font-size: .82rem; color: var(--text-gray); margin: 0; }
.suite-fly-assets { display: block; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--primary-700); background: var(--primary-050); border: 1px solid var(--primary-100); border-radius: var(--radius-sm); padding: 5px 10px; width: fit-content; }
.suite-fly-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.suite-fly-steps li { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; }
.suite-fly-steps b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-400)); color: #fff; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.suite-fly-steps h4 { font-size: .9rem; font-weight: 700; color: var(--text-dark); margin: 0 0 2px; }
.suite-fly-steps p { font-size: .78rem; color: var(--text-gray); margin: 0; line-height: 1.5; }
@media (max-width: 992px) {
    .suite-feats { grid-template-columns: 1fr; }
    .suite-agent-cols { grid-template-columns: 1fr; }
    .suite-fly-steps { grid-template-columns: 1fr 1fr; }
    .suite-product { width: calc(33.3% - 10px); }
}
@media (max-width: 560px) {
    .suite-fly-steps { grid-template-columns: 1fr; }
    .suite-product { width: calc(50% - 8px); }
}

/* ---------- 场景锚点定位兜底（原生锚点跳转偏移 + 标签链接样式） ---------- */
.wx-scn { scroll-margin-top: 96px; }
a.wx-tab { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.wx-scn[hidden] { display: none !important; }

/* =====================================================
   v2 新增组件（WorkBuddy 企业版栏目）
   复用既有 Design Tokens，保持品牌蓝与卡片化语言
   ===================================================== */

/* ---------- 内页 Hero 补充 ---------- */
.page-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; margin-bottom: 18px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.26);
    color: #fff; font-size: .84rem; font-weight: 600; letter-spacing: .04em;
}
.page-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.page-hero-actions .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.page-hero-actions .btn-outline:hover { background: #fff; color: var(--primary-700); }

/* ---------- 通用卡片 hover ---------- */
.wb-suite-card, .wb-cap-card, .wb-scene-card, .wb-security-card,
.wb-case-card, .price-preview-card, .sol-card, .sol-role-card,
.case-featured-card, .case-row, .wb-split-card, .wb-governance-item,
.wb-platform-card, .wb-admin-item, .wb-scene-detail-card {
    transition: var(--transition);
}

/* ---------- 套件卡片 ---------- */
.wb-suite-section { background: var(--bg-white); }
.wb-suite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wb-suite-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 30px 26px;
    box-shadow: var(--shadow-sm); display: block;
}
.wb-suite-card:hover { transform: translateY(-6px); border-color: var(--primary-200); box-shadow: var(--shadow-md); }
.wb-suite-icon {
    width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-050); color: var(--primary); border: 1px solid var(--primary-100);
}
.wb-suite-icon .ico { width: 24px; height: 24px; }
.wb-suite-card h3 { font-size: 1.08rem; margin-bottom: 8px; color: var(--text-dark); }
.wb-suite-card p { font-size: .92rem; line-height: 1.75; color: var(--text-gray); margin: 0; }

/* ---------- 核心能力 ---------- */
.wb-cap-section { background: var(--bg-light); }
.wb-cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.wb-cap-card {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm);
}
.wb-cap-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }
.wb-cap-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
    color: #fff; box-shadow: var(--shadow-blue);
}
.wb-cap-icon .ico { width: 22px; height: 22px; }
.wb-cap-body h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--text-dark); }
.wb-cap-body p { font-size: .92rem; line-height: 1.75; color: var(--text-gray); margin: 0; }

/* ---------- 场景 ---------- */
.wb-scene-section { background: var(--bg-white); }
.wb-scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wb-scene-card {
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #fff 0%, var(--primary-050) 100%);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 30px 26px; box-shadow: var(--shadow-sm);
}
.wb-scene-card:hover { transform: translateY(-6px); border-color: var(--primary-200); box-shadow: var(--shadow-blue); }
.wb-scene-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.wb-scene-tag {
    font-size: .76rem; font-weight: 600; color: var(--primary-700);
    background: var(--primary-100); padding: 4px 10px; border-radius: var(--radius-full);
}
.wb-scene-metric { font-size: .78rem; color: var(--text-gray); }
.wb-scene-metric strong { display: block; font-size: 1.15rem; color: var(--primary-700); font-weight: 800; line-height: 1.2; }
.wb-scene-card h3 { font-size: 1.15rem; margin-bottom: 10px; color: var(--text-dark); }
.wb-scene-card p { font-size: .92rem; line-height: 1.75; color: var(--text-gray); flex: 1; margin-bottom: 18px; }
.wb-scene-card .product-link { font-weight: 600; }
.wb-role-block { margin-top: 44px; text-align: center; }
.wb-role-title { font-size: 1.05rem; color: var(--text-body); margin-bottom: 18px; font-weight: 600; }
.wb-role-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.wb-role-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--radius-full);
    background: var(--bg-white); border: 1px solid var(--border);
    color: var(--text-body); font-size: .92rem; font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.wb-role-chip:hover { border-color: var(--primary); color: var(--primary-700); background: var(--primary-050); transform: translateY(-2px); }
.wb-role-chip .ico { width: 17px; height: 17px; color: var(--primary); }

/* ---------- 安全 ---------- */
.wb-security-section { background: var(--bg-dark); }
.wb-security-section .section-title { color: #fff; }
.wb-security-section .section-title::after { background: linear-gradient(90deg, var(--primary-300), transparent); }
.wb-security-section .section-subtitle { color: rgba(255,255,255,.72); }
.wb-security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wb-security-card {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius); padding: 30px 26px;
}
.wb-security-card:hover { background: rgba(255,255,255,.08); border-color: rgba(111,168,240,.5); }
.wb-security-icon {
    width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(111,168,240,.16); color: var(--primary-300);
}
.wb-security-icon .ico { width: 22px; height: 22px; }
.wb-security-card h3 { color: #fff; font-size: 1.05rem; margin-bottom: 10px; }
.wb-security-card p { color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.75; margin: 0; }

/* ---------- 案例卡片 ---------- */
.wb-case-section { background: var(--bg-light); }
.wb-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wb-case-card {
    display: flex; flex-direction: column;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
}
.wb-case-card:hover { transform: translateY(-6px); border-color: var(--primary-200); box-shadow: var(--shadow-md); }
.wb-case-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.wb-case-logo {
    width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary-050), var(--primary-100));
    color: var(--primary-700); font-weight: 800; font-size: .92rem;
}
.wb-case-head strong { display: block; font-size: 1rem; color: var(--text-dark); }
.wb-case-head em { font-style: normal; font-size: .78rem; color: var(--text-light); }
.wb-case-summary { font-size: .9rem; line-height: 1.75; color: var(--text-gray); flex: 1; margin-bottom: 18px; }
.wb-case-metrics { display: flex; gap: 22px; padding-top: 16px; border-top: 1px dashed var(--border); }
.wb-case-metrics span { font-size: .76rem; color: var(--text-light); }
.wb-case-metrics strong { display: block; font-size: 1.02rem; color: var(--primary-700); font-weight: 800; }

/* ---------- 首页定价预览 ---------- */
.wb-price-preview { background: var(--bg-white); }
.price-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 860px; margin: 0 auto; }
.price-preview-card {
    position: relative; background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-sm);
}
.price-preview-card.is-highlighted { border-color: var(--primary); box-shadow: var(--shadow-blue); }
.price-preview-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.price-preview-card h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--text-dark); }
.price-preview-desc { font-size: .9rem; color: var(--text-gray); line-height: 1.7; min-height: 46px; margin-bottom: 18px; }
.price-preview-amount { color: var(--text-dark); margin-bottom: 6px; }
.price-preview-list { list-style: none; padding: 0; margin: 20px 0 24px; }
.price-preview-list li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; color: var(--text-body); padding: 7px 0; line-height: 1.6; }
.price-preview-list .ico { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--primary); }
.price-badge {
    position: absolute; top: -12px; right: 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
    color: #fff; font-size: .76rem; font-weight: 700;
    padding: 5px 14px; border-radius: var(--radius-full); box-shadow: var(--shadow-blue);
}

/* ---------- 定价页 ---------- */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 960px; margin: 0 auto; align-items: start; }
.price-card {
    position: relative; background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 38px 34px; box-shadow: var(--shadow);
}
.price-card.is-highlighted { border-color: var(--primary); box-shadow: var(--shadow-blue-lg); }
.price-card .price-badge { top: -14px; right: 30px; }
.price-head h2 { font-size: 1.5rem; color: var(--text-dark); margin-bottom: 8px; }
.price-desc { font-size: .92rem; color: var(--text-gray); line-height: 1.7; min-height: 48px; margin: 0; }
.price-amount-row { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 4px; }
.price-amount { color: var(--text-dark); display: inline-flex; align-items: baseline; }
.price-currency { font-size: 1.3rem; font-weight: 700; margin-right: 2px; }
.price-num { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.price-unit { font-size: .9rem; color: var(--text-gray); margin-left: 4px; font-weight: 500; }
.price-original { font-size: 1rem; color: var(--text-light); text-decoration: line-through; }
.price-ask { font-size: 1.5rem; font-weight: 700; color: var(--primary-700); }
.price-min-seats { font-size: .84rem; color: var(--text-light); margin: 6px 0 0; }
.price-cta { width: 100%; justify-content: center; margin: 22px 0 8px; }
.price-feature-title { font-size: .86rem; font-weight: 700; color: var(--text-dark); margin: 22px 0 6px; padding-top: 20px; border-top: 1px solid var(--border); letter-spacing: .02em; }
.price-features { list-style: none; padding: 0; margin: 0; }
.price-features li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: .9rem; color: var(--text-body); line-height: 1.6; }
.price-features .ico { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--primary); }
.price-note { text-align: center; font-size: .86rem; color: var(--text-light); margin-top: 34px; line-height: 1.8; }

/* ---------- 产品页双栏 ---------- */
.wb-split-section { background: var(--bg-light); }
.wb-split-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.wb-split-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-sm);
}
.wb-split-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }
.wb-split-icon {
    width: 50px; height: 50px; border-radius: 14px; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-050); color: var(--primary); border: 1px solid var(--primary-100);
}
.wb-split-icon .ico { width: 24px; height: 24px; }
.wb-split-card h3 { font-size: 1.2rem; color: var(--text-dark); margin-bottom: 12px; }
.wb-split-card > p { font-size: .94rem; color: var(--text-gray); line-height: 1.8; margin-bottom: 18px; }
.wb-check-list { list-style: none; padding: 0; margin: 0; }
.wb-check-list li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; color: var(--text-body); padding: 6px 0; }
.wb-check-list .ico { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--primary); }

/* ---------- 安全治理 ---------- */
.wb-governance-section { background: var(--bg-white); }
.wb-governance-list { display: grid; gap: 18px; max-width: 980px; margin: 0 auto; }
.wb-governance-item {
    display: flex; gap: 22px; align-items: flex-start;
    background: var(--bg-white); border: 1px solid var(--border);
    border-left: 4px solid var(--primary); border-radius: var(--radius);
    padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.wb-governance-item:hover { box-shadow: var(--shadow-md); transform: translateX(3px); }
.wb-governance-no { font-size: 1.5rem; font-weight: 800; color: var(--primary-200); line-height: 1; flex: 0 0 auto; padding-top: 2px; }
.wb-governance-label { display: inline-block; font-size: .76rem; font-weight: 700; color: var(--primary-700); background: var(--primary-050); padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: 8px; }
.wb-governance-body h3 { font-size: 1.08rem; color: var(--text-dark); margin-bottom: 8px; }
.wb-governance-body p { font-size: .92rem; color: var(--text-gray); line-height: 1.8; margin: 0; }

/* ---------- 统一底座 ---------- */
.wb-platform-section { background: var(--bg-light); }
.wb-platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wb-platform-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-sm); }
.wb-platform-card:hover { border-color: var(--primary-200); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.wb-platform-card h4 { font-size: 1rem; color: var(--primary-700); margin-bottom: 12px; }
.wb-platform-card ul { list-style: none; padding: 0; margin: 0; }
.wb-platform-card li { font-size: .88rem; color: var(--text-gray); padding: 5px 0 5px 14px; position: relative; }
.wb-platform-card li::before { content: ''; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary-300); }
.wb-wma-band {
    margin-top: 26px; padding: 32px;
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--primary-700) 100%);
    border-radius: var(--radius-lg); color: #fff;
}
.wb-wma-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
.wb-wma-band > p { color: rgba(255,255,255,.75); font-size: .92rem; margin-bottom: 22px; }
.wb-wma-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.wb-wma-items span { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: rgba(255,255,255,.88); }
.wb-wma-items .ico { width: 17px; height: 17px; color: var(--primary-300); flex: 0 0 auto; }

/* ---------- 定价页管理能力 ---------- */
.wb-admin-section { background: var(--bg-white); }
.wb-admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.wb-admin-item { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; }
.wb-admin-item:hover { background: var(--bg-white); border-color: var(--primary-200); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.wb-admin-item .ico { width: 26px; height: 26px; color: var(--primary); margin-bottom: 14px; }
.wb-admin-item h3 { font-size: 1rem; color: var(--text-dark); margin-bottom: 8px; }
.wb-admin-item p { font-size: .88rem; color: var(--text-gray); line-height: 1.7; margin: 0; }

/* ---------- 效率飞轮 ---------- */
.wb-flywheel-section { background: var(--bg-light); }
.wb-flywheel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.wb-flywheel-step { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; text-align: center; box-shadow: var(--shadow-sm); }
.wb-flywheel-step span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; margin-bottom: 14px;
    background: var(--primary); color: #fff; font-weight: 800; font-size: .95rem;
}
.wb-flywheel-step strong { display: block; font-size: 1rem; color: var(--text-dark); margin-bottom: 6px; }
.wb-flywheel-step p { font-size: .86rem; color: var(--text-gray); margin: 0; line-height: 1.7; }

/* ---------- 解决方案列表 ---------- */
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sol-card {
    display: flex; flex-direction: column;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.sol-card:hover { transform: translateY(-6px); border-color: var(--primary-200); box-shadow: var(--shadow-blue); }
.sol-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sol-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--primary-050); color: var(--primary); border: 1px solid var(--primary-100); }
.sol-icon .ico { width: 22px; height: 22px; }
.sol-cat { font-size: .74rem; font-weight: 700; color: var(--primary-700); background: var(--primary-050); padding: 4px 10px; border-radius: var(--radius-full); }
.sol-card h3 { font-size: 1.2rem; color: var(--text-dark); margin-bottom: 10px; }
.sol-card > p { font-size: .9rem; color: var(--text-gray); line-height: 1.75; flex: 1; margin-bottom: 20px; }
.sol-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); margin-bottom: 16px; }
.sol-metrics strong { display: block; font-size: 1.05rem; color: var(--primary-700); font-weight: 800; line-height: 1.2; }
.sol-metrics em { font-style: normal; font-size: .74rem; color: var(--text-light); }
.sol-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sol-tags span { font-size: .78rem; color: var(--text-body); background: var(--bg-soft); padding: 4px 10px; border-radius: var(--radius-full); }
.sol-tags .sol-tag-more { color: var(--primary-700); background: var(--primary-050); font-weight: 700; }
.sol-card .product-link { margin-top: auto; font-weight: 600; }
.wb-role-section { background: var(--bg-light); }
.sol-role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sol-role-card {
    display: flex; flex-direction: column;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.sol-role-card:hover { transform: translateY(-5px); border-color: var(--primary-200); box-shadow: var(--shadow-md); }
.sol-role-icon { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; background: var(--primary-050); color: var(--primary); }
.sol-role-icon .ico { width: 20px; height: 20px; }
.sol-role-card h3 { font-size: 1.05rem; color: var(--text-dark); margin-bottom: 8px; }
.sol-role-card p { font-size: .86rem; color: var(--text-gray); line-height: 1.7; flex: 1; margin-bottom: 16px; }
.sol-role-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sol-role-meta span { font-size: .74rem; color: var(--primary-700); background: var(--primary-050); padding: 3px 9px; border-radius: var(--radius-full); }
.sol-role-card .product-link { margin-top: auto; font-weight: 600; }

/* ---------- 案例列表 ---------- */
.case-featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.case-featured-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.case-featured-card:hover { transform: translateY(-5px); border-color: var(--primary-200); box-shadow: var(--shadow-md); }
.case-featured-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.case-featured-logo { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-050), var(--primary-100)); color: var(--primary-700); font-weight: 800; }
.case-industry { font-size: .76rem; color: var(--text-gray); background: var(--bg-soft); padding: 4px 10px; border-radius: var(--radius-full); }
.case-featured-card h3 { font-size: 1.15rem; color: var(--text-dark); margin-bottom: 10px; }
.case-featured-card > p { font-size: .9rem; color: var(--text-gray); line-height: 1.75; margin-bottom: 18px; }
.case-featured-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 16px; border-top: 1px dashed var(--border); }
.case-featured-metrics strong { display: block; font-size: 1.02rem; color: var(--primary-700); font-weight: 800; }
.case-featured-metrics em { font-style: normal; font-size: .74rem; color: var(--text-light); }
.wb-case-list-section { background: var(--bg-white); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px; }
.filter-btn {
    padding: 8px 18px; border-radius: var(--radius-full);
    background: var(--bg-white); border: 1px solid var(--border);
    color: var(--text-body); font-size: .88rem; font-weight: 500;
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary-700); }
.filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-blue); }
.case-list { display: grid; gap: 14px; }
.case-row {
    display: flex; align-items: center; gap: 20px;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-sm);
}
.case-row:hover { border-color: var(--primary-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.case-row-logo { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--primary-050); color: var(--primary-700); font-weight: 800; font-size: .9rem; }
.case-row-body { flex: 1; min-width: 0; }
.case-row-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.case-row-head h3 { font-size: 1.02rem; color: var(--text-dark); margin: 0; }
.case-row-body p { font-size: .88rem; color: var(--text-gray); line-height: 1.7; margin: 0; }
.case-row-arrow { flex: 0 0 auto; color: var(--primary); }
.case-row-arrow .ico { width: 20px; height: 20px; }

/* ---------- 详情页 ---------- */
.detail-hero { padding: 120px 0 72px; }
.wb-metric-band { background: var(--bg-white); border-bottom: 1px solid var(--border); }
.wb-metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 32px 0; }
.wb-metric-item { text-align: center; }
.wb-metric-item strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--primary-700); line-height: 1.2; }
.wb-metric-item span { font-size: .84rem; color: var(--text-gray); }
.detail-content { max-width: 860px; margin: 0 auto; }
.detail-lead { font-size: 1.06rem; color: var(--text-body); line-height: 1.9; padding-left: 18px; border-left: 3px solid var(--primary-200); margin-bottom: 28px; }
.wb-scene-detail-section { background: var(--bg-light); }
.wb-scene-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wb-scene-detail-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-sm); }
.wb-scene-detail-card:hover { border-color: var(--primary-200); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.wb-scene-detail-card h3 { font-size: .98rem; color: var(--text-dark); margin-bottom: 8px; }
.wb-scene-detail-card p { font-size: .86rem; color: var(--text-gray); line-height: 1.7; margin: 0; }
.wb-other-solutions { background: var(--bg-white); }
.wb-other-nav { display: grid; gap: 16px; max-width: 900px; margin: 0 auto; }
.wb-other-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wb-other-label { font-size: .84rem; font-weight: 700; color: var(--text-light); min-width: 48px; }
.wb-other-group a { padding: 7px 16px; border-radius: var(--radius-full); background: var(--bg-light); color: var(--text-body); font-size: .88rem; }
.wb-other-group a:hover { background: var(--primary-050); color: var(--primary-700); }
.wb-other-group a.is-current { background: var(--primary); color: #fff; }

/* ---------- 页脚四栏 ---------- */
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
    .wb-suite-grid, .wb-scene-grid, .wb-case-grid, .wb-security-grid, .sol-grid,
    .wb-scene-detail-grid { grid-template-columns: repeat(2, 1fr); }
    .wb-platform-grid, .wb-admin-grid, .wb-flywheel, .sol-role-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .wb-metric-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
    .wb-suite-grid, .wb-scene-grid, .wb-case-grid, .wb-security-grid, .wb-cap-grid,
    .wb-split-grid, .price-preview-grid, .price-grid, .sol-grid, .sol-role-grid,
    .case-featured-grid, .wb-scene-detail-grid, .wb-platform-grid, .wb-admin-grid,
    .wb-flywheel { grid-template-columns: 1fr; }
    .wb-wma-items { grid-template-columns: 1fr; }
    .wb-governance-item { gap: 14px; padding: 22px 18px; }
    .price-card, .price-preview-card { padding: 30px 24px; }
    .price-num { font-size: 2.2rem; }
    .case-row { gap: 14px; padding: 18px; }
    .case-row-arrow { display: none; }
    .detail-hero { padding: 104px 0 56px; }
    .wb-metric-row { grid-template-columns: repeat(2, 1fr); padding: 26px 0; }
    .wb-other-label { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 480px) {
    .wb-metric-item strong { font-size: 1.2rem; }
    .sol-metrics { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .price-badge { right: 16px; }
}

/* =====================================================
   定价页 v2 · 套件化升级定价矩阵（对齐 WorkBuddy 企业版定价版式）
   ===================================================== */
.pc-section {
    background:
        radial-gradient(900px 420px at 50% -60px, #EDF4FA 0%, rgba(238,246,255,0) 70%),
        #FBFCFE;
}
.pc-title {
    text-align: center;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.02em;
    margin: 0 0 26px;
    line-height: 1.3;
}

/* ---- 产品切换 ---- */
.pc-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: #F1F5FB;
    border-radius: 999px;
    padding: 5px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 20px;
}
.pc-switch-item {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-body);
    line-height: 1.2;
    white-space: nowrap;
    transition: all .2s ease;
}
.pc-switch-item.is-active {
    background: #fff;
    color: var(--text-dark);
    box-shadow: 0 1px 2px rgba(15,31,51,.06), 0 2px 8px rgba(15,31,51,.06);
}

/* ---- 模块标签 ---- */
.pc-modtabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}
.pc-modtab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-body);
    line-height: 1.2;
    white-space: nowrap;
    transition: all .2s ease;
}
.pc-modtab .ico { width: 16px; height: 16px; opacity: .75; }
.pc-modtab:hover { border-color: var(--primary-200); color: var(--primary-600); }
.pc-modtab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.pc-modtab.is-active .ico { opacity: 1; }
.pc-modhint {
    text-align: center;
    font-size: .8rem;
    color: var(--text-light);
    margin: 0 0 34px;
}

/* ---- 双卡 ---- */
.pc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    align-items: stretch;
}
.pc-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 28px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15,31,51,.04);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.pc-card:hover { box-shadow: var(--shadow-md); }
.pc-card.is-featured {
    border-color: #A9CBE8;
    box-shadow: 0 0 0 3px rgba(0,72,144,.07), 0 12px 32px rgba(0,72,144,.10);
}

.pc-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #EDF4FA 0%, #E6F0F9 100%);
    border: 1px solid #C9DDF0;
    color: #003A75;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.pc-name-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding-right: 130px;
    min-height: 34px;
}
.pc-name-row h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.3;
}
.pc-rights {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--primary-050);
    border: 1px solid #D5E5F3;
    color: var(--primary-700);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.6;
}

.pc-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 0;
}
.pc-price { display: inline-flex; align-items: baseline; color: var(--text-dark); }
.pc-price .price-currency { font-size: 1.25rem; font-weight: 700; margin-right: 1px; }
.pc-price .price-num { font-size: 2.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.pc-price .price-unit { font-size: .92rem; font-weight: 500; color: var(--text-gray); margin-left: 3px; }
.pc-price .price-ask { font-size: 1.5rem; font-weight: 700; color: var(--primary-700); }
.pc-seats { font-size: .8rem; color: var(--text-light); margin-left: 2px; }

.pc-desc {
    font-size: .9rem;
    color: var(--text-body);
    line-height: 1.7;
    margin: 10px 0 20px;
    min-height: 24px;
}

.pc-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .2s ease, transform .2s ease;
}
.pc-buy:hover { background: var(--primary-700); color: #fff; transform: translateY(-1px); }

.pc-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.pc-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-body);
    white-space: nowrap;
    transition: all .2s ease;
}
.pc-contact-btn .ico { width: 15px; height: 15px; opacity: .7; flex: 0 0 auto; }
.pc-contact-btn:hover { border-color: var(--primary-200); color: var(--primary-600); background: var(--primary-050); }

.pc-promo {
    background: linear-gradient(135deg, #F3F8FD 0%, #EAF2FA 100%);
    border: 1px solid #D5E5F3;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
}
.pc-promo-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-promo-head strong { font-size: .86rem; font-weight: 700; color: #003A75; }
.pc-promo-tag {
    font-style: normal;
    font-size: .68rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.6;
}
.pc-promo p {
    margin: 7px 0 0;
    font-size: .78rem;
    line-height: 1.75;
    color: #4A6B87;
}

/* ---- 权益列表 ---- */
.pc-feats { margin-top: 22px; }
.pc-group-t {
    font-size: .86rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 2px;
    letter-spacing: .01em;
}
.pc-divider { margin: 20px 0 6px; }
.pc-divider span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--primary-050);
    color: var(--text-gray);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.pc-mod { margin-top: 16px; scroll-margin-top: 100px; }
.pc-mod-t {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 2px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-dark);
}
.pc-mod-t .ico { width: 15px; height: 15px; color: var(--text-gray); flex: 0 0 auto; }

.pc-flist { list-style: none; padding: 0; margin: 6px 0 0; }
.pc-flist li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 6px 0;
    font-size: .86rem;
    line-height: 1.7;
    color: var(--text-body);
}
.pc-flist .ico { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; }
.pc-flist li.is-on .ico { color: var(--primary); }
.pc-flist li.is-off { color: var(--text-light); }
.pc-flist li.is-off .ico { color: #C9D3DE; }
.pc-x2 {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--primary-050);
    border: 1px solid #C9DDF0;
    color: var(--primary-700);
    font-size: .66rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
}

.pc-card-foot {
    margin-top: auto;
    padding-top: 16px;
    text-align: right;
}
.pc-info { font-size: .72rem; color: var(--text-light); }
.pc-footnote {
    text-align: center;
    font-size: .78rem;
    color: var(--text-light);
    margin: 28px 0 0;
    line-height: 1.8;
}

@media (max-width: 992px) {
    .pc-title { font-size: 1.6rem; margin-bottom: 20px; }
    .pc-grid { grid-template-columns: 1fr; max-width: 560px; gap: 18px; }
    .pc-card { padding: 22px 20px; }
    .pc-name-row { padding-right: 0; }
    .pc-badge { position: static; margin-bottom: 12px; width: fit-content; }
    .pc-price .price-num { font-size: 2.2rem; }
    .pc-switch { width: 100%; justify-content: center; }
    .pc-switch-item { padding: 9px 16px; font-size: .9rem; }
    .pc-modtabs { gap: 8px; }
    .pc-modtab { padding: 8px 12px; font-size: .8rem; }
    .pc-modtab .ico { width: 14px; height: 14px; }
}
@media (max-width: 480px) {
    .pc-contact { grid-template-columns: 1fr; }
    .pc-price .price-num { font-size: 2rem; }
    .pc-modhint { margin-bottom: 24px; }
}

/* -----------------------------------------------------
   头部自适应：Logo 改为横版长图（305×60），按视口递减尺寸
   并逐级收窄导航间距 / 隐藏站内搜索，避免中等宽度挤出 CTA
   ----------------------------------------------------- */
@media (max-width: 1200px) {
    .logo-img { height: 38px; max-width: 200px; }
    .header-inner { gap: 16px; }
    .nav-item > a { padding: 8px 12px; font-size: .93rem; }
}
@media (max-width: 1024px) {
    .nav-item > a { padding: 8px 10px; font-size: .9rem; }
    .header-actions .site-search input { width: 132px; }
}
@media (max-width: 900px) {
    .main-nav, .nav-list, .header-actions, .nav-cta { display: none; }
    .hamburger { display: flex; }
}
/* 小屏 Logo 归位（须置于 1200px 规则之后，否则被 38px 覆盖） */
@media (max-width: 767px) {
    .logo-img { height: 34px; max-width: 180px; }
    .header-inner { padding: 0 16px; gap: 12px; }
}
@media (max-width: 360px) {
    .logo-img { height: 30px; max-width: 158px; }
}

/* -----------------------------------------------------
   移动端菜单内的「电话咨询」按钮（原导航 CTA 移除后的替代入口）
   ----------------------------------------------------- */
.mobile-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 22px 0 0; padding: 13px 18px; border-radius: 999px;
    background: var(--primary); color: #fff; font-weight: 600; font-size: .98rem;
    box-shadow: 0 8px 20px rgba(0,72,144,.22);
}
.mobile-cta:hover { background: var(--primary-600); color: #fff; }
.mobile-cta .ico { width: 18px; height: 18px; }
.mobile-cta-note {
    margin: 10px 0 0; text-align: center;
    font-size: .78rem; color: var(--text-light);
}

/* =============================================================
   Stage 01 · 视觉与交互修复层  (2026-10-21)
   原则：只覆盖、不改结构；置于文件末尾保证优先级。
   ① 移动端抽屉可用性  ② 移动端信任条断字  ③ 小屏 Logo
   ④ 键盘焦点可见      ⑤ 锚点偏移          ⑥ 案例字母徽标
   ⑦ 触控目标尺寸
   ============================================================= */

/* ---------- ① 移动端抽屉：遮罩真正显示，且随时可关闭 ---------- */
.mobile-overlay {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1002;                                   /* 高于 header(1000)，低于抽屉(1003) */
    background: rgba(7, 31, 58, .52);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity .26s var(--ease), visibility .26s var(--ease);
}
.mobile-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

.mobile-menu {
    z-index: 1003;
    padding: 14px 20px calc(24px + env(safe-area-inset-bottom));
    visibility: hidden;                              /* 关闭时移出 Tab 序列 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: -16px 0 48px rgba(7, 31, 58, .16);
    transition: transform .3s var(--ease), visibility .3s var(--ease);
}
.mobile-menu.open { visibility: visible; }

body.nav-open { overflow: hidden; }

/* 抽屉顶部：标题 + 关闭按钮 */
.mobile-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; min-height: 40px;
}
.mobile-menu-title {
    font-size: .82rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-light);
}
.mobile-close {
    width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 12px;
    background: #fff; color: var(--text-gray); cursor: pointer;
    transition: var(--transition-fast);
}
.mobile-close .ico { width: 20px; height: 20px; }
.mobile-close:hover { background: var(--bg-light); color: var(--text-dark); border-color: #C8D4E3; }
.mobile-close:active { transform: scale(.94); }

/* 关闭按钮占位后，搜索框回到正常内边距 */
.mobile-menu > .site-search { padding: 0 0 14px !important; }

.mobile-nav-list a {
    display: flex; align-items: center;
    min-height: 48px; padding: 10px 2px;
    font-size: 1rem; color: var(--text-dark);
    border-bottom: 1px solid var(--border-light);
}
.mobile-nav-list a.active { color: var(--primary); font-weight: 600; }

/* ---------- ② 移动端信任条：竖排，不再把词切断 ---------- */
@media (max-width: 767px) {
    .hero-trust {
        flex-direction: column;
        align-items: center;
        gap: 9px;
        margin-top: 26px;
        font-size: .86rem;
        line-height: 1.5;
    }
    .hero-trust > .divider { display: none; }
    .hero-trust > span:not(.divider) {
        display: inline-flex; align-items: center; gap: 7px;
        white-space: nowrap;                          /* 关键：中文不再任意断行 */
    }
    .hero-trust .ico { flex: 0 0 auto; }
}

/* ---------- ③ 小屏 Logo ---------- */
/* 2026-10-21 调整：移动端与 PC 统一使用图片 logo。
   此前窄屏隐藏位图、改渲染纯文字字标（.logo-text），导致两端品牌形象不一致。
   位图尺寸仍由 1200 / 767 / 400 三档规则控制，此处只保留字标的兜底定义。 */
.logo-text { display: none; }
/* 关闭态（透明头部覆盖在深色 Hero 上）焦点环用白色，保证可见 */
.site-header:not(.scrolled) .logo-link:focus-visible,
.site-header:not(.scrolled) .hamburger:focus-visible,
.site-header:not(.scrolled) .logo-text:focus-visible { outline-color: #fff; }

/* ---------- ④ 键盘焦点：全站统一可见 ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
    border-radius: 6px;
}
.hero-trust a:focus-visible,
.site-footer a:focus-visible { outline-color: #fff; }

/* ---------- ⑤ 锚点定位避开固定头部 ---------- */
html { scroll-padding-top: calc(var(--header-height) + 16px); }

/* ---------- ⑥ 案例字母徽标：单字，不与卡片标题重复 ---------- */
.case-featured-logo,
.case-row-logo,
.wb-case-logo {
    font-weight: 800;
    letter-spacing: 0;
    font-size: 1.3rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-050) 0%, #DBE8F6 100%);
    color: var(--primary-700);
}

/* ---------- ⑦ 触控目标尺寸 ---------- */
.hamburger {
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
}


/* ---------- ⑧ 首页 Hero 信任条：图标与文字同行、销售热线 ---------- */
/* 原本 24px 图标作为行内元素会把整行撑到 49px 并把图标顶到文字上方，
   统一为 inline-flex + 16px 图标，图标与文字严格居中对齐 */
.hero-trust > span:not(.divider),
.hero-trust > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    line-height: 1.2;
}
.hero-trust .ico {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
.hero-trust .divider {
    height: 16px;
}

/* 全局 a 为品牌蓝，在深蓝 Hero 上会失去对比，需单独覆盖 */
.hero-trust > a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .2s ease;
}
.hero-trust > a strong {
    color: #fff;
    font-weight: 600;
}
.hero-trust > a:hover {
    color: #fff;
}
.hero-trust > a:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- ⑨ 内页 Hero 副标题：断行优化 ---------- */
/* 原 max-width:600px 下该行文字本身宽 598px，余量仅 2px，
   在 Windows（中文字形更宽）下会把末尾「业。」挤到第二行。
   1) 放宽到 680px，留出约 13% 余量；
   2) text-wrap:balance 让必须换行时各行长度均匀，避免末行只剩 2~3 字；
   不支持该属性的浏览器自动忽略，回退为正常换行，不影响布局 */
.page-hero p {
    max-width: 680px;
    text-wrap: balance;
}

/* ---------- ⑩ 定价页「活动说明」链接 ---------- */
/* 原为纯文字 .pc-info（#66727F，在活动条渐变底上仅 4.35:1，略低于 AA），
   改为链接后统一用品牌蓝，对比度提升到 6.2:1 以上，并加下划线表明可点 */
.pc-info-link {
    font-size: .78rem;
    color: var(--primary-600);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: rgba(0, 89, 168, .38);
    padding: 6px 2px;
    border-radius: 4px;
    transition: color .18s ease, text-decoration-color .18s ease;
}
.pc-info-link:hover {
    color: var(--primary-700);
    text-decoration-color: currentColor;
}

/* ---------- ⑪ 活动规则页列表编号 ---------- */
/* 全局 ul,ol{list-style:none} 会吃掉 .act-list 的序号，
   规则类文档需要 1./2./3. 编号便于引用，这里显式恢复 */
.act-list {
    list-style: decimal;
    padding-left: 2em;
}
.act-list li::marker {
    color: var(--primary-600);
    font-weight: 700;
}

/* ---------- ⑫ 首页价格区块：限时活动入口 ---------- */
/* 与定价页 .pc-promo 同一套活动条视觉语言，让两处活动信息像同一个体系 */
.price-promo-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 760px;
    margin: 28px auto 0;
    padding: 12px 18px;
    background: linear-gradient(135deg, #F3F8FD 0%, #EAF2FA 100%);
    border: 1px solid #D5E5F3;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.7;
    color: #4A6B87;
    text-align: center;
}
/* 全局重置 img,svg{display:block} 会让图标独占一行，这里恢复行内 */
.price-promo-text .ico {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 3px;
    color: var(--primary-600);
}
.price-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-600);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(0, 89, 168, .38);
    text-underline-offset: 3px;
    padding: 4px 2px;
    transition: color .18s ease, text-decoration-color .18s ease;
}
.price-promo-link .ico {
    width: 14px;
    height: 14px;
    transition: transform .18s ease;
}
.price-promo-link:hover {
    color: var(--primary-700);
    text-decoration-color: currentColor;
}
.price-promo-link:hover .ico {
    transform: translateX(3px);
}

/* ---------- ⑬ 页脚：限时活动规则入口 ---------- */
/* 临时活动入口，模板静态项（不入导航表）；活动结束删 footer.php 对应一行即可 */
.footer-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.footer-promo-tag {
    font-style: normal;
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .02em;
    padding: 1px 5px;
    border-radius: 3px;
    /* 深色页脚上用半透明白，避免品牌蓝与背景同色系糊在一起 */
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .92);
}

/* ---------- ⑮ 第二阶段：卡片与层级归一化 ---------- */
/* 原则：只统一「同语义、同层级、会并排出现」的属性；
   深色区块卡、品牌渐变卡、价格高亮卡的背景与强调色保持差异化。 */
:root {
    /* 卡片悬浮抬升：吸收 value-card / product-card 两处硬编码的中间值 */
    --shadow-card-lift: 0 16px 40px rgba(0,72,144,.14), 0 6px 16px rgba(15,31,51,.06);
}

/* --- 内边距：9 档收敛为 3 档（改动幅度均 ≤6px，不改变版式节奏） --- */
/* 宽松档：区块级大卡 / 报价卡 */
.price-preview-card,
.wb-split-card,
.value-card,
.product-card {
    padding: 34px 30px;
}
/* 标准档：绝大多数内容卡 */
.wb-cap-card,
.wb-suite-card,
.wb-scene-card,
.wb-case-card,
.wb-security-card,
.sol-card,
.case-featured-card,
.pc-card {
    padding: 30px 28px;
}
/* 紧凑档：二级卡片 */
.wb-platform-card,
.sol-role-card {
    padding: 24px 22px;
}

/* --- 圆角：消除 18px 硬编码，回归两档令牌 --- */
.pc-card {
    border-radius: var(--radius-lg);
}

/* --- 阴影：硬编码改为令牌，消除「数值相近但写法不同」的漂移 --- */
.pc-card {
    box-shadow: var(--shadow-sm);
}
.value-card:hover,
.product-card:hover {
    box-shadow: var(--shadow-card-lift);
}

/* --- 卡片标题：12 个同级 h3 从 .98-1.38 收敛为两档 --- */
/* 标准内容卡 */
.wb-cap-body h3,
.wb-suite-card h3,
.wb-scene-card h3,
.wb-security-card h3,
.wb-split-card h3,
.sol-card h3,
.sol-role-card h3,
.case-featured-card h3,
.wb-scene-detail-card h3,
.wb-governance-body h3 {
    font-size: 1.15rem;
    line-height: 1.45;
}
/* 主推卡：报价卡 / 首页业务卡 / 深色品牌卡 / 套餐主卡 */
.price-preview-card h3,
.contact-info-card h3,
.wb-scenario-card h3,
.suite-card-copy h3 {
    font-size: 1.3rem;
    line-height: 1.38;
}

/* ---------- ⑯ 深色区块：跨 Hero 变体的透明度归一 ---------- */
/* 问题：同一个「次要按钮」在首页 / WorkBuddy / 小程序 三个 Hero 上
   各自写了一套值（边框 .32 / .42 / .5，hover .12 / .18 / .16），
   属同一组件无理由漂移。标签同理（.94/.9、.25/.16）。此处归为一套。 */
.btn-outline,
.hero-buttons .btn-outline,
.wb-hero-actions .btn-outline,
.wx-hero-actions .btn-outline,
.page-hero-actions .btn-outline,
.cta-buttons .btn-outline {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .45);
    color: rgba(255, 255, 255, .9);
}
.btn-outline:hover,
.hero-buttons .btn-outline:hover,
.wb-hero-actions .btn-outline:hover,
.wx-hero-actions .btn-outline:hover,
.page-hero-actions .btn-outline:hover,
.cta-buttons .btn-outline:hover {
    background-color: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

.wb-tag,
.wx-tag {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .92);
}
.wb-tag:hover,
.wx-tag:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .35);
}

/* Hero 信任条：主容器 .7 与内部链接 .72 差 2%，无意义，统一 */
.hero-trust { color: rgba(255, 255, 255, .72); }

/* ---------- ⑰ 关于我们：官方授权资质区块 ---------- */
/* 证书是横向 2000×1414 原件，1400×989 输出；桌面左侧信息、右侧裱框图，
   1024 以下单列并把证书提到上方（证据先行） */
.auth-cert-section {
    background:
        radial-gradient(ellipse 60% 50% at 85% 8%, rgba(0,72,144,.05) 0%, transparent 62%),
        linear-gradient(180deg, #F7FAFD 0%, #FFFFFF 100%);
    border-top: 1px solid var(--primary-050);
}
.auth-cert-grid {
    display: grid;
    grid-template-columns: 372px 1fr;
    gap: 52px;
    align-items: center;
}
.auth-cert-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--primary-700);
    background: var(--primary-050);
    border: 1px solid var(--primary-100);
    border-radius: 999px;
    padding: 5px 14px 5px 11px;
    margin-bottom: 18px;
}
.auth-cert-eyebrow .ico { width: 15px; height: 15px; flex: 0 0 auto; }
.auth-cert-title {
    font-size: clamp(1.32rem, 2.2vw, 1.6rem);
    line-height: 1.42;
    color: var(--text-dark);
    font-weight: 800;
    margin: 0 0 14px;
}
.auth-cert-lead {
    font-size: .96rem;
    line-height: 1.8;
    color: var(--text-body);
    margin-bottom: 22px;
}
.auth-cert-meta {
    margin: 0 0 20px;
    border-top: 1px solid var(--primary-050);
}
.auth-cert-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--primary-050);
}
.auth-cert-row dt {
    flex: 0 0 96px;
    font-size: .84rem;
    color: var(--text-light);
    margin: 0;
}
.auth-cert-row dd {
    margin: 0;
    font-size: .92rem;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.5;
}
.auth-cert-no {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .97rem;
    letter-spacing: .04em;
    color: var(--primary-700);
}
.auth-cert-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .84rem;
    line-height: 1.7;
    color: var(--text-gray);
    background: var(--primary-050);
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 22px;
}
.auth-cert-hint .ico { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--primary-600); }

/* 证书：白卡裱框，避免横图直接贴在浅色底上显得漂浮 */
.auth-cert-figure {
    margin: 0;
    background: #fff;
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: 0 18px 48px rgba(0, 72, 144, .10), 0 4px 12px rgba(15, 31, 51, .05);
}
.auth-cert-zoom {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
}
.auth-cert-zoom img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.auth-cert-zoom:hover img { transform: scale(1.018); }
.auth-cert-zoom:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 3px; }
.auth-cert-figure figcaption {
    text-align: center;
    font-size: .78rem;
    color: var(--text-light);
    letter-spacing: .02em;
    padding-top: 11px;
}

@media (max-width: 1024px) {
    .auth-cert-grid { grid-template-columns: 1fr; gap: 34px; }
    .auth-cert-figure { order: -1; }
}
@media (max-width: 767px) {
    .auth-cert-figure { padding: 10px; border-radius: 16px; }
    .auth-cert-row dt { flex: 0 0 84px; }
    .auth-cert-title br { display: none; }
    .auth-cert-hint { font-size: .8rem; padding: 10px 12px; }
    .auth-cert-lead { font-size: .93rem; }
}

/* ---------- ⑱ 关于我们：富文本列表与自定义圆点叠加（双圆点） ---------- */
/* 成因：values 区块由后台以 .rich-text 包裹输出，而 .rich-text ul 用
   list-style: disc !important 恢复默认标记，同时 .about-content li::before
   又画了一个品牌蓝圆点 —— 两个圆点同时出现在同一行。
   只在 about 页作用域内取消默认标记，保留品牌蓝圆点；其它页 .rich-text 不受影响。 */
.about-content .rich-text ul {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0;
}

/* ---------- ⑲ 移动端抽屉：全视口高度与滚动加固 ---------- */
/* 主因已从结构上修复（抽屉移出 <header>，避免 backdrop-filter 成为 fixed 包含块）。
   这里补两点运行时健壮性：
   1) 100dvh —— iOS / Android 地址栏伸缩时高度随之收敛，避免底部菜单项被地址栏挡住；
      不支持 dvh 的旧浏览器会忽略该声明，仍由 top:0 / bottom:0 决定高度。
   2) overscroll-behavior-y —— 抽屉内滚到底时不把滚动传给背后的页面。 */
.mobile-menu {
    height: 100dvh;
    max-height: 100dvh;
    overscroll-behavior-y: contain;
}

/* 抽屉内的电话入口与说明：底部留出安全区，避免被 iPhone home 指示条压住 */
.mobile-cta-note {
    padding-bottom: env(safe-area-inset-bottom);
}

/* 抽屉在极窄/极矮视口（如 320×480）下靠滚动展示全部条目，
   同时保证最后一项与滚动边界之间留出可点按的余量 */
@media (max-width: 767px) {
    .mobile-menu .mobile-nav-list { padding-bottom: 4px; }
}

/* ---------- ⑳ 联系信息：长地址/长文本的中文断行 ---------- */
/* 默认中文可在任意字间断行，公司地址会被拆成「…3467号万 / 达广场A座…」这种断法。
   keep-all 禁止 CJK 在字间断行，只在 <wbr> 或标点/空格处折行；
   overflow-wrap: anywhere 作为兜底，极窄视口放不下时仍可硬断，不会横向溢出。 */
.info-detail value {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* ---------- ㉑ 联系表单：验证码行在窄屏不再撑破页面 ---------- */
/* 原为内联样式 width:160px + gap:12px + 图片 140px，320 视口下整行 312px > 可用 288px，
   把整页撑出 35px 横向滚动。改为类 + 窄屏换行：输入框独占一行，验证码图换到下一行。 */
.captcha-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.captcha-input {
    width: 160px;
    letter-spacing: 3px;
    font-size: 16px;
    text-transform: uppercase;
    flex: 0 1 auto;
}
.captcha-img {
    height: 48px;
    border-radius: 6px;
    border: 1px solid #ddd;
    cursor: pointer;
    flex: 0 0 auto;
}
@media (max-width: 400px) {
    .captcha-row { flex-wrap: wrap; gap: 10px; }
    .captcha-input { width: 100%; }
    .captcha-img { height: 44px; }
}

/* ---------- ㉒ 首页场景区副标题：消除「用。」孤字 ---------- */
/* .section-subtitle 全局 max-width:640px，而「场景取自真实业务现场…可直接复用。」这一句
   单行实测 662px，只差 22px 就断行，于是最后两个字「用。」被挤到第二行成为孤字，
   视觉上像排版失误。容器可用宽度为 1160px（1200 - 20×2），放宽到 700px 不会撑破布局，
   且 662 + 约 38px 余量可覆盖 Windows / Android 上中文字体度量差异。
   text-wrap: balance 作为兜底：万一在某些视口仍需折行（如平板），两行会被均分，
   不会再出现第二行只剩一两个字的孤字。 */
.wb-scene-section .section-subtitle {
    max-width: 700px;
    text-wrap: balance;
}

/* ---------- ㉓ 套件卡片描述：「计」孤字消除 ---------- */
/* 「安全与效能运营平台」卡片的描述「组织与个人办公效能分析、企业 AI 数据安全审计」共 24 字，
   单行实测 316px，而卡片内文框只有 313px（卡宽 371 − 左右内边距 28×2 − 边框 1×2），
   仅差 3px 就把末字「计」挤到第二行。
   卡片内边距来自「标准档」统一令牌 30px 28px，被 8 种卡型共用，不能直接改；
   这里只对套件网格内的卡片把左右内边距收到 24px（原始设计值本就是 26px），
   内文框变为 321px，留 5px 余量，且 h3 与 p 左对齐关系不变。
   选择器用 .wb-suite-grid 而非 .wb-suite-section：product.php 的卡片
   不在 .wb-suite-section 内，但同样使用 .wb-suite-grid。 */
.wb-suite-grid > .wb-suite-card {
    padding-left: 24px;
    padding-right: 24px;
}

/* 折行策略：在「1/2 列（≤999px）」与「三列宽档（≥1200px）」启用 text-wrap: balance，
   中间的 1000–1199px 保持浏览器贪心折行。依据实测（normal / balance / pretty 三档各跑一遍）：
   · normal  @1440 卡片1「腾讯文档」断成 320+29px，末行只剩「辑器」，是孤行；
             @430 断成 335+15px，末行只剩「器」；
   · balance @1440 卡片1 变 176+173px，孤行消失；此区间卡片5 已是单行（316px 放得下），不受影响；
             @430 卡片1 变 176+173，孤行消失；
   · balance @1024 卡片5 被切成 147+169px，把「分析」拆成「分 / 析」，
             反而不如贪心折行（后者断在「企业 AI」之后）；
   · pretty  三档均与 normal 完全一致，对中文完全不起作用，不采用。
   所以只在「卡片够宽、描述要么单行要么确实过长」的两段区间启用 balance；
   三列窄档里贪心折行把行填得更满、断点落在标点或西文之后，读起来更顺。
   卡片5 描述需 316px，文本盒 = 列宽 − 50px，容器内容宽 = min(1200, 视口) − 40，
   解得视口 ≥ 1200px 时文本盒 321px、该描述必然单行，因此把宽档断点定在 1200px。 */
@media (min-width: 1200px), (max-width: 999px) {
    .wb-suite-card p {
        text-wrap: balance;
    }
}

/* ========================================================================
   ㉔ 首页横幅轮播（2026-10-21）
   ------------------------------------------------------------------------
   改造目标：把首页横幅从「单张静态」变成「两张轮播」，第 1 张内容原样保留，
   第 2 张为腾讯 WorkBuddy 海报；要求切换顺畅、显示效果统一、响应式适配。

   高度稳定性靠一条关键规则实现：
   · 第 1 张（.home-hero-slide:first-child，注意 HTML 里 data-hero-slide 是
     无值属性，不能写 [data-hero-slide="0"]，那样匹配不到）留在文档流里，由它撑出横幅高度；
   · 其余张用 position:absolute + inset:0 叠在同一个盒子里（高度跟随第 1 张）。
   这样无论当前显示哪一张，横幅高度恒定 —— 切换过程中、切换完成后都不会跳高度，
   也不会因为海报比文案高而把下方「一次订阅」区块顶下去。
   反向做法（grid-area 叠放、由最高者撑高）会让 1440 档横幅从 648px 涨到 690px，
   首屏比例被破坏，所以不采用。

   切换动画只用 opacity 交叉淡入（.55s）：
   · 不用 translateX 位移 —— 第 1 张里的 .hero-panel / .hero-chip 已有
     heroFloat 无限浮动动画，叠加横向位移会显得晃动；
   · 不用 clip / height 动画 —— 会触发重排，移动端掉帧。
   未激活的张同时 visibility:hidden + pointer-events:none，
   并在 JS 里补 inert，避免隐藏张里的链接被 Tab 键聚焦（WCAG 2.4.3）。
   ======================================================================== */
.home-hero-track {
    position: relative;
    width: 100%;
}

.home-hero-slide {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .55s ease, visibility 0s linear .55s;
}

/* 第 1 张在流内，负责撑高 */
.home-hero-track > .home-hero-slide:first-child {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
}

.home-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .55s ease;
}

/* ========================================================================
   活动横幅（轮播 2）：紫色主题 + 左文右图
   ------------------------------------------------------------------------
   与轮播 1 共用同一套骨架 —— 同一 .home-hero-content 栅格（1.05fr / .95fr）、
   同一 max-width 容器、同一 padding、同一 .hero-buttons 间距，
   所以两张切换时文字起点、按钮基线完全对齐，不会出现"页面在抖"的错觉。

   换色方式：不把底色刷在 slide 上。slide 是绝对定位在 .home-hero-track 里的，
   而 track 只占 section 的 padding 内容区（上下还各有 90/80px 的蓝色渐变），
   直接刷会露出上下两条蓝边。改用独立图层 .hero-promo-bg 铺满整个 section，
   由 JS 在 section 上切换 data-hero-theme="promo" 时淡入 —— 整段横幅一起变色，
   且只动 opacity，不触发重排。网格纹理层在它之上，两套底都保留同一层肌理。
   ======================================================================== */
.hero-promo-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background:
        radial-gradient(120% 120% at 10% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, #7A5CF7 0%, #6B4EF4 46%, #5738DD 100%);
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none;
    z-index: 0;
}

.home-hero[data-hero-theme="promo"] .hero-promo-bg { opacity: 1; }

/* ---- 品牌行：应用图标 + WorkBuddy 我帮你 ---- */
.home-hero-slide--promo .promo-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 26px;
    max-width: none;
}

.home-hero-slide--promo .promo-brand-logo {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(30, 12, 90, .3);
    background: #1FCB84;
}

.home-hero-slide--promo .promo-brand-name {
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
}

/* "我帮你" 用同字号但略松的字距，做中英混排的呼吸感 */
.home-hero-slide--promo .promo-brand-name em {
    font-style: normal;
    letter-spacing: 0;
}

/* ---- 描述：比轮播 1 的字重更轻，行距更松，两行结构靠 <br> 固定 ----
   颜色取 92% 白而非参考图的 #D9D1FB：后者在 #6B4EF4 上对比度仅 3.6:1，
   低于 WCAG AA 的 4.5:1；92% 白约 4.65:1，肉眼观感仍是柔和的淡紫白。 */
.home-hero-slide--promo .promo-lead {
    color: rgba(255, 255, 255, .92);
    font-size: clamp(1rem, 1.45vw, 1.16rem);
    line-height: 1.95;
    margin: 0 0 30px;
    max-width: 560px;
}

/* ---- 活动按钮：取参考图 #5071F2，与站点按钮同尺寸同圆角，只换色 ---- */
.home-hero-slide--promo .promo-btn {
    background: #5071F2;
    color: #fff;
    /* 按钮底色（#5071F2）与横幅底（#6B4EF4）亮度接近，边界仅靠色相区分，
       非文本对比不足 3:1（WCAG 1.4.11）。加一圈半透明白描边把形状交代清楚。 */
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 10px 26px rgba(30, 12, 90, .34);
}

.home-hero-slide--promo .promo-btn:hover {
    background: #3F5FE8;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(30, 12, 90, .46);
}

.home-hero-slide--promo .promo-btn .ico {
    transition: transform .25s ease;
}

.home-hero-slide--promo .promo-btn:hover .ico { transform: translateX(4px); }

/* ---- 右侧海报：沿用 .home-hero-visual 的列位，加 3.5° 倾斜做版面张力 ---- */
.home-hero-slide--promo .home-hero-visual--promo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero-slide--promo .promo-poster {
    display: block;
    width: 100%;
    /* 440px 略小于轮播 1 面板的 524px，保证两张的视觉重量在同一档；
       再大会挤到 56px 的列间距。 */
    max-width: 440px;
    height: auto;
    border-radius: 14px;
    transform: rotate(-3.5deg);
    box-shadow: 0 30px 60px rgba(26, 8, 78, .46), 0 0 0 1px rgba(255, 255, 255, .16);
    transition: transform .5s ease, box-shadow .5s ease;
}

.home-hero-slide--promo.is-active .home-hero-visual--promo:hover .promo-poster {
    transform: rotate(-1.5deg) scale(1.02);
    box-shadow: 0 36px 70px rgba(26, 8, 78, .54), 0 0 0 1px rgba(255, 255, 255, .22);
}

/* 窄屏：单列后海报居中，倾斜角度收小，避免左右顶边 */
@media (max-width: 991px) {
    .home-hero-slide--promo .promo-brand { justify-content: center; }
    .home-hero-slide--promo .promo-lead { margin-left: auto; margin-right: auto; }
    .home-hero-slide--promo .promo-poster { max-width: 340px; transform: rotate(-2deg); }
}

@media (max-width: 767px) {
    .home-hero-slide--promo .promo-brand { gap: 12px; margin-bottom: 20px; }
    .home-hero-slide--promo .promo-brand-logo { width: 44px; height: 44px; border-radius: 11px; }
    .home-hero-slide--promo .promo-lead { line-height: 1.85; margin-bottom: 24px; }
    .home-hero-slide--promo .promo-poster { max-width: 320px; }
}

/* 320/375 一档：品牌行会被挤成两行，标题降一档字号 + 图标缩小保住单行；
   同时撤掉描述里的强制换行 —— 这个宽度下每句都会再折一次，
   固定 <br> 只会在第二行尾巴留下"整成果。"这种孤字，交给自然折行更干净。 */
@media (max-width: 400px) {
    .home-hero-slide--promo .promo-brand { gap: 10px; }
    .home-hero-slide--promo .promo-brand-logo { width: 38px; height: 38px; border-radius: 10px; }
    .home-hero-slide--promo .promo-brand-name { font-size: 1.5rem; }
    .home-hero-slide--promo .promo-lead br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-promo-bg { transition: none; }
    .home-hero-slide--promo .promo-poster { transition: none; }
}

/* ---- 控制条：上一张 / 圆点 / 下一张 / 暂停 ---- */
.hero-carousel {
    position: absolute;
    left: 0; right: 0; bottom: 26px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    pointer-events: none;
}

.hero-carousel > * { pointer-events: auto; }

.hero-carousel-arrow,
.hero-carousel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.hero-carousel-arrow svg { width: 20px; height: 20px; }
.hero-carousel-toggle svg { width: 17px; height: 17px; }

.hero-carousel-arrow:hover,
.hero-carousel-toggle:hover {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .58);
}

.hero-carousel-arrow:active,
.hero-carousel-toggle:active { transform: scale(.94); }

.hero-carousel-arrow:focus-visible,
.hero-carousel-toggle:focus-visible,
.hero-carousel-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.hero-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-carousel-dot {
    width: 10px; height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .44);
    cursor: pointer;
    transition: width .32s ease, background .32s ease;
}

.hero-carousel-dot:hover { background: rgba(255, 255, 255, .72); }
.hero-carousel-dot.is-active { width: 28px; background: #fff; }

/* 暂停态只换图标，不跳位 */
.hero-carousel-toggle .ico-play { display: none; }
.home-hero.is-paused .hero-carousel-toggle .ico-pause { display: none; }
.home-hero.is-paused .hero-carousel-toggle .ico-play { display: block; }

/* ---- 响应式 ---- */
@media (max-width: 991px) {
    /* 单列后内容变高，底部留出控制条位置 */
    .home-hero { padding-bottom: 96px; }
    .hero-carousel { bottom: 22px; }
}

@media (max-width: 767px) {
    /* 小屏靠圆点 + 左右滑动切换，两侧箭头隐掉，把宽度让给圆点与暂停键 */
    .home-hero { padding-bottom: 80px; }
    .hero-carousel { bottom: 18px; gap: 10px; }
    .hero-carousel-arrow { display: none; }
    .hero-carousel-toggle { width: 34px; height: 34px; }
    .hero-carousel-toggle svg { width: 15px; height: 15px; }
    .hero-poster img { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-slide { transition: none; }
    .hero-carousel-dot { transition: none; }
}

/* ========================================================================
   ㉕ 轮播 3「开通有礼」活动横幅（2026-10-23）
   ------------------------------------------------------------------------
   参考图是 1920×940 的纯白海报：左上角品牌标 + 「开通有礼 / 活动进行中！」，
   下方一只双手持折叠屏手机的实拍。这里把它拆成「左文 / 右图」——
   复用轮播 1、2 的 .home-hero-content 栅格（1.05fr / .95fr）与容器宽度，
   三张切换时文字起点保持同一条竖线，不产生"页面在跳"的错觉。

   与轮播 2 的差异只有两处，其余全部共用：
   · 底色换成白，所以要在白底上重新定义控制条与网格线的颜色（见文末）；
   · 整块是一个 <a>，点任意位置都进「联系我们」。

   图片用 object-fit: cover 填满右栏（450px 高），
   而非按宽度缩放 —— 按宽度只有 277px 高，手机在横幅里会显得又扁又小。
   ======================================================================== */

/* ---- 白底图层 ---- */
.hero-gift-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    /* 左侧品牌绿晕（46% 内衰减到 0）+ 右侧薄荷薄雾。
       右半边这层是给产品图打的底：新图自带「左上淡绿 → 右下近白」的背景，
       如果页面这边是纯白，图片边缘就成一个绿豆色的矩形；铺一层同色系薄雾，
       图片和页面同色，羽化后的边界就彻底看不见了。 */
    background:
        radial-gradient(46% 86% at 2% 56%, rgba(0, 201, 169, .13) 0%, rgba(0, 201, 169, 0) 72%),
        radial-gradient(54% 104% at 86% 46%, rgba(196, 234, 168, .28) 0%, rgba(196, 234, 168, 0) 72%),
        #FFFFFF;
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none;
    z-index: 0;
}

.home-hero[data-hero-theme="gift"] .hero-gift-bg { opacity: 1; }

/* 白底上网格线改深色，保持三张同一层肌理 */
.home-hero[data-hero-theme="gift"] .hero-grid-bg {
    background-image:
        linear-gradient(rgba(17, 24, 32, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 32, .05) 1px, transparent 1px);
}

/* ---- 整块可点 ---- */
.home-hero-slide--gift .gift-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* 让右栏能撑满横幅高度，图片才有 450px 可用 */
.home-hero-slide--gift .home-hero-content {
    height: 100%;
    align-items: stretch;
}

.home-hero-slide--gift .gift-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* ---- 品牌行 ---- */
.home-hero-slide--gift .gift-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    max-width: none;
}

.home-hero-slide--gift .gift-brand-logo {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(0, 169, 141, .22);
}

.home-hero-slide--gift .gift-brand-word {
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #111820;
}

/* ---- 标题 ---- */
.home-hero-slide--gift .gift-title {
    margin: 0 0 20px;
    font-size: clamp(1.95rem, 3.5vw, 2.9rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #111820;
}

/* 参考图的品牌绿 #00C9A9 在白底上只有 2.09:1，直接做文字不达标；
   压深到 #00A98D 后为 3.06:1，过「大字 3:1」这条线，肉眼仍是同一个绿。
   亮绿 #00C9A9 留在下划线与光晕里做点缀。 */
.home-hero-slide--gift .gift-title-green {
    position: relative;
    display: inline-block;
    margin-right: .16em;
    color: #00A98D;
}

.home-hero-slide--gift .gift-title-green::after {
    content: '';
    position: absolute;
    left: .02em; right: .02em; bottom: .04em;
    height: .12em;
    border-radius: 99px;
    background: linear-gradient(90deg, #00C9A9 0%, #6FE7D2 100%);
    transform: scaleX(.92);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22, .8, .28, 1);
}

.home-hero-slide--gift .gift-link:hover .gift-title-green::after { transform: scaleX(1); }

/* ---- 描述 ---- */
.home-hero-slide--gift .gift-desc {
    color: #55606E;
    font-size: clamp(1rem, 1.4vw, 1.14rem);
    line-height: 1.9;
    margin: 0 0 30px;
    max-width: 500px;
}

/* 窄屏（≤360）一句放不下时，中文可以断在任意两字之间，会出现"即享限时开 / 通好礼"
   这种词内断行。把这两段语义完整的短语锁成不可断，浏览器就只会断在它们前面。 */
.home-hero-slide--gift .gift-desc-keep { white-space: nowrap; }

/* ---- 主按钮：深墨底，悬停转品牌绿（绿底配深字仍达 5.4:1） ---- */
.home-hero-slide--gift .gift-cta {
    background: #101A22;
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(16, 26, 34, .22);
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.home-hero-slide--gift .gift-link:hover .gift-cta {
    background: #00A98D;
    color: #04231C;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0, 169, 141, .34);
}

.home-hero-slide--gift .gift-cta .ico { transition: transform .3s ease; }
.home-hero-slide--gift .gift-link:hover .gift-cta .ico { transform: translateX(5px); }

/* ---- 右栏产品图 ---- */
.home-hero-slide--gift .gift-visual {
    position: relative;
    /* 高度锁在内容区（450px）而不是向下溢出到横幅底边：
       试过 +80px 的出屏方案，图片会从 450 变 530，按 cover 缩放的横向裁切量
       从 77px 涨到 184px，手机右侧屏幕正好被栏边切出一条竖线，比"手在内容区底部断开"更难看。
       这里保持 450，横向只裁掉两侧少量手部，手机本体完整。 */
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    /* 竖构图产品图靠右站，左侧留白给文字呼吸 */
    justify-content: flex-end;
    /* 图片自带淡绿背景（左上偏绿、右下近白），不是纯白，压在白底上仍有接缝；
       上沿离图片边只有 1%，所以上边羽化收窄到 3%，下沿（手臂出画）给到 12%。 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 88%, transparent 100%);
}

.home-hero-slide--gift .gift-glow {
    position: absolute;
    top: 8%; right: 0; bottom: 2%; left: 0;
    background: radial-gradient(closest-side, rgba(0, 201, 169, .20) 0%, rgba(0, 201, 169, 0) 72%);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.home-hero-slide--gift .gift-link:hover .gift-glow { opacity: 1; }

.home-hero-slide--gift .gift-photo {
    position: relative;
    display: block;
    /* 竖构图 800×878：高度撑满内容区（450px），宽度按原比例收到约 410px。
       不能写 width:100% —— 那样 cover 会把手机上下各裁掉 60px，机身被切。 */
    width: auto;
    height: 100%;
    margin-left: auto;
    object-fit: cover;
    object-position: 50% 50%;
    transform-origin: 50% 100%;
    transition: transform .7s cubic-bezier(.22, .8, .28, 1);
    /* 左右羽化：左手与右手腕都是被画幅裁断的，硬边一并化掉 */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.home-hero-slide--gift .gift-link:hover .gift-photo { transform: scale(1.035); }

/* ---- 入场：切到本张时文字逐级上浮，图片单独放大淡入 ----
   动画只加在外层容器（.gift-visual / .hero-buttons），
   不直接打在 .gift-photo 与 .gift-cta 上 ——
   否则 animation ... both 的填充值会锁死 transform，悬停位移就失效了。 */
@keyframes giftUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes giftPhotoIn {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.home-hero-slide--gift.is-active .gift-brand { animation: giftUp .5s cubic-bezier(.22, .8, .28, 1) .06s both; }
.home-hero-slide--gift.is-active .gift-title { animation: giftUp .55s cubic-bezier(.22, .8, .28, 1) .14s both; }
.home-hero-slide--gift.is-active .gift-desc { animation: giftUp .55s cubic-bezier(.22, .8, .28, 1) .22s both; }
.home-hero-slide--gift.is-active .hero-buttons { animation: giftUp .55s cubic-bezier(.22, .8, .28, 1) .3s both; }
.home-hero-slide--gift.is-active .gift-visual { animation: giftPhotoIn .8s cubic-bezier(.22, .8, .28, 1) .1s both; }

/* ---- 白底下的控制条：原本为深色底设计的白色描边要换成深色 ---- */
.home-hero[data-hero-theme="gift"] .hero-carousel-arrow,
.home-hero[data-hero-theme="gift"] .hero-carousel-toggle {
    border-color: rgba(17, 24, 32, .14);
    background: rgba(255, 255, 255, .82);
    color: #111820;
    box-shadow: 0 2px 8px rgba(17, 24, 32, .08);
}

.home-hero[data-hero-theme="gift"] .hero-carousel-arrow:hover,
.home-hero[data-hero-theme="gift"] .hero-carousel-toggle:hover {
    background: #FFFFFF;
    border-color: rgba(17, 24, 32, .32);
}

.home-hero[data-hero-theme="gift"] .hero-carousel-dot { background: rgba(17, 24, 32, .22); }
.home-hero[data-hero-theme="gift"] .hero-carousel-dot:hover { background: rgba(17, 24, 32, .42); }
.home-hero[data-hero-theme="gift"] .hero-carousel-dot.is-active { background: #111820; }

.home-hero[data-hero-theme="gift"] .hero-carousel-arrow:focus-visible,
.home-hero[data-hero-theme="gift"] .hero-carousel-toggle:focus-visible,
.home-hero[data-hero-theme="gift"] .hero-carousel-dot:focus-visible { outline-color: #111820; }

/* ---- 响应式 ---- */
@media (max-width: 991px) {
    .home-hero-slide--gift .home-hero-content { height: auto; align-items: center; }
    .home-hero-slide--gift .gift-text { align-items: center; }
    .home-hero-slide--gift .gift-brand { justify-content: center; }
    .home-hero-slide--gift .gift-desc { margin-left: auto; margin-right: auto; }
    .home-hero-slide--gift .gift-visual { height: 364px; max-width: 420px; margin: 6px auto 0; justify-content: center; }
    /* 单列后产品图居中，薄雾也跟着挪到中间偏下，否则会飘在图片右边 */
    .home-hero[data-hero-theme="gift"] .hero-gift-bg {
        background:
            radial-gradient(64% 44% at 6% 34%, rgba(0, 201, 169, .10) 0%, rgba(0, 201, 169, 0) 70%),
            radial-gradient(86% 40% at 50% 62%, rgba(196, 234, 168, .30) 0%, rgba(196, 234, 168, 0) 74%),
            #FFFFFF;
    }
    /* 单列后把两句话的强制换行去掉的话，第一句末尾会多带出第二句的第一个字
       （390 档实测出现"活 / 动"词内断行、320 档出现"即享时开 / 通好礼"）。
       保留 <br>，每句独立成行，断行点始终落在句号上。 */
}

@media (max-width: 767px) {
    .home-hero-slide--gift .gift-brand { gap: 11px; margin-bottom: 18px; }
    .home-hero-slide--gift .gift-brand-logo { width: 44px; height: 44px; border-radius: 11px; }
    .home-hero-slide--gift .gift-title { margin-bottom: 16px; }
    .home-hero-slide--gift .gift-desc { margin-bottom: 24px; line-height: 1.82; }
    .home-hero-slide--gift .gift-visual { height: 320px; max-width: 340px; }
}

@media (max-width: 360px) {
    .home-hero-slide--gift .gift-brand-logo { width: 40px; height: 40px; border-radius: 10px; }
    .home-hero-slide--gift .gift-title { font-size: 1.6rem; }
    .home-hero-slide--gift .gift-visual { height: 272px; max-width: 296px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-slide--gift.is-active .gift-brand,
    .home-hero-slide--gift.is-active .gift-title,
    .home-hero-slide--gift.is-active .gift-desc,
    .home-hero-slide--gift.is-active .hero-buttons,
    .home-hero-slide--gift.is-active .gift-visual { animation: none; }
    .home-hero-slide--gift .gift-photo,
    .home-hero-slide--gift .gift-title-green::after,
    .home-hero-slide--gift .gift-glow,
    .hero-gift-bg { transition: none; }
}

/* ========================================================================
   ㉖ 内页横幅：左文右图（产品介绍 / 产品定价 / 解决方案 / 客户案例 / 联系我们）
   —— 5 个主栏目共用同一套骨架：左侧 eyebrow + h1 + p(+CTA)，右侧一张 3:2 产品图卡。
      差异只放在两处：每页一个 accent 色（eyebrow 药丸），以及各自的插画。
      不覆盖基础 .page-hero，其余内页（关于/新闻/知识库等）保持原样，避免连带回归。
   ======================================================================== */

.page-hero--split { padding: 104px 0 76px; }

/* .page-hero > * 会把子元素统一改成 position: relative，纹理层需要单独压回绝对定位 */
.page-hero--split .hero-grid-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
}

.page-hero--split .page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: 52px;
    align-items: center;
}

.page-hero--split .page-hero-copy { text-align: left; }

/* eyebrow 药丸取该页的 accent 色，配深字 —— 这是 5 张之间唯一的颜色差异 */
.page-hero--split .page-hero-eyebrow {
    background: var(--ph, #34E0C4);
    border-color: transparent;
    color: #06182E;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.page-hero--split h1 {
    font-size: clamp(1.95rem, 3.4vw, 2.6rem);
    margin-bottom: 14px;
    /* 中文可以断在任意两字之间，「让每一家组织，都拥有自己的数 / 字员工」这种词内断行很难看；
       balance 让两行长度接近，断点会落到逗号处。不支持的浏览器保持原样，不影响可用性。 */
    text-wrap: balance;
}

.page-hero--split p {
    margin: 0;
    max-width: 520px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .86);
}

.page-hero--split .page-hero-actions { justify-content: flex-start; margin-top: 28px; }

/* 深蓝底上再放蓝渐变按钮会糊成一片，主按钮改成反白：白底 + 深墨字 */
.page-hero--split .btn-primary {
    background: #FFFFFF;
    color: #0A2A4E;
    box-shadow: 0 12px 26px rgba(1, 12, 30, .28);
}

.page-hero--split .btn-primary:hover {
    background: #FFFFFF;
    color: #0A2A4E;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(1, 12, 30, .34);
}

/* ---- 右侧横幅图（v2）：统一渲染的透明底 PNG，白窗与阴影已烘进图里，
        直接浮在 hero 渐变上；这里不再套白卡，避免出现矩形底色 ---- */
.page-hero-shot {
    position: relative;
    margin: 0;
    background: transparent;
    transition: transform .6s cubic-bezier(.22, .8, .28, 1);
    animation: fade-up .7s ease .12s both;
}

.page-hero-shot img { display: block; width: 100%; height: auto; }

.page-hero--split .page-hero-inner:hover .page-hero-shot {
    transform: translateY(-6px);
}

/* ---- 响应式 ---- */
@media (max-width: 991px) {
    .page-hero--split { padding: 96px 0 60px; }
    .page-hero--split .page-hero-inner { grid-template-columns: 1fr; gap: 30px; }
    /* 单列后文字居中、图卡居中，和基础 .page-hero 的观感一致 */
    .page-hero--split .page-hero-copy { text-align: center; }
    .page-hero--split p { margin: 0 auto; }
    .page-hero--split .page-hero-actions { justify-content: center; }
    .page-hero-shot { width: 100%; max-width: 520px; margin: 0 auto; transform: none; }
}

@media (max-width: 575px) {
    .page-hero--split { padding: 88px 0 50px; }
    .page-hero--split .page-hero-inner { gap: 24px; }
    /* 透明底 PNG 自带留白，窄屏把左右出血收掉一点，图形更饱满 */
    .page-hero--split .page-hero-eyebrow { margin-bottom: 14px; }
    /* 两个按钮在 390 档会折成宽度不一的两行，改成等宽竖排 */
    .page-hero--split .page-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 300px;
        margin: 24px auto 0;
    }
    .page-hero--split .page-hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero-shot { animation: none; transition: none; }
    .page-hero--split .page-hero-inner:hover .page-hero-shot { transform: none; }
}

/* ========================================================================
   ㉗ cases 顶部横幅（2026-10-23）
   ------------------------------------------------------------------------
   视觉规范完全对齐首页轮播 3「开通有礼」：
   · 底色由深蓝渐变改为白底，网格纹换成深色（rgba(17,24,32,.05)）
   · 标题双色：前半深墨 #111820，后半品牌绿 #00A98D + 渐变下划线（同轮播 3）
   · CTA 深墨胶囊 #101A22，悬停转品牌绿（同轮播 3）
   · 图片改为通栏大图：右侧主体、左侧羽化融入白底（嵌套双向 mask，无需 mask-composite）
   页面其余部分（精选案例、筛选栏、CTA 区）零改动，首页轮播也不受影响。
   ======================================================================== */

.page-hero--gift {
    padding: 104px 0 76px;
    /* 白底 + 右侧浅蓝：插画自带 #EAF7FF 底色，页面同色系铺一层，
       图片与横幅之间就没有色块边界了（轮播 3 的薄雾同思路）。 */
    background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 8%,
        var(--hero-tint, #EAF7FF) 26%, var(--hero-tint, #EAF7FF) 100%);
    text-align: left;
    overflow: hidden;
}

/* 深蓝底的老装饰搬到白底上会显脏：白光晕看不见，右上角的蓝色光球必须关掉 */
.page-hero--gift::after { display: none; }

/* 白底上的光晕改成品牌色淡雾，呼应右侧插画的浅蓝底 */
.page-hero--gift::before {
    background:
        radial-gradient(56% 118% at 84% 42%, rgba(120, 196, 255, .26) 0%, rgba(120, 196, 255, 0) 72%),
        radial-gradient(42% 92% at 2% 16%, rgba(0, 169, 141, .10) 0%, rgba(0, 169, 141, 0) 70%);
}

/* 深色网格纹（轮播 3 白底版同参数） */
.page-hero--gift .hero-grid-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(17, 24, 32, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 32, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
    pointer-events: none;
}

/* ---- 通栏大图：外层做左右羽化，内层做上下羽化，两层相乘等于四边柔化 ---- */
.page-hero--gift .wb-hero-art {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    margin: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 98%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 98%, transparent 100%);
}

.page-hero--gift .wb-hero-art img {
    display: block;
    width: 100%;
    height: 100%;
    /* 桌面用 contain：机器人举起的手与头顶都不被画幅裁断；
       缩放后图右边缘正好贴住横幅右边界，左侧留白交给文案。 */
    object-fit: contain;
    object-position: right center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
}

/* ---- 文案层 ---- */
.page-hero--gift .page-hero-inner { position: relative; z-index: 2; }

.page-hero--gift .page-hero-copy { max-width: 660px; text-align: left; }

.page-hero--gift h1 {
    color: #111820;
    font-size: clamp(1.95rem, 3.5vw, 2.9rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.01em;
    margin-bottom: 20px;
}

/* 品牌绿强调词（仅保留颜色，不带下划线） */
.page-hero--gift .wb-hero-em {
    color: #00A98D;
}

.page-hero--gift p {
    color: #55606E;
    font-size: clamp(1rem, 1.4vw, 1.14rem);
    line-height: 1.9;
    margin: 0;
    max-width: 560px;
}

/* 补充句：弱化一档，避免与主句抢层级 */
.page-hero--gift p.wb-hero-sub2 {
    color: #7A8694;
    margin-top: 6px;
}

.page-hero--gift .page-hero-actions { justify-content: flex-start; margin-top: 30px; }

/* ---- CTA：深墨胶囊，悬停转品牌绿（与轮播 3 一致） ---- */
.page-hero--gift .wb-hero-cta {
    background: #101A22;
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(16, 26, 34, .22);
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.page-hero--gift .wb-hero-cta:hover {
    background: #00A98D;
    color: #04231C;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0, 169, 141, .34);
}

.page-hero--gift .wb-hero-cta .ico { transition: transform .3s ease; }
.page-hero--gift .wb-hero-cta:hover .ico { transform: translateX(5px); }

/* ---- 响应式 ---- */
@media (max-width: 991px) {
    .page-hero--gift { padding: 96px 0 60px; }
    /* 窄屏改为竖排结构（文案在上、大图在下），横向渐变会在大图左侧
       留下一条白色竖带，与插画自身的浅蓝底形成色阶断层。
       改成纵向渐变：上部留白、文案区渐入浅蓝，与大图底色自然衔接。 */
    .page-hero--gift {
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 34%,
            var(--hero-tint, #EAF7FF) 72%, var(--hero-tint, #EAF7FF) 100%);
    }
    .page-hero--gift .page-hero-copy { max-width: 100%; text-align: center; margin: 0 auto; }
    .page-hero--gift p { margin: 0 auto; }
    .page-hero--gift .page-hero-actions { justify-content: center; }
    /* 单列后大图落到文案下方：画幅改成 16:10 并配 cover + right，
       缩放比由高度决定 → 纵向不裁（手和头顶完整），横向只裁掉左侧空白，
       机器人反而比等比缩放大一圈。 */
    .page-hero--gift .wb-hero-art {
        position: relative;
        top: auto; right: auto; bottom: auto; left: auto;
        width: 100%;
        aspect-ratio: 2 / 1;
        height: auto;
        /* 平板档按比例会长到 490+ 高，机器人被放得过大；压一个上限，
           盒比例接近原图 2.4:1，cover 几乎不裁切 */
        max-height: 420px;
        margin-top: 30px;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 100%);
    }
    .page-hero--gift .wb-hero-art img { object-fit: cover; object-position: right center; }
    /* 991 档副文一行能排 39 字，太满，收窄一点透气 */
    .page-hero--gift p { max-width: 620px; }
}

@media (max-width: 575px) {
    .page-hero--gift { padding: 88px 0 50px; }
    .page-hero--gift .wb-hero-art { margin-top: 24px; }
}

/* 320 档：强调词 10 个字放不下会掉一个「工」成孤字，
   把标题压到 24.5px 让整句保持一行。 */
@media (max-width: 360px) {
    .page-hero--gift h1 { font-size: 1.53rem; }
}

/* ========================================================================
   ㉘ 产品介绍页改版（2026-10-23）
   ------------------------------------------------------------------------
   视觉规范提炼自「客户案例」板块（cases.php），全部数值与该页保持一致：
   · 卡片：白底 + 1px var(--border) + var(--radius-lg) + var(--shadow-sm)
          hover translateY(-5px) + 边框转 --primary-200 + var(--shadow-md)
   · 方块字标：48×48，radius 12，渐变 primary-050 → primary-100，字 primary-700
   · 分类药丸：.76rem，--bg-soft 底（强调态用 primary-050 + primary-700 字）
   · 行式卡片：左 46×46 方块 + 正文 + 右侧箭头，hover translateY(-2px)
   · 要点区：顶部 1px dashed var(--border)，padding-top 16
   · 网格 gap 24，卡内 padding 30/28，section 纵向 96px
   产品页原有的 wb-suite-* / wb-split-* / wb-governance-* / wb-platform-* 样式保留
   （首页仍在用），本页改用下面这套 wb-product-*。
   ======================================================================== */

/* ---------- 产品页分区底色：白 / 浅蓝 交替，与原页面节奏一致 ---------- */
.wb-product-section { background: var(--bg-white); }
.wb-product-section--alt { background: var(--bg-light); }

/* ---------- 卡片网格 ---------- */
.wb-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wb-product-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 精选卡（同 .case-featured-card） ---------- */
.wb-product-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.wb-product-card:hover { transform: translateY(-5px); border-color: var(--primary-200); box-shadow: var(--shadow-md); }

/* 卡头：左方块 + 右分类药丸 */
.wb-product-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

.wb-product-logo {
    width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary-050), var(--primary-100));
    color: var(--primary-700); font-weight: 800;
}
.wb-product-logo .ico { width: 24px; height: 24px; }
.wb-product-logo--num { font-size: 1.02rem; letter-spacing: .02em; }

/* 分类药丸（同 .case-industry / .wb-governance-label 两种语气） */
.wb-product-tag {
    font-size: .76rem; color: var(--text-gray); background: var(--bg-soft);
    padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
.wb-product-tag--strong { color: var(--primary-700); background: var(--primary-050); font-weight: 700; }

.wb-product-card h3 { font-size: 1.15rem; color: var(--text-dark); margin-bottom: 10px; }
.wb-product-card > p { font-size: .9rem; color: var(--text-gray); line-height: 1.75; margin: 0; }

/* 要点区：虚线分隔（同 .case-featured-metrics 的分隔语言） */
.wb-product-metrics {
    list-style: none; padding: 16px 0 0; margin: 18px 0 0;
    border-top: 1px dashed var(--border);
    display: flex; flex-wrap: wrap; gap: 8px;
}
.wb-product-metrics li {
    font-size: .78rem; color: var(--primary-700); background: var(--primary-050);
    padding: 5px 11px; border-radius: var(--radius-full);
}

/* 平台清单卡（统一底座） */
.wb-product-card--slim h3 { font-size: 1.02rem; margin-bottom: 12px; }
.wb-product-list { list-style: none; padding: 0; margin: 0; }
.wb-product-list li {
    font-size: .88rem; color: var(--text-gray); padding: 5px 0 5px 14px; position: relative;
}
.wb-product-list li::before {
    content: ''; position: absolute; left: 0; top: 13px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--primary-300);
}

/* ---------- 行式卡片（同 .case-row） ---------- */
.wb-product-rows { display: grid; gap: 18px; }
.wb-product-row {
    display: flex; align-items: flex-start; gap: 20px;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.wb-product-row:hover { border-color: var(--primary-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.wb-product-row-logo {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-050); color: var(--primary-700);
}
.wb-product-row-logo .ico { width: 22px; height: 22px; }
.wb-product-row-body { flex: 1; min-width: 0; }
.wb-product-row-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.wb-product-row-head h3 { font-size: 1.08rem; color: var(--text-dark); margin: 0; }
.wb-product-row-body > p { font-size: .9rem; color: var(--text-gray); line-height: 1.75; margin: 0 0 12px; }
.wb-product-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wb-product-points li {
    display: flex; align-items: center; gap: 7px;
    font-size: .84rem; color: var(--text-body);
}
.wb-product-points .ico { width: 15px; height: 15px; flex: 0 0 auto; color: var(--primary); }
.wb-product-row-arrow { flex: 0 0 auto; color: var(--primary); align-self: center; }
.wb-product-row-arrow .ico { width: 20px; height: 20px; }

/* ---------- WMA 平台卡 ---------- */
.wb-product-band {
    margin-top: 26px; padding: 32px;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.wb-product-band-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.wb-product-logo--band { width: 56px; height: 56px; font-size: .92rem; letter-spacing: .04em; }
.wb-product-band-head h3 { font-size: 1.2rem; color: var(--text-dark); margin: 0 0 6px; }
.wb-product-band-head p { font-size: .9rem; color: var(--text-gray); margin: 0; }
.wb-product-band-items {
    list-style: none; padding: 20px 0 0; margin: 0;
    border-top: 1px dashed var(--border);
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
}
.wb-product-band-items li { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--text-body); }
.wb-product-band-items .ico { width: 17px; height: 17px; color: var(--primary); flex: 0 0 auto; }

/* ---------- Hero 次级按钮（浅底上的描边按钮） ---------- */
.page-hero--gift .wb-hero-cta-ghost {
    background: transparent; color: #101A22;
    border: 2px solid rgba(16, 26, 34, .18);
}
.page-hero--gift .wb-hero-cta-ghost:hover {
    background: rgba(16, 26, 34, .06); color: #101A22;
    border-color: rgba(16, 26, 34, .34); transform: translateY(-2px);
}

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
    .wb-product-grid, .wb-product-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .wb-product-band-items { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .wb-product-grid, .wb-product-grid--4 { grid-template-columns: 1fr; }
    .wb-product-row { gap: 14px; padding: 22px 18px; }
    .wb-product-row-arrow { display: none; }
    .wb-product-band { padding: 24px 20px; }
    .wb-product-band-head { gap: 14px; }
}

/* ========================================================================
   ㉙ 联系我们页改版（2026-10-23）
   ------------------------------------------------------------------------
   视觉规范提炼自「客户案例」板块（cases.php），与「产品介绍」板块完全同构：
   · 精选卡：白底 + 1px var(--border) + var(--radius-lg)(20px) + var(--shadow-sm)
             hover translateY(-5px) + 边框转 --primary-200 + var(--shadow-md)
   · 方块字标：48×48，radius 12，渐变 primary-050 → primary-100，字 primary-700
   · 分类药丸：.76rem，--bg-soft 底（强调态 primary-050 + primary-700 字）
   · 行式要点：1px dashed var(--border) 顶部分隔 + padding-top 20
   · 网格 gap 24，卡内 padding 30/28，section 纵向 96px
   旧的 .contact-info-card（深蓝渐变侧卡）/ .info-item / .info-icon 保留未删：
   首页之外的其它模板或历史快照可能仍引用，这里只新增不破坏。
   ======================================================================== */

/* ---------- 分区底色：白 / 浅蓝 交替，与产品介绍板块节奏一致 ---------- */
.wb-contact-section { background: var(--bg-white); }
.wb-contact-section--alt { background: var(--bg-light); }

/* ---------- 联系方式精选卡 ---------- */
.wb-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.wb-contact-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.wb-contact-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
}

/* 卡头：左方块 + 右分类药丸 */
.wb-contact-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

.wb-contact-logo {
    width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary-050), var(--primary-100));
    color: var(--primary-700);
}
.wb-contact-logo .ico { width: 24px; height: 24px; }
.wb-contact-logo--band { width: 56px; height: 56px; }
.wb-contact-logo--band .ico { width: 26px; height: 26px; }

.wb-contact-tag {
    font-size: .76rem; color: var(--text-gray); background: var(--bg-soft);
    padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap;
}

.wb-contact-card h3 { font-size: 1.15rem; color: var(--text-dark); margin-bottom: 10px; }
.wb-contact-value { font-size: .9rem; color: var(--text-gray); line-height: 1.75; margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
.wb-contact-value a { color: var(--primary-700); font-weight: 600; transition: color .25s ease; }
.wb-contact-value a:hover { color: var(--primary); }

/* ---------- 表单区：左表单 + 右承诺，两栏 ---------- */
.wb-contact-layout { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.wb-contact-form-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 34px 32px;
    box-shadow: var(--shadow-sm);
}
.wb-contact-form-card h3 { font-size: 1.3rem; color: var(--text-dark); margin-bottom: 6px; }
.wb-contact-form-sub { font-size: .92rem; color: var(--text-gray); margin-bottom: 26px; }

/* 字段分组：序号方块 + 组名，组间虚线分隔（同案例板块分隔语言） */
.wb-contact-form-group { padding-top: 24px; margin-top: 24px; border-top: 1px dashed var(--border); }
.wb-contact-form-group:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.wb-contact-form-group h4 {
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; color: var(--text-dark); margin-bottom: 16px;
}
.wb-contact-group-no {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-050); color: var(--primary-700);
    font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}

.wb-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wb-contact-field-full { grid-column: 1 / -1; }
.wb-contact-form-group .form-group { margin-bottom: 0; }
.wb-contact-form-group .form-group + .form-group { margin-top: 0; }

/* 提交按钮：深墨胶囊，悬停转品牌绿（与 hero 主 CTA 同一套语言） */
.wb-contact-submit {
    width: 100%; padding: 14px;
    background: #101A22; color: #fff; border-color: transparent;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(16, 26, 34, .18);
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.wb-contact-submit:hover {
    background: #00A98D; color: #04231C; transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0, 169, 141, .3);
}
.wb-contact-submit .ico { width: 18px; height: 18px; }

.wb-contact-privacy { margin-top: 12px; font-size: .82rem; color: var(--text-light); text-align: center; }

/* ---------- 右栏：响应承诺 + 后台补充说明 ---------- */
.wb-contact-aside { display: grid; gap: 18px; }

.wb-contact-promise {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    box-shadow: var(--shadow-sm);
}
.wb-contact-promise-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.wb-contact-promise-head h3 { font-size: 1.2rem; color: var(--text-dark); margin: 0 0 6px; }
.wb-contact-promise-head p { font-size: .9rem; color: var(--text-gray); margin: 0; }

.wb-contact-promise-list {
    list-style: none; padding: 20px 0 0; margin: 0;
    border-top: 1px dashed var(--border);
    display: grid; gap: 12px;
}
.wb-contact-promise-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--text-body); line-height: 1.6; }
.wb-contact-promise-list .ico { width: 16px; height: 16px; color: var(--primary); flex: 0 0 auto; margin-top: 3px; }

/* 后台维护的富文本补充说明 */
.wb-contact-extra {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    box-shadow: var(--shadow-sm);
}
.wb-contact-extra h4 { font-size: 1rem; color: var(--text-dark); margin-bottom: 12px; }
.wb-contact-extra-body { font-size: .88rem; color: var(--text-gray); line-height: 1.8; }
.wb-contact-extra-body p { margin: 0 0 10px; }
.wb-contact-extra-body p:last-child { margin-bottom: 0; }
.wb-contact-extra-body a { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; }
.wb-contact-extra-body strong { color: var(--text-dark); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
    .wb-contact-grid { grid-template-columns: repeat(2, 1fr); }
    .wb-contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .wb-contact-grid { grid-template-columns: 1fr; }
    .wb-contact-fields { grid-template-columns: 1fr; }
    .wb-contact-form-card { padding: 26px 20px; }
    .wb-contact-promise, .wb-contact-extra { padding: 24px 20px; }
    .wb-contact-promise-head { gap: 14px; }
}

/* ---------- 企业微信扫码通道（2026-10-30 新增） ----------
   定位：与上方 6 张联系方式卡并列的「第 7 种联系入口」，但用浅色通栏面板
   与卡片区分层级——扫码是动作，不是信息。配色在品牌蓝底上叠一点企微绿，
   只在提示点与勾选图标上出现，不用大面积绿，避免与全站蓝色体系打架。 */
.wb-contact-wecom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 48px;
    margin-top: 24px;                       /* 与上方卡网格的 gap 同节奏 */
    padding: 38px 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 150% at 100% 0%, rgba(0, 169, 141, .07) 0%, rgba(0, 169, 141, 0) 60%),
        linear-gradient(112deg, var(--primary-tint) 0%, #FAFCFE 54%, #F6FBF9 100%);
    box-shadow: var(--shadow-sm);
}

.wb-contact-wecom-copy { min-width: 0; }

.wb-contact-wecom-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 10px;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: .76rem; font-weight: 600; color: var(--text-gray);
}
.wb-contact-wecom-kicker .ico { width: 14px; height: 14px; color: #009B80; }

.wb-contact-wecom h3 {
    margin: 16px 0 10px;
    font-size: 1.5rem; color: var(--text-dark); letter-spacing: -.01em;
}
.wb-contact-wecom-desc {
    /* 用 em 而非 ch 限宽：中文字宽约等于 1em，ch 只等于「0」宽度，按 ch 限会提前折行 */
    margin: 0 0 20px; max-width: 40em;
    font-size: .95rem; line-height: 1.85; color: var(--text-gray);
}

.wb-contact-wecom-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.wb-contact-wecom-list li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: .9rem; line-height: 1.6; color: var(--text-body);
}
.wb-contact-wecom-list .ico {
    width: 15px; height: 15px; margin-top: 3px;
    color: #009B80; flex: 0 0 auto;
}

/* 二维码卡：白底 + 外扩一圈极淡蓝，读作「浮在面板上的一张纸」 */
.wb-contact-wecom-qr {
    width: 232px; margin: 0; flex: 0 0 auto;
    padding: 14px 14px 15px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 0 0 6px rgba(0, 72, 144, .035), var(--shadow);
}
.wb-contact-wecom-qr img { display: block; width: 100%; height: auto; }
.wb-contact-wecom-qr figcaption {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 11px;
    font-size: .78rem; line-height: 1.5; color: var(--text-light);
}
.wb-contact-wecom-qr figcaption::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #00C08B; flex: 0 0 auto;               /* 在线信号点 */
}
/* 桌面提示「扫码」，触屏提示「长按识别」，各自只出现一种 */
.wb-contact-wecom-hint--touch { display: none; }

@media (max-width: 1200px) {
    .wb-contact-wecom { gap: 34px; padding: 32px 34px; }
}
@media (max-width: 992px) {
    .wb-contact-wecom { padding: 30px 28px; }
    .wb-contact-wecom-qr { width: 212px; }
}
@media (max-width: 768px) {
    .wb-contact-wecom {
        grid-template-columns: 1fr; gap: 26px;
        padding: 26px 20px 28px;
    }
    .wb-contact-wecom h3 { font-size: 1.28rem; margin-top: 14px; }
    .wb-contact-wecom-desc { margin-bottom: 16px; font-size: .92rem; }
    .wb-contact-wecom-list { flex-direction: column; gap: 9px; }
    .wb-contact-wecom-qr { width: 100%; max-width: 250px; margin: 0 auto; }
}
@media (hover: none), (max-width: 768px) {
    .wb-contact-wecom-hint--mouse { display: none; }
    .wb-contact-wecom-hint--touch { display: block; }
}

/* ========================================================================
   ㉚ 解决方案页改版（2026-10-25）
   ------------------------------------------------------------------------
   目标：与「产品介绍」板块（㉘ 段）**同构**，而不是"看起来像"。
   做法：直接复用产品页的组件类，两页共用同一份规则：
        .wb-product-grid / .wb-product-card / .wb-product-top
        .wb-product-logo / .wb-product-tag / .wb-product-rows
        .wb-product-row / -row-logo / -row-body / -row-head / -points / -row-arrow
   本段只补产品页没有的 5 个小结构：
        .wb-sol-section     分区底色（白 / 浅蓝交替，值同 .wb-product-section）
        .wb-sol-card        卡片本体转为 <a>，需要 flex 列 + 颜色复位
        .wb-sol-metrics     三列指标（值大 + 标签小，虚线顶部分隔）
        .wb-sol-scenes      场景药丸（沿用 .wb-product-metrics 的药丸语言）
        .wb-sol-link        卡底行动链接（margin-top:auto 让同类卡底部对齐）
        .wb-sol-row         行式卡转为 <a> 的颜色复位
   旧的 .sol-card / .sol-role-card 暂时保留（其它模板或历史快照可能引用），只新增不破坏。
   ======================================================================== */

/* ---------- 分区底色：白 / 浅蓝交替，与产品介绍板块节奏一致 ---------- */
.wb-sol-section { background: var(--bg-white); }
.wb-sol-section--alt { background: var(--bg-light); }

/* ---------- 行业精选卡：整卡即链接 ---------- */
/* 卡片本身是 <a>，需清掉全局链接色与下划线，并改为 flex 列，
   这样 .wb-sol-link 的 margin-top:auto 才能把"查看完整方案"压到卡片底部，
   同排卡片高度不一时底部依然对齐。 */
.wb-sol-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* ---------- 指标区：三列，虚线顶部分隔（同 .wb-product-metrics 的分隔语言） ---------- */
.wb-sol-metrics {
    list-style: none;
    display: grid;
    /* 三列按内容宽度排布 + space-between 把首尾推到卡片两端。
       为什么不用等宽的三列：1200 容器放三张卡，每列只有 97px，
       而「单据与利润逐单可核」这类 9 字标签要 106px —— 等宽必然折行，
       折在「利润」中间（单据与利 / 润逐单可核）比列不对齐难看得多。
       auto 轨道的最大值是 max-content，放得下就不折行；真放不下时
       （窄屏）仍会按 min-content 收缩并在列内换行，不会顶破卡片。 */
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px dashed var(--border);
}
.wb-sol-metrics strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--primary-700);
    line-height: 1.25;
    letter-spacing: -.01em;
}
.wb-sol-metrics em {
    display: block;
    font-style: normal;
    font-size: .74rem;
    color: var(--text-light);
    line-height: 1.4;
    margin-top: 3px;
    /* 万一在窄屏折了行，balance 保证折在中间，而不是把末字甩到下一行 */
    text-wrap: balance;
}

/* ---------- 场景药丸：沿用产品页药丸的尺寸与配色 ---------- */
.wb-sol-scenes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.wb-sol-scenes span {
    font-size: .78rem;
    color: var(--text-body);
    background: var(--bg-soft);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    line-height: 1.5;
}
.wb-sol-scenes .wb-sol-more {
    color: var(--primary-700);
    background: var(--primary-050);
    font-weight: 700;
}

/* ---------- 卡底行动链接 ---------- */
.wb-sol-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--primary-700);
    transition: color .25s ease;
}
.wb-sol-link .ico { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.wb-sol-card:hover .wb-sol-link { color: var(--primary); }
.wb-sol-card:hover .wb-sol-link .ico { transform: translateX(4px); }

/* ---------- 角色行式卡：整行即链接 ---------- */
.wb-sol-row {
    color: inherit;
    text-decoration: none;
}
.wb-sol-row:focus-visible { outline: 3px solid var(--primary-300); outline-offset: 2px; }

/* ---------- 响应式 ---------- */
/* 指标区不随断点改列数：三个指标若变 2 列，第三个会孤零零落到第二行，
   比「字略小」难看得多。窄屏只做两件事：缩小间距、略降字号。 */
@media (max-width: 400px) {
    .wb-sol-metrics { gap: 8px; }
    .wb-sol-metrics strong { font-size: .9rem; }
    .wb-sol-metrics em { font-size: .7rem; }
    .wb-sol-link { padding-top: 16px; }
}

/* ---------- 暖色 hero 修饰：柔光跟着页面色相走 ----------
   公共 .page-hero--gift::before 铺的是「品牌绿 + 浅蓝」两团柔光，
   那是为产品页（薄雾绿 #F7FDF9）/ 联系页（浅蓝 #EAF7FF）配的。
   本页 hero 底色是暖奶油 #FFF7ED（跟主视觉的木质桌面同色系），
   绿/蓝柔光压上去会在左侧形成一块薄荷色，与右侧暖底冷暖不匀。
   因此这里把两团柔光换成页面原有的琥珀色（原 solutions 页 --ph:#FFC46B），
   保持「近白底 + 柔和光晕」的范式不变，只换色相。

   另一处：hero 底色 #FFF7ED 比产品页的 #F7FDF9 更饱和，直接切到下面的白底
   section，下沿会留一条肉眼可见的横向色线（蓝通道差 18/255，实测可辨）。
   解法是在 ::before 里补一层「底端渐白」——::before 是定位元素里树序最靠前的，
   绘制在背景之上、主视觉之下，所以只把背景化白，不影响主视觉本身。
   不能改 section 自己的 background：那条规则在 ≤991px 会切成 180deg，
   在这里覆盖掉会把移动端的纵向渐变弄丢。 */
.page-hero--gift.wb-hero-warm::before {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, #FFFFFF 100%),
        radial-gradient(56% 118% at 84% 42%, rgba(255, 186, 107, .20) 0%, rgba(255, 186, 107, 0) 72%),
        radial-gradient(42% 92% at 2% 16%, rgba(255, 168, 88, .12) 0%, rgba(255, 168, 88, 0) 70%);
}

/* 本页主视觉底部是整条实色木质桌面（不是产品页那种逐渐淡出的插画），
   按公共的 97% 渐隐会直接切在 hero 下沿、形成一条明显硬边。
   这里加大底部渐隐，让桌面像景深一样化进底色。顶部保持克制（4%）。 */
.page-hero--gift.wb-hero-warm .wb-hero-art img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 90%, transparent 100%);
}

/* 320-360 档：三列会把「6.5h→10min」这类长值挤出列外、压到相邻列上。
   此时改为「值 + 标签」同一行的竖排列表 —— 既不遮字，也不会出现
   "两个指标一行、第三个孤零零另起一行"的观感。 */
@media (max-width: 360px) {
    .wb-sol-metrics { grid-template-columns: 1fr; gap: 9px; }
    .wb-sol-metrics li {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 8px;
    }
    .wb-sol-metrics strong { font-size: .92rem; }
    .wb-sol-metrics em { margin-top: 0; font-size: .72rem; }
}

/* =============================================================
   统一样式规范补丁 v2.1 —— 跨页面视觉一致性（仅视觉，不动结构与功能）
   收敛页面级差异：
   ① hero 之后的首个内容区顶部留白统一（消除各页 48/56/60/96px 不一致）
   ② 站内搜索框 / 文章上下篇导航 / 未找到兜底块 / 关于页淡光背景 → token 类
   ============================================================= */

/* ① 首屏 hero 之后的第一个 section 顶部留白统一归零，
      由 hero 自身底部留白（88/76/72px）决定间距，各页面一致 */
.page-hero + .section-padding,
.detail-hero + .section-padding { padding-top: 0; }

/* ②a 站内搜索条（404 / search 共用） */
.search-bar { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.search-bar .search-input {
  flex: 1; width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px; line-height: 1.4; outline: none;
  background: var(--bg-white); color: var(--text-body);
  font-family: inherit; transition: var(--transition-fast);
}
.search-bar .search-input:focus { border-color: var(--primary-300); box-shadow: 0 0 0 3px rgba(0,72,144,.08); }

/* ②b 文章上下篇导航（news_detail） */
.article-pager { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.article-pager a {
  flex: 1; min-width: 200px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; text-decoration: none;
  color: inherit; display: block; transition: var(--transition-fast);
}
.article-pager a:hover { border-color: var(--primary-200); box-shadow: var(--shadow-sm); }
.article-pager .pager-label { font-size: 12px; color: var(--text-light); display: block; }
.article-pager strong { font-size: 14px; color: var(--text-dark); }
.article-pager a.is-next { text-align: right; }

/* ②c 详情页 / 列表页「未找到」兜底块 */
.not-found-block { text-align: center; padding: 80px 0; }
.not-found-block h1 { font-size: 2rem; margin-bottom: 16px; color: var(--text-dark); }
.not-found-block p { color: var(--text-gray); margin-bottom: 28px; }

/* ②d 关于页首屏内容区淡光背景（替代内联） */
.section-padding.bg-glow {
  background:
    radial-gradient(ellipse 70% 45% at 15% 0%, rgba(0,72,144,.035) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 85% 100%, rgba(0,72,144,.025) 0%, transparent 50%),
    #fff;
}

/* ②e 紧凑堆叠：紧贴上一区块的下一区（如 cloud 介绍→网格） */
.section--tight { padding-top: 0; }

/* ②f 404 常用入口居中（替代内联） */
.filter-bar--center { justify-content: center; }