@charset "UTF-8";
/* ==========================================================================
   Apple 风格设计系统 × 新片场细节 × iOS 27 液态玻璃
   语言要点：极简 / 超大排版 / 全出血大图 / 灰白#f5f5f7与深色交替 / 大圆角卡片
             / 液态玻璃材质（半透明 + 镜面高光边 + 浮动投影）/ 胶囊按钮
   色彩：主强调色取自新片场品牌红 #E74B3B；深色面 #1C1C1E / #262626
   结构：变量 → 基础 → 排版 → 组件 → 模块 → 动效 → 响应式
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 颜色：Apple 常用色板 + 新片场品牌红 */
  --black: #000000;
  --ink: #1d1d1f;              /* 主文字 */
  --ink-2: #6e6e73;            /* 次级文字 */
  --ink-3: #86868b;            /* 弱化文字 */
  --gray: #f5f5f7;             /* Apple 标志性浅灰底 */
  --gray-2: #e8e8ed;           /* 分隔线/边框 */
  --white: #ffffff;
  --on-dark: #f5f5f7;          /* 深色区块主文字 */
  --on-dark-2: #a1a1a6;        /* 深色区块次级文字 */
  --blue: #e74b3b;             /* 主强调色：新片场品牌红（按钮 / 链接 / 图标） */
  --blue-hover: #fd4747;       /* 悬浮加深 */
  --blue-dark: #ff7a6b;        /* 深色背景上的亮红 */
  --tag: #e74b3b;              /* 小标签色，与主强调统一 */
  --surface-dark: #1c1c1e;     /* 深色面（新片场深卡） */
  --surface-dark-2: #262626;   /* 深色浮层（新片场下拉/浮层原值） */

  /* 液态玻璃材质（iOS 27 Liquid Glass 的 CSS 近似，按 WWDC26 更新版调校）：
     半透明底 + backdrop 模糊饱和（折射均匀，背后复杂内容也能压住、保证可读性）+
     顶部镜面高光边 + 底部压暗边（iOS 27 新增的 darkened edge，玻璃片有厚度）+
     斜向光泽 + 浮动投影；
     材质分两档：clear（更透，导航/浮层/胶囊）与 tinted（更着色，内容卡），
     对应 iOS 27「设置-外观」中 Liquid Glass 透明度滑杆的两端 */
  --glass-blur: 30px;
  --glass-tint: rgba(255, 255, 255, .62);          /* tinted 档：内容卡 */
  --glass-tint-clear: rgba(255, 255, 255, .46);    /* clear 档：导航/浮层/胶囊 */
  --glass-tint-strong: rgba(255, 255, 255, .74);
  --glass-tint-dark: rgba(28, 28, 30, .78);        /* 深色玻璃底（#1C1C1E 78%，坐在浅灰区块上也足够深） */
  --glass-tint-dark-clear: rgba(22, 22, 23, .58);  /* 深色 clear 档：深色浮层 */
  --glass-tint-dark-strong: rgba(20, 20, 22, .84);
  --glass-line: rgba(0, 0, 0, .08);                /* 浅色发丝线 */
  --glass-line-dark: rgba(255, 255, 255, .12);     /* 深色发丝线（新片场 white/10）*/
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 45%);
  /* iOS 27 边缘光影：亮镜面高光（顶）+ 压暗边（底）→ 玻璃有厚度、有分离感 */
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 2px rgba(0, 0, 0, .06);
  --glass-edge-hover: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 2px rgba(0, 0, 0, .09);
  --glass-edge-dark: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 2px rgba(0, 0, 0, .45);

  /* 圆角：Apple 用 18px（小卡）与 28px（大区块） */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 28px;
  --pill: 980px;

  --container: 1240px;
  --gutter: 22px;
  --nav-h: 60px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* Apple 常用的缓出曲线 */
  --ease: cubic-bezier(.28, .11, .32, 1);
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }
/* 移动端点按优化：去掉双击缩放延迟与高亮闪块 */
a, button, [role="button"], .client, .work { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 0, 0, .06); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; height: auto; }
a { color: var(--blue); text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
::selection { background: rgba(231, 75, 59, .2); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- 3. 排版层级 ---------- */
/* Hero 级：Apple 首页标题 56-96px */
.t-hero {
  font-size: clamp(40px, 7.2vw, 96px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 600;
}
/* 区块大标题：40-64px */
.t-display {
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.07;
  letter-spacing: -.028em;
  font-weight: 600;
}
/* 卡片标题：24-32px */
.t-title {
  font-size: clamp(21px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 600;
}
/* 副标题：Apple 的 subhead，21-28px，灰色 */
.t-sub {
  font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.3;
  letter-spacing: -.012em;
  font-weight: 400;
  color: var(--ink-2);
}
.t-body { font-size: 17px; line-height: 1.47; color: var(--ink-2); }
.t-small { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
/* Apple 的小标签 */
.t-tag {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--tag);
  text-transform: none;
}
.on-dark { color: var(--on-dark); }
.on-dark .t-sub, .on-dark .t-body, .on-dark .t-small { color: var(--on-dark-2); }

/* ---------- 4. 布局 ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* Apple 的区块节奏：大量留白 */
.section { padding: clamp(72px, 10vw, 140px) 0; }
.section--gray { background: var(--gray); }
.section--black { background: var(--black); color: var(--on-dark); }
.section--tight { padding: clamp(48px, 6vw, 88px) 0; }

.head { max-width: 880px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.head--left { margin-left: 0; text-align: left; }
.head .t-sub { margin-top: 18px; }
.head__tag { margin-bottom: 14px; }

/* ---------- 5. 按钮（Apple 胶囊按钮） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 12px 23px;
  border-radius: var(--pill);
  font-size: 17px; font-weight: 400; letter-spacing: -.01em;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); }
.btn--primary:active { transform: scale(.98); }
.btn--dark { background: #fff; color: var(--ink); }
.btn--dark:hover { background: rgba(255, 255, 255, .88); }
/* 液态玻璃按钮：半透明底 + 镜面高光边 + 底部压暗边 + 浮动投影 */
.btn--outline {
  border: 1px solid var(--glass-line);
  color: var(--ink);
  background-color: var(--glass-tint);
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--glass-edge), 0 6px 18px rgba(0, 0, 0, .07);
}
/* 交互高光响应（iOS 27 interactive highlights）：悬停时高光边提亮 */
.btn--outline:hover { border-color: rgba(0, 0, 0, .2); box-shadow: var(--glass-edge-hover), 0 8px 22px rgba(0, 0, 0, .1); }
.btn--on-dark {
  border: 1px solid var(--glass-line-dark);
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 45%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--glass-edge-dark), 0 8px 20px rgba(0, 0, 0, .28);
}
.btn--on-dark:hover { border-color: rgba(255, 255, 255, .28); background-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 2px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .28); }
.btn--sm { min-height: 38px; padding: 9px 18px; font-size: 15px; }
.btn--block { width: 100%; }
.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* Apple 式文字链接 */
.link {
  color: var(--blue); font-size: 17px;
  display: inline-flex; align-items: center; gap: 4px;
}
.link:hover { text-decoration: underline; }
.link .arrow { transition: transform .3s var(--ease-out); }
.link:hover .arrow { transform: translateX(4px); }
.link--on-dark { color: var(--blue-dark); }

/* ---------- 6. 导航（iOS 27 液态玻璃） ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--nav-h);
  background: var(--glass-tint-clear);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
  border-bottom: 1px solid var(--glass-line);
  /* 液态玻璃标志（iOS 27）：顶部镜面高光边 + 底部压暗边，玻璃有厚度 */
  box-shadow: var(--glass-edge);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* 深色 Hero 上方时导航反白，玻璃换深色 clear 档 tint */
.site-header.is-over-dark {
  background: var(--glass-tint-dark-clear);
  border-bottom-color: rgba(255, 255, 255, .1);
  box-shadow: var(--glass-edge-dark), 0 8px 24px rgba(0, 0, 0, .25);
}
.site-header.is-over-dark .nav__link { color: rgba(255, 255, 255, .92); }
.site-header.is-over-dark .nav__link:hover { background: rgba(255, 255, 255, .12); }
.site-header.is-over-dark .nav-toggle span { background: #fff; }
.site-header.is-over-dark .btn--sm { background: #fff; color: var(--ink); }

.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Logo 体系（2026-10-22 定稿）：
   页头 = v5 横向锁定（红点镜头相机 + 中文「皇也传媒」+ 底部小拼音 HUANGYE MEDIA），深浅底各一版，
         随导航 is-over-dark 切换；页脚 = 无相机标的中文+拼音字标；favicon/社媒头像 = 红点镜头相机标。
   历史版本（v1..v5 拼音版）全部保留在 assets/images/ 不删，需回退只改文件名即可。 */
/* 2026-10-22：页头换成 v5 红点镜头相机 + 中文「皇也传媒」+ 底部 HUANGYE 大字拼音（矢量字标、红 E）。
   v6 横向锁定 B：相机皇 + 也 + 传媒(小一号底对齐) + 底部宽字距拼音。
   2026-10-22 尺寸修正：原 SVG 画布 198.9x120 上下各留 22.5u 空白（墨迹仅占 61%），
   height:44px 下墨迹只有 26.8px、中文主体 19px，比 15px 导航文字大不了一点点，视觉过小。
   改用紧画布版（viewBox 收到墨迹，墨迹占比 93.6%）并放大：
   锁高 48px（墨高 = 48px，页头 60px 的 80%，上下各 6px 呼吸），锁宽 ≈120px，中文 ink ≈32px、拼音 cap ≈6.7px。 */
.logo__lockup { height: 48px; width: auto; display: block; flex: none; }
.logo__lockup--on-dark { display: none; }
.site-header.is-over-dark .logo__lockup--on-light { display: none; }
.site-header.is-over-dark .logo__lockup--on-dark { display: block; }
/* 页脚字标：同一枚紧画布 SVG，36px 高（视觉墨高 36px，比旧 40px 画布版大 34%） */
.logo__wordmark { height: 36px; width: auto; display: block; flex: none; }

/* 导航字号对齐新片场主链接（其实测 16px，取 15px 平衡精致感与可读性） */
.nav { display: flex; align-items: center; gap: 2px; }
.nav__link {
  padding: 8px 13px; border-radius: var(--pill);
  font-size: 15px; color: rgba(0, 0, 0, .8); letter-spacing: 0;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.nav__link:hover { background: rgba(0, 0, 0, .06); }
.nav__link.is-active { color: var(--ink); font-weight: 500; }
.nav__cta { margin-left: 6px; }

/* 语言切换：玻璃分段控件 */
.lang-switch {
  display: inline-flex; align-items: center; gap: 1px;
  margin: 0 6px; padding: 2px;
  border-radius: var(--pill);
  background: rgba(0, 0, 0, .05);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: var(--glass-edge);
}
.lang-switch__btn {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  padding: 4px 10px; border-radius: var(--pill);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.3;
  letter-spacing: .01em; color: rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.lang-switch__btn:hover { color: rgba(0, 0, 0, .85); }
.lang-switch__btn.is-on { background: var(--ink); color: #fff; }
.site-header.is-over-dark .lang-switch { background: rgba(255, 255, 255, .16); box-shadow: var(--glass-edge-dark); }
.site-header.is-over-dark .lang-switch__btn { color: rgba(255, 255, 255, .75); }
.site-header.is-over-dark .lang-switch__btn.is-on { background: #fff; color: var(--ink); }
.lang-switch--mobile { margin: 16px 0 4px; }

.nav-toggle { display: none; width: 38px; height: 38px; border-radius: 50%; flex-direction: column; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s; }
.nav-toggle span + span { margin-top: 6px; }
/* 只保留上下两条杠：中间那条隐藏，两条更轻爽 */
.nav-toggle span:nth-child(2) { display: none; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* 移动端全屏菜单（iOS 式：从顶部展开、大字号，整层液态玻璃） */
.mobile-nav {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 75;
  background: rgba(250, 250, 252, .68);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  backdrop-filter: blur(32px) saturate(1.8);
  box-shadow: var(--glass-edge);
  padding: 30px var(--gutter) 48px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), visibility .3s;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav a {
  display: block; padding: 14px 0; font-size: 24px; font-weight: 500;
  letter-spacing: -.02em; color: var(--ink);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.mobile-nav .btn { display: flex; width: 100%; margin-top: 28px; padding: 15px 23px; min-height: 52px; font-size: 18px; }

/* 顶部滚动进度线 */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 90;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  transition: width .1s linear;
}

/* ---------- 7. Hero（全屏沉浸式 + 视差） ---------- */
/* 不满屏：让下一节「精选作品」在首屏底部探出标题，用户一眼知道页面可以继续下滑 */
.hero {
  position: relative;
  min-height: calc(100vh - 132px); min-height: calc(100dvh - 132px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--black);
  padding: calc(var(--nav-h) + 40px) var(--gutter) 80px;
  text-align: center;
}
/* 紧跟 Hero 的首个板块：压低顶部留白，让标题探出首屏 */
.hero + .section { padding-top: 36px; }
.hero__bg {
  position: absolute; inset: -12% 0;    /* 上下留余量，供视差位移 */
  background-size: cover; background-position: center;
  will-change: transform;
  transform: scale(1.06);
}
/* 遮罩：中间留出亮度让画面透出来，上下压暗保证文字可读 */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .42) 42%, rgba(0, 0, 0, .82) 100%),
    radial-gradient(85% 62% at 50% 48%, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .38) 100%),
    radial-gradient(110% 70% at 50% 120%, rgba(231, 75, 59, .18) 0%, rgba(231, 75, 59, 0) 60%);
}
/* 细微噪点，增加胶片质感 */
.hero__grain {
  position: absolute; inset: 0; z-index: 1; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}
.hero__inner { position: relative; z-index: 2; max-width: 1000px; }
/* Hero 顶部标签：液态玻璃胶囊（半透明 + 高光边 + 透出背后画面） */
.hero__tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; margin-bottom: 26px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: var(--glass-edge-dark), 0 6px 18px rgba(0, 0, 0, .18);
  font-size: 13px; color: rgba(255, 255, 255, .88); letter-spacing: 0;
}
.hero__title { color: #fff; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__desc {
  margin: 26px auto 0; max-width: 640px;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5;
  color: rgba(255, 255, 255, .74);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }
/* 滚动提示：鼠标滚轮动画 + 整体轻浮动，点击直达下一节 */
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none;
  animation: scrollFloat 2.8s var(--ease-out) infinite;
}
.hero__scroll-label {
  font-size: 11px; font-weight: 600; letter-spacing: .22em;
  color: rgba(255, 255, 255, .62);
  transition: color .3s var(--ease-out);
}
.hero__scroll:hover .hero__scroll-label { color: #fff; }
.hero__scroll-mouse {
  position: relative;
  width: 26px; height: 40px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 13px;
  transition: border-color .3s var(--ease-out);
}
.hero__scroll:hover .hero__scroll-mouse { border-color: #fff; }
/* 外圈脉冲：提醒「这里可以互动」 */
.hero__scroll-mouse::before {
  content: ""; position: absolute; inset: -1.5px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  border-radius: 13px;
  animation: mousePulse 2.2s var(--ease-out) infinite;
}
/* 滚轮小球：在框内自上而下循环滚动 */
.hero__scroll-mouse i {
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
  animation: mouseWheel 1.8s var(--ease-out) infinite;
}
@keyframes mouseWheel {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  75% { transform: translateY(13px); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0; }
}
@keyframes mousePulse {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes scrollFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* ---------- 8. Bento 网格（Apple "Get to know" 式） ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
}
.bento__cell {
  position: relative; overflow: hidden;
  background-color: var(--glass-tint);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  /* 液态玻璃（iOS 27）：顶部镜面高光边 + 底部压暗边 + 大而柔的浮动投影 */
  box-shadow: var(--glass-edge), 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08);
  padding: clamp(24px, 3vw, 44px);
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.bento__cell:hover { transform: translateY(-4px); box-shadow: var(--glass-edge-hover), 0 2px 4px rgba(0, 0, 0, .05), 0 24px 52px rgba(0, 0, 0, .12); }
.bento__cell--w2 { grid-column: span 2; }
.bento__cell--w3 { grid-column: span 3; }
.bento__cell--w4 { grid-column: span 4; }
.bento__cell--w6 { grid-column: span 6; }
.bento__cell--h2 { grid-row: span 2; }
/* 通栏卡：左侧图标+标题，右侧描述+标签，窄屏自动堆叠 */
.bento__cell--wide { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 36px; }
.bento__cell--wide .bento__wide-head { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.bento__cell--wide .bento__title { margin: 0; }
.bento__cell--wide .bento__wide-body { flex: 1 1 340px; }
.bento__cell--wide .bento__desc { margin-top: 0; }
/* 深色玻璃卡：新片场 #1C1C1E 系 + 白色发丝线 + 白色高光边 + 底部压暗边 */
.bento__cell--dark {
  background-color: var(--glass-tint-dark);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 45%);
  border-color: var(--glass-line-dark);
  color: var(--on-dark);
  box-shadow: var(--glass-edge-dark), 0 8px 16px rgba(0, 0, 0, .32);
}
.bento__cell--dark .t-body, .bento__cell--dark .t-sub { color: rgba(255, 255, 255, .72); }
/* 深色玻璃卡上的正文描述：默认 ink-2 中灰会糊在深卡里，必须提亮 */
.bento__cell--dark .bento__desc { color: rgba(255, 255, 255, .78); }
.bento__cell--media { padding: 0; }
.bento__cell--media img { width: 100%; height: 100%; object-fit: cover; }
.bento__cell--tall { min-height: 420px; }
.bento__cell--short { min-height: 260px; }
.bento__icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(231, 75, 59, .1); color: var(--blue);
  display: grid; place-items: center; margin-bottom: 18px;
}
.bento__icon svg { width: 21px; height: 21px; }
.bento__cell--dark .bento__icon { background: rgba(255, 122, 107, .16); color: var(--blue-dark); }
.bento__title { font-size: clamp(19px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.bento__desc { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.bento__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 20px; }
/* 玻璃胶囊：半透明 + 高光边 + 压暗边，随所在面自动深浅 */
.pill {
  padding: 5px 12px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .5); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: var(--glass-edge);
  font-size: 12.5px; color: var(--ink-2); letter-spacing: 0;
}
.bento__cell--dark .pill, .section--black .pill {
  background: rgba(255, 255, 255, .08); border-color: var(--glass-line-dark);
  color: rgba(255, 255, 255, .8);
  box-shadow: var(--glass-edge-dark);
}
.bento__num {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--blue); margin-bottom: 14px;
}
.bento__cell--dark .bento__num { color: var(--blue-dark); }

/* 作品卡（图 + 信息，首页网格与作品页通用）：液态玻璃卡 */
.work {
  display: block; width: 100%; text-align: left; color: var(--ink);
  background-color: var(--glass-tint);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg); overflow: hidden;
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--glass-edge), 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px rgba(0, 0, 0, .06);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.work:hover { transform: translateY(-5px); box-shadow: var(--glass-edge-hover), 0 2px 4px rgba(0, 0, 0, .05), 0 24px 56px rgba(0, 0, 0, .12); }
/* 封面四角统一倒角（上下对称）；底部露出的两角与卡片正文同色，观感一体 */
.work__media {
  position: relative; overflow: hidden; background: #dfe2e7;
  border-radius: var(--r-lg);
}
.work__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* 图片自身也跟随圆角，换图不破坏观感 */
  border-radius: inherit;
  transition: transform 1.1s var(--ease-out);
}
.work:hover .work__media img { transform: scale(1.045); }
.work__media--16-9 { aspect-ratio: 16 / 9; }
.work__media--3-2 { aspect-ratio: 3 / 2; }
.work__media--4-3 { aspect-ratio: 4 / 3; }
.work__media--1-1 { aspect-ratio: 1 / 1; }
.work__media--4-5 { aspect-ratio: 4 / 5; }
.work__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .62) 100%);
  opacity: .9; transition: opacity .4s var(--ease-out);
}
.work:hover .work__veil { opacity: 1; }
.work__play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
/* 播放键：玻璃圆片（镜面高光边 + 压暗边 + 透出封面颜色） */
.work__play::after {
  content: ""; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--glass-edge-hover), 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .35s var(--ease-out);
}
.work__play::before {
  content: ""; position: absolute; z-index: 2; margin-left: 5px;
  width: 0; height: 0;
  border-left: 15px solid #1d1d1f;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.work:hover .work__play::after { transform: scale(1.1); }
/* 封面角标：小玻璃胶囊（高光边 + 压暗边） */
.work__badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 5px 12px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--glass-edge-hover), 0 4px 14px rgba(0, 0, 0, .16);
  font-size: 12px; font-weight: 500; color: var(--ink); letter-spacing: 0;
}
/* 时长角标：深色小玻璃胶囊（白色发丝线） */
.work__duration {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  padding: 4px 10px; border-radius: var(--pill);
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--glass-edge-dark);
  color: #fff; font-size: 12px; font-variant-numeric: tabular-nums;
}
.work__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px;
  color: #fff;
  transform: translateY(6px); opacity: 0;
  transition: transform .45s var(--ease-out), opacity .35s var(--ease-out);
}
.work:hover .work__overlay { transform: none; opacity: 1; }
.work__overlay-title { font-size: clamp(18px, 2vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.work__overlay-meta { margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.work__body { padding: 22px 24px 26px; }
.work__title { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.work__meta { margin-top: 5px; font-size: 13.5px; color: var(--ink-3); }
.work__meta:empty { display: none; }
.work__desc { margin-top: 10px; font-size: 15px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.works-empty { padding: 60px 0; text-align: center; color: var(--ink-3); }

/* 作品网格 */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.works-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* 首页作品卡片网格（纵向滚动，替代横向轮播） */
/* 首页精选：编导级三幕式（镜像瀑布）—— 大图 + 极简说明，不套卡片盒子。
   6 列网格承载三幕：
     第一幕  16:10 宽幅主视觉 + 4:5 竖版画报（下沉 76px）
     第二幕  3:4 竖版 + 16:10 宽幅（镜像第一幕，Z 字视线）
     第三幕  21:9 全宽长镜收尾（说明压成片尾字幕条）
   任何一排都不存在「两张等大 / 三张等大」；跨度 4+2 / 2+4 / 6；
   比例、倒角、位移全锁在 CSS 层，换任何图都不会串版。 */
.films-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  gap: 42px 30px;
  position: relative;
  z-index: 1;                 /* 抬到环境光之上，图片不被洗成蓝色 */
}

/* 三幕跨度 */
.films-grid .work:nth-child(1) { grid-column: span 4; }   /* 第一幕·宽幅 */
.films-grid .work:nth-child(2) { grid-column: span 2; margin-top: 76px; }  /* 下沉竖版 */
.films-grid .work:nth-child(3) { grid-column: span 2; }   /* 第二幕·竖版 */
.films-grid .work:nth-child(4) { grid-column: span 4; }   /* 第二幕·宽幅（镜像） */
.films-grid .work:nth-child(5) { grid-column: span 6; margin-top: 8px; }  /* 第三幕·全宽长镜 */

.films-grid .work {
  grid-column: span 2;       /* 兜底：若后台加到第 6 张精选，也有合理跨度，不错版 */
  background: none;
  border: 0;                 /* 不套卡片盒子：去掉玻璃卡的描边 */
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 封面：四角统一倒角，比例按幕次固定，换任何图都不会大小不一 */
.films-grid .work__media {
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  background: #141416;
}
.films-grid .work:nth-child(1) .work__media,
.films-grid .work:nth-child(4) .work__media { aspect-ratio: 16 / 10; }
.films-grid .work:nth-child(2) .work__media { aspect-ratio: 4 / 5; }
.films-grid .work:nth-child(3) .work__media { aspect-ratio: 3 / 4; }
.films-grid .work:nth-child(5) .work__media { aspect-ratio: 21 / 9; }

/* 播放键：主视觉 64、其余 52 */
.films-grid .work__play::after { width: 52px; height: 52px; }
.films-grid .work__play::before { margin-left: 4px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
.films-grid .work:nth-child(1) .work__play::after,
.films-grid .work:nth-child(4) .work__play::after { width: 64px; height: 64px; }
.films-grid .work:nth-child(1) .work__play::before,
.films-grid .work:nth-child(4) .work__play::before { margin-left: 5px; border-left-width: 15px; border-top-width: 9px; border-bottom-width: 9px; }

/* 说明区：序号 / 片名 / 机构·年份 / 一句话简介 */
.films-grid .work__body { padding: 18px 2px 0; }
.films-grid .work__title { color: var(--on-dark); font-size: 17.5px; line-height: 1.38; transition: color .35s var(--ease-out); }
.films-grid .work:nth-child(1) .work__title,
.films-grid .work:nth-child(4) .work__title { font-size: 22px; }
.films-grid .work:nth-child(2) .work__title { font-size: 19px; }
.films-grid .work__meta { color: var(--on-dark-2); font-size: 13px; margin-top: 6px; }
.films-grid .work__desc { color: rgba(245, 245, 247, .56); font-size: 14px; margin-top: 8px; -webkit-line-clamp: 2; }
.films-grid .work__cta { display: none; }
/* 第三幕收尾：说明压成「片尾字幕条」——序号+片名在左，机构·年份推到最右 */
.films-grid .work:nth-child(5) .work__desc { display: none; }
.films-grid .work:nth-child(5) .work__body {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
  padding-top: 16px; margin-top: 18px;
  border-top: 1px solid rgba(245, 245, 247, .1);
}
.films-grid .work:nth-child(5) .work__idx { margin-bottom: 0; }
.films-grid .work:nth-child(5) .work__title { font-size: 19px; }
.films-grid .work:nth-child(5) .work__meta { margin-top: 0; margin-left: auto; }

/* 序号：替代与封面角标重复的分类小标，做出画册式的 01–05 编目节奏 */
.films-grid .work__idx {
  display: block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: rgba(245, 245, 247, .4);
  margin-bottom: 8px;
}

/* 没有盒子可抬，改为图片推近 + 片名转蓝来回应指针 */
.films-grid .work:hover { transform: none; box-shadow: none; }
.films-grid .work:hover .work__media img { transform: scale(1.05); }
.films-grid .work:hover .work__title { color: var(--blue-dark); }

/* 入场微动画：每张给不同入位方向与倾角，避免"复制粘贴"的机械感；
   用 backwards 填充——延迟期间保持起始态，动画结束后交还给 .reveal.is-in，
   避免动画末帧长期霸占 transform 导致 hover 失灵。 */
.films-grid .work:nth-child(1) { --film-x: -18px; --film-rot: -.9deg; }
.films-grid .work:nth-child(2) { --film-x: 18px;  --film-rot: .9deg; }
.films-grid .work:nth-child(3) { --film-x: -12px; --film-rot: -.5deg; }
.films-grid .work:nth-child(4) { --film-x: 0;     --film-rot: .3deg; }
.films-grid .work:nth-child(5) { --film-x: 12px;  --film-rot: .6deg; }

.films-grid .work { opacity: 0; }
.films-grid .work.is-in {
  animation: filmIn 1s cubic-bezier(.16, .84, .28, 1) backwards;
  animation-delay: var(--film-d, 0s);
}
@keyframes filmIn {
  0% {
    opacity: 0;
    transform: translate3d(var(--film-x, 0), 36px, 0) scale(.965) rotate(var(--film-rot, 0));
    filter: blur(7px);
  }
  55% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
    filter: blur(0);
  }
}
/* 封面入场时从微放大回落，像镜头对焦拉实，比纯位移更"活" */
.films-grid .work.is-in .work__media img {
  animation: filmImgIn 1.3s cubic-bezier(.16, .84, .28, 1) backwards;
  animation-delay: var(--film-d, 0s);
}
@keyframes filmImgIn {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* 黑底环境光（iOS 27「Celosia」曲面壁纸语言）：错落布局的负空间也有内容，
   同时增加纵深。多层错位径向渐变相叠，像层层折叠的曲面透出光（品牌红 + 暖橙双光源） */
#films { position: relative; overflow: hidden; }
#films::before, #films::after {
  content: ''; position: absolute; pointer-events: none; border-radius: 50%;
  filter: blur(90px);
}
#films::before {
  width: 560px; height: 560px; right: -150px; top: 16%;
  background:
    radial-gradient(42% 46% at 62% 34%, rgba(231, 75, 59, .28), transparent 70%),
    radial-gradient(30% 34% at 82% 66%, rgba(231, 75, 59, .18), transparent 70%);
}
#films::after {
  width: 480px; height: 480px; left: -170px; bottom: 4%;
  background:
    radial-gradient(40% 44% at 40% 60%, rgba(255, 122, 107, .17), transparent 70%),
    radial-gradient(28% 32% at 66% 36%, rgba(255, 122, 107, .12), transparent 70%);
}
/* 标题区同样压到环境光之上；这句是"告知"性质，收成说明字号，
   否则长句在 880px 里折行会留下孤字 */
#films .head { position: relative; z-index: 1; }
#films .head .t-sub {
  max-width: 720px; margin-left: auto; margin-right: auto;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55;
}
.design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }

/* 通栏案例卡：左图右文 */
.work--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; min-height: 300px; }
.work--wide .work__media { aspect-ratio: auto; height: 100%; min-height: 260px; }
.work--wide .work__body { padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.work__kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--blue); margin-bottom: 12px; }
.work__cta { margin-top: 20px; font-size: 14.5px; font-weight: 500; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
.work__cta .arrow { transition: transform .35s var(--ease-out); }
.work--wide:hover .work__cta .arrow { transform: translateX(5px); }
.work__desc--wide { -webkit-line-clamp: 4; }

/* ---------- 10. 筛选栏（液态玻璃胶囊） ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
.filter {
  padding: 8px 17px; border-radius: var(--pill);
  border: 1px solid var(--glass-line);
  background-color: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: var(--glass-edge);
  font-size: 14px; color: var(--ink); letter-spacing: 0;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.filter:hover { border-color: rgba(0, 0, 0, .28); }
.filter.is-active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px rgba(231, 75, 59, .28); }

/* ---------- 11. 数据（深色玻璃大数字） ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .12); border-radius: var(--r-lg); overflow: hidden; }
.stat {
  background-color: var(--glass-tint-dark);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  /* iOS 27 边缘光影：白高光 + 压暗边，深色玻璃格子也有厚度 */
  box-shadow: var(--glass-edge-dark);
  padding: clamp(28px, 4vw, 48px) 24px; text-align: center;
}
.stat__num { font-size: clamp(38px, 5.4vw, 72px); font-weight: 600; letter-spacing: -.035em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.stat__num .unit { font-size: .45em; color: var(--on-dark-2); margin-left: 2px; }
.stat__label { margin-top: 12px; font-size: 14px; color: var(--on-dark-2); }
/* 浅色版本 */
.stats--light { background: rgba(0, 0, 0, .07); }
.stats--light .stat { background-color: rgba(255, 255, 255, .5); background-image: var(--glass-sheen); }
.stats--light .stat__num { color: var(--ink); }
.stats--light .stat__num .unit { color: var(--ink-3); }
.stats--light .stat__label { color: var(--ink-2); }

/* ---------- 12. 核心板块：方法 ---------- */
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.method__item {
  position: relative;
  background-color: var(--glass-tint);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--glass-edge), 0 1px 3px rgba(0, 0, 0, .04);
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 40px) clamp(32px, 3.8vw, 48px);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
  display: flex; flex-direction: column;
}
.method__item:hover { transform: translateY(-3px); box-shadow: var(--glass-edge-hover), 0 20px 48px rgba(0, 0, 0, .1); }
.method__item::before {
  content: ""; width: 34px; height: 3px; border-radius: 2px;
  background: var(--blue); margin-bottom: 24px;
  box-shadow: 0 0 12px rgba(231, 75, 59, .45);
}
.method__num {
  font-size: clamp(44px, 5vw, 68px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.method__title {
  margin-top: 20px; font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.22; letter-spacing: -.02em; font-weight: 600;
}
.method__body { margin-top: 14px; font-size: 16px; line-height: 1.72; color: var(--ink-2); }

/* ---------- 13. 客户墙（分组） ---------- */
.clients { display: grid; gap: clamp(26px, 3vw, 38px); }
.client-group__title { font-size: 14px; font-weight: 600; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 14px; }
.client-group__grid { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(0, 0, 0, .07); border-radius: var(--r); overflow: hidden; }
.client { flex: 1 1 160px; min-width: 120px; }
.client {
  background-color: rgba(255, 255, 255, .55);
  background-image: var(--glass-sheen);
  padding: 30px 16px; text-align: center;
  font-size: 15.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--glass-edge);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.client:hover { background-color: rgba(255, 255, 255, .85); color: var(--ink); }
.section--gray .client { background-color: rgba(255, 255, 255, .45); }
.section--gray .client:hover { background-color: rgba(255, 255, 255, .85); }
/* 深色区块客户墙：透出底色的暗玻璃 */
.section--black .client {
  background-color: rgba(255, 255, 255, .05);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%);
  box-shadow: var(--glass-edge-dark);
}
.section--black .client:hover { background-color: rgba(255, 255, 255, .1); }

/* ---------- 14. CTA 区块 ---------- */
.cta {
  position: relative; overflow: hidden;
  background: var(--black); border-radius: var(--r-lg);
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
  text-align: center; color: var(--on-dark);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 50% 0%, rgba(231, 75, 59, .24) 0%, rgba(0, 0, 0, 0) 65%);
}
.cta > * { position: relative; }
.cta__title { font-size: clamp(28px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; color: #fff; }
.cta__desc { margin: 20px auto 0; max-width: 560px; font-size: clamp(16px, 1.7vw, 19px); color: var(--on-dark-2); }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* ---------- 15. 页脚（Apple 式浅灰小字） ---------- */
.site-footer { background: var(--gray); padding: clamp(40px, 5vw, 64px) 0 32px; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__about { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 300px; }
.footer__title { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.footer__list li { margin-bottom: 8px; font-size: 13px; color: var(--ink-2); }
.footer__list a { color: var(--ink-2); }
.footer__list a:hover { color: var(--ink); text-decoration: underline; }
.footer__bottom {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .1);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3);
}

/* ---------- 16. 内页页头 ---------- */
.page-head {
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 110px)) 0 clamp(40px, 5vw, 64px);
  background: var(--white);
}
.page-head--gray { background: var(--gray); }
.page-head__title { font-size: clamp(34px, 5.2vw, 72px); line-height: 1.06; letter-spacing: -.032em; }
.page-head__desc { margin-top: 20px; max-width: 640px; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--ink-2); }
.breadcrumb { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--ink); }

/* ---------- 17. 关于页 ---------- */
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-text p { margin-bottom: 20px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.about-text p:first-child { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.45; color: var(--ink); letter-spacing: -.015em; }
/* 信息卡：浅色玻璃；黑底版换成深玻璃（新片场 #1C1C1E 系） */
.info-card {
  background-color: var(--glass-tint);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--glass-edge), 0 12px 32px rgba(0, 0, 0, .07);
  border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px);
}
.section--black .info-card {
  background-color: var(--glass-tint-dark);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 45%);
  border-color: var(--glass-line-dark);
  box-shadow: var(--glass-edge-dark), 0 8px 16px rgba(0, 0, 0, .32);
}
.info-card__title { font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-bottom: 16px; }
.info-card__list li {
  padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .07);
  font-size: 15px; color: var(--ink-2);
}
.info-card__list li:last-child { border-bottom: 0; }
.section--black .info-card__list li { border-color: rgba(255, 255, 255, .1); }
.info-card .btn { margin-top: 24px; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: rgba(0, 0, 0, .12); }
.timeline li { position: relative; padding-bottom: 26px; }
.timeline li::before {
  content: ""; position: absolute; left: -26px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue);
}
.timeline__year { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--blue); }
.timeline__text { margin-top: 3px; font-size: 16px; color: var(--ink-2); }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.member { text-align: center; }
.member img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-lg); background: var(--gray);
  transition: transform .5s var(--ease-out);
}
.member:hover img { transform: scale(1.02); }
.member__name { margin-top: 18px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.member__role { margin-top: 3px; font-size: 13.5px; color: var(--blue); }
.member__desc { margin-top: 10px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 760px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 18. 联系页 ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.info-list { display: grid; gap: 12px; margin-top: 28px; }
.info-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px; border-radius: var(--r);
  background-color: rgba(255, 255, 255, .5);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--glass-edge);
  transition: background-color .3s var(--ease-out);
}
.info-item:hover { background-color: rgba(255, 255, 255, .82); }
.info-item__icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px;
  background: rgba(231, 75, 59, .1); color: var(--blue); display: grid; place-items: center;
}
.info-item__icon svg { width: 18px; height: 18px; }
.info-item__label { font-size: 12.5px; color: var(--ink-3); }
.info-item__value { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.info-item__actions { margin-top: 8px; }

/* 表单：玻璃面板 + 白色玻璃输入框（iOS 文本框质感） */
.form {
  background-color: var(--glass-tint);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--glass-edge), 0 12px 32px rgba(0, 0, 0, .07);
  border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 44px);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 16px; color: var(--ink);
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--r-sm);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--glass-edge-hover);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(0, 0, 0, .25); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(231, 75, 59, .14);
}
.field textarea { min-height: 116px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__note { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.form__status { margin-top: 14px; font-size: 14px; display: none; }
.form__status.is-show { display: block; }
.form__status.is-ok { color: #1a7f42; }
.form__status.is-warn { color: var(--tag); }

.faq { display: grid; gap: 10px; }
/* FAQ：玻璃折叠行（高光边 + 压暗边） */
.faq-item {
  background-color: rgba(255, 255, 255, .55);
  background-image: var(--glass-sheen);
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--glass-edge);
}
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; text-align: left; font-size: 16.5px; font-weight: 500; letter-spacing: -.01em; }
.faq-q .sign { flex-shrink: 0; width: 18px; height: 18px; position: relative; }
.faq-q .sign::before, .faq-q .sign::after { content: ""; position: absolute; background: var(--ink-3); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .25s; }
.faq-q .sign::before { top: 8px; left: 1px; width: 16px; height: 1.6px; }
.faq-q .sign::after { left: 8px; top: 1px; width: 1.6px; height: 16px; }
.faq-item.is-open .faq-q .sign::after { transform: rotate(90deg); opacity: 0; }
.faq-a { padding: 0 22px; max-height: 0; overflow: hidden; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); transition: max-height .35s var(--ease-out), padding .35s var(--ease-out); }
.faq-item.is-open .faq-a { padding: 0 22px 22px; max-height: 340px; }

/* ---------- 19. 弹窗与灯箱（液态玻璃） ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, .58);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility .35s;
}
.overlay.is-open { opacity: 1; visibility: visible; }
.modal {
  position: relative; width: 100%; max-width: 980px;
  background-color: var(--glass-tint-dark-strong);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 45%);
  border: 1px solid var(--glass-line-dark);
  border-radius: var(--r-lg); overflow: hidden;
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  backdrop-filter: blur(40px) saturate(1.5);
  /* 悬浮在内容之上的大投影 + 顶部白色高光边 + 底部压暗边 */
  box-shadow: var(--glass-edge-dark), 0 40px 90px rgba(0, 0, 0, .55);
  transform: translateY(16px) scale(.985); opacity: 0;
  transition: transform .45s var(--ease-out), opacity .35s var(--ease-out);
}
.overlay.is-open .modal { transform: none; opacity: 1; }
.modal__player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.modal__body { padding: 24px 28px 28px; color: #fff; }
.modal__title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.modal__meta { margin-top: 6px; font-size: 13.5px; color: var(--on-dark-2); }
.modal__desc { margin-top: 12px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* 视频无法在线播放时的提示块（政企项目常见） */
.modal__player--notice {
  aspect-ratio: auto; min-height: 280px; background: rgba(28, 28, 30, .6);
  display: flex; align-items: center; justify-content: center; padding: 48px 28px;
}
.notice { text-align: center; max-width: 460px; }
.notice svg { color: rgba(255, 255, 255, .42); margin-bottom: 14px; }
.notice__t { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.notice__d { margin: 0 0 22px; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .68); }
/* 弹窗关闭钮：玻璃圆片（高光边） */
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--glass-edge-dark);
  transition: background-color .25s var(--ease-out), transform .35s var(--ease-out);
}
.modal__close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.modal__close svg { width: 15px; height: 15px; }

.lightbox { background: rgba(0, 0, 0, .9); }
.lightbox__inner { position: relative; width: 100%; max-width: 1240px; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 56px 0 8px; }
.lightbox__stage { position: relative; width: 100%; display: grid; place-items: center; min-height: 40vh; }
.lightbox__stage img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r); }
.lightbox__caption { color: rgba(255, 255, 255, .92); text-align: center; font-size: 16px; letter-spacing: -.01em; }
.lightbox__caption .sub { display: block; margin-top: 5px; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.lightbox__counter { position: absolute; top: 16px; left: 0; color: rgba(255, 255, 255, .55); font-size: 13px; font-variant-numeric: tabular-nums; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--glass-edge-dark), 0 8px 20px rgba(0, 0, 0, .25);
  transition: background-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.lb-btn:hover { background: rgba(255, 255, 255, .26); transform: translateY(-50%) scale(1.06); }
.lb-btn svg { width: 20px; height: 20px; }
.lb-btn--prev { left: -4px; }
.lb-btn--next { right: -4px; }
.lightbox__close { position: absolute; top: 8px; right: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: var(--glass-edge-dark); }
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }

/* ---------- 20. 动效 ---------- */
/* 基础渐显上浮 */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
/* 文字逐行落位 */
.reveal-lines .line > span { display: block; transform: translateY(110%); transition: transform .9s var(--ease-out); }
.reveal-lines.is-in .line > span { transform: none; }
.reveal-lines .line:nth-child(2) > span { transition-delay: .08s; }
.reveal-lines .line:nth-child(3) > span { transition-delay: .16s; }
/* 图片遮罩揭示 */
.reveal-mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ease-out); }
.reveal-mask.is-in { clip-path: inset(0 0 0 0); }
/* 缩放进入 */
.reveal-scale img { transform: scale(1.14); transition: transform 1.4s var(--ease-out); }
.reveal-scale.is-in img { transform: scale(1); }
/* 依次延迟 */
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-mask { opacity: 1; transform: none; clip-path: none; transition: none; }
  .reveal-lines .line > span { transform: none; transition: none; }
  .reveal-scale img { transform: none; }
  .hero__scroll-mouse::before { animation: none; }
  /* .films-grid .work 的 opacity:0 优先级高于 .reveal，须显式复位，否则卡片不显示 */
  .films-grid .work { opacity: 1; animation: none; }
  * { animation-duration: .01ms !important; }
}

/* ---------- 20.5 深色区块内的元素适配 ---------- */
.section--black { --tag: #ff7a6b; }                    /* 黑底上标签换成亮红 */
.section--black .timeline::before { background: rgba(255, 255, 255, .16); }
.section--black .timeline li::before { background: var(--blue-dark); box-shadow: 0 0 10px rgba(255, 122, 107, .5); }
.section--black .timeline__year { color: var(--blue-dark); }
.section--black .timeline__text { color: var(--on-dark-2); }
.section--black .stats--light { background: rgba(255, 255, 255, .14); }

/* Bento 图片格（作品按钮） */
button.bento__cell--media { display: block; padding: 0; text-align: left; }
.bento__cell--media .work__media { position: absolute; inset: 0; height: 100%; }
.bento__cell--media .work__media img { height: 100%; }
.work__overlay-title, .work__overlay-meta { display: block; }

/* ---------- 21. 响应式 ---------- */
@media (max-width: 1060px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento__cell--w3, .bento__cell--w4, .bento__cell--w6 { grid-column: span 2; }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .design-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .method { grid-template-columns: repeat(2, 1fr); }
  .method__item:last-child { grid-column: span 2; }
  .client-group__grid { grid-template-columns: repeat(3, 1fr); }
  /* 三幕式在平板宽度：保持 6 列（4+2 / 2+4 / 6 仍成立），收一点字号 */
  .films-grid { gap: 38px var(--gutter); }
  .films-grid .work__title { font-size: 16px; }
  .films-grid .work:nth-child(1) .work__title,
  .films-grid .work:nth-child(4) .work__title { font-size: 20px; }
  .films-grid .work:nth-child(2) .work__title { font-size: 18px; }
  .films-grid .work__desc { font-size: 13.5px; }
}
@media (max-width: 860px) {
  .nav, .nav__cta { display: none; }
  .nav-toggle { display: flex; }
  .client-group__grid { grid-template-columns: repeat(2, 1fr); }
  /* 小屏探出量减半，保证 Hero 内容不挤 */
  .hero { min-height: calc(100vh - 96px); min-height: calc(100dvh - 96px); }
  .hero__scroll { bottom: 18px; }
  /* 三幕式在手机收成单列；桌面端的下沉位移与全宽长镜全部复位，
     竖版保持比例，收尾长镜改 16:9 以免太薄 */
  .films-grid { grid-template-columns: 1fr; gap: 30px; }
  .films-grid .work,
  .films-grid .work:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .films-grid .work:nth-child(1) .work__media,
  .films-grid .work:nth-child(4) .work__media { aspect-ratio: 16 / 10; }
  .films-grid .work:nth-child(2) .work__media { aspect-ratio: 4 / 5; }
  .films-grid .work:nth-child(3) .work__media { aspect-ratio: 3 / 4; }
  .films-grid .work:nth-child(5) .work__media { aspect-ratio: 16 / 9; }
  .films-grid .work__title { font-size: 18px; }
  .films-grid .work:nth-child(1) .work__title,
  .films-grid .work:nth-child(4) .work__title { font-size: 21px; }
  .films-grid .work__play::after,
  .films-grid .work:nth-child(1) .work__play::after,
  .films-grid .work:nth-child(4) .work__play::after { width: 56px; height: 56px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--w2, .bento__cell--w3, .bento__cell--w4, .bento__cell--w6 { grid-column: span 2; }
  .bento__cell--tall { min-height: 320px; }
  .works-grid, .works-grid--2 { grid-template-columns: 1fr; }
  .design-grid { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr; }
  .method__item:last-child { grid-column: auto; }
  .work--wide { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 26px; }
  .field-row { grid-template-columns: 1fr; }
  .hero { min-height: 92vh; }
  .lb-btn--prev { left: 0; }
  .lb-btn--next { right: 0; }
  .lightbox__stage img { max-height: 58vh; }
  /* 客户墙：手机端保持 flex（孤行撑满整行像强调行），仅收紧内距与字号 */
  .client { padding: 22px 12px; font-size: 15px; }
}

/* 蜜罐字段：对真人不可见，仅拦截自动脚本 */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* 微信内置浏览器提示条：只在微信里由 JS 插入，其它环境完全不存在 */
.wx-tip{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
  gap:10px;padding:9px 14px;background:rgba(29,29,31,.78);color:#f5f5f7;
  font-size:13px;line-height:1.35;letter-spacing:0;
  box-shadow:var(--glass-edge-dark);
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);}
.wx-tip__dot{flex:none;width:6px;height:6px;border-radius:50%;background:#e74b3b;box-shadow:0 0 0 4px rgba(231,75,59,.22);}
.wx-tip__txt{flex:1;min-width:0;}
.wx-tip__txt b{font-weight:600;}
.wx-tip__txt span{color:#a1a1a6;}
.wx-tip__how{flex:none;color:#ff7a6b;text-decoration:none;font-weight:600;white-space:nowrap;}
.wx-tip__close{flex:none;width:24px;height:24px;border:0;border-radius:50%;background:rgba(255,255,255,.14);
  color:#f5f5f7;font-size:15px;line-height:1;cursor:pointer;}
body.has-wx-tip{padding-top:44px;}
body.has-wx-tip .site-header{top:44px;}
/* 微信内「如何切换浏览器」引导浮层 */
.wx-guide{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.62);display:flex;
  align-items:flex-start;justify-content:flex-end;padding:56px 18px 0 0;}
.wx-guide__box{max-width:280px;padding:16px 18px;border-radius:16px;background:#fff;color:#1d1d1f;
  font-size:14px;line-height:1.55;box-shadow:0 18px 44px rgba(0,0,0,.28);position:relative;}
.wx-guide__arrow{position:absolute;top:-9px;right:34px;width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid #fff;}
.wx-guide__box b{font-weight:600;}
.wx-guide__step{margin-top:8px;color:#6e6e73;}
.wx-guide__ok{margin-top:12px;font-size:12px;color:#86868b;}
@media (max-width:640px){
  .wx-tip{font-size:12px;padding:8px 12px;}
  .wx-tip__txt span{display:none;}
}

/* 手机端底部快捷操作栏：打电话 / 加微信 / 获取报价（桌面端不渲染） */
.mbar{display:none;}
@media (max-width:860px){
  .mbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    gap:1px;background:rgba(0,0,0,.08);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbar__btn{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:56px;padding:8px 6px;border:0;background:rgba(255,255,255,.68);
    -webkit-backdrop-filter:saturate(1.8) blur(28px);backdrop-filter:saturate(1.8) blur(28px);
    box-shadow:var(--glass-edge);
    font-family:inherit;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--ink-2);
    text-decoration:none;cursor:pointer;
  }
  .mbar__btn:active{background:var(--gray);}
  .mbar__btn--main{background:var(--blue);color:#fff;font-weight:600;}
  .mbar__btn--main:active{background:var(--blue-hover);}
  /* 给页底留出操作栏高度，避免遮住footer内容 */
  body{padding-bottom:calc(57px + env(safe-area-inset-bottom));}
}