@charset "utf-8";
/* ==========================================================================
   「软件定制开发」栏目页专属样式（.lv-sd）
   —— 2026-09-30 顶替原「阿里托管」栏目时新写的一页。

   为什么单独开一个文件，而不是写进 inner-v3.css：
   这一页不是从原站抓下来的成品页，正文是新写的，所以它按 v3 的语言排版 ——
   但「软件定制开发」的版式只有这一页用得上（色带、能力网格、流程卡、交付清单）。
   放进 inner-v3.css 会让全站 150 多个内页都多下载几 KB 只服务其中一个页面的规则，
   所以这里走主题本来就有的「页面级样式表」机制（theme.js 的 LAYOUT_PAGE_CSS），
   只有 /ruanjiankaifa/ 会引它。

   加载顺序（theme.js 的 page()）：
     ny.css / style.css / website.css → home-v3.css → inner-v3.css
     → 本文件 → responsive.css
     （2026-10-01：原链上的 swt.css 已随浮动客服条一起从资源清单摘掉）
   所以本文件写在最后，同权重下天然压过前面所有表，不需要 !important。

   ★ 三条纪律（与 inner-v3.css 一致）：
     1) 一律 lv- 前缀，绝不与原站 class 撞名；
     2) 所有选择器都挂在 .lv-sd 之下，只作用于本页；
     3) ny.css 第 2 行那条 `*{margin:0;padding:0}` 是全站性重置 ——
        这里每一个需要外边距的地方都是显式声明的，不做任何默认值假设。

   ★ 关于「通栏」：
     本页走 singlePage()，外面是 .lv-body-flat（白底、无左右内边距）。
     所以色带**不套 .lv-wrap**，把 .lv-wrap 放进色带内部 ——
     这样深浅交替的整幅色块才成立（套了容器就退化成"白纸上的一条色带"）。
   ========================================================================== */

/* ---------------- 1) 底座 ---------------- */
.lv-sd {
    color: var(--lv-t1);
    font-size: 15px;
    line-height: 1.85;
}
/* 原站老表把 ul/ol/h/p 的默认值全部抹平了，这里逐项声明回来 ——
   凡是靠"浏览器默认样式"的地方在这个站上都不成立。 */
.lv-sd h2, .lv-sd h3, .lv-sd h4,
.lv-sd p, .lv-sd ul, .lv-sd ol, .lv-sd li { margin: 0; padding: 0; }
.lv-sd ul, .lv-sd ol { list-style: none; }
.lv-sd em, .lv-sd i { font-style: normal; }
.lv-sd img { max-width: 100%; height: auto; }
.lv-sd a { text-decoration: none; }

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

.lv-sd-head { margin-bottom: 36px; }
.lv-sd-h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.3px;
    color: var(--lv-t1);
}
.lv-sd-h2:after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lv-red), var(--lv-gold));
    margin-top: 14px;
}
.lv-sd-sec-dark .lv-sd-h2 { color: #fff; }
.lv-sd-sub {
    margin-top: 18px;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--lv-t2);
    max-width: 840px;
}
.lv-sd-sec-dark .lv-sd-sub { color: var(--lv-dark-t2); }

/* ---------------- 3) 开场：定位 + 四个数字 ---------------- */
.lv-sd-intro p { color: var(--lv-t2); font-size: 14.8px; line-height: 1.95; }
.lv-sd-intro p + p { margin-top: 16px; }
/* ★ 导语这一段必须写成 `.lv-sd-intro p.lv-sd-lead`（(0,2,1)），不能只写 `.lv-sd-lead`（(0,1,0)）——
   上面那条 `.lv-sd-intro p` 是 (0,1,1)，会把单类版本的字号与颜色整个压掉，
   结果导语跟正文一个样，"开场一句"的层级就没了。
   （实测就是这么翻的车：`.lv-sd-lead` 量出来是 14.8px/#5a6675，而不是写的 17.5px/#16202e。） */
.lv-sd-intro p.lv-sd-lead {
    font-size: 17.5px;
    line-height: 1.95;
    color: var(--lv-t1);
    margin-bottom: 18px;
}
.lv-sd-lead b { color: var(--lv-red); font-weight: 700; }

.lv-sd-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 36px;
}
.lv-sd-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: 24px 18px 22px;
    text-align: center;
}
.lv-sd-kpi b {
    display: block;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--lv-red);
    letter-spacing: -1px;
}
.lv-sd-kpi span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lv-t2);
}

/* ---------------- 4) 三个理由（深色带） ---------------- */
.lv-sd-hl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.lv-sd-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-sd-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-sd-hl-i h3 {
    margin-top: 18px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
}
.lv-sd-hl-i p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--lv-dark-t2);
}

/* ---------------- 5) 能力网格 ---------------- */
.lv-sd-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.lv-sd-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-sd-card:hover {
    border-color: #cfd9e6;
    box-shadow: var(--lv-shadow);
    transform: translateY(-2px);
}
.lv-sd-card h3 { font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--lv-t1); }
.lv-sd-card h3:before {
    content: "";
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--lv-red);
    margin-bottom: 13px;
}
.lv-sd-card p { margin-top: 11px; font-size: 13.8px; line-height: 1.85; color: var(--lv-t2); }

/* ★ .lv-sd-grid-2 —— 卡片数是 4 的倍数时用的两列版（2026-10-03 加）。
   由来：本文件是「软件定制开发」和「APP 建设」两页共用的（theme.js 的
   LAYOUT_PAGE_CSS 把两个 dirname 都指到这里）。软件定制开发页有 6 张卡，
   3 列正好排两行；APP 建设页只有 4 张卡 —— 3 列会排成「3 + 1」，
   第二行孤零零一张、右边空出两格，看着像页面没做完。
   所以不改 .lv-sd-grid 本身（一改就把另一页也带歪），而是加一个修饰类，
   只让 4 张卡的那一页走 2×2。 */
.lv-sd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------- 6) 开发流程 ---------------- */
.lv-sd-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    counter-reset: sd;
}
.lv-sd-flow li {
    margin-left: 0; margin-right: 0; min-width: 0;
    position: relative;
    background: #fff;
    border-radius: var(--lv-r);
    padding: 26px 22px 24px;
    box-shadow: var(--lv-shadow);
}
.lv-sd-flow li:before {
    counter-increment: sd;
    content: "0" counter(sd);
    position: absolute;
    top: 16px; right: 20px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    color: #eef2f7;
}
.lv-sd-flow b { display: block; font-size: 16px; font-weight: 700; color: var(--lv-t1); }
.lv-sd-flow span { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.85; color: var(--lv-t2); }

/* ---------------- 7) 交付与保障 ---------------- */
.lv-sd-assure {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.lv-sd-assure > div {
    margin-left: 0; margin-right: 0; min-width: 0;
    background: var(--lv-tint);
    border-radius: var(--lv-r);
    padding: 24px 22px;
}
.lv-sd-assure h3 { font-size: 16px; font-weight: 700; color: var(--lv-t1); }
.lv-sd-assure h3:before { content: "✓"; color: var(--lv-red); font-weight: 800; margin-right: 9px; }
.lv-sd-assure p { margin-top: 10px; font-size: 13.8px; line-height: 1.85; color: var(--lv-t2); }

/* ---------------- 8) 结尾行动带 ----------------
   ★ 这一块刻意做成"容器内的圆角深色卡"，而不是像中间那条一样通栏。
     原因：页脚 .lv-ft 本身就是深色（--lv-ink #0a0e15），而 .lv-body-flat
     在底部还留着 64px 的内边距 —— 通栏深色带 + 64px 白缝 + 深色页脚
     会变成"深色 / 白条 / 深色"三段拼接，很难看。
     收进容器当卡片，那 64px 留白就从"接缝"变回了正常的段落间距。 */
.lv-sd-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-sd-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-sd-cta-in {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.lv-sd-cta-txt { min-width: 0; }
.lv-sd-cta h2 { font-size: 24px; font-weight: 700; line-height: 1.4; color: #fff; }
.lv-sd-cta p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--lv-dark-t2);
    max-width: 660px;
}
.lv-sd-cta-btn {
    display: flex;
    gap: 12px;
    flex: none;
    margin-left: 0; margin-right: 0;
}
/* .lv-btn / .lv-btn-main / .lv-btn-line 三个通用件在 home-v3.css 里（全站同一套） */
.lv-sd-cta-btn .lv-btn { flex: none; text-align: center; }
/* 深色底上的描边按钮：home-v3.css 的 .lv-btn-line 本就是给深色底准备的白色描边款 */
.lv-sd-cta-btn .lv-btn-line:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }

/* ---------------- 9) 响应式 ---------------- */
/* 断点与首页 / inner-v3.css 保持一致：1000px 与 640px 两档 */
@media (max-width: 1000px) {
    .lv-sd-sec { padding: 44px 0; }
    .lv-sd-h2 { font-size: 22px; }
    .lv-sd-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-sd-hl { grid-template-columns: minmax(0, 1fr); }
    .lv-sd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* ^ 这一档下 .lv-sd-grid-2 想要的就是 2 列，与本条结果一致、无需另写。
       但显式写出来 —— 因为两者同权重 (0,1,0)，纯靠源码顺序（修饰类在前）才成立。
       哪天有人把修饰类挪到断点之后，那一页会静默变成 3 列，而 1000px 这档
       的截图很难一眼看出问题。写死比依赖顺序安全。 */
    .lv-sd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-sd-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 行动带窄屏改为上下堆叠：flex-direction 一改，交叉轴变成横向，
       所以必须同时写 align-items: stretch —— 否则子项宽度退化成 fit-content。
       （这条在 inner-v3.css 里踩过一次，见那里的注释。） */
    .lv-sd-cta-in { flex-direction: column; align-items: stretch; }
    .lv-sd-cta-btn { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .lv-sd { font-size: 14.5px; }
    .lv-sd-sec { padding: 36px 0; }
    .lv-sd-head { margin-bottom: 26px; }
    .lv-sd-h2 { font-size: 20px; }
    .lv-sd-lead { font-size: 16px; line-height: 1.9; }

    .lv-sd-kpi { gap: 12px; margin-top: 28px; }
    .lv-sd-kpi > div { padding: 18px 12px 16px; }
    .lv-sd-kpi b { font-size: 23px; }
    .lv-sd-kpi span { font-size: 12px; }

    .lv-sd-grid,
    .lv-sd-flow,
    .lv-sd-assure { grid-template-columns: minmax(0, 1fr); }

    .lv-sd-card,
    .lv-sd-hl-i,
    .lv-sd-flow li,
    .lv-sd-assure > div { padding: 20px 18px; }
    .lv-sd-flow li:before { font-size: 22px; top: 14px; right: 16px; }

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