/* ============================================================
   亚米互娱信息发布平台 · 首页样式 v5.0（深色）
   令牌来自 layouts/app.blade.php 的 --dk-*（深色系统）
   ============================================================ */

.ym_home { background: var(--dk-bg); color: var(--dk-text); }
.ym_home .zh_main { background: var(--dk-bg); }

.ym_wrap { max-width: var(--by-container); margin: 0 auto; padding: 0 24px; }
.ym_sec { padding: 76px 0; }
.ym_sec:nth-of-type(even) { background: var(--dk-bg-2); }

/* 段头：左标题右操作，标题第二段走渐变字 */
.ym_hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.ym_hd_tight { margin-bottom: 20px; }
.ym_hd h2 { margin: 0; font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; color: var(--dk-head); letter-spacing: .5px; }
.ym_hd h2 em, .ym_about_txt h2 em, .ym_hero h1 em {
    font-style: normal; background: var(--dk-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ym_hd p { margin: 0; font-size: 13.5px; color: var(--dk-muted); }
.ym_more {
    display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
    color: var(--dk-cyan); transition: gap .2s ease;
}
.ym_more:hover { gap: 11px; }

/* ============================================================
   ① Hero · 左文右图
   ============================================================ */
.ym_hero {
    position: relative; overflow: hidden; padding: 64px 0 0;
    background:
        radial-gradient(900px 480px at 85% 10%, rgba(37, 99, 235, .22), transparent 60%),
        radial-gradient(700px 420px at 5% 90%, rgba(41, 197, 246, .10), transparent 60%),
        var(--dk-bg);
}
/* 细网格底纹，科技感但不抢内容 */
.ym_hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image:
        linear-gradient(rgba(41, 197, 246, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41, 197, 246, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
            mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.ym_hero_grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }

.ym_eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-bottom: 22px;
    border: 1px solid var(--dk-line-2); border-radius: var(--by-radius-pill);
    background: rgba(41, 197, 246, .06); font-size: 13px; color: var(--dk-cyan);
}
.ym_hero h1 { margin: 0 0 18px; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.22; font-weight: 800; color: var(--dk-head); }
.ym_hero_txt > p { margin: 0 0 28px; font-size: 15.5px; line-height: 1.9; color: var(--dk-text); max-width: 520px; }

.ym_hero_search {
    display: flex; align-items: center; height: 54px; padding: 0 6px 0 18px; max-width: 540px;
    background: var(--dk-surface); border: 1px solid var(--dk-line-2); border-radius: var(--by-radius);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ym_hero_search:focus-within { border-color: var(--dk-cyan); box-shadow: var(--dk-glow); }
.ym_hero_search > i { color: var(--dk-muted); }
.ym_hero_search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    padding: 0 12px; font-size: 15px; color: var(--dk-head);
}
.ym_hero_search input::placeholder { color: var(--dk-muted); }
.ym_hero_search button {
    height: 42px; padding: 0 24px; border: none; cursor: pointer; border-radius: 6px;
    background: var(--dk-grad); color: #fff; font-size: 14.5px; font-weight: 700;
}
.ym_hero_search button:hover { filter: brightness(1.1); }

.ym_hero_tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.ym_hero_tags span { font-size: 13px; color: var(--dk-muted); margin-right: 4px; }
.ym_hero_tags a {
    padding: 5px 12px; font-size: 12.5px; color: var(--dk-text);
    border: 1px solid var(--dk-line); border-radius: var(--by-radius-pill); transition: all .2s ease;
}
.ym_hero_tags a:hover { border-color: var(--dk-cyan); color: var(--dk-cyan); }

.ym_hero_pic { position: relative; }
.ym_hero_pic img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
    border-radius: var(--by-radius-lg); border: 1px solid var(--dk-line-2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
/* 浮层数据卡（毛玻璃） */
.ym_float {
    position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: rgba(19, 33, 58, .78); border: 1px solid rgba(41, 197, 246, .3);
    border-radius: var(--by-radius); backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35); font-size: 13px; color: var(--dk-text);
}
.ym_float i {
    width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: var(--dk-grad); color: #fff; font-size: 14px;
}
.ym_float strong { font-size: 20px; font-weight: 800; color: var(--dk-head); margin-right: 3px; }
.ym_float_a { left: -26px; bottom: 34px; }
.ym_float_b { right: -18px; top: 28px; }

/* 首屏下方的栏目/数据条 */
.ym_strip {
    position: relative; margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg) var(--by-radius-lg) 0 0;
    border-bottom: none; background: rgba(19, 33, 58, .6); overflow: hidden;
}
.ym_strip_item {
    display: flex; align-items: center; gap: 14px; padding: 22px 22px;
    border-right: 1px solid var(--dk-line); transition: background .2s ease;
}
.ym_strip_item:last-child { border-right: none; }
.ym_strip_item:hover { background: var(--dk-surface); }
.ym_strip_item svg { color: var(--dk-cyan); flex-shrink: 0; }
.ym_strip_item span { flex: 1; min-width: 0; }
.ym_strip_item strong { display: block; font-size: 15px; color: var(--dk-head); }
.ym_strip_item em { font-style: normal; font-size: 12.5px; color: var(--dk-muted); }
.ym_strip_item > i { color: var(--dk-muted); font-size: 12px; transition: transform .2s ease, color .2s ease; }
.ym_strip_item:hover > i { transform: translateX(3px); color: var(--dk-cyan); }

/* ============================================================
   ② 服务能力矩阵
   ============================================================ */
.ym_matrix_row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; margin-bottom: 16px; }
.ym_matrix_label {
    display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px;
    border-radius: var(--by-radius-lg);
    background: linear-gradient(160deg, rgba(41, 197, 246, .16), rgba(37, 99, 235, .10));
    border: 1px solid rgba(41, 197, 246, .28);
}
.ym_matrix_label svg { color: var(--dk-cyan); }
.ym_matrix_label strong { font-size: 18px; color: var(--dk-head); }
.ym_matrix_label span { font-size: 12.5px; color: var(--dk-muted); }
.ym_matrix_grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ym_matrix_item {
    display: flex; flex-direction: column; gap: 8px; padding: 18px 16px;
    background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ym_matrix_item:hover { border-color: var(--dk-cyan); transform: translateY(-3px); box-shadow: var(--dk-glow); }
.ym_matrix_item svg { color: var(--dk-cyan); }
.ym_matrix_item strong { font-size: 14.5px; color: var(--dk-head); }
.ym_matrix_item em { font-style: normal; font-size: 12px; line-height: 1.6; color: var(--dk-muted); }

/* ============================================================
   ③ 精选服务 · 竖向标签页
   ============================================================ */
.ym_tabs { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.ym_tabs_nav { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 90px; }
.ym_tab {
    display: flex; align-items: center; gap: 14px; padding: 18px; text-align: left; cursor: pointer;
    background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg);
    color: var(--dk-text); font-family: inherit; transition: all .2s ease; position: relative; overflow: hidden;
}
.ym_tab svg { color: var(--dk-muted); flex-shrink: 0; transition: color .2s ease; }
.ym_tab strong { display: block; font-size: 16px; color: var(--dk-head); }
.ym_tab em { display: block; font-style: normal; font-size: 12px; color: var(--dk-muted); margin-top: 3px; line-height: 1.6; }
.ym_tab:hover { border-color: var(--dk-line-2); }
.ym_tab.ym_on { border-color: var(--dk-cyan); background: var(--dk-surface-2); box-shadow: var(--dk-glow); }
.ym_tab.ym_on svg { color: var(--dk-cyan); }
.ym_tab.ym_on::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--dk-grad); border-radius: 0 3px 3px 0; }
.ym_tab_foot { padding: 12px 4px; font-size: 13px; color: var(--dk-cyan); }

.ym_tab_panel { display: none; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.ym_tab_panel.ym_on { display: grid; animation: ymFade .35s ease; }
@keyframes ymFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ym_tab_lead {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg);
    transition: border-color .2s ease;
}
.ym_tab_lead:hover { border-color: var(--dk-line-2); }
.ym_tab_lead_pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dk-surface-2); }
.ym_tab_lead_pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ym_tab_lead:hover .ym_tab_lead_pic img { transform: scale(1.05); }
.ym_tab_lead_txt { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.ym_tab_lead_txt em { font-style: normal; font-size: 12.5px; color: var(--dk-cyan); }
.ym_tab_lead_txt strong { font-size: 18px; line-height: 1.5; color: var(--dk-head); }
.ym_tab_lead_txt > span { font-size: 13.5px; line-height: 1.85; color: var(--dk-text); }
.ym_tab_lead_txt small { font-size: 12px; color: var(--dk-muted); }

.ym_tab_list { display: flex; flex-direction: column; gap: 12px; }
.ym_tab_list a {
    display: flex; gap: 14px; padding: 12px; align-items: center;
    background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg);
    transition: border-color .2s ease, transform .2s ease;
}
.ym_tab_list a:hover { border-color: var(--dk-cyan); transform: translateX(4px); }
.ym_tab_thumb { width: 104px; flex-shrink: 0; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--dk-surface-2); }
.ym_tab_thumb img { width: 100%; height: 100%; object-fit: cover; }
.ym_tab_li_txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ym_tab_li_txt strong {
    font-size: 14.5px; line-height: 1.55; color: var(--dk-head);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ym_tab_li_txt em { font-style: normal; font-size: 12px; color: var(--dk-muted); }

/* ============================================================
   ④ 循环卡带
   ============================================================ */
.ym_marquee_sec { padding: 56px 0 64px; background: var(--dk-bg); border-top: 1px solid var(--dk-line); border-bottom: 1px solid var(--dk-line); }
.ym_marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ym_marquee_track { display: flex; gap: 16px; width: max-content; animation: ymScroll 46s linear infinite; }
.ym_marquee:hover .ym_marquee_track { animation-play-state: paused; }
@keyframes ymScroll { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .ym_marquee_track { animation: none; } }
.ym_mq_card {
    width: 260px; flex-shrink: 0; overflow: hidden;
    background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg);
    transition: border-color .2s ease;
}
.ym_mq_card:hover { border-color: var(--dk-cyan); }
.ym_mq_pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dk-surface-2); }
.ym_mq_pic img { width: 100%; height: 100%; object-fit: cover; }
.ym_mq_txt { display: block; padding: 12px 14px 14px; }
.ym_mq_txt em { display: block; font-style: normal; font-size: 11.5px; color: var(--dk-cyan); margin-bottom: 4px; }
.ym_mq_txt strong { font-size: 13.5px; line-height: 1.5; color: var(--dk-head); }

/* ============================================================
   ⑤ 热度排行 + 服务商墙
   ============================================================ */
.ym_duo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ym_rank_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ym_rank_list a {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius);
    transition: border-color .2s ease;
}
.ym_rank_list a:hover { border-color: var(--dk-line-2); }
.ym_rank_no {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: var(--dk-muted); background: var(--dk-surface-2);
}
.ym_rank_no.ym_top { background: var(--dk-amber); color: #1A1305; }
.ym_rank_body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ym_rank_body strong { font-size: 14px; color: var(--dk-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym_rank_bar { display: block; height: 4px; border-radius: 2px; background: var(--dk-surface-2); overflow: hidden; }
.ym_rank_bar i { display: block; height: 100%; background: var(--dk-grad); border-radius: 2px; }
.ym_rank_v { font-size: 12.5px; color: var(--dk-muted); font-variant-numeric: tabular-nums; }

.ym_wall { display: flex; flex-direction: column; }
/* 服务商少（3 家）时单列宽卡，平均撑满与左侧排行等高 */
.ym_wall_grid { flex: 1; display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 12px; }
.ym_wall_card {
    display: flex; gap: 12px; padding: 16px;
    background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg);
    transition: border-color .2s ease, transform .2s ease;
}
.ym_wall_card:hover { border-color: var(--dk-cyan); transform: translateY(-2px); }
.ym_wall_ava {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--dk-grad); color: #fff; font-size: 18px; font-weight: 800;
}
.ym_wall_txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ym_wall_txt strong { font-size: 14px; color: var(--dk-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym_wall_txt em { font-style: normal; font-size: 11.5px; color: var(--dk-muted); }
.ym_wall_txt em i { color: var(--dk-cyan); margin-right: 3px; }
.ym_wall_txt p { margin: 2px 0 4px; font-size: 12.5px; line-height: 1.7; color: var(--dk-muted); }
.ym_wall_txt span { font-size: 12.5px; color: var(--dk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym_wall_txt span i { color: var(--dk-cyan); margin-right: 4px; font-size: 11px; }
.ym_wall_card { align-items: center; padding: 18px 20px; }
.ym_wall_ava { width: 52px; height: 52px; font-size: 22px; border-radius: 12px; }

/* ============================================================
   ⑥ 最新发布 · 时间轴
   ============================================================ */
.ym_tl { position: relative; padding-left: 110px; }
.ym_tl::before { content: ''; position: absolute; left: 86px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--dk-cyan), var(--dk-blue) 60%, transparent); opacity: .5; }
.ym_tl_day { position: relative; margin-bottom: 28px; }
.ym_tl_day::before {
    content: ''; position: absolute; left: -30px; top: 8px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--dk-bg); border: 2px solid var(--dk-cyan); box-shadow: 0 0 10px rgba(41, 197, 246, .6);
}
.ym_tl_date { position: absolute; left: -110px; top: 0; width: 64px; text-align: right; }
.ym_tl_date strong { display: block; font-size: 20px; font-weight: 800; color: var(--dk-head); font-variant-numeric: tabular-nums; }
.ym_tl_date span { font-size: 12px; color: var(--dk-muted); }
.ym_tl_items { display: flex; flex-direction: column; gap: 12px; }
.ym_tl_item {
    display: flex; gap: 16px; align-items: center; padding: 14px;
    background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg);
    transition: border-color .2s ease;
}
.ym_tl_item:hover { border-color: var(--dk-cyan); }
.ym_tl_pic { width: 132px; flex-shrink: 0; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--dk-surface-2); }
.ym_tl_pic img { width: 100%; height: 100%; object-fit: cover; }
.ym_tl_txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ym_tl_txt em { font-style: normal; font-size: 12px; color: var(--dk-cyan); }
.ym_tl_txt strong { font-size: 15.5px; color: var(--dk-head); }
.ym_tl_txt > span { font-size: 13px; color: var(--dk-text); line-height: 1.8; }
.ym_tl_item time { font-size: 12px; color: var(--dk-muted); font-variant-numeric: tabular-nums; align-self: flex-start; }

/* ============================================================
   ⑦ 三步上手
   ============================================================ */
.ym_steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.ym_step {
    position: relative; padding: 28px 24px; overflow: hidden;
    background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg);
}
.ym_step svg { color: var(--dk-cyan); margin-bottom: 14px; }
.ym_step strong { display: block; font-size: 17px; color: var(--dk-head); margin-bottom: 8px; }
.ym_step p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--dk-text); }
.ym_step_no {
    position: absolute; right: 18px; top: 10px; font-size: 52px; font-weight: 900; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px var(--dk-line-2);
}

/* ============================================================
   ⑧ 为您推荐 · 不规则网格
   ============================================================ */
.ym_reco {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px;
    grid-template-areas:
        "a a b c"
        "a a d d"
        "e f d d";
}
.ym_r0 { grid-area: a; } .ym_r1 { grid-area: b; } .ym_r2 { grid-area: c; }
.ym_r3 { grid-area: d; } .ym_r4 { grid-area: e; } .ym_r5 { grid-area: f; }
.ym_r6 { display: none; }
.ym_reco_card {
    position: relative; overflow: hidden; border-radius: var(--by-radius-lg);
    border: 1px solid var(--dk-line); background: var(--dk-surface);
}
.ym_reco_card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ym_reco_card:hover img { transform: scale(1.06); }
.ym_reco_card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 21, 38, 0) 35%, rgba(11, 21, 38, .92) 100%); }
.ym_reco_txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.ym_reco_txt em { font-style: normal; font-size: 12px; color: var(--dk-cyan); }
.ym_reco_txt strong { font-size: 15px; line-height: 1.5; color: #fff; }
.ym_r0 .ym_reco_txt strong, .ym_r3 .ym_reco_txt strong { font-size: 19px; }
.ym_reco_txt span { font-size: 13px; line-height: 1.8; color: rgba(232, 240, 247, .8); }

/* ============================================================
   ⑨ 关于平台
   ============================================================ */
.ym_about { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.ym_about_pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--by-radius-lg); border: 1px solid var(--dk-line-2); }
.ym_about_txt h2 { margin: 0 0 18px; font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; color: var(--dk-head); }
.ym_about_txt p { margin: 0 0 14px; font-size: 14.5px; line-height: 2; color: var(--dk-text); }
.ym_about_nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.ym_about_nums div { padding: 16px; text-align: center; background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius); }
.ym_about_nums strong { display: block; font-size: 26px; font-weight: 800; color: var(--dk-cyan); }
.ym_about_nums span { font-size: 12.5px; color: var(--dk-muted); }

/* ============================================================
   ⑩ 常见问题 · 两列
   ============================================================ */
.ym_faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.ym_faq_item { background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--by-radius-lg); }
.ym_faq_item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 18px 20px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--dk-head);
}
.ym_faq_item summary::-webkit-details-marker { display: none; }
.ym_faq_item summary i { color: var(--dk-cyan); font-size: 12px; transition: transform .25s ease; }
.ym_faq_item[open] { border-color: var(--dk-line-2); }
.ym_faq_item[open] summary i { transform: rotate(45deg); }
.ym_faq_item p { margin: 0; padding: 0 20px 18px; font-size: 13.5px; line-height: 1.9; color: var(--dk-text); }

/* ============================================================
   响应式（管局只看 PC，这里只保证窄屏不崩）
   ============================================================ */
@media (max-width: 1100px) {
    .ym_hero_grid, .ym_about, .ym_duo { grid-template-columns: 1fr; }
    .ym_matrix_grid { grid-template-columns: repeat(3, 1fr); }
    .ym_tabs { grid-template-columns: 1fr; }
    .ym_tabs_nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .ym_float_a { left: 12px; } .ym_float_b { right: 12px; }
}
@media (max-width: 760px) {
    .ym_sec { padding: 48px 0; }
    .ym_wrap { padding: 0 16px; }
    .ym_strip { grid-template-columns: 1fr 1fr; }
    .ym_matrix_row { grid-template-columns: 1fr; }
    .ym_matrix_grid { grid-template-columns: repeat(2, 1fr); }
    .ym_tab_panel.ym_on, .ym_steps, .ym_faq, .ym_wall_grid { grid-template-columns: 1fr; }
    .ym_tl { padding-left: 0; } .ym_tl::before, .ym_tl_day::before { display: none; }
    .ym_tl_date { position: static; text-align: left; width: auto; margin-bottom: 8px; }
    .ym_reco { grid-template-columns: 1fr 1fr; grid-template-areas: none; grid-auto-rows: 170px; }
    .ym_reco .ym_reco_card { grid-area: auto; }
}