/*
Theme Name: 智连诺 Ankit
Theme URI: https://www.ailinkpromise.com/
Author: 智连诺 AI & Promise
Description: 智连诺官网主题。首屏与次页沿用 2026-10 定稿的视觉系统（Ankit 风格移植版）：同一套色板、同一套字阶（64/54/21/18）、大字号板块词、手绘笔刷、胶囊按钮与亮暗交替的板块节奏；含 309 个行业案例库（CPT: zln_case）与洞察文章模板。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: zln-ankit
*/

/* ==========================================================================
   以下为设计系统本体（与 prototype/design-ankit/ankit-style.html 同源）
   ========================================================================== */

/* ==========================================================================
   智连诺 · 首页 v2（Ankit 风格移植版）
   设计系统直接对齐 ankitdesigns.com：同一套色值、同一套字阶、同一种版式节奏。
   旧版保留在 index.html，本文件不影响它。
   ========================================================================== */

/* ---------- 1. 设计令牌（取自 ankitdesigns.com 实测计算值） ---------- */
:root{
  --red:#DF3824;          /* 主色：实测 rgb(223,56,36) */
  --red-dark:#C7291D;
  --red-soft:#E84B37;
  --ink:#414042;          /* 正文 rgb(65,64,66) */
  --ink-deep:#242425;
  --black:#0B0B0C;
  --teal:#5994A9;         /* 次级强调 rgb(89,148,169) */
  --teal-deep:#002626;
  --blue:#2B5881;
  --mist:#E4EAEC;         /* 浅底：原来 #F0F4F5 是 L*95.9，白底是 L*100——差 4，高亮屏上
                            看着就是白色。压到 L*92.2，才真能看出是块灰底。 */
  --line:#D2DBDF;         /* 轮廓/细线：必须跟着压深。否则灰底上的分隔线、
                            胶囊描边（原来是 #E1E6E8）会和底色差不到 2 个 L*，直接消失。 */

  --wrap:1312px;
  --pad:96px;             /* 板块上下内边距 */

  --f:'Noto Sans SC','PingFang SC','Hiragino Sans GB',system-ui,sans-serif;

  /* 字阶：参考站实测 72 / 54 / 21 / 18，正文用 Light */
  --fs-word:64px;
  --fs-h2:54px;
  --fs-h3:27px;
  --fs-label:21px;
  --fs-body:18px;
  --fs-small:15px;
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--f);font-size:var(--fs-body);font-weight:300;line-height:1.9;
  caret-color:var(--red);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- 3. 浏览器原生表面（细节底线） ---------- */
::selection{background:var(--red);color:#fff}
*{scrollbar-width:thin;scrollbar-color:#C9D2D6 transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C9D2D6;border:3px solid #fff;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--teal)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ---------- 4. 版式骨架 ---------- */
.wrap{width:min(var(--wrap),calc(100% - 128px));margin-inline:auto}
.section{padding:var(--pad) 0}
.section--mist{background:var(--mist)}
.section--dark{background:var(--black);color:#fff}
.section--tight{padding:calc(var(--pad) * .72) 0}

.label{
  font-size:var(--fs-label);font-weight:700;line-height:1.3;
  letter-spacing:.14em;color:var(--red);
}
.label--teal{color:var(--teal)}
.label--ink{color:var(--ink)}

.h2{
  font-size:var(--fs-h2);font-weight:600;line-height:1.22;letter-spacing:.01em;color:var(--ink);
}
.h2--white{color:#fff}
.h3{font-size:var(--fs-h3);font-weight:600;line-height:1.5;color:var(--ink)}

/* 大字号板块词（对应参考站的 OUR SERVICES / BUILDING IT RIGHT） */
.word{
  font-size:var(--fs-word);font-weight:900;line-height:1.1;
  letter-spacing:.12em;color:var(--red);margin:0;
}
.body{font-size:var(--fs-body);font-weight:300;line-height:1.95;color:var(--ink)}
.body b{font-weight:700;color:var(--ink)}
.section--dark .body{color:rgba(255,255,255,.86)}

.head{max-width:820px;display:flex;flex-direction:column;gap:14px;margin-bottom:56px}
.head--wide{max-width:1000px}

/* ---------- 5. 按钮：全站只有一种形状（30px 胶囊），颜色分家族 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px 17px;border:0;border-radius:30px;
  font-family:var(--f);font-size:var(--fs-small);font-weight:700;letter-spacing:.1em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s ease,background-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dark)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--mist)}
.btn--dark{background:var(--ink-deep);color:#fff}
.btn--dark:hover{background:#000}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.btn--ghost-ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost-ink:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- 6. 签名元素：手绘笔刷（参考站唯一的花活，全站只此一种） ---------- */
.brush{position:relative;display:inline-block;z-index:1;white-space:nowrap}
.brush::before{
  content:"";position:absolute;z-index:-1;
  left:-.09em;right:-.09em;top:.06em;bottom:-.02em;
  background:var(--red);
  /* 手绘笔刷：用不规则多边形模拟毛边，比贴图更轻也更可控 */
  clip-path:polygon(1% 8%,26% 4.5%,54% 9%,78% 5%,99% 10%,100% 50%,97.5% 91%,72% 95%,48% 91%,23% 95.5%,2% 91%,0% 49%);
}

/* ---------- 7. 导航 ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;gap:40px;
  padding:22px 64px;
  transition:background-color .3s ease,box-shadow .3s ease,padding .3s ease;
}
.nav.is-stuck{background:rgba(11,11,12,.92);backdrop-filter:blur(10px);padding:14px 64px;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex:none}
/* 品牌标志：单路径 evenodd，用 currentColor 上色，页头页脚共用 */
.nav__logobox{display:block;flex:none;line-height:0;color:var(--red);transition:transform .25s ease}
.nav__brand:hover .nav__logobox{transform:translateY(-1px)}
.brand-logo{display:block;width:60px;height:60px}   /* 46 → 60（×1.3） */
.nav__menu{display:flex;gap:34px;margin-left:auto}
.nav__menu a{
  font-size:14px;font-weight:700;letter-spacing:.11em;color:rgba(255,255,255,.88);
  text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:.25s;
}
.nav__menu a:hover{color:#fff;border-color:var(--red)}

/* 语言切换：右侧工具区里的胶囊分段控件（简 | 繁）。
 * 不是两段文字加一个斜杠——那样看着像多出来的两个菜单项。
 * 一个胶囊装着两个分段，当前语言用浅色填充，所以「现在在哪个语言」一眼能看出来。
 * 桌面在电话与 CTA 之间（CTA 仍收口在最右），手机上导航变抽屉，切换器跟着进抽屉。 */
.nav__lang{
  display:inline-flex;align-items:center;flex:none;
  padding:3px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  /* 压一层实底 + 模糊：首屏是自动播放的视频，纯描边在亮画面上会飘 */
  background:rgba(12,16,19,.58);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.nav__lang a{
  display:block;padding:4px 14px;border-radius:999px;border:0;
  font-size:12.5px;font-weight:500;letter-spacing:.05em;line-height:1.4;
  color:rgba(255,255,255,.58);text-decoration:none;
  transition:color .2s ease,background-color .2s ease;
}
.nav__lang a:hover{color:#fff}
.nav__lang a:focus-visible{outline:2px solid #FFD9D2;outline-offset:1px}
.nav__lang a[aria-current="page"]{color:#F2F5F6;background:rgba(255,255,255,.14)}
.nav__lang--bar{margin-left:-6px}
.nav__lang--panel{display:none}

@media (max-width:1100px){
  .nav__lang--bar{display:none}
  .nav.is-open .nav__lang--panel{display:inline-flex;align-self:flex-start;margin:10px 0 4px}
  .nav.is-open .nav__menu .nav__lang--panel{padding:3px}
  .nav.is-open .nav__menu .nav__lang--panel a{padding:6px 15px;font-size:14px}
}

.nav__tel{font-size:14px;font-weight:700;letter-spacing:.06em;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px}
.nav .btn{padding:12px 24px 14px}

/* ---------- 8. 首屏 ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  /* 上下内边距必须对称，否则 justify-content:center 的中心不是首屏正中 */
  padding:150px 0 150px;background:#0B0B0C;color:#fff;overflow:hidden;
  /* 文字块相对「首屏正中」再上移的量；只改这一个值即可微调 */
  --hero-lift:100px;
}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* 首屏：整屏放片子（2026-10-19）。
 * 片子自己的底色就是 #12181C，所以用 object-fit:contain 留出的那点空边和页面底色
 * 连成一片，看不出黑框；同时 16:9 的画面永远不会被裁掉内容（= 不会把“300”切掉）。
 * 兜底图盖满（cover），它只是 logo 收尾那一帧，裁一点不影响。 */
.hero--film{
  min-height:100vh;padding:0;background:#12181C;
  display:flex;align-items:center;justify-content:center;
}
/* 顶部压暗：导航是透明的，片子放到作品墙那段时下面全是亮色的截图，白字完全看不见。
 * 只压导航那一条，不碰画面主体。 */
.hero--film::after{
  content:"";position:absolute;left:0;right:0;top:0;height:230px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,17,.94) 0%,rgba(10,14,17,.62) 40%,rgba(10,14,17,0) 100%);
}
.hero__still,.hero__film{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__still{object-fit:cover}
.hero__film{object-fit:contain;z-index:1}
/* 窄屏 / 竖屏不放片子：16:9 的片子在 390 宽的屏上只有 219px 高，
 * 标题、数字、服务名全部糊成像素点，不如不放。
 * 改用收尾那一帧做满屏——logo、品牌名、域名本来就在正中间，
 * 竖着裁掉两边正好。想要手机上也有动效，得单独出一个 9:16 的剪版。
 *
 * 判据用「宽度 + 方向」而不是纯宽高比：1280×1024 那种 5:4 桌面
 * 宽高比已经低于 4:3，但它显然应该放片子。 */
@media (max-width:820px),(orientation:portrait){.hero__film{display:none}}
@media (prefers-reduced-motion:reduce){.hero__film{display:none}}

/* 可见文本的隐藏版：给搜索和读屏用 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 重播：片子播完才出现，右下角、在行业条上方
 * 不做循环——片子讲的是“一个 → 很多 → 六项 → 一个”，循环会把故事从中间掀断。
 * 状态写全：hover / active / focus-visible / 未出现(dfault) */
.hero__replay{
  position:absolute;right:64px;bottom:104px;z-index:4;
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 19px 12px;border-radius:999px;
  font:inherit;font-size:13px;font-weight:500;letter-spacing:.12em;color:#E6EBED;
  background:rgba(16,22,26,.68);border:1px solid #FFFFFF2E;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease,visibility .4s,background-color .2s ease,border-color .2s ease;
}
.hero__replay.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.hero__replay:hover{background:rgba(223,56,36,.96);border-color:#DF3824}
.hero__replay:active{transform:scale(.97)}
.hero__replay:focus-visible{outline:2px solid #FFD9D2;outline-offset:3px}
@media (max-width:1100px){.hero__replay{right:32px;bottom:96px}}
@media (prefers-reduced-motion:reduce){.hero__replay{transition:none}}

/* 客户条（对应参考站首屏底部 logo 墙） */
.rail{
  /* 客户条脱离文档流钉在首屏底部：留 auto-margin 会吃掉全部剩余空间，
     导致 justify-content:center 失效、首屏文字被顶到最上面 */
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  border-top:1px solid rgba(255,255,255,.12);background:rgba(8,9,10,.42);
  backdrop-filter:blur(6px);
}
.rail__inner{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:22px 0;flex-wrap:wrap}
.rail span{font-size:15px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.52);white-space:nowrap}

/* ---------- 9. 关于我们 ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:96px;align-items:center}
.about__text{display:flex;flex-direction:column;gap:24px}
.about__media{position:relative;justify-self:center}
.about__media img{width:340px;height:340px;max-width:none;object-fit:contain}
.about__link{
  display:inline-flex;align-items:center;gap:10px;margin-top:8px;width:fit-content;
  font-size:var(--fs-small);font-weight:700;letter-spacing:.1em;color:var(--red);text-decoration:none;
  box-shadow:inset 0 0 0 1.5px rgba(223,56,36,.5);border-radius:30px;padding:14px 26px 16px;transition:.25s;
}
.about__link:hover{background:rgba(223,56,36,.07);box-shadow:inset 0 0 0 1.5px var(--red);transform:translateY(-2px)}
.about__link svg{width:17px;height:17px;transition:transform .25s ease}
.about__link:hover svg{transform:translateX(3px)}

/* 数据条 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.stat b{display:block;font-size:46px;font-weight:900;line-height:1;color:var(--ink);letter-spacing:.01em}
.stat span{display:block;margin-top:12px;font-size:var(--fs-small);letter-spacing:.08em;color:var(--ink);opacity:.62}

/* ---------- 10. 案例卡片：截图在上，说明在图下（不再压在截图上） ---------- */
/* 案例图本身就是「满屏文字的网页截图」。说明文字压在图上会和页面自带的文字
   叠成两层，再加底部渐变遮罩，画面必然糊。所以：图只负责展示，说明落在图下方
   的页面底色上——任何截图、任何比例都不会再打架。 */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 26px;align-items:start}
.work{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.work__media{
  position:relative;overflow:hidden;border-radius:12px;aspect-ratio:445/560;background:var(--mist);
  box-shadow:0 26px 54px -40px rgba(23,30,34,.6),inset 0 0 0 1px rgba(23,30,34,.08);
}
/* 案例图是长截图，从顶部对齐显示——设计的重点都在最上面 */
.work__media img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .7s cubic-bezier(.22,1,.36,1),filter .5s ease;filter:saturate(.94);
}
.work:hover .work__media img{transform:scale(1.035);filter:saturate(1)}
.work__body{margin-top:18px}
.work__tag{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--red)}
.work__name{margin-top:8px;font-size:21px;font-weight:700;line-height:1.45;color:var(--ink);transition:color .22s ease}
.work:hover .work__name{color:var(--red)}
.work__desc{margin-top:8px;font-size:14px;font-weight:300;line-height:1.75;color:var(--ink);opacity:.6}

/* ---------- 11. 服务：六宫格（白卡 + 描边图标 + 青色小标题） ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc{
  background:#fff;border-radius:12px;padding:38px 34px 42px;
  box-shadow:0 18px 40px -30px rgba(23,30,34,.5);
  display:flex;flex-direction:column;gap:20px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.svc:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(23,30,34,.45)}
.svc svg{width:56px;height:56px;color:var(--teal);flex:none}
.svc h3{font-size:var(--fs-label);font-weight:700;line-height:1.35;letter-spacing:.06em;color:var(--teal)}
.svc p{font-size:16px;font-weight:300;line-height:1.9;color:var(--ink)}
/* 六宫格现在是 <a>，链到各自的服务详情页 */
.svc{text-decoration:none;color:inherit}
.svc__more{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--red);
}
.svc__more svg{width:15px;height:15px;flex:none;transition:transform .25s ease}
.svc:hover .svc__more svg{transform:translateX(4px)}

/* ---------- 12. 流程：左侧大标题 + 右侧手风琴（details 原生实现） ---------- */
.flow{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:80px;align-items:start}
.flow__list{border-top:1px solid var(--line)}
.step{border-bottom:1px solid var(--line)}
.step summary{
  display:grid;grid-template-columns:64px 1fr 24px;align-items:center;gap:18px;
  padding:26px 4px;cursor:pointer;list-style:none;
}
.step summary::-webkit-details-marker{display:none}
.step__no{font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--red)}
.step__title{font-size:22px;font-weight:600;color:var(--ink);transition:color .25s ease}
.step summary:hover .step__title{color:var(--red)}
.step__icon{position:relative;width:20px;height:20px;justify-self:end}
.step__icon::before,.step__icon::after{
  content:"";position:absolute;background:var(--ink);border-radius:2px;transition:transform .3s ease,background-color .3s ease;
}
.step__icon::before{left:0;top:9px;width:20px;height:2px}
.step__icon::after{top:0;left:9px;width:2px;height:20px}
.step[open] .step__icon::after{transform:scaleY(0)}
.step[open] .step__icon::before{background:var(--red)}
.step__body{padding:0 4px 30px 82px;font-size:16px;font-weight:300;line-height:1.95;color:var(--ink)}
.step__body ul{margin:0;padding-left:18px}

/* ---------- 13. 为什么选我们（深色 + 手风琴条） ---------- */
.why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:80px;align-items:start}
.why__text{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.why__text .h2{margin-bottom:2px}
.bars{display:flex;flex-direction:column;gap:12px}
.bar{background:#1A1A1B;border-radius:6px;overflow:hidden}
.bar summary{
  display:grid;grid-template-columns:34px 1fr;align-items:center;gap:14px;
  padding:20px 24px;cursor:pointer;list-style:none;
}
.bar summary::-webkit-details-marker{display:none}
.bar__pm{position:relative;width:16px;height:16px}
.bar__pm::before,.bar__pm::after{content:"";position:absolute;background:#fff;border-radius:2px}
.bar__pm::before{left:0;top:7px;width:16px;height:2px}
.bar__pm::after{top:0;left:7px;width:2px;height:16px;transition:transform .3s ease}
.bar[open] .bar__pm::after{transform:scaleY(0)}
.bar__title{font-size:16px;font-weight:700;letter-spacing:.1em;color:#fff}
.bar__body{padding:0 24px 24px 72px;font-size:15px;font-weight:300;line-height:1.9;color:rgba(255,255,255,.76)}

/* ---------- 14. 客户评价 ---------- */
.quote{display:flex;flex-direction:column;gap:26px;max-width:1020px}
.quote q{
  font-size:clamp(28px,3.2vw,44px);font-weight:600;line-height:1.45;color:#fff;quotes:none;
}
.quote q::before{content:'"';display:block;font-size:64px;line-height:.6;color:var(--red);margin-bottom:6px}
.quote figcaption{font-size:var(--fs-small);letter-spacing:.12em;color:rgba(255,255,255,.6)}

/* ---------- 15. 观点 / 博客 ---------- */
.blog{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.post-lead{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post-lead img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;filter:saturate(.9)}
.post-lead h3{margin-top:26px;font-size:34px;font-weight:600;line-height:1.4;color:var(--ink);transition:color .25s ease}
.post-lead:hover h3{color:var(--red)}
.post-lead p{margin-top:14px;font-size:16px;font-weight:300;line-height:1.9}
.post-meta{margin-top:18px;font-size:13px;letter-spacing:.08em;color:var(--ink);opacity:.6}
.post-list{border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:110px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:center}
.post img{width:110px;aspect-ratio:1;object-fit:cover;border-radius:8px;filter:saturate(.9)}
.post h3{font-size:19px;font-weight:600;line-height:1.5;color:var(--ink);transition:color .25s ease}
.post:hover h3{color:var(--red)}
.post span{font-size:13px;letter-spacing:.08em;color:var(--ink);opacity:.6}

/* ---------- 16. FAQ 两栏 ---------- */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
/* FAQ 模式：只有「标题 + 图标」两栏。.step summary 默认是流程用的三栏
   （编号/标题/图标），不覆写的话标题会被塞进 64px 那栏，一个字一行。 */
.faq-cols .step summary,.sp-faq .step summary{grid-template-columns:1fr 24px;padding:22px 4px}
.faq-cols .step__title,.sp-faq .step__title{font-size:18px}
.faq-cols .step__body,.sp-faq .step__body{padding:0 4px 24px}

/* ---------- 17. 结尾号召 ---------- */
.cta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta .h2{font-weight:700;max-width:820px}
.cta p{max-width:640px}

/* ---------- 18. 页脚 ---------- */
.foot{background:#0B0B0C;color:rgba(255,255,255,.72);padding:90px 0 40px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px}
.foot h4{font-size:14px;font-weight:700;letter-spacing:.14em;color:#fff;margin-bottom:20px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.foot a{font-size:15px;font-weight:300;color:rgba(255,255,255,.72);text-decoration:none;transition:color .25s ease}
.foot a:hover{color:var(--red-soft)}
.foot__brand{display:flex;flex-direction:column;gap:18px}
.foot__brand p{font-size:15px;font-weight:300;line-height:1.9;max-width:320px}
.foot__bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:70px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;color:rgba(255,255,255,.5);
}

/* ---------- 19. 滚动进入动效（参考站 animatedBlock 的克制版） ---------- */
/* 参考站实测：waypoints 触发 + opacity 0→1 + 位移，时长 1s，缓动 Power2.easeOut。
   这里沿用同一套语言，位移收敛到 20/30/44px——保留节奏，不制造"飘"。 */
.head--flush{margin-bottom:0}
@media print{
  .js [data-reveal]{opacity:1 !important;transform:none !important}
}
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{
    opacity:0;
    transform:translateY(var(--rv-y,30px));
    transition:opacity .9s cubic-bezier(.165,.84,.44,1),transform .9s cubic-bezier(.165,.84,.44,1);
    transition-delay:var(--rv-d,0ms);
  }
  .js [data-reveal].is-in{opacity:1;transform:none}
  .rv-sm{--rv-y:20px}
  .rv-lg{--rv-y:44px}
}

/* ---------- 20. 响应式（参考站是响应式的，这版也补上） ---------- */
@media (max-width:1100px){
  :root{--pad:72px;--fs-h2:40px;--fs-word:46px}
  .wrap{width:calc(100% - 72px)}
  .nav{padding:16px 36px}
  .nav__menu{display:none}
  .about,.flow,.why,.blog{grid-template-columns:1fr;gap:48px}
  .about__media{justify-self:start}
  .works,.svc-grid{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--pad:56px;--fs-h2:32px;--fs-word:38px;--fs-body:16px;--fs-label:16px}
  .wrap{width:calc(100% - 44px)}
  .nav{padding:14px 22px}
  .nav__tel{display:none}
  .works,.svc-grid,.faq-cols,.stats{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .hero{padding:120px 0 120px;--hero-lift:0px}
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1}
  .step summary{grid-template-columns:46px 1fr 24px}
  .step__body{padding-left:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ==========================================================================
   W 段：WordPress 主题补充样式（原型未覆盖的页面与组件）
   设计令牌沿用原型，不新增颜色。
   ========================================================================== */

/* ---------- W1 页面头 / 面包屑 / 通用块 ---------- */
/* 顶部内边距必须大于 fixed 导航的高度（桌面 ≈99px、移动端 ≈83px），
   否则标题会钻到菜单栏下面。
   居中而不是左对齐：导航菜单本身是居中的，首页首屏也是居中的，
   这里再左对齐就会和上面那行字「各对齐各的」，看着别扭。 */
.pagehead{
  position:relative;background:var(--black);color:#fff;
  padding:150px 0 calc(var(--pad) * 1.05);
  overflow:hidden;
}
/* 没图也没缩略图时，不要把 banner 留成死平的一大块黑，给一层极淡的斜向渐变 */
.pagehead::before{content:"";position:absolute;inset:0;transform:scale(1.18);background:linear-gradient(158deg,#191A1D 0%,#0B0B0C 62%)}
.pagehead__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(.5) brightness(.7)}
/* 案例详情页有真实照片时，不再把图压到 28% —— 那样照片白给。
   改成和首页首屏同一套做法：图满不透明，上面盖一层渐变黑纱保文字可读。 */
.pagehead--photo .pagehead__bg{opacity:1;filter:saturate(.72) contrast(1.04) brightness(.92)}
/* 没真照片时的色场：重度模糊后原图细节（包括字）全部消失，只剩颜色。
   不透明度要压得比照片低很多——截图本身可能是浅色的（如白底仪表盘），
   不压暗的话白字就压不住背景了。 */
.pagehead--photo .pagehead__bg--wash{opacity:.5;filter:blur(56px) saturate(1.5) brightness(.5)}
.pagehead__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.82) 0%,rgba(8,9,10,.58) 45%,rgba(8,9,10,.86) 100%)}
/* 层级：渐变底(0) < 背景图层(1) < 文字层(2) */
.pagehead > .pagehead__bg,.pagehead > .pagehead__veil{z-index:1}
.pagehead__inner{z-index:2}
.pagehead__inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.pagehead .label{color:#fff;opacity:.82}
.pagehead h1{font-size:clamp(32px,3.6vw,50px);font-weight:700;line-height:1.24;letter-spacing:.01em;color:#fff;max-width:900px;margin-inline:auto}
.pagehead p{max-width:760px;margin-inline:auto;color:rgba(255,255,255,.82);font-size:var(--fs-body);font-weight:300}
.pagehead .case-meta{justify-content:center;margin-top:2px}

/* 面包屑：banner 之外的独立一行，落在页面底色上——不属于标题区，就紧贴内容区。
   上下都要给内边距：下一块如果是有底色的 section（案例库是浅灰），
   它的背景从 section 顶边就开始了，面包屑不给 padding-bottom 就会贴到色块上。 */
.crumbline{padding:34px 0 30px}
.crumbline + .section{padding-top:28px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;line-height:1.5;color:var(--ink)}
.crumbs a{color:inherit;opacity:.6;text-decoration:none;transition:opacity .25s ease,color .25s ease}
.crumbs a:hover{opacity:1;color:var(--red)}
.crumbs .sep{opacity:.3}
.crumbs .here{opacity:.92}

.prose{max-width:820px}
.prose > * + *{margin-top:22px}
.prose h2{font-size:30px;font-weight:600;line-height:1.4;color:var(--ink);margin-top:48px}
.prose h3{font-size:23px;font-weight:600;line-height:1.45;color:var(--ink);margin-top:36px}
.prose h4{font-size:19px;font-weight:700;color:var(--ink);margin-top:28px}
.prose p{font-size:var(--fs-body);font-weight:300;line-height:1.95;color:var(--ink)}
.prose ul,.prose ol{padding-left:24px;font-size:var(--fs-body);font-weight:300;line-height:1.95;color:var(--ink)}
.prose li + li{margin-top:8px}
.prose blockquote{
  margin:36px 0;padding:26px 30px;background:var(--mist);border-radius:12px;
  font-size:19px;font-weight:300;line-height:1.85;color:var(--ink);
}
.prose img{border-radius:12px;margin:32px 0}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prose code{background:var(--mist);border-radius:5px;padding:2px 7px;font-size:.92em}
.prose pre{background:#141518;color:#e9e6e2;border-radius:12px;padding:22px 24px;overflow:auto;font-size:14px;line-height:1.7}
.prose pre code{background:none;padding:0;color:inherit}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left}
.prose th{font-weight:700;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:44px 0}

/* 首页案例组按钮 */
.case-cta-group{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
@media (max-width:640px){
  .case-cta-group .btn{width:100%;text-align:center;justify-content:center}
}

/* ---------- W2 案例：筛选 + 网格 ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.filters a,
.filters button{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:9px 18px;border-radius:30px;font-size:14px;font-weight:500;letter-spacing:.04em;
  color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .15s ease;
  border:0;cursor:pointer;font-family:inherit;line-height:1.4;
}
.filters a:hover,
.filters button:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-1px)}
.filters a.is-active,
.filters button.is-active{background:var(--red);color:#fff;box-shadow:none;transform:none}
.filters span{font-size:12px;opacity:.6}

.works--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 24px}
.works--grid .work__media{aspect-ratio:4/3}
.works--grid .work__body{margin-top:16px}
.works--grid .work__name{font-size:19px}
.works--grid .work__desc{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- W3 案例详情 ---------- */
.case-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.case-meta span{
  font-size:13px;letter-spacing:.06em;color:var(--ink);opacity:.72;
  padding:6px 14px;border-radius:30px;background:var(--mist);
}

/* 设计说明：左「标题 + 摘要 + 免责说明」、右「真实事实表」。
   摘要只在 pagehead 之外出现这一次——之前 pagehead 和正文里各贴一遍，读起来像报废了。 */
.case-brief{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:start;margin-bottom:34px}
.case-brief__main .h2{margin-bottom:20px}
.case-brief__lead{margin-top:0;font-size:var(--fs-body);font-weight:300;line-height:1.95;color:var(--ink);max-width:640px}

.case-facts{margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.case-facts > div{display:flex;flex-direction:column;gap:7px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.case-facts > div:last-child{padding-bottom:0;border-bottom:0}
.case-facts dt{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--red)}
.case-facts dd{margin:0;font-size:15px;font-weight:300;line-height:1.75;color:var(--ink)}

/* 「在新标签打开」出口：放在说明文字下方、iframe 上方。
   iframe 的体验天生不如原页（滚动、弹层、动效都受限），
   所以出路要在看到预览之前就摆出来，而不是等用户把嵌入页滚到底才找到。 */
.case-open{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.case-open__btn{flex:none}
.case-open__btn svg{width:15px;height:15px;flex:none;transition:transform .25s ease}
.case-open__btn:hover svg{transform:translate(2px,-2px)}

.case-shot{
  border-radius:14px;overflow:hidden;background:var(--mist);
  box-shadow:0 30px 60px -40px rgba(23,30,34,.6),inset 0 0 0 1px var(--line);
}
.case-shot img{width:100%;height:auto;display:block}

/* 在线预览：直接把演示页 iframe 嵌进来（原来这里是一张长截图）。
   固定一个「视口高」，框内自己滚——比一屏拉到底的长图好读，也能看动效。 */
.case-live{
  display:flex;flex-direction:column;
  border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 30px 60px -40px rgba(23,30,34,.6),inset 0 0 0 1px var(--line);
}
.case-live__frame{display:block;width:100%;height:min(78vh,880px);border:0;background:#fff}
.case-live__hint{margin-top:16px;font-size:14px;font-weight:300;line-height:1.8;color:var(--ink);opacity:.62}
.case-live__hint a{display:inline-flex;align-items:center;gap:5px;color:var(--red);text-decoration:none}
.case-live__hint a svg{width:13px;height:13px;flex:none;transition:transform .25s ease}
.case-live__hint a:hover{text-decoration:underline;text-underline-offset:3px}
.case-live__hint a:hover svg{transform:translate(2px,-2px)}

/* 咨询带：原来塞在 320px 的窄栏里，二维码只能缩到 120px、按钮却被迫撑满宽度。
   横排之后二维码放到 168px，按钮回到正常尺寸，三栏各管各的。 */
.case-cta{
  margin-top:56px;padding:34px 40px;
  display:grid;grid-template-columns:168px minmax(0,1fr) auto;gap:36px;align-items:center;
  background:var(--mist);border-radius:14px;
}
.case-cta__qr{width:168px;height:168px;object-fit:contain;background:#fff;border-radius:12px;padding:10px}
.case-cta__text h3{font-size:19px;font-weight:700;line-height:1.4;color:var(--ink)}
.case-cta__text p{margin-top:10px;font-size:15px;font-weight:300;line-height:1.85;color:var(--ink);opacity:.78;max-width:520px}
.case-cta__actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.case-cta__actions .btn{padding:12px 26px 14px;font-size:15px;white-space:nowrap}

/* 「浏览案例吧」：全页唯一的回头路，做得显眼一点 */
.case-more{margin-top:32px;display:flex;justify-content:center}
.case-more__link{
  display:inline-flex;align-items:center;gap:12px;
  padding:17px 38px 19px;border-radius:30px;
  font-size:17px;font-weight:700;letter-spacing:.02em;color:var(--ink);text-decoration:none;
  background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);
  transition:box-shadow .25s ease,color .25s ease,transform .25s ease;
}
.case-more__link svg{width:18px;height:18px;flex:none;transition:transform .25s ease}
.case-more__link:hover{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red);transform:translateY(-2px)}
.case-more__link:hover svg{transform:translateX(4px)}

/* ---------- W11 浏览器窗口外框（案例截图的「窗口」） ----------
   案例图是网页截图，卡片上给它套一层浏览器窗口：左上角 3 个圆点。
   案例没有真实网址，就不放地址栏——窗口感靠两件事成立：
   ① 圆点用 macOS 交通灯色（灰点不具备「窗口」语义）；
   ② 工具条要够「灰」且够「薄」：太浅会和卡片/页面的白底糊成一体，太厚就是一条肥横条。
   所以这里用 --mist 系的冷灰渐变（不是近白色），高度收到 28px，下沿一条实边。 */
.work__media{display:flex;flex-direction:column;background:#fff;box-shadow:0 1px 2px rgba(23,30,34,.05),0 24px 48px -34px rgba(23,30,34,.55),inset 0 0 0 1px rgba(23,30,34,.16)}
.work__media img{flex:1;min-height:0}

.bframe__bar{
  --bf-bar:28px;--bf-dot:10px;
  position:relative;z-index:1;flex:none;
  display:flex;align-items:center;gap:7px;
  height:var(--bf-bar);padding:0 12px;
  /* 比所在的 -mist 灰底再深一档：灰底上的「窗口标题条」才有上边可看。
     卡片自身：标题条比底色深、截图比底色浅，两头都立得住，中间再压一条实边。 */
  background:linear-gradient(180deg,#D9E2E5,#C7D3D9);
  border-bottom:1px solid #BCC9D0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.bframe__lights{flex:none;display:flex;align-items:center;gap:6px}
.bframe__dot{
  width:var(--bf-dot);height:var(--bf-dot);border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 .5px rgba(23,30,34,.18);
}
.bframe__dot:nth-child(1){background:#EC6A5F}
.bframe__dot:nth-child(2){background:#F4BF4F}
.bframe__dot:nth-child(3){background:#61C554}

/* ---------- W12 首页案例轮播 ----------
   用原生 CSS scroll-snap 做轨道，JS 只负责「自动播放 + 翻页按钮 + 到头禁用」。
   好处：触屏直接左右滑、键盘 Tab 能走、JS 挂了也还能横向滚动（只是没按钮）。 */

/* 箭头定位：.carousel__nav 铺满整层但不吃事件，只有两个按钮吃。
   按钮用 translate(∓(100% + --gap)) 推到轨道外面，还要再留一段空隙——
   光只推到边缘的话，离卡片还是太近。
   --tf 存整个基础 transform，:active 里的 scale 才能和位移叠在一起。

   视觉上就是一个纯尖括号：无底色、无描边、无投影。
   圆底白按钮是那种一看就是模板的写法，这里不要。 */
.carousel{position:relative}
.carousel__nav{position:absolute;inset:0;pointer-events:none;z-index:2}
.carousel__btn{
  --tf:translateY(-50%);
  --gap:clamp(10px, 1.2vw, 32px);
  position:absolute;top:40%;
  transform:var(--tf);
  pointer-events:auto;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
  color:var(--ink);opacity:.6;
  transition:color .22s ease,opacity .22s ease,transform .22s ease;
}
.carousel__btn svg{width:30px;height:30px}
/* 完整推到轨道外，并再让出 --gap 的空隙（--gap 会随宽度缩，否则 1101–1440
   那段 wrap 两侧只有 64px，固定 32px 空隙加到 44px 按钮上会顶出视口） */
.carousel__btn--prev{left:0;--tf:translate(calc(-100% - var(--gap)),-50%)}
.carousel__btn--next{right:0;--tf:translate(calc(100% + var(--gap)),-50%)}
.carousel__btn:hover{color:var(--red);opacity:1}
.carousel__btn:active{transform:var(--tf) scale(.9)}

/* overflow-x:auto 会把 overflow-y 也算成 auto，卡片的柔和投影会被裁掉，
   所以下面留 18px 给投影（就是阴影往下能溢出的量）。 */
.carousel__viewport{
  display:flex;gap:26px;padding-bottom:18px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.carousel__viewport::-webkit-scrollbar{display:none}
.carousel__viewport > .work{
  flex:0 0 calc((100% - 52px) / 3);   /* 一屏 3 张：扣掉 2 个 26px 间隙 */
  scroll-snap-align:start;
}
.carousel__viewport:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:12px}

/* ---------- W13 服务详情页（/services/<slug>/） ----------
   页面顺序按“买家想知道什么”排：
   这是不是我该看的 → 能拿到什么 → 包含哪些 + 多少钱 → 常见疑问 → 你们做过什么
   ────────────────────────────────────────────────────────── */
/* 总领：一句话 + 两列（能做到什么 / 一般怎么做） */
.sp-intro__lead{
  margin:0 0 40px;max-width:900px;
  font-size:clamp(19px,1.35vw,23px);font-weight:300;line-height:1.75;color:var(--ink);
}
.sp-intro__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.sp-intro__cols .h3{margin-bottom:22px}

/* 「通常能做到什么」：勾选列表 */
.sp-effects{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.sp-effects li{position:relative;padding-left:28px;font-size:16px;font-weight:300;line-height:1.85;color:var(--ink)}
.sp-effects li::before{
  content:"";position:absolute;left:2px;top:.62em;width:12px;height:7px;
  border-left:1.8px solid var(--red);border-bottom:1.8px solid var(--red);
  transform:rotate(-45deg);border-radius:1px;
}

/* 「一般怎么做」：编号三步，用线连起来 */
.sp-how{margin:0;padding:0;list-style:none;counter-reset:sp-how;display:flex;flex-direction:column;gap:18px}
.sp-how li{
  counter-increment:sp-how;position:relative;padding-left:46px;
  font-size:16px;font-weight:300;line-height:1.85;color:var(--ink);
}
.sp-how li::before{
  content:counter(sp-how);position:absolute;left:0;top:.1em;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);background:#fff;
}

/* 「什么时候该做」：一句话标题 + 两列情况列表 */
.sp-for .h3{margin-bottom:28px;max-width:760px}
.sp-for ul{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;
}
.sp-for li{position:relative;padding-left:28px;font-size:16px;font-weight:300;line-height:1.85;color:var(--ink)}
.sp-for li::before{
  content:"";position:absolute;left:2px;top:.62em;width:12px;height:7px;
  border-left:1.8px solid var(--teal);border-bottom:1.8px solid var(--teal);
  transform:rotate(-45deg);border-radius:1px;
}

.sp-deliver{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.sp-deliver .h3{margin-bottom:22px}
.sp-items{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.sp-items li{
  position:relative;padding:14px 18px 14px 44px;background:#fff;border-radius:10px;
  font-size:15px;font-weight:300;line-height:1.6;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.sp-items li::before{
  content:"";position:absolute;left:19px;top:1.25em;width:11px;height:6px;
  border-left:1.8px solid var(--teal);border-bottom:1.8px solid var(--teal);
  transform:rotate(-45deg);border-radius:1px;
}
.sp-price p{margin:0 0 24px;font-size:15px;font-weight:300;line-height:1.9;color:var(--ink);opacity:.78}

.sp-faq{max-width:900px;border-top:1px solid var(--line)}
.sp-more{margin-top:44px}
/* 枢纽页 /services/ 每项底下的两个按钮 */
.sp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

@media (max-width:1100px){
  .sp-intro__cols,.sp-deliver{grid-template-columns:1fr;gap:36px}
  .sp-for ul,.sp-items{grid-template-columns:1fr}
}

/* ---------- W4 文章 / 洞察 ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post-card__media{overflow:hidden;border-radius:12px;aspect-ratio:16/10;background:var(--mist)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.post-card:hover .post-card__media img{transform:scale(1.04)}
.post-card h3{margin-top:20px;font-size:21px;font-weight:600;line-height:1.5;color:var(--ink);transition:color .25s ease}
.post-card:hover h3{color:var(--red)}
.post-card p{margin-top:10px;font-size:15px;font-weight:300;line-height:1.85;color:var(--ink);opacity:.8}
.post-card__meta{margin-top:14px;font-size:13px;letter-spacing:.06em;color:var(--ink);opacity:.55}

.article-head{max-width:820px;display:flex;flex-direction:column;gap:18px;margin-bottom:40px}
.article-head h1{font-size:clamp(30px,3.4vw,46px);font-weight:700;line-height:1.3;color:var(--ink)}
.article-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;letter-spacing:.06em;color:var(--ink);opacity:.6}
.article-foot{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- W5 表单 ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.field input,.field textarea,.field select{
  font-family:var(--f);font-size:15px;font-weight:300;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 16px;
  transition:border-color .22s ease,box-shadow .22s ease;caret-color:var(--red);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(223,56,36,.12);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.8}
.form .btn{justify-self:start}
.form-note{font-size:13px;line-height:1.8;color:var(--ink);opacity:.6;margin-top:6px}

.info-list{display:flex;flex-direction:column;gap:22px}
.info-list__item{display:flex;gap:14px;align-items:flex-start}
.info-list__item svg{width:20px;height:20px;flex:none;color:var(--red);margin-top:4px}
.info-list__item b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.info-list__item span{display:block;font-size:15px;font-weight:300;line-height:1.8;color:var(--ink);opacity:.78}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:start}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mini-card{background:#fff;border-radius:12px;padding:28px;box-shadow:0 18px 40px -30px rgba(23,30,34,.5);display:flex;flex-direction:column;gap:12px}
.mini-card h3{font-size:17px;font-weight:700;color:var(--ink)}
.mini-card p{font-size:15px;font-weight:300;line-height:1.85;color:var(--ink);opacity:.82}

/* ---------- W6 分页 ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:56px}
.pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;
  border-radius:30px;text-decoration:none;font-size:15px;font-weight:600;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);background:#fff;transition:.22s;
}
.pager .page-numbers:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.pager .page-numbers.current{background:var(--red);color:#fff;box-shadow:none}
.pager .dots{box-shadow:none;background:none}

/* ---------- W7 移动端导航 ---------- */
.nav__toggle{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer;padding:0}
.nav__toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;margin:5px auto;transition:.28s}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1100px){
  .two-col,.case-brief{grid-template-columns:1fr;gap:34px}
  /* 咨询带：横排挤不下就改竖排，二维码居中 */
  .case-cta{grid-template-columns:1fr;gap:28px;padding:32px 30px;text-align:center;justify-items:center}
  .case-cta__text p{max-width:none}
  .case-cta__actions{width:100%;max-width:340px}
  .case-cta__actions .btn{width:100%}
  .carousel__viewport > .work{flex:0 0 calc((100% - 26px) / 2)}
  /* ≤1100 时 wrap 两侧只剩 36px，推不到轨道外面去，所以箭头改放轨道下方居中——
     宁可换位置，也不压在案例本身上。 */
  .carousel__nav{position:static;inset:auto;display:flex;justify-content:center;gap:26px;padding-top:8px}
  .carousel__btn{position:static;--tf:translate(0,0);width:44px;height:44px}
  .carousel__btn svg{width:28px;height:28px}
  .carousel__btn{width:46px;height:46px}
  .post-grid{grid-template-columns:1fr 1fr}
  .works--grid{grid-template-columns:1fr 1fr}
  .pagehead{padding-top:140px}
}
@media (max-width:720px){
  .nav__toggle{display:block;margin-left:auto}
  .nav.is-open{background:rgba(11,11,12,.97)}
  .nav.is-open .nav__menu{
    display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;
    background:rgba(11,11,12,.97);padding:12px 22px 24px;
  }
  .nav.is-open .nav__menu a{border-bottom:1px solid rgba(255,255,255,.08);padding:14px 0;font-size:15px}
  .nav.is-open .btn{display:none}
  .works--grid,.post-grid,.cards-2,.form{grid-template-columns:1fr}
  .case-brief{margin-bottom:30px}
  .case-open{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
  .case-cta{padding:28px 22px}
  .case-cta__qr{width:150px;height:150px}
  .case-more__link{width:100%;justify-content:center;padding:15px 24px 17px;font-size:16px}
  .bframe__bar{--bf-bar:24px;--bf-dot:8px;gap:5px;padding:0 10px}
  .case-live__frame{height:70vh}
  .carousel__viewport > .work{flex:0 0 100%;scroll-snap-align:start}
}

/* ---------- W8 管理条 / 工具 ---------- */
body.admin-bar .nav{top:32px}
@media screen and (max-width:782px){body.admin-bar .nav{top:46px}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.center{text-align:center}
.mt-0{margin-top:0}

/* ==========================================================================
   W9 导航：服务项目（三档）
   ≤1100  汉堡菜单，服务作为子列表展开
   1101–1439 一级放「服务项目」下拉
   ≥1440  六项服务直接铺成一级
   ========================================================================== */
.nav__group{position:relative;display:flex;align-items:center}
.nav__groupbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:4px 0;cursor:pointer;white-space:nowrap;flex:none;
  font-family:var(--f);font-size:14px;font-weight:700;letter-spacing:.11em;color:rgba(255,255,255,.88);transition:color .25s ease}
.nav__groupbtn:hover{color:#fff}
.nav__groupbtn svg{width:10px;height:10px;flex:none;transition:transform .25s ease}
.nav__group.is-open .nav__groupbtn{color:#fff}
.nav__group.is-open .nav__groupbtn svg{transform:rotate(180deg)}
.nav__grouplabel{display:none}
.nav__panel{display:none}
.nav__group.is-open .nav__panel{display:flex;flex-direction:column;position:absolute;top:calc(100% + 16px);left:-16px;
  min-width:290px;padding:10px;background:#141518;border-radius:12px;box-shadow:0 30px 60px -24px rgba(0,0,0,.75);z-index:6}
.nav__panel a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:8px;
  font-size:15px;font-weight:600;letter-spacing:0;color:#fff;text-decoration:none}
.nav__panel a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav__panel a b{font-weight:600}
.nav__panel a span{font-size:12px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.5)}

@media (min-width:1600px){
  .nav{gap:24px}
  .nav__menu{gap:20px}
  .nav__menu>a{flex:none;white-space:nowrap}
  .nav__tel{display:none}
  .nav__group{display:contents}
  .nav__groupbtn,.nav__grouplabel{display:none}
  .nav__panel,.nav__group.is-open .nav__panel{display:flex;flex-direction:row;position:static;min-width:0;padding:0;
    background:none;box-shadow:none;border-radius:0;gap:20px}
  .nav__panel a{padding:4px 0;border-radius:0;font-size:14px;font-weight:700;letter-spacing:.11em;white-space:nowrap;flex:none}
  .nav__panel a:hover{background:none}
  .nav__panel a span{display:none}
}

@media (max-width:1100px){
  .nav__toggle{display:block}
  .nav__menu{display:none}
  .nav.is-open .nav__menu{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;
    background:rgba(11,11,12,.97);padding:12px 22px 26px;max-height:calc(100svh - 90px);overflow-y:auto}
  .nav.is-open .nav__menu>a{display:block;padding:14px 0;font-size:15px;letter-spacing:.02em;
    border-bottom:1px solid rgba(255,255,255,.08)}
  .nav.is-open .nav__tel{display:none}
  .nav.is-open .btn{display:none}
  .nav__group{display:block}
  .nav__grouplabel{display:block;padding:16px 0 6px;font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.45)}
  .nav__groupbtn{display:none}
  .nav__panel,.nav__group.is-open .nav__panel{display:flex;flex-direction:column;position:static;padding:0 0 0 12px;
    background:none;box-shadow:none;min-width:0;gap:0}
  .nav.is-open .nav__menu .nav__panel a{display:flex;flex-direction:column;padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__panel a span{display:none}
}

/* ==========================================================================
   W10 大屏导航：字号与间距跟随分辨率，且不再把空白全堆在品牌右侧
   （4096 宽的屏上，原来的 14px/20px 显得又小又挤，左边却空着两千像素）
   ========================================================================== */
@media (min-width:1101px){
  /* 字号与间距用「vw + 常数」：2000 以上就开始长，不是等到 3000 才动 */
  .nav{padding:22px clamp(24px, 1.7vw, 110px); gap:clamp(20px, 1.8vw, 56px)}
  .nav.is-stuck{padding:14px clamp(24px, 1.7vw, 110px)}
  .nav__menu{gap:clamp(16px, 1.15vw, 46px); margin-left:auto; margin-right:auto}
  .nav__menu>a,.nav__groupbtn,.nav__panel a,.nav__tel{font-size:clamp(14px, 0.55vw + 6px, 19px)}
  /* 46→60 / 58→75：整体 ×1.3，中段的 vw 系数也跟着乘 */
  .brand-logo{width:clamp(60px, 0.65vw + 52px, 75px); height:clamp(60px, 0.65vw + 52px, 75px)}
  .nav .btn{padding:12px clamp(24px, 1vw + 12px, 44px) 14px}
  .nav__panel,.nav__group.is-open .nav__panel{gap:clamp(16px, 1.15vw, 46px)}
}

/* 4K 屏上空间足够，电话重新显示（放最后，覆盖 ≥1600 的隐藏规则） */
@media (min-width:2400px){
  .nav .nav__tel{display:flex}
}

/* 案例详情页事实表里的「这一类的做法」内链 */
.case-facts__link{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(223,56,36,.35);transition:border-color .22s ease}
.case-facts__link:hover{border-bottom-color:var(--red)}

/* ==========================================================================
   W14 自研工具（/tools/）+ 案例／工具分段切换器
   ──────────────────────────────────────────────────────────────────────────
   为什么要有分段切换器：/cases/ 和 /tools/ 是一条线上的两个类目
   （给别人做的网站 / 我们自己造的东西）。两页在同一位置放同一个控件，
   访客才知道「还有另一半」，产品也才不会被误当成建站案例。

   为什么工具卡是图标底板而不是截图：工具没有「网页」可截。
   硬塞一张截图反而假；一个干净的色板 + 真图标，是 App Store 那套语言，
   而且一屏九张不会花。

   为什么多一行 .work__meta：这批工具没有 star、没有下载量（都还没上商店）。
   没有客观数字时，就退一步给「技术栈 · 时间」——它同样能回答
   「这东西是个真的、做完的、还在动的东西吗」。
   ========================================================================== */

/* 分段控件：白底容器 + 深色当前项。
   不用主色红：红在这个站上是「筛选被选中」的语义（.filters a.is-active），
   两个红色胶囊上下叠着会分不清谁管什么。切换器用墨色，筛选用红色。 */
.seg{
  display:inline-flex;align-items:center;flex:none;
  padding:4px;margin-bottom:22px;border-radius:999px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);
}
.seg a{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:9px 20px 10px;border-radius:999px;text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:.05em;line-height:1.4;
  color:var(--ink);opacity:.6;
  transition:background-color .22s ease,color .22s ease,opacity .22s ease;
}
.seg a span{font-size:12px;font-weight:400;opacity:.7}
.seg a:hover{opacity:1}
.seg a[aria-current="page"]{background:var(--ink-deep);color:#fff;opacity:1}
.seg a[aria-current="page"] span{opacity:.62}
.seg a:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* 工具卡：底板 + 居中真图标 或 高保真场景效果网图 */
.work--tool{text-decoration:none;color:inherit;transition:opacity .25s ease,transform .25s ease}
.work--tool.is-hidden{display:none !important}
.work--tool .work__media{
  position:relative;
  display:grid;place-items:center;
  aspect-ratio:4/3;border-radius:14px;
  background:radial-gradient(118% 100% at 50% -6%, #FBFDFD 0%, var(--mist) 58%, #D7E1E4 100%);
  box-shadow:0 1px 2px rgba(23,30,34,.05),0 24px 48px -34px rgba(23,30,34,.55),inset 0 0 0 1px rgba(23,30,34,.16);
  overflow:hidden;
}
.work--tool .work__media--preview{
  display:block;padding:0;background:#F0F3F6;
}
.work--tool .work__media--preview img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:none;flex:none;transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.work--tool:hover .work__media--preview img{transform:scale(1.03)}
.work__badge{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:3px 8px;border-radius:6px;
  background:rgba(23,30,34,.85);color:#fff;backdrop-filter:blur(4px);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.work__pain{
  margin-top:8px;font-size:12.5px;font-weight:600;line-height:1.45;
  color:var(--red);background:rgba(223,56,36,.06);
  padding:4px 9px;border-radius:6px;display:inline-block;
  border-left:2.5px solid var(--red);
}
.work__media-fallback{
  font-size:32px;font-weight:700;letter-spacing:.05em;color:var(--ink);opacity:.35;
}
/* 全局 .work__media img 有 flex:1 —— 这里是 grid，显式给尺寸免得被拉伸 */
.work--tool .work__media--plate img{
  flex:none;width:112px;height:112px;object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(23,30,34,.16));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.work--tool:hover .work__media--plate img{transform:translateY(-5px) scale(1.04)}
.work--tool[aria-disabled="true"]{cursor:default}
.work--tool[aria-disabled="true"]:hover .work__name{color:var(--ink)}
.work--tool[aria-disabled="true"] .work__go{color:var(--ink);opacity:.42}

.work__meta{margin-top:10px;font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--ink);opacity:.5}
.work__go{
  margin-top:14px;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--red);
}
.work__go svg{width:13px;height:13px;flex:none;transition:transform .25s ease}
.work:hover .work__go svg{transform:translate(2px,-2px)}

/* 页尾那句「副产品」：这一页真正想说的话，别和卡片混在一起 */
.tools-note{
  margin-top:56px;max-width:720px;
  font-size:15px;font-weight:300;line-height:1.95;color:var(--ink);opacity:.72;
}
.tools-note a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(223,56,36,.35);transition:border-color .22s ease}
.tools-note a:hover{border-bottom-color:var(--red)}

@media (max-width:720px){
  .seg{display:flex;width:100%}
  .seg a{flex:1;justify-content:center;padding:9px 12px 10px}
  .work--tool .work__media img{width:96px;height:96px}
}