/* ============================================================
   包印网信息发布平台 · 首页样式 v2.0
   变量与通用工具类见 layouts/app.blade.php 的 <style> 段
   板块前缀 by_ ；11 段：Hero / 服务带 / 今日推荐 / 平台介绍 /
   精选信息 / 服务商 / 榜单(深色) / 为您推荐 / 流程 / 常见问题 / 联系
   ============================================================ */

/* ------------------------------------------------------------
   grid / flex 子项默认 min-width:auto，其最小宽度取内部 min-content。
   榜单行、服务商信息标题等带 nowrap 的内容会把列撑到超出容器宽度
   （窄屏尤其明显：320px 的 Hero、600px 的服务商网格）。统一解开。
   ------------------------------------------------------------ */
.by_hero_grid > *, .by_svc > *, .by_pick_grid > *, .by_pick_side > *,
.by_about_grid > *, .by_feat_cols > *, .by_feat_card > *,
.by_mch_grid > *, .by_mch_head > *, .by_mch_list > *,
.by_rank_grid > *, .by_rank_side > *, .by_rank_row > *,
.by_reco_grid > *, .by_faq_grid > *, .by_faq_col > *,
.by_flow > *, .by_contact_inner > * { min-width: 0; }

/* ============================================================
   ① 全幅 Hero · 左文右图
   ============================================================ */
.by_hero {
    position: relative;
    background: linear-gradient(168deg, #F1F7FE 0%, #DCEBFB 52%, #E8F2FD 100%);
    padding: 58px 0 104px;
    overflow: hidden;
}
.by_hero::before {
    content: '';
    position: absolute; left: -120px; top: -140px; width: 460px; height: 460px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, transparent 66%);
}
.by_hero::after {
    content: '';
    position: absolute; right: -60px; bottom: -80px; width: 300px; height: 300px;
    border: 2px solid rgba(28, 124, 232, .12); border-radius: 40px;
    transform: rotate(22deg); pointer-events: none;
}
.by_hero_grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1.02fr; gap: 54px; align-items: center;
}

.by_hero_tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--by-blue-100);
    border-radius: var(--by-radius-pill); padding: 6px 16px 6px 7px;
    font-size: 13px; color: var(--by-blue-800); font-weight: 600;
    box-shadow: var(--by-shadow-1); margin-bottom: 22px;
}
.by_hero_tag i {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--by-orange-soft); color: var(--by-orange-deep);
    display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
}
.by_hero_title {
    font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.24;
    color: var(--by-ink); margin: 0 0 18px; letter-spacing: -.5px;
}
.by_hero_title em {
    font-style: normal; display: block;
    background: var(--by-grad-line); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.by_hero_desc {
    font-size: 15.5px; line-height: 1.95; color: var(--by-text);
    max-width: 560px; margin: 0 0 28px;
}

.by_hero_search {
    display: flex; align-items: center; height: 56px; max-width: 540px;
    background: #fff; border-radius: var(--by-radius-pill);
    box-shadow: var(--by-shadow-2); padding: 0 6px 0 22px;
    transition: box-shadow .2s;
}
.by_hero_search:focus-within { box-shadow: var(--by-shadow-3); }
.by_hero_search > i { color: var(--by-blue-600); font-size: 16px; flex-shrink: 0; }
.by_hero_search input {
    flex: 1; min-width: 0; height: 100%; border: none; outline: none;
    background: transparent; padding: 0 14px; font-size: 15px; color: var(--by-ink);
}
.by_hero_search input::placeholder { color: var(--by-light); }
.by_hero_search button {
    flex-shrink: 0; height: 44px; padding: 0 28px; border: none; cursor: pointer;
    border-radius: var(--by-radius-pill); background: var(--by-orange-btn); color: #fff;
    font-size: 15px; font-weight: 700; box-shadow: var(--by-shadow-btn);
    transition: filter .2s;
}
.by_hero_search button:hover { filter: brightness(1.07); }

.by_hero_words {
    display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
    margin-top: 16px; font-size: 13px; color: var(--by-muted);
}
.by_hero_words a {
    padding: 4px 13px; background: rgba(255, 255, 255, .8);
    border: 1px solid var(--by-blue-100); border-radius: var(--by-radius-pill);
    color: var(--by-text); font-size: 12.5px; transition: all .18s;
}
.by_hero_words a:hover { background: #fff; color: var(--by-blue-700); border-color: var(--by-blue-300); }

.by_hero_trust { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 30px; }
.by_hero_trust_item {
    display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--by-text);
}
.by_hero_trust_item svg { width: 22px; height: 22px; color: var(--by-blue-600); flex-shrink: 0; }

/* 右侧主图 + 数据卡
   数据卡放在图下方而非压在图上：banner 底部有纸箱与标签卷等主体元素，
   浮在上面会遮挡；放下方还能补齐右列高度，与左侧文案区更接近。 */
.by_hero_visual { display: flex; flex-direction: column; }
.by_hero_visual img {
    width: 100%; border-radius: var(--by-radius-lg);
    box-shadow: 0 18px 46px rgba(11, 84, 166, .18);
}
.by_hero_float {
    align-self: flex-end; margin-top: 16px;
    display: flex; align-items: stretch; gap: 0;
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
    border: 1px solid #fff; border-radius: var(--by-radius);
    box-shadow: var(--by-shadow-3); padding: 14px 4px;
}
.by_hero_float_item { padding: 0 22px; text-align: center; line-height: 1.3; }
.by_hero_float_item + .by_hero_float_item { border-left: 1px solid var(--by-border); }
.by_hero_float_item strong { display: block; font-size: 24px; font-weight: 800; color: var(--by-blue-800); }
.by_hero_float_item strong em { font-style: normal; font-size: 13px; color: var(--by-muted); margin-left: 2px; }
.by_hero_float_item span { display: block; font-size: 12px; color: var(--by-muted); margin-top: 2px; }

/* ============================================================
   ② 服务类型带 · 浮起压在 Hero 上
   ============================================================ */
.by_svc_wrap { position: relative; z-index: 5; margin-top: -56px; }
.by_svc {
    background: #fff; border-radius: var(--by-radius-lg);
    box-shadow: var(--by-shadow-2); padding: 10px;
    display: grid; grid-template-columns: repeat(8, 1fr);
}
.by_svc_item {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 20px 8px 18px; border-radius: var(--by-radius);
    text-align: center; transition: background .2s, transform .2s;
}
.by_svc_item:hover { background: var(--by-blue-050); transform: translateY(-4px); }
.by_svc_item svg { width: 30px; height: 30px; color: var(--by-blue-600); transition: color .2s; }
.by_svc_item:hover svg { color: var(--by-orange-btn); }
.by_svc_item:hover svg .by_ico_accent { stroke: var(--by-blue-700); }
.by_svc_item strong { font-size: 14px; font-weight: 600; color: var(--by-ink); }
.by_svc_item span { font-size: 11.5px; color: var(--by-muted); line-height: 1.5; }
.by_svc_more {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px; border-top: 1px solid var(--by-line); margin-top: 2px;
    font-size: 13.5px; font-weight: 600; color: var(--by-blue-700);
}
.by_svc_more:hover { color: var(--by-orange-deep); }

/* ============================================================
   通用：板块标题（左右式，与 zh_head_bar 形态区分）
   ============================================================ */
.by_head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 28px;
}
.by_head_l { min-width: 0; }
.by_head_eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--by-orange-deep); margin-bottom: 9px;
}
.by_head_eyebrow::before {
    content: ''; width: 20px; height: 2px; border-radius: 1px; background: var(--by-orange);
}
.by_head_t { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: var(--by-ink); margin: 0; }
.by_head_t em {
    font-style: normal; color: var(--by-blue-700);
}
.by_head_d { font-size: 14px; color: var(--by-muted); margin: 10px 0 0; }
.by_head_more {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 18px; border-radius: var(--by-radius-pill);
    border: 1px solid var(--by-blue-300); color: var(--by-blue-700);
    font-size: 13.5px; font-weight: 600; background: #fff; transition: all .2s;
}
.by_head_more:hover { background: var(--by-blue-700); color: #fff; border-color: var(--by-blue-700); }

/* 深色段内的标题反色 */
.by_rank .by_head_t { color: #fff; }
.by_rank .by_head_d { color: rgba(226, 238, 251, .68); }
.by_rank .by_head_eyebrow { color: #FFB963; }
.by_rank .by_head_eyebrow::before { background: #FFB963; }
.by_rank .by_head_more { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; }
.by_rank .by_head_more:hover { background: #fff; color: var(--by-blue-900); }

/* 徽章 */
.by_tag {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 2px 9px; border-radius: var(--by-radius-pill);
    font-size: 11.5px; font-weight: 700; line-height: 1.7;
}
.by_tag_hot   { background: var(--by-orange-btn); color: #fff; }
.by_tag_reco  { background: var(--by-blue-700); color: #fff; }
.by_tag_pick  { background: var(--by-blue-900); color: #fff; }
.by_tag_good  { background: var(--by-orange-soft); color: var(--by-orange-deep); }
.by_tag_cate  { background: var(--by-blue-100); color: var(--by-blue-800); }

/* 卡片脚注（服务商 / 浏览 / 日期） */
.by_meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
    font-size: 12.5px; color: var(--by-muted);
}
.by_meta span { display: inline-flex; align-items: center; gap: 5px; }
.by_meta i { font-size: 11px; color: var(--by-blue-300); }

/* ============================================================
   ③ 今日推荐 · 杂志式 1 大 + 4 小
   ============================================================ */
.by_pick_grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }

.by_pick_main {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--by-border);
    border-radius: var(--by-radius-lg); overflow: hidden;
    box-shadow: var(--by-shadow-1); transition: box-shadow .25s, transform .25s;
}
.by_pick_main:hover { box-shadow: var(--by-shadow-3); transform: translateY(-3px); }
.by_pick_main_img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--by-blue-100); }
.by_pick_main_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.by_pick_main:hover .by_pick_main_img img { transform: scale(1.04); }
.by_pick_main_img .by_tag { position: absolute; left: 14px; top: 14px; z-index: 2; }
.by_pick_main_body { padding: 22px 24px 20px; flex: 1; display: flex; flex-direction: column; }
.by_pick_main_body h3 {
    font-size: 19px; font-weight: 700; color: var(--by-ink); margin: 0 0 10px; line-height: 1.5;
}
.by_pick_main:hover h3 { color: var(--by-blue-700); }
.by_pick_main_body p {
    font-size: 13.5px; line-height: 1.85; color: var(--by-muted); margin: 0 0 16px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.by_pick_main_body .by_meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--by-line); }

.by_pick_side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.by_pick_item {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--by-border);
    border-radius: var(--by-radius); overflow: hidden; transition: all .22s;
}
.by_pick_item:hover { border-color: var(--by-blue-300); box-shadow: var(--by-shadow-2); transform: translateY(-3px); }
.by_pick_item_img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--by-blue-100); }
.by_pick_item_img img { width: 100%; height: 100%; object-fit: cover; }
.by_pick_item_body { padding: 13px 15px 14px; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.by_pick_item_body h4 {
    font-size: 14px; font-weight: 600; color: var(--by-ink); margin: 0; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.by_pick_item:hover h4 { color: var(--by-blue-700); }
.by_pick_item_body .by_meta { margin-top: auto; font-size: 11.5px; gap: 10px; }

/* ============================================================
   ④ 平台数据 + 平台介绍 · 左文右图
   ============================================================ */
.by_about_grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.by_about_txt h2 { font-size: clamp(24px, 2.8vw, 33px); font-weight: 800; color: var(--by-ink); margin: 0 0 20px; line-height: 1.35; }
.by_about_txt h2 em { font-style: normal; display: block; color: var(--by-blue-700); }
.by_about_p { font-size: 14.5px; line-height: 2; color: var(--by-text); margin: 0 0 16px; }
.by_about_list { display: flex; flex-direction: column; gap: 13px; margin: 22px 0 28px; }
.by_about_list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--by-text); line-height: 1.75; }
.by_about_list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; color: var(--by-blue-600); }
.by_about_list b { color: var(--by-ink); font-weight: 700; }

.by_stats { display: flex; gap: 0; border-top: 1px solid var(--by-border); padding-top: 24px; }
.by_stat { flex: 1; line-height: 1.3; }
.by_stat + .by_stat { border-left: 1px solid var(--by-border); padding-left: 26px; }
.by_stat strong { display: block; font-size: 38px; font-weight: 800; color: var(--by-orange-deep); letter-spacing: -1px; }
.by_stat strong em { font-style: normal; font-size: 15px; color: var(--by-muted); margin-left: 3px; font-weight: 600; }
.by_stat span { display: block; font-size: 13px; color: var(--by-muted); margin-top: 4px; }

.by_about_visual { position: relative; }
.by_about_visual::before {
    content: ''; position: absolute; left: -22px; top: -22px; right: 38px; bottom: 38px;
    background: var(--by-blue-100); border-radius: var(--by-radius-lg); z-index: 1;
}
.by_about_visual img {
    position: relative; z-index: 2; width: 100%;
    border-radius: var(--by-radius-lg); box-shadow: var(--by-shadow-2);
}

/* ============================================================
   ⑤ 精选服务信息 · 双列错位
   ============================================================ */
.by_feat_cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.by_feat_col { display: flex; flex-direction: column; gap: 20px; }
.by_feat_col:last-child { margin-top: 44px; }

.by_feat_card {
    position: relative; display: flex; gap: 16px;
    background: #fff; border: 1px solid var(--by-border); border-radius: var(--by-radius);
    padding: 18px 20px 18px 22px; overflow: hidden; transition: all .22s;
}
.by_feat_card::before {
    content: ''; position: absolute; left: 0; top: 18px; bottom: 18px;
    width: 4px; border-radius: 0 3px 3px 0; background: var(--by-blue-600);
}
.by_feat_card:nth-child(even)::before { background: var(--by-orange); }
.by_feat_card:hover { border-color: var(--by-blue-300); box-shadow: var(--by-shadow-2); transform: translateX(3px); }
.by_feat_thumb {
    width: 118px; height: 78px; flex-shrink: 0; border-radius: var(--by-radius-sm);
    overflow: hidden; background: var(--by-blue-100);
}
.by_feat_thumb img { width: 100%; height: 100%; object-fit: cover; }
.by_feat_body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.by_feat_body h3 {
    font-size: 15.5px; font-weight: 600; color: var(--by-ink); margin: 0 0 8px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.by_feat_card:hover h3 { color: var(--by-blue-700); }
.by_feat_body p {
    font-size: 13px; line-height: 1.8; color: var(--by-muted); margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.by_feat_body .by_meta { margin-top: auto; }

/* ============================================================
   ⑥ 入驻服务商 · 名片网格
   ============================================================ */
.by_mch_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.by_mch {
    background: #fff; border: 1px solid var(--by-border); border-radius: var(--by-radius-lg);
    padding: 22px 24px; transition: all .24s;
}
.by_mch:hover { border-color: var(--by-blue-300); box-shadow: var(--by-shadow-2); transform: translateY(-4px); }
.by_mch_head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.by_mch_ava {
    width: 54px; height: 54px; flex-shrink: 0; border-radius: var(--by-radius);
    background: var(--by-grad-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; letter-spacing: -1px;
}
.by_mch:nth-child(3n-1) .by_mch_ava { background: linear-gradient(135deg, #1264C9, #3D93F0); }
.by_mch:nth-child(3n) .by_mch_ava { background: linear-gradient(135deg, #D96A05, #F2861B); }
.by_mch_name { min-width: 0; line-height: 1.4; }
.by_mch_name strong { display: block; font-size: 16px; font-weight: 700; color: var(--by-ink); }
.by_mch:hover .by_mch_name strong { color: var(--by-blue-700); }
.by_mch_name span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--by-muted); margin-top: 3px; }
.by_mch_name span b { color: var(--by-orange-deep); font-weight: 700; }
.by_mch_list { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--by-line); padding-top: 12px; }
.by_mch_list a {
    display: flex; align-items: center; gap: 8px; padding: 7px 0;
    font-size: 13.5px; color: var(--by-text); line-height: 1.6;
}
.by_mch_list a:hover { color: var(--by-blue-700); }
.by_mch_list a i { font-size: 9px; color: var(--by-blue-300); flex-shrink: 0; }
.by_mch_list a span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.by_mch_empty { font-size: 13px; color: var(--by-light); padding: 7px 0; }

/* ============================================================
   ⑦ 服务信息榜单 · 深蓝段 · 1 大榜 + 2 小榜
   ============================================================ */
.by_rank {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #073B77 0%, #0B54A6 60%, #052C5A 100%);
    padding: 72px 0;
}
.by_rank::before {
    content: ''; position: absolute; right: -100px; top: -100px; width: 420px; height: 420px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(242, 134, 27, .16) 0%, transparent 66%);
}
.by_rank .zh_container { position: relative; z-index: 2; }
.by_rank_grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }


.by_rank_box {
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--by-radius-lg); padding: 22px 24px; backdrop-filter: blur(6px);
}
.by_rank_box_head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.by_rank_box_head strong { font-size: 16.5px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 9px; }
.by_rank_box_head strong i { color: #FFB963; font-size: 14px; }
.by_rank_box_head span { font-size: 12px; color: rgba(226, 238, 251, .55); }

.by_rank_row { display: flex; align-items: center; gap: 13px; padding: 11px 0; }
.by_rank_row + .by_rank_row { border-top: 1px solid rgba(255, 255, 255, .07); }
.by_rank_no {
    width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--by-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 800;
    background: rgba(255, 255, 255, .11); color: rgba(226, 238, 251, .6);
}
/* 橙色前三只用在真正的排行榜（浏览热度）上；「最新发布」按时间排，不是名次 */
.by_rank_main .by_rank_row:nth-child(-n+3) .by_rank_no { background: var(--by-orange-btn); color: #fff; }
/* 服务商行用首字头像代替序号：这一栏不是排名，不该出现前三名的橙色 */
.by_rank_ava {
    width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--by-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 800; color: #fff;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
}
.by_rank_t {
    flex: 1; min-width: 0; font-size: 14.5px; color: rgba(232, 242, 253, .88);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.by_rank_row:hover .by_rank_t { color: #fff; }
.by_rank_v {
    flex-shrink: 0; max-width: 42%; font-size: 12px; color: rgba(226, 238, 251, .45);
    display: inline-flex; align-items: center; gap: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 大榜左列：加摘要与服务商 */
.by_rank_main .by_rank_row { padding: 13px 0; align-items: flex-start; }
.by_rank_main .by_rank_no { margin-top: 2px; }
.by_rank_main .by_rank_t { white-space: normal; line-height: 1.6; font-weight: 500; }
.by_rank_main .by_rank_sub { font-size: 12px; color: rgba(226, 238, 251, .48); margin-top: 3px; }

.by_rank_side { display: flex; flex-direction: column; gap: 22px; }

/* ============================================================
   ⑧ 为您推荐 · 标签筛选 + 6 卡
   ============================================================ */
.by_reco_tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.by_reco_tab {
    padding: 7px 17px; border-radius: var(--by-radius-pill); cursor: pointer;
    border: 1px solid var(--by-border); background: #fff;
    font-size: 13.5px; color: var(--by-text); transition: all .18s; font-family: inherit;
}
.by_reco_tab:hover { border-color: var(--by-blue-300); color: var(--by-blue-700); }
.by_reco_tab.zh_active { background: var(--by-blue-700); border-color: var(--by-blue-700); color: #fff; font-weight: 600; }
.by_reco_shuffle {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    border: none; background: transparent; font-family: inherit;
    font-size: 13.5px; font-weight: 600; color: var(--by-blue-700);
}
.by_reco_shuffle:hover { color: var(--by-orange-deep); }
.by_reco_shuffle i { transition: transform .5s; }
.by_reco_shuffle:hover i { transform: rotate(180deg); }

.by_reco_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.by_reco_card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--by-border); border-radius: var(--by-radius);
    overflow: hidden; transition: all .22s;
}
.by_reco_card:hover { border-color: var(--by-blue-300); box-shadow: var(--by-shadow-2); transform: translateY(-4px); }
.by_hide { display: none !important; }
.by_reco_img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--by-blue-100); position: relative; }
.by_reco_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.by_reco_card:hover .by_reco_img img { transform: scale(1.05); }
.by_reco_img .by_tag { position: absolute; left: 12px; top: 12px; z-index: 2; }
.by_reco_body { padding: 16px 18px 17px; flex: 1; display: flex; flex-direction: column; }
.by_reco_body h3 {
    font-size: 15.5px; font-weight: 600; color: var(--by-ink); margin: 0 0 9px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.by_reco_card:hover h3 { color: var(--by-blue-700); }
.by_reco_body p {
    font-size: 13px; line-height: 1.8; color: var(--by-muted); margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.by_reco_body .by_meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--by-line); }
.by_reco_empty {
    grid-column: 1 / -1; text-align: center; padding: 40px 20px;
    color: var(--by-muted); font-size: 14px;
}

/* ============================================================
   ⑨ 入驻与发布流程 · 横向 4 步交错
   ============================================================ */
.by_flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.by_flow_step {
    position: relative; background: #fff; border: 1px solid var(--by-border);
    border-radius: var(--by-radius-lg); padding: 26px 22px 24px; text-align: center;
    transition: all .24s;
}
.by_flow_step:nth-child(even) { transform: translateY(18px); }
.by_flow_step:hover { border-color: var(--by-blue-300); box-shadow: var(--by-shadow-2); }
.by_flow_step:nth-child(even):hover { transform: translateY(14px); }
.by_flow_step:nth-child(odd):hover { transform: translateY(-4px); }
.by_flow_no {
    position: absolute; left: 50%; top: -15px; transform: translateX(-50%);
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--by-orange-btn); color: #fff; border: 3px solid #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; box-shadow: var(--by-shadow-btn);
}
.by_flow_ico {
    width: 60px; height: 60px; margin: 10px auto 16px; border-radius: 50%;
    background: var(--by-blue-050); display: inline-flex; align-items: center; justify-content: center;
    transition: background .24s;
}
.by_flow_step:hover .by_flow_ico { background: var(--by-blue-100); }
.by_flow_ico svg { width: 28px; height: 28px; color: var(--by-blue-700); }
.by_flow_step h3 { font-size: 16.5px; font-weight: 700; color: var(--by-ink); margin: 0 0 9px; }
.by_flow_step p { font-size: 13px; line-height: 1.85; color: var(--by-muted); margin: 0; }

/* 步骤间虚线箭头 */
.by_flow_step:not(:last-child)::after {
    content: ''; position: absolute; right: -20px; top: 50%; width: 20px; height: 0;
    border-top: 2px dashed var(--by-blue-300); z-index: 1;
}

/* ============================================================
   ⑩ 常见问题 · 三列
   ============================================================ */
.by_faq_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.by_faq_col { display: flex; flex-direction: column; gap: 18px; }
.by_faq_card {
    background: #fff; border: 1px solid var(--by-border); border-radius: var(--by-radius);
    padding: 20px 22px; transition: all .22s;
}
.by_faq_card:hover { border-color: var(--by-blue-300); box-shadow: var(--by-shadow-1); }
.by_faq_q { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; }
.by_faq_q span {
    width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--by-radius-sm);
    background: var(--by-blue-700); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}
.by_faq_q strong { font-size: 15px; font-weight: 700; color: var(--by-ink); line-height: 1.6; }
.by_faq_a { font-size: 13.5px; line-height: 1.9; color: var(--by-muted); margin: 0; padding-left: 35px; }

/* ============================================================
   ⑪ 联系横幅
   ============================================================ */
.by_contact { background: var(--by-grad-soft); padding: 40px 0; }
.by_contact_inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.by_contact_l strong { display: block; font-size: 21px; font-weight: 800; color: var(--by-blue-900); margin-bottom: 5px; }
.by_contact_l span { font-size: 14px; color: var(--by-text); }
.by_contact_r { display: flex; gap: 14px; flex-wrap: wrap; }
.by_contact_item {
    display: flex; align-items: center; gap: 12px; padding: 14px 20px;
    background: rgba(255, 255, 255, .78); border-radius: var(--by-radius);
    min-width: 200px;
}
.by_contact_item i {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
    background: #fff; color: var(--by-blue-700);
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.by_contact_item div { min-width: 0; line-height: 1.4; }
.by_contact_item b { display: block; font-size: 15px; font-weight: 700; color: var(--by-ink); word-break: break-all; }
.by_contact_item em { font-style: normal; display: block; font-size: 12px; color: var(--by-muted); margin-top: 2px; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1180px) {
    .by_svc { grid-template-columns: repeat(4, 1fr); }
    .by_mch_grid { grid-template-columns: repeat(2, 1fr); }
    .by_reco_grid { grid-template-columns: repeat(2, 1fr); }
    .by_faq_grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
    .by_hero_grid { grid-template-columns: 1fr; gap: 38px; }
    .by_hero { padding: 42px 0 92px; }
    .by_hero_desc { max-width: none; }
    .by_pick_grid { grid-template-columns: 1fr; }
    .by_about_grid { grid-template-columns: 1fr; gap: 36px; }
    .by_about_visual { order: -1; max-width: 460px; margin: 0 auto; }
    .by_about_visual::before { display: none; }
    .by_rank_grid { grid-template-columns: 1fr; }
    .by_flow { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
    .by_flow_step:nth-child(even) { transform: none; }
    .by_flow_step:nth-child(even):hover { transform: translateY(-4px); }
    .by_flow_step:nth-child(2)::after { display: none; }
}

@media (max-width: 860px) {
    .by_hero_title { font-size: 28px; }
    .by_hero_search { height: 50px; padding-left: 18px; }
    .by_hero_search button { padding: 0 20px; font-size: 14px; }
    .by_hero_trust { gap: 16px; }
    .by_svc_wrap { margin-top: -46px; }
    .by_svc { grid-template-columns: repeat(3, 1fr); padding: 6px; }
    .by_svc_item { padding: 15px 6px 13px; }
    .by_svc_item span { display: none; }
    .by_feat_cols { grid-template-columns: 1fr; }
    .by_feat_col:last-child { margin-top: 0; }
    .by_pick_side { grid-template-columns: 1fr 1fr; gap: 14px; }
    .by_stats { flex-wrap: wrap; gap: 20px 0; }
    .by_stat { flex: 0 0 50%; }
    .by_stat + .by_stat { border-left: none; padding-left: 0; }
    .by_stat strong { font-size: 30px; }
    .by_rank { padding: 48px 0; }
    .by_contact_r { width: 100%; }
    .by_contact_item { flex: 1 1 100%; }
}

@media (max-width: 560px) {
    .by_hero_float { align-self: stretch; justify-content: center; }
    .by_svc { grid-template-columns: repeat(2, 1fr); }
    .by_mch_grid { grid-template-columns: 1fr; }
    .by_reco_grid { grid-template-columns: 1fr; }
    .by_faq_grid { grid-template-columns: 1fr; }
    .by_flow { grid-template-columns: 1fr; }
    .by_flow_step::after { display: none !important; }
    .by_feat_card { flex-direction: column; }
    .by_feat_thumb { width: 100%; height: 150px; }
    .by_head { flex-direction: column; align-items: flex-start; }
    .by_pick_side { grid-template-columns: 1fr; }
}