/* =====================================================
   编程新知 · 全站统一设计系统 site.css
   照明编辑部风：暖白纸感 + 琥珀黄 + 墨黑
   供所有页面(含模板页)加载，位于 style.css 之后
   ===================================================== */

:root {
    --ink: #1e1e1e;
    --ink-2: #4a4a4a;
    --gray-6: #6f6b63;
    --paper: #ffffff;
    --paper-warm: #fbf8f1;
    --paper-warm-2: #f6f1e6;
    --amber: #f6a821;
    --amber-2: #ffc53d;
    --amber-3: #ffdf9e;
    --amber-soft: #fff6e0;
    --line: #ede7da;
    --shadow-soft: 0 10px 40px rgba(30, 30, 30, 0.06);
    --shadow-mid: 0 18px 50px rgba(30, 30, 30, 0.10);
    --radius: 16px;
    --radius-lg: 26px;
    --font-head: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-body: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'Consolas', 'JetBrains Mono', 'Menlo', monospace;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink-2); background: var(--paper); }
::selection { background: var(--amber-2); color: #1e1e1e; }

/* 细网格纸纹背景（用于暖纸色区块） */
.paper-grid { background-color: var(--paper-warm); background-image:
    linear-gradient(rgba(30,30,30,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,0.035) 1px, transparent 1px);
    background-size: 34px 34px; }
.paper-grid-amber { background-color: var(--amber-soft); background-image:
    linear-gradient(rgba(246,168,33,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,168,33,0.08) 1px, transparent 1px);
    background-size: 34px 34px; }

/* =====================================================
   顶部导航 · 下拉 / 巨幕菜单
   ===================================================== */
.header { background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); }
.nav-container { gap: 6px; }
.nav-menu { gap: 2px; }
.nav-menu > li { position: relative; }
.nav-menu > li > a { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.nav-menu > li > a .arrow { font-size: 10px; transition: transform .3s; color: var(--gray-6); }
.nav-menu > li:hover > a .arrow { transform: rotate(180deg); }
.nav-menu > li > a:hover, .nav-menu > li > a.active { background: var(--amber-soft); color: var(--ink); }

.dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(10px);
    background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-mid);
    min-width: 240px; padding: 10px; opacity: 0; visibility: hidden; transition: all .28s ease; z-index: 1200; }
.nav-menu > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; }
.dropdown a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; font-size: 14px; color: var(--ink-2); transition: all .2s; }
.dropdown a:hover { background: var(--amber-soft); color: var(--ink); padding-left: 18px; }
.dropdown a .d-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber-2); flex: none; }
.dropdown .d-title { display:block; font-size: 12px; color: #a09a8e; letter-spacing: 1px; padding: 6px 14px 4px; }

/* 巨幕式多列下拉（前端开发等大栏目） */
.mega { width: 640px; max-width: 90vw; }
.mega .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega .mega-head { display:flex; justify-content:space-between; align-items:center; padding: 8px 14px 10px; border-bottom: 1px dashed var(--line); margin-bottom: 6px; }
.mega .mega-head span { font-size: 12px; color:#a09a8e; letter-spacing:1px; }
.mega .mega-head a { font-size: 13px; color: var(--amber); font-weight:600; padding:2px 8px; }
.mega .mega-head a:hover { background:transparent; padding-left:8px; }

/* 移动端菜单适配下拉 */
@media (max-width: 1024px) {
    .nav-menu { top: 80px; height: calc(100vh - 80px); overflow-y: auto; background:#fff; }
    .nav-menu > li { width: 100%; }
    .dropdown, .mega { position: static; transform:none; opacity:1; visibility:visible; width:100%; min-width:0; box-shadow:none; border:none; background: var(--paper-warm); border-radius:14px; margin:2px 0 8px; padding:6px; display:none; }
    .nav-menu > li.open .dropdown, .nav-menu > li.open .mega { display:block; }
    .mega .mega-grid { grid-template-columns:1fr; }
}

/* =====================================================
   通用区块头
   ===================================================== */
.sec-head { text-align:center; max-width: 760px; margin: 0 auto 54px; }
.sec-head .sec-kicker { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--amber); letter-spacing:2px; padding:6px 16px; border-radius:999px; background:var(--amber-soft); margin-bottom:18px; }
.sec-head .sec-kicker::before { content:''; width:14px; height:2px; background:var(--amber); }
.sec-head h2 { font-size: 38px; font-weight:800; color: var(--ink); line-height:1.25; letter-spacing:-0.5px; }
.sec-head h2 em { font-style:normal; color: var(--amber); }
.sec-head p { margin-top:16px; font-size:16px; color:var(--gray-6); line-height:1.9; }
.sec-head.left { text-align:left; margin-left:0; }

/* =====================================================
   营销型通用组件
   ===================================================== */
/* 数字徽章特性卡 */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.feature-grid.c2 { grid-template-columns:repeat(2,1fr); }
.feature-grid.c4 { grid-template-columns:repeat(4,1fr); }
.feat-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; transition:all .35s; overflow:hidden; }
.feat-card::after { content:''; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,var(--amber),var(--amber-3)); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.feat-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-mid); border-color:transparent; }
.feat-card:hover::after { transform:scaleX(1); }
.feat-card .f-num { font-size:13px; font-weight:700; color:var(--amber); letter-spacing:1px; }
.feat-card .f-icon { width:58px; height:58px; border-radius:15px; background:var(--amber-soft); display:flex; align-items:center; justify-content:center; font-size:26px; margin:16px 0 18px; }
.feat-card h3 { font-size:20px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.feat-card p { font-size:14px; color:var(--gray-6); line-height:1.85; }

/* 流程步骤 */
.flow-h { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:flow; }
.flow-step { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 22px; }
.flow-step .fs-num { counter-increment:flow; }
.flow-step .fs-num::before { content:'0' counter(flow); font-size:34px; font-weight:800; color:var(--amber-soft); -webkit-text-stroke:1.5px var(--amber); }
.flow-step h4 { font-size:17px; font-weight:700; color:var(--ink); margin:14px 0 8px; }
.flow-step p { font-size:13px; color:var(--gray-6); line-height:1.8; }

/* 纵向时间线 */
.timeline { position:relative; padding-left:34px; }
.timeline::before { content:''; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--amber),var(--amber-3)); }
.tl-item { position:relative; padding:0 0 34px 20px; }
.tl-item::before { content:''; position:absolute; left:-34px; top:6px; width:16px; height:16px; border-radius:50%; background:#fff; border:4px solid var(--amber); box-shadow:0 0 0 4px var(--amber-soft); }
.tl-item h4 { font-size:18px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.tl-item .tl-tag { display:inline-block; font-size:12px; font-weight:600; color:var(--amber); background:var(--amber-soft); padding:3px 12px; border-radius:999px; margin-bottom:10px; }
.tl-item p { font-size:14px; color:var(--gray-6); line-height:1.9; }

/* 提示框 */
.callout { border-radius:14px; padding:20px 24px; margin:26px 0; font-size:14px; line-height:1.9; display:flex; gap:14px; align-items:flex-start; }
.callout .co-ico { font-size:20px; flex:none; line-height:1.4; }
.callout.tip { background:#effaf0; border:1px solid #cdeccf; color:#2c6b33; }
.callout.warn { background:#fff7e6; border:1px solid #ffe2a8; color:#8a5b06; }
.callout.note { background:#f2f5ff; border:1px solid #d6e0ff; color:#33498a; }
.callout strong { color:inherit; }

/* 徽章 / 标签 */
.pill { display:inline-block; padding:6px 16px; border-radius:999px; font-size:13px; font-weight:600; }
.pill.amber { background:var(--amber-soft); color:var(--amber); }
.pill.ink { background:var(--ink); color:#fff; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:13px; color:var(--ink-2); cursor:pointer; transition:all .25s; }
.chip:hover { border-color:var(--amber); color:var(--amber); background:var(--amber-soft); }

/* 数据对比表 */
.cmp-table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.cmp-table th, .cmp-table td { padding:16px 20px; text-align:left; font-size:14px; border-bottom:1px solid var(--line); }
.cmp-table thead th { background:var(--ink); color:#fff; font-weight:600; font-size:15px; }
.cmp-table tbody tr:nth-child(even) { background:var(--paper-warm); }
.cmp-table tbody tr:hover { background:var(--amber-soft); }
.cmp-table td.ok { color:#3aa34a; font-weight:700; }
.cmp-table td.no { color:#c0392b; font-weight:700; }
.cmp-table td.dim { color:#a09a8e; }

/* 引用 */
.quote-block { background:var(--paper-warm); border-left:4px solid var(--amber); border-radius:0 14px 14px 0; padding:26px 30px; margin:28px 0; font-size:16px; line-height:2; color:var(--ink-2); font-style:normal; }
.quote-block .qb-who { display:block; margin-top:14px; font-size:13px; color:var(--amber); font-weight:700; }

/* 数字统计条 */
.stat-band { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-radius:var(--radius-lg); overflow:hidden; background:var(--ink); color:#fff; }
.stat-band .sb-item { padding:40px 20px; text-align:center; border-left:1px solid rgba(255,255,255,0.08); }
.stat-band .sb-item:first-child { border-left:none; }
.stat-band .sb-num { font-size:40px; font-weight:800; color:var(--amber-2); line-height:1; }
.stat-band .sb-lab { margin-top:12px; font-size:14px; color:#c9c4b8; }

/* CTA 横幅 */
.cta-banner { position:relative; border-radius:var(--radius-lg); padding:70px 50px; text-align:center; background:linear-gradient(120deg,var(--ink) 0%, #33313a 100%); overflow:hidden; }
.cta-banner::before { content:''; position:absolute; top:-60%; right:-10%; width:60%; height:220%; background:radial-gradient(circle, rgba(255,197,61,0.25) 0%, transparent 65%); }
.cta-banner::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px); background-size:30px 30px; }
.cta-banner > * { position:relative; z-index:2; }
.cta-banner h2 { font-size:34px; font-weight:800; color:#fff; line-height:1.35; margin-bottom:16px; }
.cta-banner h2 em { font-style:normal; color:var(--amber-2); }
.cta-banner p { font-size:16px; color:#cfc9bb; max-width:640px; margin:0 auto 34px; line-height:1.9; }
.cta-banner .cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-banner .btn-primary { background:linear-gradient(135deg,var(--amber-2),var(--amber)); color:#1e1e1e; box-shadow:0 8px 24px rgba(255,197,61,0.35); }
.cta-banner .btn-ghost { border:1.5px solid rgba(255,255,255,0.5); color:#fff; }

/* FAQ 手风琴 */
.faq-list { max-width:860px; margin:0 auto; }
.faq-item { background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden; transition:all .3s; }
.faq-item.open { border-color:var(--amber); box-shadow:var(--shadow-soft); }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 26px; background:none; border:none; cursor:pointer; font-size:16px; font-weight:600; color:var(--ink); text-align:left; font-family:inherit; }
.faq-q .faq-x { flex:none; width:30px; height:30px; border-radius:50%; background:var(--amber-soft); color:var(--amber); display:flex; align-items:center; justify-content:center; font-size:18px; transition:transform .3s; }
.faq-item.open .faq-x { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-item.open .faq-a { max-height:600px; }
.faq-a-in { padding:0 26px 24px; font-size:14px; color:var(--gray-6); line-height:1.95; }

/* 案例卡 */
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.case-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:all .35s; }
.case-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-mid); }
.case-card .cc-img { height:200px; overflow:hidden; position:relative; }
.case-card .cc-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.case-card:hover .cc-img img { transform:scale(1.06); }
.case-card .cc-img .cc-tag { position:absolute; left:16px; top:16px; background:rgba(30,30,30,0.78); color:#fff; font-size:12px; padding:5px 13px; border-radius:999px; backdrop-filter:blur(4px); }
.case-card .cc-body { padding:24px; }
.case-card .cc-body h4 { font-size:18px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.case-card .cc-body p { font-size:13.5px; color:var(--gray-6); line-height:1.85; }
.case-card .cc-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.case-card .cc-meta span { font-size:12px; color:var(--amber); background:var(--amber-soft); padding:4px 12px; border-radius:999px; }

/* 双栏图文内容区 */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.duo .duo-media { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-mid); }
.duo .duo-media img { width:100%; height:auto; display:block; }
.duo .duo-media .dm-float { position:absolute; bottom:22px; left:22px; right:22px; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-radius:14px; padding:16px 20px; box-shadow:var(--shadow-soft); }
.duo .duo-media .dm-float strong { display:block; color:var(--ink); font-size:15px; }
.duo .duo-media .dm-float span { font-size:12.5px; color:var(--gray-6); }
.duo .duo-txt h3 { font-size:26px; font-weight:800; color:var(--ink); line-height:1.4; margin-bottom:18px; }
.duo .duo-txt h3 em { font-style:normal; color:var(--amber); }
.duo .duo-txt p { font-size:15px; color:var(--gray-6); line-height:2; margin-bottom:14px; }
.duo .duo-txt ul { margin:14px 0; }
.duo .duo-txt ul li { position:relative; padding-left:24px; margin-bottom:10px; font-size:14.5px; color:var(--ink-2); }
.duo .duo-txt ul li::before { content:'✓'; position:absolute; left:0; color:var(--amber); font-weight:800; }

/* 工具 / 技术点网格 */
.tool-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tool-tile { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; text-align:center; transition:all .3s; }
.tool-tile:hover { transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:var(--amber-3); }
.tool-tile .tt-ico { font-size:30px; }
.tool-tile h5 { font-size:15px; font-weight:700; color:var(--ink); margin:10px 0 6px; }
.tool-tile p { font-size:12px; color:var(--gray-6); line-height:1.7; }

/* 代码窗 */
.code-win { background:var(--ink); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-mid); }
.code-win .cw-bar { display:flex; align-items:center; gap:8px; padding:14px 18px; background:#2a2a2e; }
.code-win .cw-bar i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.code-win .cw-bar i:nth-child(1){background:#ff5f56;} .code-win .cw-bar i:nth-child(2){background:#ffbd2e;} .code-win .cw-bar i:nth-child(3){background:#27ca40;}
.code-win .cw-bar span { margin-left:8px; font-size:12px; color:#8b8b93; font-family:var(--font-mono); }
.code-win pre { padding:22px 24px; overflow-x:auto; color:#e8e6e0; font-family:var(--font-mono); font-size:13.5px; line-height:1.9; }
.code-win .c-comment { color:#6f6f78; } .code-win .c-key { color:#ffc53d; } .code-win .c-str { color:#9fe08a; } .code-win .c-fn { color:#7fb8ff; }

/* 侧栏文章式布局（长文页） */
.doc-layout { display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; }
.doc-main { min-width:0; }
.doc-toc { position:sticky; top:110px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.doc-toc h4 { font-size:15px; font-weight:700; color:var(--ink); margin-bottom:14px; padding-bottom:12px; border-bottom:1px dashed var(--line); }
.doc-toc a { display:block; padding:8px 12px; border-radius:9px; font-size:13.5px; color:var(--gray-6); transition:all .2s; }
.doc-toc a:hover { background:var(--amber-soft); color:var(--ink); padding-left:16px; }
.doc-article h2 { font-size:28px; font-weight:800; color:var(--ink); margin:44px 0 18px; padding-top:20px; border-top:1px solid var(--line); }
.doc-article h3 { font-size:21px; font-weight:700; color:var(--ink); margin:32px 0 14px; }
.doc-article p { font-size:15px; color:var(--ink-2); line-height:2; margin-bottom:16px; }
.doc-article ul, .doc-article ol { margin:16px 0 16px 8px; }
.doc-article ul li, .doc-article ol li { position:relative; padding-left:20px; margin-bottom:9px; font-size:14.5px; line-height:1.9; color:var(--ink-2); }
.doc-article ul li::before { content:'▸'; position:absolute; left:0; color:var(--amber); }

/* 数字滚动区 */
.metric-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.metric { text-align:center; padding:30px 16px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); }
.metric .m-num { font-size:36px; font-weight:800; color:var(--ink); }
.metric .m-num b { color:var(--amber); }
.metric .m-lab { margin-top:10px; font-size:13.5px; color:var(--gray-6); }

/* 页脚精修 */
.footer { background:#17171a; }
.footer-section h4 { color: var(--amber-2); }
.footer-bottom p a { color:#8b8b93; } .footer-bottom p a:hover { color:var(--amber-2); }

/* 返回顶部 */
.backtop { position:fixed; right:28px; bottom:40px; width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff; border:none; cursor:pointer; box-shadow:var(--shadow-mid); z-index:900; display:flex; align-items:center; justify-content:center; font-size:18px; opacity:0; visibility:hidden; transition:all .3s; }
.backtop.show { opacity:1; visibility:visible; }
.backtop:hover { background:var(--amber); color:var(--ink); }

/* 响应式 */
@media (max-width: 992px) {
    .feature-grid, .feature-grid.c3 { grid-template-columns:repeat(2,1fr); }
    .flow-h { grid-template-columns:repeat(2,1fr); }
    .case-grid, .tool-grid { grid-template-columns:repeat(2,1fr); }
    .stat-band, .metric-row { grid-template-columns:repeat(2,1fr); }
    .duo { grid-template-columns:1fr; gap:36px; }
    .doc-layout { grid-template-columns:1fr; }
    .doc-toc { position:static; }
    .sec-head h2 { font-size:30px; }
}
@media (max-width: 576px) {
    .feature-grid, .feature-grid.c2, .feature-grid.c4 { grid-template-columns:1fr; }
    .flow-h, .case-grid, .tool-grid { grid-template-columns:1fr; }
    .stat-band, .metric-row { grid-template-columns:1fr; }
    .cta-banner { padding:44px 22px; }
    .cta-banner h2 { font-size:26px; }
}

/* =====================================================
   Hero 版式原型库（每页选用不同原型 + 个性强调色）
   ===================================================== */
.hx { position:relative; overflow:hidden; }
.hx .hx-in { max-width:1400px; margin:0 auto; padding:0 40px; position:relative; z-index:3; }
.hx-badge { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:1.5px; color:var(--amber); padding:7px 18px; border-radius:999px; background:var(--amber-soft); margin-bottom:22px; }
.hx h1 { font-size:54px; font-weight:800; color:var(--ink); line-height:1.15; letter-spacing:-1px; }
.hx h1 em { font-style:normal; color:var(--amber); }
.hx .hx-sub { font-size:18px; color:var(--gray-6); line-height:1.9; margin-top:22px; max-width:640px; }
.hx .hx-cta { display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hx .hx-img { border-radius:22px; box-shadow:var(--shadow-mid); object-fit:cover; }

/* A 型：左右分栏 + 浮动徽标卡 */
.hero-a { padding:150px 0 110px; background:linear-gradient(160deg,#fff 55%, var(--amber-soft) 100%); }
.hero-a .hx-in { display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.hero-a .hx-visual { position:relative; }
.hero-a .hx-float { position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 18px; box-shadow:var(--shadow-mid); font-size:13px; color:var(--ink); display:flex; gap:8px; align-items:center; }
.hero-a .hf1 { top:-18px; right:-10px; }
.hero-a .hf2 { bottom:-14px; left:-12px; }
@media(max-width:992px){ .hero-a .hx-in{grid-template-columns:1fr;} .hero-a{padding:120px 0 70px;} }

/* B 型：居中大字排版 + 统计条 */
.hero-b { padding:150px 0 110px; text-align:center; background:radial-gradient(1200px 500px at 50% -10%, var(--amber-soft), #fff 60%); }
.hero-b .hx-sub { margin-left:auto; margin-right:auto; }
.hero-b .hx-cta { justify-content:center; }

/* C 型：深色渐变 + 代码窗 */
.hero-c { padding:150px 0 110px; background:linear-gradient(135deg,#1b1b1f 0%,#26262c 60%, #3a3220 100%); color:#fff; }
.hero-c h1 { color:#fff; }
.hero-c .hx-sub { color:#cfc9bb; }
.hero-c .hx-in { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.hero-c .hx-badge { background:rgba(255,197,61,0.15); color:var(--amber-2); }
@media(max-width:992px){ .hero-c .hx-in{grid-template-columns:1fr;} }

/* D 型：暖纸网格 + 流程管道 */
.hero-d { padding:150px 0 110px; background:var(--paper-warm); background-image:linear-gradient(rgba(30,30,30,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(30,30,30,0.04) 1px,transparent 1px); background-size:34px 34px; }
.hero-d .hx-in { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.hero-d .hx-pipe { display:flex; flex-direction:column; gap:14px; }
.hero-d .hp-step { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px; box-shadow:var(--shadow-soft); font-size:14px; color:var(--ink); font-weight:600; }
.hero-d .hp-step i { width:34px; height:34px; border-radius:10px; background:var(--amber-soft); color:var(--amber); display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; }
@media(max-width:992px){ .hero-d .hx-in{grid-template-columns:1fr;} }

/* E 型：不对称错位面板 */
.hero-e { padding:150px 0 110px; background:#fff; }
.hero-e .hx-in { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.hero-e .hx-visual { position:relative; }
.hero-e .hx-visual .hv-main { width:88%; margin-left:auto; border-radius:22px; box-shadow:var(--shadow-mid); }
.hero-e .hx-visual .hv-cover { position:absolute; left:0; top:18%; width:46%; border-radius:18px; box-shadow:var(--shadow-mid); border:6px solid #fff; }
.hero-e .hx-chip { position:absolute; right:-6px; bottom:24px; background:var(--ink); color:#fff; border-radius:14px; padding:12px 18px; font-size:13px; box-shadow:var(--shadow-mid); }
@media(max-width:992px){ .hero-e .hx-in{grid-template-columns:1fr;} }

/* F 型：居中 + 分类胶囊 */
.hero-f { padding:150px 0 100px; text-align:center; background:linear-gradient(180deg, var(--amber-soft), #fff 55%); }
.hero-f .hx-caps { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.hero-f .hx-caps a { padding:11px 22px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:14px; color:var(--ink-2); transition:all .25s; }
.hero-f .hx-caps a:hover { background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-3px); }

/* G 型：左对齐大字 + 贴边图片列 */
.hero-g { padding:150px 0 110px; background:#fff; position:relative; }
.hero-g .hx-in { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.hero-g .hx-stack { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.hero-g .hx-stack img { border-radius:18px; box-shadow:var(--shadow-soft); width:100%; }
.hero-g .hx-stack img:nth-child(2){ transform:translateY(30px); }
@media(max-width:992px){ .hero-g .hx-in{grid-template-columns:1fr;} }

/* H 型：全深色 + 指标 */
.hero-h { padding:150px 0 110px; background:#16161a; color:#fff; }
.hero-h h1 { color:#fff; }
.hero-h .hx-sub { color:#cfc9bb; }
.hero-h .hx-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px; }
.hero-h .hm { border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:24px 18px; text-align:center; background:rgba(255,255,255,0.03); }
.hero-h .hm b { display:block; font-size:34px; color:var(--amber-2); font-weight:800; }
.hero-h .hm span { font-size:13px; color:#bdb7aa; margin-top:8px; display:block; }
@media(max-width:768px){ .hero-h .hx-metrics{grid-template-columns:repeat(2,1fr);} }

/* I 型：暖黄浅底 + 横向步骤 */
.hero-i { padding:150px 0 100px; background:linear-gradient(135deg, var(--amber-soft) 0%, #fff 70%); }
.hero-i .hx-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:46px; }
.hero-i .hst { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; }
.hero-i .hst b { display:block; font-size:22px; color:var(--amber); font-weight:800; }
.hero-i .hst span { font-size:13px; color:var(--gray-6); }
@media(max-width:768px){ .hero-i .hx-steps{grid-template-columns:repeat(2,1fr);} }

/* J 型：杂志编辑排版 */
.hero-j { padding:140px 0 100px; background:#fff; border-bottom:1px solid var(--line); }
.hero-j .hx-eyebrow { font-size:13px; letter-spacing:3px; color:var(--amber); font-weight:700; margin-bottom:16px; }
.hero-j h1 { font-size:60px; }
.hero-j .hx-in { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:end; }
.hero-j .hx-meta { display:flex; gap:22px; font-size:13px; color:var(--gray-6); margin-top:24px; }
@media(max-width:992px){ .hero-j .hx-in{grid-template-columns:1fr;} .hero-j h1{font-size:40px;} }

/* 通用 section 距离微调 */
.sec { padding:96px 0; }
.sec-tint { background:var(--paper-warm); }
.sec-amber { background:var(--amber-soft); }
.sec-dark { background:var(--ink); }
.sec-dark .sec-head h2 { color:#fff; }
.sec-dark .sec-head p { color:#cfc9bb; }
@media(max-width:576px){ .sec{padding:60px 0;} .hx h1{font-size:34px;} }

/* ================= 营销型长页通用组件 ================= */
.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pain-card { background:#fff; border:1px solid var(--line); border-left:4px solid #e0695a; border-radius:16px; padding:26px 24px; }
.pain-card .pc-ico { font-size:26px; }
.pain-card h4 { font-size:16px; font-weight:700; color:var(--ink); margin:12px 0 8px; }
.pain-card p { font-size:13px; color:var(--gray-6); line-height:1.8; }
@media(max-width:768px){ .pain-grid{grid-template-columns:1fr;} }

.sol-stack { display:grid; gap:16px; max-width:980px; margin:0 auto; }
.sol-row { display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 26px; transition:all .3s; }
.sol-row:hover { transform:translateX(6px); box-shadow:var(--shadow-soft); }
.sol-row .sr-num { flex:none; width:46px; height:46px; border-radius:12px; background:var(--amber-soft); color:var(--amber); font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; }
.sol-row h4 { font-size:17px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.sol-row p { font-size:13.5px; color:var(--gray-6); line-height:1.85; }

.use-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.use-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; gap:16px; align-items:flex-start; }
.use-card .uc-ico { flex:none; width:48px; height:48px; border-radius:12px; background:var(--amber-soft); display:flex; align-items:center; justify-content:center; font-size:22px; }
.use-card h4 { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.use-card p { font-size:13px; color:var(--gray-6); line-height:1.8; }
@media(max-width:768px){ .use-grid{grid-template-columns:1fr;} }

.mini-cta { position:relative; border-radius:18px; padding:34px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:linear-gradient(120deg,var(--ink),#33313a); overflow:hidden; margin:64px 0; }
.mini-cta h3 { font-size:22px; font-weight:800; color:#fff; line-height:1.5; }
.mini-cta h3 em { font-style:normal; color:var(--amber-2); }
.mini-cta p { font-size:14px; color:#cfc9bb; margin-top:8px; line-height:1.8; }
.mini-cta .mc-btns { flex:none; display:flex; gap:12px; }
@media(max-width:768px){ .mini-cta{flex-direction:column; text-align:center; padding:28px 24px;} }

.check-list { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; max-width:900px; margin:0 auto; }
.check-list li { display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); line-height:1.8; }
.check-list li::before { content:'✓'; flex:none; width:22px; height:22px; border-radius:50%; background:var(--amber-soft); color:var(--amber); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:12px; }
@media(max-width:768px){ .check-list{grid-template-columns:1fr;} }

.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; }
.trust-strip .ts-item { padding:30px 16px; text-align:center; border-left:1px solid var(--line); }
.trust-strip .ts-item:first-child { border-left:none; }
.trust-strip b { font-size:30px; color:var(--ink); display:block; font-weight:800; }
.trust-strip b em { font-style:normal; color:var(--amber); }
.trust-strip span { font-size:13px; color:var(--gray-6); margin-top:6px; display:block; }
@media(max-width:768px){ .trust-strip{grid-template-columns:repeat(2,1fr);} .trust-strip .ts-item:nth-child(3){border-left:none;} }

.blk-head { margin-bottom:36px; }
.blk-head .bk-kicker { font-size:12.5px; font-weight:700; color:var(--amber); letter-spacing:2px; margin-bottom:10px; display:block; }
.blk-head h3 { font-size:30px; font-weight:800; color:var(--ink); line-height:1.3; letter-spacing:-0.3px; }
.blk-head h3 em { font-style:normal; color:var(--amber); }
.blk-head p { margin-top:14px; font-size:15px; color:var(--gray-6); line-height:1.9; max-width:680px; }

.cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.faq-2col { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
@media(max-width:768px){ .faq-2col{grid-template-columns:1fr;} }

/* ============================================================
   营销型长页通用组件（mk-*）2026-09 新增
   ============================================================ */
.mk-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:46px; }
.mks-item { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 16px; text-align:center; }
.mks-item b { display:block; font-size:28px; color:var(--amber); font-weight:800; }
.mks-item span { font-size:12.5px; color:var(--gray-6); margin-top:6px; display:block; }
@media(max-width:768px){ .mk-stats{grid-template-columns:1fr 1fr;} }
.mk-table { max-width:980px; margin:50px auto 0; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.mk-table table { width:100%; border-collapse:collapse; font-size:14px; }
.mk-table th, .mk-table td { padding:15px 18px; text-align:center; border-bottom:1px solid var(--line); }
.mk-table th { background:var(--paper-warm); font-weight:700; color:var(--ink); }
.mk-table th:first-child, .mk-table td:first-child { text-align:left; }
.mk-table tr:last-child td { border-bottom:none; }
.mk-table .mk-yes { color:var(--amber); font-weight:800; }
.mk-table .mk-no { color:#c9c4b8; }
.mk-table .mk-hot { color:var(--ink); font-weight:700; background:var(--amber-soft); }
@media(max-width:768px){ .mk-table{overflow-x:auto;} .mk-table table{min-width:620px;} }
.mk-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.mkc-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 24px; transition:all .3s; }
.mkc-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-mid); border-color:transparent; }
.mkc-card .mkc-ico { font-size:26px; }
.mkc-card h4 { font-size:16px; font-weight:700; color:var(--ink); margin:12px 0 8px; }
.mkc-card p { font-size:13px; color:var(--gray-6); line-height:1.85; }
.mkc-card a { display:inline-block; margin-top:10px; font-size:13px; color:var(--amber); font-weight:700; }
@media(max-width:768px){ .mk-cards{grid-template-columns:1fr;} }
.mk-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:50px; }
.mkstep { position:relative; background:var(--ink); border-radius:18px; padding:28px 24px; color:#fff; overflow:hidden; }
.mkstep::before { content:attr(data-num); position:absolute; right:-6px; top:-18px; font-size:70px; font-weight:800; color:rgba(255,255,255,0.07); }
.mkstep b { display:block; font-size:16px; color:var(--amber-2); margin-bottom:8px; }
.mkstep span { font-size:12.5px; color:#cfc9bb; line-height:1.8; display:block; }
@media(max-width:992px){ .mk-steps{grid-template-columns:1fr 1fr;} }
@media(max-width:576px){ .mk-steps{grid-template-columns:1fr;} }
.mk-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px; }
.mkq-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 26px; }
.mkq-card .mkq-star { color:var(--amber); font-size:14px; letter-spacing:2px; }
.mkq-card p { font-size:14px; color:var(--ink-2); line-height:1.9; margin:12px 0 18px; font-style:italic; }
.mkq-card .mkq-who { display:flex; align-items:center; gap:12px; }
.mkq-card .mkq-avatar { width:40px; height:40px; border-radius:50%; background:var(--amber-soft); color:var(--amber); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; }
.mkq-card .mkq-name { font-size:14px; font-weight:700; color:var(--ink); }
.mkq-card .mkq-role { font-size:12px; color:var(--gray-6); }
@media(max-width:768px){ .mk-quotes{grid-template-columns:1fr;} }
.mk-band { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.mkb-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 26px; text-align:center; transition:all .3s; }
.mkb-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-mid); border-color:transparent; }
.mkb-card .mkb-ico { font-size:28px; }
.mkb-card h4 { font-size:16.5px; font-weight:700; color:var(--ink); margin:12px 0 8px; }
.mkb-card p { font-size:12.5px; color:var(--gray-6); line-height:1.8; }
.mkb-card a { display:inline-block; margin-top:12px; font-size:13px; color:var(--amber); font-weight:700; }
@media(max-width:768px){ .mk-band{grid-template-columns:1fr;} }
.mk-list { max-width:900px; margin:0 auto; }
.mk-note { background:#fff; border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:12px; padding:16px 20px; font-size:13.5px; color:var(--gray-6); line-height:1.9; margin-top:20px; }