/* ============================================================
   AI 板块通用样式 —— 云昭科技
   用于 /ai/ 及 /ai/* 子页，配色沿用 variables.css（红金主色）
   ============================================================ */

.ai-hero {
    /* 站内其他页面由 banner 的 margin-top:120px 顶开固定导航，这里手动补上 */
    margin-top: 120px;
    padding: 64px 0 52px;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid #eef0f3;
}
/* 关闭顶部公告条后导航上移 40px，保持版面贴合 */
body.top-bar-closed .ai-hero { margin-top: 80px; }
.ai-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .16em;
    font-weight: 700;
    color: #c7000b;
    margin-bottom: 16px;
}
.ai-hero h1 {
    font-size: 2.6rem;
    line-height: 1.28;
    font-weight: 800;
    color: #1a1b26;
    margin: 0 0 18px;
}
.ai-hero .ai-lead {
    font-size: 1.08rem;
    line-height: 1.95;
    color: #64748b;
    max-width: 860px;
    margin: 0;
}
.ai-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    transition: .2s;
}
.ai-btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(234, 38, 47, .22);
}
.ai-btn-primary:hover { color: #fff; transform: translateY(-2px); }
.ai-btn-ghost {
    background: #fff;
    color: #1a1b26;
    border: 1.5px solid #e2e8f0;
}
.ai-btn-ghost:hover { border-color: #ea262f; color: #c7000b; }

.ai-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    font-size: .9rem;
    color: #64748b;
}
.ai-facts li { position: relative; padding-left: 16px; }
.ai-facts li:before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ea262f;
}

.ai-sec { padding: 76px 0; }
.ai-sec--gray { background: #f8f9fa; }
.ai-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.ai-head--left { margin: 0 0 40px; text-align: left; }
.ai-h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1b26;
    margin: 0 0 14px;
    line-height: 1.45;
}
.ai-sub { color: #64748b; line-height: 1.9; margin: 0; }
.ai-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 卡片 */
.ai-card {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 18px;
    padding: 32px 28px;
    height: 100%;
    transition: .25s;
}
.ai-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}
.ai-card h3 { font-size: 1.18rem; font-weight: 800; margin: 0 0 12px; color: #1a1b26; }
.ai-card p { color: #64748b; line-height: 1.9; margin: 0; font-size: .96rem; }
.ai-num {
    display: block;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #c7000b;
    margin-bottom: 14px;
}
a.ai-card-link { display: block; text-decoration: none; color: inherit; }
a.ai-card-link:hover { color: inherit; }
.ai-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: .9rem;
    font-weight: 700;
    color: #c7000b;
}

/* 五步法时间轴 */
.ai-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; max-width: 880px; }
.ai-step {
    position: relative;
    padding: 0 0 36px 66px;
    border-left: 2px solid #f1f5f9;
    margin-left: 19px;
}
.ai-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.ai-step:before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: -20px; top: -4px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ea262f;
    color: #c7000b;
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-step h3 { font-size: 1.12rem; font-weight: 800; margin: 0 0 8px; color: #1a1b26; }
.ai-step p { color: #64748b; line-height: 1.9; margin: 0; font-size: .96rem; }
.ai-tag {
    display: inline-block;
    font-size: .76rem;
    font-weight: 700;
    color: #c7000b;
    background: #fef2f2;
    border-radius: 6px;
    padding: 2px 8px;
    margin-left: 8px;
    vertical-align: middle;
}

/* 边界声明 / 提示框 */
.ai-notice {
    background: #fff;
    border: 1px solid #eceff3;
    border-left: 4px solid #c7000b;
    border-radius: 14px;
    padding: 32px 34px;
}
.ai-notice h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 14px; color: #1a1b26; }
.ai-notice p, .ai-notice li { color: #64748b; line-height: 2; }
.ai-notice ul { margin: 0; padding-left: 20px; }

/* 表格 */
.ai-table-wrap {
    overflow-x: auto;
    border: 1px solid #eceff3;
    border-radius: 14px;
    background: #fff;
}
.ai-table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 620px; }
.ai-table th {
    background: #f8f9fa;
    color: #1a1b26;
    font-weight: 800;
    text-align: left;
    padding: 15px 18px;
    border-bottom: 1px solid #eceff3;
    white-space: nowrap;
}
.ai-table td {
    padding: 15px 18px;
    border-bottom: 1px solid #f4f6f8;
    color: #475569;
    line-height: 1.8;
    vertical-align: top;
}
.ai-table tr:last-child td { border-bottom: none; }
.ai-note { font-size: .84rem; color: #94a3b8; margin: 12px 0 0; }

/* FAQ */
.ai-faq .accordion-item {
    border: 1px solid #eceff3;
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}
.ai-faq .accordion-button {
    font-weight: 700;
    color: #1a1b26;
    font-size: 1rem;
    padding: 20px 24px;
    background: #fff;
}
.ai-faq .accordion-button:not(.collapsed) {
    background: #fffafa;
    color: #c7000b;
    box-shadow: none;
}
.ai-faq .accordion-button:focus { box-shadow: none; border-color: #eceff3; }
.ai-faq .accordion-body {
    color: #64748b;
    line-height: 1.95;
    padding: 4px 24px 22px;
    font-size: .96rem;
}

/* 高亮段落 */
.ai-quote {
    border-left: 3px solid #ea262f;
    padding: 4px 0 4px 22px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.85;
    color: #1a1b26;
    margin: 0;
}

/* CTA */
.ai-cta { padding: 88px 0; }
.ai-cta h2 { font-size: 2.1rem; font-weight: 800; color: #fff; margin: 0 0 16px; }
.ai-cta p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    line-height: 1.9;
    margin: 0 auto 32px;
    max-width: 720px;
}
.ai-cta .ai-btn-primary { background: #fff; color: #c7000b; box-shadow: none; }
.ai-cta .ai-btn-primary:hover { color: #c7000b; }

/* 双列图文 */
.ai-split { align-items: center; }
.ai-split ul { margin: 18px 0 0; padding-left: 0; list-style: none; }
.ai-split ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    color: #475569;
    line-height: 1.85;
}
.ai-split ul li:before {
    content: "";
    position: absolute;
    left: 2px; top: 11px;
    width: 7px; height: 7px;
    border-radius: 2px;
    background: #ea262f;
    transform: rotate(45deg);
}

@media (max-width: 768px) {
    .ai-hero { margin-top: 96px; padding: 34px 0 32px; }
    body.top-bar-closed .ai-hero { margin-top: 62px; }
    .ai-hero h1 { font-size: 1.85rem; }
    .ai-sec { padding: 52px 0; }
    .ai-h2 { font-size: 1.55rem; }
    .ai-step { padding-left: 54px; }
    .ai-cta { padding: 62px 0; }
    .ai-cta h2 { font-size: 1.6rem; }
}

/* ===== AI 页 hero 科技底图 ===== */
.ai-hero {
    background:
        linear-gradient(135deg, rgba(15,23,42,.93) 0%, rgba(30,41,59,.88) 55%, rgba(127,29,29,.9) 100%),
        url('/assets/images/ai-tech-hero.svg') center/cover no-repeat !important;
    border-bottom: none !important;
}
.ai-hero h1,
.ai-hero .ai-lead {
    color: #fff !important;
}
.ai-hero .ai-lead {
    color: rgba(255,255,255,.78) !important;
}
.ai-hero .ai-eyebrow {
    color: #ff8a9b !important;
}
.ai-hero .ai-facts li {
    color: rgba(255,255,255,.85) !important;
}