/* ════════════════════════════════════════════════════════════
   营销型网站建设 · 独立设计体系（mk-）
   配色：深森林墨绿 + 暖金 + 象牙底，区别于网站建设页的蓝紫玻璃风
   布局：左对齐标题 / 转化漏斗 Hero / 能力卡 / 对比 / 竖向时间轴
        / 数据墙 / 套餐对照表 / 证言网格 —— 与 ws- 体系零重叠
   ════════════════════════════════════════════════════════════ */

.mk-page{
    --mk-ink:#0c1f1a;
    --mk-green:#0f766e;
    --mk-green-2:#0d9488;
    --mk-teal:#14b8a6;
    --mk-gold:#c8922e;
    --mk-gold-2:#e6b450;
    --mk-grad:linear-gradient(120deg,#0f766e 0%,#0d9488 52%,#c8922e 100%);
    --mk-grad-warm:linear-gradient(120deg,#e6b450,#c8922e);
    --mk-grad-soft:linear-gradient(120deg,#0d9488,#14b8a6);
    --mk-line:#ece6d8;
    --mk-bg:#fbfaf6;
    --mk-bg-soft:#f5f1e8;
    --mk-card:#ffffff;
    --mk-muted:#6c7a72;
    --mk-shadow:0 18px 46px rgba(12,31,26,.08);
    --mk-shadow-lg:0 34px 74px rgba(12,31,26,.14);
}
.mk-page body{background:var(--mk-bg);}
.mk-page section{position:relative;}
.mk-page .wrap{width:100%;padding:0 32px;}

/* ── 通用按钮 ── */
.mk-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:40px;font-size:15px;font-weight:700;letter-spacing:.3px;text-decoration:none;transition:.35s cubic-bezier(.2,.7,.2,1);cursor:pointer;border:1.5px solid transparent;}
.mk-btn-primary{background:var(--mk-grad);color:#fff;box-shadow:0 16px 38px rgba(15,118,110,.32);}
.mk-btn-primary:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(15,118,110,.42);}
.mk-btn-gold{background:var(--mk-grad-warm);color:#3a2708;box-shadow:0 14px 34px rgba(200,146,46,.34);}
.mk-btn-gold:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(200,146,46,.44);}
.mk-btn-ghost{background:rgba(15,118,110,.07);color:var(--mk-green);border-color:rgba(15,118,110,.22);}
.mk-btn-ghost:hover{background:rgba(15,118,110,.14);transform:translateY(-3px);}

/* ── 左对齐区块标题 ── */
.mk-stitle{position:relative;margin:0 auto 46px;max-width:820px;text-align:center;}
.mk-stitle .mk-eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:12.5px;font-weight:700;letter-spacing:2.5px;color:var(--mk-gold);text-transform:uppercase;margin-bottom:18px;}
.mk-stitle .mk-eyebrow::before{content:'';width:28px;height:2px;background:var(--mk-grad-warm);border-radius:2px;}
.mk-stitle .mk-eyebrow::after{content:'';width:28px;height:2px;background:var(--mk-grad-warm);border-radius:2px;}
.mk-stitle h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.22;color:var(--mk-ink);margin:0;}
.mk-stitle h2 em{font-style:normal;background:var(--mk-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.mk-stitle p{margin:16px auto 0;font-size:15.5px;line-height:1.8;color:var(--mk-muted);max-width:640px;}

/* ═══ HERO ═══ */
.mk-hero{background:
    radial-gradient(80% 60% at 100% 0,rgba(20,184,166,.14),transparent 60%),
    radial-gradient(60% 50% at 0 100%,rgba(200,146,46,.10),transparent 60%),
    var(--mk-bg);
    padding:128px 0 92px;overflow:hidden;}
.mk-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.mk-hero-copy{max-width:580px;}
.mk-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:30px;background:rgba(15,118,110,.08);border:1px solid rgba(15,118,110,.16);color:var(--mk-green);font-size:13px;font-weight:600;margin-bottom:24px;}
.mk-tag i{color:var(--mk-gold);}
.mk-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.12;font-weight:800;color:var(--mk-ink);margin:0 0 22px;letter-spacing:-.5px;}
.mk-hero h1 .hl{background:var(--mk-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.mk-hero .lead{font-size:17px;line-height:1.85;color:var(--mk-muted);margin:0 0 34px;}
.mk-hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:42px;}
.mk-stats{display:flex;gap:38px;flex-wrap:wrap;}
.mk-stats li{list-style:none;}
.mk-stats b{display:block;font-size:34px;font-weight:800;color:var(--mk-ink);line-height:1;background:var(--mk-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.mk-stats span{font-size:13.5px;color:var(--mk-muted);margin-top:8px;display:block;}

/* 转化漏斗 Hero 视觉 */
.mk-funnel{position:relative;background:linear-gradient(160deg,#0c1f1a,#103a32);border-radius:26px;padding:38px 34px;box-shadow:var(--mk-shadow-lg);overflow:hidden;}
.mk-funnel::before{content:'';position:absolute;inset:0;background:radial-gradient(90% 60% at 80% 0,rgba(20,184,166,.28),transparent 60%);pointer-events:none;}
.mk-funnel-head{position:relative;display:flex;align-items:center;gap:12px;color:#e9f5f1;margin-bottom:26px;}
.mk-funnel-head i{color:var(--mk-gold-2);font-size:18px;}
.mk-funnel-head b{font-size:16px;font-weight:700;}
.mk-funnel-head small{margin-left:auto;color:rgba(233,245,241,.55);font-size:12.5px;font-weight:500;}
.mk-funnel-bars{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;}
.mk-bar{position:relative;height:62px;border-radius:13px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#fff;font-weight:700;box-shadow:0 12px 26px rgba(0,0,0,.2);transition:transform .4s;}
.mk-bar:hover{transform:scale(1.02);}
.mk-bar .mk-bar-name{display:flex;align-items:center;gap:10px;font-size:15px;}
.mk-bar .mk-bar-name i{color:rgba(255,255,255,.85);}
.mk-bar .mk-bar-val{font-size:20px;font-weight:800;}
.mk-bar.b1{width:100%;background:linear-gradient(120deg,#0d9488,#14b8a6);}
.mk-bar.b2{width:80%;background:linear-gradient(120deg,#0f766e,#0d9488);}
.mk-bar.b3{width:56%;background:linear-gradient(120deg,#c8922e,#e6b450);}
.mk-bar.b4{width:34%;background:linear-gradient(120deg,#a86c1c,#c8922e);}
.mk-funnel-foot{position:relative;margin-top:24px;display:flex;align-items:center;gap:12px;color:rgba(233,245,241,.8);font-size:13px;}
.mk-funnel-foot .dot{width:8px;height:8px;border-radius:50%;background:var(--mk-gold-2);box-shadow:0 0 0 4px rgba(230,180,80,.22);}

/* ═══ 服务类型标签 ═══ */
.mk-tags{background:var(--mk-card);border-bottom:1px solid var(--mk-line);padding:20px 0;}
.mk-tags-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.mk-navtag{display:inline-flex;align-items:center;padding:9px 22px;border-radius:999px;font-size:14px;font-weight:600;color:var(--mk-ink);background:var(--mk-bg-soft);border:1px solid var(--mk-line);text-decoration:none;transition:.3s cubic-bezier(.2,.7,.2,1);}
.mk-navtag:hover{color:var(--mk-green);border-color:rgba(15,118,110,.4);transform:translateY(-2px);box-shadow:var(--mk-shadow);}
.mk-navtag.active{color:#fff;background:var(--mk-grad);border-color:transparent;box-shadow:0 10px 24px rgba(15,118,110,.28);}

/* ═══ 客户行业条 ═══ */
.mk-strip{border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line);background:var(--mk-bg-soft);padding:30px 0;}
.mk-strip-inner{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.mk-strip-label{font-size:14px;font-weight:700;color:var(--mk-green);white-space:nowrap;}
.mk-strip-list{display:flex;flex-wrap:wrap;gap:14px 30px;list-style:none;margin:0;padding:0;}
.mk-strip-list li{font-size:14.5px;color:#7c8a82;position:relative;}
.mk-strip-list li::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mk-gold);margin-right:9px;vertical-align:middle;}

/* ═══ 通用区块间距 ═══ */
.mk-section{padding:92px 0;}
.mk-section.soft{background:var(--mk-bg-soft);}

/* ═══ 能力卡网格 ═══ */
.mk-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.mk-card{position:relative;display:flex;align-items:flex-start;gap:18px;background:var(--mk-card);border:1px solid var(--mk-line);border-radius:20px;padding:28px 26px;overflow:hidden;transition:.4s cubic-bezier(.2,.7,.2,1);}
.mk-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--mk-grad);transform:scaleX(0);transform-origin:left;transition:.4s;}
.mk-card:hover{transform:translateY(-8px);box-shadow:var(--mk-shadow-lg);border-color:transparent;}
.mk-card:hover::before{transform:scaleX(1);}
.mk-card .mk-ico{width:54px;height:54px;flex:none;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;background:var(--mk-grad-soft);box-shadow:0 12px 26px rgba(15,118,110,.22);}
.mk-card .mk-card-body{flex:1;min-width:0;}
.mk-card .mk-num{font-size:13px;font-weight:800;color:var(--mk-gold);letter-spacing:1px;margin-bottom:8px;display:block;}
.mk-card h3{font-size:18.5px;font-weight:800;color:var(--mk-ink);margin:0 0 8px;}
.mk-card p{font-size:14px;line-height:1.7;color:var(--mk-muted);margin:0;}

/* ═══ 传统 vs 营销型 对比 ═══ */
.mk-vs{padding:92px 0;background:linear-gradient(180deg,var(--mk-ink),#0a2922);}
.mk-vs .mk-stitle h2{color:#fff;}
.mk-vs .mk-stitle p{color:rgba(233,245,241,.7);}
.mk-vs .mk-stitle .mk-eyebrow{color:var(--mk-gold-2);}
.mk-vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px;align-items:stretch;}
.mk-vs-col{border-radius:22px;padding:38px 34px;border:1px solid rgba(255,255,255,.08);}
.mk-vs-old{background:rgba(255,255,255,.045);}
.mk-vs-old .mk-vs-head h3{color:#9fb2aa;}
.mk-vs-old .mk-vs-list li{color:#aab8b1;}
.mk-vs-old .mk-vs-list i{color:#5d7068;}
.mk-vs-new{position:relative;background:rgba(20,184,166,.10);border-color:rgba(20,184,166,.3);overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.3);}
.mk-vs-new::before{content:'';position:absolute;inset:0;background:radial-gradient(110% 70% at 90% 0,rgba(230,180,80,.18),transparent 55%);pointer-events:none;}
.mk-vs-head{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.mk-vs-ico{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;background:var(--mk-grad);flex:none;box-shadow:0 14px 30px rgba(15,118,110,.4);}
.mk-vs-new .mk-vs-ico{background:var(--mk-grad-warm);box-shadow:0 14px 30px rgba(200,146,46,.4);}
.mk-vs-head h3{position:relative;font-size:21px;font-weight:800;color:#fff;margin:0;}
.mk-vs-list{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.mk-vs-list li{display:flex;align-items:flex-start;gap:13px;font-size:15px;line-height:1.7;}
.mk-vs-new .mk-vs-list li{color:rgba(233,245,241,.9);}
.mk-vs-list i{margin-top:3px;font-size:15px;flex:none;color:#5d7068;}
.mk-vs-new .mk-vs-list i{color:var(--mk-gold-2);}

/* ═══ 竖向时间轴流程 ═══ */
.mk-flow-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;margin-top:20px;}
.mk-step{position:relative;display:flex;align-items:center;gap:18px;background:var(--mk-card);border:1px solid var(--mk-line);border-radius:18px;padding:26px 26px;transition:.4s;}
.mk-step:hover{transform:translateY(-6px);box-shadow:var(--mk-shadow);}
.mk-step .mk-step-no{width:54px;height:54px;flex:none;border-radius:50%;background:var(--mk-grad);color:#fff;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(15,118,110,.3);}
.mk-step .mk-step-body{flex:1;min-width:0;}
.mk-step h4{font-size:18px;font-weight:800;color:var(--mk-ink);margin:0 0 6px;}
.mk-step p{font-size:14px;line-height:1.7;color:var(--mk-muted);margin:0;}

/* ═══ 数据墙 ═══ */
.mk-data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:40px;}
.mk-stat{position:relative;background:linear-gradient(160deg,#0c1f1a,#103a32);border-radius:20px;padding:30px 26px;color:#fff;overflow:hidden;box-shadow:var(--mk-shadow);}
.mk-stat::after{content:'';position:absolute;right:-20px;bottom:-20px;width:90px;height:90px;border-radius:50%;background:rgba(20,184,166,.18);}
.mk-stat .mk-stat-val{font-size:38px;font-weight:800;line-height:1;background:linear-gradient(120deg,#e6b450,#14b8a6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.mk-stat .mk-stat-label{margin-top:10px;font-size:14px;color:rgba(233,245,241,.78);}
.mk-data-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;background:var(--mk-card);border:1px solid var(--mk-line);border-radius:20px;padding:34px 38px;}
.mk-data-list li{list-style:none;display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.6;color:var(--mk-ink);}
.mk-data-list i{color:var(--mk-green);font-size:16px;flex:none;}

/* ═══ 套餐对照表 ═══ */
.mk-plans{overflow:hidden;border-radius:22px;border:1px solid var(--mk-line);background:var(--mk-card);box-shadow:var(--mk-shadow);}
.mk-plan-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:center;}
.mk-plan-row.head{background:linear-gradient(120deg,#0c1f1a,#103a32);color:#fff;}
.mk-plan-row.head .mk-cell{padding:26px 22px;font-weight:800;font-size:16px;}
.mk-plan-row.head .mk-cell.pname{font-size:18px;}
.mk-plan-row.head .mk-cell.hot{background:rgba(230,180,80,.16);color:#fff;}
.mk-plan-row:not(.head){border-top:1px solid var(--mk-line);}
.mk-plan-row:not(.head) .mk-cell{padding:18px 22px;font-size:14.5px;color:var(--mk-muted);}
.mk-cell.feat{color:var(--mk-ink);font-weight:600;}
.mk-cell.center{text-align:center;}
.mk-cell .mk-yes{color:var(--mk-green);font-size:16px;}
.mk-cell .mk-no{color:#c3cdc7;font-size:16px;}
.mk-cell .mk-price{font-size:22px;font-weight:800;color:var(--mk-ink);}
.mk-cell .mk-price small{font-size:13px;color:var(--mk-muted);font-weight:500;display:block;margin-top:2px;}
.mk-plan-badge{display:inline-block;padding:4px 12px;border-radius:20px;background:var(--mk-grad-warm);color:#3a2708;font-size:12px;font-weight:700;margin-left:8px;vertical-align:middle;}
.mk-plan-cta{grid-column:1/-1;display:flex;justify-content:center;gap:18px;padding:26px;background:var(--mk-bg-soft);border-top:1px solid var(--mk-line);}

/* ═══ 证言网格 ═══ */
.mk-quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.mk-q{background:var(--mk-card);border:1px solid var(--mk-line);border-radius:20px;padding:30px 28px;transition:.4s;}
.mk-q:hover{transform:translateY(-6px);box-shadow:var(--mk-shadow-lg);}
.mk-q .stars{color:var(--mk-gold);font-size:14px;margin-bottom:14px;letter-spacing:2px;}
.mk-q blockquote{margin:0;font-size:15px;line-height:1.8;color:var(--mk-ink);}
.mk-q figcaption{margin-top:18px;font-size:14px;font-weight:700;color:var(--mk-green);}
.mk-q figcaption small{display:block;font-weight:500;color:var(--mk-muted);font-size:12.5px;margin-top:2px;}

/* ═══ FAQ ═══ */
.mk-faq-list{display:grid;gap:14px;max-width:920px;margin:0 auto;}
.mk-faq-item{background:var(--mk-card);border:1px solid var(--mk-line);border-radius:16px;overflow:hidden;transition:.3s;}
.mk-faq-item[open]{box-shadow:var(--mk-shadow);border-color:rgba(15,118,110,.25);}
.mk-faq-item summary{list-style:none;cursor:pointer;padding:22px 26px;font-size:16px;font-weight:700;color:var(--mk-ink);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.mk-faq-item summary::-webkit-details-marker{display:none;}
.mk-faq-item summary i{color:var(--mk-gold);transition:transform .3s;flex:none;}
.mk-faq-item[open] summary i{transform:rotate(180deg);}
.mk-faq-a{padding:0 26px 24px;font-size:14.5px;line-height:1.85;color:var(--mk-muted);}

/* ═══ CTA ═══ */
.mk-cta{background:linear-gradient(120deg,#0f766e,#0d9488 60%,#c8922e);padding:74px 0;position:relative;overflow:hidden;}
.mk-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 0,rgba(255,255,255,.14),transparent 60%);}
.mk-cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.mk-cta-text h3{font-size:clamp(24px,3vw,34px);font-weight:800;color:#fff;margin:0 0 10px;}
.mk-cta-text p{font-size:16px;color:rgba(255,255,255,.9);margin:0;}
.mk-cta-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.mk-cta-tel{color:#fff;font-weight:700;font-size:16px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;}
.mk-cta-tel i{color:rgba(255,255,255,.9);}

/* ═══ 滚动揭示 ═══ */
.mk-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.mk-reveal.mk-in{opacity:1;transform:none;}

/* ═══ 响应式 ═══ */
@media (max-width:980px){
    .mk-hero-inner{grid-template-columns:1fr;gap:44px;}
    .mk-card-grid{grid-template-columns:repeat(2,1fr);}
    .mk-flow-grid{grid-template-columns:1fr 1fr;}
    .mk-flow-grid::before{display:none;}
    .mk-data-grid{grid-template-columns:repeat(2,1fr);}
    .mk-data-list{grid-template-columns:1fr;}
    .mk-quote-grid{grid-template-columns:1fr;}
    .mk-vs-grid{grid-template-columns:1fr;}
    .mk-plan-row{grid-template-columns:1.3fr 1fr 1fr 1fr;font-size:13px;}
    .mk-plan-row.head .mk-cell,.mk-plan-row:not(.head) .mk-cell{padding:16px 12px;}
}
@media (max-width:680px){
    .mk-hero{padding:96px 0 64px;}
    .mk-section,.mk-vs,.mk-plans-section{padding:64px 0;}
    .mk-card-grid{grid-template-columns:1fr;}
    .mk-flow-grid{grid-template-columns:1fr;}
    .mk-data-grid{grid-template-columns:1fr 1fr;}
    .mk-stats{gap:24px;}
    .mk-plan-row,.mk-plan-row.head{grid-template-columns:1.4fr 1fr 1fr 1fr;}
    .mk-cell.feat{font-size:13px;}
}