@charset "utf-8";
/* ==========================================================================
   版式 v3 · 落地页层（page-landing）—— 内容型落地单页的通用积木

   2026-10-02 新增。服务三个栏目：
     /zhihuidangjian/  智慧党建（改版）
     /geo/             GEO 优化（新栏目，原 /wangzhanyouhua/ 301 过来）
     /kehuanli/        客户案例（改版）

   ★ 为什么不复用 page-ruanjiankaifa.css 的 .lv-sd-*？
     那套是「软件定制开发」一页专用，选择器全部挂在 .lv-sd 之下、只作用于那一页。
     这三页要的是同一批积木（图文分栏 / 图片卡 / 数据条 / 编号步骤 / 对比栏 /
     案例墙 / 留言表单），塞进 .lv-sd 名字不对，复制三份又会立刻分叉。
     所以单开一层「共用的落地页积木」，三页都用 lv-lp- 前缀。

   ★ 为什么是「页面级样式表」而不是并进 inner-v3.css？
     inner-v3.css 是全站 150 多个内页都要下的公共表。这一层只有 3 个页面用得上，
     按 theme.js 里 LAYOUT_PAGE_CSS 的机制单独引（只有这三个 dirname 会加载）。
     增删页面时改 LAYOUT_PAGE_CSS 一行即可，不用碰这个文件。

   ★ 加载顺序（theme.js 的 page()）：
       ny.css / style.css / website.css
       → home-v3.css → inner-v3.css → rich-v3.css
       → 本文件 → responsive.css → skin-*.css
     同权重下本文件天然压过前面所有表，不需要 !important。

   ★ 三条纪律（与 inner-v3.css / page-ruanjiankaifa.css 一致）：
     1) 一律 lv-lp- 前缀，绝不与原站老 class 撞名
        （老表里有 .main / .content / .card / .list 这类常见名，撞上就互相污染）；
     2) 所有选择器都挂在 .lv-lp 之下，只作用于这三页；
     3) ny.css 第 2 行躺着全站性的 `*{margin:0;padding:0}` ——
        这里每一个间距、每一个字号都是显式声明的，不做"浏览器默认值帮忙"的假设。

   ★ 通栏怎么成立：
     这三页都走 singlePage()，外面是 .lv-body-flat（白底、无左右内边距、整幅宽）。
     所以色带**不套 .lv-wrap**，把 .lv-wrap 放在色带**内部** ——
     套了容器，深色带就会退化成"白纸上的一条深色横条"。

   ★★ 全部颜色走 --lv-* 变量，一个品牌色都不硬编码 ——
     后台切到「公安蓝」皮肤时，这一整层会自动变蓝，不必为每个皮肤各写一份。
     中性灰阶（#fff / var(--lv-t1)…）留在原处：换肤不该把正文色一起搅进去。
   ========================================================================== */

/* ==========================================================================
   1) 底座
   ========================================================================== */
.lv-lp {
    color: var(--lv-t1);
    font-size: 15px;
    line-height: 1.85;
}
/* 老表把 h/p/ul/li 的默认值全部抹平了，这里逐项声明回来 */
.lv-lp h2, .lv-lp h3, .lv-lp h4,
.lv-lp p, .lv-lp ul, .lv-lp ol, .lv-lp li,
.lv-lp figure, .lv-lp blockquote { margin: 0; padding: 0; }
.lv-lp ul, .lv-lp ol { list-style: none; }
.lv-lp em, .lv-lp i { font-style: normal; }
.lv-lp img { max-width: 100%; height: auto; display: block; }
span.lv-lp-em,
.lv-lp-em { color: var(--lv-red); font-weight: 600; }
/* ★ 按钮文字色必须用「两个类」写（.lv-btn.lv-btn-xxx，权重 0,2,0）：
   ny.css 第 8 行有 `a:link{color:#333}`，伪类也算 class 所以是 (0,1,1)，
   稳压一切单类选择器 —— 只写单类的话按钮文字会被刷成深灰。 */
.lv-lp a.lv-btn { text-decoration: none; }

/* ==========================================================================
   2) 色带与节标题
   ========================================================================== */
.lv-lp-sec { padding: 62px 0; }
.lv-lp-sec-tint { background: var(--lv-tint); }
.lv-lp-sec-dark {
    background: var(--lv-pghero-grad);
    color: var(--lv-dark-t1);
}
/* 色带里的容器：.lv-wrap 自带 margin:0 auto，这里补一条"左右边距不归零"的兜底 */
.lv-lp-sec > .lv-wrap,
.lv-lp-band > .lv-wrap { margin-left: auto; margin-right: auto; }

.lv-lp-head { margin-bottom: 34px; }
.lv-lp-head-c { text-align: center; }
.lv-lp-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--lv-red);
    margin-bottom: 12px;
}
.lv-lp-sec-dark .lv-lp-kicker { color: var(--lv-wash-t); }

.lv-lp-h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.3px;
    color: var(--lv-t1);
}
.lv-lp-h2:after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    margin-top: 14px;
    background: linear-gradient(90deg, var(--lv-red), var(--lv-gold));
}
.lv-lp-head-c .lv-lp-h2:after { margin-left: auto; margin-right: auto; }
.lv-lp-sec-dark .lv-lp-h2 { color: #fff; }

.lv-lp-h3 { font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--lv-t1); }
.lv-lp-sec-dark .lv-lp-h3 { color: #fff; }

.lv-lp-sub {
    margin-top: 16px;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--lv-t2);
    max-width: 860px;
}
.lv-lp-head-c .lv-lp-sub { margin-left: auto; margin-right: auto; }
.lv-lp-sec-dark .lv-lp-sub { color: var(--lv-dark-t2); }

/* 正文段落（显式声明，不靠浏览器默认） */
.lv-lp p { font-size: 14.8px; line-height: 1.95; color: var(--lv-t2); }
.lv-lp p + p { margin-top: 15px; }
/* ★ 导语必须写成 p.lv-lp-lead（(0,2,1)）而不是 .lv-lp-lead（(0,1,0)）——
   上面那条 `.lv-lp p` 是 (0,1,1)，会把单类版本的字号颜色整个压掉，
   结果导语和正文一个样、"开场一句"的层级就没了。
   （page-ruanjiankaifa.css 里就是这么翻过一次车的。） */
.lv-lp p.lv-lp-lead {
    font-size: 16.5px;
    line-height: 2;
    color: var(--lv-t1);
    margin-bottom: 4px;
}
.lv-lp-lead b { color: var(--lv-red); font-weight: 700; }

/* ==========================================================================
   3) 图文左右分栏（落地页第一屏的主力版式）
   ========================================================================== */
.lv-lp-split {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 48px;
    align-items: center;
}
.lv-lp-split-txt { min-width: 0; }
/* 图在右、文在左是默认；要反过来就给 split 加 .rev，
   同时把两列的宽度配比也翻过来 —— 只改 order 不换配比会让图显得被压扁 */
.lv-lp-split.rev { grid-template-columns: .96fr 1.04fr; }
.lv-lp-split.rev .lv-lp-split-txt { order: 2; }
.lv-lp-split.rev .lv-lp-shot { order: 1; }

/* ==========================================================================
   4) 图片卡（所有配图的统一外框）
   ========================================================================== */
.lv-lp-shot {
    position: relative;
    margin-left: 0; margin-right: 0; min-width: 0;
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    overflow: hidden;
    background: var(--lv-tint);
    box-shadow: var(--lv-shadow);
}
.lv-lp-shot img { width: 100%; height: auto; }
/* 定高裁切版：卡片网格里用，保证同一行图片高度一致 */
.lv-lp-shot.fill { aspect-ratio: 16 / 10; }
.lv-lp-shot.fill img { width: 100%; height: 100%; object-fit: cover; }
.lv-lp-shot figcaption {
    padding: 12px 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--lv-t3);
    background: var(--lv-tint);
    border-top: 1px solid var(--lv-line);
}

/* ==========================================================================
   5) 数据条（KPI）
   ========================================================================== */
.lv-lp-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}
.lv-lp-kpi.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv-lp-kpi > div {
    margin-left: 0; margin-right: 0; min-width: 0;   /* 兜住老表的 `div{margin:0 auto}` */
    background: var(--lv-tint);
    border-radius: var(--lv-r);
    padding: 22px 16px 20px;
    text-align: center;
}
.lv-lp-kpi b {
    display: block;
    font-size: 27px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--lv-red);
    letter-spacing: -1px;
}
.lv-lp-kpi span {
    display: block;
    margin-top: 8px;
    font-size: 12.8px;
    line-height: 1.6;
    color: var(--lv-t2);
}
/* 深色带里的数据条 */
.lv-lp-sec-dark .lv-lp-kpi > div,
.lv-lp-band .lv-lp-kpi > div { background: rgba(255, 255, 255, .06); }
.lv-lp-sec-dark .lv-lp-kpi b,
.lv-lp-band .lv-lp-kpi b { color: var(--lv-wash-t); }
.lv-lp-sec-dark .lv-lp-kpi span,
.lv-lp-band .lv-lp-kpi span { color: var(--lv-dark-t2); }

/* 通栏窄数据带（深色，页面中段用一条收紧的长条做"数据停顿"） */
.lv-lp-band {
    background: var(--lv-pghero-grad);
    color: var(--lv-dark-t1);
    padding: 40px 0;
}
.lv-lp-band .lv-lp-kpi { margin-top: 0; }

/* ==========================================================================
   6) 卡片网格
   ========================================================================== */
.lv-lp-grid { display: grid; gap: 18px; }
.lv-lp-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lv-lp-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv-lp-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 纯文字卡 */
.lv-lp-card {
    margin-left: 0; margin-right: 0; min-width: 0;
    background: #fff;
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    padding: 24px 22px;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.lv-lp-card:hover {
    border-color: #cfd9e6;
    box-shadow: var(--lv-shadow);
    transform: translateY(-2px);
}
.lv-lp-card h3 { font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--lv-t1); }
.lv-lp-card h3:before {
    content: "";
    display: block;
    width: 22px; height: 3px;
    border-radius: 2px;
    background: var(--lv-red);
    margin-bottom: 13px;
}
.lv-lp-card p { margin-top: 11px; font-size: 13.8px; line-height: 1.85; color: var(--lv-t2); }

/* 带图卡：图上文下，图片定高裁切保证一行齐平 */
.lv-lp-card.pic { padding: 0; overflow: hidden; }
.lv-lp-card.pic .lv-lp-card-img {
    aspect-ratio: 16 / 10;
    background: var(--lv-tint);
    overflow: hidden;
}
.lv-lp-card.pic .lv-lp-card-img img { width: 100%; height: 100%; object-fit: cover; }
.lv-lp-card.pic .lv-lp-card-bd { padding: 20px 20px 22px; }
.lv-lp-card.pic h3:before { display: none; }
.lv-lp-card-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--lv-red);
    background: var(--lv-wash1);
    border: 1px solid var(--lv-washline);
    border-radius: 999px;
    padding: 3px 11px;
    margin-bottom: 12px;
}

/* ==========================================================================
   7) 深色带里的高亮卡（一张卡讲一条理由）
   ========================================================================== */
.lv-lp-hl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.lv-lp-hl.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lv-lp-hl-i {
    margin-left: 0; margin-right: 0; min-width: 0;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--lv-r);
    padding: 28px 24px 26px;
}
.lv-lp-hl-i em {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--lv-wash-t);
    background: var(--lv-a22);
    border: 1px solid var(--lv-a45);
    border-radius: 999px;
    padding: 3px 13px;
}
.lv-lp-hl-i h3 { margin-top: 18px; font-size: 19px; font-weight: 700; line-height: 1.45; color: #fff; }
.lv-lp-hl-i p { margin-top: 12px; font-size: 14px; line-height: 1.9; color: var(--lv-dark-t2); }

/* ==========================================================================
   8) 特性行（小图标 + 标题 + 说明）
   ========================================================================== */
.lv-lp-feat { display: grid; gap: 14px; }
.lv-lp-feat-i {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-left: 0; margin-right: 0; min-width: 0;
    background: #fff;
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    padding: 18px 20px;
}
.lv-lp-feat-ico {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lv-wash1);
    border: 1px solid var(--lv-washline);
    color: var(--lv-red);
}
.lv-lp-feat-ico svg { width: 19px; height: 19px; fill: currentColor; }
.lv-lp-feat-bd { min-width: 0; flex: 1; }
.lv-lp-feat-bd h3 { font-size: 15.5px; font-weight: 700; line-height: 1.5; color: var(--lv-t1); }
.lv-lp-feat-bd p { margin-top: 7px; font-size: 13.6px; line-height: 1.85; color: var(--lv-t2); }

/* ==========================================================================
   9) 编号步骤
   ========================================================================== */
.lv-lp-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    counter-reset: lp;
}
.lv-lp-steps.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lv-lp-steps li {
    margin-left: 0; margin-right: 0; min-width: 0;
    position: relative;
    background: #fff;
    border-radius: var(--lv-r);
    padding: 30px 20px 22px;
    box-shadow: var(--lv-shadow);
}
.lv-lp-steps li:before {
    counter-increment: lp;
    content: "0" counter(lp);
    position: absolute;
    top: 14px; right: 18px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    color: #eef2f7;
}
.lv-lp-steps b { display: block; font-size: 15.5px; font-weight: 700; color: var(--lv-t1); }
.lv-lp-steps span { display: block; margin-top: 10px; font-size: 13.4px; line-height: 1.85; color: var(--lv-t2); }

/* ==========================================================================
   10) 两栏对撞（白帽做法 vs 黑帽风险 / 传统 SEO vs GEO）
   ========================================================================== */
.lv-lp-cmp {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.lv-lp-cmp-col {
    margin-left: 0; margin-right: 0; min-width: 0;
    border-radius: var(--lv-r);
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--lv-line);
}
.lv-lp-cmp-col.ok { border-color: var(--lv-a26); background: var(--lv-wash1); }
.lv-lp-cmp-col.bad { border-color: #e3e7ee; background: var(--lv-tint); }
.lv-lp-cmp-col h3 { font-size: 16.5px; font-weight: 700; color: var(--lv-t1); }
.lv-lp-cmp-col.ok h3:before,
.lv-lp-cmp-col.bad h3:before {
    display: inline-block;
    width: 20px; height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    margin-right: 9px;
    vertical-align: 1px;
}
.lv-lp-cmp-col.ok h3:before { content: "✓"; background: var(--lv-red); }
.lv-lp-cmp-col.bad h3:before { content: "✕"; background: #98a3b3; }
.lv-lp-cmp-col ul { margin-top: 14px; }
.lv-lp-cmp-col li {
    position: relative;
    padding: 8px 0 8px 18px;
    font-size: 13.8px;
    line-height: 1.8;
    color: var(--lv-t2);
    border-top: 1px solid rgba(0, 0, 0, .05);
}
.lv-lp-cmp-col li:first-child { border-top: 0; }
.lv-lp-cmp-col li:before {
    content: "";
    position: absolute;
    left: 0; top: 16px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lv-red);
}
.lv-lp-cmp-col.bad li:before { background: #b6bfcc; }

/* ==========================================================================
   11) 勾选清单
   ========================================================================== */
.lv-lp-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lv-lp-check > div {
    margin-left: 0; margin-right: 0; min-width: 0;
    background: var(--lv-tint);
    border-radius: var(--lv-r);
    padding: 22px 22px;
}
.lv-lp-check h3 { font-size: 15.5px; font-weight: 700; color: var(--lv-t1); }
.lv-lp-check h3:before { content: "✓"; color: var(--lv-red); font-weight: 800; margin-right: 9px; }
.lv-lp-check p { margin-top: 10px; font-size: 13.6px; line-height: 1.85; color: var(--lv-t2); }

/* ==========================================================================
   12) 案例墙（/kehuanli/ 专用：筛选 + 大图卡片）
   ========================================================================== */
.lv-lp-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}
.lv-lp-tab {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--lv-line);
    background: #fff;
    color: var(--lv-t2);
    cursor: pointer;
    transition: all .2s ease;
}
.lv-lp-tab b { font-weight: 700; margin-left: 5px; color: var(--lv-t3); }
.lv-lp-tab:hover { border-color: var(--lv-a34); color: var(--lv-red); }
.lv-lp-tab.is-on {
    background: linear-gradient(135deg, var(--lv-red), var(--lv-red3));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px var(--lv-a30);
}
.lv-lp-tab.is-on b { color: rgba(255, 255, 255, .8); }

.lv-lp-wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.lv-lp-case {
    display: block;
    margin-left: 0; margin-right: 0; min-width: 0;
    background: #fff;
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.lv-lp-case:hover {
    border-color: #cfd9e6;
    box-shadow: var(--lv-shadow-h);
    transform: translateY(-3px);
}
/* 客户网站截图：老图的宽高比很杂（有 1:1 也有 3:2），统一 16:10 裁切才排得齐 */
.lv-lp-case-img {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--lv-tint);
    overflow: hidden;
}
.lv-lp-case-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;   /* 网站截图要露的是"头部"，不是正中间 */
    transition: transform .4s ease;
}
.lv-lp-case:hover .lv-lp-case-img img { transform: scale(1.04); }
.lv-lp-case-bd { padding: 18px 20px 20px; }
.lv-lp-case-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--lv-red);
    background: var(--lv-wash1);
    border: 1px solid var(--lv-washline);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 10px;
}
.lv-lp-case-bd h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--lv-t1);
    /* 客户名长短不一，统一压到两行，卡片高度才齐 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lv-lp-case-bd p {
    margin-top: 9px;
    font-size: 13.4px;
    line-height: 1.8;
    color: var(--lv-t2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lv-lp-case-more {
    display: inline-block;
    margin-top: 13px;
    font-size: 13.2px;
    font-weight: 600;
    color: var(--lv-red);
}
/* 没有网站截图的案例：用一块设计过的行业色块顶上。
   ★ 为什么不做成"缺图占位"的样子：
     原站 /kehuanli/ 引用的 20 张缩略图里，有 11 张在**源站本身**就已经 404
     （2026-10-02 实测：本地缺的那批，用浏览器 UA 直取 lysoo.com 同样 404，
       而本地已有的那 9 张在源站都是 200）。也就是说这些图是真的没了，
     不是抓漏了。既然如此，与其留一个裂图或灰框，不如做成一块正经的行业卡 ——
     几何尺寸与有图的卡片**完全一致**（同样 16:10、同样的边框圆角），
     在网格里排出来是一个整齐的墙，不会看出"这里少了张图"。 */
.lv-lp-case-ph {
    /* 行业图标库。★ 形状一律画成黑色线条——真正的颜色由 background-color 给，
       这两件事分开，图标才能跟着主题变量换色（见下面 .lv-lp-ind::before）。 */
    --ic-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.8 3.2H6.6A1.6 1.6 0 0 0 5 4.8v14.4a1.6 1.6 0 0 0 1.6 1.6h10.8a1.6 1.6 0 0 0 1.6-1.6V8.2l-5.2-5Z'/%3E%3Cpath d='M13.8 3.2v5h5.2'/%3E%3Cpath d='M8.4 13.2h7.2M8.4 16.8h4.6'/%3E%3C/svg%3E");
    --ic-factory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 20.6h18.8'/%3E%3Cpath d='M4.6 20.6V10.2l4.6 2.9v-2.9l4.6 2.9V6.4l5.6 3.5v10.7'/%3E%3Cpath d='M9.2 20.6v-3.1M13.8 20.6v-3.1M18.4 20.6v-3.1'/%3E%3C/svg%3E");
    --ic-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.4V8.6'/%3E%3Cpath d='M12 11.2c-.7-3.1-2.7-4.3-5.2-4.3.5 3.1 2.5 4.3 5.2 4.3Z'/%3E%3Cpath d='M12 11.2c.7-3.1 2.7-4.3 5.2-4.3-.5 3.1-2.5 4.3-5.2 4.3Z'/%3E%3Cpath d='M12 16.6c-.7-3.1-2.7-4.3-5.2-4.3.5 3.1 2.5 4.3 5.2 4.3Z'/%3E%3Cpath d='M12 16.6c.7-3.1 2.7-4.3 5.2-4.3-.5 3.1-2.5 4.3-5.2 4.3Z'/%3E%3C/svg%3E");
    --ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 10.6 12 3.4l9.2 7.2'/%3E%3Cpath d='M5.6 9.4v11.2h12.8V9.4'/%3E%3Cpath d='M9.6 20.6v-5.4h4.8v5.4'/%3E%3C/svg%3E");
    --ic-gov: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 20.6h18.4'/%3E%3Cpath d='M12 3.2 3.4 8.2h17.2L12 3.2Z'/%3E%3Cpath d='M5.6 8.2v12.4M10 8.2v12.4M14 8.2v12.4M18.4 8.2v12.4'/%3E%3C/svg%3E");
    --ic-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17.6 5.2-5.2 3.2 3.2L20.4 6.6'/%3E%3Cpath d='M15.4 6.6h5v5'/%3E%3Cpath d='M3 20.6h18'/%3E%3C/svg%3E");

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background-color: var(--lv-wash1);
    background-image:
        radial-gradient(circle at 78% 18%, var(--lv-a10), transparent 56%),
        radial-gradient(circle at 10% 92%, var(--lv-gold-a07), transparent 54%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 10px),
        linear-gradient(135deg, var(--lv-wash1), var(--lv-wash2));
}
/* 行业图标：浅色圆底 + 主题色线性图标。
   ★ 图标用 mask 上色（不是把颜色写死在 data URI 里）——换皮肤（科技红 → 科技蓝）时
     图标会跟着 --lv-red 走，不会出现"整页都变蓝了、只有这几张卡的图标还是红的"。
   ★ 行业靠 .lv-lp-case[data-cat] 区分，所以 HTML 那边不用额外挂类名。
   ★ 为什么要有图标：这 10 张卡没有网站截图可用（源站图已 404，见上面注释），
     光放一行行业名，占位区里会空掉一大片，整面墙看着像"图没加载出来"。
     加一个 66px 的圆底图标，视觉上就有了主体，和旁边有图的卡摆在一起也不掉队。 */
.lv-lp-case-ph .lv-lp-ind {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07), inset 0 0 0 1px var(--lv-line);
}
.lv-lp-case-ph .lv-lp-ind::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 31px; height: 31px;
    transform: translate(-50%, -50%);
    background-color: var(--lv-red);
    -webkit-mask: var(--ic-doc) center/contain no-repeat;
            mask: var(--ic-doc) center/contain no-repeat;
}
.lv-lp-case[data-cat="gongye"] .lv-lp-ind::before {
    -webkit-mask: var(--ic-factory) center/contain no-repeat;
            mask: var(--ic-factory) center/contain no-repeat;
}
.lv-lp-case[data-cat="shipin"] .lv-lp-ind::before {
    -webkit-mask: var(--ic-grain) center/contain no-repeat;
            mask: var(--ic-grain) center/contain no-repeat;
}
.lv-lp-case[data-cat="jiaju"] .lv-lp-ind::before {
    -webkit-mask: var(--ic-home) center/contain no-repeat;
            mask: var(--ic-home) center/contain no-repeat;
}
.lv-lp-case[data-cat="zhengfu"] .lv-lp-ind::before {
    -webkit-mask: var(--ic-gov) center/contain no-repeat;
            mask: var(--ic-gov) center/contain no-repeat;
}
.lv-lp-case[data-cat="youhua"] .lv-lp-ind::before {
    -webkit-mask: var(--ic-up) center/contain no-repeat;
            mask: var(--ic-up) center/contain no-repeat;
}
.lv-lp-case-ph em {
    font-style: normal;      /* ★ em 天生是斜体；中文没有真斜体，浏览器是"硬掰"出来的，必须显式掰正 */
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--lv-red);
    opacity: .86;
}
.lv-lp-case-ph span {
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--lv-a30);
}
.lv-lp-case.is-hide { display: none; }
.lv-lp-wall-empty {
    padding: 50px 20px;
    text-align: center;
    font-size: 14px;
    color: var(--lv-t3);
}

/* ==========================================================================
   13) 留言 / 索取方案表单
   ========================================================================== */
/* 深色底上的表单卡：整块收进一张白色圆角卡，与深色带拉开层次 */
.lv-lp-formbox {
    background: #fff;
    border-radius: var(--lv-r);
    padding: 30px 30px 26px;
    box-shadow: var(--lv-shadow-h);
}
.lv-lp-formbox h3 { font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--lv-t1); }
.lv-lp-formbox > p { margin-top: 9px; font-size: 13.6px; line-height: 1.8; color: var(--lv-t2); }
.lv-lp-form { margin-top: 20px; }
.lv-lp-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lv-lp-field { margin-bottom: 14px; }
.lv-lp-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--lv-t1);
    margin-bottom: 7px;
}
.lv-lp-field label i { color: var(--lv-red); font-style: normal; margin-left: 3px; }
.lv-lp-field input,
.lv-lp-field textarea,
.lv-lp-field select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lv-t1);
    background: #fff;
    border: 1px solid var(--lv-line);
    border-radius: 10px;
    padding: 11px 14px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.lv-lp-field textarea { resize: vertical; min-height: 84px; }
.lv-lp-field input:focus,
.lv-lp-field textarea:focus,
.lv-lp-field select:focus {
    border-color: var(--lv-a50);
    box-shadow: 0 0 0 3px var(--lv-a10);
}
.lv-lp-field input::placeholder,
.lv-lp-field textarea::placeholder { color: #a9b3c1; }
/* 蜜罐字段：真实用户看不见也不会填，机器人会填 → 服务端据此丢弃 */
.lv-lp-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.lv-lp-form-btn { width: 100%; text-align: center; border: 0; cursor: pointer; }
.lv-lp-form-btn[disabled] { opacity: .62; cursor: default; }
.lv-lp-form-note {
    margin-top: 12px;
    font-size: 12.4px;
    line-height: 1.75;
    color: var(--lv-t3);
}
.lv-lp-form-msg {
    margin-top: 14px;
    border-radius: 10px;
    padding: 0;
    font-size: 13.6px;
    line-height: 1.75;
    display: none;
}
.lv-lp-form-msg.is-show { display: block; padding: 12px 15px; }
.lv-lp-form-msg.is-ok { background: var(--lv-wash1); border: 1px solid var(--lv-washline); color: var(--lv-red); }
.lv-lp-form-msg.is-err { background: #fff6f5; border: 1px solid #f6d5d2; color: #c0392b; }

/* 深色带里「左边讲价值 + 右边表单」的分栏 */
.lv-lp-ask {
    display: grid;
    grid-template-columns: 1fr .86fr;
    gap: 46px;
    align-items: start;
}
.lv-lp-ask-txt { min-width: 0; padding-top: 6px; }
/* 表单下方的联系方式速览 */
.lv-lp-touch { margin-top: 26px; }
.lv-lp-touch-i {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.lv-lp-touch-i:first-child { border-top: 0; }
.lv-lp-touch-i span { flex: 0 0 74px; font-size: 13px; color: var(--lv-dark-t2); }
.lv-lp-touch-i b { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .2px; }

/* ==========================================================================
   14) 结尾行动带（容器内的圆角深色卡）
   ★ 刻意不做成通栏：页脚 .lv-ft 本身就是深色，而 .lv-body-flat 底部还留着
     64px 内边距 —— 通栏深色带 + 64px 白缝 + 深色页脚会变成"深/白/深"三段拼接。
     收进容器当卡片，那 64px 留白就从"接缝"变回了正常的段落间距。
   ========================================================================== */
.lv-lp-cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--lv-r);
    background: var(--lv-pghero-grad);
    color: #fff;
    padding: 44px 42px;
}
/* 右上角一抹暖光，与 head 带（.lv-pghero:before）同一手法 */
.lv-lp-cta:before {
    content: "";
    position: absolute;
    top: -120px; right: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lv-glow-a), transparent 68%);
    pointer-events: none;
}
.lv-lp-cta-in {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.lv-lp-cta-txt { min-width: 0; }
.lv-lp-cta h2 { font-size: 24px; font-weight: 700; line-height: 1.4; color: #fff; }
.lv-lp-cta p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--lv-dark-t2);
    max-width: 660px;
}
.lv-lp-cta-btn,
.lv-lp-cta .lv-lp-cta-btn { display: flex; gap: 12px; flex: none; margin-left: 0; margin-right: 0; }
.lv-lp-cta-btn .lv-btn { flex: none; text-align: center; }
/* 深色底上的描边按钮：home-v3.css 的 .lv-btn-line 本就是给深色底准备的白色描边款 */
.lv-lp-cta-btn .lv-btn-line:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }

/* ==========================================================================
   16) 专题总览卡
   一条产品线下面挂着好几个专题时用。目的是"一页看全"：
   每张卡给图标、编号、一句话定位、三条要点，点进去才是专题详情。

   ★ 为什么不用 .lv-lp-card.pic：
     专题卡的重点是"这是什么、解决什么"，不是图。硬塞一张 16:10 的图
     会挤掉要点，反而看不清。所以做成"图标 + 文字"的结构卡。
   ★ 图标为什么用内联 SVG 的 stroke（不引图片、不写死颜色）：
     换皮肤（科技红 → 科技蓝）时图标跟着 currentColor 走，不会一半蓝一半红。
   ========================================================================== */
.lv-lp-prod {
    position: relative;
    display: block;
    margin-left: 0; margin-right: 0; min-width: 0;
    background: #fff;
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    padding: 26px 24px 22px;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.lv-lp-prod:hover {
    border-color: #cfd9e6;
    box-shadow: var(--lv-shadow-h);
    transform: translateY(-3px);
}
.lv-lp-prod-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--lv-wash1), var(--lv-wash2));
    border: 1px solid var(--lv-washline);
    color: var(--lv-red);
}
.lv-lp-prod-ico svg {
    width: 26px; height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lv-lp-prod-no {
    position: absolute;
    top: 26px; right: 24px;
    font-style: normal;          /* ★ em 天生斜体，中文必须掰正 */
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--lv-t3);
    opacity: .45;
}
.lv-lp-prod h3 {
    margin-top: 18px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--lv-t1);
}
.lv-lp-prod p {
    margin-top: 10px;
    font-size: 13.8px;
    line-height: 1.85;
    color: var(--lv-t2);
}
.lv-lp-prod-li { margin-top: 15px; display: grid; gap: 8px; }
.lv-lp-prod-li li {
    position: relative;
    padding-left: 16px;
    font-size: 13.4px;
    line-height: 1.7;
    color: var(--lv-t2);
}
.lv-lp-prod-li li:before {
    content: "";
    position: absolute;
    left: 1px; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lv-red);
    opacity: .5;
}
.lv-lp-prod-more {
    display: inline-block;
    margin-top: 17px;
    font-size: 13.4px;
    font-weight: 700;
    color: var(--lv-red);
}
.lv-lp-prod:hover .lv-lp-prod-more { text-decoration: underline; }

/* ==========================================================================
   17) 手机截图墙
   用来陈列"已经上线的平台"——一张张真实手机界面，比任何插画都可信。

   ★ 这里**不做** 16:10 统一裁切（.lv-lp-case 那套是为了让宽高比杂乱的
     网站截图排得齐）。这批截图天生就是同一个手机比例，硬裁反而把
     界面下半截的功能入口切掉，等于把最有说服力的部分裁掉了。
   ★ 名称统一压两行、figcaption 定高，卡片高度才齐。
   ========================================================================== */
.lv-lp-phones {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.lv-lp-phone {
    margin: 0; min-width: 0;
    background: #fff;
    border: 1px solid var(--lv-line);
    border-radius: 12px;
    padding: 8px 8px 0;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.lv-lp-phone:hover {
    border-color: #cfd9e6;
    box-shadow: var(--lv-shadow);
    transform: translateY(-3px);
}
.lv-lp-phone img {
    display: block;
    width: 100%; height: auto;
    border-radius: 8px;
    background: var(--lv-tint);
}
.lv-lp-phone figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50px;
    padding: 9px 4px;
    font-size: 12.6px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--lv-t1);
    overflow: hidden;
}

/* ==========================================================================
   18) 资讯列表
   两栏、虚线分隔、日期在前。比卡片网格省版面，适合一屏扫完十几条标题。
   ========================================================================== */
.lv-lp-news {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 34px;
}
.lv-lp-news li { border-bottom: 1px dashed var(--lv-line); }
.lv-lp-news a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 15px 2px;
    min-width: 0;
}
.lv-lp-news-d {
    flex: none;
    font-size: 12.4px;
    font-weight: 700;
    color: var(--lv-t3);
    letter-spacing: .02em;
}
.lv-lp-news-t {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lv-t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s ease;
}
.lv-lp-news a:hover .lv-lp-news-t { color: var(--lv-red); }

/* ==========================================================================
   19) 实机演示视频
   深色带里放一段录屏。

   ★ 为什么不自动播放：自动播会先吓人一跳（声音突然出来），
     而且 5 MB 的视频一进页面就开始下载，手机上等于白烧流量。
     preload="none" + poster 封面 —— 只加载一张 100 KB 的图，
     用户点了播放才去取视频。这是"展示"和"体验"之间的平衡点。
   ========================================================================== */
.lv-lp-video {
    margin: 0 auto;
    max-width: 940px;
}
.lv-lp-video video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--lv-r);
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.lv-lp-video figcaption {
    margin-top: 15px;
    text-align: center;
    font-size: 13.2px;
    line-height: 1.7;
    color: var(--lv-dark-t2);
}

/* ==========================================================================
   20) 响应式
   断点与首页 / inner-v3.css 保持一致：1000px 与 640px 两档。
   ★ 960 一档单独存在，因为 .lv-lp-steps 是 5 列 —— 1000px 时才折成 2 列
     会让第 5 步孤零零占半行，所以 960 就先折。
   ========================================================================== */
@media (max-width: 1000px) {
    .lv-lp-sec { padding: 46px 0; }
    .lv-lp-h2 { font-size: 22px; }
    .lv-lp-split,
    .lv-lp-split.rev { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    /* 单列之后图的顺序不再重要，但 rem 那一路要让图回到文字下面 */
    .lv-lp-split.rev .lv-lp-split-txt { order: 1; }
    .lv-lp-split.rev .lv-lp-shot { order: 2; }
    .lv-lp-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-lp-hl,
    .lv-lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-lp-grid.c3,
    .lv-lp-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-lp-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-lp-phones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    /* 资讯列表在窄屏折成单栏：两栏时标题被挤成省略号，等于白列 */
    .lv-lp-news { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .lv-lp-ask { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    /* 行动带窄屏改上下堆叠：flex-direction 一改交叉轴变成横向，
       必须同时写 align-items: stretch，否则子项宽度退化成 fit-content。 */
    .lv-lp-cta-in { flex-direction: column; align-items: stretch; }
    .lv-lp-cta-btn { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .lv-lp { font-size: 14.5px; }
    .lv-lp-sec { padding: 36px 0; }
    .lv-lp-head { margin-bottom: 24px; }
    .lv-lp-h2 { font-size: 20px; }
    .lv-lp-h2:after { margin-top: 11px; }
    .lv-lp-h3 { font-size: 16px; }
    .lv-lp p.lv-lp-lead { font-size: 15.6px; line-height: 1.9; }

    .lv-lp-kpi { gap: 10px; margin-top: 26px; }
    .lv-lp-kpi > div { padding: 17px 10px 15px; }
    .lv-lp-kpi b { font-size: 22px; }
    .lv-lp-kpi span { font-size: 11.8px; }
    .lv-lp-band { padding: 30px 0; }

    .lv-lp-grid.c2, .lv-lp-grid.c3, .lv-lp-grid.c4,
    .lv-lp-hl, .lv-lp-hl.c2,
    .lv-lp-steps, .lv-lp-steps.c4,
    .lv-lp-cmp,
    .lv-lp-check,
    .lv-lp-wall { grid-template-columns: minmax(0, 1fr); }

    .lv-lp-card,
    .lv-lp-hl-i,
    .lv-lp-steps li,
    .lv-lp-cmp-col,
    .lv-lp-check > div,
    .lv-lp-feat-i { padding: 20px 18px; }
    .lv-lp-steps li { padding-top: 26px; }
    .lv-lp-steps li:before { font-size: 22px; top: 12px; right: 15px; }

    .lv-lp-filter { gap: 8px; }
    .lv-lp-tab { font-size: 12.8px; padding: 9px 14px; }

    .lv-lp-prod { padding: 22px 18px 18px; }
    .lv-lp-prod-no { top: 22px; right: 18px; }
    .lv-lp-prod h3 { font-size: 16.6px; }
    .lv-lp-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lv-lp-phone figcaption { min-height: 46px; font-size: 12.2px; }
    .lv-lp-news-d { font-size: 12px; }
    .lv-lp-news-t { white-space: normal; }

    .lv-lp-formbox { padding: 22px 18px; }
    .lv-lp-form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .lv-lp-cta { padding: 30px 22px; }
    .lv-lp-cta:before { width: 220px; height: 220px; top: -90px; right: -70px; }
    .lv-lp-cta h2 { font-size: 20px; }
    .lv-lp-cta-btn { flex-wrap: wrap; }
    .lv-lp-cta-btn .lv-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   20) 案例页配图网格 .lv-lp-shots  （20261003a 新增）
   --------------------------------------------------------------------------
   和已有的 .lv-lp-case / .lv-lp-phones 的区别：
     · .lv-lp-case   是「客户网站截图墙」，把宽高比很杂的截图统一裁成 16:10 才排得齐；
     · .lv-lp-phones 专给同比例的手机界面；
     · 本节是**通用配图网格**，装的是同一案例里的杂图：5:1 的大屏、2:1 的界面、1:1 的
       架构图、0.46:1 的手机长图混在一起。
   ★ 这里**刻意不做 16:10 裁切**：界面截图的表格列分布在两侧，硬裁会把"边缘那两列"
     切掉 —— 那恰恰是能看出「这是真在跑的系统」的部分。所以保持原始比例，
     用 align-items:start 让每张各按各的高度排，只统一外框与说明文字。
   ========================================================================== */
.lv-lp-shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.lv-lp-shots.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lv-lp-shots.wide { grid-template-columns: minmax(0, 1fr); }
.lv-lp-shots figure { margin: 0; min-width: 0; }
.lv-lp-shots .lv-lp-shot { box-shadow: none; }
/* 大屏类横图单独占一整行，小图才并排 —— 5:1 的图和 1:1 的图挤在一行会互相拖累 */
.lv-lp-shots .span2 { grid-column: span 2; }
.lv-lp-shots .span3 { grid-column: 1 / -1; }

@media (max-width: 1000px) {
    .lv-lp-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .lv-lp-shots .span2, .lv-lp-shots .span3 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .lv-lp-shots, .lv-lp-shots.c2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}