/* =========================================================
   StarDance Global — site stylesheet
   品牌红 #F00808（从 logo 取色，仅改 --red 一处即可全局替换）
   视觉原则：白 + 极浅暖灰底 / 深炭灰字 / 红色只作点睛
   ========================================================= */

:root{
  --red:#F00808;
  --red-dark:#C40606;
  --red-50:#FDEAEA;
  --red-line:#F6C8C8;

  --ink:#202326;          /* 深炭灰：标题与正文 */
  --ink-soft:#5C626A;     /* 次级正文 */
  --neutral:#7A8088;      /* 辅助说明 */
  --line:#E7E5E1;         /* 细分隔线 */
  --line-soft:#F0EEEA;
  --bg:#FFFFFF;
  --bg-warm:#FAF9F7;      /* 极浅暖灰 */

  /* 灰绿点缀（2026-10-13）：取自首屏照片的绿青调（色相约 150°，饱和度压到 ~.10），
     用于让内页与首页照片色调呼应。**只作局部细节**：细分隔线、小图标、卡片/图片边缘。
     不铺色、不改页面背景、不动文字与布局，也不替代品牌红（红仍是唯一强调色）。 */
  --sage:#657B70;
  --sage-soft:#EBEFED;
  --sage-line:#D5DFD9;    /* 2026-10-13 调深一档（原 #DEE6E1）：对白底 1.27→1.36:1，仍是发丝线 */
  --sage-hover:#9FB6A9;   /* 卡片悬停时的边缘色，对白底 2.16:1（由 #B5C7BE 再深一档）；
                             只作用于 .metric:hover，不参与全站细线，改它不会影响其它页面 */

  /* 页脚专用深灰（2026-10-14）：由「深绿 #191C1D」改为中性深灰 #1D1E20。
     依据：首页三张首屏照片的底部色调 —— 棚内≈近黑 (12,9,9)、单人≈深灰 (57,63,57)、
     泳池底部被结尾暗渐变压暗 —— 整体是「深灰」而非纯黑，故取中性深灰与照片最匹配，
     比纯黑更透、更显高级；比原深绿去掉了绿调，回归红白灰主色体系。
     文字浅灰 #A8ADB4 对比约 7.x:1，达标。 */
  --footer-bg:#1D1E20;

  --radius:10px;
  --radius-sm:8px;
  --max:1120px;
  --gutter:28px;
  /* 页面内容与全幅区块的左对齐基准：宽屏时对齐容器左边缘，窄屏时等于 gutter */
  --edge:calc(max(0px,(100vw - var(--max))/2) + var(--gutter));

  --logo-h:44px;
  /* 页眉高度（2026-10-14 优化：由 72px 降到 60px，让首屏照片在顶部更有存在感、与图片衔接更自然）。
     移动端下拉菜单的 top 同步引用此变量，避免改高度后菜单与页眉之间出现空隙。 */
  --header-h:60px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,
    "PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC",
    "Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{line-height:1.3;margin:0 0 .5em;letter-spacing:-.01em;font-weight:600}
h1{font-size:clamp(1.9rem,3.4vw,2.5rem)}
h2{font-size:clamp(1.45rem,2.5vw,1.85rem)}
h3{font-size:1.08rem}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.1em}
li{margin:.35em 0}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:72px 0}
.section--warm{background:var(--bg-warm)}
.section--tight{padding:56px 0}
.section__head{max-width:680px;margin-bottom:44px}
.section__head p{color:var(--ink-soft);font-size:1.02rem;margin-bottom:0}
.eyebrow{
  display:block;font-size:.76rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin-bottom:14px;
}
/* 中文眉题：不做全大写与过宽字距，与标题、正文左边缘对齐 */
html[lang="zh-CN"] .eyebrow,html[lang="zh"] .eyebrow{letter-spacing:.08em;text-transform:none}
.center{text-align:center}
.center .section__head{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:13px 24px;border-radius:var(--radius-sm);font-weight:600;font-size:.97rem;
  border:1px solid transparent;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
  text-decoration:none;line-height:1.2;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn--primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn--secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--secondary:hover{border-color:#C8C5BF;color:var(--ink)}
.btn--onred{background:var(--red);color:#fff;border-color:var(--red)}
.btn--onred:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn--sm{padding:10px 18px;font-size:.92rem}
.btn--lg{padding:15px 30px;font-size:1rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.center .btn-row{justify-content:center}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{height:var(--logo-h);width:auto;object-fit:contain}
.brand-fallback{display:none;font-weight:600;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink)}
.brand-fallback em{font-style:italic;color:var(--red)}
.site-header.logo-missing .brand-logo{display:none}
.site-header.logo-missing .brand-fallback{display:inline-block}

.main-nav{margin-left:auto}
.main-nav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.main-nav a{
  display:block;padding:8px 13px;border-radius:6px;color:var(--ink-soft);
  font-weight:500;font-size:.94rem;text-decoration:none;
}
.main-nav a:hover{color:var(--ink);background:var(--bg-warm);text-decoration:none}
.main-nav a.is-active{color:var(--ink);font-weight:600}

/* 「品牌合作」下拉：三条市场路径 */
.main-nav li{position:relative}
.main-nav .has-sub>a{display:inline-flex;align-items:center}
.main-nav .has-sub>a::after{
  content:"";width:5px;height:5px;margin-left:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.5;
}
.sub-nav{
  display:block;position:absolute;top:100%;left:4px;z-index:70;min-width:216px;
  list-style:none;margin:6px 0 0;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:0 14px 32px rgba(20,22,25,.10);
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.has-sub:hover>.sub-nav,.has-sub:focus-within>.sub-nav{opacity:1;visibility:visible;transform:none}
.sub-nav li{margin:0}
.sub-nav a{
  display:block;padding:9px 12px;border-radius:6px;
  font-size:.9rem;color:var(--ink-soft);text-decoration:none;white-space:nowrap;
}
.sub-nav a:hover{background:var(--bg-warm);color:var(--ink);text-decoration:none}
.lang-switch{
  display:flex;align-items:center;gap:2px;background:var(--bg-warm);
  border:1px solid var(--line);border-radius:6px;padding:3px;flex:0 0 auto;
}
.lang-switch a{
  padding:5px 12px;border-radius:4px;font-size:.82rem;font-weight:600;
  color:var(--neutral);text-decoration:none;line-height:1.3;
}
.lang-switch a:hover{text-decoration:none;color:var(--ink)}
.lang-switch a.is-active{background:var(--ink);color:#fff}
.nav-toggle{
  display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);
  background:#fff;border-radius:8px;cursor:pointer;padding:0;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);margin:4px auto;border-radius:2px}

/* ---------- 首页首屏 ----------
   首屏样式（.hero2 / .hcard / .closing--v2）已移至 assets/css/home-v2.css，
   仅由 index.html 与 en/index.html 引入。旧版深色蒙层式 .hero 已在 2026-10-12 改版中移除。 */
.btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* ---------- 首页结尾联系区：与主视觉同一深色带，左对齐并共用主标题左边缘 ---------- */
.closing{
  background:linear-gradient(180deg,#14171A 0%,#191B1E 100%);
  padding:clamp(14px,1.6vw,20px) 0 clamp(40px,5vw,58px);
}
.closing__inner{max-width:min(560px,54%);text-align:left}
.closing h2{
  margin:0;color:#fff;font-size:clamp(1.28rem,2vw,1.62rem);
  line-height:1.35;letter-spacing:-.012em;max-width:22em;
}
.closing h2 em{font-style:normal;color:var(--red)}
.closing p{margin:10px 0 0;font-size:.95rem;line-height:1.7;color:#AEB3B9;max-width:34em}
.closing .btn{margin-top:20px}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,1fr);gap:48px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:border-color .16s ease;
}
/* 卡片边缘：悬停时换成灰绿细线（内页统一，静止状态仍是原有暖灰） */
.card:hover{border-color:var(--sage-line)}
.card h3{margin-bottom:.4em}
.card p{color:var(--ink-soft);margin-bottom:0}
.card-icon{margin-bottom:16px;color:var(--red);line-height:0}
.card-icon svg{width:22px;height:22px;stroke-width:1.8}
.card-link{
  font-weight:600;font-size:.93rem;color:var(--ink);display:inline-flex;align-items:center;gap:.35em;
}
.card-link::after{content:"→";transition:.18s}
.card-link:hover{text-decoration:none;color:var(--red)}
.card-link:hover::after{transform:translateX(3px)}

/* ---------- 品牌合作总览页：三条市场路径（同一页面内对比，统一咨询入口） ---------- */
.path-block{
  display:grid;grid-template-columns:200px 1fr auto;gap:36px;align-items:start;
  padding:30px 0;border-top:1px solid var(--line);
}
.path-block:first-of-type{border-top:0;padding-top:6px}
.path-block__num{
  display:block;margin-bottom:8px;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red);
}
.path-block__label h3{margin:0;font-size:1.22rem;line-height:1.4}
.path-block__fit{margin:0 0 14px;font-size:.98rem;color:var(--ink-soft);line-height:1.7}
.path-block__fit .k{
  display:inline-block;margin-right:.6em;font-weight:600;color:var(--ink);
}
.path-block__k{
  margin:0 0 .5em;font-size:.78rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--neutral);
}
.path-block__detail ul{margin:0;padding-left:1.05em}
.path-block__detail li{margin:.2em 0;font-size:.95rem;color:var(--ink-soft);line-height:1.65}
.path-block__action{padding-top:2px}
.path-block__note{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--neutral);
}

/* ---------- 关于我们：介绍区（标题 + 两段正文，独立干净的文字区） ----------
   2026-10-14 改版：移除原先铺在文字后的整幅背景图（旧 about-crew.jpg / about-crew-m.jpg 已归档
   .workbuddy/archive/），文字回到白底独立区域；视觉重心下移到新增的杂志式三图组合
   .about-gallery（棚内监视器剧组 / 泳池边剧组 / 出镜创作者与团队，脚本 .workbuddy/make-about-gallery.py）。 */
.about-intro{
  background:var(--bg);
  padding:clamp(52px,6.4vw,88px) 0 clamp(44px,5.6vw,68px);
}
/* 2026-10-14：介绍文字与图片组、下方「团队背景」统一取全站版心全宽（不再限 760px），
   三区左边缘对齐、左右边距一致 */
.about-intro__panel{max-width:none;color:var(--ink)}
.about-intro__panel h1{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:0 0 .5em;color:var(--ink);font-weight:600}
/* 统一为正文小字基准（与「品牌合作」页 .section__head p 一致）：1.02rem / 行高 1.72 / 400 / --ink-soft */
.about-intro__panel p{margin:0 0 .8em;font-size:1.02rem;line-height:1.72;color:var(--ink-soft);font-weight:400}
.about-intro__panel p:last-child{margin-bottom:0}

/* ---------- 关于我们：拍摄现场图组（杂志式三图组合） ----------
   桌面：上排左 4:3 主图 1（棚内监视器剧组）+ 右 16:10 主图 2（泳池边剧组），
   下排整宽 12:5 搭配图（出镜创作者与团队）——主次分明、比例协调。
   图片一律 object-fit:cover 等比裁切填充，不拉伸；圆角用全站 --radius（10px，克制）。 */
/* 2026-10-14：图组下方不再叠加自身大内边距——与「团队背景」的间距由其 section 上内边距
   （桌面 72px / 手机 52px）提供，与图组上方介绍文字的下内边距（44–68px）节奏一致，
   消除原先「96px + 72px」的过大空白。 */
.about-gallery-sec{padding:0}
/* 团队背景区垂直间距微调：
   ① 图组 → 正文：上内边距 36→60px，与前面「介绍文字→图组」约 68px 的留白节奏一致，拉开图文距离；
   ② 卡片 → 「我们怎么工作」：下内边距 72→28px，压缩原本 72+72=144px 的过大留白；
   文字、图片、字号、布局结构均不变。 */
.section.section--after-gallery{padding-top:60px;padding-bottom:28px}
.about-gallery{
  display:grid;
  grid-template-columns:1.2fr 1fr;   /* 桌面左右对调：左 600（b·泳池边）/ 右 500（a·棚内监视器），间距 20 不变 */
  gap:20px;
}
.about-gallery__item{margin:0;min-width:0}
.about-gallery__item img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  border-radius:var(--radius);
  background:var(--line-soft);
}
.about-gallery__item--a{aspect-ratio:4/3;grid-column:2;grid-row:1}   /* 桌面：移到右侧（500px，尺寸/裁切不变） */
.about-gallery__item--b{aspect-ratio:16/10;grid-column:1;grid-row:1}  /* 桌面：移到左侧（600px，尺寸/裁切不变） */
.about-gallery__item--c{aspect-ratio:12/5;grid-column:1/-1;grid-row:2}

/* 区块标题：正文不挤在窄栏里。
   2026-10-14：关于我们页「介绍文字 / 图片组 / 团队背景」三区宽度统一为全站版心全宽，
   --wide 不再限宽；图片下方正文与图片上方介绍文字统一排版（见下条规则）。 */
.section__head--wide{max-width:none}
/* 图片下方团队背景正文：与「品牌合作」页正文基准一致——--ink-soft、1.02rem、400、行距 1.72 */
.section__head--wide p{color:var(--ink-soft);font-size:1.02rem;font-weight:400;line-height:1.72}

/* ---------- 关于我们：工作方式（轻量图标三列，不用大卡片） ---------- */
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.how-item h3{margin:0 0 .35em;font-size:1.02rem;line-height:1.45}
.how-item p{margin:0;font-size:.94rem;line-height:1.7;color:var(--ink-soft)}

/* ---------- 品牌合作页：区块一 三类合作场景（卡片，无编号，靠留白／细线／图标分层） ---------- */
.scene-card{display:flex;flex-direction:column;padding:26px 24px}
.scene-card__icon,
.how-item__icon{
  display:flex;align-items:center;justify-content:center;line-height:0;
  width:38px;height:38px;margin-bottom:16px;border-radius:10px;
}
/* 一级图标（三类合作场景）保持品牌红 */
.scene-card__icon{background:var(--red-50);color:var(--red)}
/* 次级图标（工作方式）用灰绿点缀：呼应首屏照片色调，且不与品牌红争夺注意力 */
.how-item__icon{background:var(--sage-soft);color:var(--sage)}
.scene-card__icon svg,.how-item__icon svg{width:20px;height:20px;stroke-width:1.6}
.scene-card h3{margin:0 0 .5em;font-size:1.12rem;line-height:1.4}
.scene-card .fit{margin:0;font-size:.95rem;color:var(--ink-soft);line-height:1.7}
/* 细分隔线：卡片内的「支持方向」分界用灰绿细线 */
.scene-card .support{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--sage-line);
  font-size:.92rem;color:var(--ink-soft);line-height:1.7;
}
.scene-card .support .k{display:inline-block;margin-right:.5em;font-weight:600;color:var(--ink)}

/* ---------- 品牌合作页：服务区（六项服务，3×2 铺满版心；纯文字，无图片与额外装饰） ---------- */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.svc-card{
  display:flex;flex-direction:column;
  padding:26px;
}
.svc-card h3{margin:0 0 .5em;font-size:1.06rem;line-height:1.45}
.svc-card p{margin:0;font-size:.94rem;color:var(--ink-soft);line-height:1.7}

/* 页首直接进内容：区块标题作为页面主标题 */
.section__head h1{font-size:clamp(1.45rem,2.5vw,1.85rem);line-height:1.3;margin:0 0 .5em}
/* 场景区承接页首：上间距收紧，下方留呼吸 */
#scenarios{padding:60px 0 68px}
#scenarios .section__head{margin-bottom:34px}
/* 服务区简介为单行短句，放宽标题区宽度避免折行 */
#capabilities .section__head{max-width:860px}
/* 团队实力区：沿用全站版心（与服务区一致），说明文字单独限宽约 1120px，左对齐不拉伸 */
#team .section__head{max-width:none;margin-bottom:22px}
#team .section__head p{max-width:1120px;font-size:1rem}

/* 锚点跳转避开吸顶页眉 */
.service-block[id],.path-block[id],section[id],.scene-card[id]{scroll-margin-top:88px}

/* 首页曾用：两类客户入口（已并入首屏「三类品牌需求」，样式保留备用） */

/* ---------- 创作者页：hero 文案 + 行动按钮 + 场景图 + 表单 合并为同一栅格 ----------
   桌面：标题/介绍/按钮整行居中（沿用 .page-hero--center 观感），下方左图右表；
   移动端用 order 重排为「标题与介绍 → 图片 → 行动按钮 → 表单」，桌面版式不变 */
.creator-page{padding:56px 0 72px;background:var(--bg)}
.creator-flow{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  column-gap:38px;row-gap:0;align-items:start;
}
.creator-head{grid-column:1 / -1;max-width:900px;margin:0 auto;text-align:center}
.creator-head h1{
  font-size:clamp(2.1rem,4vw,2.75rem);line-height:1.28;
  margin:0;margin-left:auto;margin-right:auto;text-wrap:balance;
}
html[lang="en"] .creator-head h1{font-size:clamp(2.05rem,3.8vw,2.625rem)}
.creator-head h1 .keep{white-space:nowrap}
.creator-head p{
  font-size:1.02rem;line-height:1.72;color:var(--ink-soft);font-weight:400;
  max-width:41em;margin:14px auto 0;text-align:center;text-wrap:pretty;
}
.creator-cta{
  grid-column:1 / -1;display:flex;justify-content:center;
  margin-top:26px;padding-bottom:48px;margin-bottom:72px;
  border-bottom:1px solid var(--sage-line);
}
.creator-shot{margin:0;grid-column:1}
.creator-form-col{grid-column:2}
/* 图片边缘：与 about 双图一致，用灰绿细线（不是装饰框，只是 1px 收边） */
.creator-shot__photo{
  position:relative;overflow:hidden;aspect-ratio:4 / 5;border-radius:var(--radius);
  border:1px solid var(--sage-line);
}
.creator-shot__photo img{width:100%;height:100%;object-fit:cover}
/* 占位图：浅底 + 线性图标 + 场景名，精致低调；放入真实照片后自动隐藏 */
.creator-shot__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(158deg,#F7F5F2 0%,#F0EDE9 100%);color:var(--neutral);
}
.creator-shot__ph svg{width:24px;height:24px;stroke-width:1.4;color:#B6B1AA}
.creator-shot__ph span{font-size:.86rem;letter-spacing:.02em}
.creator-shot__photo:has(img) .creator-shot__ph{display:none}

/* ---------- metrics ---------- */
/* 数据卡片区分区标题：左对齐（与卡片区左缘一致，同在 .container 内容列内），
   字号/字重明显高于卡片说明文字（.label .88rem/400），但低于页面主标题（h1 1.9–2.5rem）
   与区块标题（h2）；沿用现有字体与墨色，不加装饰；标题与卡片之间留 18px 间距 */
.metric-title{
  font-size:clamp(1.05rem,1.8vw,1.2rem);
  font-weight:600;color:var(--ink);
  margin:0 0 18px;line-height:1.3;letter-spacing:-.01em;
}
/* 数据卡：静止时边缘=灰绿发丝线（与全站细线同一套），悬停时加深一档；
   不加阴影、不铺底色、不改圆角与内边距 —— 灰绿只在 1px 边上出现 */
.metric{
  background:#fff;border:1px solid var(--sage-line);border-radius:var(--radius-sm);padding:20px;
  transition:border-color .18s ease;
}
.metric:hover{border-color:var(--sage-hover)}
.metric .num{font-size:1.3rem;font-weight:600;color:var(--ink);line-height:1.35}
.metric .num em{font-style:normal;color:var(--red)}
.metric .num--text{font-size:1rem}
.metric .label{font-size:.88rem;color:var(--ink-soft);margin-top:6px}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{position:relative;padding-top:52px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;
  background:var(--bg-warm);border:1px solid var(--line);color:var(--ink);
  font-weight:600;font-size:.9rem;display:flex;align-items:center;justify-content:center;
}
.step h3{margin-bottom:.3em}
.step p{color:var(--ink-soft);font-size:.95rem;margin:0}

/* ---------- notes ---------- */
.note{
  border-radius:var(--radius-sm);padding:16px 18px;font-size:.93rem;
  border:1px solid var(--line);background:var(--bg-warm);color:var(--ink-soft);
}
.note strong{color:var(--ink)}
.note--important{background:var(--red-50);border-color:var(--red-line)}
.note--important strong{color:var(--red-dark)}
.note p:last-child{margin-bottom:0}

/* 待补充占位标记 */
.ph{
  display:inline-block;font-style:normal;font-weight:500;
  background:#F1F0EC;border:1px dashed #C9C5BE;border-radius:4px;
  padding:0 7px;font-size:.9em;color:var(--neutral);white-space:nowrap;
}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1 / -1}
.field label{font-size:.88rem;font-weight:600;color:var(--ink)}
.field label .opt{font-weight:400;color:var(--neutral)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.98rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:128px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(240,8,8,.10);
}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:24px}
.form-foot p{font-size:.86rem;color:var(--neutral);margin:0;max-width:34em}
/* 仅创作者页：表单下方说明小字与「品牌合作」页正文基准一致（1.02rem / 1.72 / --ink-soft / 400） */
.creator-form-col .form-foot p{
  font-size:1.02rem;line-height:1.72;color:var(--ink-soft);font-weight:400;
}
.form-msg{
  display:none;margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);
  font-size:.93rem;border:1px solid var(--red-line);background:var(--red-50);color:var(--red-dark);
}
.form-msg.is-visible{display:block}

/* ---------- 联系我们页：表单居中，联系信息在表单下方 ---------- */
.contact-shell{max-width:860px;margin:0 auto}
.contact-shell .form-card{padding:34px}
/* 表单下方的创作者提示（简短链接） */
.creator-hint{margin:18px 0 0;font-size:.93rem;color:var(--ink-soft)}
.creator-hint a{color:var(--red);font-weight:600}
/* 联系信息：表单下方的小区块，标题 + 邮箱/电话两行，纵向排列 */
/* 细分隔线：联系信息区与表单的分界用灰绿细线 */
.contact-direct{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--sage-line);
}
.contact-direct__title{
  margin:0 0 12px;font-size:1.05rem;line-height:1.4;font-weight:600;color:var(--ink);
}
.contact-direct__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.contact-direct__item{display:flex;gap:14px;align-items:baseline;font-size:.96rem}
.contact-direct__item .k{color:var(--neutral);min-width:4.5em;flex:0 0 auto}
/* 邮箱 / 电话：纯文本展示（2026-10-13 起不再做成可点击链接）
   保留一点字重与字距，让信息在表单下方仍然清晰易读 */
.contact-direct__item .v,
.contact-direct__link{
  color:var(--ink);font-weight:600;letter-spacing:.01em;overflow-wrap:anywhere;
}
/* 联系信息未确认前（仍含 .ph 占位）不对外展示，避免占位文字出现在正式页面 */
.contact-direct__item:has(.ph){display:none}
/* 全部行都还是占位时整块隐藏（JS 兜底，见 assets/js/main.js） */
.contact-direct.is-empty{display:none}
/* 页脚等处的占位联系信息同样在确认前隐藏 */
.footer-nav li:has(.ph){display:none}

/* ---------- 内容型视觉块（细线 / 低饱和，非占位卡片） ---------- */
.visual{
  position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius);background:linear-gradient(160deg,#FFFFFF 0%,var(--bg-warm) 100%);
}
.visual::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(32,35,38,.05) 0 1px, transparent 1px 26px);
  -webkit-mask-image:linear-gradient(100deg,transparent 20%,#000 75%);
  mask-image:linear-gradient(100deg,transparent 20%,#000 75%);
}
.visual--hero{height:330px}
.visual--split{height:320px}
.visual--sm{height:210px}
.split .visual,.service-block .visual{width:100%}

/* ---------- CTA band ---------- */
/* 细分隔线：CTA 带与上方内容的分界用灰绿细线 */
.cta-band{background:var(--bg-warm);border-top:1px solid var(--sage-line);padding:64px 0;text-align:center}
.cta-band h2{max-width:22em;margin-left:auto;margin-right:auto}
.cta-band p{color:var(--ink-soft);max-width:42em;margin:0 auto;font-size:1.02rem}
.cta-band .btn-row{justify-content:center}

/* ---------- inner page hero ---------- */
/* 细分隔线：内页页首与下方内容的分界用灰绿细线 */
.page-hero{padding:56px 0 44px;background:var(--bg);border-bottom:1px solid var(--sage-line)}
.page-hero h1{max-width:22em}
.page-hero p{color:var(--ink-soft);font-size:1.05rem;max-width:46em;margin-bottom:0}
.page-hero .btn-row{margin-top:26px}
/* 创作者页 hero 样式已并入 .creator-head / .creator-cta（见 .creator-flow 栅格段） */
/* 首屏「提交创作者资料」按钮跳到本页表单，避开吸顶页眉 */
#creator-form{scroll-margin-top:96px}

.service-block{
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;
  padding:36px 0;border-bottom:1px solid var(--line-soft);
}
.service-block:last-child{border-bottom:0}
.service-block h2{font-size:1.35rem;margin-bottom:.5em}
.service-block .fit{font-weight:600;color:var(--ink);margin-bottom:.8em}
.service-block ul{list-style:none;padding:0;margin:0}
.service-block li{position:relative;padding-left:24px;color:var(--ink-soft);margin:.5em 0}
.service-block li::before{
  content:"";position:absolute;left:0;top:.78em;width:12px;height:2px;background:var(--red);
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}

.flow{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:500;font-size:.98rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;
}
.flow i{color:var(--neutral);font-style:normal}

.legal{max-width:780px}
.legal h2{font-size:1.22rem;margin-top:34px}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{color:var(--ink-soft)}

/* ---------- footer ---------- */
.site-footer{background:var(--footer-bg);color:#A8ADB4;padding:50px 0 26px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.site-footer h4{color:#fff;font-size:.95rem;font-weight:600;margin-bottom:14px}
.site-footer a{color:#A8ADB4;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
/* ---------- 页脚双语品牌标识：官方双语 Logo（1940×470，StarDance + 星空跳动 Global） ---------- */
.footer-brand{display:block;margin-bottom:16px}
/* 高度 44px：英文部分视觉高度与旧版页脚一致，中文行自然包含在图内 */
.footer-logo{height:44px;width:auto;margin:0;filter:brightness(0) invert(1);opacity:.94}
/* logo 缺失时的文字兜底 */
.footer-fallback{display:none;font-weight:600;font-size:1.1rem;color:#fff;margin:8px 0 0}
/* 定位语：品牌名下方的简短说明，层级低于标识，单行不拆 */
.footer-tagline{margin:0;max-width:32em;font-size:.92rem;line-height:1.7;color:#A8ADB4}
.footer-fallback em{font-style:italic;color:var(--red)}
.site-footer.logo-missing .footer-logo{display:none}
.site-footer.logo-missing .footer-fallback{display:block}
.footer-nav{list-style:none;margin:0;padding:0}
.footer-nav li{margin:.4em 0}
/* 页脚联系信息（邮箱 / 电话）：邮箱较长，允许在窄列内折行（纯文本，非链接） */
.footer-nav li{overflow-wrap:anywhere}
/* 页脚「品牌合作」为单一链接，不再展开三条市场路径子栏目（2026-10-13 移除 .footer-sub） */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:#A8ADB4;font-size:.85rem;
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .closing__inner{max-width:64%}
  .path-block{grid-template-columns:1fr;gap:18px;padding:26px 0}
  .visual--hero{height:220px}
  .visual--split{height:240px}
  .visual--sm{height:190px}
  .split,.service-block{grid-template-columns:1fr;gap:26px}
  .grid--2{grid-template-columns:1fr;gap:32px}
  .how-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  /* 创作者页：≤1000 单列；标题/介绍/按钮整行，下方图片→表单纵向堆叠（桌面版式在此断点以上保持） */
  .creator-flow{grid-template-columns:1fr;row-gap:26px}
  .creator-head{grid-column:1 / -1}
  .creator-cta{grid-column:1 / -1}
  .creator-shot{grid-column:auto}
  .creator-form-col{grid-column:auto}
  .creator-shot__photo{aspect-ratio:3 / 2}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  /* 服务区：窄屏服务卡改 2 列 */
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .nav-toggle{display:block}
  .main-nav{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);padding:10px 24px 18px;margin:0;
  }
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav a{padding:13px 2px;font-size:1rem;border-bottom:1px solid var(--line-soft)}
  /* 移动端：三条市场路径直接展开在「品牌合作」下方，缩进显示层级 */
  .sub-nav{
    position:static;min-width:0;margin:0;padding:0 0 4px 12px;
    background:transparent;border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
  }
  .main-nav .has-sub>a::after{display:none}
  .sub-nav a{padding:10px 2px;font-size:.94rem;border-bottom:1px solid var(--line-soft);border-radius:0}
  .sub-nav li:last-child a{border-bottom:0}
  .header-inner{position:relative}
  .site-header .header-actions{display:flex;align-items:center;gap:10px}
  .lang-switch,.nav-toggle{margin-left:0}
}

@media (max-width:760px){
  /* 关于我们图组：窄桌面/平板改为纵向排列，主体完整可见 */
  .about-gallery{grid-template-columns:1fr;gap:16px}
  .about-gallery__item--a,.about-gallery__item--b{grid-column:1;grid-row:auto}
  .about-gallery__item--c{grid-column:1;grid-row:auto}
  /* 手机版仅对调第一、二张图显示顺序：图②(泳池边)在前、图①(棚内监视器)在后，图③不动；桌面版（>760px）顺序不变 */
  .about-gallery__item--a{order:2}
  .about-gallery__item--b{order:1}
  .about-gallery__item--c{order:3}
}

@media (max-width:640px){
  :root{--gutter:20px}
  .section{padding:52px 0}
  /* 关于我们：图组与「团队背景」手机端间距同步（上 40 / 下 20，与桌面节奏一致） */
  .section.section--after-gallery{padding-top:40px;padding-bottom:20px}
  /* 关于我们图组：手机端搭配图改用 4:3 竖构图（picture 源切到 -m 文件），主体完整 */
  .about-gallery{gap:14px}
  .about-gallery__item--c{aspect-ratio:4/3}
  .grid--3,.grid--4{grid-template-columns:1fr}
  /* 关于我们：工作方式纵向排列 */
  .how-grid{grid-template-columns:1fr;gap:22px}
  .svc-grid{grid-template-columns:1fr;gap:16px}
  .svc-card{padding:22px}
  .steps{grid-template-columns:1fr;gap:20px}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .btn{width:100%}
  .btn-row{gap:10px}
  /* 创作者页手机端重排：标题与介绍 → 图片 → 行动按钮 → 表单（桌面版式不变） */
  .creator-flow{grid-template-columns:1fr;row-gap:26px}
  .creator-head{grid-column:auto;order:1}
  .creator-shot{grid-column:auto;order:2}
  .creator-cta{
    grid-column:auto;order:3;
    margin-top:0;padding-bottom:0;margin-bottom:0;border-bottom:0;
  }
  .creator-form-col{grid-column:auto;order:4}
  .creator-shot__photo{aspect-ratio:3 / 2}
  .form-foot{flex-direction:column;align-items:stretch}
  .contact-direct__item{flex-direction:column;gap:2px}
  .contact-shell .form-card{padding:24px}
  .cta-band{padding:48px 0}
  .closing{padding:24px 0 40px}
  .closing__inner{max-width:none}
  .closing p{margin-top:10px;font-size:.95rem}
  .closing .btn{margin-top:20px}
}

/* 极窄屏页眉（2026-10-14，顺手修的既有问题）：
   ≤380px（360/375 这类常见安卓与小屏机型）时 logo 182px + 语言切换 + 汉堡按钮
   一行放不下，实测整页会多出 14px 横向溢出、出现横向滚动条（13 个页面全中）。
   这里把 logo 收紧一档、窄化语言切换的内边距，并锁住汉堡按钮不被 flex 压扁。
   只在 ≤380px 生效，390px 及以上（含主流 iPhone）页眉保持原样。 */
@media (max-width:380px){
  :root{--logo-h:36px}
  .header-inner{gap:14px}
  .lang-switch a{padding:5px 9px}
  .nav-toggle{flex:0 0 auto}
}
/* 再退一档：320/344 这类超窄屏（老款小屏机） */
@media (max-width:344px){
  :root{--logo-h:32px}
  .header-inner{gap:8px}
  .lang-switch a{padding:5px 7px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}