/**
 * 首页样式
 *
 * 首页只做介绍，不放价格 —— 套餐卡片那套样式在 bs-user.css 里（用户中心用）。
 */

/* ══════════════ 首屏 ══════════════ */

/**
 * 首屏占满一屏
 *
 * 减去 66px 是导航的高度 —— 导航是 sticky，首屏和它加起来正好一屏，
 * 往下滚才开始出现第二个版块。
 * 用 min-height 而不是 height：内容多的时候照常往下长，不会被裁掉。
 */
.bs-hero {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 66px);
    min-height: calc(100dvh - 66px);  /* 手机上用 dvh，免得地址栏吃掉一截 */
    padding: 64px 0;
}

.bs-hero__inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 34px;
    align-items: center;
}

.bs-hero__badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 15px;
    margin-bottom: 18px;
    border-radius: var(--bs-radius-pill);
    background: var(--bs-primary-100);
    color: var(--bs-primary-500);
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .5px;
}
.bs-hero__badge i { color: var(--bs-warn-400); }

.bs-hero__title {
    margin: 0 0 10px;
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: 1px;
    background: linear-gradient(112deg, #3b7ef0 0%, #2563d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 10px 22px rgba(37, 99, 212, .18));
}

.bs-hero__subtitle { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--bs-text-2); letter-spacing: .5px; }
.bs-hero__desc { margin: 0 0 26px; font-size: 14.5px; line-height: 1.9; color: var(--bs-text-3); max-width: 520px; }

.bs-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }

.bs-hero__providers { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bs-hero__providers-more { font-size: 12.5px; color: var(--bs-text-3); }

.bs-hero__art { display: flex; justify-content: center; }
/* 面板本身的层次已经画在 SVG 里了，这里只补一层很淡的环境投影 */
.bs-hero__art svg { filter: drop-shadow(0 18px 34px rgba(37, 99, 212, .14)); }

/* ══════════════ 通用区块 ══════════════ */

/**
 * 相邻版块之间一定要有跳色
 *
 * 之前整页从首屏到页脚都是同一个 #f4f6f9，「功能特性」只叠了一层
 * 透明度 70% 的同色灰 —— 等于没叠，一路滚下来就是一大片，分不清板块边界。
 *
 * 首屏保持原来的样子（页面底色），从第二个版块起白、灰交替：
 *   首屏（页面底色）→ 三步接入白 → 功能特性灰 → 公告白 → 页脚灰
 * 灰档用 --bs-surface-3（#eef2f7），比页面底色的 #f4f6f9 再深一点，
 * 白色版块挨着它边界才清楚。分块靠底色，不靠分割线。
 */
.bs-section { padding: 54px 0; background: var(--bs-surface); }

/* 灰版块：夹在两块白之间，白卡片落在上面也更立体 */
.bs-section--gray { background: var(--bs-surface-3); }

.bs-section__title {
    position: relative;
    margin: 0 0 8px;
    font-size: 25px; font-weight: 900; text-align: center;
    color: var(--bs-text);
    letter-spacing: 2px;
}
/* 标题两侧各一道短线，像仪表盘的刻度装饰 */
.bs-section__title::after {
    content: "";
    display: block;
    width: 56px; height: 2px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: var(--bs-grad);
    box-shadow: var(--bs-glow);
}
.bs-section__desc { margin: 14px 0 34px; text-align: center; font-size: 14px; color: var(--bs-text-3); }

/* ══════════════ 三步接入 ══════════════ */

.bs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.bs-step {
    position: relative;
    padding: 30px 24px 26px;
    background: var(--bs-surface);
    border-radius: var(--bs-radius);
    box-shadow: 0 1px 2px rgba(24, 42, 72, .04), 0 14px 30px -20px rgba(24, 42, 72, .34);
    text-align: center;
    transition: transform var(--bs-dur) var(--bs-ease), box-shadow var(--bs-dur) var(--bs-ease);
}
.bs-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px -6px rgba(24, 42, 72, .1), 0 26px 44px -22px rgba(37, 99, 212, .45);
}

.bs-step__no {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--bs-grad);
    color: #ffffff; font-size: 13px; font-weight: 800;
    font-family: Consolas, monospace;
    box-shadow: var(--bs-glow);
}

.bs-step__icon {
    width: 56px; height: 56px;
    margin: 6px auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--bs-primary-100);
    color: var(--bs-primary-500);
    font-size: 23px;
}
.bs-step__title { font-size: 16px; font-weight: 800; margin-bottom: 7px; color: var(--bs-text); }
.bs-step__desc { font-size: 13px; color: var(--bs-text-3); line-height: 1.8; }

/* ══════════════ 功能特性 ══════════════ */

.bs-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.bs-feature {
    position: relative;
    padding: 24px 22px;
    background: var(--bs-surface);
    border-radius: var(--bs-radius);
    box-shadow: 0 1px 2px rgba(24, 42, 72, .04), 0 14px 30px -20px rgba(24, 42, 72, .34);
    transition: transform var(--bs-dur) var(--bs-ease), box-shadow var(--bs-dur) var(--bs-ease);
}
.bs-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px -6px rgba(24, 42, 72, .1), 0 26px 44px -22px rgba(37, 99, 212, .45);
}

/* 每张卡片的图标色轮换，整片看过去才不单调 */
.bs-feature__icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 19px;
    color: #ffffff;
    background: linear-gradient(135deg, #3b7ef0, #6ba1f5);
    box-shadow: 0 4px 12px -5px rgba(59, 126, 240, .55);
}
.bs-feature:nth-child(2n) .bs-feature__icon {
    background: linear-gradient(135deg, #2563d4, #4a8af4);
    box-shadow: 0 4px 12px -5px rgba(37, 99, 212, .45);
}
.bs-feature:nth-child(3n) .bs-feature__icon {
    background: linear-gradient(135deg, #e8a52c, #c07f14);
    box-shadow: 0 4px 12px -5px rgba(192, 127, 20, .35);
}
.bs-feature:nth-child(5n) .bs-feature__icon {
    background: linear-gradient(135deg, #12855f, #0f6a4c);
    box-shadow: 0 4px 12px -5px rgba(18, 133, 95, .35);
}

.bs-feature__title { font-size: 15.5px; font-weight: 800; color: var(--bs-text); margin-bottom: 9px; letter-spacing: .3px; }
.bs-feature__desc { font-size: 13px; line-height: 1.85; color: var(--bs-text-3); }

/* ══════════════ 公告 ══════════════ */

.bs-notices { display: flex; flex-direction: column; gap: 14px; }
/* 原本靠左侧一条 3px 竖线区分公告，现在改用左侧渐隐的浅蓝底色块 */
.bs-notice {
    padding: 18px 22px;
    border-radius: var(--bs-radius-sm);
    background-color: var(--bs-surface);
    background-image: linear-gradient(90deg, var(--bs-primary-100) 0%, rgba(255, 255, 255, 0) 46%);
    box-shadow: 0 1px 2px rgba(24, 42, 72, .04), 0 14px 30px -20px rgba(24, 42, 72, .34);
}
.bs-notice__title { font-size: 14.5px; font-weight: 800; color: var(--bs-text); margin-bottom: 7px; }
.bs-notice__title i { color: var(--bs-warn-400); margin-right: 6px; }
.bs-notice__body { font-size: 13px; color: var(--bs-text-2); line-height: 1.85; }

/* ══════════════ 响应式 ══════════════ */

@media (max-width: 899px) {
    .bs-hero__inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .bs-hero__desc { margin-left: auto; margin-right: auto; }
    .bs-hero__actions { justify-content: center; }
    .bs-hero__providers { justify-content: center; }
    .bs-hero__art { order: -1; }
    .bs-hero__art svg { width: 300px; height: 315px; }
    .bs-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .bs-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .bs-features { grid-template-columns: minmax(0, 1fr); }
}