/**
 * ticket-assistant.css — 工单助手页面专属样式
 * 迁移自内联 <style>，日期：2026-06-16
 * 设计令牌来源：tokens.css
 *
 * 迁移说明：
 * - 原 @media (min-width: 768px) 为非标准断点，已合并入 PC 默认样式
 * - 间距值已替换为 tokens.css 令牌变量（content-max-w / space-block / space-xs / space-element / line-height / page-gutter）
 * - padding: 64px 24px 中的 24px 保留原值（非标准，待设计确认后对齐 --page-gutter）
 */

/* ─── 第2屏 工单助手生命周期 ─── */
.product-lifecycle {
    background: #FFFFFF !important;
    padding: 64px var(--page-gutter); /* TODO: 64px 介于 section(96px) 与 block(48px) 之间，待视觉确认 */
    position: relative;
}

.product-lifecycle-header {
    max-width: var(--content-max-w);
    margin: 0 auto var(--space-block);
    text-align: left;
}

.product-lifecycle-title {
    font-size: 36px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: var(--space-xs);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.product-lifecycle-subtitle {
    font-size: 0.875rem;
    font-weight: 400;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-element);
}

.product-lifecycle-description {
    /* 原 @media (min-width: 768px) 中提升为 1.125rem，已合并入 PC 默认 */
    font-size: 1.125rem;
    color: #1E293B;
    line-height: var(--line-height);
    margin-bottom: 4px;
}

.product-lifecycle-image {
    max-width: var(--content-max-w);
    margin: 0 auto;
    text-align: center;
}

.product-lifecycle-image img {
    width: 1000px;
    height: 394px;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    object-fit: contain; /* 规则5：图片不变形 */
}

/* ─── 第3屏 Benefits Section ─── */
.product-benefits {
    background: #F7F9F8 !important;
}

/* ─── 第4屏 Features Section ─── */
.product-features {
    background: linear-gradient(180deg, #EBF0FF 0%, #FFFFFF 47%, #EBF0FF 100%) !important;
}

/* ─── 第5屏 Testimonials Section ─── */
.product-testimonials {
    background: #F7F9F8 !important;
}

/* ─── CTA Section 渐变光流文字 ─── */
@keyframes cta-gradient-shift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

.product-cta-title {
    background: linear-gradient(to right, #6246E8, #a78bfa, #c4b5fd, #a78bfa, #6246E8);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: cta-gradient-shift 5s linear infinite alternate;
}