/* ============================================================
   素豚网 SuTun 整站模板 主题样式
   设计还原：www.sutunwang.com（合肥洛泰弗创意设计有限公司）
   主色：#076ce0 ｜ 正文字体：系统中文栈（微软雅黑 / 苹方）
   全部资源本地化，无外部 CDN 依赖
   ============================================================ */

/* ---------- 1. 基础与重置 ---------- */
:root {
  --primary: #076ce0;
  --primary-dark: #0558b8;
  --primary-light: #eaf2fd;
  --text-main: #222222;
  --text-sub: #555555;
  --text-muted: #8a8f99;
  --bg-light: #f5f7fb;
  --bg-dark: #12161f;
  --border: #e6e9ef;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(7, 108, 224, 0.08);
  --shadow-lg: 0 18px 50px rgba(7, 60, 140, 0.16);
  --container: 1680px;
  --font: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-main);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.35; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* ---------- 2. 顶部信息条 ---------- */
.sutun-topbar {
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  height: 36px;
  display: flex;
  align-items: center;
}
.sutun-topbar .container { display: flex; justify-content: space-between; align-items: center; }
.sutun-topbar a { color: #fff; opacity: .92; }
.sutun-topbar a:hover { opacity: 1; }
.sutun-topbar .topbar-right { display: flex; gap: 22px; }
.sutun-topbar .topbar-right span { display: inline-flex; align-items: center; gap: 6px; }
.sutun-topbar svg { width: 14px; height: 14px; fill: #fff; }

/* ---------- 3. 头部导航 ---------- */
.sutun-header {
  position: sticky; top: 0; z-index: 999;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sutun-header.is-scrolled {
  background: rgba(255, 255, 255, .97);
  border-color: var(--border);
  box-shadow: 0 6px 24px rgba(18, 22, 31, .08);
}
.sutun-header .container { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.sutun-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sutun-logo img { height: 52px; width: auto; }
.sutun-logo .logo-txt strong { display: block; font-size: 24px; color: var(--primary); letter-spacing: 1px; }
.sutun-logo .logo-txt small { display: block; font-size: 11px; color: #9aa3b2; letter-spacing: .6px; margin-top: -2px; }

.sutun-nav { display: flex; align-items: center; gap: 4px; }
.sutun-nav .nav-item { position: relative; }
.sutun-nav .nav-link {
  position: relative;
  display: flex; align-items: center;
  height: 88px;
  padding: 0 16px;
  font-size: 15.5px;
  color: #222;
  white-space: nowrap;
}
.sutun-nav .nav-link::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 3px; border-radius: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.sutun-nav .nav-link:hover { color: var(--primary); }
.sutun-nav .nav-link.active { color: var(--primary); font-weight: 700; }
.sutun-nav .nav-link.active::after { transform: scaleX(1); }

/* 下拉箭头 */
.nav-caret {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 5px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}

/* 下拉菜单 */
.sutun-nav .nav-drop {
  position: absolute; top: 100%; left: 50%;
  min-width: 220px;
  padding: 10px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(18, 22, 31, .14);
  border: 1px solid var(--border);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 60;
}
.sutun-nav .nav-item:hover .nav-drop,
.sutun-nav .nav-item:focus-within .nav-drop {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(4px);
}
.sutun-nav .nav-item:hover .nav-caret { transform: rotate(225deg) translate(-1px, -1px); }
.sutun-nav .nav-sublink {
  display: block;
  padding: 10px 22px;
  font-size: 14.5px;
  color: #3a4152;
  transition: color .18s ease, background .18s ease;
}
.sutun-nav .nav-sublink:hover { color: var(--primary); background: var(--primary-light); }
.sutun-nav .nav-sublink.active { color: var(--primary); font-weight: 600; }

.sutun-nav .nav-cta {
  margin-left: 18px;
  background: var(--primary);
  color: #fff !important;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 14px;
}
.sutun-nav .nav-cta::after { display: none; }
.sutun-nav .nav-cta:hover { background: var(--primary-dark); }

/* 移动端导航开关 */
.sutun-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.sutun-burger i { display: block; width: 20px; height: 2px; background: #333; border-radius: 2px; transition: .3s; }

/* ---------- 4. 首页主视觉 Banner 轮播 ---------- */
.sutun-hero { position: relative; overflow: hidden; background: var(--primary); height: 650px; }
.hero-slides { position: relative; height: 100%; }
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; position: relative; height: 100%; }
.hero-slide .container { display: flex; align-items: center; justify-content: flex-start; gap: 40px; padding: 0 90px; }

/* 渐变底 */
.hero-slide--pink { background: linear-gradient(115deg, #ff8fab 0%, #ff6f9c 45%, #f89bc5 100%); }
.hero-slide--teal { background: linear-gradient(115deg, #12b8a5 0%, #0a9b9e 48%, #0b7f9c 100%); }
.hero-slide--green { background: linear-gradient(115deg, #22b573 0%, #17a08f 55%, #12879b 100%); }
.hero-slide--blue { background: linear-gradient(115deg, #0b6fde 0%, #076ce0 45%, #1d8cf0 100%); }
.hero-slide--night {
  background: linear-gradient(115deg, #0e3a75 0%, #0b2c5e 55%, #101a33 100%);
}
.hero-slide--night .hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .34;
}

/* 背景媒体层（后台「背景媒体」字段：图片/视频，cover 填充不变形） */
.hero-bg-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; background: var(--primary);
}
.hero-bg-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, rgba(8, 20, 40, .62) 0%, rgba(8, 20, 40, .30) 55%, rgba(8, 20, 40, .06) 100%);
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 2; max-width: 560px; color: #fff; }
.hero-copy .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; letter-spacing: 1px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, .12);
}
.hero-copy h2 { font-size: 46px; line-height: 1.22; letter-spacing: 1px; font-weight: 800; }
.hero-copy .hero-sub { margin-top: 16px; font-size: 17px; color: rgba(255,255,255,.92); }
.hero-copy .hero-desc { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.78); }
.hero-copy .hero-price { margin-top: 18px; font-size: 15px; color: rgba(255,255,255,.95); }
.hero-copy .hero-price b { font-size: 34px; color: #fff; font-weight: 800; }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 32px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  border: 1px solid transparent;
  transition: all .28s ease;
  line-height: 1.4;
}
.btn--white { background: #fff; color: var(--primary); }
.btn--white:hover { background: var(--primary); color: #fff; }
.btn--dark { background: #1c2333; color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn--ghost:hover { background: #fff; color: var(--primary); border-color: #fff; }
.btn--blue { background: var(--primary); color: #fff; }
.btn--blue:hover { background: var(--primary-dark); }
.btn--sm { padding: 8px 22px; font-size: 13.5px; }

.hero-visual { position: relative; z-index: 2; width: 46%; max-width: 520px; }
.hero-visual img { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.18)); }
/* 仅上传背景媒体时：隐藏空前景插画位，文字区自动铺满 */
.hero-visual img[src=""], .hero-visual:has(img[src=""]) { display: none; }
.hero-slide:has(.hero-visual img[src=""]) .container { justify-content: center; }

/* 轮播指示器 */
.hero-dots {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 5;
}
.hero-dots button {
  width: 26px; height: 5px; border-radius: 4px;
  border: 0; background: rgba(255,255,255,.45);
  transition: all .3s ease;
}
.hero-dots button.is-active { width: 40px; background: #fff; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .28s ease;
}
.hero-arrow:hover { background: #fff; color: var(--primary); }
.hero-arrow--prev { left: 18px; }
.hero-arrow--next { right: 18px; }

/* ---------- 5. 通用章节 ---------- */
.section { padding: 84px 0; }
.section--light { background: var(--bg-light); }
.section--dark { background: var(--bg-dark); color: #fff; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.section-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: 2px;
  color: var(--primary);
  margin-bottom: 12px;
  padding: 5px 16px;
  border: 1px solid rgba(7,108,224,.25);
  border-radius: 999px;
  background: var(--primary-light);
}
.section--dark .section-eyebrow { color: #8fc3ff; border-color: rgba(143,195,255,.35); background: rgba(143,195,255,.08); }
.section-title { font-size: 34px; font-weight: 800; letter-spacing: .5px; }
.section-desc { margin-top: 14px; font-size: 15.5px; color: var(--text-sub); }
.section--dark .section-desc { color: rgba(255,255,255,.75); }

.section-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); font-size: 14.5px; font-weight: 600;
}
.section-link svg { width: 16px; height: 16px; fill: currentColor; transition: transform .25s; }
.section-link:hover svg { transform: translateX(4px); }
.section--dark .section-link { color: #8fc3ff; }

/* ---------- 6. 服务速览（首页四栏服务入口） ---------- */
.service-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.service-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(7,108,224,.3); }
.service-card__icon {
  width: 62px; height: 62px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
  margin-bottom: 20px;
}
.service-card__icon svg { width: 30px; height: 30px; fill: currentColor; }
.service-card h3 { font-size: 19px; margin-bottom: 10px; }
.service-card p { font-size: 14px; color: var(--text-sub); line-height: 1.7; }
.service-card .service-more {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--primary);
}
.service-card .service-more svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- 7. 文字列表型服务（品牌设计 9 项） ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.tag-item {
  padding: 14px 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 15.5px; font-weight: 600; color: #333;
  transition: all .28s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.tag-item:hover { color: #fff; background: var(--primary); border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }
.tag-item .num { font-size: 12px; opacity: .65; font-weight: 400; }

/* ---------- 8. 双栏图文（split） ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.split__media .float-badge {
  position: absolute; bottom: 22px; left: -18px;
  background: #fff; border-radius: 14px;
  padding: 16px 22px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 14px;
}
.float-badge .fb-num { font-size: 30px; font-weight: 800; color: var(--primary); line-height: 1; }
.float-badge .fb-txt { font-size: 12.5px; color: var(--text-sub); }
.split__copy h3 { font-size: 30px; font-weight: 800; }
.split__copy > p { margin: 16px 0 22px; color: var(--text-sub); font-size: 15px; }
.split-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split-point {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-light);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14.5px; font-weight: 600;
}
.split-point svg { width: 20px; height: 20px; fill: var(--primary); flex-shrink: 0; }

/* ---------- 9. 案例卡片（暗场） ---------- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.case-card {
  background: #fff; border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  transition: all .3s ease;
}
.case-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.case-card__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.case-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case-card:hover .case-card__img img { transform: scale(1.06); }
.case-card__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,40,90,.55));
}
.case-card__body { padding: 22px 24px 24px; }
.case-card__body h3 { font-size: 17.5px; margin-bottom: 8px; }
.case-card__body h3 a:hover { color: var(--primary); }
.case-card__body p { font-size: 13.5px; color: var(--text-sub); line-height: 1.65; }
.case-card__more {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--primary);
}
.case-card__more svg { width: 13px; height: 13px; fill: currentColor; }

/* ---------- 10. 摄影产品网格 ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.photo-tile {
  position: relative; overflow: hidden;
  border-radius: 12px; aspect-ratio: 1 / 1;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.photo-tile:hover img { transform: scale(1.08); }
.photo-tile figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 26px 16px 14px;
  font-size: 13.5px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(10,16,30,.75));
  opacity: 0; transform: translateY(8px);
  transition: all .3s ease;
}
.photo-tile:hover figcaption { opacity: 1; transform: translateY(0); }

/* ---------- 11. 订阅优势 ---------- */
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.adv-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: all .3s ease;
}
.adv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.adv-card__icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin-bottom: 18px;
}
.adv-card__icon svg { width: 26px; height: 26px; fill: #fff; }
.adv-card h3 { font-size: 18px; margin-bottom: 10px; }
.adv-card p { font-size: 14px; color: var(--text-sub); line-height: 1.7; }

/* ---------- 12. CTA 横幅 ---------- */
.cta-banner {
  background: linear-gradient(110deg, #076ce0 0%, #1d8cf0 60%, #3aa1ff 100%);
  border-radius: 20px;
  padding: 48px 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; color: #fff;
  box-shadow: var(--shadow-lg);
}
.cta-banner h3 { font-size: 30px; font-weight: 800; }
.cta-banner p { margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.85); }
.cta-banner .cta-price { font-size: 15px; margin-top: 4px; }
.cta-banner .cta-price b { font-size: 38px; font-weight: 800; }
.cta-banner .btn--white { padding: 14px 38px; font-size: 16px; }

/* ---------- 13. 页脚 ---------- */
.sutun-footer { background: #0F141C; color: #9299A6; font-size: 14px; }
.sutun-footer__main {
  padding: 76px 0 56px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 52px;
}
.sutun-footer h4 {
  color: #fff; font-size: 15px; font-weight: 600;
  letter-spacing: .4px; margin-bottom: 22px;
}
.sutun-footer ul li { margin-bottom: 11px; line-height: 1.9; }
.sutun-footer ul a { color: #9299A6; transition: color .2s ease; }
.sutun-footer ul a:hover { color: var(--primary); }
/* 左侧品牌区 */
.footer-brand__logo { margin-bottom: 18px; }
.footer-brand__logo img { height: 44px; width: auto; display: block; }
.footer-brand__pos { font-size: 14.5px; font-weight: 700; color: #dfe4ec; line-height: 1.9; margin-bottom: 12px; }
.footer-brand__desc { font-size: 13.5px; line-height: 2; color: #9299A6; margin-bottom: 14px; }
.footer-brand__tag { font-size: 13.5px; line-height: 1.9; color: #6f7a8f; }
/* 营销包月重点入口 */
.footer-nav__key a { color: var(--primary); font-weight: 700; }
.footer-nav__key a:hover { color: #4d9bff; }
/* 聊聊你的项目 */
.footer-talk__desc { font-size: 13.5px; line-height: 1.9; color: #9299A6; margin-bottom: 16px; }
.sutun-footer .footer-contact li { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; font-size: 13.5px; }
.sutun-footer .footer-contact svg { width: 16px; height: 16px; fill: #7d8798; flex-shrink: 0; }
.sutun-footer .footer-contact a { color: #b8bfcb; }
.sutun-footer .footer-contact a:hover { color: var(--primary); }
.sutun-footer__qr { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.sutun-footer__qr img { width: 92px; height: 92px; border-radius: 8px; background: #fff; padding: 4px; display: block; }
.sutun-footer__qr span { font-size: 12.5px; color: #9299A6; }
/* 超大品牌字 */
.sutun-footer__brandline { border-top: 1px solid rgba(255,255,255,.08); padding: 30px 0 6px; }
.sutun-footer__brandline .container {
  text-align: center;
  font-size: clamp(72px, 13vw, 168px);
  font-weight: 900; letter-spacing: .06em;
  line-height: .9; color: #1A202A;
  user-select: none; pointer-events: none;
}
.sutun-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0 26px;
  font-size: 13px; color: #6f7a8f;
}
.sutun-footer__bottom .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.sutun-footer__bottom a { color: #6f7a8f; transition: color .2s ease; }
.sutun-footer__bottom a:hover { color: #fff; }
.foot-law { display: flex; align-items: center; gap: 8px; }
.foot-law .dot { color: rgba(255,255,255,.15); }
.foot-law span { cursor: default; }

/* 移动端底部悬浮条 */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
  background: #fff; border-top: 1px solid var(--border);
}
.mobile-bar a {
  flex: 1; text-align: center; padding: 12px 0;
  font-size: 13px; color: #333;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.mobile-bar a svg { width: 20px; height: 20px; fill: #666; }
.mobile-bar a.active { color: var(--primary); }
.mobile-bar a.active svg { fill: var(--primary); }

/* ---------- 14. 内页头部 ---------- */
.page-hero {
  background: linear-gradient(115deg, #0b6fde 0%, #076ce0 45%, #1d8cf0 100%);
  color: #fff;
  padding: 78px 0;
  position: relative; overflow: hidden;
}
.page-hero--teal { background: linear-gradient(115deg, #12b8a5 0%, #0a9b9e 48%, #0b7f9c 100%); }
.page-hero--green { background: linear-gradient(115deg, #22b573 0%, #17a08f 55%, #12879b 100%); }
.page-hero--pink { background: linear-gradient(115deg, #ff8fab 0%, #ff6f9c 45%, #f89bc5 100%); }
.page-hero--night { background: linear-gradient(115deg, #0e3a75 0%, #0b2c5e 55%, #101a33 100%); }
.page-hero::before {
  content: "";
  position: absolute; right: -80px; top: -80px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.page-hero::after {
  content: "";
  position: absolute; right: 90px; bottom: -120px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.page-hero .container { position: relative; z-index: 2; }

/* 服务页 hero 背景图 */
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(8, 20, 40, .72) 0%, rgba(8, 20, 40, .38) 55%, rgba(8, 20, 40, .10) 100%);
}
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 2px;
  padding: 5px 16px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  margin-bottom: 16px;
}
.page-hero h1 { font-size: 40px; font-weight: 800; letter-spacing: 1px; }
.page-hero p { margin-top: 12px; font-size: 15.5px; color: rgba(255,255,255,.85); max-width: 720px; }
.page-hero__visual { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 300px; opacity: .9; }
.page-hero__visual img { width: 100%; }

/* 面包屑 */
.crumb { padding: 16px 0; font-size: 13.5px; color: var(--text-muted); }
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--primary); }
.crumb .cur { color: var(--primary); }

/* ---------- 15. 列表页 ---------- */
.page-body { padding: 20px 0 80px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.news-item {
  display: flex; gap: 22px; align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  transition: all .3s ease;
}
.news-item:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.news-item__img { width: 220px; height: 132px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.news-item__img img { width: 100%; height: 100%; object-fit: cover; }
.news-item__body { flex: 1; min-width: 0; }
.news-item__body h3 { font-size: 17px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-item__body h3 a:hover { color: var(--primary); }
.news-item__body p { font-size: 13.5px; color: var(--text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item__meta { margin-top: 10px; display: flex; gap: 18px; font-size: 12.5px; color: var(--text-muted); }

/* 服务页 · 流程步骤条 */
.svc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-step {
  background: rgba(7, 108, 224, .04);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: all .25s ease;
}
.svc-step:hover { background: rgba(7, 108, 224, .08); transform: translateY(-3px); }
.svc-step__num { display: block; font-size: 30px; font-weight: 700; color: var(--primary); opacity: .9; margin-bottom: 12px; }
.svc-step h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text-main); }
.svc-step p { font-size: 13.5px; color: var(--text-sub); line-height: 1.7; margin: 0; }

/* 服务页 · 常见问题折叠 */
.svc-faq { display: flex; flex-direction: column; gap: 12px; max-width: 980px; margin: 0 auto; }
.svc-faq--grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; max-width: none; }
@media (max-width: 1100px) { .svc-faq--grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .svc-faq--grid { grid-template-columns: 1fr; } }
.svc-faq__item { border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.svc-faq__item summary {
  list-style: none; cursor: pointer;
  padding: 18px 24px;
  font-size: 15px; font-weight: 600; color: var(--text-main);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: color .2s ease;
}
.svc-faq__item summary::-webkit-details-marker { display: none; }
.svc-faq__item summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--primary); transition: transform .25s ease; }
.svc-faq__item[open] summary { color: var(--primary); }
.svc-faq__item[open] summary::after { transform: rotate(45deg); }
.svc-faq__item p { padding: 0 24px 20px; margin: 0; color: var(--text-sub); font-size: 14px; line-height: 1.85; }
@media (max-width: 900px) { .svc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc-steps { grid-template-columns: 1fr; } }

/* 分页 */
.pagenav { margin-top: 46px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.pagenav a, .pagenav span {
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px; color: #444;
  background: #fff;
  transition: all .25s ease;
}
.pagenav a:hover { border-color: var(--primary); color: var(--primary); }
.pagenav .active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 资源下载 · 行式列表 */
.dl-list { display: flex; flex-direction: column; }
.dl-row {
  display: flex; align-items: center; gap: 22px;
  padding: 26px 10px;
  border-bottom: 1px solid var(--border);
  transition: all .25s ease;
}
.dl-row:first-child { border-top: 1px solid var(--border); }
.dl-row:hover { background: rgba(7, 108, 224, .04); padding-left: 18px; }
.dl-row__icon {
  width: 52px; height: 52px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(7,108,224,.10), rgba(18,184,165,.10));
  color: var(--primary);
}
.dl-row__icon svg { width: 26px; height: 26px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.dl-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.dl-row__title { font-size: 18px; font-weight: 600; color: var(--text-main); }
.dl-row:hover .dl-row__title { color: var(--primary); }
.dl-row__desc { font-size: 13.5px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-row__meta { font-size: 12.5px; color: var(--text-muted); }
.dl-row__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--primary); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--primary);
  transition: all .25s ease;
}
.dl-row__btn svg { width: 16px; height: 16px; fill: currentColor; }
.dl-row:hover .dl-row__btn { background: var(--primary); color: #fff; }
@media (max-width: 640px) {
  .dl-row { flex-wrap: wrap; gap: 14px; padding: 20px 4px; }
  .dl-row__icon { width: 44px; height: 44px; }
  .dl-row__desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .dl-row__btn { padding: 8px 16px; font-size: 13px; }
}

/* ---------- 16. 内容详情页 ---------- */
.detail-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 42px 48px;
}
.detail-head { text-align: center; padding-bottom: 26px; border-bottom: 1px solid var(--border); margin-bottom: 30px; }
.detail-head h1 { font-size: 28px; }
.detail-head .detail-meta { margin-top: 14px; display: flex; justify-content: center; gap: 22px; font-size: 13px; color: var(--text-muted); }
.detail-hero { margin-bottom: 30px; border-radius: var(--radius); overflow: hidden; }
.detail-hero img { width: 100%; max-height: 520px; object-fit: cover; }
.content { font-size: 15px; line-height: 2; color: #333; }
.content h2, .content h3, .content h4 { margin: 26px 0 14px; }
.content h2 { font-size: 22px; }
.content h3 { font-size: 19px; }
.content p { margin: 12px 0; }
.content img { border-radius: 10px; margin: 14px auto; }
.content ul { list-style: disc; padding-left: 24px; margin: 12px 0; }
.content ol { list-style: decimal; padding-left: 24px; margin: 12px 0; }
.content li { margin: 6px 0; }
.content blockquote {
  border-left: 4px solid var(--primary);
  background: var(--primary-light);
  padding: 14px 20px;
  border-radius: 0 10px 10px 0;
  margin: 16px 0;
  color: #444;
}
.content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.content th, .content td { border: 1px solid var(--border); padding: 10px 14px; font-size: 14px; }
.content th { background: var(--bg-light); font-weight: 700; }
.content table.price-table { table-layout: fixed; margin: 22px 0; }
.content table.price-table th { background: #076ce0; color: #fff; text-align: left; }
.content table.price-table td { background: #fff; }
.content table.price-table tbody tr:nth-child(even) td { background: #f7fafc; }
.content table.price-table td:first-child { font-weight: 600; color: #1f2937; background: #f3f6f9; }
.content table.price-table tbody tr:nth-child(even) td:first-child { background: #edf1f5; }
.prev-next {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 20px;
  font-size: 14px; color: var(--text-sub);
}
.prev-next a:hover { color: var(--primary); }
.prev-next .pn-empty { color: #c3c8d2; }

/* ---------- 17. 侧栏 ---------- */
.page-layout { display: grid; grid-template-columns: 1fr 300px; gap: 34px; align-items: start; }
.side-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
.side-card + .side-card { margin-top: 22px; }
.side-card h4 { font-size: 16px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--primary-light); position: relative; }
.side-card h4::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 36px; height: 2px; background: var(--primary); }
.side-card ul li { margin-bottom: 9px; font-size: 14px; }
.side-card ul a { color: var(--text-sub); }
.side-card ul a:hover { color: var(--primary); }
.side-card .side-phone { font-size: 24px; font-weight: 800; color: var(--primary); }
.side-card .side-tip { font-size: 13px; color: var(--text-muted); }

/* 侧栏服务菜单 */
.sortnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.sortnav a {
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13.5px; color: #555;
  background: #fff;
  transition: all .25s ease;
}
.sortnav a:hover { color: var(--primary); border-color: var(--primary); }
.sortnav a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- 18. 表单 ---------- */
.form-panel {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px; font-family: inherit;
  background: #fafbfd;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(7,108,224,.12);
  background: #fff;
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-submit {
  background: var(--primary); color: #fff;
  border: 0; border-radius: 999px;
  padding: 13px 44px; font-size: 15px; font-weight: 600;
  transition: all .28s ease;
}
.form-submit:hover { background: var(--primary-dark); }
.form-tip { font-size: 13px; color: var(--text-muted); margin-top: 12px; }

/* 搜索框 */
.search-box { display: flex; }
.search-box input {
  flex: 1;
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-family: inherit;
}
.search-box input:focus { outline: none; border-color: var(--primary); }
.search-box button {
  border: 0; border-radius: 0 999px 999px 0;
  background: var(--primary); color: #fff;
  padding: 0 26px;
  font-size: 14px; font-weight: 600;
  transition: background .25s;
}
.search-box button:hover { background: var(--primary-dark); }

/* ---------- 19. 404 ---------- */
.error-wrap { text-align: center; padding: 120px 0; }
.error-wrap .error-code {
  font-size: 130px; font-weight: 800; line-height: 1;
  background: linear-gradient(115deg, #076ce0, #3aa1ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-wrap h2 { font-size: 26px; margin: 18px 0 10px; }
.error-wrap p { color: var(--text-sub); margin-bottom: 30px; }

/* ---------- 20. 套餐定价卡 ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.plan-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: all .3s ease;
  display: flex; flex-direction: column;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.plan-card.is-hot { border: 2px solid var(--primary); position: relative; }
.plan-card__head { padding: 30px 30px 22px; background: var(--bg-light); color: #22304d; }
.plan-card.is-hot .plan-card__head { background: var(--primary); color: #fff; }
.plan-card.is-hot .plan-card__head h3, .plan-card.is-hot .plan-card__head .plan-sub { color: #fff; }
.plan-card__head h3 { font-size: 19px; margin-bottom: 6px; color: #22304d; }
.plan-card__head .plan-sub { font-size: 13px; opacity: .8; }
.plan-card__price { margin-top: 14px; }
.plan-card__price b { font-size: 36px; font-weight: 800; color: var(--primary); }
.plan-card.is-hot .plan-card__price b { color: #fff; }
.plan-card__price span { font-size: 13px; color: var(--text-muted); }
.plan-card.is-hot .plan-card__price span { color: rgba(255,255,255,.8); }
.plan-card__body { padding: 24px 30px; flex: 1; }
.plan-card__body li {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 12px;
  font-size: 14px; color: #444;
}
.plan-card__body li svg { width: 18px; height: 18px; fill: var(--primary); flex-shrink: 0; margin-top: 3px; }
.plan-card__foot { padding: 0 30px 30px; }
.plan-tag { position: absolute; top: -12px; right: 22px; background: #ff5a5a; color: #fff; font-size: 12px; padding: 4px 14px; border-radius: 999px; font-weight: 600; }

/* ---------- 21. 响应式 ---------- */
/* 工具类 */
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 20px; }
.mb-4 { margin-bottom: 32px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 20px; }
.mt-4 { margin-top: 32px; }
.w-100 { width: 100%; }
.hidden { display: none !important; }
.fade-in { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.is-revealed { opacity: 1; transform: translateY(0); }
@media (max-width: 1024px) {
  .news-list { grid-template-columns: 1fr; }
  .service-strip { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-copy h2 { font-size: 36px; }
  .sutun-footer__main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .sutun-burger { display: flex; }
  .sutun-nav {
    position: absolute; top: 76px; left: 0; right: 0;
    background: #fff;
    flex-direction: column; align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
  }
  .sutun-nav.is-open { max-height: calc(100vh - 76px); overflow-y: auto; }
  .sutun-nav .nav-item { width: 100%; }
  .sutun-nav .nav-link { height: auto; padding: 15px 24px; border-top: 1px solid #f2f4f8; }
  .sutun-nav .nav-link::after { display: none; }
  .sutun-nav .nav-link.active { background: var(--primary-light); }
  .sutun-nav .nav-drop {
    position: static; transform: none;
    opacity: 1; visibility: visible;
    min-width: 0;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 0;
    display: none;
    transition: none;
  }
  .sutun-nav .nav-item.is-open .nav-drop { display: block; }
  .sutun-nav .nav-sublink { padding: 12px 24px 12px 40px; border-top: 1px solid #f7f8fa; font-size: 14.5px; background: #fafbfd; }
  .sutun-nav .nav-caret { margin-left: 8px; }
  .sutun-nav .nav-item.is-open .nav-caret { transform: rotate(225deg) translate(-1px, -1px); }
  .sutun-nav .nav-cta { margin: 14px 24px 20px; text-align: center; }
  .sutun-nav .nav-lang, .sutun-nav .nav-search { margin: 4px 24px 22px; }
  .sutun-nav .nav-lang, .sutun-nav .nav-search { width: auto; }
  .sutun-nav .nav-search { margin-bottom: 0; }
  .sutun-nav .search-pop { position: static; width: 100%; margin-top: 10px; box-shadow: none; }
  .sutun-header .container { height: 76px; }
  .sutun-logo img { height: 42px; }
  .sutun-logo .logo-txt strong { font-size: 20px; }

  .sutun-hero { height: auto; }
  .hero-slide .container { flex-direction: column; text-align: center; padding: 44px 20px; }
  .hero-copy { max-width: 100%; }
  .hero-copy h2 { font-size: 30px; }
  .hero-actions { justify-content: center; }
  .hero-visual { width: 74%; max-width: 400px; margin-top: 10px; }
  .hero-arrow { display: none; }

  .split { grid-template-columns: 1fr; gap: 36px; }
  .split__media .float-badge { left: 8px; }
  .page-hero { padding: 56px 0; }
  .page-hero h1 { font-size: 30px; }
  .page-hero__visual { display: none; }
  .page-layout { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; text-align: center; padding: 36px 26px; }
  .detail-panel { padding: 26px 20px; }
}

@media (max-width: 640px) {
  .service-strip { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .adv-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .section-title { font-size: 26px; }
  .section-head { margin-bottom: 36px; }
  .news-item { flex-direction: column; align-items: flex-start; }
  .news-item__img { width: 100%; height: 180px; }
  .sutun-footer__main { grid-template-columns: 1fr; gap: 30px; }
  .sutun-footer__bottom .container { justify-content: center; text-align: center; }
  .sutun-topbar .topbar-right span:nth-child(2) { display: none; }
  body { padding-bottom: 0; }
  .mobile-bar { display: flex; }
  body.has-mobile-bar { padding-bottom: 58px; }
  .hero-copy h2 { font-size: 26px; }
  .btn { padding: 10px 24px; font-size: 14px; }
  .pagenav { gap: 6px; }
  .pagenav a, .pagenav span { min-width: 34px; height: 34px; font-size: 13px; }
}

/* ---------- 页面级补充（导航重构新增） ---------- */
.page-hero--sm { padding: 64px 0; }
.detail-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.side-links { list-style: none; padding: 0; margin: 0; }
.side-links li { border-bottom: 1px dashed var(--border); }
.side-links li:last-child { border-bottom: 0; }
.side-links a {
  display: block; padding: 10px 2px;
  color: var(--text); font-size: 14px;
  transition: color .18s ease, padding-left .18s ease;
}
.side-links a:hover { color: var(--primary); padding-left: 6px; }

/* 打印与无障碍 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- 22. GEO 频道补充模块 ---------- */
.geo-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.geo-vs__card { border-radius: 16px; padding: 30px 30px 34px; }
.geo-vs__card--seo { background: #f3f6f9; border: 1px solid var(--border); }
.geo-vs__card--geo { background: #0f766e; color: #fff; }
.geo-vs__card h3 { font-size: 20px; margin-bottom: 16px; }
.geo-vs__card--seo h3 { color: #64748b; }
.geo-vs__card--geo h3 { color: #fff; }
.geo-vs__card ul { list-style: none; margin: 0; padding: 0; }
.geo-vs__card li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 14.5px; line-height: 1.7; }
.geo-vs__card--seo li { color: #64748b; }
.geo-vs__card--geo li { color: rgba(255,255,255,.92); }
.geo-vs__card li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; }
.geo-vs__card--seo li svg { fill: #c3c8d2; }
.geo-vs__card--geo li svg { fill: #5eead4; }
.geo-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.geo-step { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px 22px; position: relative; }
.geo-step__num { font-size: 30px; font-weight: 800; color: #0f766e; line-height: 1; margin-bottom: 10px; }
.geo-step h4 { font-size: 16px; margin-bottom: 8px; }
.geo-step p { font-size: 13.5px; color: var(--text-sub); line-height: 1.75; margin: 0; }
.geo-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.geo-feat { background: #f7fafc; border: 1px solid var(--border); border-radius: 14px; padding: 26px 24px; }
.geo-feat__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #0f766e; margin-bottom: 16px; }
.geo-feat__icon svg { width: 22px; height: 22px; fill: #fff; }
.geo-feat h4 { font-size: 16px; margin-bottom: 8px; }
.geo-feat p { font-size: 13.5px; color: var(--text-sub); line-height: 1.75; margin: 0; }
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px 26px; margin-bottom: 14px; }
.faq-item h4 { font-size: 15.5px; margin-bottom: 8px; }
.faq-item p { font-size: 14px; color: var(--text-sub); line-height: 1.8; margin: 0; }
@media (max-width: 900px) {
  .geo-vs { grid-template-columns: 1fr; }
  .geo-steps { grid-template-columns: 1fr 1fr; }
  .geo-feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .geo-steps { grid-template-columns: 1fr; }
  .geo-feats { grid-template-columns: 1fr; }
}

/* ---------- 23. 作品网格（案例/模板列表） ---------- */
.works-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.works-card {
  display: block; background: #fff;
  border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; transition: all .3s ease;
}
.works-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.works-card__img { position: relative; overflow: hidden; aspect-ratio: 2 / 3; background: var(--bg-light); }
.works-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.works-card:hover .works-card__img img { transform: scale(1.05); }
.works-card__title {
  display: block; padding: 14px 12px 16px;
  text-align: center; font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.works-card:hover .works-card__title { color: var(--primary); }
@media (max-width: 1280px) {
  .works-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .works-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .works-card__title { font-size: 14px; padding: 12px 8px 14px; }
}

/* ---------- 24. 视频案例 ---------- */
.content video { width: 100%; max-height: 520px; border-radius: 12px; margin: 18px 0; background: #0b1220; }
.content .video-wrap { position: relative; }

/* ---------- 25. 语言切换器 ---------- */
.nav-lang { position: relative; margin-left: 12px; }
.lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 6px; border: 0; background: transparent; color: #333;
  font-size: 20px; line-height: 1; cursor: pointer; transition: all .25s ease;
}
.lang-btn:hover { opacity: .75; }
.lang-icon { width: 18px; height: 18px; }

/* 搜索按钮（与语言按钮统一图标型样式） */
.nav-search { position: relative; margin-left: 10px; }
.nav-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border: 0; background: transparent; color: #333;
  cursor: pointer; transition: color .25s ease;
}
.nav-icon-btn:hover { color: var(--primary); }
.nav-icon { width: 18px; height: 18px; }

.search-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 300px; padding: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(18, 22, 31, .14);
  z-index: 70;
}
.search-pop[hidden] { display: none; }
.search-pop form { display: flex; align-items: center; gap: 8px; margin: 0; }
.search-pop input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 14px; color: #2a3040; outline: none;
  transition: border-color .2s ease;
}
.search-pop input:focus { border-color: var(--primary); }
.search-pop button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 999px;
  border: 1px solid transparent; background: var(--primary); color: #fff;
  cursor: pointer; transition: all .2s ease;
}
.search-pop button[type="submit"]:hover { background: var(--primary-dark); }
.lang-drop {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 150px; padding: 8px 0; margin: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(18, 22, 31, .14);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 70; list-style: none;
}
.nav-lang.is-open .lang-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-drop li { margin: 0; }
.lang-drop button {
  display: block; width: 100%; text-align: left;
  padding: 9px 18px; background: none; border: 0;
  font-size: 14px; color: #3a4152; cursor: pointer; transition: all .18s ease;
}
.lang-drop button:hover { color: var(--primary); background: var(--primary-light); }

/* ============================================================
   套餐页（营销包月 4 档）：全宽分区排版，无卡片式区块
   ============================================================ */
.pkg-hero {
  position: relative; overflow: hidden;
  height: 560px; background: var(--primary);
}
.pkg-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.pkg-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10, 28, 60, .72) 0%, rgba(10, 28, 60, .38) 42%, rgba(10, 28, 60, .05) 72%, rgba(10, 28, 60, 0) 100%);
}
.pkg-hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.pkg-hero__eyebrow {
  display: inline-block; padding: 7px 16px; margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  color: #fff; font-size: 13px; letter-spacing: 2px;
}
.pkg-hero__title {
  margin: 0 0 12px; color: #fff;
  font-size: clamp(38px, 4.6vw, 60px); font-weight: 800; letter-spacing: 1px;
}
.pkg-hero__lead {
  margin: 0 0 26px; color: rgba(255, 255, 255, .92);
  font-size: clamp(16px, 1.6vw, 20px); font-weight: 500;
}
.pkg-hero__price { display: flex; align-items: baseline; gap: 8px; color: #fff; }
.pkg-hero__num { font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: 1px; }
.pkg-hero__unit { font-size: 18px; color: rgba(255, 255, 255, .85); }
.pkg-hero__meta { margin: 10px 0 28px; color: rgba(255, 255, 255, .78); font-size: 14.5px; letter-spacing: .5px; }

.pkg-sec { padding: 84px 0; background: #fff; }
.pkg-sec--alt { background: #f6f9fd; }
.pkg-sec__grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 64px;
}
.pkg-sec__side { padding-top: 6px; }
.pkg-sec__no {
  display: block; margin-bottom: 6px;
  font-size: 56px; font-weight: 800; line-height: 1;
  color: var(--primary); opacity: .16;
}
.pkg-sec__title { margin: 0 0 8px; font-size: 26px; font-weight: 700; color: #222; }
.pkg-sec__en { display: block; font-size: 12.5px; letter-spacing: 3px; text-transform: uppercase; color: #8a92a6; }
.pkg-copy { font-size: 16.5px; line-height: 2.1; color: #3a4152; padding: 12px 0; }
.pkg-copy strong { color: var(--primary); }

.pkg-list { list-style: none; margin: 0; padding: 0; }
.pkg-list__item {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 26px 4px; border-bottom: 1px solid #e6ebf4;
}
.pkg-list__item:first-child { padding-top: 6px; }
.pkg-list__item:last-child { border-bottom: 0; }
.pkg-list__icon {
  flex: 0 0 46px; width: 46px; height: 46px; margin-top: 2px;
  padding: 11px; border-radius: 14px;
  background: var(--primary-light); color: var(--primary);
}
.pkg-list__body strong { display: block; font-size: 17px; color: #222; margin-bottom: 6px; }
.pkg-list__body span { font-size: 15px; color: #6b7488; line-height: 1.8; }

.pkg-steps { list-style: none; margin: 0; padding: 0; }
.pkg-steps__item {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 24px 4px; border-bottom: 1px solid #e6ebf4;
}
.pkg-steps__item:first-child { padding-top: 6px; }
.pkg-steps__item:last-child { border-bottom: 0; }
.pkg-steps__num {
  flex: 0 0 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--primary);
  border-radius: 50%; background: var(--primary-light);
}
.pkg-steps__body { padding-top: 3px; }
.pkg-steps__body strong { display: block; font-size: 17.5px; color: #222; margin-bottom: 7px; }
.pkg-steps__body p { margin: 0; font-size: 15px; color: #6b7488; line-height: 1.9; }

.pkg-note { padding: 56px 0; background: var(--primary-light); }
.pkg-note__inner { max-width: 960px; }
.pkg-note__inner h3 { margin: 0 0 14px; font-size: 22px; font-weight: 700; color: var(--primary); }
.pkg-note__inner p { margin: 0; font-size: 16px; line-height: 2; color: #3a4152; }
.pkg-note__inner strong { color: var(--primary); }
.pkg-note--geo { background: linear-gradient(90deg, #eef4ff, #e4f0fe); }

.pkg-slogan { padding: 72px 0; background: #fff; text-align: center; }
.pkg-slogan__text {
  margin: 0; font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; color: #2a3040;
}
.pkg-slogan__text strong { color: var(--primary); font-weight: 800; }

.pkg-cta { padding: 0 0 84px; background: #fff; }

@media (max-width: 900px) {
  .pkg-hero { height: 480px; }
  .pkg-hero__inner { padding: 0 24px; }
  .pkg-sec { padding: 56px 0; }
  .pkg-sec__grid { grid-template-columns: 1fr; gap: 32px; }
  .pkg-sec__no { font-size: 42px; }
  .pkg-slogan { padding: 52px 0; }
  .pkg-cta { padding: 0 0 56px; }
}
@media (max-width: 640px) {
  .pkg-hero { height: 440px; }
  .pkg-list__item, .pkg-steps__item { gap: 14px; padding: 20px 0; }
  .pkg-list__icon { flex-basis: 40px; width: 40px; height: 40px; padding: 9px; }
}


/* ============================================================
   首页 2026 新版 · 十屏结构
   ============================================================ */

/* ---------- 01 首屏 Hero ---------- */
.home-hero {
  position: relative;
  padding: 96px 0 84px;
  background:
    radial-gradient(1100px 480px at 88% -10%, rgba(7,108,224,.14), transparent 60%),
    radial-gradient(800px 420px at -8% 110%, rgba(255,154,60,.10), transparent 55%),
    linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
  overflow: hidden;
}
.home-hero__inner { display: flex; align-items: center; gap: 64px; }
.home-hero__copy { flex: 1 1 52%; }
.hero-chip {
  display: inline-block;
  padding: 7px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--primary);
  background: rgba(7,108,224,.08);
  border: 1px solid rgba(7,108,224,.22);
  border-radius: 999px;
  letter-spacing: .5px;
  margin-bottom: 22px;
}
.hero-title {
  font-size: 46px; line-height: 1.18; font-weight: 800;
  color: #14203a;
  letter-spacing: .5px;
  margin-bottom: 18px;
}
.hero-sub {
  font-size: 17px; font-weight: 600; color: #3a4a68;
  margin-bottom: 14px; letter-spacing: .3px;
}
.hero-aux { font-size: 15.5px; color: var(--text-sub); line-height: 1.7; margin-bottom: 30px; }
.btn--ghost-dark {
  background: transparent; color: #22304d;
  border: 1.5px solid rgba(34,48,77,.45);
}
.btn--ghost-dark:hover { background: #22304d; color: #fff; border-color: #22304d; }
.hero-proof {
  display: flex; gap: 34px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid rgba(20,32,58,.10);
}
.hero-proof span { font-size: 13px; color: var(--text-sub); }
.hero-proof b { display: block; font-size: 22px; color: #14203a; font-weight: 800; line-height: 1.3; }
.home-hero__media { flex: 1 1 48%; position: relative; }
.home-hero__media img {
  width: 100%; border-radius: 20px;
  box-shadow: 0 30px 60px rgba(18,34,64,.18);
  display: block;
}
.hero-media__badge {
  position: absolute; left: -28px; bottom: 34px;
  background: #fff; border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 16px 36px rgba(18,34,64,.16);
  border: 1px solid var(--border);
}
.hero-media__badge span { display: block; font-size: 12.5px; color: var(--text-sub); margin-bottom: 3px; }
.hero-media__badge b { font-size: 16px; color: var(--primary); font-weight: 700; }

/* ---------- 02 客户痛点 ---------- */
.pain-section { background: #fff; padding: 84px 0 90px; }
.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pain-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px;
  background: #fff;
  transition: transform .28s ease, box-shadow .28s ease;
}
.pain-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(18,34,64,.10); }
.pain-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--primary-light); color: var(--primary);
  font-size: 15px; font-weight: 800;
  margin-bottom: 18px;
}
.pain-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #14203a; }
.pain-card p { font-size: 14px; color: var(--text-sub); line-height: 1.75; }
.pain-slogan {
  margin-top: 46px; text-align: center;
  font-size: 24px; font-weight: 800; color: var(--primary);
  letter-spacing: .5px;
}

/* ---------- 03 核心服务 6 卡 ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-item {
  display: flex; flex-direction: column;
  padding: 30px 26px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.svc-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(18,34,64,.09); border-color: rgba(7,108,224,.35); }
.svc-item__icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
  border-radius: 13px; margin-bottom: 18px;
}
.svc-item__icon svg { width: 24px; height: 24px; fill: currentColor; }
.svc-item h3 { font-size: 18px; font-weight: 700; color: #14203a; margin-bottom: 9px; }
.svc-item p { font-size: 13.5px; color: var(--text-sub); line-height: 1.7; margin-bottom: 16px; }
.svc-more { font-size: 13.5px; font-weight: 600; color: var(--primary); margin-top: auto; }

/* ---------- 04 营销包月（深色底） ---------- */
.plan-section { background: var(--bg-dark); }
.plan-section .section-title { color: #fff; }
.plan-section .section-desc { color: rgba(255,255,255,.72); }

/* ---------- 05 作品案例 瀑布流 ---------- */
.work-filter {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 40px;
}
.work-filter button {
  padding: 8px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff; color: #44506a;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all .22s ease;
}
.work-filter button:hover { border-color: var(--primary); color: var(--primary); }
.work-filter button.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.work-masonry { columns: 5 240px; column-gap: 18px; }
.work-item {
  break-inside: avoid; margin: 0 0 18px;
  border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--border);
  transition: transform .28s ease, box-shadow .28s ease;
}
.work-item:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(18,34,64,.12); }
.work-item__img { display: block; overflow: hidden; }
.work-item__img img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.work-item:nth-child(3n) .work-item__img img { aspect-ratio: 3 / 4; }
.work-item:nth-child(5n) .work-item__img img { aspect-ratio: 2 / 3; }
.work-item figcaption { padding: 14px 16px 16px; }
.work-item figcaption h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.work-item figcaption h3 a { color: #14203a; }
.work-item figcaption h3 a:hover { color: var(--primary); }
.work-tag { font-size: 11.5px; letter-spacing: .4px; color: #8a94a8; font-weight: 600; }

/* ---------- 06 对比模块 ---------- */
.compare-section { background: var(--bg-light); }
.compare-table-wrap { max-width: 980px; margin: 0 auto; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(18,34,64,.08); }
.compare-table th, .compare-table td { padding: 14px 16px; text-align: center; font-size: 14.5px; }
.compare-table thead th { background: #f4f7fb; color: #22304d; font-weight: 700; font-size: 15px; }
.compare-table thead th.cmp-us { background: var(--primary); color: #fff; }
.compare-table tbody td { border-top: 1px solid #eef1f6; color: #44506a; }
.compare-table tbody td:first-child { text-align: left; font-weight: 600; color: #22304d; }
.compare-table tbody td.cmp-us { background: rgba(7,108,224,.06); color: var(--primary); font-weight: 700; }
.compare-table tbody tr:last-child td.cmp-us b { color: var(--primary); }
.compare-table .ok { color: #16a34a; font-style: normal; font-weight: 700; }
.compare-table .no { color: #b4bccb; font-style: normal; }
.compare-table .half { color: #f59e0b; font-style: normal; font-size: 13px; }

/* ---------- 07 服务流程 ---------- */
.process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.process-step { position: relative; text-align: center; padding: 34px 18px 26px; }
.process-step::after {
  content: ""; position: absolute; top: 52px; right: -18px;
  width: 22px; height: 2px; background: #d8e0ec;
}
.process-step:last-child::after { display: none; }
.process-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 19px; font-weight: 800;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(7,108,224,.28);
}
.process-step h3 { font-size: 17px; font-weight: 700; color: #14203a; margin-bottom: 8px; }
.process-step p { font-size: 13.5px; color: var(--text-sub); line-height: 1.7; }

/* ---------- 08 信任模块 ---------- */
.trust-section { background: var(--bg-dark); }
.trust-wrap { display: flex; align-items: center; gap: 60px; }
.trust-copy { flex: 1 1 46%; }
.trust-copy h2 { font-size: 32px; font-weight: 800; color: #fff; margin: 16px 0 18px; line-height: 1.3; }
.trust-copy p { font-size: 15.5px; color: rgba(255,255,255,.75); line-height: 1.9; }
.trust-facts { flex: 1 1 54%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.trust-inline { margin-top: 56px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 40px; }
.trust-inline h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 28px; line-height: 1.5; }
.trust-inline .trust-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust-inline .trust-fact { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.trust-inline .trust-fact b { font-size: 26px; font-weight: 900; color: #fff; line-height: 1.1; }
.trust-inline .trust-fact span { font-size: 13px; color: #9299A6; line-height: 1.5; }
@media (max-width: 768px) {
  .trust-inline .trust-facts { grid-template-columns: repeat(2, 1fr); }
}
.trust-fact {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 22px 20px;
}
.trust-fact b { display: block; font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.trust-fact span { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.7; }

/* ---------- 09 内容中心 ---------- */
.read-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.read-card {
  display: flex; flex-direction: column;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .28s ease, box-shadow .28s ease;
}
.read-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(18,34,64,.10); }
.read-card__cat {
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  margin-bottom: 14px;
}
.read-card h3 { font-size: 16px; font-weight: 700; color: #14203a; line-height: 1.55; margin-bottom: 10px; }
.read-card h3:hover { color: var(--primary); }
.read-card p { font-size: 13.5px; color: var(--text-sub); line-height: 1.7; margin-bottom: 16px; }
.read-more { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--primary); }

/* ---------- 10 CTA ---------- */
.home-cta { position: relative; overflow: hidden; }
.home-cta__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.home-cta__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,20,44,.72), rgba(8,20,44,.82));
}
.home-cta__inner {
  position: relative; z-index: 1;
  text-align: center;
  padding: 104px 20px;
}
.home-cta__inner h2 { font-size: 38px; font-weight: 800; color: #fff; margin-bottom: 16px; }
.home-cta__inner p { font-size: 16.5px; color: rgba(255,255,255,.82); margin-bottom: 32px; }
.home-cta .hero-actions { justify-content: center; margin-bottom: 34px; }
.cta-qr {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 18px 20px 14px;
}
.cta-qr img { width: 116px; height: 116px; border-radius: 10px; display: block; }
.cta-qr span { font-size: 12.5px; color: rgba(255,255,255,.85); }

/* ---------- 首页响应式 ---------- */
@media (max-width: 1100px) {
  .home-hero__inner { gap: 36px; }
  .hero-title { font-size: 38px; }
  .hero-media__badge { left: -10px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .home-hero__inner { flex-direction: column; }
  .home-hero__copy { text-align: center; }
  .hero-proof { justify-content: center; }
  .hero-actions { justify-content: center; }
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .read-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-step::after { display: none; }
  .trust-wrap { flex-direction: column; gap: 36px; text-align: center; }
  .trust-facts { width: 100%; }
}
@media (max-width: 640px) {
  .home-hero { padding: 64px 0 56px; }
  .hero-title { font-size: 30px; }
  .hero-proof { gap: 18px; flex-wrap: wrap; }
  .pain-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .read-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .trust-facts { grid-template-columns: 1fr; }
  .home-cta__inner { padding: 72px 20px; }
  .home-cta__inner h2 { font-size: 28px; }
}


/* ============================================================
   案例作品频道页 · 创意工作室风（黑白大留白 + 荧光绿/橙点缀）
   ============================================================ */
.wk-hero {
  background: #f6f6f3;
  padding: 108px 0 96px;
  min-height: 560px;
  display: flex; align-items: center;
}
.wk-hero__inner { display: flex; align-items: center; gap: 64px; }
.wk-hero__copy { flex: 1 1 56%; }
.wk-eyebrow {
  display: inline-block;
  background: #C6FF4A;
  color: #0c0c0c;
  font-size: 12px; font-weight: 800;
  letter-spacing: 2.5px;
  padding: 7px 14px;
  border-radius: 2px;
  margin-bottom: 26px;
}
.wk-hero__title {
  font-size: clamp(56px, 8vw, 92px);
  line-height: 1.04;
  font-weight: 900;
  color: #0c0c0c;
  letter-spacing: -1px;
  margin-bottom: 22px;
}
.wk-hero__sub {
  font-size: 21px; font-weight: 700;
  color: #111;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.wk-hero__desc {
  font-size: 16px; line-height: 1.8;
  color: #6a6a63;
  max-width: 480px;
  margin-bottom: 30px;
}
.wk-hero__meta {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: #8a8a82;
  letter-spacing: .6px;
}
.wk-dot { width: 9px; height: 9px; background: #FF6A3D; border-radius: 50%; display: inline-block; }
.wk-hero__visual { flex: 1 1 44%; position: relative; text-align: right; }
.wk-hero__years {
  font-size: clamp(64px, 7vw, 108px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(12,12,12,.22);
  line-height: .95;
  letter-spacing: 2px;
  display: inline-block;
  text-align: left;
  margin-bottom: 30px;
}
.wk-hero__stack { position: relative; height: 330px; }
.wk-hero__stack img {
  position: absolute;
  width: 62%; aspect-ratio: 4/3; object-fit: cover;
  background: #fff; padding: 9px; box-shadow: 0 22px 48px rgba(0,0,0,.14);
}
.wk-hero__stack img:nth-child(1) { left: 2%;  top: 0;   transform: rotate(-3.5deg); }
.wk-hero__stack img:nth-child(2) { left: 30%; top: 56px; transform: rotate(2deg); z-index: 2; }
.wk-hero__stack img:nth-child(3) { right: 0;  top: 128px; transform: rotate(-1.5deg); width: 56%; z-index: 1; }

/* ---------- 案例分类 ---------- */
.wk-cats { background: #fff; padding: 92px 0 96px; }
.wk-cats__head { display: flex; align-items: baseline; gap: 22px; margin-bottom: 46px; }
.wk-cats__head .wk-eyebrow { margin-bottom: 0; }
.wk-cats__title { font-size: 34px; font-weight: 800; color: #0c0c0c; letter-spacing: .5px; }
.wk-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid #e4e4dd; border-left: 1px solid #e4e4dd; }
.wk-cat {
  padding: 34px 30px 30px;
  border-right: 1px solid #e4e4dd; border-bottom: 1px solid #e4e4dd;
  background: #fff;
  transition: background .25s ease, color .25s ease;
}
.wk-cat:hover { background: #C6FF4A; }
.wk-cat__no { font-size: 15px; font-weight: 800; color: #FF6A3D; letter-spacing: 1px; }
.wk-cat h3 { font-size: 22px; font-weight: 800; color: #0c0c0c; margin: 12px 0 4px; }
.wk-cat h3 em { display: block; font-size: 12.5px; font-style: normal; font-weight: 600; color: #8a8a82; letter-spacing: 2px; margin-top: 2px; }
.wk-cat p { font-size: 14px; color: #6a6a63; }
.wk-cat:hover p { color: #3a3a34; }

/* ---------- Featured Project ---------- */
.wk-featured { background: #0c0c0c; color: #fff; padding: 96px 0 100px; }
.wk-featured__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 40px;
}
.wk-featured__head .wk-eyebrow { margin-bottom: 0; }
.wk-featured__tags { font-size: 13px; letter-spacing: 2px; color: rgba(255,255,255,.55); font-weight: 600; }
.wk-featured__main { display: block; max-width: 82%; margin: 0 auto; }
.wk-featured__img { position: relative; overflow: hidden; }
.wk-featured__img img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.wk-featured__main:hover .wk-featured__img img { transform: scale(1.04); }
.wk-featured__go {
  position: absolute; right: 22px; bottom: 22px;
  background: #C6FF4A; color: #0c0c0c;
  font-size: 13px; font-weight: 800; letter-spacing: 1px;
  padding: 11px 20px; border-radius: 2px;
}
.wk-featured__info { padding: 30px 6px 0; }
.wk-featured__info h2 { font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.wk-featured__info p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.62); max-width: 640px; margin-bottom: 20px; }
.wk-featured__link { font-size: 14px; font-weight: 700; color: #C6FF4A; letter-spacing: 1px; }

/* ---------- 所有作品：两列不规则瀑布流 ---------- */
.wk-grid-section { background: #f6f6f3; padding: 92px 0 96px; }
.wk-grid__head { display: flex; align-items: baseline; gap: 22px; margin-bottom: 46px; }
.wk-grid__head .wk-eyebrow { margin-bottom: 0; }
.wk-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 22px; align-items: start; }
.wk-card { display: block; background: #fff; }
.wk-card__img { position: relative; overflow: hidden; }
.wk-card__img img {
  width: 100%; display: block; object-fit: cover;
  transition: transform .5s ease;
}
.wk-card:nth-child(odd) .wk-card__img img { aspect-ratio: 16/10; }
.wk-card:nth-child(even) .wk-card__img img { aspect-ratio: 3/4; }
.wk-card:nth-child(4n) .wk-card__img img { aspect-ratio: 4/3; }
.wk-card:hover .wk-card__img img { transform: scale(1.04); }
.wk-card__go {
  position: absolute; right: 14px; bottom: 14px;
  background: #C6FF4A; color: #0c0c0c;
  font-size: 12.5px; font-weight: 800; letter-spacing: 1px;
  padding: 9px 15px; border-radius: 2px;
  opacity: 0; transform: translateY(8px);
  transition: all .3s ease;
}
.wk-card:hover .wk-card__go { opacity: 1; transform: translateY(0); }
.wk-card__meta { padding: 16px 18px 20px; }
.wk-card__meta h3 { font-size: 17px; font-weight: 700; color: #0c0c0c; line-height: 1.45; margin-bottom: 7px; }
.wk-card__tag { font-size: 12px; letter-spacing: 1.5px; color: #8a8a82; font-weight: 600; }

/* 案例频道页响应式 */
@media (max-width: 1000px) {
  .wk-hero__inner { flex-direction: column; gap: 40px; }
  .wk-hero__visual { width: 100%; text-align: left; }
  .wk-hero__stack { height: 300px; }
  .wk-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .wk-featured__main { max-width: 100%; }
}
@media (max-width: 640px) {
  .wk-hero { padding: 72px 0 64px; }
  .wk-hero__title { font-size: 46px; }
  .wk-hero__sub { font-size: 16px; }
  .wk-cats__head, .wk-grid__head { flex-direction: column; gap: 12px; align-items: flex-start; }
  .wk-cats__grid { grid-template-columns: 1fr; }
  .wk-grid { grid-template-columns: 1fr; }
  .wk-card:nth-child(odd) .wk-card__img img, .wk-card:nth-child(even) .wk-card__img img, .wk-card:nth-child(4n) .wk-card__img img { aspect-ratio: 4/3; }
  .wk-featured__info h2 { font-size: 22px; }
}


/* ============================================================
   服务项目频道页 · 九区（Creative Studio 风，与案例页统一）
   ============================================================ */
.sv-hero { background: #f6f6f3; padding: 100px 0 96px; display: flex; align-items: center; }
.sv-hero__inner { display: flex; align-items: center; gap: 70px; }
.sv-hero__copy { flex: 1 1 54%; }
.sv-hero__title { font-size: clamp(38px, 4.6vw, 58px); line-height: 1.16; font-weight: 900; color: #0c0c0c; letter-spacing: -.5px; margin-bottom: 20px; }
.sv-hero__en { font-size: 21px; font-weight: 800; color: #0c0c0c; letter-spacing: 1.5px; margin-bottom: 18px; }
.sv-hero__desc { font-size: 16px; line-height: 1.85; color: #6a6a63; max-width: 520px; margin-bottom: 36px; }
.sv-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sv-btn--dark { background: #0c0c0c; color: #fff; border: 1px solid #0c0c0c; border-radius: 0; }
.sv-btn--dark:hover { background: #fff; color: #0c0c0c; }
.sv-btn--lime { background: #C6FF4A; color: #0c0c0c; border: 1px solid #C6FF4A; border-radius: 0; }
.sv-btn--lime:hover { background: #0c0c0c; color: #C6FF4A; border-color: #0c0c0c; }
.sv-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 0; }
.sv-btn--outline:hover { background: #fff; color: #0c0c0c; }
.sv-hero__mosaic { flex: 1 1 46%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sv-hero__tile { display: block; }
.sv-hero__tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #fff; padding: 7px; box-shadow: 0 16px 34px rgba(0,0,0,.12); display: block; }
.sv-hero__tile:nth-child(1) { transform: rotate(-3deg) translateY(6px); }
.sv-hero__tile:nth-child(2) { transform: rotate(2deg) translateY(-4px); }
.sv-hero__tile:nth-child(3) { transform: rotate(-1.5deg) translateY(2px); }
.sv-hero__tile:nth-child(4) { transform: rotate(3deg) translateY(-6px); }
.sv-hero__tile:nth-child(5) { transform: rotate(-2deg) translateY(4px); }
.sv-hero__tile:nth-child(6) { transform: rotate(1.5deg) translateY(-2px); }

/* 块标题 */
.sv-block-head { margin-bottom: 52px; }
.sv-block-title { font-size: 44px; font-weight: 900; color: #0c0c0c; letter-spacing: -.5px; line-height: 1.2; margin-top: 18px; }
.sv-block-sub { margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #8a8a82; }

/* 02 核心服务 6 卡（两列大卡） */
.sv-services { background: #fff; padding: 96px 0 100px; }
.sv-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sv-svc { border: 1px solid #e2e2da; background: #fbfbf8; display: flex; flex-direction: column; min-height: 640px; }
.sv-svc__head { padding: 34px 34px 0; }
.sv-svc__no { font-size: 15px; font-weight: 800; color: #FF6A3D; letter-spacing: 1px; }
.sv-svc__head h3 { font-size: 27px; font-weight: 900; color: #0c0c0c; margin: 12px 0 6px; line-height: 1.25; }
.sv-svc__head h3 em { display: block; font-size: 13px; font-style: normal; font-weight: 700; color: #8a8a82; letter-spacing: 2.5px; margin-top: 4px; }
.sv-svc__desc { font-size: 15px; line-height: 1.75; color: #6a6a63; margin-top: 10px; }
.sv-svc__tags { padding: 16px 34px 0; font-size: 13px; line-height: 1.9; color: #8a8a82; }
.sv-svc__media { margin-top: 26px; overflow: hidden; }
.sv-svc__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.sv-svc__media--text { background: #0c0c0c; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 74px 0; }
.sv-svc__media--text span { font-size: clamp(40px, 5vw, 66px); font-weight: 900; letter-spacing: 2px; line-height: 1; }
.sv-svc__media--text span:last-child { color: #C6FF4A; }
.sv-svc__link { margin: auto 34px 30px; padding-top: 24px; font-size: 15px; font-weight: 800; color: #0c0c0c; border-bottom: 2px solid #0c0c0c; display: inline-block; align-self: flex-start; transition: all .2s ease; }
.sv-svc__link:hover { background: #C6FF4A; border-bottom-color: #C6FF4A; padding: 2px 8px; margin-left: 26px; margin-right: 26px; }

/* 03 我应该选什么 */
.sv-sol { background: #f6f6f3; padding: 96px 0 100px; }
.sv-sol__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid #dcdcd4; border-left: 1px solid #dcdcd4; }
.sv-sol-item { padding: 34px 26px 32px; border-right: 1px solid #dcdcd4; border-bottom: 1px solid #dcdcd4; background: #f6f6f3; }
.sv-sol-item__no { font-size: 15px; font-weight: 800; color: #FF6A3D; }
.sv-sol-item h3 { font-size: 19px; font-weight: 800; color: #0c0c0c; margin: 12px 0 8px; line-height: 1.4; }
.sv-sol-item p { font-size: 13.5px; color: #6a6a63; line-height: 1.75; margin-bottom: 16px; }
.sv-sol-item__links { display: flex; flex-direction: column; gap: 7px; }
.sv-sol-item__links a { font-size: 13.5px; font-weight: 600; color: #0c0c0c; display: inline-block; align-self: flex-start; border-bottom: 1px solid transparent; }
.sv-sol-item__links a:hover { border-bottom-color: #0c0c0c; color: #FF6A3D; }

/* 04 品牌宣言 */
.sv-statement { background: #0c0c0c; color: #fff; padding: 118px 0; text-align: center; }
.sv-statement__inner h2 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 900; letter-spacing: .5px; line-height: 1.3; }
.sv-statement__en { margin-top: 22px; font-size: 16px; font-weight: 800; letter-spacing: 5px; color: #C6FF4A; }
.sv-statement__sub { margin-top: 18px; font-size: 15px; color: rgba(255,255,255,.6); }

/* 05 长期服务 */
.sv-sub { background: #fff; padding: 96px 0 100px; }
.sv-sub__wrap { display: flex; gap: 60px; align-items: stretch; }
.sv-sub__copy { flex: 1 1 42%; }
.sv-sub__copy > p { font-size: 17px; line-height: 1.9; color: #3a3a34; margin-bottom: 22px; }
.sv-sub__copy ul { list-style: none; }
.sv-sub__copy li { font-size: 18px; font-weight: 700; color: #0c0c0c; padding: 13px 0; border-bottom: 1px solid #e2e2da; display: flex; align-items: center; gap: 12px; }
.sv-sub__copy li::before { content: ""; width: 10px; height: 10px; background: #C6FF4A; border: 1px solid #0c0c0c; }
.sv-sub__plans { flex: 1 1 58%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start; }
.sv-sub-plan { border: 1px solid #e2e2da; padding: 24px 20px; display: flex; flex-direction: column; }
.sv-sub-plan span { font-size: 13.5px; font-weight: 700; color: #6a6a63; letter-spacing: 1px; }
.sv-sub-plan b { font-size: 26px; font-weight: 900; color: #0c0c0c; margin: 12px 0 6px; }
.sv-sub-plan b em { font-size: 13px; font-style: normal; font-weight: 600; color: #8a8a82; }
.sv-sub-plan p { font-size: 12.5px; line-height: 1.7; color: #8a8a82; }
.sv-sub-plan--hot { background: #0c0c0c; border-color: #0c0c0c; }
.sv-sub-plan--hot span, .sv-sub-plan--hot p { color: rgba(255,255,255,.6); }
.sv-sub-plan--hot b { color: #C6FF4A; }
.sv-sub__btn { margin-top: 18px; grid-column: 1 / -1; justify-self: start; }

/* 06 精选案例 */
.sv-works { background: #f6f6f3; padding: 96px 0 100px; }
.sv-works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sv-work { display: block; }
.sv-work__img { overflow: hidden; }
.sv-work__img img { width: 100%; aspect-ratio: 16/11; object-fit: cover; display: block; transition: transform .5s ease; }
.sv-work:hover .sv-work__img img { transform: scale(1.045); }
.sv-work h3 { font-size: 19px; font-weight: 800; color: #0c0c0c; margin: 18px 0 8px; }
.sv-work__tag { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: #8a8a82; }
.sv-works__more { margin-top: 48px; text-align: center; }

/* 07 为什么选择 */
.sv-why { background: #fff; padding: 96px 0 100px; }
.sv-why__list { max-width: 880px; margin: 0 auto; }
.sv-why-item { display: grid; grid-template-columns: 90px 1fr; gap: 8px 26px; padding: 30px 0; border-bottom: 1px solid #e2e2da; }
.sv-why-item:first-child { border-top: 1px solid #e2e2da; }
.sv-why-item > span { font-size: 22px; font-weight: 900; color: #FF6A3D; }
.sv-why-item h3 { font-size: 22px; font-weight: 800; color: #0c0c0c; margin-bottom: 6px; }
.sv-why-item p { font-size: 14.5px; color: #6a6a63; line-height: 1.75; }

/* 08 服务流程 */
.sv-process { background: #f6f6f3; padding: 96px 0 100px; }
.sv-process__steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.sv-step { position: relative; text-align: center; padding: 26px 12px; border: 1px solid #dcdcd4; background: #fff; }
.sv-step::after { content: ""; position: absolute; top: 50%; right: -18px; width: 18px; height: 2px; background: #0c0c0c; }
.sv-step:last-child::after { display: none; }
.sv-step span { font-size: 17px; font-weight: 900; color: #FF6A3D; }
.sv-step h3 { font-size: 18px; font-weight: 800; color: #0c0c0c; margin: 8px 0 6px; }
.sv-step p { font-size: 12.5px; line-height: 1.65; color: #8a8a82; }

/* 09 CTA */
.sv-cta { background: #0c0c0c; color: #fff; padding: 110px 0; }
.sv-cta__inner { text-align: center; }
.sv-cta__inner h2 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 900; letter-spacing: .5px; margin-bottom: 18px; }
.sv-cta__inner > p { font-size: 16px; color: rgba(255,255,255,.65); line-height: 1.85; max-width: 560px; margin: 0 auto 36px; }
.sv-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.sv-cta__qr { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.sv-cta__qr img { width: 120px; height: 120px; background: #fff; padding: 6px; border-radius: 0; display: block; }
.sv-cta__qr span { font-size: 13px; color: rgba(255,255,255,.75); }

/* 服务页响应式 */
@media (max-width: 1100px) {
  .sv-sol__grid { grid-template-columns: repeat(2, 1fr); }
  .sv-works__grid { grid-template-columns: repeat(2, 1fr); }
  .sv-process__steps { grid-template-columns: repeat(3, 1fr); }
  .sv-step::after { display: none; }
}
@media (max-width: 900px) {
  .sv-hero__inner { flex-direction: column; gap: 44px; }
  .sv-hero__copy { text-align: center; }
  .sv-hero__actions { justify-content: center; }
  .sv-svc-grid { grid-template-columns: 1fr; }
  .sv-svc { min-height: 0; }
  .sv-sub__wrap { flex-direction: column; gap: 40px; }
  .sv-sub__plans { grid-template-columns: 1fr; }
  .sv-works__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sv-hero { padding: 72px 0 64px; }
  .sv-hero__title { font-size: 34px; }
  .sv-hero__mosaic { grid-template-columns: repeat(2, 1fr); }
  .sv-sol__grid { grid-template-columns: 1fr; }
  .sv-process__steps { grid-template-columns: 1fr; }
  .sv-block-title { font-size: 32px; }
  .sv-why-item { grid-template-columns: 1fr; gap: 6px; }
}


/* ============================================================
   网站模板商城页（白/浅灰 + 品牌蓝 #076ce0）
   ============================================================ */
/* 导航下拉：图标+标题+说明 */
.nav-drop--tpl { min-width: 330px; padding: 10px; }
.nav-tpl-all { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 700; color: #0c0c0c; padding: 9px 12px; border-bottom: 1px solid #eee; margin-bottom: 6px; }
.nav-tpl-all i { font-style: normal; color: var(--primary); }
.nav-tpl-all:hover { color: var(--primary); }
.nav-tpl { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 4px; }
.nav-tpl svg { width: 22px; height: 22px; color: var(--primary); flex: 0 0 22px; }
.nav-tpl__txt { display: flex; flex-direction: column; }
.nav-tpl__txt b { font-size: 14px; font-weight: 700; color: #0c0c0c; }
.nav-tpl__txt i { font-style: normal; font-size: 12px; color: #8a8a82; margin-top: 2px; white-space: nowrap; }
.nav-tpl:hover { background: #f0f6fe; }
.nav-tpl:hover .nav-tpl__txt b { color: var(--primary); }

/* Hero */
.tpl-hero { background: #f6f6f3; padding: 96px 0 100px; }
.tpl-hero__inner { display: flex; align-items: center; gap: 70px; }
.tpl-hero__copy { flex: 1 1 52%; }
.tpl-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #fff; background: var(--primary); padding: 6px 12px; }
.tpl-hero__copy h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.18; font-weight: 900; color: #0c0c0c; letter-spacing: -.5px; margin: 20px 0 18px; }
.tpl-hero__desc { font-size: 16px; line-height: 1.9; color: #6a6a63; margin-bottom: 34px; }
.tpl-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.tpl-btn--blue { background: var(--primary); color: #fff; border: 1px solid var(--primary); border-radius: 4px; }
.tpl-btn--blue:hover { background: var(--primary-dark); }
.tpl-btn--ghost { background: transparent; color: #0c0c0c; border: 1px solid #0c0c0c; border-radius: 4px; }
.tpl-btn--ghost:hover { background: #0c0c0c; color: #fff; }
.tpl-hero__mock { flex: 1 1 48%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tpl-mock { display: block; position: relative; }
.tpl-mock::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 26px; background: #eef0f2; border: 1px solid #ddd; border-bottom: none; z-index: 1; }
.tpl-mock::after { content: ""; position: absolute; top: 9px; left: 10px; width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; box-shadow: 12px 0 0 #febc2e, 24px 0 0 #28c840; z-index: 2; }
.tpl-mock img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border: 1px solid #ddd; border-top: 27px solid #eef0f2; box-shadow: 0 18px 36px rgba(0,0,0,.13); }
.tpl-mock:nth-child(2) { transform: translateY(14px) rotate(1.2deg); }
.tpl-mock:nth-child(3) { transform: translateY(-10px) rotate(-1deg); }
.tpl-mock:nth-child(4) { transform: translateY(8px) rotate(.8deg); }

/* 筛选区 + 网格 */
.tpl-body { background: #fff; padding: 72px 0 96px; }
.tpl-filter { margin-bottom: 44px; }
.tpl-filter__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.tpl-filter__cats .tpl-cat { border: 1px solid #e2e2da; background: #fff; color: #3a3a34; padding: 9px 20px; font-size: 14px; font-weight: 600; border-radius: 0; cursor: pointer; }
.tpl-filter__cats .tpl-cat.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.tpl-filter__cats .tpl-cat:hover:not(.is-on) { border-color: var(--primary); color: var(--primary); }
.tpl-filter__label { font-size: 13px; font-weight: 700; color: #8a8a82; margin-right: 2px; }
.tpl-filter__ind .tpl-ind { border: none; background: transparent; color: #6a6a63; font-size: 13.5px; padding: 6px 10px; cursor: pointer; border-bottom: 2px solid transparent; }
.tpl-filter__ind .tpl-ind.is-on { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }
.tpl-filter__ind .tpl-ind:hover { color: var(--primary); }
.tpl-filter__search { display: flex; align-items: center; gap: 10px; border: 1px solid #e2e2da; background: #fafaf8; padding: 0 16px; max-width: 520px; }
.tpl-search-ico { width: 18px; height: 18px; color: #8a8a82; }
.tpl-filter__search input { border: none; background: transparent; flex: 1; padding: 12px 0; font-size: 14.5px; outline: none; color: #0c0c0c; }
.tpl-filter__search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(7,108,224,.12); }
.tpl-filter__hint { margin-top: 14px; font-size: 12.5px; color: #8a8a82; }

.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tpl-card { border: 1px solid #e6e6de; background: #fff; display: flex; flex-direction: column; transition: box-shadow .25s ease; }
.tpl-card:hover { box-shadow: 0 16px 34px rgba(0,0,0,.09); }
.tpl-card__img { position: relative; display: block; overflow: hidden; }
.tpl-card__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .5s ease; }
.tpl-card:hover .tpl-card__img img { transform: scale(1.05); }
.tpl-card__demo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(7,108,224,.88); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 1px; opacity: 0; transition: opacity .3s ease; }
.tpl-card:hover .tpl-card__demo { opacity: 1; }
.tpl-card__meta { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tpl-card__cat { font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: 1px; }
.tpl-card__title { font-size: 18px; font-weight: 800; color: #0c0c0c; margin: 8px 0 6px; line-height: 1.4; }
.tpl-card__title a { color: inherit; }
.tpl-card__title a:hover { color: var(--primary); }
.tpl-card__spec { font-size: 12.5px; color: #8a8a82; margin-bottom: 14px; }
.tpl-card__fields { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid #eef0f3; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tpl-card__fields li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpl-card__fields i { font-style: normal; font-size: 11px; color: #9299A6; }
.tpl-card__fields b { font-size: 12px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) { .tpl-card__fields { grid-template-columns: repeat(5, 1fr); } }
.tpl-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f0f0ea; padding-top: 14px; }
.tpl-card__price { font-size: 21px; font-weight: 900; color: var(--primary); }
.tpl-card__price em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #8a8a82; }
.tpl-card__btn { font-size: 13px; font-weight: 700; color: #0c0c0c; border-bottom: 1px solid #0c0c0c; }
.tpl-card__btn:hover { color: var(--primary); border-bottom-color: var(--primary); }
.tpl-empty { text-align: center; color: #8a8a82; font-size: 14.5px; padding: 30px 0; }

/* 你买到什么 */
.tpl-includes { background: #f6f6f3; padding: 88px 0 96px; }
.tpl-includes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid #dcdcd4; border-left: 1px solid #dcdcd4; }
.tpl-include { padding: 30px 26px; border-right: 1px solid #dcdcd4; border-bottom: 1px solid #dcdcd4; background: #f6f6f3; }
.tpl-include span { font-size: 15px; font-weight: 800; color: var(--primary); }
.tpl-include h3 { font-size: 18px; font-weight: 800; color: #0c0c0c; margin: 10px 0 8px; }
.tpl-include p { font-size: 13.5px; line-height: 1.75; color: #6a6a63; }

/* 模板 vs 定制 */
.tpl-compare { background: #fff; padding: 88px 0 96px; }
.tpl-compare__table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 40px; }
.tpl-compare__table th, .tpl-compare__table td { padding: 15px 20px; border: 1px solid #e2e2da; font-size: 14px; }
.tpl-compare__table thead th { background: #0c0c0c; color: #fff; font-size: 16px; font-weight: 800; text-align: left; }
.tpl-compare__table thead th:first-child { background: transparent; border: none; }
.tpl-compare__table tbody td:first-child { font-weight: 700; color: #3a3a34; background: #fafaf8; }
.tpl-compare__table tbody td { color: #6a6a63; }
.tpl-compare__foot { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.tpl-compare__pick { display: flex; align-items: center; gap: 16px; border: 1px solid #e2e2da; padding: 16px 22px; }
.tpl-compare__pick b { font-size: 15px; font-weight: 800; color: #0c0c0c; }

/* 服务升级 */
.tpl-upgrade { background: #0b0e1a; padding: 90px 0; color: #fff; }
.tpl-upgrade__inner { text-align: center; }
.tpl-upgrade__inner h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; letter-spacing: .5px; }
.tpl-upgrade__sub { margin: 14px 0 28px; color: rgba(255,255,255,.65); font-size: 15px; }
.tpl-upgrade__tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.tpl-upgrade__tags span { border: 1px solid rgba(255,255,255,.25); padding: 8px 18px; font-size: 13.5px; color: rgba(255,255,255,.85); border-radius: 0; }
.tpl-upgrade__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.tpl-upgrade__actions .tpl-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.tpl-upgrade__actions .tpl-btn--ghost:hover { background: #fff; color: #0c0c0c; }

/* 模板详情页 */
.tpl-detail-hero { background: #f6f6f3; padding: 60px 0 54px; }
.tpl-detail-hero h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; color: #0c0c0c; margin: 16px 0 10px; letter-spacing: -.5px; }
.tpl-detail-hero p { font-size: 15px; color: #6a6a63; }
.tpl-detail { background: #fff; padding: 54px 0 96px; }
.tpl-detail__layout { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
.tpl-detail__shot { position: relative; overflow: hidden; }
.tpl-detail__shot img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.tpl-detail__live { position: absolute; top: 14px; left: 14px; background: rgba(7,108,224,.92); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 6px 12px; }
.tpl-detail__intro { padding: 34px 0 10px; }
.tpl-detail__intro h2, .tpl-detail__includes h2, .tpl-detail__cta h2 { font-size: 22px; font-weight: 800; color: #0c0c0c; margin-bottom: 16px; }
.tpl-detail__intro .content { color: #4a4a44; line-height: 1.9; font-size: 14.5px; }
.tpl-detail__includes { border-top: 1px solid #ececea; padding: 30px 0; }
.tpl-detail__includes ul { list-style: none; }
.tpl-detail__includes li { font-size: 14.5px; color: #3a3a34; padding: 9px 0 9px 26px; position: relative; }
.tpl-detail__includes li::before { content: ""; position: absolute; left: 0; top: 15px; width: 9px; height: 9px; background: var(--primary); }
.tpl-detail__hint { font-size: 13px; color: #8a8a82; margin-top: 12px; }
.tpl-detail__cta { background: #f6f6f3; border: 1px solid #e2e2da; padding: 30px 32px; }
.tpl-detail__cta p { font-size: 14.5px; color: #6a6a63; line-height: 1.8; margin-bottom: 20px; }
.tpl-detail__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tpl-side-card { border: 1px solid #e2e2da; background: #fafaf8; padding: 24px 24px 26px; margin-bottom: 20px; }
.tpl-side-card h3 { font-size: 16px; font-weight: 800; color: #0c0c0c; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e2e2da; }
.tpl-spec { margin: 0; }
.tpl-spec dt { font-size: 12.5px; color: #8a8a82; margin: 12px 0 4px; }
.tpl-spec dd { font-size: 14.5px; color: #0c0c0c; font-weight: 600; margin: 0; line-height: 1.6; }
.tpl-price { font-size: 26px; font-weight: 900; color: var(--primary); }
.tpl-spec dd em { font-style: normal; font-size: 12.5px; color: #8a8a82; font-weight: 600; }
.tpl-side-card p { font-size: 13.5px; color: #6a6a63; line-height: 1.75; margin-bottom: 16px; }
.tpl-side-links { list-style: none; }
.tpl-side-links li { padding: 8px 0; border-bottom: 1px dashed #e2e2da; }
.tpl-side-links a { font-size: 13.5px; color: #3a3a34; }
.tpl-side-links a:hover { color: var(--primary); }

/* 模板页响应式 */
@media (max-width: 1100px) {
  .tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .tpl-includes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .tpl-hero__inner { flex-direction: column; gap: 46px; }
  .tpl-hero__copy { text-align: center; }
  .tpl-hero__actions { justify-content: center; }
  .tpl-detail__layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tpl-hero { padding: 70px 0 70px; }
  .tpl-hero__mock { grid-template-columns: 1fr; }
  .tpl-grid, .tpl-includes__grid { grid-template-columns: 1fr; }
  .tpl-compare__table { font-size: 12.5px; }
  .tpl-compare__table th, .tpl-compare__table td { padding: 11px 12px; }
  .tpl-compare__pick { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   营销包月成交页（黑/白/浅灰 + 品牌蓝 #076ce0）
   ============================================================ */
/* 吸顶转化菜单 */
.mk-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #fff; border-bottom: 1px solid #e6e6de; box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-100%); transition: transform .3s ease; }
.mk-sticky.is-on { transform: translateY(0); }
.mk-sticky__inner { display: flex; align-items: center; gap: 26px; padding: 12px 0; }
.mk-sticky__inner a { font-size: 14px; font-weight: 600; color: #3a3a34; }
.mk-sticky__inner a:hover { color: var(--primary); }
.mk-sticky__cta { margin-left: auto; background: var(--primary); color: #fff !important; padding: 8px 22px; font-weight: 700; border-radius: 0; }
.mk-sticky__cta:hover { background: var(--primary-dark); }

/* 01 Hero */
.mk-hero { background: #f6f6f3; padding: 100px 0 96px; }
.mk-hero__inner { display: flex; align-items: center; gap: 70px; }
.mk-hero__copy { flex: 1 1 55%; }
.mk-hero__copy h1 { font-size: clamp(44px, 5.4vw, 72px); line-height: 1.14; font-weight: 900; color: #0c0c0c; letter-spacing: -1px; margin: 22px 0 20px; }
.mk-hero__desc { font-size: 16px; line-height: 1.9; color: #6a6a63; max-width: 500px; margin-bottom: 32px; }
.mk-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.mk-hero__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-hero__tags span { font-size: 13px; font-weight: 700; color: var(--primary); border: 1px solid rgba(7,108,224,.3); padding: 7px 16px; background: #fff; }
.mk-hero__board { flex: 1 1 45%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mk-board { display: block; }
.mk-board img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #fff; padding: 7px; box-shadow: 0 16px 34px rgba(0,0,0,.12); }
.mk-board:nth-child(1) { transform: rotate(-3deg) translateY(6px); }
.mk-board:nth-child(2) { transform: rotate(2deg) translateY(-4px); }
.mk-board:nth-child(3) { transform: rotate(-1.5deg) translateY(2px); }
.mk-board:nth-child(4) { transform: rotate(3deg) translateY(-6px); }
.mk-board:nth-child(5) { transform: rotate(-2deg) translateY(4px); }
.mk-board:nth-child(6) { transform: rotate(1.5deg) translateY(-2px); }

/* 02 痛点 */
.mk-pain { background: #fff; padding: 96px 0 100px; }
.mk-pain__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid #e2e2da; border-left: 1px solid #e2e2da; margin-bottom: 54px; }
.mk-pain-item { padding: 34px 28px; border-right: 1px solid #e2e2da; border-bottom: 1px solid #e2e2da; }
.mk-pain-item b { display: block; font-size: 21px; font-weight: 900; color: #0c0c0c; margin-bottom: 10px; }
.mk-pain-item p { font-size: 14px; line-height: 1.8; color: #6a6a63; }
.mk-pain__big { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; color: #0c0c0c; text-align: center; line-height: 1.4; }
.mk-pain__sub { margin-top: 16px; text-align: center; font-size: 15.5px; color: #6a6a63; }

/* 03 套餐 */
.mk-plans { background: #f6f6f3; padding: 96px 0 100px; }
.mk-plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.mk-plan { background: #fff; border: 1px solid #e2e2da; padding: 34px 30px 30px; display: flex; flex-direction: column; position: relative; }
.mk-plan--hot { background: #0c0c0c; border-color: #0c0c0c; }
.mk-plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 6px 14px; white-space: nowrap; }
.mk-plan__name { font-size: 14px; font-weight: 800; letter-spacing: 1px; color: var(--primary); }
.mk-plan--hot .mk-plan__name { color: #C6FF4A; }
.mk-plan__price { font-size: clamp(38px, 4.6vw, 60px); font-weight: 900; color: #0c0c0c; line-height: 1; margin: 18px 0 6px; letter-spacing: -1px; }
.mk-plan__price em { font-style: normal; font-size: 15px; font-weight: 700; color: #8a8a82; letter-spacing: 0; }
.mk-plan--hot .mk-plan__price { color: #fff; }
.mk-plan__year { display: block; font-size: 13px; font-weight: 700; color: var(--primary); margin-top: 8px; }
.mk-plan--hot .mk-plan__year { color: #C6FF4A; }
.mk-plan__who { font-size: 13.5px; line-height: 1.8; color: #6a6a63; margin: 10px 0 16px; }
.mk-plan--hot .mk-plan__who { color: rgba(255,255,255,.65); }
.mk-plan__list { list-style: none; margin: 0 0 18px; flex: 1; }
.mk-plan__list li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: #3a3a34; padding: 8px 0; border-bottom: 1px solid #f0f0ea; }
.mk-plan--hot .mk-plan__list li { color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.12); }
.mk-plan__list li b { margin-left: auto; font-size: 14px; color: var(--primary); }
.mk-plan--hot .mk-plan__list li b { color: #C6FF4A; }
.mk-plan__list li i { font-style: normal; font-size: 11.5px; color: #a0a098; }
.mk-plan__pay { font-size: 13px; color: #8a8a82; line-height: 1.7; margin-bottom: 18px; }
.mk-plan__pay b { color: var(--primary); font-weight: 800; }
.mk-plan--hot .mk-plan__pay { color: rgba(255,255,255,.6); }
.mk-plan--hot .mk-plan__pay b { color: #C6FF4A; }
.mk-plan__btn { width: 100%; text-align: center; justify-content: center; }

/* 对比表 */
.mk-table { margin-top: 60px; background: #fff; border: 1px solid #e2e2da; padding: 30px 30px 34px; }
.mk-table h3 { font-size: 20px; font-weight: 800; color: #0c0c0c; margin-bottom: 20px; }
.mk-table table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.mk-table th, .mk-table td { padding: 12px 16px; border: 1px solid #ececea; font-size: 13.5px; text-align: left; }
.mk-table thead th { background: #0c0c0c; color: #fff; font-weight: 800; }
.mk-table tbody td:first-child { font-weight: 700; color: #3a3a34; }
.mk-table tbody td { color: #6a6a63; }
.mk-table .mk-table__last td { background: #f0f6fe; color: #0c0c0c; font-weight: 800; }

/* 04 与招聘比较 */
.mk-compare { background: #fff; padding: 20px 0 100px; }
.mk-compare__table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.mk-compare__table th, .mk-compare__table td { padding: 13px 16px; border: 1px solid #ececea; font-size: 13.5px; text-align: left; }
.mk-compare__table thead th { background: #0c0c0c; color: #fff; font-weight: 800; }
.mk-compare__table thead th:last-child { background: var(--primary); }
.mk-compare__table tbody td:first-child { font-weight: 700; color: #3a3a34; background: #fafaf8; }
.mk-compare__table tbody td:last-child { color: var(--primary); font-weight: 700; }
.mk-compare__table tbody td { color: #6a6a63; }
.mk-compare__table .mk-compare__last td { background: #f0f6fe; color: #0c0c0c; font-weight: 800; }
.mk-compare__note { margin-top: 16px; font-size: 13px; color: #8a8a82; text-align: center; }

/* 05 月度机制 */
.mk-process { background: #f6f6f3; padding: 96px 0 100px; }
.mk-process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mk-week { background: #fff; border: 1px solid #e2e2da; padding: 30px 26px; position: relative; }
.mk-week::after { content: ""; position: absolute; top: 50%; right: -18px; width: 18px; height: 2px; background: var(--primary); }
.mk-week:last-child::after { display: none; }
.mk-week__tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: var(--primary); border: 1px solid rgba(7,108,224,.3); padding: 4px 10px; margin-bottom: 16px; }
.mk-week h3 { font-size: 22px; font-weight: 900; color: #0c0c0c; margin-bottom: 12px; }
.mk-week p { font-size: 13.5px; line-height: 1.9; color: #6a6a63; }

/* 06 服务边界 */
.mk-boundary { background: #fff; padding: 96px 0 100px; }
.mk-boundary__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mk-boundary__col { border: 1px solid #e2e2da; padding: 30px 32px; }
.mk-boundary__col:first-child { background: #f0f6fe; border-color: rgba(7,108,224,.25); }
.mk-boundary__col h3 { font-size: 19px; font-weight: 800; color: #0c0c0c; margin-bottom: 14px; }
.mk-boundary__col:first-child h3 { color: var(--primary); }
.mk-boundary__col ul { list-style: none; }
.mk-boundary__col li { font-size: 14.5px; color: #3a3a34; padding: 8px 0 8px 24px; position: relative; }
.mk-boundary__col:first-child li::before { content: ""; position: absolute; left: 0; top: 14px; width: 9px; height: 9px; background: var(--primary); }
.mk-boundary__col:last-child li::before { content: "•"; position: absolute; left: 4px; color: #8a8a82; }
.mk-boundary__note { margin-top: 22px; font-size: 13px; color: #8a8a82; }

/* 07 月度成果 */
.mk-results { background: #f6f6f3; padding: 96px 0 100px; }
.mk-results__wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.mk-result { background: #fff; border: 1px solid #e2e2da; text-align: center; padding: 34px 10px; }
.mk-result b { display: block; font-size: clamp(30px, 3.6vw, 46px); font-weight: 900; color: var(--primary); letter-spacing: -1px; }
.mk-result span { display: block; font-size: 13.5px; font-weight: 700; color: #3a3a34; margin-top: 8px; }
.mk-results__note { margin-top: 18px; font-size: 12.5px; color: #8a8a82; text-align: center; }

/* 08 案例（复用 sv-works__grid 样式） */
.mk-works { background: #fff; padding: 96px 0 100px; }

/* 09 为什么（复用 sv-why__list） */
.mk-why { background: #f6f6f3; padding: 96px 0 100px; }

/* 10 FAQ */
.mk-faq { background: #fff; padding: 96px 0 100px; }
.mk-faq__list { max-width: 860px; margin: 0 auto; }
.mk-faq-item { border-bottom: 1px solid #e2e2da; }
.mk-faq-item summary { font-size: 17px; font-weight: 700; color: #0c0c0c; padding: 20px 44px 20px 4px; cursor: pointer; list-style: none; position: relative; }
.mk-faq-item summary::-webkit-details-marker { display: none; }
.mk-faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 22px; font-weight: 400; color: var(--primary); }
.mk-faq-item[open] summary::after { content: "–"; }
.mk-faq-item p { font-size: 14.5px; line-height: 1.9; color: #6a6a63; padding: 0 44px 22px 4px; }

/* 11 CTA */
.mk-cta { background: #0c0c0c; color: #fff; padding: 110px 0; }
.mk-cta__inner { text-align: center; }
.mk-cta__inner h2 { font-size: clamp(38px, 5vw, 64px); font-weight: 900; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 20px; }
.mk-cta__inner > p { font-size: 16px; color: rgba(255,255,255,.65); line-height: 1.9; max-width: 540px; margin: 0 auto 36px; }
.mk-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 38px; }
.mk-cta__actions .tpl-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.mk-cta__actions .tpl-btn--ghost:hover { background: #fff; color: #0c0c0c; }
.mk-cta__qr { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 30px; }
.mk-cta__qr img { width: 118px; height: 118px; background: #fff; padding: 6px; display: block; }
.mk-cta__qr span { font-size: 13px; color: rgba(255,255,255,.75); }
.mk-cta__low { font-size: 13.5px; color: rgba(255,255,255,.55); }

/* 营销页响应式 */
@media (max-width: 1100px) {
  .mk-pain__grid { grid-template-columns: repeat(2, 1fr); }
  .mk-plans__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .mk-process__steps { grid-template-columns: repeat(2, 1fr); }
  .mk-week::after { display: none; }
  .mk-results__wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .mk-hero__inner { flex-direction: column; gap: 46px; }
  .mk-hero__copy { text-align: center; }
  .mk-hero__actions, .mk-hero__tags { justify-content: center; }
  .mk-boundary__cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mk-hero { padding: 72px 0 66px; }
  .mk-hero__copy h1 { font-size: 40px; }
  .mk-hero__board { grid-template-columns: repeat(2, 1fr); }
  .mk-pain__grid { grid-template-columns: 1fr; }
  .mk-process__steps { grid-template-columns: 1fr; }
  .mk-results__wall { grid-template-columns: repeat(2, 1fr); }
  .mk-table { overflow-x: auto; padding: 20px 16px; }
  .mk-table table { min-width: 640px; }
  .mk-compare__table { min-width: 640px; }
  .mk-sticky__inner { gap: 14px; overflow-x: auto; }
}


/* ============================================================
   内容中心（白/浅灰 + 黑灰 + 品牌蓝 #076ce0 · 阅读优先）
   ============================================================ */
/* 01 首屏搜索 */
.nc-hero { background: #f6f6f3; padding: 96px 0 92px; text-align: center; }
.nc-hero h1 { font-size: clamp(46px, 5.6vw, 76px); font-weight: 900; color: #0c0c0c; letter-spacing: -1px; margin: 20px 0 18px; }
.nc-hero__desc { font-size: 16px; line-height: 2; color: #6a6a63; max-width: 680px; margin: 0 auto 34px; }
.nc-search { display: flex; align-items: center; max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid #d8d8d0; padding: 6px 6px 6px 18px; }
.nc-search__ico { width: 20px; height: 20px; color: #8a8a82; flex: none; margin-right: 12px; }
.nc-search input { flex: 1; border: 0; outline: 0; font-size: 15px; color: #0c0c0c; background: transparent; min-width: 0; }
.nc-search button { border: 0; background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; padding: 12px 30px; cursor: pointer; }
.nc-search button:hover { background: var(--primary-dark); }
.nc-hot { margin-top: 20px; font-size: 13.5px; color: #8a8a82; }
.nc-hot a { color: var(--primary); font-weight: 600; margin: 0 10px; }
.nc-hot a:hover { text-decoration: underline; }

/* 02 精选内容 */
.nc-featured { background: #fff; padding: 96px 0 100px; }
.nc-featured__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 46px; align-items: start; }
.nc-lead__img { display: block; overflow: hidden; background: #ececea; }
.nc-lead__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .4s ease; }
.nc-lead__img:hover img { transform: scale(1.03); }
.nc-card__cat { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--primary); margin: 22px 0 12px; }
.nc-lead h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; color: #0c0c0c; line-height: 1.3; margin-bottom: 12px; }
.nc-lead h3 a { color: inherit; }
.nc-lead h3 a:hover { color: var(--primary); }
.nc-card__meta { font-size: 13px; color: #8a8a82; letter-spacing: .4px; }
.nc-lead__desc { font-size: 15px; line-height: 1.9; color: #6a6a63; margin-top: 16px; max-width: 560px; }
.nc-side { display: flex; flex-direction: column; gap: 0; }
.nc-side__item { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid #eeece4; align-items: center; }
.nc-side__item:last-child { border-bottom: 0; }
.nc-side__item img { width: 84px; height: 84px; object-fit: cover; flex: none; }
.nc-side__txt { min-width: 0; }
.nc-side__txt b { display: block; font-size: 16px; font-weight: 800; color: #0c0c0c; line-height: 1.5; margin-bottom: 6px; }
.nc-side__item:hover .nc-side__txt b { color: var(--primary); }
.nc-side__txt i { font-style: normal; font-size: 12.5px; color: #8a8a82; }

/* 03 栏目分类 */
.nc-cats { background: #fff; padding: 0 0 100px; }
.nc-cats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.nc-cat { border: 1px solid #e2e2da; padding: 30px 24px; display: flex; flex-direction: column; gap: 8px; background: #fff; transition: border-color .25s, box-shadow .25s; }
.nc-cat:hover { border-color: var(--primary); box-shadow: 0 12px 26px rgba(7,108,224,.10); }
.nc-cat b { font-size: 19px; font-weight: 900; color: #0c0c0c; }
.nc-cat i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--primary); }
.nc-cat span { font-size: 12.5px; color: #8a8a82; line-height: 1.6; }

/* 04 按问题找答案 */
.nc-problems { background: #f6f6f3; padding: 96px 0 100px; }
.nc-problems__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.nc-problem { background: #fff; border: 1px solid #e2e2da; padding: 30px 32px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.nc-problem b { font-size: clamp(19px, 1.9vw, 24px); font-weight: 900; color: #0c0c0c; }
.nc-problem span { font-size: 13.5px; color: var(--primary); white-space: nowrap; }
.nc-problem:hover { border-color: var(--primary); }
.nc-problem:hover b { color: var(--primary); }

/* 05 最新文章 */
.nc-latest { background: #fff; padding: 96px 0 100px; }
.nc-latest__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
.nc-card { }
.nc-card__img { display: block; overflow: hidden; background: #ececea; }
.nc-card__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .4s ease; }
.nc-card__img:hover img { transform: scale(1.04); }
.nc-card__body { padding-top: 0; }
.nc-card__body .nc-card__cat { margin: 18px 0 10px; }
.nc-card__body h3 { font-size: 18px; font-weight: 800; color: #0c0c0c; line-height: 1.5; margin-bottom: 10px; }
.nc-card__body h3 a { color: inherit; }
.nc-card__body h3 a:hover { color: var(--primary); }
.nc-card__body > p { font-size: 14px; line-height: 1.85; color: #6a6a63; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 06 热门专题 */
.nc-topics { background: #f6f6f3; padding: 96px 0 100px; }
.nc-topics__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nc-topic { background: #fff; border: 1px solid #e2e2da; padding: 34px 30px; display: flex; flex-direction: column; }
.nc-topic h3 { font-size: 21px; font-weight: 900; color: #0c0c0c; margin-bottom: 10px; }
.nc-topic > p { font-size: 13.5px; line-height: 1.8; color: #8a8a82; margin-bottom: 22px; }
.nc-topic ul { list-style: none; margin-bottom: 24px; flex: 1; }
.nc-topic li { font-size: 14.5px; color: #3a3a34; padding: 10px 0 10px 22px; position: relative; border-bottom: 1px solid #f1f0ea; }
.nc-topic li::before { content: "→"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
.nc-topic li a { color: inherit; }
.nc-topic li a:hover { color: var(--primary); }
.nc-topic__more { font-size: 14px; font-weight: 800; color: var(--primary); }
.nc-topic__more:hover { text-decoration: underline; }

/* 07 工具与资源 */
.nc-tools { background: #fff; padding: 96px 0 100px; }
.nc-tools__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nc-tool { border: 1px solid #e2e2da; padding: 28px 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; }
a.nc-tool:hover { border-color: var(--primary); box-shadow: 0 12px 26px rgba(7,108,224,.10); }
.nc-tool b { font-size: 16px; font-weight: 800; color: #0c0c0c; }
.nc-tool i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--primary); }
.nc-tool--soon { background: #fafaf8; }
.nc-tool--soon b { color: #8a8a82; }
.nc-tool--soon i { color: #b5b5ad; }
.nc-tool--soon em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #b5b5ad; border: 1px solid #d8d8d0; padding: 3px 8px; }

/* 08 服务导流 */
.nc-guide { background: var(--primary); padding: 72px 0; }
.nc-guide__inner { text-align: center; }
.nc-guide__inner h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 900; color: #fff; margin-bottom: 12px; }
.nc-guide__inner p { font-size: 15px; color: rgba(255,255,255,.85); margin-bottom: 26px; }
.nc-guide__links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.nc-guide__links .tpl-btn--blue { background: #fff; color: var(--primary); }
.nc-guide__links .tpl-btn--blue:hover { background: #eef4fd; }
.nc-guide__links .tpl-btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.nc-guide__links .tpl-btn--ghost:hover { background: rgba(255,255,255,.14); }

/* 09 本月热门 */
.nc-popular { background: #f6f6f3; padding: 96px 0 100px; }
.nc-popular__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.nc-pop { background: #fff; border: 1px solid #e2e2da; padding: 20px 24px; display: flex; align-items: baseline; gap: 18px; }
.nc-pop__no { font-size: 26px; font-weight: 900; color: var(--primary); font-style: normal; }
.nc-pop b { font-size: 15.5px; font-weight: 700; color: #3a3a34; flex: 1; min-width: 0; line-height: 1.5; }
.nc-pop i { font-style: normal; font-size: 12.5px; color: #a0a098; white-space: nowrap; }
.nc-pop:hover { border-color: var(--primary); }
.nc-pop:hover b { color: var(--primary); }

/* 10 Newsletter */
.nc-letter { background: #fff; padding: 96px 0 100px; }
.nc-letter__inner { text-align: center; max-width: 560px; }
.nc-letter__inner h3 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; color: #0c0c0c; margin-bottom: 14px; }
.nc-letter__inner p { font-size: 15px; line-height: 1.9; color: #6a6a63; margin-bottom: 28px; }
.nc-letter__inner .btn { margin-bottom: 30px; }
.nc-letter__inner img { width: 132px; height: 132px; background: #f6f6f3; padding: 6px; display: block; margin: 0 auto; }

/* 11 CTA */
.nc-cta { background: #0c0c0c; color: #fff; padding: 108px 0; }
.nc-cta__inner { text-align: center; }
.nc-cta__inner h2 { font-size: clamp(38px, 5vw, 64px); font-weight: 900; letter-spacing: -.5px; line-height: 1.25; margin-bottom: 22px; }
.nc-cta__inner p { font-size: 15.5px; color: rgba(255,255,255,.65); line-height: 1.9; max-width: 560px; margin: 0 auto 36px; }
.nc-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.nc-cta__actions .tpl-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.nc-cta__actions .tpl-btn--ghost:hover { background: #fff; color: #0c0c0c; }

/* 内容中心响应式 */
@media (max-width: 1100px) {
  .nc-featured__grid { grid-template-columns: 1fr; gap: 40px; }
  .nc-latest__grid { grid-template-columns: repeat(2, 1fr); }
  .nc-cats__grid { grid-template-columns: repeat(3, 1fr); }
  .nc-topics__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .nc-tools__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .nc-hero { padding: 64px 0 60px; }
  .nc-search { flex-wrap: wrap; }
  .nc-search input { padding: 10px 0; }
  .nc-search button { width: 100%; }
  .nc-latest__grid { grid-template-columns: 1fr; }
  .nc-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .nc-problems__grid { grid-template-columns: 1fr; }
  .nc-popular__list { grid-template-columns: 1fr; }
}


/* ============================================================
   内容中心 · 文章详情页
   ============================================================ */
.nc-art { background: #fff; padding: 60px 0 80px; }
.nc-art-head { max-width: 780px; margin: 0 auto 40px; }
.nc-art__cat { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--primary); border: 1px solid rgba(7,108,224,.3); padding: 5px 12px; margin-bottom: 18px; }
.nc-art-head h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; color: #0c0c0c; line-height: 1.3; letter-spacing: -.5px; margin-bottom: 16px; }
.nc-art__meta { font-size: 13.5px; color: #8a8a82; margin-bottom: 20px; }
.nc-art__summary { font-size: 16.5px; line-height: 2; color: #55554e; border-left: 3px solid var(--primary); padding-left: 18px; }
.nc-art-layout { max-width: 780px; margin: 0 auto; }
.nc-toc { background: #f6f6f3; border-left: 3px solid var(--primary); padding: 20px 24px; margin-bottom: 36px; }
.nc-toc b { display: block; font-size: 14px; font-weight: 800; color: #0c0c0c; letter-spacing: 1px; margin-bottom: 12px; }
.nc-toc ul { list-style: none; }
.nc-toc li { font-size: 14.5px; padding: 6px 0; }
.nc-toc li a { color: #3a3a34; }
.nc-toc li a:hover { color: var(--primary); }
.nc-toc li.nc-toc__sub { padding-left: 18px; font-size: 13.5px; color: #8a8a82; }
.nc-art-body { font-size: 16px; line-height: 2.05; color: #33332d; word-break: break-word; }
.nc-art-body h2, .nc-art-body h3 { color: #0c0c0c; font-weight: 900; scroll-margin-top: 120px; }
.nc-art-body h2 { font-size: 25px; margin: 44px 0 16px; padding-bottom: 10px; border-bottom: 1px solid #ececea; }
.nc-art-body h3 { font-size: 20px; margin: 34px 0 12px; }
.nc-art-body p { margin: 0 0 18px; }
.nc-art-body img { max-width: 100%; height: auto; display: block; margin: 22px 0; }
.nc-art-body ul, .nc-art-body ol { margin: 0 0 18px; padding-left: 24px; }
.nc-art-body li { margin-bottom: 8px; }
.nc-art-body a { color: var(--primary); }
.nc-art-body blockquote { margin: 22px 0; padding: 14px 20px; background: #f6f6f3; border-left: 3px solid var(--primary); color: #55554e; }
.nc-art-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; }
.nc-art-body th, .nc-art-body td { border: 1px solid #e2e2da; padding: 10px 12px; }
.nc-art-body th { background: #f6f6f3; font-weight: 700; }
.nc-art-related { background: #f6f6f3; padding: 96px 0 100px; }
.nc-art-svc { background: #fff; padding: 96px 0 100px; }
.nc-svc__cards { max-width: 780px; margin: 0 auto; }
.nc-svc { display: none; border: 1px solid #e2e2da; padding: 34px 36px; text-align: center; background: #fafaf8; }
.nc-svc h3 { font-size: 21px; font-weight: 900; color: #0c0c0c; margin-bottom: 10px; }
.nc-svc p { font-size: 14.5px; color: #6a6a63; line-height: 1.8; margin-bottom: 20px; }
.nc-art-cta { background: var(--primary); padding: 72px 0; }
.nc-art-cta__inner { text-align: center; }
.nc-art-cta__inner h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 900; color: #fff; margin-bottom: 12px; }
.nc-art-cta__inner p { font-size: 15px; color: rgba(255,255,255,.85); margin-bottom: 26px; }
.nc-art-cta__inner .tpl-btn--blue { background: #fff; color: var(--primary); }
.nc-art-cta__inner .tpl-btn--blue:hover { background: #eef4fd; }
@media (max-width: 640px) {
  .nc-art { padding: 40px 0 60px; }
  .nc-toc { padding: 16px 18px; }
}


/* ============================================================
   关于素豚 · 品牌页（大字号 + 黑白灰 + 品牌蓝 #076ce0）
   ============================================================ */
/* 01 品牌态度 */
.ab-hero { background: #f6f6f3; padding: 104px 0 100px; }
.ab-hero__inner { display: flex; align-items: center; gap: 70px; }
.ab-hero__copy { flex: 1 1 58%; }
.ab-hero__copy h1 { font-size: clamp(44px, 5.2vw, 68px); font-weight: 900; color: #0c0c0c; letter-spacing: -1px; line-height: 1.2; margin: 22px 0 22px; }
.ab-hero__sub { font-size: 19px; font-weight: 700; color: #3a3a34; line-height: 1.7; margin-bottom: 16px; }
.ab-hero__desc { font-size: 15.5px; line-height: 2; color: #6a6a63; max-width: 520px; }
.ab-hero__art { flex: 1 1 42%; }
.ab-hero__art img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: #fff; padding: 8px; box-shadow: 0 22px 44px rgba(0,0,0,.14); }

/* 02 名字故事 */
.ab-name { background: #fff; padding: 110px 0; }
.ab-name__inner { text-align: center; max-width: 760px; }
.ab-name__inner h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 900; color: #0c0c0c; letter-spacing: -.5px; margin: 20px 0 30px; }
.ab-name__lead { font-size: 20px; line-height: 2.1; color: #3a3a34; font-weight: 600; }
.ab-name__tail { font-size: 15.5px; line-height: 2; color: #8a8a82; margin-top: 28px; }

/* 03 我们做什么 */
.ab-work { background: #f6f6f3; padding: 96px 0 100px; }
.ab-work__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 44px; }
.ab-work__item { background: #fff; border: 1px solid #e2e2da; padding: 38px 30px; }
.ab-work__item b { display: block; font-size: 13px; font-weight: 900; letter-spacing: 3px; color: var(--primary); margin-bottom: 22px; }
.ab-work__item h3 { font-size: 22px; font-weight: 900; color: #0c0c0c; margin-bottom: 10px; }
.ab-work__item p { font-size: 14.5px; color: #6a6a63; }
.ab-work__more { text-align: center; }

/* 04 我们有什么不同 */
.ab-diff { background: #fff; padding: 96px 0 110px; }
.ab-diff__list { max-width: 900px; margin: 0 auto; }
.ab-diff__item { display: flex; gap: 40px; padding: 38px 0; border-bottom: 1px solid #ececea; align-items: flex-start; }
.ab-diff__item:last-child { border-bottom: 0; }
.ab-diff__item > span { font-size: 15px; font-weight: 900; color: var(--primary); min-width: 44px; letter-spacing: 1px; }
.ab-diff__item h3 { font-size: 23px; font-weight: 900; color: #0c0c0c; margin-bottom: 10px; }
.ab-diff__item p { font-size: 15px; line-height: 1.9; color: #6a6a63; max-width: 720px; }

/* 05 主理人 */
.ab-founder { background: #0c0c0c; color: #fff; padding: 110px 0; }
.ab-founder__inner { display: grid; grid-template-columns: 320px 1fr; gap: 70px; align-items: center; }
.ab-founder__sign b { display: block; font-size: clamp(64px, 8vw, 108px); font-weight: 900; letter-spacing: 4px; color: #fff; line-height: 1; }
.ab-founder__sign span { display: block; font-size: 13px; letter-spacing: 3px; color: #C6FF4A; font-weight: 700; margin-top: 14px; }
.ab-founder__lead { font-size: 21px; font-weight: 800; line-height: 1.9; color: #fff; margin-bottom: 18px; }
.ab-founder__body { font-size: 15.5px; line-height: 2; color: rgba(255,255,255,.7); margin-bottom: 26px; }
.ab-founder__quote { font-size: 17px; line-height: 1.9; color: var(--primary); font-weight: 700; border-left: 3px solid var(--primary); padding-left: 18px; }

/* 06 品牌历程（grid 三列时间轴） */
.ab-miles { background: #f6f6f3; padding: 96px 0 110px; }
.ab-miles__timeline { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 110px 60px 1fr; row-gap: 0; }
.ab-mile { display: contents; }
.ab-mile__year { font-size: 26px; font-weight: 900; color: #0c0c0c; text-align: right; padding: 26px 0; letter-spacing: 1px; }
.ab-mile__dot { justify-self: center; align-self: center; width: 12px; height: 12px; background: var(--primary); position: relative; }
.ab-mile__dot::before { content: ""; position: absolute; left: 5px; top: 12px; width: 2px; height: calc(100% + 40px); background: #d8d8d0; }
.ab-mile:last-child .ab-mile__dot::before { display: none; }
.ab-mile p { padding: 26px 0 26px 26px; font-size: 16px; line-height: 1.8; color: #3a3a34; align-self: center; }

/* 07 我们怎么工作 */
.ab-how { background: #fff; padding: 96px 0 100px; }
.ab-how__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 54px; }
.ab-how__step { border-top: 3px solid var(--primary); padding-top: 24px; }
.ab-how__step > span { font-size: 15px; font-weight: 900; color: var(--primary); letter-spacing: 2px; }
.ab-how__step h3 { font-size: 21px; font-weight: 900; color: #0c0c0c; margin: 12px 0 10px; }
.ab-how__step p { font-size: 14px; line-height: 1.9; color: #6a6a63; }
.ab-how__tail { text-align: center; font-size: 19px; font-weight: 800; color: #0c0c0c; line-height: 1.8; max-width: 620px; margin: 0 auto; }

/* 08 我们在意的几件小事 */
.ab-values { background: #f6f6f3; padding: 96px 0 100px; }
.ab-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ab-value { background: #fff; border: 1px solid #e2e2da; padding: 40px 30px; }
.ab-value b { display: block; font-size: 30px; font-weight: 900; color: #0c0c0c; margin-bottom: 14px; }
.ab-value p { font-size: 14.5px; line-height: 1.9; color: #6a6a63; }

/* 09 数据与信任 */
.ab-num { background: #fff; padding: 96px 0 110px; }
.ab-num__legal { margin-top: 28px; text-align: center; font-size: 13px; color: #9299A6; letter-spacing: .5px; }
.ab-num__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.ab-num__item b { display: block; font-size: clamp(56px, 7vw, 88px); font-weight: 900; color: var(--primary); letter-spacing: -2px; line-height: 1; margin-bottom: 16px; }
.ab-num__item p { font-size: 18px; font-weight: 800; color: #0c0c0c; margin-bottom: 10px; }
.ab-num__item span { font-size: 13.5px; color: #8a8a82; }

/* 10 联系合作 */
.ab-cta { background: #0c0c0c; color: #fff; padding: 112px 0; }
.ab-cta__inner { text-align: center; }
.ab-cta__inner h2 { font-size: clamp(38px, 5vw, 62px); font-weight: 900; letter-spacing: -.5px; line-height: 1.25; margin-bottom: 20px; }
.ab-cta__inner > p { font-size: 16px; color: rgba(255,255,255,.65); margin-bottom: 38px; }
.ab-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.ab-cta__actions .tpl-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.ab-cta__actions .tpl-btn--ghost:hover { background: #fff; color: #0c0c0c; }
.ab-cta__qr { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.ab-cta__qr img { width: 118px; height: 118px; background: #fff; padding: 6px; display: block; }
.ab-cta__qr span { font-size: 13px; color: rgba(255,255,255,.75); }

/* 关于页响应式 */
@media (max-width: 1100px) {
  .ab-work__grid { grid-template-columns: repeat(2, 1fr); }
  .ab-values__grid { grid-template-columns: repeat(2, 1fr); }
  .ab-how__steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .ab-num__grid { grid-template-columns: 1fr; gap: 54px; }
}
@media (max-width: 900px) {
  .ab-hero__inner { flex-direction: column; gap: 48px; }
  .ab-hero__art { max-width: 460px; width: 100%; }
  .ab-founder__inner { grid-template-columns: 1fr; gap: 44px; }
  .ab-miles__timeline { grid-template-columns: 84px 44px 1fr; }
}
@media (max-width: 640px) {
  .ab-hero { padding: 72px 0 66px; }
  .ab-hero__copy h1 { font-size: 40px; }
  .ab-work__grid, .ab-values__grid { grid-template-columns: 1fr; }
  .ab-how__steps { grid-template-columns: 1fr; }
  .ab-diff__item { flex-direction: column; gap: 14px; }
  .ab-miles__timeline { grid-template-columns: 64px 36px 1fr; }
  .ab-mile__year { font-size: 21px; }
}

/* ===== 新媒体运营 / 数字工具开发 服务页扩展 ===== */
.sv-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.sv-why-grid .sv-why-item { display: block; padding: 30px 0; }
.sv-svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sv-svc-grid--3 .sv-svc { padding-bottom: 34px; }
.sv-sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sv-sub-grid .sv-sub-plan { padding: 36px 28px; }
.sv-sub-price { font-size: 26px; font-weight: 900; color: #0c0c0c; margin: 10px 0 8px; }
.sv-sub-tags { font-size: 12.5px; color: #8a8a82; margin: 14px 0 22px; line-height: 1.8; }
.sv-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sv-work { position: relative; overflow: hidden; display: block; background: #0c0c0c; }
.sv-work img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform .5s ease; }
.sv-work:hover img { transform: scale(1.04); }
.sv-work__mask { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px; color: #fff; font-size: 15px; font-weight: 700; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.68)); }
.sv-process-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sv-cta .sv-block-head { margin-bottom: 0; }
.sv-statement__text { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; color: #fff; line-height: 1.35; letter-spacing: .5px; }

/* ===== 案例详情页（Project 版式） ===== */
.wk-detail-hero { background: #0c0c0c; color: #fff; padding: 130px 0 90px; }
.wk-detail-hero__inner { max-width: 1080px; }
.wk-detail-hero__title { font-size: clamp(38px, 5.2vw, 72px); font-weight: 900; line-height: 1.15; letter-spacing: .5px; margin-top: 26px; }
.wk-detail-hero__sub { margin-top: 20px; font-size: 17px; color: rgba(255,255,255,.62); line-height: 1.7; }
.wk-detail-hero__tags { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.wk-detail-hero__tag { font-size: 12.5px; font-weight: 700; letter-spacing: 2px; color: #C6FF4A; border: 1px solid rgba(198,255,74,.35); padding: 6px 14px; }
.wk-meta-bar { border-bottom: 1px solid #e2e2da; }
.wk-meta-bar__grid { display: grid; grid-template-columns: 2fr 2fr 1.6fr .8fr; gap: 24px; padding: 30px 0; }
.wk-meta-bar__item { display: flex; flex-direction: column; gap: 8px; }
.wk-meta-bar__label { font-size: 11.5px; font-weight: 800; letter-spacing: 3px; color: #9a9a90; }
.wk-meta-bar__item b { font-size: 16px; font-weight: 700; color: #0c0c0c; line-height: 1.5; }
.wk-story { padding: 90px 0 60px; }
.wk-story__inner { max-width: 860px; }
.wk-story__body .content { font-size: 16.5px; line-height: 2; color: #3a3a34; }
.wk-story__body .content h3 { margin: 36px 0 14px; font-size: 22px; font-weight: 800; color: #0c0c0c; }
.wk-story__body .content img { width: 100%; height: auto; margin: 26px 0; border-radius: 4px; }
.wk-visuals { background: #f6f6f3; padding: 90px 0 100px; }
.wk-section-head { margin-bottom: 40px; }
.wk-section-title { font-size: clamp(28px, 3.4vw, 42px); font-weight: 900; color: #0c0c0c; margin-top: 10px; }
.wk-visuals__main img { width: 100%; display: block; }
.wk-visuals__grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wk-visuals__grid img { width: 100%; display: block; }
.wk-more { padding: 90px 0 100px; }
.wk-more__next { margin-top: 64px; border-top: 1px solid #e2e2da; padding-top: 36px; }
.wk-more__label { font-size: 12px; font-weight: 800; letter-spacing: 3px; color: #9a9a90; margin-bottom: 14px; }
.wk-more__link { font-size: clamp(22px, 2.6vw, 34px); font-weight: 900; color: #0c0c0c; text-decoration: none; }
.wk-more__link:hover { color: #FF6A3D; }
.wk-more__link--muted { color: #9a9a90; }
.wk-cta { background: #0c0c0c; color: #fff; padding: 110px 0; text-align: center; }
.wk-cta__inner h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 900; }
.wk-cta__inner p { margin-top: 18px; font-size: 15.5px; color: rgba(255,255,255,.6); }
.wk-cta__actions { margin-top: 36px; }
.wk-btn--light { background: #fff; color: #0c0c0c; }
.wk-btn--light:hover { background: #C6FF4A; }
@media (max-width: 900px) {
  .wk-meta-bar__grid { grid-template-columns: 1fr 1fr; }
  .wk-visuals__grid { grid-template-columns: 1fr; }
}

/* ===== 套餐页服务边界 / 合作规则 ===== */
.pkg-bound { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.pkg-bound__col { border: 1px solid #e2e2da; padding: 28px 26px; background: #fff; }
.pkg-bound__col--x { background: #f6f6f3; }
.pkg-bound__col h4 { font-size: 16px; font-weight: 800; color: #0c0c0c; margin-bottom: 14px; }
.pkg-bound__col ul { list-style: none; margin: 0; padding: 0; }
.pkg-bound__col li { position: relative; padding: 7px 0 7px 26px; font-size: 13.5px; color: #5a5a52; line-height: 1.65; }
.pkg-bound__col li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #076ce0; }
.pkg-bound__col--x li::before { background: #FF6A3D; }
.pkg-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; width: 100%; }
.pkg-rules__item { border: 1px solid #e2e2da; padding: 22px 20px; background: #fff; }
.pkg-rules__item strong { display: block; font-size: 14.5px; font-weight: 800; color: #0c0c0c; margin-bottom: 8px; }
.pkg-rules__item p { font-size: 13px; color: #6a6a63; line-height: 1.7; margin: 0; }
@media (max-width: 900px) {
  .pkg-bound, .pkg-rules { grid-template-columns: 1fr; }
}