/* ⭐ 2026-09-01 SaaS 小程序落地页 /web/saas — 3屏布局改版
   排版铁律 #185 / premium-landing-layout 技能规范：
   - hero 135° 三段渐变（#052967 → #075FC7 → #12A8E8）纯 CSS，不用图片
   - 卡片实心不磨砂（禁 backdrop-filter）；6px 圆角（按钮 4px / pill 18px）
   - 同色阴影（rgba(7,95,199,X) 禁黑色阴影）；section 浅蓝白交替（#F8FBFF/#EAF3FF）64px padding
   - 标题品牌深蓝 #0052B8 / 正文 #0F2F59 / 字体沿用系统 YaHei
   - 入场动画 IntersectionObserver + CSS transition（轻量，不引 animate.css）*/

/* ============ Hero：135° 三段渐变 ============ */
.saas-hero {
    background: linear-gradient(135deg, #052967 0%, #075FC7 55%, #12A8E8 100%);
    padding: 64px 0 0;
    position: relative;
    overflow: hidden;
}
.saas-hero::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 900px; height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(18,168,232,0.35) 0%, rgba(18,168,232,0) 60%);
    pointer-events: none;
}
.saas-hero-inner {
    max-width: 1190px; margin: 0 auto; padding: 0 20px;
    position: relative; z-index: 1;
}
.saas-hero-main {
    display: flex; align-items: center; justify-content: space-between; gap: 48px;
    padding: 20px 0 40px;
}
.saas-hero-text { flex: 1 1 55%; max-width: 640px; }
.saas-hero-pill {
    display: inline-block; padding: 0 18px; line-height: 32px;
    font-size: 14px; font-weight: 700; color: #fff;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 18px;
    margin-bottom: 24px;
}
.saas-hero-title {
    font-size: 42px; font-weight: 700; line-height: 1.3;
    color: #fff; margin: 0 0 18px; letter-spacing: 1px;
}
.saas-hero-sub {
    font-size: 16px; line-height: 1.9; color: rgba(255,255,255,0.94);
    margin: 0 0 32px;
}
.saas-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* 主按钮：品牌蓝实心 + 同色长投影 */
.saas-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 28px; line-height: 44px;
    font-size: 16px; font-weight: 700; color: #fff;
    background: #075FC7; border: 0; border-radius: 4px;
    box-shadow: rgba(7,95,199,0.24) 0 8px 18px 0;
    text-decoration: none; cursor: pointer;
    transition: box-shadow .25s, transform .25s;
}
.saas-btn-primary:hover {
    box-shadow: rgba(7,95,199,0.34) 0 12px 22px 0;
    transform: translateY(-1px);
    color: #fff;
}
.saas-btn-price { font-weight: 400; opacity: .92; font-size: 14px; }
.saas-btn-primary--block { display: flex; justify-content: center; margin-top: 18px; }

/* Hero 幽灵按钮 */
.saas-btn-ghost {
    display: inline-block; padding: 0 28px; line-height: 42px;
    font-size: 16px; color: #fff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.82);
    border-radius: 4px; text-decoration: none;
    transition: background .25s;
}
.saas-btn-ghost:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ============ Hero 右侧产品示意（纯 CSS，不引图保 LCP） ============ */
.saas-hero-visual { flex: 1 1 45%; max-width: 520px; }
.saas-visual-window {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 6px;
    box-shadow: rgba(5,41,103,0.4) 0 24px 48px 0;
    overflow: hidden;
    backdrop-filter: blur(0); /* 铁律：实心卡不用磨砂，这里保持半透明装饰即可 */
}
.saas-visual-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.saas-visual-bar span {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.35);
}
.saas-visual-bar i {
    flex: 1; text-align: center;
    font-style: normal; font-size: 12px; color: rgba(255,255,255,0.85);
}
.saas-visual-body { padding: 20px; display: flex; flex-wrap: wrap; gap: 14px; }
.saas-visual-card--main {
    flex: 1 1 100%; height: 120px;
    background: linear-gradient(#fff 0%, #F0F7FF 100%);
    border-radius: 6px; padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.saas-visual-card--main b {
    width: 40%; height: 10px; border-radius: 3px;
    background: #075FC7; display: block;
}
.saas-visual-card--main i {
    width: 100%; height: 8px; border-radius: 3px;
    background: #DCE9FA; display: block;
}
.saas-visual-card--main i:nth-child(3) { width: 85%; }
.saas-visual-card--main i:nth-child(4) { width: 65%; }
.saas-visual-card--s1, .saas-visual-card--s2 {
    flex: 1 1 calc(50% - 7px); height: 72px;
    background: rgba(255,255,255,0.9);
    border-radius: 6px;
    box-shadow: rgba(7,95,199,0.12) 0 6px 14px 0;
}
.saas-visual-line {
    flex: 1 1 100%; height: 8px; border-radius: 4px;
    background: rgba(255,255,255,0.35);
}

/* ============ Hero 数据锚点 ============ */
.saas-hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,0.22);
    padding: 26px 0 30px;
    position: relative; z-index: 1;
}
.saas-stat { text-align: center; }
.saas-stat b {
    display: block; font-size: 30px; font-weight: 700; color: #fff;
    line-height: 1.2; margin-bottom: 4px;
}
.saas-stat span { font-size: 14px; color: rgba(255,255,255,0.82); }

/* ============ 吸顶锚点 Tab（sticky，避开公共 header 64px） ============ */
.saas-tabs {
    position: sticky; top: 64px; z-index: 40;
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid #E4EDFB;
    box-shadow: rgba(7,95,199,0.06) 0 4px 14px 0;
}
.saas-tabs-inner {
    max-width: 1190px; margin: 0 auto; padding: 0 20px;
    display: flex; gap: 4px;
}
.saas-tab {
    display: inline-block; padding: 0 24px; line-height: 50px;
    font-size: 15px; font-weight: 500; color: #44546A;
    text-decoration: none; border-bottom: 2px solid transparent;
    transition: color .2s;
}
.saas-tab:hover { color: #075FC7; }
.saas-tab.is-active {
    color: #075FC7; font-weight: 700;
    border-bottom-color: #075FC7;
}

/* ============ Section 交替律动 + 标题 ============ */
.saas-section { padding: 64px 0; }
.saas-section-white { background: #F8FBFF; }
.saas-section-blue  { background: #EAF3FF; }
.saas-container { max-width: 1190px; margin: 0 auto; padding: 0 20px; }
.saas-container--narrow { max-width: 860px; }
.saas-sec-title {
    font-size: 30px; font-weight: 700; line-height: 39px;
    color: #0052B8; text-align: center; margin: 0 0 14px;
}
.saas-sec-desc {
    max-width: 760px; margin: 0 auto 40px;
    font-size: 14px; line-height: 1.7; color: #5F6B7A; text-align: center;
}

/* ============ Bento 产品总览（1 大 2×2 + 4 小 1×1） ============ */
.saas-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 20px;
}

/* 主推大卡：占 2×2 格 */
.saas-card-main {
    grid-column: span 2; grid-row: span 2;
    position: relative;
    background: linear-gradient(#fff 0%, #F0F7FF 100%);
    border-radius: 6px;
    box-shadow: rgba(7,95,199,0.13) 0 16px 34px 0;
    padding: 34px 34px 30px;
    color: #0F2F59;
    display: flex; flex-direction: column;
    transition: box-shadow .25s, transform .25s;
}
.saas-card-main:hover {
    box-shadow: rgba(7,95,199,0.2) 0 20px 40px 0;
    transform: translateY(-3px);
}

/* 琥珀主推徽标 */
.saas-badge {
    position: absolute; right: -4px; top: 16px;
    padding: 4px 16px 4px 12px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #fff; font-size: 13px; font-weight: 700;
    border-radius: 4px 0 0 4px;
    box-shadow: rgba(217,119,6,0.3) 0 4px 10px 0;
    z-index: 2;
}
.saas-badge--rec {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.saas-card-main-name { font-size: 24px; font-weight: 700; color: #052967; margin: 0 0 6px; }
.saas-card-main-desc { font-size: 14px; line-height: 1.7; color: #5F6B7A; margin: 0 0 18px; }
.saas-card-main-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 16px; }
.saas-symbol { font-size: 18px; font-weight: 600; color: #075FC7; }
.saas-amount { font-size: 40px; font-weight: 700; line-height: 1; color: #075FC7; }
.saas-unit { font-size: 14px; color: #5F6B7A; }
.saas-original {
    font-size: 13px; color: #9AA5B5; text-decoration: line-through; margin-left: 8px;
}

/* 功能列表：2 列网格 + 勾点 */
.saas-feat-list {
    list-style: none; padding: 0; margin: 0 0 8px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
    flex: 1;
}
.saas-feat-list li {
    position: relative; padding: 5px 0 5px 22px;
    font-size: 13.5px; color: #44546A; line-height: 1.6;
}
.saas-feat-list li::before {
    content: ''; position: absolute; left: 0; top: 12px;
    width: 8px; height: 8px; border-radius: 50%; background: #12A8E8;
}
.saas-feat-more {
    align-self: flex-start; display: inline-block; text-decoration: none;
    font-size: 13px; color: #075FC7; font-weight: 600;
    padding: 4px 0; margin-bottom: 10px; transition: color .2s;
}
.saas-feat-more:hover { color: #052967; text-decoration: underline; }

/* 辅助小卡 */
.saas-card-mini {
    background: #fff;
    border-radius: 6px;
    box-shadow: rgba(7,95,199,0.08) 0 10px 24px 0;
    padding: 22px 20px;
    color: #0F2F59;
    display: flex; flex-direction: column;
    transition: box-shadow .25s, transform .25s;
}
.saas-card-mini:hover {
    box-shadow: rgba(7,95,199,0.16) 0 14px 30px 0;
    transform: translateY(-3px);
}
.saas-mini-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 6px;
    background: #EAF3FF; color: #075FC7; margin-bottom: 14px;
}
.saas-mini-icon svg { width: 24px; height: 24px; }
.saas-mini-name { font-size: 17px; font-weight: 700; color: #052967; margin: 0 0 8px; }
.saas-mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.saas-mini-tags i {
    font-style: normal; font-size: 12px; color: #075FC7;
    background: #EAF3FF; border-radius: 12px; padding: 2px 10px;
}
.saas-mini-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto;
}
.saas-mini-price { font-size: 16px; font-weight: 700; color: #075FC7; }
.saas-mini-link {
    font-size: 13px; color: #0052B8; text-decoration: none; font-weight: 600;
}
.saas-mini-link:hover { color: #052967; }

/* ============ 套餐卡片：实心 + 6px 圆角 + 同色阴影 ============ */
.saas-plan-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
}
.saas-plan-card {
    position: relative;
    background: #fff; border: 1px solid #E4EDFB; border-radius: 6px;
    padding: 28px 24px; display: flex; flex-direction: column;
    box-shadow: rgba(7,95,199,0.08) 0 10px 24px 0;
    transition: box-shadow .25s, transform .25s;
}
.saas-plan-card:hover {
    box-shadow: rgba(7,95,199,0.16) 0 14px 30px 0;
    transform: translateY(-3px);
}
/* 推荐档：2px 琥珀边框 + 放大 */
.saas-plan-card.is-rec {
    border: 2px solid #F59E0B;
    box-shadow: rgba(245,158,11,0.2) 0 16px 34px 0;
    transform: scale(1.02);
}
.saas-plan-card.is-rec:hover { transform: scale(1.02) translateY(-3px); }
.saas-plan-name { font-size: 18px; font-weight: 700; color: #052967; margin-bottom: 14px; }
.saas-plan-price { display: flex; align-items: baseline; color: #075FC7; margin-bottom: 4px; }
.saas-plan-symbol { font-size: 16px; font-weight: 600; }
.saas-plan-amount { font-size: 34px; font-weight: 700; line-height: 1; }
.saas-plan-unit { font-size: 14px; color: #5F6B7A; margin-left: 4px; }
.saas-plan-original {
    font-size: 13px; color: #9AA5B5; text-decoration: line-through; margin-bottom: 14px;
}
.saas-plan-feats { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.saas-plan-feats li {
    position: relative; padding: 6px 0 6px 22px; font-size: 14px; color: #44546A;
    line-height: 1.6;
}
.saas-plan-feats li::before {
    content: ''; position: absolute; left: 0; top: 13px;
    width: 8px; height: 8px; border-radius: 50%; background: #12A8E8;
}
.saas-plan-btn {
    display: block; text-align: center; padding: 10px 0; font-size: 15px; font-weight: 600;
    color: #fff; background: #075FC7; border-radius: 4px; text-decoration: none;
    box-shadow: rgba(7,95,199,0.2) 0 6px 14px 0;
    transition: background .15s;
}
.saas-plan-btn:hover { background: #052967; }
.saas-plan-empty { color: #5F6B7A; padding: 40px; text-align: center; }

/* ============ 套餐区 V3：琉璃叠卡系统切换器（2026-09-01） ============ */
.saas-sys-deck {
    display: flex; justify-content: center; align-items: flex-start;
    max-width: 720px; margin: 4px auto 44px;
}
.saas-sys-card {
    position: relative; border: 0; cursor: pointer; text-align: left;
    width: 300px; padding: 18px 20px; border-radius: 14px;
    display: flex; align-items: center; gap: 14px;
    font-family: inherit;
    transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, opacity .3s ease, filter .3s ease;
    /* 琉璃：半透明灰蓝玻璃（未选中态） */
    background: linear-gradient(135deg, rgba(185,205,232,.85), rgba(220,234,248,.8));
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: rgba(127,168,216,.25) 0 6px 14px 0;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transform: translate(26px, 16px) scale(.94); /* 牌堆：右下错位 + 缩小 */
    z-index: 1;
    opacity: .88;
}
/* 玻璃高光 */
.saas-sys-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 62%);
}
.saas-sys-card:hover {
    transform: translate(20px, 10px) scale(.96);
    opacity: 1;
}
/* 选中态：品牌蓝琉璃 + 前层归位 */
.saas-sys-card.is-active {
    background: linear-gradient(135deg, rgba(7,95,199,.95), rgba(18,168,232,.92));
    border-color: rgba(255,255,255,.55);
    box-shadow: rgba(7,95,199,.45) 0 14px 34px 0, inset 1px 1px 0 rgba(255,255,255,.4);
    transform: translate(0, 0) scale(1);
    z-index: 2;
    opacity: 1;
}
.saas-sys-card.is-active:hover { transform: translate(0, 0) scale(1); }
.saas-sys-icon {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.2); color: #fff;
}
.saas-sys-icon svg { width: 24px; height: 24px; }
.saas-sys-card:not(.is-active) .saas-sys-icon { background: rgba(7,95,199,.14); color: #075FC7; }
.saas-sys-info { flex: 1; min-width: 0; }
.saas-sys-info b { display: block; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.saas-sys-info small { display: block; margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.85); }
.saas-sys-card:not(.is-active) .saas-sys-info b { color: #3D4F66; }
.saas-sys-card:not(.is-active) .saas-sys-info small { color: #6B7D94; }
.saas-sys-check {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; color: #075FC7; font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.saas-sys-card:not(.is-active) .saas-sys-check { display: none; }

/* ============ 套餐区 V3：面板（双层结构） ============ */
.saas-plan-panel { display: none; }
.saas-plan-panel.is-active { display: block; animation: saasPanelIn .4s ease; }
@keyframes saasPanelIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* ============ 套餐区 V3：价格卡片层（决策入口，推荐档顶部色带） ============ */
.saas-price-cards {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
    max-width: 1000px; margin: 0 auto 38px;
}
.saas-price-card {
    /* 固定宽高，不随 grid 拉伸（避免单套餐系统变形） */
    flex: 0 0 218px; max-width: 240px;
    position: relative; background: #fff; border: 1px solid #E4EDFB; border-radius: 6px;
    padding: 30px 20px 22px; text-align: center;
    box-shadow: rgba(7,95,199,0.08) 0 10px 24px 0;
    transition: box-shadow .25s, transform .25s;
}
.saas-price-card:hover { box-shadow: rgba(7,95,199,0.16) 0 14px 30px 0; transform: translateY(-3px); }
/* 推荐档：顶部品牌蓝色带 + 深边框 */
.saas-price-card.is-rec {
    border: 2px solid #075FC7;
    box-shadow: rgba(7,95,199,0.18) 0 14px 30px 0;
}
.saas-price-card.is-rec::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(90deg, #075FC7, #12A8E8);
}
.saas-price-name { font-size: 16px; font-weight: 700; color: #052967; margin: 8px 0 6px; }
.saas-price-val { font-size: 28px; font-weight: 700; color: #075FC7; line-height: 1.2; }
.saas-price-val span { font-size: 13px; color: #5F6B7A; font-weight: 400; margin-left: 2px; }
.saas-price-orig { font-size: 12px; color: #9AA5B5; text-decoration: line-through; margin: 4px 0 16px; }
.saas-price-card .saas-plan-btn { display: block; margin-top: 4px; }

/* ============ 套餐区 V3：功能对比表微调（表头仅套餐名 + 提示 + 分组统计） ============ */
.saas-compare-hint { font-size: 11px; color: #9AA5B5; font-weight: 400; margin-left: 4px; }
.saas-compare-th { font-size: 14px; font-weight: 700; color: #0F2F59; }
.saas-group-count {
    margin-left: 8px; font-size: 11px; color: #5F6B7A; font-weight: 400;
}

/* ============ 套餐功能对比表（2026-09-01：行业标准对比表，≥2 套餐系统启用） ============ */
.saas-compare { overflow-x: auto; }
.saas-compare-table {
    width: 100%; min-width: 680px; border-collapse: collapse;
    background: #fff; border-radius: 8px; overflow: hidden;
    box-shadow: rgba(7,95,199,0.08) 0 10px 24px 0;
}
.saas-compare-table th, .saas-compare-table td {
    padding: 10px 14px; text-align: center; font-size: 13px; vertical-align: middle;
}
.saas-compare-feat-col, .saas-compare-feat { text-align: left; }
.saas-compare-feat-col, .saas-compare-feat { min-width: 200px; }
.saas-compare-th { background: #FBFCFE; border-bottom: 1px solid #E4EDFB; }
/* 推荐列：品牌蓝底 + 2px 边框高亮 */
.saas-compare-th.is-rec {
    background: #EAF2FF; border-left: 2px solid #075FC7; border-right: 2px solid #075FC7; border-top: 2px solid #075FC7;
}
.saas-compare-name { font-size: 15px; font-weight: 700; color: #052967; margin: 8px 0 6px; }
.saas-compare-price { font-size: 22px; font-weight: 700; color: #075FC7; }
.saas-compare-price span { font-size: 12px; color: #5F6B7A; font-weight: 400; margin-left: 2px; }
.saas-compare-orig { font-size: 12px; color: #9AA5B5; text-decoration: line-through; margin-top: 2px; }
/* 分组行 */
.saas-compare-group td {
    background: #EAF2FF; font-size: 12px; font-weight: 700; color: #075FC7;
    text-align: left; padding: 7px 14px;
}
/* 功能行：斑马纹 + 推荐列浅蓝底 */
.saas-compare-row td { border-bottom: 1px solid #F0F5FD; }
.saas-compare-row:nth-child(even) td { background: #FBFCFE; }
.saas-compare-row td.is-rec-cell { background: #F5F9FF; }
.saas-compare-row:nth-child(even) td.is-rec-cell { background: #F5F9FF; }
/* ⭐ 2026-09-01 列 hover 交互：鼠标进入列，该列接管推荐样式（蓝底+边框），原推荐列退为普通 */
.saas-compare-th.is-col-hover {
    background: #EAF2FF; border-left: 2px solid #075FC7; border-right: 2px solid #075FC7; border-top: 2px solid #075FC7;
}
.saas-compare-row td.is-col-hover { background: #F5F9FF !important; }
.saas-compare-table.has-col-hover .saas-compare-th.is-rec,
.saas-compare-table.has-col-hover .saas-compare-row td.is-rec-cell {
    background: #FBFCFE; border-color: transparent;
}
/* ⭐ 方案A：跳转套餐区后推荐列短暂高亮闪烁（吸引视线定位） */
.saas-compare-row td.is-flash { animation: saasFlash 1.4s ease; }
@keyframes saasFlash {
    0% { background: #075FC7; }
    35% { background: #EAF2FF; }
    70% { background: #DCE8FC; }
    100% { background: #F5F9FF; }
}
.saas-compare-feat-name { font-size: 13px; color: #44546A; }
.saas-compare-yes { color: #075FC7; font-weight: 700; font-size: 15px; }
.saas-compare-no { color: #9AA5B5; font-size: 16px; font-weight: 600; }
.saas-compare-excl {
    display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px;
    color: #F59E0B; background: rgba(245,158,11,0.1); border-radius: 4px; vertical-align: middle;
}
/* 渐进披露：公共行默认折叠 */
.saas-compare-table:not(.is-full) tr.is-full { display: none; }
.saas-compare-more td { padding: 12px; text-align: center; border-bottom: 1px solid #E4EDFB; }
.saas-compare-toggle {
    border: 0; background: none; color: #075FC7; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 8px 18px; border-radius: 4px; transition: background .2s;
}
.saas-compare-toggle:hover { background: #EAF2FF; }
.saas-compare-toggle i { font-style: normal; display: inline-block; transition: transform .2s; }
.saas-compare-table.is-full .saas-compare-toggle i { transform: rotate(180deg); }

/* ============ 为什么选我们：4 宫格 ============ */
.saas-why-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.saas-why-card {
    background: #fff; border-radius: 6px;
    box-shadow: rgba(7,95,199,0.08) 0 10px 24px 0;
    padding: 26px 22px; text-align: center;
    color: #0F2F59;
    transition: box-shadow .25s, transform .25s;
}
.saas-why-card:hover {
    box-shadow: rgba(7,95,199,0.16) 0 14px 30px 0;
    transform: translateY(-3px);
}
.saas-why-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 6px;
    background: #EAF3FF; color: #075FC7; margin-bottom: 14px;
}
.saas-why-icon svg { width: 28px; height: 28px; }
.saas-why-card h3 { font-size: 17px; font-weight: 700; color: #052967; margin: 0 0 8px; }
.saas-why-card p { font-size: 13.5px; line-height: 1.7; color: #5F6B7A; margin: 0; }

/* ============ 3 步流程 ============ */
.saas-steps {
    display: flex; align-items: stretch; justify-content: center; gap: 0;
    max-width: 900px; margin: 0 auto;
}
.saas-step {
    flex: 1; background: #fff; border-radius: 6px;
    box-shadow: rgba(7,95,199,0.08) 0 10px 24px 0;
    padding: 28px 24px; text-align: center; color: #0F2F59;
    transition: box-shadow .25s, transform .25s;
}
.saas-step:hover {
    box-shadow: rgba(7,95,199,0.16) 0 14px 30px 0;
    transform: translateY(-3px);
}
.saas-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #075FC7, #12A8E8);
    color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 14px;
}
.saas-step h3 { font-size: 17px; font-weight: 700; color: #052967; margin: 0 0 8px; }
.saas-step p { font-size: 13.5px; line-height: 1.7; color: #5F6B7A; margin: 0; }
.saas-step-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 48px; color: #12A8E8; font-size: 22px; font-weight: 700;
}

/* ============ FAQ 手风琴（交互对齐 domain 页：整体凹陷容器 + 互斥展开 + ×关闭；配色沿用 saas token 不动） ============ */
.saas-faq-item {
    border-radius: 8px;
    transition: background .35s ease, box-shadow .35s ease;
}
/* 展开：标题与答案统一融入凹陷容器（inset 阴影 + 品牌蓝浅渐变，同色阴影铁律 #185） */
.saas-faq-item.is-open {
    background: linear-gradient(180deg, rgba(7,95,199,0.04) 0%, rgba(18,168,232,0.03) 100%);
    box-shadow: inset 4px 4px 12px 0 rgba(7,95,199,.08), inset -4px -4px 12px 0 #fff;
    margin-bottom: 16px;
}
.saas-faq-q {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 16px; cursor: pointer; user-select: none;
    border-radius: 8px; transition: background .2s;
}
.saas-faq-q:hover { background: rgba(245, 248, 255, 0.6); }
.saas-faq-item.is-open .saas-faq-q:hover { background: rgba(232, 240, 255, 0.4); }
.saas-faq-q-text {
    font-size: 15px; font-weight: 600; color: #0F2F59;
    flex: 1; transition: color .2s;
}
.saas-faq-q:hover .saas-faq-q-text { color: #075FC7; }
.saas-faq-item.is-open .saas-faq-q-text { color: #075FC7; }
/* + 号图标（domain 式：展开后隐藏，避免与 × 关闭按钮重叠） */
.saas-faq-icon {
    width: 24px; height: 24px; color: #9AA5B5;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; order: 3;
}
.saas-faq-icon svg { width: 22px; height: 22px; }
.saas-faq-item.is-open .saas-faq-icon { display: none; }
/* × 关闭按钮（仅展开时显示，位于标题行右侧） */
.saas-faq-close {
    background: transparent; border: 0; color: #9AA5B5; cursor: pointer;
    padding: 6px; border-radius: 6px; margin-right: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    order: 2; transition: color .2s, background .2s;
}
.saas-faq-item:not(.is-open) .saas-faq-close { display: none; }
.saas-faq-close:hover { color: #075FC7; background: rgba(7,95,199,0.06); }
.saas-faq-close svg { width: 18px; height: 18px; }
/* 答案区：grid 0fr→1fr 动画（domain 同款，浏览器可优化的现代 transition） */
.saas-faq-a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1), padding .35s ease, opacity .25s ease;
    padding: 0 24px; opacity: 0;
}
.saas-faq-a > * { overflow: hidden; min-height: 0; }
.saas-faq-item.is-open .saas-faq-a {
    grid-template-rows: 1fr; opacity: 1;
    padding: 0 24px 22px;
}
.saas-faq-a p {
    margin: 0; padding: 0;
    font-size: 14px; line-height: 1.8; color: #5F6B7A;
}

/* ============ 底部 CTA ============ */
.saas-cta {
    background: linear-gradient(135deg, #052967 0%, #075FC7 55%, #12A8E8 100%);
    padding: 64px 0;
    text-align: center;
}
.saas-cta h2 { font-size: 30px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.saas-cta p { font-size: 15px; color: rgba(255,255,255,0.9); margin: 0 0 28px; }

/* ============ 入场动画 ============ */
.saas-bento > *, .saas-price-card, .saas-why-card, .saas-step, .saas-faq-item, .saas-cta > div {
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
}
.saas-bento > *.is-in, .saas-price-card.is-in, .saas-why-card.is-in,
.saas-step.is-in, .saas-faq-item.is-in, .saas-cta > div.is-in {
    opacity: 1; transform: translateY(0);
}

/* ============ 响应式 ============ */
@media (max-width: 992px) {
    .saas-hero-main { flex-direction: column; }
    .saas-hero-visual { max-width: 100%; }
    .saas-bento { grid-template-columns: repeat(2, 1fr); }
    .saas-card-main { grid-column: span 2; grid-row: auto; }
    .saas-why-grid { grid-template-columns: repeat(2, 1fr); }
    .saas-steps { flex-direction: column; gap: 16px; }
    .saas-step-arrow { transform: rotate(90deg); width: auto; }
    .saas-sys-deck { flex-wrap: wrap; max-width: 620px; }
    .saas-sys-card { width: 280px; }
    .saas-sys-card:not(.is-active) { transform: translate(14px, 10px) scale(.95); }
}
@media (max-width: 640px) {
    .saas-hero-title { font-size: 30px; }
    .saas-hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
    .saas-bento { grid-template-columns: 1fr; }
    .saas-card-main { grid-column: span 1; }
    .saas-why-grid { grid-template-columns: 1fr; }
    .saas-tab { padding: 0 14px; font-size: 14px; }
    .saas-faq-q { padding: 18px 8px; }
    .saas-faq-q-text { font-size: 14px; }
    .saas-faq-item.is-open .saas-faq-a { padding: 0 16px 20px; }
    .saas-compare-table { min-width: 620px; }
    .saas-compare-table th, .saas-compare-table td { padding: 8px 10px; font-size: 12px; }
    .saas-compare-price { font-size: 18px; }
    .saas-compare-cta td { padding: 10px; }
    .saas-sys-card { width: 240px; padding: 14px 14px; }
    .saas-sys-icon { width: 38px; height: 38px; }
    .saas-sys-icon svg { width: 20px; height: 20px; }
    .saas-price-val { font-size: 24px; }
}