/* ============================================================
   北京尧图网络 rskf.cn · 营销长页组件库（page.css）
   依赖 style.css 的基础重置/头部/页脚/按钮/动画/cta-band
   各页通过内联 :root{--acc;--acc2} 注入强调色
   设计目标：多套差异化版式，避免 60 页同质化
   ============================================================ */

:root{
    --acc:#8b7355;
    --acc2:#a0846a;
    --ink:#efeae3;
    --txt:#a39b91;
    --txt2:#8f887f;
    --line:#262626;
    --bg0:#121212;
    --bg1:#171717;
    --bg2:#1a1a1a;
    --bg3:#1e1e1e;
}

.section{ padding:96px 0; }
.sec--a{ background:var(--bg1); }
.sec--b{ background:var(--bg0); }
.sec--c{ background:#101010; }

.sec-head{ text-align:center; margin-bottom:56px; }
.sec-head--left{ text-align:left; margin-bottom:40px; }
.sec-head--left .sec-sub{ margin-bottom:12px; }
.sec-lead{ font-size:16px; color:var(--txt); max-width:760px; line-height:1.95; }
.sec-head--left .sec-lead{ margin-top:18px; }

/* ===== 1. HERO ===== */
.b-hero{ position:relative; margin-top:84px; background:linear-gradient(135deg,#1c1c1c 0%,#141414 55%,#191512 100%); overflow:hidden; }
.b-hero__wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center; padding:88px 0 96px; }
.b-hero--right .b-hero__media{ order:2; }
.b-hero--right .b-hero__copy{ order:1; }
.b-hero__badge{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:3px; color:var(--acc); border:1px solid rgba(139,115,85,.4); padding:7px 16px; margin-bottom:24px; }
.b-hero__badge::before{ content:''; width:7px; height:7px; background:var(--acc); border-radius:50%; }
.b-hero h1{ font-size:46px; font-weight:800; color:var(--ink); line-height:1.26; letter-spacing:2px; margin-bottom:22px; }
.b-hero h1 em{ font-style:normal; color:var(--acc); }
.b-hero__sub{ font-size:15.5px; color:var(--txt); line-height:1.95; border-left:3px solid var(--acc); padding-left:18px; margin-bottom:26px; }
.b-hero__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.b-hero__tags span{ font-size:13px; color:var(--acc); border:1px solid rgba(139,115,85,.4); padding:6px 15px; border-radius:2px; letter-spacing:1px; }
.b-hero__btns{ display:flex; gap:14px; flex-wrap:wrap; }
.b-hero__media{ position:relative; }
.b-hero__media img{ width:100%; height:420px; object-fit:cover; border-radius:6px; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.b-hero__media::after{ content:''; position:absolute; inset:14px -14px -14px 14px; border:1px solid var(--acc); border-radius:6px; z-index:-1; opacity:.5; }
.b-hero__stats{ display:grid; grid-template-columns:repeat(4,1fr); background:rgba(18,18,18,.85); border-top:1px solid rgba(139,115,85,.22); padding:26px 0; }
.b-hero__stats .hs{ text-align:center; }
.b-hero__stats .hs b{ display:block; font-size:30px; font-weight:800; color:var(--acc); }
.b-hero__stats .hs span{ font-size:13px; color:var(--txt2); letter-spacing:1px; }
.b-hero--center .b-hero__wrap{ grid-template-columns:1fr; text-align:center; max-width:880px; }
.b-hero--center .b-hero__sub{ border-left:0; border-top:2px solid var(--acc); padding:18px 0 0; margin-left:auto; margin-right:auto; }
.b-hero--center .b-hero__tags{ justify-content:center; }
.b-hero--center .b-hero__btns{ justify-content:center; }

/* ===== 2. 痛点 ===== */
.mk-pain{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.mk-pain__c{ background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--acc); padding:34px 30px; transition:all .35s ease; }
.mk-pain__c:hover{ transform:translateY(-6px); border-color:var(--acc); }
.mk-pain__n{ font-size:34px; font-weight:800; color:var(--acc); opacity:.35; margin-bottom:12px; font-family:Arial; line-height:1; }
.mk-pain__c h3{ font-size:19px; color:var(--ink); margin-bottom:12px; letter-spacing:1px; }
.mk-pain__c p{ font-size:14px; color:var(--txt); line-height:1.85; }

/* ===== 3. 对比表 ===== */
.mk-cmp{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.mk-cmp__col--bad{ background:#181818; }
.mk-cmp__col--good{ background:#1d1a16; border-left:1px solid var(--line); }
.mk-cmp__head{ padding:22px 28px; font-size:16px; font-weight:700; letter-spacing:1px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.mk-cmp__col--bad .mk-cmp__head{ color:#7d7670; }
.mk-cmp__col--good .mk-cmp__head{ color:var(--acc); }
.mk-cmp__head .ic{ width:22px; height:22px; flex:0 0 22px; }
.mk-cmp__row{ padding:18px 28px; font-size:14.5px; line-height:1.8; border-bottom:1px solid rgba(38,38,38,.6); }
.mk-cmp__row:last-child{ border-bottom:0; }
.mk-cmp__col--bad .mk-cmp__row{ color:var(--txt2); }
.mk-cmp__col--good .mk-cmp__row{ color:#c8c1b7; }

/* ===== 4. 解决方案：错位大图行 + 图标网格 ===== */
.mk-fr{ display:grid; gap:42px; }
.mk-fr__item{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; }
.mk-fr__item--rev .mk-fr__media{ order:2; }
.mk-fr__num{ font-size:14px; letter-spacing:3px; color:var(--acc); margin-bottom:14px; }
.mk-fr__item h3{ font-size:26px; color:var(--ink); margin-bottom:16px; letter-spacing:1px; }
.mk-fr__item p{ font-size:15px; color:var(--txt); line-height:2; margin-bottom:14px; }
.mk-fr__points{ display:flex; flex-direction:column; gap:8px; }
.mk-fr__points li{ font-size:14px; color:var(--txt2); padding-left:22px; position:relative; }
.mk-fr__points li::before{ content:''; position:absolute; left:0; top:9px; width:10px; height:10px; border:2px solid var(--acc); border-radius:50%; }
.mk-fr__media{ position:relative; }
.mk-fr__media img{ width:100%; height:300px; object-fit:cover; border-radius:6px; box-shadow:0 20px 44px rgba(0,0,0,.4); }
.mk-fr__media .tag{ position:absolute; left:18px; top:18px; background:var(--acc); color:#fff; font-size:12px; letter-spacing:2px; padding:5px 12px; border-radius:2px; }

.mk-feat{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.mk-feat__c{ background:var(--bg3); border:1px solid #2a2a2a; padding:34px 30px; position:relative; overflow:hidden; transition:all .35s ease; }
.mk-feat__c::before{ content:''; position:absolute; top:0; right:0; width:70px; height:70px; background:linear-gradient(135deg,transparent 49%,var(--acc) 50%,transparent 51%); opacity:.12; }
.mk-feat__c:hover{ transform:translateY(-6px); border-color:var(--acc); }
.mk-feat__ic{ width:50px; height:50px; margin-bottom:18px; color:var(--acc); }
.mk-feat__ic svg{ width:100%; height:100%; }
.mk-feat__c h3{ font-size:20px; color:var(--ink); margin-bottom:12px; }
.mk-feat__c p{ font-size:14px; color:var(--txt); line-height:1.85; }

/* ===== 5. 交付清单 ===== */
.mk-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; }
.mk-list li{ display:flex; gap:14px; padding:16px 0; border-bottom:1px dashed rgba(139,115,85,.18); font-size:15px; color:#c8c1b7; align-items:flex-start; }
.mk-list li .ck{ width:24px; height:24px; flex:0 0 24px; color:var(--acc); margin-top:2px; }
.mk-list li .ck svg{ width:100%; height:100%; }

/* ===== 6. 流程时间线 ===== */
.mk-proc{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; }
.mk-proc::before{ content:''; position:absolute; top:34px; left:12%; right:12%; height:2px; background:linear-gradient(90deg,transparent,var(--acc),transparent); }
.mk-proc__s{ text-align:center; position:relative; padding:0 12px; }
.mk-proc__n{ width:68px; height:68px; margin:0 auto 20px; background:#1f1f1f; border:2px solid var(--acc); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:var(--acc); position:relative; z-index:2; }
.mk-proc__s h3{ font-size:17px; color:var(--ink); margin-bottom:10px; }
.mk-proc__s p{ font-size:13px; color:var(--txt2); line-height:1.7; }
.mk-proc--v{ grid-template-columns:1fr; gap:0; max-width:860px; margin:0 auto; }
.mk-proc--v::before{ display:none; }
.mk-proc--v .mk-proc__s{ display:grid; grid-template-columns:80px 1fr; text-align:left; gap:24px; padding:0 0 40px; position:relative; }
.mk-proc--v .mk-proc__s::before{ content:''; position:absolute; left:33px; top:68px; bottom:0; width:2px; background:linear-gradient(var(--acc),transparent); opacity:.4; }
.mk-proc--v .mk-proc__s:last-child::before{ display:none; }
.mk-proc--v .mk-proc__n{ margin:0; }
.mk-proc--v .mk-proc__s h3{ font-size:19px; margin-bottom:8px; }
.mk-proc--v .mk-proc__s p{ font-size:14px; line-height:1.8; max-width:620px; }

/* ===== 7. 数据带 ===== */
.mk-stat{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.mk-stat__c{ text-align:center; padding:30px 16px; background:var(--bg2); border:1px solid var(--line); border-top:3px solid var(--acc); }
.mk-stat__c b{ display:block; font-size:40px; font-weight:800; color:var(--acc); line-height:1; margin-bottom:10px; }
.mk-stat__c span{ font-size:14px; color:var(--txt2); letter-spacing:1px; }

/* ===== 8. 案例 ===== */
.mk-case{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.mk-case__c{ background:linear-gradient(135deg,#1f1c18 0%,var(--bg2) 100%); border:1px solid #2e2a24; padding:38px 36px; border-left:4px solid var(--acc); transition:all .35s; }
.mk-case__c:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.35); }
.mk-case__tag{ display:inline-block; font-size:12px; letter-spacing:2px; color:var(--acc); border:1px solid rgba(139,115,85,.4); padding:4px 12px; margin-bottom:16px; }
.mk-case__c h3{ font-size:23px; color:var(--ink); margin-bottom:14px; }
.mk-case__c p{ font-size:14.5px; color:#a39b91; line-height:1.95; }
.mk-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.mk-chips span{ font-size:13px; font-weight:700; color:var(--acc); background:#221d17; border:1px solid rgba(139,115,85,.3); padding:6px 14px; border-radius:2px; letter-spacing:.5px; }
.mk-case--one{ grid-template-columns:1fr; max-width:960px; margin:0 auto; }
.mk-case--one .mk-case__c{ padding:46px 48px; }

/* ===== 9. 证言 ===== */
.mk-quote{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mk-quote__c{ background:var(--bg2); border:1px solid var(--line); padding:34px 30px; position:relative; }
.mk-quote__c::before{ content:'\201C'; position:absolute; left:24px; top:6px; font-size:64px; color:var(--acc); opacity:.22; font-family:Georgia,serif; line-height:1; }
.mk-quote__c p{ font-size:14.5px; color:#c8c1b7; line-height:1.9; margin-top:18px; margin-bottom:18px; }
.mk-quote__by{ display:flex; align-items:center; gap:12px; }
.mk-quote__by .av{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--acc),var(--acc2)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:700; }
.mk-quote__by b{ font-size:14px; color:var(--ink); display:block; }
.mk-quote__by span{ font-size:12px; color:var(--txt2); }

/* ===== 10. 长读洞察 ===== */
.mk-read{ max-width:880px; margin:0 auto; }
.mk-read__block{ background:#181818; border:1px solid #252525; padding:40px 42px; margin-bottom:26px; border-left:3px solid var(--acc); }
.mk-read__block h3{ font-size:22px; color:var(--ink); margin-bottom:18px; display:flex; align-items:center; gap:14px; }
.mk-read__block h3 span{ font-size:13px; color:var(--acc); border:1px solid rgba(139,115,85,.4); padding:3px 10px; border-radius:2px; }
.mk-read__block p{ font-size:15px; color:#a39b91; line-height:2; margin-bottom:16px; }
.mk-read__block p:last-child{ margin-bottom:0; }
.mk-pull{ font-size:19px; color:var(--acc); font-weight:600; line-height:1.7; border-left:3px solid var(--acc); padding:6px 0 6px 20px; margin:22px 0; }

/* ===== 11. 适合谁 ===== */
.mk-aud{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mk-aud__c{ background:var(--bg2); border:1px solid var(--line); padding:24px 18px; text-align:center; transition:all .3s; }
.mk-aud__c:hover{ border-color:var(--acc); transform:translateY(-4px); }
.mk-aud__c .ic{ width:38px; height:38px; margin:0 auto 14px; color:var(--acc); }
.mk-aud__c .ic svg{ width:100%; height:100%; }
.mk-aud__c h4{ font-size:15px; color:var(--ink); margin-bottom:6px; }
.mk-aud__c p{ font-size:12.5px; color:var(--txt2); line-height:1.6; }

/* ===== 12. 行业聚焦（区域页） ===== */
.mk-ind{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.mk-ind__c{ display:flex; gap:16px; align-items:flex-start; background:var(--bg2); border:1px solid var(--line); padding:22px 22px; transition:all .3s; }
.mk-ind__c:hover{ border-color:var(--acc); }
.mk-ind__c .ic{ width:44px; height:44px; flex:0 0 44px; background:#222; border:1px solid var(--acc); display:flex; align-items:center; justify-content:center; color:var(--acc); }
.mk-ind__c .ic svg{ width:22px; height:22px; }
.mk-ind__c h4{ font-size:16px; color:var(--ink); margin-bottom:6px; }
.mk-ind__c p{ font-size:13px; color:var(--txt2); line-height:1.7; }

/* ===== 13. FAQ ===== */
.faq-wrap{ max-width:880px; margin:0 auto; }
.faq-item{ background:var(--bg2); border:1px solid var(--line); margin-bottom:14px; }
.faq-q{ padding:22px 26px; font-size:16px; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; gap:16px; }
.faq-x{ color:var(--acc); font-size:22px; transition:transform .3s; flex:0 0 auto; }
.faq-item.open .faq-x{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; padding:0 26px; }
.faq-item.open .faq-a{ max-height:420px; padding:0 26px 22px; }
.faq-a p{ font-size:14px; color:var(--txt); line-height:1.9; }

/* ===== 14. 相关链接 ===== */
.mk-link{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mk-link a{ background:var(--bg2); border:1px solid var(--line); padding:18px 20px; font-size:15px; color:#b9b2a9; display:flex; align-items:center; gap:10px; transition:all .3s; }
.mk-link a::before{ content:'→'; color:var(--acc); }
.mk-link a:hover{ border-color:var(--acc); color:var(--ink); transform:translateX(6px); }

/* ===== 15. 保障条带 ===== */
.mk-grant{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.mk-grant__c{ text-align:center; padding:30px 18px; border:1px solid var(--line); background:var(--bg2); border-radius:6px; }
.mk-grant__c .ic{ width:42px; height:42px; margin:0 auto 16px; color:var(--acc); }
.mk-grant__c .ic svg{ width:100%; height:100%; }
.mk-grant__c h4{ font-size:16px; color:var(--ink); margin-bottom:8px; }
.mk-grant__c p{ font-size:13px; color:var(--txt2); line-height:1.7; }

/* ===== 响应式 ===== */
@media(max-width:1100px){
    .b-hero__wrap{ grid-template-columns:1fr; gap:36px; padding:64px 0 72px; }
    .b-hero__media img{ height:300px; }
    .mk-feat,.mk-list,.mk-quote{ grid-template-columns:1fr 1fr; }
    .mk-ind,.mk-case{ grid-template-columns:1fr; }
    .mk-grant{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:992px){
    .b-hero h1{ font-size:34px; }
    .mk-pain,.mk-cmp,.mk-fr__item,.mk-aud,.mk-link{ grid-template-columns:1fr; }
    .mk-fr__item--rev .mk-fr__media{ order:0; }
    .mk-proc{ grid-template-columns:1fr 1fr; }
    .mk-proc::before{ display:none; }
    .mk-stat{ grid-template-columns:repeat(2,1fr); }
    .b-hero__stats{ grid-template-columns:repeat(2,1fr); }
    .mk-quote{ grid-template-columns:1fr; }
    .mk-case--one .mk-case__c{ padding:30px 24px; }
    .mk-read__block{ padding:30px 24px; }
    .mk-cmp__col--good{ border-left:0; border-top:1px solid var(--line); }
}
@media(max-width:640px){
    .section{ padding:60px 0; }
    .b-hero h1{ font-size:27px; }
    .b-hero__media img{ height:220px; }
    .mk-feat,.mk-list,.mk-proc,.mk-stat,.mk-link,.mk-grant,.mk-ind,.mk-case,.mk-aud{ grid-template-columns:1fr; }
    .mk-proc--v .mk-proc__s{ grid-template-columns:60px 1fr; gap:16px; }
    .sec-title{ font-size:25px; }
    .mk-read__block{ padding:24px 18px; }
    .mk-case__c{ padding:28px 22px; }
}