/* ==========================================================================
   朗宙官网 —— 手机版专属样式 v2.0（钢与火 · Mobile）
   不是桌面版的缩放，而是为单手操作重新排的信息流
   ========================================================================== */

:root {
    --ink-900: #0A0D11;
    --ink-800: #0F1318;
    --ink-700: #141A21;
    --ink-600: #1A212A;
    --line: #2A3441;
    --line-soft: #1E262F;

    --text-1: #E6EAEF;
    --text-2: #97A3B4;
    --text-3: #5E6B7C;

    --steel-600: #1D4E6F;
    --steel-500: #2A6B93;
    --steel-400: #4A90B8;

    --heat-600: #B8431A;
    --heat-500: #D9531E;
    --heat-400: #F2662A;

    --data: #7FB4CE;

    --gut: 20px;
    --font-cn: "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "Roboto Mono", Consolas, "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
    background: #05070A;
    color: var(--text-1);
    font-family: var(--font-cn);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font-family: inherit; font-size: inherit; }

/* 预览外框：让手机版原型在任何窗口下都以手机宽度呈现 */
.phone-shell { max-width: 430px; margin: 0 auto; background: var(--ink-900); min-height: 100vh; position: relative; overflow-x: hidden; }
.preview-note {
    max-width: 430px;
    margin: 0 auto;
    padding: 10px 20px;
    font-size: 11px;
    letter-spacing: .1em;
    color: #4A5566;
    font-family: var(--font-mono);
    background: #05070A;
}
.pad { padding: 0 var(--gut); }

/* ============ 头部 ============ */
.m-head {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(10, 13, 17, .95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
}
.m-head-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--gut);
}
.brand-mini { display: flex; align-items: center; gap: 9px; }
.brand-mini .bm {
    width: 30px; height: 30px;
    border: 1.5px solid var(--steel-500);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    color: var(--steel-400); letter-spacing: .04em;
}
.brand-mini strong { font-size: 14px; letter-spacing: .04em; }
.brand-mini small {
    display: block; font-family: var(--font-mono);
    font-size: 8px; letter-spacing: .18em; color: var(--text-3);
}

.head-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    background: none;
    color: var(--text-1);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer;
}
.icon-btn:active { background: var(--ink-700); }
.menu-btn { position: relative; }
.menu-btn i {
    position: absolute; left: 9px; right: 9px; height: 2px;
    background: var(--text-1); transition: .25s;
}
.menu-btn i:nth-child(1) { top: 12px; }
.menu-btn i:nth-child(2) { top: 18px; }
.menu-btn i:nth-child(3) { top: 24px; }
.menu-btn.open i:nth-child(1) { top: 18px; transform: rotate(45deg); }
.menu-btn.open i:nth-child(2) { opacity: 0; }
.menu-btn.open i:nth-child(3) { top: 18px; transform: rotate(-45deg); }

/* 抽屉菜单 */
.m-drawer {
    display: none;
    border-bottom: 1px solid var(--line);
    background: var(--ink-800);
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}
.m-drawer.open { max-height: 420px; }
.m-drawer a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--gut);
    font-size: 14.5px; color: var(--text-2);
    border-bottom: 1px solid var(--line-soft);
}
.m-drawer li:last-child a { border-bottom: none; }
.m-drawer a span { font-family: var(--font-mono); color: var(--text-3); }
.m-drawer li.active a { color: var(--text-1); }
.m-drawer li.active a span { color: var(--heat-400); }
.m-drawer a strong { color: var(--heat-400); font-weight: 600; }

/* ============ Hero ============ */
.m-hero { position: relative; padding: 34px 0 30px; overflow: hidden; }
.m-hero .wm {
    position: absolute; right: -18px; top: 8px;
    font-family: var(--font-mono); font-size: 78px; font-weight: 700;
    color: transparent; -webkit-text-stroke: 1px rgba(42, 107, 147, .14);
    letter-spacing: -.04em; pointer-events: none;
}
.m-hero .tag {
    display: inline-block;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
    color: var(--heat-400); text-transform: uppercase; margin-bottom: 14px;
}
.m-hero h1 {
    position: relative; z-index: 2;
    font-size: 31px; font-weight: 800; line-height: 1.28; letter-spacing: .01em;
}
.m-hero h1 em { font-style: normal; color: var(--steel-400); }
.m-hero p {
    position: relative; z-index: 2;
    margin-top: 14px; font-size: 14px; color: var(--text-2);
}
.m-hero p strong { color: var(--text-1); font-weight: 600; }

.btn-row { display: flex; gap: 10px; margin-top: 22px; }
.btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 50px; font-size: 14.5px; font-weight: 600; letter-spacing: .04em;
    border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--heat-500); color: #fff; }
.btn-primary:active { background: var(--heat-600); }
.btn-ghost { background: none; border-color: var(--line); color: var(--text-1); }
.btn-ghost:active { background: var(--ink-700); }
.btn .ar { font-family: var(--font-mono); }

/* 参数卡组 */
.m-stats {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 10px; margin-top: 26px;
}
.stat {
    background: var(--ink-800); border: 1px solid var(--line-soft);
    padding: 14px 14px 12px;
}
.stat .n {
    font-family: var(--font-mono); font-size: 23px; font-weight: 700;
    color: var(--text-1); letter-spacing: -.02em; line-height: 1.1;
}
.stat .n small { font-size: 11px; color: var(--text-3); margin-left: 3px; font-weight: 400; }
.stat .n.hot { color: var(--heat-400); }
.stat .l { font-size: 11.5px; color: var(--text-3); margin-top: 5px; letter-spacing: .06em; }

/* ============ 区块 ============ */
.m-sec { padding: 34px 0 6px; border-top: 1px solid var(--line-soft); }
.m-sec:first-of-type { border-top: none; }
.sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.sec-h .no {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
    color: var(--heat-500); border-left: 3px solid var(--heat-500); padding-left: 8px;
}
.sec-h h2 { font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.sec-h .en { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; color: var(--text-3); }

/* 横向滑动卡片 */
.hscroll {
    display: flex; gap: 6px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px var(--gut) 10px;
    margin: 0 calc(var(--gut) * -1);
    /* 关键：吸附点计入左右内边距，停止时卡片完整对齐版心，不再被切掉左缘 */
    scroll-padding-left: var(--gut);
    scroll-padding-right: var(--gut);
    -webkit-overflow-scrolling: touch;
}
.hscroll::-webkit-scrollbar { height: 3px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--line); }
.hs-card {
    flex: 0 0 74%; scroll-snap-align: start;
    background: var(--ink-800); border: 1px solid var(--line-soft);
    padding: 16px;
}
.hs-card .ico { height: 62px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.hs-card h3 { font-size: 15px; font-weight: 600; }
.hs-card .meta {
    font-family: var(--font-mono); font-size: 11px; color: var(--data);
    margin-top: 3px; letter-spacing: .02em;
}
.hs-card p { font-size: 12.5px; color: var(--text-3); margin-top: 6px; line-height: 1.6; }

/* 通用面板 */
.panel { background: var(--ink-800); border: 1px solid var(--line-soft); padding: 18px 16px; }
.panel p { font-size: 13.5px; color: var(--text-2); }
.panel p + p { margin-top: 10px; }

/* 事实条 */
.facts { margin-top: 14px; border-top: 1px solid var(--line-soft); }
.facts li {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.facts li b { font-family: var(--font-mono); font-size: 15px; color: var(--heat-400); font-weight: 700; }
.facts li span { color: var(--text-2); }
.facts li:last-child { border-bottom: none; }

/* 规格库入口 CTA */
.cta-card {
    background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
    border: 1px solid var(--line);
    border-top: 2px solid var(--heat-500);
    padding: 20px 16px;
}
.cta-card h3 { font-size: 17px; font-weight: 700; }
.cta-card p { font-size: 13px; color: var(--text-2); margin-top: 8px; }
.cta-card .btn { margin-top: 16px; width: 100%; }

/* 精简表 */
.m-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.m-table th {
    text-align: left; padding: 9px 6px; font-size: 11px; font-weight: 600;
    color: var(--text-3); letter-spacing: .08em; border-bottom: 1px solid var(--line);
}
.m-table td { padding: 10px 6px; border-bottom: 1px solid var(--line-soft); color: var(--text-2); }
.m-table td.n { font-family: var(--font-mono); color: var(--data); font-weight: 700; font-size: 13.5px; }
.m-table td.hot { font-family: var(--font-mono); color: var(--heat-400); font-weight: 700; }
.tip-line { margin-top: 12px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }

/* 荣誉 / 实力 网格 */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile {
    background: var(--ink-800); border: 1px solid var(--line-soft);
    padding: 16px 14px; min-height: 92px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.tile .k { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: .16em; }
.tile .t { font-size: 14px; margin-top: 8px; color: var(--text-1); }

/* 新闻卡片 */
.news-item {
    display: block; padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.news-item:last-child { border-bottom: none; }
.news-item .d { font-family: var(--font-mono); font-size: 10.5px; color: var(--heat-500); letter-spacing: .08em; }
.news-item .t { font-size: 14.5px; margin-top: 5px; line-height: 1.55; }

/* ============ 留言入口（页内，不遮挡） ============ */
.msg-entry {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left; cursor: pointer;
    background: none;
    border: 1px solid var(--steel-600);
    border-left: 3px solid var(--heat-500);
    padding: 16px 14px; margin-top: 26px;
    color: var(--text-1);
}
.msg-entry > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.msg-entry .me {
    width: 34px; height: 34px; flex: none;
    border: 1px solid var(--heat-500); color: var(--heat-400);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 15px;
}
.msg-entry strong { display: block; font-size: 15px; }
.msg-entry small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.msg-entry .go { margin-left: auto; color: var(--heat-400); font-family: var(--font-mono); }

/* 全屏留言表单（点击后弹出，收起时完全不占位、不遮挡） */
.sheet {
    position: fixed; inset: 0; z-index: 200;
    max-width: 430px; margin: 0 auto;
    display: none;
}
.sheet.open { display: block; }
.sheet .mask { position: absolute; inset: 0; background: rgba(5, 7, 10, .82); backdrop-filter: blur(3px); }
.sheet .card {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--ink-800);
    border-top: 2px solid var(--heat-500);
    padding: 20px var(--gut) calc(20px + env(safe-area-inset-bottom));
    max-height: 88vh; overflow-y: auto;
    animation: up .28s ease;
}
@keyframes up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet .card h3 { font-size: 17px; }
.sheet .card .sub { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.sheet .x {
    position: absolute; right: 14px; top: 14px;
    width: 32px; height: 32px; background: none; border: 1px solid var(--line);
    color: var(--text-2); font-size: 15px; cursor: pointer;
}
.field { margin-top: 14px; }
.field label { display: block; font-size: 11.5px; color: var(--text-3); letter-spacing: .08em; margin-bottom: 6px; }
.field input, .field textarea {
    width: 100%; background: var(--ink-900); border: 1px solid var(--line);
    color: var(--text-1); padding: 12px 13px; font-size: 15px; outline: none; border-radius: 0;
}
.field input:focus, .field textarea:focus { border-color: var(--heat-500); }
.field textarea { min-height: 96px; resize: vertical; }
.sheet .btn { width: 100%; margin-top: 18px; }
.sheet .fine { font-size: 11px; color: var(--text-3); margin-top: 12px; text-align: center; }

/* ============ 规格库页 ============ */
.crumb {
    padding: 12px var(--gut);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
    color: var(--text-3); text-transform: uppercase;
    border-bottom: 1px solid var(--line-soft); background: var(--ink-800);
}
.crumb .cur { color: var(--data); }

.p-head { padding: 26px var(--gut) 18px; }
.p-head h1 { font-size: 27px; font-weight: 800; }
.p-head h1 em { font-style: normal; color: var(--steel-400); }
.p-head .en { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .24em; color: var(--text-3); margin-top: 6px; }
.p-head p { font-size: 13.5px; color: var(--text-2); margin-top: 12px; }
.p-head p strong { color: var(--heat-400); }

.filter-bar { padding: 0 var(--gut) 14px; }
.search {
    position: relative; display: flex; align-items: center;
}
.search .si { position: absolute; left: 14px; color: var(--text-3); font-size: 15px; }
.search input {
    width: 100%; height: 48px; padding: 0 14px 0 40px;
    background: var(--ink-800); border: 1px solid var(--line);
    color: var(--text-1); font-family: var(--font-mono); font-size: 14px; outline: none; border-radius: 0;
}
.search input:focus { border-color: var(--heat-500); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--gut); margin: 0 calc(var(--gut) * -1); }
.chip {
    flex: none; padding: 8px 14px; background: var(--ink-800);
    border: 1px solid var(--line); color: var(--text-2);
    font-size: 13px; cursor: pointer; white-space: nowrap;
}
.chip.on { background: var(--ink-600); border-color: var(--heat-500); color: var(--text-1); }
.chip .c { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-left: 4px; }
.chip.on .c { color: var(--heat-400); }

.count-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px var(--gut); font-size: 12px; color: var(--text-3);
    border-top: 1px solid var(--line-soft);
}
.count-bar b { font-family: var(--font-mono); color: var(--heat-400); font-size: 15px; }
.count-bar button { background: none; border: 1px solid var(--line); color: var(--text-2); padding: 6px 12px; font-size: 12px; cursor: pointer; }

.warn {
    margin: 0 var(--gut) 14px; padding: 12px 14px;
    background: rgba(217, 83, 30, .08); border: 1px solid rgba(217, 83, 30, .35);
    border-left: 3px solid var(--heat-500);
    font-size: 12.5px; color: var(--text-2); line-height: 1.7;
}
.warn b { color: var(--heat-400); }

/* 规格卡片列表（替代宽表，避免横向滚动） */
.spec-list { padding: 0 var(--gut); }
.spec-card {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; background: var(--ink-800);
    border: 1px solid var(--line-soft); border-left: 2px solid var(--line);
    margin-bottom: 9px;
}
.spec-card .left { flex: 1; min-width: 0; }
.spec-card .sp {
    font-family: var(--font-mono); font-size: 16.5px; font-weight: 700;
    color: var(--data); letter-spacing: .01em;
}
.spec-card .meta { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.spec-card .kg { text-align: right; flex: none; }
.spec-card .kg b { font-family: var(--font-mono); font-size: 15px; color: var(--heat-400); }
.spec-card .kg small { display: block; font-size: 10px; color: var(--text-3); }
.empty { display: none; text-align: center; padding: 40px 20px; color: var(--text-3); font-size: 13px; }
.empty b { display: block; font-size: 16px; color: var(--text-2); margin-bottom: 6px; }

/* ============ 页脚 ============ */
.m-foot { border-top: 1px solid var(--line); background: var(--ink-800); margin-top: 34px; padding: 26px var(--gut) 30px; }
.m-foot .fb { display: flex; align-items: center; gap: 9px; }
.m-foot .fb .bm {
    width: 30px; height: 30px; border: 1.5px solid var(--steel-500);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--steel-400);
}
.m-foot .fb strong { font-size: 14px; }
.m-foot .desc { font-size: 12.5px; color: var(--text-3); margin-top: 12px; line-height: 1.7; }
.foot-btn { display: flex; gap: 10px; margin-top: 16px; }
.foot-btn a { flex: 1; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; }
.foot-links a { font-size: 12.5px; color: var(--text-2); }
.addr { font-size: 12px; color: var(--text-3); margin-top: 14px; line-height: 1.7; }
.copy { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }

/* ============ v2.1 真实素材 ============ */
.bm-logo {
    height: 30px;
    background: #fff;
    padding: 5px 7px;
    display: flex; align-items: center;
}
.bm-logo img { height: 100%; display: block; }

.about-photo { border: 1px solid var(--line-soft); }
.about-photo img { width: 100%; display: block; }
.about-photo .cap {
    padding: 10px 14px; font-size: 11.5px; color: var(--text-3);
    border-top: 1px solid var(--line-soft); letter-spacing: .06em;
}

.honor-card { flex: 0 0 46%; scroll-snap-align: start; background: var(--ink-800); border: 1px solid var(--line-soft); padding: 10px; }
.honor-card .himg { background: #fff; height: 108px; display: flex; align-items: center; justify-content: center; padding: 6px; }
.honor-card .himg img { width: 100%; height: 100%; object-fit: contain; }
.honor-card .cap { font-size: 12px; color: var(--text-2); margin-top: 8px; line-height: 1.5; }

.hs-card .ico.flush { height: auto; display: block; margin: -16px -16px 12px; }
.hs-card .ico.flush img { width: 100%; height: 120px; object-fit: cover; display: block; filter: saturate(.85); }

.partner-card { background: var(--ink-800); border: 1px solid var(--line-soft); padding: 18px 14px; }
.partner-card img { width: 100%; }

.wx-row { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.wx-row img { width: 78px; height: 78px; background: #fff; padding: 5px; flex: none; }
.wx-row span { font-size: 11.5px; color: var(--text-3); line-height: 1.7; }

/* ---------- v2.2 Hero 背景视频 ---------- */
.m-hero .hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    filter: saturate(.9);
}
.m-hero .m-shade {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,13,17,.9), rgba(10,13,17,.68) 55%, rgba(10,13,17,.97));
}
.m-hero .pad { position: relative; z-index: 2; }
.m-hero .wm { z-index: 1; }