/* MU-GM灵智技术开发 · public/static/mobile/css/m-home.css —— 手机站首页区块(v1.179)
   v1.186:适配兼容改「标签切换+横滑」——顶部版本 chips 点击切换分组,
   v1.187:截图改大图轮播——单张占卡宽 86% 居中(scroll-snap center+stop always),
   v1.188:全站视觉质感升级——8 色渐变图标/卡片阴影/渐变按钮/氛围光晕,
   v1.189:四大模块版式重构——产品中心大卡轮播(86% 居中+图上毛玻璃价格徽章)、
   核心产品编号手风琴(单卡分区+CSS counter 01/02)、功能中心 chips 切换大图预览、
   解决方案左图右文行卡(details 展开要点),chips 规则与适配兼容共用,面板切换淡入。
   v1.193:产品卡去价格(v1.192)后补标签——图上 __tag 红渐变角标+标题下 __cats 品牌蓝分类胶囊(v1.222 首页 __cats 已下线,仅列表页保留)。
   v1.202:标签行居中——justify-content: safe center,放不下自动回退起始对齐保横滑。
   v1.203:消除撞版式——解决方案改「全宽场景大卡」(16:9 大图通栏+要点胶囊墙+CTA,区别于资讯行卡)、
   适配兼容改「分段控制器+双列相册网格」(整条分段等宽+计数徽章+4:3 网格,区别于功能中心 chips+单大图),
   功能中心保留 chips+大图并与之拆分独立样式。
   v1.204:解决方案再改「场景介绍卡」——用户指正图片不是重点、介绍内容才是,弃通栏大图,
   改小缩略图头部点缀(46px)+tagline+逐条要点清单(m-checks 勾选)+CTA,卡片左缘品牌蓝竖条强化「方案」属性。
   v1.334:B站/小红书内容APP风——hero 改圆角大卡(track 16px 圆角+投影+两侧留边)、功能中心大图 12px、
   适配兼容预览台 16px、资讯缩略图 10px+标题加粗(全站卡片大圆角由 m-base.css --radius-md 覆盖统一生效)。 */

/* ===== Hero 横滑轮播(scroll-snap 原生触摸) ===== */
.m-hero { position: relative; margin: 12px 14px 0; }
.m-hero__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 16px; overflow: hidden;
    box-shadow: var(--m-shadow);
}
.m-hero__track::-webkit-scrollbar { display: none; }
.m-hero__slide {
    position: relative; flex: 0 0 100%; scroll-snap-align: center;
    display: block; height: 200px; overflow: hidden;
    background: var(--bg-card);
}
.m-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.m-hero__mask {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,15,29,.05) 30%, rgba(10,15,29,.88) 100%);
}
.m-hero__cap {
    position: absolute; left: 16px; right: 16px; bottom: 14px;
}
.m-hero__cap h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.m-hero__cap p {
    margin: 0 0 8px; font-size: 13px; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.m-hero__btn {
    display: inline-flex; align-items: center; gap: 2px;
    height: 30px; padding: 0 14px; border-radius: 8px;
    background: var(--primary); color: #fff; font-size: 13px;
}
.m-hero__btn svg { width: 15px; height: 15px; }
.m-hero__dots {
    position: absolute; right: 14px; bottom: 22px; display: flex; gap: 5px;
}
.m-hero__dots i {
    width: 6px; height: 6px; border-radius: 3px; cursor: pointer;
    background: rgba(255,255,255,.35); transition: width .25s, background .25s;
}
.m-hero__dots i.is-on { width: 16px; background: var(--primary); }

/* ===== 金刚区:8 宫格 ===== */
.m-grid8 {
    display: grid; grid-template-columns: repeat(4, 1fr);
    margin: 14px 14px 0; padding: 6px 0;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--m-shadow);
}
.m-grid8 a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; height: 82px; font-size: 12px; color: var(--text-secondary);
    transition: transform .15s;
}
.m-grid8 a:active { color: var(--primary); transform: scale(.92); }
.m-grid8 svg {
    width: 26px; height: 26px; padding: 9px; box-sizing: content-box;
    border-radius: 16px; color: #fff;
}
.m-grid8 a:nth-child(8n+1) svg { background: linear-gradient(135deg, #5b8cff, #3a5fd9); box-shadow: 0 3px 10px rgba(79,124,255,.30); }
.m-grid8 a:nth-child(8n+2) svg { background: linear-gradient(135deg, #36ba78, #1f8f5c); box-shadow: 0 3px 10px rgba(54,186,120,.30); }
.m-grid8 a:nth-child(8n+3) svg { background: linear-gradient(135deg, #9d7bff, #6d4de0); box-shadow: 0 3px 10px rgba(157,123,255,.30); }
.m-grid8 a:nth-child(8n+4) svg { background: linear-gradient(135deg, #ffb547, #e08a1f); box-shadow: 0 3px 10px rgba(255,181,71,.30); }
.m-grid8 a:nth-child(8n+5) svg { background: linear-gradient(135deg, #ff5364, #d93a4d); box-shadow: 0 3px 10px rgba(255,83,100,.30); }
.m-grid8 a:nth-child(8n+6) svg { background: linear-gradient(135deg, #38b6c4, #1f8a98); box-shadow: 0 3px 10px rgba(56,182,196,.30); }
.m-grid8 a:nth-child(8n+7) svg { background: linear-gradient(135deg, #6fb3ff, #3f7fe0); box-shadow: 0 3px 10px rgba(111,179,255,.30); }
.m-grid8 a:nth-child(8n+8) svg { background: linear-gradient(135deg, #d98cff, #a55ad6); box-shadow: 0 3px 10px rgba(217,140,255,.30); }

/* ===== 产品中心:大卡横滑轮播(v1.189,一屏一卡 86% 居中,同适配兼容模式) ===== */
.m-pro {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px 7% 6px; margin: -2px 0 0; scrollbar-width: none;
}
.m-pro::-webkit-scrollbar { display: none; }
.m-pro-card {
    flex: 0 0 86%; scroll-snap-align: center; scroll-snap-stop: always;
    display: flex; flex-direction: column; overflow: hidden; min-width: 0;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--m-shadow);
    transition: transform .15s;
}
.m-pro-card:active { transform: scale(.97); }
.m-pro-card__media { position: relative; }
.m-pro-card__media img, .m-pro-card__empty {
    display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover;
    background: var(--bg-card-light);
}
.m-pro-card__tag {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; margin: 0;
    padding: 4px 11px; border-radius: 999px; font-style: normal;
    font-weight: 700; font-size: 12px; color: #fff;
    background: linear-gradient(135deg, #ff7d87, #ff5c6c);
    box-shadow: 0 3px 10px rgba(255, 92, 108, .35);
}
.m-pro-card__bd { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 14px; }
.m-pro-card__bd h4 { margin: 0 0 6px; font-size: 15px; line-height: 1.4; }
.m-pro-card__bd p {
    margin: 0 0 12px; font-size: 12px; color: var(--text-muted);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.m-pro-card__bd .m-chip { align-self: stretch; justify-content: center; height: 32px; }
.m-pro-card__bd .m-chip svg { width: 13px; height: 13px; }

/* ===== 核心产品:编号手风琴(单卡分区,v1.189 重构,CSS counter 出 01/02 编号) ===== */
.m-acc {
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--m-shadow); overflow: hidden;
    counter-reset: acc;
}
.m-acc__item { border-top: 1px solid var(--line); counter-increment: acc; }
.m-acc__item:first-child { border-top: 0; }
.m-acc__item summary {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; cursor: pointer; list-style: none; min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.m-acc__item summary::-webkit-details-marker { display: none; }
.m-acc__item summary::before {
    content: counter(acc, decimal-leading-zero);
    font-size: 14px; font-weight: 700; color: var(--primary);
    font-variant-numeric: tabular-nums; letter-spacing: .5px; flex: none;
    transition: color .2s;
}
.m-acc__item[open] > summary::before { color: var(--accent); }
.m-acc__tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.m-acc__tt strong { font-size: 15px; }
.m-acc__tt small { font-size: 12px; color: var(--text-muted); }
.m-acc__chev {
    width: 14px; height: 14px; flex: none; margin-left: auto; color: var(--text-muted);
    padding: 7px; box-sizing: content-box; border: 1px solid var(--line); border-radius: 50%;
    transition: transform .2s, border-color .2s, color .2s;
}
.m-acc__item[open] > summary .m-acc__chev {
    transform: rotate(180deg); border-color: rgba(79, 124, 255, .5); color: var(--primary);
}
.m-acc__item[open] > summary { background: rgba(79, 124, 255, .05); border-bottom: 1px solid var(--line); }
.m-acc__bd { padding: 14px; }
.m-acc__bd img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover;
    border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 10px;
}
.m-acc__bd h4 { margin: 0 0 6px; font-size: 15px; }
.m-acc__bd p { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* 勾选清单(核心产品/解决方案共用) */
.m-checks { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.m-checks li { position: relative; padding-left: 20px; font-size: 13px; color: var(--text-secondary); }
.m-checks li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px;
    border-radius: 50%; background: rgba(56, 178, 172, .15);
}
.m-checks li::after {
    content: ""; position: absolute; left: 4px; top: 6px; width: 4px; height: 7px;
    border: solid var(--success); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* .m-chip-btn 已移至 m-base.css(v1.332:产品详情页立即购买按钮同款,全站单一来源) */

/* ===== 解决方案:两列网格介绍卡(v1.281 重设计,一行两列两行四个,上图下文,四色循环;v1.340 去序号水印) ===== */
.m-solu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.m-solu__card {
    --sc: 79, 124, 255;
    display: flex; flex-direction: column; gap: 9px; padding: 10px;
    background: linear-gradient(135deg, rgba(var(--sc), .10), rgba(var(--sc), 0) 55%), var(--bg-card);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--m-shadow); overflow: hidden;
}
.m-solu__card:nth-child(4n + 2) { --sc: 54, 186, 120; }
.m-solu__card:nth-child(4n + 3) { --sc: 167, 97, 238; }
.m-solu__card:nth-child(4n + 4) { --sc: 255, 159, 90; }
.m-solu__media { width: 100%; }
.m-solu__thumb {
    display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px;
    border: 1px solid rgba(var(--sc), .40); background: var(--bg-card-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.m-solu__ph {
    display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 10px; color: rgba(255, 255, 255, .78);
    background: linear-gradient(135deg, rgba(var(--sc), .32), rgba(var(--sc), .08));
    border: 1px solid rgba(var(--sc), .38);
}
.m-solu__ph svg { width: 32px; height: 32px; }
.m-solu__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-solu__tt { flex: 1; min-width: 0; }
.m-solu__tt h4 { margin: 0 0 2px; font-size: 14px; }
.m-solu__tagline {
    margin: 0 0 8px; font-size: 12px; font-weight: 600; color: rgb(var(--sc));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-solu .m-checks { margin-bottom: 8px; font-size: 11px; }
.m-solu .m-checks li { margin-bottom: 3px; }
.m-solu__cta { display: flex; align-items: center; justify-content: center; height: 30px; }
.m-solu__cta svg { width: 13px; height: 13px; margin-left: 4px; }

/* ===== 功能中心:chips 胶囊切换+大图预览(v1.203 与适配兼容拆分样式) ===== */
.m-feat {
    padding: 12px 12px 10px;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--m-shadow);
}
.m-feat__tabs {
    display: flex; justify-content: safe center; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
    margin-bottom: 12px; scrollbar-width: none;
}
.m-feat__tabs::-webkit-scrollbar { display: none; }
.m-feat__tab {
    flex: none; min-height: 32px; padding: 0 16px; scroll-snap-align: start;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--bg-card-light); color: var(--text-secondary); font-size: 13px;
}
.m-feat__tab.is-active {
    border-color: rgba(79, 124, 255, .55);
    background: var(--primary); color: #fff; font-weight: 600;
}
.m-feat__panel { display: none; }
.m-feat__panel.is-active { display: block; animation: m-fade .25s ease; }
@keyframes m-fade { from { opacity: 0; transform: translateY(4px); } }

/* ===== 适配兼容:分段控制器+双列相册网格(v1.203 重构,整条分段等宽,激活段渐变填充) ===== */
.m-compat {
    padding: 12px 12px 14px;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--m-shadow);
}
.m-compat__tabs {
    display: flex; gap: 4px; padding: 4px; margin-bottom: 12px;
    background: var(--bg-card-light); border: 1px solid var(--line); border-radius: 12px;
}
.m-compat__tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 34px; padding: 0 6px; border-radius: 9px;
    background: transparent; border: 0; color: var(--text-muted); font-size: 13px;
    -webkit-tap-highlight-color: transparent; transition: color .2s, background .2s;
}
.m-compat__tabtxt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-compat__tab i {
    flex: none; font-style: normal; font-size: 10px; line-height: 1;
    padding: 3px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .08); color: var(--text-muted);
}
.m-compat__tab.is-active {
    background: var(--primary); color: #fff; font-weight: 600;
}
.m-compat__tab.is-active i { background: rgba(255, 255, 255, .22); color: #fff; }
.m-compat__group { display: none; }
.m-compat__group.is-active { display: block; animation: m-fade .25s ease; }

/* ===== 功能中心面板:大图 + 居中说明(v1.189) ===== */
.m-feat__panel img {
    width: 100%; aspect-ratio: 16/10; object-fit: cover;
    border-radius: 12px; border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.m-feat__bd { padding: 12px 4px 2px; text-align: center; }
.m-feat__bd h4 { margin: 0 0 6px; font-size: 15px; }
.m-feat__sub { margin: 0 0 8px; font-size: 12px; color: var(--accent); }
.m-feat__bd p:not(.m-feat__sub) { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
/* ===== 适配兼容:大图预览台(v1.339 去缩略图胶片,版本切换走分段控制器,每组展示首图) ===== */
.m-compat__stage {
    position: relative; margin: 0; overflow: hidden;
    border-radius: 16px; border: 1px solid var(--line); background: var(--bg-card-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .30);
}
.m-compat__stage img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.m-compat__cap {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 30px 12px 9px;
    background: linear-gradient(180deg, transparent, rgba(8, 13, 26, .88));
    font-size: 12px; color: #fff;
}
.m-compat__captxt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 资讯列表(单列图文卡) ===== */
.m-art-list { display: flex; flex-direction: column; gap: 10px; }
.m-art-card {
    display: flex; gap: 12px; padding: 10px;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--m-shadow);
    transition: transform .15s;
}
.m-art-card:active { transform: scale(.98); }
.m-art-card img, .m-art-card__empty {
    width: 104px; height: 72px; flex: none; border-radius: 10px; object-fit: cover;
    background: var(--bg-card-light);
}
.m-art-card__empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.m-art-card__bd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-art-card__bd h4 {
    margin: 2px 0 auto; font-size: 14px; line-height: 1.45; font-weight: 600;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-art-card__meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.m-art-card__meta span { display: flex; align-items: center; gap: 3px; }
.m-art-card__meta svg { width: 13px; height: 13px; }

/* ===== 极简页脚 ===== */
.m-footer {
    margin: 24px 14px 6px; padding: 16px 0 8px; text-align: center;
    border-top: 1px solid var(--line); font-size: 11px; color: var(--text-muted);
}
.m-footer p { margin: 0 0 4px; }
.m-footer a { display: inline-block; min-height: 44px; line-height: 44px; color: var(--text-secondary); }

/* ===== 空态占位页 ===== */
.m-coming {
    display: flex; flex-direction: column; align-items: center;
    padding: 88px 32px 40px; text-align: center;
}
.m-coming__ico {
    width: 88px; height: 88px; border-radius: 44px; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--line); color: var(--primary);
}
.m-coming__ico svg { width: 40px; height: 40px; }
.m-coming h3 { margin: 0 0 8px; font-size: 18px; }
.m-coming p { margin: 0 0 24px; font-size: 13px; color: var(--text-muted); line-height: 1.8; }
.m-coming .m-btn { margin-bottom: 4px; }

.m-section[id] { scroll-margin-top: 64px; }