/* ===== 来源: pi\mobile-web\src\assets\styles\style.css ===== */
/* ============================================
   东创华珞律协惩戒系统官网 V3 - 全局样式
   设计理念：政务精工 · 业务导向 · 真实可感
   适配新文案：六大痛点对照 + 七大核心能力 + 双主线流程 + 系统界面真实展示
   ============================================ */

/* ========== 设计令牌 ========== */
:root {
    /* 色彩系统 */
    --c-primary: #165DFF;
    --c-primary-deep: #0E4DCC;
    --c-primary-dark: #0A2540;
    --c-primary-darker: #061A33;
    --c-primary-light: #E8F0FF;
    --c-primary-lighter: #F0F5FF;
    --c-accent: #3B82F6;

    /* 状态色 */
    --c-success: #00B42A;
    --c-warning: #FF7D00;
    --c-danger: #F53F3F;
    --c-info: #0FC6C2;

    /* 文字色阶 */
    --c-text: #1A1A2E;
    --c-text-body: #333333;
    --c-text-mute: #666666;
    --c-text-faint: #999999;
    --c-text-disable: #C9CDD4;

    /* 背景与边框 */
    --c-bg: #FFFFFF;
    --c-bg-alt: #F5F7FA;
    --c-bg-deep: #F8FAFC;
    --c-bg-painpoint: #FFF8F6;        /* 痛点卡片背景 */
    --c-bg-solution: #F0F7FF;         /* 方案卡片背景 */
    --c-bg-value: #F6F4FF;            /* 改变卡片背景 */
    --c-border: #E5E6EB;
    --c-border-light: #F0F1F5;
    --c-border-painpoint: #FFE4DC;
    --c-border-solution: #D6E8FF;
    --c-border-value: #E0D5FF;

    /* 间距 */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;
    --sp-3xl: 64px;
    --sp-4xl: 80px;
    --sp-5xl: 120px;

    /* 字号 — 对标主流网站，PC 端全面放大 */
    --fs-xs: 14px;
    --fs-sm: 14px;
    --fs-base: 15px;
    --fs-md: 16px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fs-4xl: 40px;
    --fs-5xl: 48px;
    --fs-6xl: 60px;

    /* 圆角 */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;

    /* 容器 */
    --cw: 1200px;
    --nav-h: 68px;

    /* 阴影 */
    --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sh-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --sh-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --sh-xl: 0 16px 40px rgba(0, 0, 0, 0.1);
    --sh-primary: 0 8px 24px rgba(22, 93, 255, 0.18);

    /* 过渡 */
    --tr: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --tr-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--c-text-body);
    background-color: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--tr);
}

a:hover { color: var(--c-primary); }

ul, ol { list-style: none; }

img { max-width: 100%; display: block; }

::selection {
    background: var(--c-primary);
    color: #FFFFFF;
}

/* ========== 容器 ========== */
.container {
    width: 100%;
    max-width: var(--cw);
    margin: 0 auto;
    padding: 0 24px;
}

.container-wide {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ========== 板块 ========== */
.section { padding: var(--sp-4xl) 0; }
.section-lg { padding: var(--sp-5xl) 0; }
.section-alt { background-color: var(--c-bg-alt); }
.section-deep { background-color: var(--c-bg-deep); }
.section-dark {
    background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary-darker) 100%);
    color: #FFFFFF;
}

/* 板块标题 */
.s-head {
    text-align: center;
    margin-bottom: var(--sp-3xl);
}

/* 眉签：双侧渐变细线 + 圆点 + 文字（流线型） */
.s-head-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-md);
    color: var(--c-primary);
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: var(--sp-lg);
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-transform: none;
}

.s-head-eyebrow::before,
.s-head-eyebrow::after {
    content: "";
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-primary));
}

.s-head-eyebrow::after {
    background: linear-gradient(90deg, var(--c-primary), transparent);
}

/* 主标题：加粗加大 */
.s-head-title {
    font-size: var(--fs-5xl);
    font-weight: 800;
    color: #0F1A2E;
    letter-spacing: 2px;
    line-height: 1.3;
    margin-bottom: var(--sp-md);
}

/* 标题中强调部分：藏蓝渐变 + 加粗 */
.s-head-title em {
    color: var(--c-primary);
    font-style: normal;
    font-weight: 800;
    background: linear-gradient(135deg, #165DFF 0%, #4D8BFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0 2px;
}

/* 描述：字号加大 */
.s-head-desc {
    font-size: var(--fs-lg);
    color: var(--c-text-mute);
    margin-top: var(--sp-md);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.85;
}

/* ========== 导航栏 ========== */
.navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--nav-h);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c-border-light);
    z-index: 1000;
    transition: box-shadow var(--tr), border-color var(--tr);
}

.navbar.scrolled {
    box-shadow: var(--sh-md);
    border-bottom-color: var(--c-border);
}

.nav-inner {
    max-width: var(--cw);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 品牌标识 */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
    box-shadow: 0 8px 18px rgba(22, 93, 255, 0.22);
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-name {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-primary-dark);
    letter-spacing: 1px;
}

.brand-name span {
    color: var(--c-primary);
}

/* 导航菜单 */
.nav-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-menu a {
    font-size: var(--fs-base);
    color: var(--c-text-body);
    font-weight: 500;
    position: relative;
    padding: 6px 0;
    transition: color var(--tr);
}

.nav-menu a::after {
    content: "";
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--c-primary);
    border-radius: 1px;
    transition: width var(--tr), left var(--tr);
}

.nav-menu a:hover { color: var(--c-primary); }
.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
    left: 0;
}

.nav-menu a.active { color: var(--c-primary); }

/* 汉堡菜单 */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px; height: 36px;
    cursor: pointer;
    background: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    gap: 4px;
}

.nav-toggle span {
    display: block;
    width: 18px; height: 2px;
    background: var(--c-text-body);
    transition: all var(--tr);
}

.nav-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ========== 按钮 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 28px;
    font-size: var(--fs-base);
    font-weight: 500;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all var(--tr);
    letter-spacing: 0.5px;
    text-decoration: none;
}

.btn-primary {
    background: var(--c-primary);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.2);
}

.btn-primary:hover {
    background: var(--c-primary-deep);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(22, 93, 255, 0.32);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
}

.btn-outline:hover {
    background: var(--c-primary-light);
    color: var(--c-primary);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.7);
    color: #FFFFFF;
}

.btn-white {
    background: #FFFFFF;
    color: var(--c-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-white:hover {
    background: #F5F9FF;
    color: var(--c-primary);
    transform: translateY(-1px);
}

.btn-lg { padding: 14px 36px; font-size: var(--fs-lg); }
.btn-sm { padding: 8px 20px; font-size: var(--fs-sm); }

.btn .arrow {
    display: inline-block;
    transition: transform var(--tr);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ========== 卡片通用 ========== */
.card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-xl);
    transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--sh-lg);
    transform: translateY(-2px);
}

.card-flat {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color var(--tr), box-shadow var(--tr);
}

.card-flat:hover {
    border-color: var(--c-primary);
    box-shadow: var(--sh-md);
}

/* ========== 页面通用 ========== */
.page-body { padding-top: var(--nav-h); }

.page-hero {
    background: linear-gradient(180deg, var(--c-bg-alt) 0%, #FFFFFF 100%);
    padding: var(--sp-4xl) 0 var(--sp-3xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-hero::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-border), transparent);
}

.page-hero h1 {
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--sp-md);
    letter-spacing: 1px;
}

.page-hero h1 em {
    color: var(--c-primary);
    font-style: normal;
}

.page-hero-lead {
    font-size: var(--fs-md);
    color: var(--c-text-mute);
    max-width: 680px;
    margin: 0 auto var(--sp-xl);
    line-height: 1.85;
}

/* 面包屑 */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--c-text-faint);
    margin-bottom: var(--sp-md);
}

.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb-sep { color: var(--c-text-disable); }

/* ========== 页脚 ========== */
.footer {
    background: var(--c-primary-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--sp-3xl) 0 var(--sp-xl);
    position: relative;
}

.footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
    opacity: 0.3;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-3xl);
    padding-bottom: var(--sp-2xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand-block {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.footer-brand-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-brand-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-brand-mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
    box-shadow: 0 10px 24px rgba(22, 93, 255, 0.28);
}

.footer-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-brand-name {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #FFFFFF;
}

.footer-brand-subtitle {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.4px;
}

.footer-brand-desc {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
    max-width: 360px;
}

.footer-contact-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-md) var(--sp-xl);
}

.footer-contact-item {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-contact-item strong {
    color: #FFFFFF;
    font-weight: 500;
    font-size: var(--fs-md);
    display: block;
    margin-bottom: 2px;
}

.footer-contact-item .icon {
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-top: 4px;
    color: var(--c-primary-light);
}

.footer-bottom {
    padding-top: var(--sp-xl);
    text-align: center;
}

.footer-bottom p {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: var(--sp-sm);
    line-height: 1.8;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-links a, .footer-links span {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.4);
}

.footer-links a:hover { color: rgba(255, 255, 255, 0.85); }
.footer-links span { color: rgba(255, 255, 255, 0.2); }

/* ========== 滚动渐显动画 ========== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ========== 响应式 ========== */
@media (max-width: 1024px) {
    .container { max-width: 960px; }
}

@media (max-width: 768px) {
    :root {
        --sp-4xl: 56px;
        --sp-3xl: 40px;
        --sp-5xl: 72px;
        --fs-4xl: 32px;
        --fs-3xl: 28px;
    }

    .nav-menu {
        position: fixed;
        top: var(--nav-h);
        left: 0;
        width: 100%;
        background: #FFFFFF;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid var(--c-border);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-menu.open { max-height: 480px; }

    .nav-menu a {
        width: 100%;
        padding: 16px 24px;
        border-bottom: 1px solid var(--c-border-light);
    }

    .nav-menu a::after { display: none; }

    .nav-toggle { display: flex; }

    .nav-right { gap: 16px; }

    .s-head-title { font-size: var(--fs-3xl); }

    .page-hero h1 { font-size: var(--fs-3xl); }

    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
    }

    .footer-contact-list {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
    }
}

@media (max-width: 480px) {
    :root {
        --fs-3xl: 24px;
        --fs-4xl: 28px;
    }

    .brand-name { font-size: var(--fs-md); }
    .s-head-title { font-size: 28px; letter-spacing: 1px; }
    .page-hero h1 { font-size: 26px; }
    .btn-lg { padding: 12px 28px; font-size: var(--fs-md); }
}

/* ===== 来源: pi\mobile-web\src\assets\styles\components.css ===== */
/* ============================================
   V3 组件样式
   痛点对照 / 流程时间轴 / 能力卡 / 场景对比
   ============================================ */

/* ========== Hero 板块 ========== */
.hero {
    position: relative;
    min-height: 640px;
    background: linear-gradient(135deg, #0A2540 0%, #0E3A7A 50%, #165DFF 100%);
    color: #FFFFFF;
    overflow: hidden;
    padding: calc(var(--nav-h) + 80px) 0 100px;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(22, 93, 255, 0.22) 0%, transparent 50%);
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--sp-xl);
    backdrop-filter: blur(8px);
}

.hero-tag-dot {
    width: 6px; height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.05); }
}

.hero-title {
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.5px;
    margin-bottom: var(--sp-xl);
    color: #FFFFFF;
}

.hero-title .highlight {
    background: linear-gradient(135deg, #6FA8FF 0%, #A3C7FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero 关键词：纯白大字，立体浮雕阴刻效果，庄重大气 */
.hero-title .hero-keyword {
    font-size: 1.1em;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 8px;
    line-height: 1.35;
    text-shadow:
        /* 顶层：字顶高光，模拟凸起亮面 */
        0 -1px 0 rgba(255, 255, 255, 0.55),
        /* 内沿：让文字边缘更锐利 */
        0 0 1px rgba(180, 210, 255, 0.35),
        /* 暗面：凹陷暗色，增加压刻感 */
        0 1px 1px rgba(0, 35, 90, 0.45),
        /* 主投影：核心立体阴影 */
        0 2px 4px rgba(0, 25, 75, 0.55),
        /* 深度扩散：柔和的大气投影 */
        0 6px 14px rgba(0, 18, 55, 0.45),
        /* 远景光晕：整体抬升感 */
        0 12px 28px rgba(0, 12, 40, 0.30);
}
.hero-lead {
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, 0.78);
    line-height: 2.0;
    margin-bottom: var(--sp-lg);
}

.hero-actions {
    margin-top: var(--sp-lg);
}

/* ========== 信任指标条（司法徽记风） ========== */
.trust-bar {
    background: #FFFFFF;
    padding: var(--sp-3xl) 0;
    position: relative;
    border-top: 1px solid #E8E2D0;
    border-bottom: 1px solid #E8E2D0;
}

/* 顶部装饰条：居中徽记 + 两侧渐变金线 */
.trust-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: var(--sp-2xl);
}

.trust-ornament .ornament-line {
    flex: 0 0 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #B8964E 50%, transparent 100%);
}

.trust-ornament .ornament-emblem {
    color: #B8964E;
    flex-shrink: 0;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    text-align: center;
    position: relative;
}

.trust-item {
    display: block;
    padding: var(--sp-lg) var(--sp-md);
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border-radius: var(--r-md);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 项与项之间：垂直金线分隔（带渐变消失效果） */
.trust-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: linear-gradient(180deg, transparent 0%, #D4B97A 30%, #B8964E 50%, #D4B97A 70%, transparent 100%);
    opacity: 0.6;
}

.trust-num {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 12px;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
}

.trust-digit {
    font-size: 72px;
    font-weight: 700;
    color: #0F2148;
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(180deg, #0F2148 0%, #1E3A8A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform 0.3s ease;
}

.trust-unit {
    font-size: 26px;
    font-weight: 500;
    color: #B8964E;
    margin-left: 4px;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
    letter-spacing: 2px;
}

/* 数字下方装饰短线 + 中心菱形 */
.trust-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 14px;
}

.trust-divider i {
    display: block;
    width: 36px;
    height: 1px;
    background: #D4B97A;
}

.trust-divider::before,
.trust-divider::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: #B8964E;
    transform: rotate(45deg);
}

.trust-label {
    font-size: 16px;
    font-weight: 500;
    color: #4A5568;
    letter-spacing: 2px;
}

.trust-item:hover {
    background-color: #FAF8F3;
    box-shadow: 0 2px 12px rgba(184, 150, 78, 0.08);
}

/* hover 动效 */
.trust-item:hover .trust-digit {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 12px rgba(184, 150, 78, 0.25));
}

.trust-item:hover .trust-unit {
    color: #8A6F3D;
}

/* ========== 痛点对照板块 ========== */
.painpoint-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg);
}

.painpoint-card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr);
    border-left: 3px solid var(--c-primary);
}

.painpoint-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lg);
}

.pp-head {
    padding: var(--sp-lg) var(--sp-xl);
    background: #FFFFFF;
    border-bottom: 1px solid var(--c-border-light);
    display: flex;
    align-items: center;
    gap: var(--sp-md);
}

.pp-num {
    width: 36px; height: 36px;
    flex-shrink: 0;
    background: var(--c-primary);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.25);
}

.pp-head h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.4;
    flex: 1;
}

/* ========== 流程节点时间线 ========== */
.pp-body {
    padding: var(--sp-md) var(--sp-xl) var(--sp-lg);
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0;
}

.pp-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 6px 0;
}

.pp-timeline-line {
    position: absolute;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: linear-gradient(180deg, #D8DDE5 0%, #E8ECF0 50%, #D8DDE5 100%);
    border-radius: 1px;
}

.pp-node {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: all 0.35s ease;
    border: 2px solid;
    background: #FFFFFF;
    cursor: default;
}

.pp-node-icon {
    width: 16px;
    height: 16px;
}

/* 问题节点：深灰 */
.pp-node-pain {
    border-color: #6B7B8F;
    color: #6B7B8F;
}

/* 解决节点：藏蓝 */
.pp-node-solution {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

/* 效果节点：绿色 */
.pp-node-value {
    border-color: #1A9B5E;
    color: #1A9B5E;
}

/* 节点 hover 动效 */
.pp-node:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.painpoint-card:hover .pp-node-pain:hover {
    background: #6B7B8F;
    color: #FFFFFF;
    border-color: #6B7B8F;
}

.painpoint-card:hover .pp-node-solution:hover {
    background: var(--c-primary);
    color: #FFFFFF;
    border-color: var(--c-primary);
}

.painpoint-card:hover .pp-node-value:hover {
    background: #1A9B5E;
    color: #FFFFFF;
    border-color: #1A9B5E;
}

/* 箭头连接 */
.pp-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #C0CAD5;
    margin: 2px 0;
    position: relative;
    z-index: 2;
    transition: border-color 0.35s ease;
}

.painpoint-card:hover .pp-arrow {
    border-top-color: #9DADC0;
}

/* 右侧内容 */
.pp-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 0;
}

.pp-text {
    font-size: var(--fs-md);
    color: var(--c-text-body);
    line-height: 1.6;
    padding: 9px 0;
    border-bottom: 1px dashed var(--c-border-light);
    margin: 0;
}

.pp-text:last-child {
    border-bottom: none;
}

/* ========== 双主线流程时间轴 ========== */
.flow-tabs {
    display: flex;
    justify-content: center;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-2xl);
    background: var(--c-bg-alt);
    padding: 6px;
    border-radius: var(--r-md);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.flow-tab {
    padding: 10px 28px;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--c-text-mute);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--tr);
    font-family: inherit;
}

.flow-tab.active {
    background: #FFFFFF;
    color: var(--c-primary);
    box-shadow: var(--sh-sm);
    font-weight: 600;
}

.flow-panel { display: none; }
.flow-panel.active { display: block; }

.timeline {
    position: relative;
    padding: var(--sp-xl) 0;
}

.timeline-line {
    position: absolute;
    top: 60px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(22,93,255,0.06) 0%, rgba(22,93,255,0.25) 20%, rgba(22,93,255,0.4) 50%, rgba(22,93,255,0.25) 80%, rgba(22,93,255,0.06) 100%);
    border-radius: 1px;
    overflow: hidden;
}

/* 微光缓扫：低调的流动光泽，类似水面反光 */
.timeline-line::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(22, 93, 255, 0.25), transparent);
    animation: gentleFlow 8s ease-in-out infinite;
    border-radius: 1px;
}

@keyframes gentleFlow {
    0%   { left: -40px; }
    100% { left: calc(100% + 40px); }
}

.timeline-track {
    position: relative;
    display: grid;
    gap: var(--sp-md);
}

.timeline-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    position: relative;
    z-index: 2;
    counter-reset: step-counter;
}

.tl-step {
    position: relative;
    text-align: center;
    padding: 0 var(--sp-sm);
    counter-increment: step-counter;
}

/* 步骤序号：科技感编号 */
.tl-step::before {
    content: counter(step-counter, decimal-leading-zero);
    position: absolute;
    top: 28px; left: 50%;
    transform: translateX(-50%);
    font-family: 'SF Mono', 'Cascadia Mono', 'Fira Code', monospace;
    font-size: 10px;
    font-weight: 700;
    color: rgba(22, 93, 255, 0.35);
    letter-spacing: 1px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    pointer-events: none;
}

.tl-step.highlight::before,
.tl-step.clickable.selected::before {
    color: rgba(22, 93, 255, 0.7);
    text-shadow: 0 0 6px rgba(22, 93, 255, 0.3);
}

.tl-step.clickable:hover::before {
    color: rgba(22, 93, 255, 0.6);
}

.tl-dot {
    width: 16px; height: 16px;
    background: #FFFFFF;
    border: 2.5px solid var(--c-primary);
    border-radius: 50%;
    margin: 52px auto var(--sp-md);
    position: relative;
    z-index: 2;
    transition: all var(--tr);
}

/* 节点外环：科技光环 */
.tl-dot::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 28px; height: 28px;
    border: 1px solid rgba(22, 93, 255, 0.25);
    border-radius: 50%;
    transition: all var(--tr);
    opacity: 0.6;
}

/* 高亮节点：能量核心 */
.tl-step.highlight .tl-dot {
    background: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.15), 0 0 0 10px rgba(22, 93, 255, 0.08), 0 0 20px rgba(22, 93, 255, 0.35);
    transform: scale(1.2);
    animation: coreGlow 2.5s ease-in-out infinite;
}

.tl-step.highlight .tl-dot::before {
    border-color: rgba(22, 93, 255, 0.4);
    transform: translate(-50%, -50%) scale(1);
    width: 32px; height: 32px;
    opacity: 1;
    animation: ringPulse 2.5s ease-in-out infinite;
}

/* 高亮节点星标 */
.tl-step.highlight .tl-dot::after {
    content: "★";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 9px;
    line-height: 1;
    text-shadow: 0 0 4px rgba(255,255,255,0.6);
}

/* 能量核心发光动画 */
@keyframes coreGlow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(22,93,255,0.15), 0 0 0 10px rgba(22,93,255,0.08), 0 0 20px rgba(22,93,255,0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(22,93,255,0.12), 0 0 0 14px rgba(22,93,255,0.05), 0 0 28px rgba(22,93,255,0.5); }
}

@keyframes ringPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; border-color: rgba(22,93,255,0.3); }
    50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; border-color: rgba(22,93,255,0.5); }
}

.tl-label {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    transition: color var(--tr), text-shadow var(--tr);
}

.tl-step.highlight .tl-label {
    color: var(--c-primary);
    text-shadow: 0 0 8px rgba(22,93,255,0.15);
}

.tl-tag {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #FFFFFF;
    background: linear-gradient(135deg, rgba(22,93,255,0.9) 0%, rgba(80,140,255,0.95) 100%);
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 4px;
    opacity: 0;
    transition: opacity var(--tr), transform var(--tr), box-shadow var(--tr);
    box-shadow: 0 2px 8px rgba(22,93,255,0.25);
    letter-spacing: 0.5px;
}

.tl-step.highlight .tl-tag {
    opacity: 1;
    transform: translateY(0);
    animation: tagGlow 2s ease-in-out infinite;
}

@keyframes tagGlow {
    0%, 100% { box-shadow: 0 2px 8px rgba(22,93,255,0.25); }
    50%      { box-shadow: 0 2px 12px rgba(22,93,255,0.45), 0 0 6px rgba(22,93,255,0.2); }
}

/* ========== 科技感流程交互 ========== */

/* 步骤可点击 */
.tl-step.clickable {
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.3s ease;
}

.tl-step.clickable:hover {
    transform: translateY(-4px);
}

.tl-step.clickable:hover .tl-dot {
    box-shadow: 0 0 0 8px rgba(22, 93, 255, 0.15), 0 0 20px rgba(22, 93, 255, 0.3);
}

.tl-step.clickable:hover .tl-dot::before {
    border-color: rgba(22, 93, 255, 0.45);
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.8;
}

.tl-step.clickable:hover .tl-label {
    color: var(--c-primary);
}

/* 选中态：高亮当前，其他淡化 */
.tl-step.clickable.selected {
    transform: translateY(-4px);
}

.tl-step.clickable.selected .tl-dot {
    background: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: 0 0 0 6px rgba(22, 93, 255, 0.18), 0 0 0 14px rgba(22, 93, 255, 0.08), 0 0 0 22px rgba(22, 93, 255, 0.04), 0 0 30px rgba(22, 93, 255, 0.35);
    animation: dotPulse 1.6s ease-in-out infinite;
}

.tl-step.clickable.selected .tl-dot::before {
    border-color: rgba(22, 93, 255, 0.5);
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
    animation: ringPulse 1.6s ease-in-out infinite;
}

.tl-step.clickable.selected .tl-label {
    color: var(--c-primary);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(22, 93, 255, 0.2);
}

/* 其他未选中步骤：只淡化节点，文字保持正常可读 */
.timeline-row.has-selected .tl-step.clickable:not(.selected) .tl-dot {
    border-color: #C8D4E8;
    background: #FFFFFF;
    box-shadow: none;
}

.timeline-row.has-selected .tl-step.clickable:not(.selected) .tl-dot::before {
    border-color: transparent;
    opacity: 0;
}

.timeline-row.has-selected .tl-step.clickable:not(.selected) .tl-label {
    color: var(--c-text);
    font-weight: 500;
}

.timeline-row.has-selected .tl-step.clickable:not(.selected) .tl-tag {
    opacity: 0;
}

/* 脉冲发光动画 */
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(22, 93, 255, 0.18), 0 0 0 14px rgba(22, 93, 255, 0.08), 0 0 0 22px rgba(22, 93, 255, 0.04), 0 0 30px rgba(22, 93, 255, 0.35); }
    50% { box-shadow: 0 0 0 10px rgba(22, 93, 255, 0.12), 0 0 0 20px rgba(22, 93, 255, 0.05), 0 0 0 30px rgba(22, 93, 255, 0.02), 0 0 40px rgba(22, 93, 255, 0.5); }
}

/* 描述面板：玻璃态科技卡片 */
.tl-detail-panel {
    margin-top: var(--sp-2xl);
    padding: var(--sp-xl) var(--sp-2xl);
    background: linear-gradient(135deg, rgba(22, 93, 255, 0.05) 0%, rgba(240, 245, 255, 0.8) 100%);
    border: 1px solid rgba(22, 93, 255, 0.12);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    transition: all 0.35s ease;
    opacity: 0;
    transform: translateY(10px);
}

.tl-detail-panel.visible {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 8px 32px rgba(22, 93, 255, 0.08), 0 0 0 1px rgba(22, 93, 255, 0.06);
}

/* 左侧发光竖线 */
.tl-detail-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-light) 50%, transparent 100%);
}

/* 顶部扫描光 */
.tl-detail-panel::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(22,93,255,0.4), transparent);
    animation: panelScan 3s ease-in-out infinite;
}

@keyframes panelScan {
    0%   { opacity: 0; transform: translateX(-100%); }
    50%  { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(100%); }
}

/* 右上角装饰角标 */
.tl-detail-panel .corner-deco {
    position: absolute;
    top: 8px; right: 8px;
    width: 20px; height: 20px;
    border-top: 2px solid rgba(22,93,255,0.25);
    border-right: 2px solid rgba(22,93,255,0.25);
    border-radius: 0 4px 0 0;
    pointer-events: none;
}

.tl-detail-content {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-lg);
}

.tl-detail-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-primary) 0%, #3B82F6 100%);
    border-radius: var(--r-md);
    color: #FFFFFF;
    animation: iconGlow 2s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(22, 93, 255, 0.15); }
}

.tl-detail-text {
    flex: 1;
}

.tl-detail-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--sp-xs);
    letter-spacing: 0.5px;
}

.tl-detail-desc {
    font-size: var(--fs-base);
    color: var(--c-text-mute);
    line-height: 1.75;
}

/* Tab按钮科技感增强 */
.flow-tab {
    position: relative;
    overflow: hidden;
}

.flow-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
    border-radius: 1px;
}

/* ========== 七大核心能力卡 ========== */
.capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
}

.capability-card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-xl);
    position: relative;
    transition: all var(--tr);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.capability-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--c-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.capability-card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--sh-lg);
    transform: translateY(-3px);
}

.capability-card:hover::before {
    transform: scaleX(1);
}

.cap-icon {
    width: 52px; height: 52px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-md);
}

.cap-num {
    position: absolute;
    top: var(--sp-lg);
    right: var(--sp-xl);
    font-size: var(--fs-3xl);
    font-weight: 800;
    color: var(--c-bg-alt);
    line-height: 1;
    font-family: "Inter", sans-serif;
}

.capability-card h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--sp-sm);
    line-height: 1.5;
}

.capability-card .cap-subtitle {
    font-size: var(--fs-sm);
    color: var(--c-primary);
    font-weight: 500;
    margin-bottom: var(--sp-md);
    padding-bottom: var(--sp-md);
    border-bottom: 1px solid var(--c-border-light);
}

.capability-card .cap-text {
    font-size: var(--fs-base);
    color: var(--c-text-mute);
    line-height: 1.8;
    flex: 1;
}

.capability-card .cap-text ul {
    list-style: none;
    padding: 0;
}

.capability-card .cap-text li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
}

.capability-card .cap-text li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7em;
    width: 8px; height: 2px;
    background: var(--c-primary);
    border-radius: 1px;
}

/* 能力大图版（用于解决方案页） */
.capability-feature {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--sp-2xl);
    align-items: center;
    padding: var(--sp-2xl) 0;
    border-bottom: 1px solid var(--c-border-light);
}

.capability-feature:last-child { border-bottom: none; }

.capability-feature.reverse {
    grid-template-columns: 1.1fr 1fr;
}

.capability-feature.reverse .cf-text { order: 2; }
.capability-feature.reverse .cf-image { order: 1; }

.cf-text { padding: 0 var(--sp-md); }

.cf-tag {
    display: inline-block;
    font-size: var(--fs-sm);
    color: var(--c-primary);
    font-weight: 600;
    letter-spacing: 1.5px;
    margin-bottom: var(--sp-md);
}

.cf-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.45;
    margin-bottom: var(--sp-md);
}

.cf-subtitle {
    font-size: var(--fs-md);
    color: var(--c-text-mute);
    line-height: 1.85;
    margin-bottom: var(--sp-lg);
}

.cf-points {
    margin-bottom: var(--sp-lg);
}

.cf-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: var(--sp-sm) 0;
    font-size: var(--fs-md);
    color: var(--c-text-body);
    line-height: 1.7;
}

.cf-point::before {
    content: "";
    flex-shrink: 0;
    width: 16px; height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23165DFF'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 4px;
}

.cf-quote {
    background: var(--c-bg-solution);
    border-left: 3px solid var(--c-primary);
    padding: var(--sp-md) var(--sp-lg);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-base);
    color: var(--c-text-body);
    line-height: 1.8;
    font-style: normal;
}

.cf-quote strong { color: var(--c-primary); }

.cf-image {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-xl);
    border: 1px solid var(--c-border);
}

.cf-image img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.cf-image:hover img {
    transform: scale(1.02);
}

.cf-image-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 37, 64, 0.85) 100%);
    color: #FFFFFF;
    padding: var(--sp-md) var(--sp-lg);
    font-size: var(--fs-sm);
    letter-spacing: 0.5px;
}

/* ========== 系统截图展示 ========== */
.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-xl);
}

.screenshot-card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: all var(--tr);
    display: flex;
    flex-direction: column;
}

.screenshot-card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--sh-xl);
    transform: translateY(-3px);
}

.sc-image {
    position: relative;
    background: var(--c-bg-alt);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--c-border);
}

.sc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.screenshot-card:hover .sc-image img {
    transform: scale(1.03);
}

.sc-num {
    position: absolute;
    top: var(--sp-md);
    left: var(--sp-md);
    background: rgba(10, 37, 64, 0.85);
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 1px;
    z-index: 2;
    backdrop-filter: blur(8px);
}

.sc-body {
    padding: var(--sp-xl);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sc-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--sp-md);
    line-height: 1.5;
}

.sc-points {
    margin-bottom: var(--sp-lg);
}

.sc-point {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-base);
    color: var(--c-text-body);
    padding: 4px 0;
}

.sc-point::before {
    content: "▸";
    color: var(--c-primary);
    font-size: 12px;
}

.sc-quote {
    background: var(--c-bg-alt);
    border-radius: var(--r-sm);
    padding: var(--sp-md) var(--sp-lg);
    font-size: var(--fs-sm);
    color: var(--c-text-mute);
    line-height: 1.75;
    border-left: 2px solid var(--c-primary);
    margin-top: auto;
}

.sc-quote strong { color: var(--c-primary); font-weight: 600; }

/* ========== 五大核心价值 ========== */
.value-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-md);
}

.value-card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-xl) var(--sp-md);
    text-align: center;
    transition: all var(--tr);
    position: relative;
    overflow: hidden;
}

.value-card::after {
    content: "";
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%; height: 2px;
    background: var(--c-primary);
    transition: transform 0.4s ease;
}

.value-card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--sh-lg);
    transform: translateY(-3px);
}

.value-card:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.value-num {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--c-primary);
    margin-bottom: var(--sp-sm);
    font-family: "Inter", sans-serif;
}

.value-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--sp-sm);
}

.value-text {
    font-size: var(--fs-sm);
    color: var(--c-text-mute);
    line-height: 1.75;
}

/* ========== 岗位场景卡 ========== */
.role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg);
}

.role-card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-xl);
    transition: all var(--tr);
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--sp-lg);
    align-items: flex-start;
}

.role-card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--sh-lg);
}

.role-avatar {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, var(--c-primary-light) 0%, #D6E8FF 100%);
    color: var(--c-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: "Inter", sans-serif;
}

.role-name {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 4px;
}

.role-dept {
    font-size: var(--fs-sm);
    color: var(--c-primary);
    margin-bottom: var(--sp-md);
}

.role-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--sp-md);
    align-items: center;
}

.role-before, .role-after {
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.role-before {
    background: var(--c-bg-painpoint);
    color: var(--c-text-body);
    border-left: 2px solid var(--c-danger);
}

.role-after {
    background: var(--c-bg-solution);
    color: var(--c-text-body);
    border-left: 2px solid var(--c-primary);
}

.role-compare-arrow {
    color: var(--c-primary);
    font-size: var(--fs-lg);
    font-weight: 700;
}

/* ========== 场景化对比 ========== */
.scenario-list {
    display: grid;
    gap: var(--sp-xl);
}

.scenario-card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: all var(--tr);
}

.scenario-card:hover {
    box-shadow: var(--sh-lg);
}

.scenario-head {
    background: linear-gradient(135deg, var(--c-primary-light) 0%, #D6E8FF 100%);
    padding: var(--sp-lg) var(--sp-xl);
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    border-bottom: 1px solid var(--c-border-solution);
}

.scenario-head-num {
    width: 40px; height: 40px;
    background: var(--c-primary);
    color: #FFFFFF;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    font-weight: 700;
    font-family: "Inter", sans-serif;
    flex-shrink: 0;
}

.scenario-head h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}

.scenario-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
}

.scenario-col {
    padding: var(--sp-xl);
}

.scenario-col-label {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--r-xs);
    margin-bottom: var(--sp-md);
}

.scenario-col-before .scenario-col-label {
    background: var(--c-bg-painpoint);
    color: var(--c-danger);
}

.scenario-col-after .scenario-col-label {
    background: var(--c-bg-solution);
    color: var(--c-primary);
}

.scenario-col ul {
    list-style: none;
    padding: 0;
}

.scenario-col li {
    position: relative;
    padding-left: 22px;
    font-size: var(--fs-base);
    color: var(--c-text-body);
    line-height: 1.85;
    margin-bottom: var(--sp-sm);
}

.scenario-col li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.85em;
    width: 12px; height: 2px;
    border-radius: 1px;
}

.scenario-col-before li::before {
    background: var(--c-danger);
}

.scenario-col-after li::before {
    background: var(--c-primary);
}

.scenario-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--c-border) 20%, var(--c-border) 80%, transparent 100%);
    position: relative;
}

.scenario-divider::before {
    content: "→";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    background: var(--c-primary);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 0 0 4px var(--c-bg-alt), 0 4px 12px rgba(22, 93, 255, 0.3);
}

/* ========== 完整介绍版块 ========== */
.intro-box {
    background: linear-gradient(135deg, var(--c-bg-alt) 0%, #FFFFFF 100%);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: var(--sp-2xl) var(--sp-2xl);
    max-width: 920px;
    margin: 0 auto;
}

.intro-box p {
    font-size: var(--fs-md);
    line-height: 2;
    color: var(--c-text-body);
    margin-bottom: var(--sp-md);
}

.intro-box p:last-child { margin-bottom: 0; }

.intro-box strong {
    color: var(--c-primary);
    font-weight: 600;
}

/* ========== CTA 通栏 ========== */
.cta-section {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
    color: #FFFFFF;
    text-align: center;
    padding: var(--sp-3xl) 0;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.cta-section .container {
    position: relative;
    z-index: 1;
}

.cta-section h2 {
    font-size: var(--fs-3xl);
    font-weight: 700;
    margin-bottom: var(--sp-md);
    letter-spacing: 1px;
}

.cta-section p {
    font-size: var(--fs-md);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--sp-xl);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.85;
}

.cta-section .btn + .btn { margin-left: var(--sp-md); }

/* ========== 资质卡 ========== */
.qual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg);
}

.qual-card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-xl);
    transition: all var(--tr);
    display: flex;
    gap: var(--sp-lg);
    align-items: flex-start;
}

.qual-card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--sh-lg);
    transform: translateY(-2px);
}

.qual-icon {
    width: 56px; height: 56px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qual-content { flex: 1; }

.qual-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--sp-sm);
}

.qual-desc {
    font-size: var(--fs-base);
    color: var(--c-text-mute);
    line-height: 1.85;
}

.qual-list {
    margin-top: var(--sp-md);
}

.qual-list li {
    position: relative;
    padding-left: 20px;
    font-size: var(--fs-sm);
    color: var(--c-text-body);
    line-height: 1.85;
    margin-bottom: 4px;
}

.qual-list li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 0;
    color: var(--c-primary);
    font-weight: 700;
}

/* ========== 联系页（V4 极简版） ========== */

/* 左右双栏布局 */
.contact-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
    align-items: start;
    max-width: 960px;
    margin: 0 auto var(--sp-2xl);
}

/* ===== 左侧：联系电话表单 ===== */
.contact-form-card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-2xl);
}

/* 表单顶部引导语（钩子） */
.form-hook {
    text-align: center;
    padding-bottom: var(--sp-xl);
    margin-bottom: var(--sp-xl);
    border-bottom: 1px solid var(--c-border-light);
}

.form-hook-icon {
    width: 56px; height: 56px;
    margin: 0 auto var(--sp-md);
    background: linear-gradient(135deg, rgba(22, 93, 255, 0.06) 0%, rgba(22, 93, 255, 0.12) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hookPulse 3s ease-in-out infinite;
}

@keyframes hookPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.12); }
    50% { box-shadow: 0 0 0 10px rgba(22, 93, 255, 0); }
}

.form-hook-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--sp-sm);
    letter-spacing: 0.5px;
}

.form-hook-desc {
    font-size: var(--fs-base);
    color: var(--c-text-body);
    line-height: 1.75;
    margin: 0;
}

.form-hook-desc strong {
    color: var(--c-primary);
    font-weight: 700;
}

.contact-form-card .form-group {
    margin-bottom: var(--sp-lg);
    position: relative;
}

.contact-form-card .form-group label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-text-body);
    font-weight: 500;
    margin-bottom: var(--sp-sm);
}

.contact-form-card .form-group label .required { color: var(--c-danger); margin-left: 2px; }
.contact-form-card .form-group label .optional {
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
    font-weight: 400;
}

.contact-form-card .form-group input,
.contact-form-card .form-group textarea,
.contact-form-card .form-group select {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--fs-md);
    color: var(--c-text);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-family: inherit;
    transition: all var(--tr);
    outline: none;
}

.contact-form-card .form-group input:focus,
.contact-form-card .form-group textarea:focus,
.contact-form-card .form-group select:focus {
    background: #FFFFFF;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-light);
}

/* 电话输入框放大 */
.form-group-phone label {
    font-size: var(--fs-md) !important;
    font-weight: 600 !important;
}

.form-group-phone input {
    padding: 16px 20px !important;
    font-size: var(--fs-2xl) !important;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    border: 2px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
}

.form-group-phone input:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 4px var(--c-primary-light) !important;
}

.form-group-phone input::placeholder {
    font-size: var(--fs-md);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--c-text-mute);
}

.contact-form-card .form-group textarea {
    min-height: 64px;
    resize: vertical;
    line-height: 1.6;
}

.contact-form-card .btn-block {
    width: 100%;
    padding: 14px;
    font-size: var(--fs-lg);
    margin-top: var(--sp-md);
}

.form-promise {
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--c-text-mute);
    margin-top: var(--sp-md);
    margin-bottom: 0;
}

/* ===== 右侧：企业微信引导卡片 ===== */
.contact-wecom-card {
    position: relative;
    background: linear-gradient(135deg, #F0F4FF 0%, #F8FAFF 100%);
    border: 1px solid rgba(22, 93, 255, 0.12);
    border-radius: var(--r-md);
    padding: var(--sp-2xl);
    text-align: center;
    overflow: hidden;
}

.wecom-badge {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-primary);
    background: rgba(22, 93, 255, 0.08);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: var(--sp-lg);
    letter-spacing: 0.5px;
}

.wecom-icon {
    margin-bottom: var(--sp-md);
    animation: wecomPulse 3s ease-in-out infinite;
}

@keyframes wecomPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.wecom-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--sp-sm);
}

.wecom-desc {
    font-size: var(--fs-base);
    color: var(--c-text-mute);
    line-height: 1.8;
    margin-bottom: var(--sp-xl);
}

.wecom-qrcode {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 2px solid rgba(22, 93, 255, 0.15);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wecom-qrcode-tip {
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
    text-align: center;
    line-height: 1.5;
    margin-top: var(--sp-sm);
}

/* ===== 底部联系方式条 ===== */
.contact-bottom-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2xl);
    padding: var(--sp-xl) var(--sp-2xl);
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    max-width: 960px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.contact-bottom-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: var(--fs-base);
    color: var(--c-text-body);
}

.contact-bottom-item svg {
    flex-shrink: 0;
}

/* ===== 提示 / 蜜罐（保留） ===== */
.form-tip {
    font-size: var(--fs-sm);
    color: var(--c-text-mute);
    margin-bottom: var(--sp-xl);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
}

.form-group {
    margin-bottom: var(--sp-lg);
    position: relative;
}

.form-group label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-text-body);
    font-weight: 500;
    margin-bottom: var(--sp-sm);
}

.form-group label .required { color: var(--c-danger); margin-left: 2px; }

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--fs-md);
    color: var(--c-text);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-family: inherit;
    transition: all var(--tr);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: #FFFFFF;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-light);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

.honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.form-submit {
    margin-top: var(--sp-xl);
}

.form-submit .btn {
    width: 100%;
    padding: 14px;
    font-size: var(--fs-lg);
}

.form-msg {
    padding: var(--sp-md) var(--sp-lg);
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    margin-bottom: var(--sp-lg);
    text-align: center;
    animation: fadeInUp 0.3s ease;
}

.form-msg-success {
    background: #E8F8EE;
    color: var(--c-success);
    border: 1px solid #B5E5C8;
}

.form-msg-error {
    background: #FFECE8;
    color: var(--c-danger);
    border: 1px solid #FFCFC4;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== 隐私政策 ========== */
.privacy-content {
    max-width: 880px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-3xl);
}

.privacy-content h2 {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--c-text);
    margin: var(--sp-2xl) 0 var(--sp-md);
    padding-bottom: var(--sp-sm);
    border-bottom: 2px solid var(--c-primary-light);
}

.privacy-content h2:first-child {
    margin-top: 0;
}

.privacy-content h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-text);
    margin: var(--sp-xl) 0 var(--sp-sm);
}

.privacy-content p {
    font-size: var(--fs-md);
    line-height: 1.95;
    color: var(--c-text-body);
    margin-bottom: var(--sp-md);
}

.privacy-content ul {
    list-style: disc;
    padding-left: 1.8em;
    margin-bottom: var(--sp-md);
}

.privacy-content li {
    font-size: var(--fs-md);
    line-height: 1.95;
    color: var(--c-text-body);
    margin-bottom: 6px;
}

.privacy-content strong {
    color: var(--c-primary);
    font-weight: 600;
}

/* ========== 响应式 ========== */
@media (max-width: 1024px) {
    .painpoint-grid { grid-template-columns: 1fr; }
    .capability-grid { grid-template-columns: repeat(2, 1fr); }
    .value-grid { grid-template-columns: repeat(3, 1fr); }
    .role-grid { grid-template-columns: 1fr; }
    .contact-grid-new { grid-template-columns: 1fr; }
    .capability-feature,
    .capability-feature.reverse { grid-template-columns: 1fr; }
    .capability-feature.reverse .cf-text { order: 1; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
    .trust-item:not(:last-child)::after { display: none; }
}

@media (max-width: 768px) {
    :root {
        --fs-5xl: 34px;
        --fs-4xl: 28px;
        --fs-3xl: 24px;
    }

    .hero { min-height: 540px; padding: calc(var(--nav-h) + 60px) 0 70px; }
    .hero-title { font-size: 30px; letter-spacing: 1px; }
    .hero-lead { font-size: var(--fs-md); }

    .tl-label { font-size: var(--fs-sm); }

    .timeline-line { display: none; }

    .timeline-row { grid-auto-flow: row; gap: var(--sp-md); }

    .tl-step { display: flex; align-items: center; gap: 12px; text-align: left; padding: var(--sp-md) 0; border-bottom: 1px solid var(--c-border-light); }

    .tl-dot { margin: 0; flex-shrink: 0; }

    .tl-step .tl-tag { margin-top: 0; }

    .capability-grid { grid-template-columns: 1fr; }
    .value-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: 1fr 1fr; }

    .scenario-body { grid-template-columns: 1fr; }
    .scenario-divider { width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--c-border), transparent); }
    .scenario-divider::before { display: none; }

    .form-row { grid-template-columns: 1fr; }

    .role-card { grid-template-columns: 1fr; text-align: center; }
    .role-avatar { margin: 0 auto; }

    .footer-contact-list { grid-template-columns: 1fr; }

    .privacy-content { padding: var(--sp-xl); }
}

@media (max-width: 480px) {
    :root {
        --fs-5xl: 28px;
    }

    .hero-title { font-size: 26px; }

    .value-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-item-num { font-size: var(--fs-2xl); }
}

/* ===== 来源: pi\mobile-web\src\assets\styles\mobile-overrides.css ===== */
/* ============================================
   PI 移动端站点覆盖样式
   目标：保持 PC 外端视觉语言一致，仅针对手机屏幕重组布局与节奏
   ============================================ */

:root {
  --cw: 430px;
  --nav-h: 64px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 14px;
  --sp-lg: 20px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-3xl: 40px;
  --sp-4xl: 52px;
  --sp-5xl: 64px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;
  --fs-4xl: 30px;
  --fs-5xl: 34px;
  --fs-6xl: 38px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 22px;
  --sh-md: 0 8px 24px rgba(10, 37, 64, 0.08);
  --sh-lg: 0 16px 40px rgba(10, 37, 64, 0.12);
  --sh-xl: 0 24px 60px rgba(10, 37, 64, 0.16);
}

html {
  background: #eef3fb;
  overflow-x: clip;
}

body {
  font-size: var(--fs-md);
  line-height: 1.72;
  color: var(--c-text-body);
  background:
    radial-gradient(circle at top, rgba(22, 93, 255, 0.08), transparent 32%),
    linear-gradient(180deg, #f4f7fc 0%, #ffffff 28%, #f6f8fc 100%);
  overflow-x: clip;
}

.lam-root {
  position: relative;
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
}

.container,
.container-wide {
  width: 100%;
  max-width: calc(var(--cw) + 32px);
  padding: 0 16px;
}

.section,
.section-lg {
  padding: var(--sp-3xl) 0;
}

.section-dark {
  background:
    radial-gradient(circle at top, rgba(111, 168, 255, 0.18), transparent 28%),
    linear-gradient(160deg, var(--c-primary-dark) 0%, var(--c-primary-darker) 100%);
}

.page-body {
  padding-top: 0;
}

.s-head {
  margin-bottom: var(--sp-2xl);
}

.s-head-eyebrow {
  gap: 10px;
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.s-head-eyebrow::before,
.s-head-eyebrow::after {
  width: 22px;
}

.s-head-title {
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.3;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.s-head-desc {
  max-width: none;
  font-size: var(--fs-md);
  line-height: 1.85;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(229, 230, 235, 0.75);
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.05);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(var(--cw) + 32px);
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 16px;
}

.brand {
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
  max-width: calc(100% - 56px);
}

.brand-mark {
  display: inline-flex;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 5px;
  border-radius: 10px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 15px;
  font-weight: 800;
  color: var(--c-primary-dark);
  line-height: 1.15;
  min-width: 0;
}

.brand-name span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-mute);
  overflow-wrap: anywhere;
}

.nav-right {
  flex-shrink: 0;
  gap: 10px;
}

.nav-toggle {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(22, 93, 255, 0.14);
  border-radius: 14px;
  background: rgba(22, 93, 255, 0.05);
}

.nav-toggle span {
  width: 18px;
  background: var(--c-primary-dark);
}

.nav-menu {
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  right: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(229, 230, 235, 0.92);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 48px rgba(10, 37, 64, 0.12);
  max-height: calc(100dvh - var(--nav-h) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity var(--tr),
    transform var(--tr);
}

.nav-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-menu li {
  width: 100%;
}

.nav-menu a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border-bottom: none;
  font-size: var(--fs-md);
  font-weight: 600;
}

.nav-menu a::after {
  display: none;
}

.nav-menu a.active {
  color: var(--c-primary);
  background: var(--c-primary-lighter);
}

.hero {
  position: relative;
  min-height: auto;
  padding: calc(var(--nav-h) + 18px) 0 28px;
  overflow: hidden;
}

.hero::before {
  opacity: 0.75;
}

.hero-inner {
  max-width: none;
  position: relative;
  padding: 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(6, 26, 51, 0.22);
  box-shadow: 0 18px 48px rgba(3, 16, 34, 0.2);
  backdrop-filter: blur(4px);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.1);
}

.hero-title {
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1.22;
  letter-spacing: 0.4px;
  margin-bottom: 14px;
}

.hero-lead {
  max-width: none;
  font-size: var(--fs-md);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}

.hero-lead br,
.page-hero-lead br {
  display: none;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.hero-actions > * {
  min-width: 0;
}

.btn,
.btn-lg,
.btn-block {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: var(--fs-md);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.trust-bar {
  margin-top: -12px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}

.trust-item {
  min-height: 108px;
  padding: 18px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sh-md);
  border: 1px solid rgba(22, 93, 255, 0.08);
  align-items: center;
}

.trust-item:hover {
  transform: none;
}

.trust-item::after {
  display: none;
}

.trust-num {
  justify-content: center;
  margin-bottom: 8px;
}

.trust-digit {
  font-size: 28px;
}

.trust-label {
  text-align: center;
  font-size: var(--fs-sm);
}

.painpoint-grid,
.capability-grid,
.screenshot-grid,
.value-grid,
.role-grid,
.scenario-list,
.footer-top,
.footer-contact-list,
.contact-grid-new,
.capability-feature,
.capability-feature.reverse {
  grid-template-columns: 1fr;
}

.painpoint-card,
.capability-card,
.value-card,
.role-card,
.scenario-card,
.contact-form-card,
.contact-wecom-card,
.privacy-content,
.intro-box,
.sc-large {
  border-radius: 20px;
  box-shadow: var(--sh-md);
}

.painpoint-card,
.capability-card,
.value-card {
  padding: 18px;
}

.painpoint-card,
.capability-card,
.value-card,
.role-card,
.scenario-card,
.contact-form-card,
.contact-wecom-card,
.privacy-content,
.intro-box,
.sc-large,
.screenshot-card {
  overflow: hidden;
}

.painpoint-card::before,
.capability-card::before,
.value-card::after {
  opacity: 1;
}

.pp-body,
.pp-content {
  gap: 14px;
}

.pp-content {
  display: grid;
}

.flow-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.flow-tab {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: var(--fs-md);
  text-align: center;
  white-space: normal;
  line-height: 1.45;
}

.flow-panel {
  padding: 18px 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sh-md);
  border: 1px solid rgba(22, 93, 255, 0.08);
}

.timeline {
  padding-top: 0;
}

.timeline-line {
  display: none;
}

.timeline-row {
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
  /* 使用整列唯一的时间轴主线，避免每个卡片各自画线导致中间断开。 */
  position: relative;
}

.timeline-row::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 22px;
  bottom: 22px;
  width: 3px;
  background: linear-gradient(180deg, rgba(22, 93, 255, 0.52) 0%, rgba(22, 93, 255, 0.28) 100%);
  border-radius: 999px;
  /* 主线保持高于节点卡片背景，避免被节点卡片遮住。 */
  z-index: 4;
  pointer-events: none;
}

.tl-step {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border: 1px solid var(--c-border-light);
  border-radius: 16px;
  background: #f9fbff;
  text-align: left;
  /* 为时间轴连线提供定位上下文，保证左侧节点与连线严格对应。 */
  position: relative;
  z-index: 2;
}

/* 关闭之前的分段连线，改为 timeline-row 上的一整根主线。 */
.tl-step:not(:last-child)::after {
  content: none;
}

.tl-step.selected {
  background: linear-gradient(135deg, rgba(22, 93, 255, 0.12), rgba(22, 93, 255, 0.03));
  border-color: rgba(22, 93, 255, 0.28);
  box-shadow: 0 10px 24px rgba(22, 93, 255, 0.12);
}

.tl-dot {
  margin: 0;
  /* 圆点仍高于主线，避免主线压住节点中心态。 */
  position: relative;
  z-index: 5;
}

.tl-dot::before,
.tl-dot::after {
  position: absolute;
  z-index: 6;
}

.tl-label {
  font-size: var(--fs-md);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 5;
}

.tl-tag {
  margin-top: 0;
  white-space: nowrap;
  position: relative;
  z-index: 5;
}

/* 高亮节点即使未选中，也要保留“关键节点”标签，避免关键信息丢失。 */
.timeline-row.has-selected .tl-step.clickable.highlight:not(.selected) .tl-tag {
  opacity: 1;
  transform: translateY(0);
}

/* mobile-web 统一采用“节点内展开说明”，不再把说明固定放在底部。 */
.tl-inline-detail {
  display: grid;
  grid-column: 2 / -1;
  gap: 8px;
  margin-top: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(22, 93, 255, 0.06);
  border: 1px solid rgba(22, 93, 255, 0.12);
  position: relative;
  z-index: 5;
}

.tl-detail-panel {
  display: none;
}

.tl-detail-content {
  gap: 14px;
}

.tl-detail-title {
  font-size: var(--fs-lg);
  overflow-wrap: anywhere;
}

.tl-detail-desc {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .tl-step {
    align-items: start;
  }

  .tl-tag {
    grid-column: 2;
    justify-self: start;
  }

  .tl-inline-detail-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-primary-dark);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .tl-inline-detail-desc {
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: var(--c-text-body);
    overflow-wrap: anywhere;
  }

}

.capability-grid {
  gap: 14px;
}

.capability-card .cap-num,
.value-num {
  font-size: 24px;
}

.capability-card .cap-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 14px;
}

.capability-card h3,
.value-title,
.sc-title {
  font-size: var(--fs-xl);
}

.capability-card .cap-subtitle {
  margin-top: 6px;
  margin-bottom: 12px;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.capability-card .cap-text li,
.sc-point,
.value-text {
  font-size: var(--fs-md);
}

.capability-card .cap-text li {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
}

.capability-card .cap-text li::before {
  content: "-";
  position: static;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  background: none;
  color: var(--c-primary);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.75;
  border-radius: 0;
  /* 移动端使用真实字符参与排版，避免伪元素横线与中文文字中线错位 */
  transform: translateY(-1px);
}

.screenshot-card {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sh-md);
}

.sc-image {
  border-radius: 0;
}

.sc-image img {
  width: 100%;
  display: block;
}

.sc-body {
  padding: 16px;
}

.sc-quote {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22, 93, 255, 0.07), rgba(22, 93, 255, 0.02));
}

.value-grid {
  gap: 14px;
}

.value-card {
  padding: 20px 18px;
}

.cta-section {
  padding: 36px 0;
}

.cta-section .container {
  padding: 0 22px;
}

.cta-section h2 {
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.35;
}

.cta-section p {
  font-size: var(--fs-md);
  line-height: 1.9;
}

.cta-section .btn + .btn {
  margin-top: 10px;
  margin-left: 0;
}

.page-hero,
.showcase-hero {
  padding: 20px 0 20px;
  text-align: left;
}

.page-hero .container,
.showcase-hero .container {
  padding-top: 0;
  padding-bottom: 4px;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(22, 93, 255, 0.06);
  font-size: var(--fs-xs);
  margin-bottom: 16px;
  max-width: 100%;
  white-space: nowrap;
}

.page-hero h1,
.showcase-hero h1 {
  font-size: clamp(28px, 8vw, 36px);
  line-height: 1.28;
  text-align: left;
}

.page-hero-lead {
  font-size: var(--fs-md);
  line-height: 1.9;
  text-align: left;
}

.capability-feature,
.capability-feature.reverse,
.sc-large,
.sc-large:nth-child(even) {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.capability-feature {
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(22, 93, 255, 0.08);
  box-shadow: var(--sh-md);
}

.sc-large {
  margin-bottom: 20px;
}

.sc-large-text {
  padding: 0;
}

.sc-large-image {
  order: 1;
  border: 1px solid rgba(22, 93, 255, 0.08);
}

.sc-large-text {
  order: 2;
}

.sc-large-quote {
  margin-top: 16px;
  border-radius: 16px;
}

.capability-feature.reverse .cf-text,
.sc-large:nth-child(even) .sc-large-text,
.sc-large:nth-child(even) .sc-large-image {
  order: initial;
}

.cf-tag,
.sc-large-tag {
  font-size: var(--fs-xs);
  letter-spacing: 1px;
}

.cf-title,
.sc-large-title {
  font-size: var(--fs-2xl);
  line-height: 1.45;
}

.cf-subtitle,
.cf-point,
.sc-large-point,
.sc-large-quote {
  font-size: var(--fs-md);
}

.cf-subtitle {
  line-height: 1.85;
  color: var(--c-text-mute);
}

.cf-points,
.sc-large-points {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.cf-point,
.sc-large-point {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(22, 93, 255, 0.05);
}

.cf-image,
.sc-large-image {
  border-radius: 18px;
  overflow: hidden;
}

.cf-image img,
.sc-large-image img {
  width: 100%;
  display: block;
}

.cf-image-caption {
  padding: 10px 12px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-mute);
  background: rgba(22, 93, 255, 0.04);
}

.role-card {
  gap: 16px;
  padding: 18px;
  text-align: left;
}

.role-avatar {
  margin: 0;
}

.role-compare {
  display: grid;
  gap: 10px;
}

.role-compare-arrow {
  transform: rotate(90deg);
}

.scenario-card {
  padding: 18px;
}

.scenario-head {
  gap: 12px;
}

.scenario-head h3 {
  font-size: var(--fs-xl);
}

.scenario-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.scenario-divider {
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, transparent, var(--c-border), transparent);
}

.scenario-divider::before {
  display: none;
}

/* 让左右两列都按相同行数等高分布，避免因为文案长短不同造成对应项上下错位。 */
.scenario-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scenario-col ul {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.scenario-col li {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  min-height: 100%;
}

.scenario-col li::before {
  top: 50%;
  transform: translateY(-50%);
}

/* 左侧表达线下人工处理，使用减号标记，更接近“待优化事项”的语义。 */
.scenario-col-before li::before {
  content: "-";
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--c-danger);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* 右侧表达系统优化后的方案，使用规整圆点标记，突出更稳定统一的自动化结果。 */
.scenario-col-after li::before {
  content: "";
  left: 2px;
  width: 8px;
  height: 8px;
  background: var(--c-primary);
  border-radius: 50%;
}

.intro-box {
  padding: 20px;
  font-size: var(--fs-md);
  line-height: 1.9;
}

.contact-grid-new {
  gap: 16px;
}

.contact-form-card,
.contact-wecom-card {
  padding: 18px;
  border: 1px solid rgba(22, 93, 255, 0.08);
  min-width: 0;
}

.contact-form-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.contact-wecom-card {
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(22, 93, 255, 0.08), transparent 46%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.form-hook {
  margin-bottom: 18px;
}

.form-hook-desc strong {
  color: var(--c-primary);
}

.form-hook-title,
.wecom-title {
  font-size: var(--fs-xl);
}

.form-group label,
.form-promise,
.wecom-desc,
.wecom-qrcode-tip {
  font-size: var(--fs-sm);
}

.form-group input,
.form-group select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: var(--fs-md);
  box-sizing: border-box;
}

.btn-primary.btn-block {
  box-shadow: var(--sh-primary);
}

.form-promise {
  text-align: center;
  overflow-wrap: anywhere;
}

.form-msg {
  border-radius: 14px;
  overflow-wrap: anywhere;
}

.contact-bottom-bar {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.contact-bottom-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--c-border-light);
  box-shadow: var(--sh-sm);
}

.contact-bottom-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.wecom-qrcode-frame {
  width: 168px;
  height: 168px;
  margin-inline: auto;
}

.wecom-qrcode-image {
  width: 132px;
  height: 132px;
}

.privacy-content {
  padding: 18px;
}

.privacy-content h2 {
  font-size: var(--fs-xl);
  margin-top: 24px;
  margin-bottom: 12px;
}

.privacy-content h3 {
  font-size: var(--fs-lg);
  margin-top: 18px;
  margin-bottom: 10px;
}

.privacy-content p,
.privacy-content li {
  font-size: var(--fs-md);
  line-height: 1.9;
}

.footer {
  padding: 28px 0 34px;
}

.footer-top {
  gap: 18px;
}

.footer-brand-head {
  gap: 12px;
}

.footer-brand-mark {
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: 11px;
}

.footer-brand-name {
  font-size: var(--fs-lg);
  line-height: 1.45;
}

.footer-brand-subtitle {
  font-size: 12px;
  line-height: 1.4;
}

.footer-brand-desc {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.58);
}

.footer-contact-item {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.footer-bottom {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-links {
  display: grid;
  gap: 8px;
  width: 100%;
}

.footer-links-main {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-links-meta {
  gap: 6px;
}

.footer-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.footer-links-main a {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.footer-links-main a:hover,
.footer-links-main a:active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}

.footer-links-meta a {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.46);
  font-size: 12px;
}

.footer-links-meta a:hover,
.footer-links-meta a:active {
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom p,
.footer-brand-desc,
.footer-contact-item,
.footer-contact-item div {
  overflow-wrap: anywhere;
}

.footer-contact-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.footer-contact-item .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.05s;
}

.reveal-delay-2 {
  transition-delay: 0.1s;
}

.reveal-delay-3 {
  transition-delay: 0.15s;
}

@media (max-width: 390px) {
  :root {
    --sp-3xl: 34px;
    --sp-4xl: 46px;
    --fs-2xl: 20px;
    --fs-3xl: 24px;
    --fs-4xl: 28px;
    --fs-5xl: 30px;
  }

  .container,
  .container-wide {
    padding: 0 14px;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .flow-tabs {
    /* 窄屏下仍保持两枚主线标签横向排列，避免退化成上下堆叠。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-inner {
    padding: 20px 16px;
  }

  .tl-step {
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
  }

  .tl-tag {
    grid-column: 2;
    justify-self: start;
  }

  .contact-form-card,
  .contact-wecom-card,
  .flow-panel,
  .capability-feature,
  .sc-large,
  .screenshot-card {
    border-radius: 18px;
  }

  .page-hero,
  .showcase-hero {
    padding-top: 16px;
  }

  .capability-feature,
  .sc-large,
  .screenshot-card,
  .contact-form-card,
  .contact-wecom-card {
    padding: 16px;
  }

  .cf-point,
  .sc-large-point {
    padding: 9px 10px;
  }
}


/* ===== 来源: 页面/组件级 <style>（自动提取） ===== */
/* --- App.vue --- */

.app-shell {
  display: contents;
}

/* --- SiteLayout.vue --- */

.site-layout-shell {
  display: contents;
}

/* --- ContactPage.vue --- */

.form-msg {
  margin-top: 16px;
  margin-bottom: 16px;
}

.wecom-qrcode-image {
  width: 140px;
  height: 140px;
  object-fit: contain;
  display: block;
}

.wecom-qrcode-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wecom-qrcode-frame {
  width: 180px;
  height: 180px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid rgba(22, 93, 255, 0.15);
  border-radius: 12px;
}

.wecom-qrcode-tip {
  margin-top: 12px;
  text-align: center;
  line-height: 1.6;
}

/* --- FaqPage.vue --- */

.faq-section {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--c-bg-alt) 100%);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}

.faq-card {
  padding: var(--sp-lg);
  border-radius: var(--r-lg);
  background: #FFFFFF;
}

.faq-card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 30px;
  padding: 0 12px;
  margin-bottom: var(--sp-md);
  border-radius: 999px;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.faq-card-title {
  margin-bottom: var(--sp-sm);
  color: var(--c-text);
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.faq-card-answer {
  color: var(--c-text-body);
  font-size: var(--fs-md);
  line-height: 1.9;
}

/* --- ScenariosPage.vue --- */

/* 移动端应用场景页去掉角色头像圆标，卡片改为纯文字布局，避免左上角装饰信息冗余。 */
.role-card {
  grid-template-columns: 1fr;
  gap: 0;
}

.role-avatar {
  display: none;
}

.role-avatar.role-1 {
  background: linear-gradient(135deg, #FFE4DC 0%, #FFC4A8 100%);
  color: #B85C3D;
}

.role-avatar.role-2 {
  background: linear-gradient(135deg, #D6E8FF 0%, #A3C7FF 100%);
  color: #0A2540;
}

.role-avatar.role-3 {
  background: linear-gradient(135deg, #E0D5FF 0%, #C4A8FF 100%);
  color: #4B2A8A;
}

.role-avatar.role-4 {
  background: linear-gradient(135deg, #C8F0D6 0%, #8ED9A8 100%);
  color: #1E6B3A;
}

.role-avatar.role-5 {
  background: linear-gradient(135deg, #FFF1D6 0%, #FFD98A 100%);
  color: #8A5A1E;
}

.role-avatar.role-6 {
  background: linear-gradient(135deg, #D6F0F4 0%, #8ED4DE 100%);
  color: #1A4A55;
}

.role-avatar.role-7 {
  background: linear-gradient(135deg, #F4D6E5 0%, #DE8EB8 100%);
  color: #7A2A55;
}

/* --- ShowcasePage.vue --- */

.sc-large {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
  margin-bottom: var(--sp-3xl);
  padding: var(--sp-2xl);
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: all var(--tr);
}

.sc-large:hover {
  box-shadow: var(--sh-xl);
  border-color: var(--c-primary);
}

.sc-large:nth-child(even) {
  grid-template-columns: 1fr 1.4fr;
}

.sc-large:nth-child(even) .sc-large-text {
  order: 2;
}

.sc-large:nth-child(even) .sc-large-image {
  order: 1;
}

.sc-large-text {
  padding: var(--sp-md);
}

.sc-large-tag {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--c-primary);
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: var(--sp-md);
}

.sc-large-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.45;
  margin-bottom: var(--sp-md);
}

.sc-large-points {
  margin-bottom: var(--sp-lg);
}

.sc-large-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-md);
  color: var(--c-text-body);
}

.sc-large-point::before {
  content: "▸";
  color: var(--c-primary);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.sc-large-quote {
  background: var(--c-bg-solution);
  border-left: 3px solid var(--c-primary);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--c-text-body);
}

.sc-large-quote strong {
  color: var(--c-primary);
  font-weight: 600;
}

.sc-large-image {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xl);
  border: 1px solid var(--c-border);
  background: var(--c-bg-alt);
}

.sc-large-image img {
  width: 100%;
  display: block;
}

.sc-large-image-caption {
  padding: 10px 14px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-mute);
  background: #FFFFFF;
  border-top: 1px solid var(--c-border-light);
}

.sc-large-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(22, 93, 255, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .sc-large,
  .sc-large:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .sc-large:nth-child(even) .sc-large-text {
    order: 1;
  }

  .sc-large:nth-child(even) .sc-large-image {
    order: 2;
  }
}



/* ===== fix: image aspect-ratio placeholder =====
 * width/height attributes on .cf-image / .sc-large-image img only reserve
 * space before lazy loading (avoids layout shift); the rendered height must
 * stay fluid (height: auto) so it matches the original Vue site rendering.
 */
.lam-root .cf-image img,
.lam-root .sc-large-image img {
  height: auto;
}

/* ===== fix: single-column contact grid =====
 * The phone-capture form was removed; only the WeCom QR card remains.
 * Center it instead of leaving it in the left half of a 2-column grid.
 */
.lam-root .contact-grid-new {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

/* ===== fix: capability card header layout (mobile) =====
 * Put the icon and the card title on one row, with the subtitle
 * (and its divider) spanning the full width below, instead of
 * stacking icon / title / subtitle vertically.
 */
@media (max-width: 768px) {
  .lam-root .capability-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "icon title"
      "sub  sub"
      "text text";
    column-gap: 14px;
    align-items: center;
  }

  .lam-root .capability-card .cap-icon {
    grid-area: icon;
    width: 44px;
    height: 44px;
    margin-bottom: 0;
  }

  .lam-root .capability-card .cap-icon svg {
    width: 22px;
    height: 22px;
  }

  .lam-root .capability-card h3 {
    grid-area: title;
    margin-bottom: 0;
    align-self: center;
  }

  .lam-root .capability-card .cap-subtitle {
    grid-area: sub;
    margin-top: 12px;
  }

  .lam-root .capability-card .cap-text {
    grid-area: text;
  }
}