/* ============================================================
   松映信息发布平台 · 首页样式 v1.0
   门户式三栏首屏 + 浮起数据条 + 九宫格 + Bento + Tab 横条卡
   + 图文介绍 + 服务商轮播 + 深色四栏榜单 + 推荐 + 时间轴 + FAQ
   变量取自 layouts/app.blade.php 的 :root（--sy-*）
   ============================================================ */

.sy_pt0 { padding-top: 44px; }

.sy_meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
    font-size: 12.5px; color: var(--sy-text-muted);
}
.sy_meta i { margin-right: 4px; color: var(--sy-text-light); }

.sy_noimg {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #EAF2FE 0%, #E8F7EE 100%);
    color: #B9CBE2; font-size: 26px;
}

/* ============================================================
   ① 门户式三栏首屏
   ============================================================ */
.sy_top {
    position: relative;
    padding: 22px 0 0;
    background:
        radial-gradient(720px 340px at 88% -10%, rgba(47, 179, 95, .10) 0%, transparent 70%),
        radial-gradient(680px 320px at 6% 0%, rgba(31, 107, 224, .10) 0%, transparent 70%),
        var(--sy-bg);
}
.sy_top_grid {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr) 296px;
    grid-template-rows: 462px;   /* 定高：否则右栏滚动列表的复制项会把整行撑高 */
    gap: 16px;
    align-items: stretch;
}

/* 左：服务类型菜单 */
.sy_side {
    background: #fff; border: 1px solid var(--sy-border);
    border-radius: var(--sy-radius-lg); overflow: hidden;
    display: flex; flex-direction: column;
}
.sy_side_head {
    display: flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 16px; flex-shrink: 0;
    background: var(--sy-grad-blue); color: #fff;
    font-size: 14.5px; font-weight: 700;
}
.sy_side_head i { color: var(--sy-green-light); }
.sy_side_list { flex: 1; display: flex; flex-direction: column; padding: 4px 0; }
.sy_side_list li { flex: 1; display: flex; }
.sy_side_list li + li { border-top: 1px dashed var(--sy-border); }
.sy_side_list a {
    position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 6px 16px; font-size: 13.8px; color: var(--sy-text-body);
}
.sy_side_list a::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--sy-green); opacity: 0; transition: opacity .2s;
}
.sy_side_list a:hover { background: var(--sy-blue-soft); color: var(--sy-navy); font-weight: 600; }
.sy_side_list a:hover::before { opacity: 1; }
.sy_side_list img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.sy_side_list span { flex: 1; min-width: 0; }
.sy_side_list i { font-size: 11px; color: var(--sy-text-light); }
.sy_side_all {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 44px; flex-shrink: 0; font-size: 13.5px; font-weight: 600;
    color: var(--sy-navy); background: var(--sy-bg); border-top: 1px solid var(--sy-border);
}
.sy_side_all:hover { background: var(--sy-navy); color: #fff; }

/* 中：主视觉卡 */
.sy_hero {
    position: relative; min-height: 0; overflow: hidden;
    border-radius: var(--sy-radius-lg);
    background-size: cover; background-position: 50% center;
    box-shadow: var(--sy-shadow);
}
.sy_hero_veil {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 44%, rgba(255,255,255,.30) 74%, rgba(255,255,255,0) 100%);
}
.sy_hero_inner { position: relative; z-index: 2; padding: 40px 44px; max-width: 640px; }
.sy_hero_tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 14px; margin-bottom: 16px;
    font-size: 12.5px; font-weight: 600; color: var(--sy-navy);
    background: rgba(255,255,255,.9); border: 1px solid var(--sy-border-str);
    border-radius: var(--sy-radius-pill);
}
.sy_hero_tag i { color: var(--sy-green); }
.sy_hero_title {
    font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; line-height: 1.28;
    color: var(--sy-text); margin: 0 0 14px;
}
.sy_hero_title em {
    font-style: normal;
    background: var(--sy-grad-line); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sy_hero_desc { font-size: 14.5px; color: var(--sy-text-body); margin: 0 0 22px; max-width: 520px; }
.sy_hero_search {
    display: flex; align-items: center; gap: 10px; max-width: 520px;
    height: 50px; padding: 0 6px 0 18px; background: #fff;
    border: 1px solid var(--sy-border-str); border-radius: var(--sy-radius-pill);
    box-shadow: var(--sy-shadow);
}
.sy_hero_search > i { color: var(--sy-text-light); font-size: 14px; }
.sy_hero_search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-size: 14px; color: var(--sy-text);
}
.sy_hero_search button {
    flex-shrink: 0; height: 38px; padding: 0 22px; border: none; cursor: pointer;
    font-size: 14.5px; font-weight: 700; color: #fff;
    background: var(--sy-grad-green); border-radius: var(--sy-radius-pill);
    box-shadow: var(--sy-shadow-btn);
}
.sy_hero_search button:hover { filter: brightness(1.06); }
.sy_hero_tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 13px; }
.sy_hero_tags span { color: var(--sy-text-muted); }
.sy_hero_tags a {
    padding: 4px 12px; border-radius: var(--sy-radius-pill);
    background: rgba(255,255,255,.86); border: 1px solid var(--sy-border);
    color: var(--sy-text-body);
}
.sy_hero_tags a:hover { background: var(--sy-navy); border-color: var(--sy-navy); color: #fff; }

/* 右：入驻卡 + 最新发布 */
.sy_rightcol { display: flex; flex-direction: column; gap: 16px; min-height: 0; }

.sy_join {
    position: relative; overflow: hidden; flex-shrink: 0;
    padding: 20px 20px 18px; border-radius: var(--sy-radius-lg);
    background: var(--sy-grad-blue); color: #fff;
}
.sy_join::after {
    content: ''; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(74,203,124,.34) 0%, transparent 68%);
}
.sy_join_top { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.sy_join_top img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.sy_join_top strong { display: block; font-size: 16.5px; font-weight: 800; color: #fff; }
.sy_join_top span { font-size: 12px; color: rgba(226,238,252,.68); }
.sy_join_btn {
    position: relative; z-index: 2; display: block; text-align: center;
    height: 42px; line-height: 42px; border-radius: var(--sy-radius);
    background: var(--sy-grad-green); color: #fff; font-size: 15px; font-weight: 700;
    box-shadow: var(--sy-shadow-btn);
}
.sy_join_btn:hover { color: #fff; filter: brightness(1.06); }
.sy_join_link {
    position: relative; z-index: 2; display: block; text-align: center; margin-top: 10px;
    font-size: 12.5px; color: rgba(226,238,252,.7);
}
.sy_join_link:hover { color: #fff; }
.sy_join_meta {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.14);
    font-size: 12.5px; color: rgba(226,238,252,.68);
}
.sy_join_meta b { color: var(--sy-green-light); font-size: 15px; }
.sy_join_meta i { width: 1px; height: 11px; background: rgba(255,255,255,.2); }

.sy_flash {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg); overflow: hidden;
}
.sy_flash_head {
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    padding: 12px 16px; border-bottom: 1px solid var(--sy-border);
}
.sy_flash_head span { font-size: 14.5px; font-weight: 700; color: var(--sy-text); }
.sy_flash_head span i { color: var(--sy-green); margin-right: 6px; }
.sy_flash_head a { font-size: 12.5px; color: var(--sy-text-muted); }
.sy_flash_head a:hover { color: var(--sy-navy); }
.sy_flash_view { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.sy_flash_track { animation: syRoll 22s linear infinite; }
.sy_flash:hover .sy_flash_track { animation-play-state: paused; }
@keyframes syRoll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.sy_flash_track a {
    display: flex; align-items: center; gap: 8px; padding: 9px 16px;
    font-size: 13px; color: var(--sy-text-body);
}
.sy_flash_track a:hover { background: var(--sy-blue-soft); color: var(--sy-navy); }
.sy_flash_track a > i { width: 5px; height: 5px; border-radius: 50%; background: var(--sy-green); flex-shrink: 0; }
.sy_flash_track a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy_flash_track a em { font-style: normal; font-size: 11.5px; color: var(--sy-text-light); flex-shrink: 0; }

/* ============================================================
   ② 平台数据条（浮起卡）
   ============================================================ */
.sy_stats_wrap { background: linear-gradient(180deg, var(--sy-bg) 0%, var(--sy-bg) 50%, #fff 50%, #fff 100%); padding-top: 26px; }
.sy_stats {
    display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
    padding: 22px 32px; background: #fff;
    border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg);
    box-shadow: var(--sy-shadow-md);
}
.sy_stats_nums { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.sy_stat { text-align: center; }
.sy_stat strong {
    font-size: 30px; font-weight: 800; line-height: 1.1;
    background: var(--sy-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sy_stat i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--sy-green); margin-left: 3px; }
.sy_stat span { display: block; font-size: 12.8px; color: var(--sy-text-muted); margin-top: 3px; }
.sy_pledge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sy_pledge li {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px 7px 8px; border-radius: var(--sy-radius-pill);
    background: var(--sy-bg); font-size: 13px; font-weight: 600; color: var(--sy-text-body);
}
.sy_pledge img { width: 24px; height: 24px; object-fit: contain; }

/* ============================================================
   ③ 服务类型九宫格
   ============================================================ */
.sy_svc_grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.sy_svc {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 24px 14px 20px; background: #fff;
    border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.sy_svc:hover { transform: translateY(-4px); border-color: var(--sy-green); box-shadow: var(--sy-shadow-md); }
.sy_svc img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 12px; }
.sy_svc strong { font-size: 15px; font-weight: 700; color: var(--sy-text); margin-bottom: 5px; }
.sy_svc span { font-size: 12.3px; color: var(--sy-text-muted); line-height: 1.6; }

/* ============================================================
   ④ 热门推荐 · Bento 不规则网格
   ============================================================ */
.sy_bento {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 158px; gap: 16px;
}
.sy_bcard {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.sy_bcard:hover { transform: translateY(-3px); box-shadow: var(--sy-shadow-md); border-color: var(--sy-border-str); }
.sy_b1 { grid-column: span 2; grid-row: span 2; }
.sy_b2, .sy_b3 { grid-column: span 1; grid-row: span 1; }
.sy_b4 { grid-column: span 2; grid-row: span 1; }
.sy_b5 { grid-column: span 1; grid-row: span 1; }
.sy_b6 { grid-column: span 3; grid-row: span 1; }

.sy_bthumb { position: relative; overflow: hidden; background: var(--sy-bg); flex-shrink: 0; }
.sy_bthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sy_bcard:hover .sy_bthumb img { transform: scale(1.05); }
.sy_bthumb img.sy_bbadge {
    position: absolute; left: 9px; top: 9px; z-index: 2;
    width: 58px; height: auto; object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(14, 30, 60, .22));
}
.sy_bthumb img.sy_bbadge, .sy_bcard:hover .sy_bthumb img.sy_bbadge { transform: none; }
.sy_bno {
    position: absolute; left: 10px; top: 10px; z-index: 2;
    width: 24px; height: 24px; border-radius: var(--sy-radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 35, 100, .82); color: #fff; font-size: 12px; font-weight: 700;
}
.sy_bbody { padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; min-height: 0; }
.sy_bbody h3 {
    font-size: 14.5px; font-weight: 700; color: var(--sy-text); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sy_bbody p {
    margin: 0; font-size: 13px; color: var(--sy-text-muted); line-height: 1.75;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sy_bbody .sy_meta { margin-top: auto; }
.sy_bcard:hover .sy_bbody h3 { color: var(--sy-navy); }

/* 大卡：图片撑高 */
.sy_b1 .sy_bthumb { height: 196px; }
.sy_b1 .sy_bbody h3 { font-size: 17px; -webkit-line-clamp: 2; }
/* 小方卡：图片占大部分 */
.sy_b2 .sy_bthumb, .sy_b3 .sy_bthumb, .sy_b5 .sy_bthumb { height: 88px; }
.sy_b2 .sy_bbody, .sy_b3 .sy_bbody, .sy_b5 .sy_bbody { padding: 10px 12px 11px; }
.sy_b2 .sy_bbody h3, .sy_b3 .sy_bbody h3, .sy_b5 .sy_bbody h3 { font-size: 13.5px; -webkit-line-clamp: 2; }
/* 横条卡：左图右文 */
.sy_bwide { flex-direction: row; align-items: stretch; }
.sy_bwide .sy_bthumb { width: 168px; height: auto; align-self: stretch; }
.sy_bwide .sy_bbody { justify-content: center; }

/* ============================================================
   ⑤ 精选服务信息 · Tab + 横条卡
   ============================================================ */
.sy_tabs { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sy_tab {
    padding: 8px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer;
    color: var(--sy-text-body); background: var(--sy-bg);
    border: 1px solid var(--sy-border); border-radius: var(--sy-radius-pill);
    transition: all .2s ease;
}
.sy_tab:hover { border-color: var(--sy-green); color: var(--sy-green-deep); }
.sy_tab.sy_on { background: var(--sy-grad-green); border-color: transparent; color: #fff; box-shadow: var(--sy-shadow-btn); }

.sy_rows { display: none; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sy_rows.sy_on { display: grid; }
.sy_row {
    display: flex; gap: 15px; padding: 14px;
    background: #fff; border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.sy_row:hover { border-color: var(--sy-green); box-shadow: var(--sy-shadow); transform: translateX(3px); }
.sy_row_thumb {
    width: 148px; height: 96px; flex-shrink: 0; overflow: hidden;
    border-radius: var(--sy-radius); background: var(--sy-bg);
}
.sy_row_thumb img { width: 100%; height: 100%; object-fit: cover; }
.sy_row_body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sy_row_body h4 {
    font-size: 15px; font-weight: 700; color: var(--sy-text); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.sy_row:hover .sy_row_body h4 { color: var(--sy-navy); }
.sy_row_body p {
    margin: 0; font-size: 12.8px; color: var(--sy-text-muted); line-height: 1.75;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sy_row_body .sy_meta { margin-top: auto; }

/* ============================================================
   ⑥ 平台介绍
   ============================================================ */
.sy_about { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 54px; align-items: center; }
.sy_about_visual { position: relative; }
.sy_about_img {
    border-radius: var(--sy-radius-lg); overflow: hidden;
    border: 6px solid #fff; box-shadow: var(--sy-shadow-lg);
    background: var(--sy-grad-brand);
}
.sy_about_img img { width: 100%; height: auto; display: block; }
.sy_about_float {
    position: absolute; left: -18px; bottom: -18px;
    display: flex; align-items: center; gap: 11px;
    padding: 13px 18px 13px 13px; background: #fff;
    border-radius: var(--sy-radius); box-shadow: var(--sy-shadow-lg);
}
.sy_about_float img { width: 40px; height: 40px; object-fit: contain; }
.sy_about_float strong { display: block; font-size: 14px; font-weight: 700; color: var(--sy-text); }
.sy_about_float span { font-size: 12px; color: var(--sy-text-muted); }

.sy_about_title { font-size: clamp(24px, 2.9vw, 33px); font-weight: 800; line-height: 1.35; margin: 0 0 18px; }
.sy_about_text { font-size: 14.5px; line-height: 1.95; color: var(--sy-text-body); margin-bottom: 18px; }
.sy_about_list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 20px; }
.sy_about_list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--sy-text-body); }
.sy_about_list i {
    flex-shrink: 0; margin-top: 4px; width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sy-green-soft); color: var(--sy-green-deep); font-size: 8.5px;
}
.sy_about_note {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin-bottom: 22px;
    background: var(--sy-green-soft); border-left: 3px solid var(--sy-green);
    border-radius: 0 var(--sy-radius) var(--sy-radius) 0;
    font-size: 13px; color: var(--sy-green-deep); line-height: 1.75;
}
.sy_about_note i { margin-top: 3px; }
.sy_about_btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   ⑦ 服务商轮播
   ============================================================ */
.sy_swnav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sy_swbtn {
    width: 34px; height: 34px; flex-shrink: 0; cursor: pointer;
    border-radius: 50%; background: #fff; border: 1px solid var(--sy-border-str);
    color: var(--sy-navy); font-size: 12px;
}
.sy_swbtn:hover { background: var(--sy-navy); border-color: var(--sy-navy); color: #fff; }
.sy_swbtn.swiper-button-disabled { opacity: .4; cursor: default; }

.sy_mch { padding: 4px; overflow: hidden; }
.sy_mcard {
    height: 100%; padding: 20px; background: #fff;
    border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg);
    transition: border-color .22s ease, box-shadow .22s ease;
}
.sy_mcard:hover { border-color: var(--sy-green); box-shadow: var(--sy-shadow-md); }
.sy_mcard_head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.sy_mava {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--sy-radius);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--sy-grad-brand); color: #fff; font-size: 19px; font-weight: 700;
    object-fit: cover;
}
.sy_mcard_name { min-width: 0; }
.sy_mcard_name strong {
    display: block; font-size: 15.5px; font-weight: 700; color: var(--sy-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sy_mcard_name em { font-style: normal; font-size: 12px; color: var(--sy-green-deep); }
.sy_mcard_desc {
    margin: 0 0 12px; font-size: 13px; color: var(--sy-text-muted); line-height: 1.75; min-height: 44px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sy_mcard_list { border-top: 1px dashed var(--sy-border); padding-top: 11px; }
.sy_mcard_list li + li { margin-top: 7px; }
.sy_mcard_list a {
    display: block; font-size: 12.8px; color: var(--sy-text-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sy_mcard_list a i { color: var(--sy-text-light); margin-right: 6px; }
.sy_mcard_list a:hover { color: var(--sy-navy); }

/* ============================================================
   ⑧ 榜单四栏（深色段）
   ============================================================ */
.sy_rank_sec {
    position: relative; overflow: hidden; padding: 72px 0;
    background: var(--sy-grad-dark);
}
.sy_rank_sec::before {
    content: ''; position: absolute; right: -120px; top: -140px; width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(47,179,95,.20) 0%, transparent 68%);
}
.sy_rank_sec > .zh_container { position: relative; z-index: 2; }
.sy_rank_head { text-align: center; margin-bottom: 36px; }
.sy_rank_head h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: #fff; margin: 0 0 10px; }
.sy_rank_head p { margin: 0; font-size: 14px; color: rgba(212, 226, 245, .55); }

.sy_rank_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sy_rank_box {
    padding: 20px 20px 14px; border-radius: var(--sy-radius-lg);
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
}
.sy_rank_bh {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 13px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.sy_rank_bh h3 { font-size: 15.5px; font-weight: 700; color: #fff; margin: 0; }
.sy_rank_bh h3 i { color: var(--sy-green-light); margin-right: 7px; }
.sy_rank_bh a { font-size: 12.5px; color: rgba(212,226,245,.5); }
.sy_rank_bh a:hover { color: var(--sy-green-light); }

.sy_rank_list li { display: flex; gap: 10px; padding: 9px 0; }
.sy_rank_list li + li { border-top: 1px dashed rgba(255,255,255,.08); }
.sy_no {
    width: 21px; height: 21px; flex-shrink: 0; margin-top: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sy-radius-sm); font-size: 11.5px; font-weight: 700;
    background: rgba(255,255,255,.08); color: rgba(212,226,245,.6);
}
.sy_no_1 { background: var(--sy-orange); color: #fff; }
.sy_no_2 { background: var(--sy-blue); color: #fff; }
.sy_no_3 { background: var(--sy-green); color: #fff; }
.sy_rank_list a { min-width: 0; flex: 1; }
.sy_rank_list h5 {
    font-size: 13.3px; font-weight: 600; color: rgba(226,238,252,.86); line-height: 1.6; margin: 0 0 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sy_rank_list a:hover h5 { color: var(--sy-green-light); }
.sy_rank_list span { font-size: 11.8px; color: rgba(212,226,245,.4); }
.sy_rank_list span i { margin-right: 4px; }
.sy_rank_empty { color: rgba(212,226,245,.4); font-size: 13px; justify-content: center; }

.sy_cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.sy_cloud_w {
    padding: 5px 12px; border-radius: var(--sy-radius-pill);
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
    color: rgba(212,226,245,.7); line-height: 1.5;
}
.sy_cloud_w:hover { background: var(--sy-green); border-color: var(--sy-green); color: #fff; }
.sy_cw0 { font-size: 15px; }
.sy_cw1 { font-size: 13px; }
.sy_cw2 { font-size: 12px; }

/* ============================================================
   ⑨ 为您推荐
   ============================================================ */
.sy_reload {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; cursor: pointer;
    padding: 8px 18px; font-size: 13.5px; font-weight: 600;
    color: var(--sy-navy); background: #fff;
    border: 1px solid var(--sy-border-str); border-radius: var(--sy-radius-pill);
}
.sy_reload:hover { border-color: var(--sy-green); color: var(--sy-green-deep); }
.sy_reload.sy_spin i { animation: sySpin .5s linear; }
@keyframes sySpin { to { transform: rotate(360deg); } }

.sy_reco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sy_rcard {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
    padding: 20px 20px 17px; background: #fff;
    border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sy_rcard:hover { transform: translateY(-3px); box-shadow: var(--sy-shadow-md); border-color: var(--sy-border-str); }
.sy_rbar { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--sy-grad-line); }
.sy_rcard h4 {
    font-size: 15px; font-weight: 700; color: var(--sy-text); line-height: 1.55; margin: 4px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sy_rcard:hover h4 { color: var(--sy-navy); }
.sy_rcard p {
    margin: 0; font-size: 13px; color: var(--sy-text-muted); line-height: 1.8;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sy_rcard .sy_meta { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--sy-border); }

/* ============================================================
   ⑩ 入驻流程 · 交错时间轴
   ============================================================ */
.sy_flow { position: relative; padding: 6px 0; }
.sy_flow::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    transform: translateX(-50%); background: linear-gradient(180deg, var(--sy-navy), var(--sy-green));
    opacity: .28;
}
.sy_step { position: relative; display: flex; margin-bottom: 22px; }
.sy_step:last-child { margin-bottom: 0; }
.sy_step_l { justify-content: flex-start; padding-right: calc(50% + 32px); }
.sy_step_r { justify-content: flex-end; padding-left: calc(50% + 32px); }
.sy_step_card {
    display: flex; align-items: flex-start; gap: 15px; width: 100%;
    padding: 20px 22px; background: #fff;
    border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg);
    box-shadow: var(--sy-shadow-sm); transition: box-shadow .22s ease, border-color .22s ease;
}
.sy_step_card:hover { box-shadow: var(--sy-shadow-md); border-color: var(--sy-green); }
.sy_step_card img { width: 62px; height: 62px; object-fit: contain; flex-shrink: 0; }
.sy_step_txt strong {
    display: flex; align-items: center; gap: 9px;
    font-size: 16px; font-weight: 700; color: var(--sy-text); margin-bottom: 6px;
}
.sy_step_txt strong i {
    font-style: normal; font-size: 13px; font-weight: 800;
    color: #fff; background: var(--sy-grad-line);
    padding: 2px 8px; border-radius: var(--sy-radius-sm);
}
.sy_step_txt p { margin: 0; font-size: 13.3px; color: var(--sy-text-muted); line-height: 1.85; }
.sy_step_dot {
    position: absolute; left: 50%; top: 34px; transform: translateX(-50%);
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--sy-green); box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(47,179,95,.25);
}

/* ============================================================
   ⑪ FAQ + 联系我们
   ============================================================ */
.sy_faq_grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.sy_faq .zh_head_title { margin-bottom: 22px; }
.sy_faq_item {
    background: #fff; border: 1px solid var(--sy-border);
    border-radius: var(--sy-radius); margin-bottom: 12px; overflow: hidden;
}
.sy_faq_item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 18px; font-size: 15px; font-weight: 600; color: var(--sy-text);
    cursor: pointer; list-style: none;
}
.sy_faq_item summary::-webkit-details-marker { display: none; }
.sy_faq_item summary i {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sy-blue-soft); color: var(--sy-navy); font-size: 10px; transition: transform .24s ease;
}
.sy_faq_item[open] summary { color: var(--sy-navy); }
.sy_faq_item[open] summary i { transform: rotate(45deg); background: var(--sy-green-soft); color: var(--sy-green-deep); }
.sy_faq_item p {
    margin: 0; padding: 0 18px 17px; font-size: 13.5px;
    color: var(--sy-text-muted); line-height: 1.95;
}

.sy_contact {
    position: relative; overflow: hidden; padding: 28px 26px;
    background: var(--sy-grad-blue); border-radius: var(--sy-radius-lg); color: #fff;
}
.sy_contact::after {
    content: ''; position: absolute; right: -60px; bottom: -70px; width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(74,203,124,.28) 0%, transparent 68%);
}
.sy_contact > * { position: relative; z-index: 2; }
.sy_contact h3 { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.sy_contact_sub { font-size: 13px; color: rgba(226,238,252,.62); margin: 0 0 20px; }
.sy_contact_phone {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px;
    background: rgba(255,255,255,.08); border-radius: var(--sy-radius);
}
.sy_contact_phone img { width: 38px; height: 38px; object-fit: contain; }
.sy_contact_phone em { display: block; font-style: normal; font-size: 11.5px; color: rgba(226,238,252,.6); letter-spacing: 1px; }
.sy_contact_phone strong { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: .5px; }
.sy_contact_list { margin-bottom: 20px; }
.sy_contact_list li {
    display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
    font-size: 13px; color: rgba(226,238,252,.72); line-height: 1.7;
}
.sy_contact_list li + li { border-top: 1px dashed rgba(255,255,255,.10); }
.sy_contact_list img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; margin-top: 1px; }
.sy_contact_btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; border-radius: var(--sy-radius);
    background: var(--sy-grad-green); color: #fff; font-size: 14.5px; font-weight: 700;
    box-shadow: var(--sy-shadow-btn);
}
.sy_contact_btn:hover { color: #fff; filter: brightness(1.06); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1200px) {
    .sy_top_grid { grid-template-columns: 208px minmax(0, 1fr) 268px; grid-template-rows: 450px; }
    .sy_svc_grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .sy_about { grid-template-columns: 380px minmax(0, 1fr); gap: 38px; }
}
@media (max-width: 1024px) {
    .sy_top_grid { grid-template-columns: minmax(0, 1fr) 272px; grid-template-rows: 430px; }
    .sy_side { display: none; }
    .sy_hero_inner { padding: 32px 30px; }
    .sy_svc_grid { grid-template-columns: repeat(4, 1fr); }
    .sy_rank_grid { grid-template-columns: repeat(2, 1fr); }
    .sy_about { grid-template-columns: 1fr; gap: 40px; }
    .sy_about_visual { max-width: 460px; }
    .sy_stats { flex-direction: column; align-items: flex-start; gap: 18px; }
    .sy_stats_nums { gap: 30px; width: 100%; justify-content: space-between; }
    .sy_bento { grid-auto-rows: 146px; }
}
@media (max-width: 860px) {
    .sy_svc_grid { grid-template-columns: repeat(3, 1fr); }
    .sy_top_grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .sy_rightcol { flex-direction: row; }
    .sy_join, .sy_flash { flex: 1; }
    .sy_hero { min-height: 380px; }
    .sy_flash_view { min-height: 118px; max-height: 190px; }
    /* 版面转为竖向/近方形，宽幅 banner 裁切过多，改用方图 banner2 */
    .sy_hero { background-image: var(--sy-hero-square) !important; background-position: center 22%; }
    .sy_hero_veil { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 52%, rgba(255,255,255,.42) 100%); }
    .sy_rows.sy_on { grid-template-columns: 1fr; }
    .sy_reco { grid-template-columns: repeat(2, 1fr); }
    /* Bento 降级为两列 */
    .sy_bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; }
    .sy_b1 { grid-column: span 2; grid-row: span 2; }
    .sy_b4, .sy_b6 { grid-column: span 2; }
    .sy_bwide .sy_bthumb { width: 140px; }
    .sy_b1 .sy_bthumb { height: 168px; }
    /* 时间轴单列 */
    .sy_flow::before { left: 13px; }
    .sy_step_l, .sy_step_r { padding: 0 0 0 40px; justify-content: flex-start; }
    .sy_step_dot { left: 13px; top: 28px; }
    .sy_faq_grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
    .sy_top { padding-top: 14px; }
    .sy_hero { min-height: 320px; border-radius: var(--sy-radius); }
    .sy_hero_inner { padding: 26px 20px; }
    .sy_hero_veil { background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 60%, rgba(255,255,255,.62) 100%); }
    .sy_hero_search { height: 46px; padding-left: 14px; }
    .sy_hero_search button { padding: 0 16px; font-size: 13.5px; }
    .sy_rightcol { flex-direction: column; }
    .sy_svc_grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sy_svc { padding: 18px 10px 15px; }
    .sy_svc img { width: 44px; height: 44px; }
    .sy_stats { padding: 18px 18px; }
    .sy_stats_nums { gap: 18px; }
    .sy_stat strong { font-size: 24px; }
    .sy_stat span { font-size: 11.5px; }
    .sy_pledge li { font-size: 12px; padding: 6px 11px 6px 6px; }
    .sy_rank_sec { padding: 48px 0; }
    .sy_rank_grid { grid-template-columns: 1fr; }
    .sy_reco { grid-template-columns: 1fr; }
    .sy_bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .sy_bcard, .sy_bwide { flex-direction: column; }
    .sy_bcard .sy_bthumb, .sy_bwide .sy_bthumb { width: 100%; height: 168px; }
    .sy_b1, .sy_b2, .sy_b3, .sy_b4, .sy_b5, .sy_b6 { grid-column: span 1; grid-row: span 1; }
    .sy_b2 .sy_bbody h3, .sy_b3 .sy_bbody h3, .sy_b5 .sy_bbody h3 { font-size: 14.5px; }
    .sy_row { flex-direction: column; }
    .sy_row_thumb { width: 100%; height: 160px; }
    .sy_about_list { grid-template-columns: 1fr; }
    .sy_about_float { left: 8px; bottom: -14px; padding: 10px 14px 10px 10px; }
    .sy_tabs { width: 100%; }
    .sy_tab { flex: 1; padding: 8px 6px; font-size: 12.5px; }
    .sy_step_card { flex-direction: column; gap: 12px; padding: 18px; }
    .sy_step_card img { width: 52px; height: 52px; }
}