/* ============================================================
   Hiddle 营销页共享设计系统  (self-contained)
   不依赖裁剪后的 Tailwind——网格/卡片/CTA 全部自定义，
   仅复用一定存在的 bg-base-100/200 等基础类。
   配色：柔和蓝 #3b82f6 → 紫 #8b5cf6（比原 #1677ff/#7c3aed 更不刺眼）
   ============================================================ */

/* 防止装饰性大元素在移动端撑出横向滚动（overflow:clip 不破坏 sticky 头部） */
html{overflow-x:clip}

/* ---------- 响应式网格（替代被裁掉的 lg:grid-cols-2 等） ---------- */
.mkg2{display:grid;gap:20px;grid-template-columns:1fr}
.mkg2c{display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
.mkg3{display:grid;gap:16px;grid-template-columns:1fr}
.mkg4{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.mkg6{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.mk-dimgrid{display:grid;gap:4px 28px;grid-template-columns:1fr}
.mk-flow{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.mkg3{grid-template-columns:1fr 1fr}}
@media(min-width:768px){
  .mkg4{grid-template-columns:repeat(4,1fr)}
  .mkg6{grid-template-columns:repeat(3,1fr)}
  .mk-dimgrid{grid-template-columns:1fr 1fr}
  .mk-flow{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px){
  .mkg2{grid-template-columns:1fr 1fr}
  .mkg2c{grid-template-columns:1fr 1fr}
  .mkg3{grid-template-columns:1fr 1fr 1fr}
  .mkg6{grid-template-columns:repeat(6,1fr)}
  .mk-dimgrid{grid-template-columns:1fr 1fr 1fr}
}

/* ---------- 强调元素 ---------- */
.mk-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 11px;border-radius:999px;background:linear-gradient(90deg,rgba(59,130,246,.14),rgba(139,92,246,.14));color:#5b8bff;border:1px solid rgba(99,102,241,.26)}
.mk-grad{background:linear-gradient(90deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-num{display:inline-block;font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.02em;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85}
.mk-stat{font-size:1.85rem;font-weight:800;line-height:1;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-code{font-size:.8em;background:rgba(128,140,170,.16);border:1px solid rgba(128,140,170,.22);padding:1px 6px;border-radius:6px;font-family:"SFMono-Regular",Consolas,monospace}

/* ---------- 卡片（背景用 .bg-base-200 类叠加，这里管形状/边框/阴影/hover） ---------- */
.mk-card{position:relative;border-radius:1rem;border:1px solid rgba(128,140,170,.2);box-shadow:0 1px 2px rgba(15,30,60,.06),0 14px 34px -20px rgba(20,45,95,.4);transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s,border-color .26s}
.mk-card.mk-hover:hover{transform:translateY(-4px);box-shadow:0 22px 46px -22px rgba(59,110,246,.45);border-color:rgba(90,139,255,.45)}
.mk-pad{padding:1.5rem}
@media(min-width:1024px){.mk-pad-lg{padding:2rem}}

/* 锚点导航 chip */
.mk-chip{display:block;text-align:center;padding:14px 8px;border-radius:16px;border:1px solid rgba(128,140,170,.2);font-size:1.35rem;transition:transform .2s,border-color .2s,box-shadow .2s,color .2s}
.mk-chip>div{font-size:.8rem;margin-top:4px}
.mk-chip:hover{transform:translateY(-3px);border-color:rgba(90,139,255,.5);box-shadow:0 14px 28px -14px rgba(59,110,246,.4);color:#5b8bff}

/* 发光背景 orb（柔和、低透明） */
.mk-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.5}
.mk-glow-a{top:-12%;left:-8%;width:30rem;height:30rem;max-width:70vw;background:radial-gradient(circle,rgba(59,130,246,.2),transparent 68%)}
.mk-glow-b{bottom:-16%;right:-8%;width:32rem;height:32rem;max-width:70vw;background:radial-gradient(circle,rgba(139,92,246,.18),transparent 66%)}

/* hero 浮动光球 */
.mk-hero-orb{position:absolute;z-index:1;top:-18%;right:-6%;width:32rem;height:32rem;max-width:66vw;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.34),rgba(56,189,248,.12) 46%,transparent 68%);filter:blur(48px);pointer-events:none}
.mk-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px)}

/* JS-vs-C++ 终端卡 */
.mk-term{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid rgba(128,140,170,.2)}
.mk-term .d{width:11px;height:11px;border-radius:50%}
.mk-term .dr{background:#ff5f57}.mk-term .dy{background:#febc2e}.mk-term .dg{background:#28c840}
.mk-badge{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.mk-badge-x{background:rgba(239,68,68,.14);color:#ef4444}
.mk-badge-ok{background:rgba(34,197,94,.16);color:#22c55e}

/* 17 维度表头（柔和渐变） */
.mk-dimhead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px;background:linear-gradient(120deg,#3b82f6,#8b5cf6);color:#fff;border-radius:1rem 1rem 0 0}
.mk-dimhead .n{font-size:2.4rem;font-weight:800;line-height:1;color:rgba(255,255,255,.92)}
.mk-dimrow{display:flex;gap:12px;align-items:flex-start;padding:8px 10px;border-radius:9px;transition:background .18s}
.mk-dimrow:hover{background:rgba(128,140,170,.12)}
.mk-dimrow .i{flex-shrink:0;width:24px;font-weight:700;font-size:.82rem;color:#5b8bff}

/* 流程步骤 */
.mk-flow .mk-flow-n{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 8px 18px -6px rgba(59,110,246,.5)}

/* 勾选点 */
.mk-tick{flex-shrink:0;width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#5b8bff;background:rgba(59,130,246,.14);margin-top:1px}

/* 图标徽章 */
.mk-ico{width:2.75rem;height:2.75rem;border-radius:.85rem;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 10px 22px -8px rgba(59,110,246,.6)}
.mk-ico svg{width:1.45rem;height:1.45rem}
.mk-ico-soft{flex-shrink:0;width:2.4rem;height:2.4rem;border-radius:.7rem;display:inline-flex;align-items:center;justify-content:center;color:#5b8bff;background:rgba(59,130,246,.13);border:1px solid rgba(59,130,246,.22)}
.mk-ico-soft svg{width:1.2rem;height:1.2rem}
.mk-chip .mk-ico-soft{margin:0 auto}
/* 概览高亮卡 */
.mk-highlight{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mk-highlight .big{font-size:3rem;font-weight:800;line-height:1;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 配图框 */
.mk-shot{position:relative;border-radius:1rem;overflow:hidden;border:1px solid rgba(128,140,170,.22);box-shadow:0 20px 50px -24px rgba(20,45,95,.6)}
.mk-shot img{display:block;width:100%;height:auto}
.mk-shot .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px 18px;background:linear-gradient(to top,rgba(6,14,32,.9),transparent)}

/* ---------- 收尾 CTA（柔和内嵌面板，不再满屏亮渐变） ---------- */
.mk-cta{position:relative;overflow:hidden;border-radius:1.5rem;border:1px solid rgba(99,130,246,.28);isolation:isolate}
.mk-cta::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(139,92,246,.12) 60%,rgba(56,189,248,.10))}
.mk-cta .mk-cta-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:.6}
.mk-cta .o1{top:-40%;left:-4%;width:26rem;height:26rem;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 66%)}
.mk-cta .o2{bottom:-46%;right:-2%;width:28rem;height:28rem;background:radial-gradient(circle,rgba(139,92,246,.26),transparent 64%)}

/* ---------- 滚动进场（JS 开启且未开启"减少动态"时才隐藏） ---------- */
@media (prefers-reduced-motion: no-preference){
  html.mkjs [data-mkr]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  html.mkjs [data-mkr].mk-in{opacity:1;transform:none}
}