@charset "utf-8";
/* ═══════════════════════════════════════════════════════════
   纯爱优选 CHUNAI · 单页官网样式
   结构：字体 → token → reset → 基础 → 组件 → 区块 → 响应式
   ═══════════════════════════════════════════════════════════ */

/* ── 自托管字体子集（见 README「字体子集」） ───────────────── */
@font-face{
  font-family:"Chunai Latin";
  src:url("../fonts/chunai-latin.woff2?v=20261021b") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Chunai Song";
  src:url("../fonts/chunai-song.woff2?v=20261021b") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

/* ── Token ──────────────────────────────────────────────── */
:root{
  /* 品牌色：红只做强调，全站可见面积 ≤5% */
  --brand:#FF2442;
  --brand-deep:#E01E3A;
  --brand-ink:#C81B35;   /* 亮底上的红字，对比度 5.4:1 */
  --brand-lite:#FF6B82;  /* 深底上的红字，对比度 5.8:1 */
  --blush:#FFE8EC;

  /* 深色舞台：复用 LiveDP 登录页渐变三段 */
  --wine-900:#1D050B;
  --wine-700:#450C1B;

  /* 正文底：暖象牙白，替代后台冷灰 #F7F7F8 */
  --ivory:#FBF8F6;

  --ink:#1A1618;
  --ink-2:#6B625F;
  --ink-3:#746A66;  /* 亮底弱化文字，对比度约 5:1 */

  --line:rgba(26,22,24,.10);
  --line-l:rgba(255,255,255,.14);

  --grad-wine:linear-gradient(158deg,#1d050b 0%,#320a15 46%,#450c1b 100%);

  /* 字体栈：拉丁走 Cormorant，汉字走思源宋体子集，再兜底系统宋体 */
  --ff-sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-serif:"Chunai Latin","Chunai Song","Songti SC","STSong","SimSun",serif;

  --maxw:1200px;
  --pad:clamp(20px,5vw,48px);
  --sec-y:clamp(72px,10vw,160px);
  --nav-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--ff-sans);font-size:16px;line-height:1.9;
  /* Cormorant 默认老式数字，强制等宽衬线数字，跟汉字基线对齐 */
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
::selection{background:var(--blush);color:var(--wine-900)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

section[id]{scroll-margin-top:var(--nav-h)}

/* ── 布局工具 ───────────────────────────────────────────── */
.wrap{
  width:100%;max-width:calc(var(--maxw) + var(--pad) * 2);
  margin-inline:auto;padding-inline:var(--pad);
}
.grid{display:grid;gap:clamp(36px,5vw,80px);grid-template-columns:1fr}
.col{min-width:0}

/* ── 区块底色 ───────────────────────────────────────────── */
.sec{padding-block:var(--sec-y);position:relative}
.sec--ivory{background:var(--ivory);color:var(--ink)}
.sec--tight{padding-block:clamp(56px,7vw,110px)}
.sec--dark{
  background:var(--grad-wine);color:#fff;overflow:hidden;
}
/* 深色区巨大 CA 水印（3% 透明度，纯装饰） */
.sec--dark::after{
  content:"CA";position:absolute;right:-3vw;bottom:-6vw;
  font-family:var(--ff-serif);font-size:clamp(180px,32vw,520px);line-height:.78;
  color:rgba(255,255,255,.03);pointer-events:none;user-select:none;
}
.sec--dark > .wrap{position:relative;z-index:1}

/* ── 标题与文本 ─────────────────────────────────────────── */
.kicker{
  font-family:var(--ff-serif);font-size:.78rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:.7em;
}
.kicker::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--brand);
}
.kicker--light{color:rgba(255,255,255,.7)}

.h2{
  font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(26px,3.4vw,40px);line-height:1.4;letter-spacing:.01em;
  margin-top:clamp(18px,2.4vw,28px);
}
.h2--light{color:#fff}
.h2--sm{font-size:clamp(22px,2.6vw,32px)}

.claim{
  font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(34px,5.6vw,62px);line-height:1.24;letter-spacing:.02em;
  margin-top:clamp(20px,2.6vw,32px);
}
.lead{
  margin-top:clamp(14px,1.8vw,20px);font-size:1.05rem;
  color:rgba(255,255,255,.82);max-width:34ch;
}
.lead--ink{color:var(--ink-2);max-width:72ch}
.meta{
  margin-top:clamp(20px,2.6vw,32px);font-family:var(--ff-serif);
  font-size:.9rem;letter-spacing:.14em;color:var(--ink-3);
}
.prose{margin-top:clamp(20px,2.6vw,30px);color:var(--ink-2);max-width:46ch}
.prose p + p{margin-top:1.05em}
.prose--light{color:rgba(255,255,255,.82)}

/* ── 按钮：直角、无投影、无渐变 ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:48px;padding:0 clamp(22px,2.6vw,34px);
  font-size:.94rem;letter-spacing:.06em;border:1px solid transparent;
  background:none;cursor:pointer;text-align:center;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn--brand{background:var(--brand-deep);color:#fff}
.btn--brand:hover{background:var(--brand-ink)}
.btn b{font-weight:600;font-family:var(--ff-serif);letter-spacing:.04em}
.btn i{font-style:normal;font-size:.78rem;opacity:.72}

/* ── 图片容器：三层兜底（渐变底 / onerror / 写死比例） ──── */
.fig{
  position:relative;overflow:hidden;aspect-ratio:3/4;
  background:var(--grad-wine);
}
.fig--wide{aspect-ratio:3/2}
.fig--tall{aspect-ratio:3/4}
.fig img{width:100%;height:100%;object-fit:cover}
.fig.is-broken img{display:none}
/* 统一全站照片色调：极淡酒红叠色，把不同图库的色温拉到一起 */
.fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(69,12,27,.13);mix-blend-mode:multiply;
}

/* ══════════ 导航 ══════════ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:#fff;color:var(--ink);padding:10px 18px;
}
.skip:focus{left:12px;top:12px}

.nav{
  position:fixed;inset:0 0 auto;z-index:60;color:#fff;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
.nav__in{
  width:100%;max-width:calc(var(--maxw) + var(--pad) * 2);
  margin-inline:auto;padding-inline:var(--pad);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav.is-scrolled{color:var(--ink);background:rgba(251,248,246,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.is-scrolled::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line)}

.brand{display:flex;align-items:center;color:inherit;position:relative;z-index:80;padding-block:5px}
.brand__logo{display:block;height:36px;width:auto}
/* 未滚动时导航压在深色 Hero 上，紫色字标只有 3.1:1，改为白色版；
   菜单打开时遮罩同样是深酒红，所以 is-open 状态下也强制白色。 */
.nav:not(.is-scrolled) .brand__logo,
body.is-open .brand__logo{filter:brightness(0) invert(1)}

.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav__links a{font-size:.9rem;letter-spacing:.08em;opacity:.85;transition:opacity .3s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__links > a{
  position:relative;padding-block:6px;
}
.nav__links > a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brand);
  transition:right .4s var(--ease);
}
.nav__links > a:hover::after,
.nav__links > a.is-active::after{right:0}
/* 下划线跟随文字色：深色导航下用浅红，象牙白导航下用深红 */
.nav__links > a.is-active::after{background:currentColor}
.nav__links > a.is-active{opacity:1;color:var(--brand-lite)}
.nav.is-scrolled .nav__links > a.is-active{color:var(--brand-ink)}

.burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  padding:0;position:relative;
}
.burger span{
  position:absolute;left:11px;width:22px;height:1px;background:currentColor;
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
body.is-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.is-open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
body.is-open .burger{color:#fff}

/* ══════════ 1 Hero ══════════ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr auto;color:#fff;overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  animation:kb 22s var(--ease) forwards;
}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(29,5,11,.90) 0%,rgba(29,5,11,.76) 34%,rgba(29,5,11,.34) 66%,rgba(50,10,21,.66) 100%),
    linear-gradient(180deg,rgba(29,5,11,.58) 0%,rgba(29,5,11,.04) 34%,rgba(29,5,11,.70) 100%);
}
/* 纵向节奏同时参考 svh：窗口变矮时标题、间距一起收紧，
   保证正文整屏装得下，不会在 16:9 笔记本上被切掉一截。 */
.hero__body{
  position:relative;z-index:2;align-self:center;
  padding-block:calc(var(--nav-h) + clamp(28px,6vh,80px)) clamp(40px,7vh,90px);
  padding-block:calc(var(--nav-h) + clamp(28px,6vh,80px)) clamp(34px,5.2svh,90px);
}
.hero__h{
  font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(36px,6.6vw,72px);line-height:1.22;letter-spacing:.015em;
  font-size:clamp(36px,min(6.6vw,7.8svh),72px);
  margin-top:clamp(18px,2.4vw,28px);
  margin-top:clamp(14px,min(2.4vw,2.4svh),28px);
}
.hero__sub{
  margin-top:clamp(20px,2.8vw,32px);max-width:38ch;
  margin-top:clamp(16px,min(2.8vw,3.4svh),32px);
  font-size:clamp(15px,1.5vw,17px);line-height:1.95;color:rgba(255,255,255,.82);
}
.hero__act{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:clamp(28px,4vw,44px);
  margin-top:clamp(24px,min(4vw,4.6svh),44px);
}

/* ══════════ 3 核心业绩 ══════════ */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(40px,5vw,72px);
}
.stats li{
  padding:clamp(28px,3.4vw,44px) clamp(14px,2vw,28px) clamp(20px,2.4vw,28px) 0;
  min-width:0;
}
.stat{
  display:block;font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.stat__lb{
  display:block;margin-top:.9em;font-size:.78rem;letter-spacing:.14em;
  color:rgba(255,255,255,.68);line-height:1.6;
}
/* 数据口径标注：压在业绩区右下角，弱化处理 */
.stats__note{
  margin-top:clamp(20px,3vw,36px);
  text-align:right;
  font-size:.68rem;letter-spacing:.04em;
  color:rgba(255,255,255,.34);
}

/* ── 增长带：描述 / 成长曲线 / GMV 同比增速三栏并列 ───────── */
.grow{
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);
  margin-top:clamp(40px,5vw,64px);
}
.grow__intro,.grow__curve{min-width:0}
.grow__lb{
  font-size:.74rem;letter-spacing:.2em;color:rgba(255,255,255,.62);
  text-transform:uppercase;
}
.grow__t{
  font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(24px,3vw,34px);line-height:1.4;letter-spacing:.02em;
  margin-top:.6em;text-wrap:balance;
}
.grow__p{
  margin-top:.8em;max-width:42ch;font-size:.9rem;line-height:1.9;
  color:rgba(255,255,255,.74);
}
.rail{margin-top:clamp(24px,3vw,36px)}
.rail svg{display:block;width:100%;height:auto;overflow:visible}
.rail__stops{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px}
.rail__stops li{display:flex;flex-direction:column;gap:.35em;min-width:0}
.rail__stops li:nth-child(2){align-items:center;text-align:center}
.rail__stops li:last-child{align-items:flex-end;text-align:right}
.rail__stops b{font-weight:500;font-size:.9rem;letter-spacing:.04em}
.rail__stops span{font-size:.72rem;letter-spacing:.12em;color:rgba(255,255,255,.62)}
.grow__side{display:flex;flex-direction:column;justify-content:flex-start}
.grow__rate{
  font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(44px,6vw,72px);line-height:1;letter-spacing:.01em;
  margin-top:.3em;font-variant-numeric:lining-nums tabular-nums;
}
.grow__rate span{font-size:.38em;vertical-align:super;margin-left:.06em;opacity:.75}

/* ══════════ 4 业务双引擎 ══════════ */
.duo{
  display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,64px);
  margin-top:clamp(36px,5vw,64px);
}
.duo__c{min-width:0}
.duo__t{
  font-family:var(--ff-serif);font-weight:500;font-size:clamp(22px,2.6vw,30px);
  letter-spacing:.04em;margin-top:clamp(22px,2.6vw,32px);
  display:flex;align-items:baseline;gap:.9rem;
}
.duo__t i{font-style:normal;font-size:.56em;letter-spacing:.28em;color:var(--ink-3)}
.ticks{margin-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--line)}
.ticks li{
  display:flex;flex-direction:column;gap:.28em;
  padding:.72em 0;border-bottom:1px solid var(--line);
  font-size:.92rem;color:var(--ink-2);letter-spacing:.04em;
}
.ticks b{font-weight:500;color:var(--ink);letter-spacing:.05em}
.ticks span{font-size:.84em;line-height:1.6;color:var(--ink-3);letter-spacing:.02em}

/* ══════════ 5 合作条款 ══════════ */
.terms{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line-l)}
.terms li{
  display:grid;gap:clamp(8px,1.4vw,24px) clamp(16px,3vw,40px);
  grid-template-columns:auto 1fr;
  padding-block:clamp(24px,3vw,38px);border-bottom:1px solid var(--line-l);
}
.terms__n{
  font-family:var(--ff-serif);font-size:.9rem;letter-spacing:.16em;
  color:var(--brand-lite);padding-top:.45em;
}
.terms__t{
  font-family:var(--ff-serif);font-weight:500;font-size:clamp(19px,2.1vw,26px);
  letter-spacing:.03em;line-height:1.4;
}
.terms li p{
  grid-column:2;margin-top:.6em;font-size:.92rem;line-height:1.9;
  color:rgba(255,255,255,.74);max-width:52ch;
  text-wrap:balance; /* 均衡断行，避免末行只剩一两个字 */
}
/* 签名元素：整幅引语。号数左起、主张为大，解释退回正文字号，署名收尾 */
.quote{
  display:grid;grid-template-columns:clamp(52px,6.4vw,104px) 1fr;
  gap:0 clamp(16px,2.4vw,36px);
  margin-top:clamp(64px,8vw,120px);padding-top:clamp(32px,4vw,52px);
  border-top:1px solid var(--line-l);
}
.quote__mark{
  font-family:var(--ff-serif);font-size:clamp(64px,8.4vw,124px);
  line-height:.7;color:var(--brand);user-select:none;padding-top:.06em;
}
.quote__close{
  display:block;text-align:right;margin-top:.02em;
  font-family:var(--ff-serif);font-size:clamp(64px,8.4vw,124px);
  line-height:.7;color:var(--brand);user-select:none;pointer-events:none;
}
.quote__body p{
  font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(22px,2.9vw,38px);line-height:1.55;letter-spacing:.015em;
  max-width:20em;
}
.quote__body p + p{
  margin-top:clamp(18px,2.4vw,28px);font-family:var(--ff-sans);
  font-size:clamp(14px,1.15vw,16px);line-height:1.95;letter-spacing:.01em;
  color:rgba(255,255,255,.74);max-width:46em;
}
.quote cite{
  display:block;margin-top:clamp(18px,2.2vw,26px);font-style:normal;
  font-size:.78rem;letter-spacing:.22em;color:rgba(255,255,255,.62);
}

/* ══════════ 6 买手孵化路径 ══════════ */
.steps{
  display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,72px);
  margin-top:clamp(36px,5vw,64px);
}
.path li{
  position:relative;border-left:1px solid var(--line);
  padding:0 0 clamp(26px,3.4vw,44px) clamp(22px,3vw,44px);
}
.path li:last-child{padding-bottom:0}
.path li::before{
  content:"";position:absolute;left:-3px;top:.75em;
  width:5px;height:5px;border-radius:50%;background:var(--brand);
}
.path__n{
  display:block;font-family:var(--ff-serif);font-size:.8rem;
  letter-spacing:.2em;color:var(--brand-ink);
}
.path__t{
  font-family:var(--ff-serif);font-weight:500;font-size:clamp(18px,2vw,24px);
  letter-spacing:.03em;margin-top:.5em;line-height:1.45;
}
.path li p{
  margin-top:.5em;font-size:.9rem;line-height:1.9;color:var(--ink-2);max-width:40ch;
}

/* ══════════ 7 合作品牌墙 ══════════ */
/* 品牌名录卡片：纯文字展示，不加载品牌 logo 图形，规避版权风险；
   独立卡片 + 大字 + 巨型序号底纹，用留白和微投影建立质感，而非表格线。 */
.wall{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,1.1vw,16px);
  margin-top:clamp(32px,4vw,52px);
  counter-reset:brand;
}
/* 手机 2 列时共 15 格，末格横跨通栏，避免右下留空 */
.wall li:last-child{grid-column:1/-1}
.wall li{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(120px,12vw,160px);
  padding:clamp(30px,3.2vw,40px) clamp(16px,2vw,24px);
  background-color:#FFFCF9;
  background-image:linear-gradient(160deg,rgba(255,255,255,.85),rgba(248,242,236,0));
  border:1px solid rgba(69,12,27,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px -20px rgba(69,12,27,.3);
  color:var(--ink);counter-increment:brand;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             border-color .55s var(--ease),background-color .55s var(--ease);
}
/* 入场：按列错峰浮起，比整块淡入更有呼吸感 */
.js .wall li{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),
             box-shadow .55s var(--ease),border-color .55s var(--ease),
             background-color .55s var(--ease);
  transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s;
}
.js .wall.is-in li{opacity:1;transform:none}
.wall li:nth-child(5n+1){--d:.02s}
.wall li:nth-child(5n+2){--d:.05s}
.wall li:nth-child(5n+3){--d:.08s}
.wall li:nth-child(5n+4){--d:.11s}
.wall li:nth-child(5n+5){--d:.14s}
/* 左上角编辑序号 */
.wall li::before{
  content:counter(brand,decimal-leading-zero);
  position:absolute;top:clamp(14px,1.6vw,20px);left:clamp(16px,2vw,24px);
  font-family:var(--ff-serif);font-size:.68rem;letter-spacing:.18em;
  color:rgba(26,22,24,.32);transition:color .5s var(--ease);
}
/* 右下角巨型序号：低透明度压作底纹，制造前后层次 */
.wall li::after{
  content:counter(brand,decimal-leading-zero);
  position:absolute;right:clamp(10px,1.4vw,18px);bottom:-.14em;
  font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(56px,4.8vw,72px);line-height:1;letter-spacing:-.02em;
  color:rgba(69,12,27,.06);
  pointer-events:none;transition:color .55s var(--ease);
}
.wall__name{
  position:relative;z-index:1;display:inline-block;
  font-family:var(--ff-serif);font-weight:500;
  font-size:18px;letter-spacing:.05em;line-height:1.35;
  white-space:nowrap;text-align:center;color:var(--ink);
  transition:color .5s var(--ease);
}
/* 中英混排品牌：拉丁缩写小一号，避免长名换行 */
.wall__latin{margin-left:.32em;font-size:.78em;letter-spacing:.04em}
.wall__name::after{
  content:"";position:absolute;left:50%;bottom:-.6em;
  width:0;height:1px;background:var(--brand-ink);transform:translateX(-50%);
  transition:width .55s var(--ease);
}
/* 悬停：卡片上浮、投影加深、序号转红、字下细线展开 */
.js .wall.is-in li:hover,
.wall li:hover{
  transform:translateY(-4px);
  background-color:#fff;
  border-color:rgba(69,12,27,.24);
  box-shadow:0 24px 44px -28px rgba(69,12,27,.42),0 2px 8px rgba(69,12,27,.04);
  transition-delay:0s;
}
.wall li:hover::before{color:var(--brand-ink)}
.wall li:hover::after{color:rgba(69,12,27,.10)}
.wall li:hover .wall__name::after{width:32px}

/* ══════════ 8 加入我们 + 联系 + 页脚 ══════════ */
.join .prose--light{max-width:36ch}
/* 加入：创业时间线，两格并列 */
.join__story{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,2.4vw,30px);
  margin-top:clamp(18px,2.4vw,26px);
  padding-top:clamp(14px,2vw,20px);
  border-top:1px solid var(--line-l);
  max-width:42ch;
}
.join__story b{
  display:block;font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(16px,1.4vw,19px);letter-spacing:.04em;
}
.join__story span{
  display:block;margin-top:.5em;font-size:.78rem;line-height:1.7;
  color:rgba(255,255,255,.62);letter-spacing:.03em;
}

/* 页脚：主张 + 商务联系 / 公司 + 地址 / 巨幅字标 / 版权 */
/* 页脚已独立成屏，承接加入我们底部同色，避免出现色带 */
.foot{background:var(--wine-700)}
/* 页脚已有 CHUNAI 字标，去掉深色区右下角的 CA 水印，避免两套水印打架 */
.join::after{display:none}

.foot{
  position:relative;z-index:1;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:flex;
  margin-top:0;
  border-top:1px solid var(--line-l);
  padding-top:clamp(24px,4vh,48px);
  overflow:hidden;
}
/* 四段式纵向节奏：主张/联系 → 能力索引 → 公司/地址 → 版权
   中段占满剩余高度，巨幅字标衬底，四项能力成为收尾主视觉 */
.foot > .wrap{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  width:100%;
}
.foot__top{
  display:grid;grid-template-columns:1fr;
  gap:clamp(26px,3.4vh,40px);
  align-items:end;
}
.foot__eyebrow{
  display:flex;align-items:center;gap:.9em;
  font-size:.68rem;letter-spacing:.22em;color:rgba(255,255,255,.62);
}
.foot__eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);
}
.foot__claim{
  margin-top:clamp(14px,2.2vh,26px);
  font-family:var(--ff-serif);font-weight:400;
  font-size:clamp(26px,7.2vw,40px);
  line-height:1.4;letter-spacing:.02em;
  color:#fff;
  text-wrap:balance;
}
.foot__contact{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.foot__qr{display:flex;gap:clamp(12px,1.6vw,20px)}
/* 二维码需要白底与静区，直接使用白底图 */
.qr{margin:0}
.qr img{
  display:block;width:clamp(76px,18vw,96px);height:auto;
  background:#fff;padding:5px;
}
.foot__in{
  display:grid;grid-template-columns:1fr;
  gap:clamp(20px,3vh,32px);
  padding-top:clamp(18px,3vh,36px);
  border-top:1px solid var(--line-l);
  align-items:start;
}
/* 深酒红底上使用白色字标，避免紫色 logo 对比度不足 */
.foot__logo{display:block;height:clamp(34px,4.4vh,42px);width:auto;filter:brightness(0) invert(1)}
.foot__addr dl{margin:0;display:grid;gap:1em}
.foot__addr dt{font-size:.8rem;letter-spacing:.05em;color:rgba(255,255,255,.82)}
.foot__addr dd{
  margin:.3em 0 0;font-size:.78rem;line-height:1.7;
  color:rgba(255,255,255,.66);
}
/* 中段：核心价值观压在巨幅字标上，形成末屏的视觉中心 */
.foot__mid{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
  padding-block:clamp(10px,2vh,24px);
}
.foot__mark{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  font-family:var(--ff-serif);font-weight:400;
  font-size:clamp(46px,min(18.6vw,26svh),260px);
  line-height:.8;letter-spacing:.05em;
  text-align:center;white-space:nowrap;
  color:rgba(255,255,255,.08);
  -webkit-text-stroke:.5px rgba(255,255,255,.05);
  user-select:none;pointer-events:none;
}
.foot__index{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);
  width:100%;
}
.foot__index li{
  padding:clamp(18px,2.8vh,32px) clamp(8px,1.2vw,18px);
  text-align:center;
  font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(24px,2.6vw,38px);
  line-height:1.2;letter-spacing:.14em;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
}
.foot__meta{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  gap:.6em 1.6em;
  padding-block:clamp(14px,2vh,22px);
  border-top:1px solid var(--line-l);
  font-size:.72rem;letter-spacing:.05em;color:rgba(255,255,255,.56);
}
.foot__icp{color:rgba(255,255,255,.56)}
.foot__icp a{color:inherit;text-decoration:none}
.foot__icp a:hover{text-decoration:underline;text-underline-offset:.2em}

/* 浮动回到顶部：滚过首屏后出现 */
.totop{
  position:fixed;right:clamp(16px,3vw,32px);
  bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:80;width:46px;height:46px;
  display:grid;place-items:center;
  background:rgba(29,5,11,.9);color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.2);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),
             visibility .35s,border-color .3s var(--ease),color .3s var(--ease);
}
.totop svg{width:19px;height:19px}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--brand);color:var(--brand)}

/* ══════════ 联系弹窗 ══════════ */
#foot-contact{scroll-margin-top:calc(var(--nav-h) + 16px)}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(29,5,11,.74);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal__panel{
  position:relative;width:min(560px,100%);max-height:calc(100svh - 40px);
  overflow:auto;background:var(--ivory);color:var(--ink);
  padding:clamp(24px,4vw,44px);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.65);
}
.modal__x{
  position:absolute;top:10px;right:10px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);background:none;border:0;cursor:pointer;
}
.modal__x:hover{color:var(--ink)}
.modal__x svg{width:22px;height:22px}
.modal__t{
  margin-top:clamp(12px,1.8vw,18px);
  font-family:var(--ff-serif);font-weight:500;
  font-size:clamp(22px,3vw,30px);line-height:1.4;
}
.modal__qr{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vw,32px);margin-top:clamp(20px,3vw,30px);
}
.modal__qr figure{margin:0;text-align:center}
.modal__qr img{
  display:block;width:100%;max-width:200px;height:auto;
  margin:0 auto;border:1px solid var(--line);background:#fff;
}
.modal__qr figcaption{
  margin-top:.9em;font-size:.8rem;line-height:1.7;
  letter-spacing:.05em;color:var(--ink-2);
}
.modal__note{
  margin-top:clamp(18px,2.6vw,26px);text-align:center;
  font-size:.78rem;line-height:1.7;color:var(--ink-3);
}
html.is-modal,body.is-modal{overflow:hidden}
@media (max-width:479px){
  .modal__qr{grid-template-columns:1fr;gap:18px}
  .modal__qr figure{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;text-align:left}
  .modal__qr img{max-width:160px;margin:0}
  .modal__qr figcaption{margin-top:0}
}

/* ── 滚动淡入（无 JS 时不隐藏） ─────────────────────────── */
.js [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal-delay="1"]{transition-delay:.09s}
.js [data-reveal-delay="2"]{transition-delay:.18s}
.js [data-reveal-delay="3"]{transition-delay:.27s}
.js [data-reveal-delay="4"]{transition-delay:.36s}

/* ══════════ 响应式：移动优先，向上加断点 ══════════ */
@media (min-width:640px){
  /* 页脚：主张与二维码并排，二维码靠右成组 */
  .foot__top{grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,80px)}
  .foot__contact{
    flex-direction:column;align-items:flex-end;
    gap:clamp(12px,1.8vh,18px);
  }
  .qr img{width:clamp(88px,7vw,112px)}
}
@media (min-width:768px){
  .duo{grid-template-columns:1fr 1fr}
  /* 品牌墙 15 格：3 列 × 5 行，不留空格 */
  .wall{grid-template-columns:repeat(3,1fr)}
  .wall li:last-child{grid-column:auto}
  .wall__name{font-size:22px}
  /* 页脚公司信息：品牌与双城地址左右分栏，纵向居中对齐 */
  .foot__in{grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
  .foot__addr dl{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
}
@media (min-width:1024px){
  /* 品牌墙 15 格：5 列 × 3 行 */
  .wall{grid-template-columns:repeat(5,1fr)}
  .wall__name{font-size:clamp(22px,1.85vw,26px)}
  .grid--6-6{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:7fr 5fr;align-items:start}
  /* 增长带：描述 / 成长曲线 / 增速数字三栏并列，三栏顶部标签共用一条基线 */
  .grow{grid-template-columns:1.05fr 1.15fr .55fr;align-items:start}
  .grow__side{align-items:flex-start;text-align:left}
}

/* ── 桌面端：每个导航区块恰好一屏，点击菜单不串入下一屏 ── */
@media (min-width:1024px){
  .sec{
    min-height:calc(100vh - var(--nav-h));
    min-height:calc(100svh - var(--nav-h));
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(32px,5.2svh,64px);
  }
  .sec > .wrap{width:100%}

  /* 关于：主张 / 正文 / 图片三栏，压缩整体高度 */
  .grid--about{
    grid-template-columns:1.05fr 1.15fr .8fr;
    gap:clamp(28px,3.2vw,52px);
    align-items:start;
  }
  .grid--about .prose,
  .grid--about .fig{margin-top:calc(24px + clamp(20px,2.6vw,32px))}
  /* 三栏下收窄主张字号，避免主张句被挤成三行 */
  #positioning .claim{font-size:clamp(30px,4.4vw,55px)}

  /* 业绩：数字与增长带收进一屏 */
  #performance .h2{margin-top:clamp(10px,1.6svh,18px)}
  #performance .stats{margin-top:clamp(18px,3svh,32px)}
  #performance .stats li{padding-block:clamp(12px,2.2svh,22px) clamp(10px,1.4svh,16px)}
  #performance .stat{font-size:clamp(40px,min(4.6vw,6.6svh),58px)}
  #performance .stat__lb{margin-top:.6em}
  #performance .grow{
    margin-top:clamp(32px,4.6svh,52px);
    gap:clamp(24px,2.8vw,44px);
  }
  #performance .grow__t{font-size:clamp(22px,min(3vw,3.8svh),30px)}
  #performance .grow__p{font-size:.84rem;line-height:1.65}
  #performance .rail{max-width:420px;margin-top:clamp(14px,2svh,22px)}
  #performance .grow__rate{font-size:clamp(44px,min(6vw,7.4svh),68px)}

  /* 业务：图片改用固定高度，卡片收进一屏 */
  #business .duo{margin-top:clamp(26px,4svh,44px);gap:clamp(28px,3.4vw,56px)}
  #business .duo .fig{height:clamp(160px,24.5svh,250px);aspect-ratio:auto}
  #business .duo__t{margin-top:clamp(14px,2svh,22px);font-size:clamp(20px,2vw,26px)}
  #business .ticks{margin-top:12px}
  /* 每项能力改为「名称 + 一句说明」同行，保持一屏高度 */
  #business .ticks li{
    display:grid;grid-template-columns:6.4em minmax(0,1fr);
    align-items:baseline;gap:.3em 1.3em;
    padding:.5em 0;font-size:.88rem;
  }

  /* 条款：左侧标题与引语，右侧条款清单 */
  #terms > .wrap{
    display:grid;
    grid-template-columns:5fr 7fr;
    grid-template-areas:"k t" "h t" "l t" "q t";
    column-gap:clamp(40px,5vw,80px);
    align-items:start;
  }
  #terms .kicker{grid-area:k}
  #terms .h2{grid-area:h}
  #terms .lead{grid-area:l}
  #terms .terms{grid-area:t;margin-top:0}
  /* 左栏较窄，引号收到正文上方，保证引语按整句断行 */
  #terms .quote{
    grid-area:q;
    margin-top:clamp(22px,4svh,40px);
    padding-top:clamp(16px,2.6svh,28px);
    grid-template-columns:1fr;
    gap:clamp(8px,1.4svh,14px) 0;
  }
  #terms .quote__mark{font-size:clamp(40px,4vw,56px);line-height:.6;padding-top:0}
  #terms .quote__close{font-size:clamp(40px,4vw,56px);line-height:.6}
  #terms .quote__body p{font-size:clamp(18px,1.45vw,20px);line-height:1.5}
  #terms .quote__body p + p{font-size:.85rem;line-height:1.75;margin-top:12px}
  #terms .quote cite{margin-top:12px}
  #terms .terms li{padding-block:clamp(12px,1.8svh,20px)}
  #terms .terms__t{font-size:clamp(18px,1.7vw,22px)}
  #terms .terms li p{font-size:.86rem;line-height:1.65;margin-top:.3em;max-width:none}

  /* 孵化：限制图片高度，四步排紧 */
  #incubation .lead{margin-top:clamp(8px,1.2svh,12px)}
  #incubation .steps{margin-top:clamp(12px,2svh,24px);gap:clamp(32px,4vw,56px)}
  #incubation .steps .fig{height:clamp(220px,42svh,390px);aspect-ratio:auto}
  #incubation .path li{padding-bottom:clamp(14px,2.2svh,26px)}
  #incubation .path__t{font-size:clamp(17px,1.6vw,21px);margin-top:.35em}
  #incubation .path li p{margin-top:.35em;font-size:.86rem;line-height:1.75}
  #incubation .path__n{font-size:.75rem}

  /* 品牌：15 格 3 行。原卡片按 vw 定高（最高 160px），矮屏下整块比一屏多出百余 px，
     锚点滚到标题后最后一行落在折线下。改为随视口高度收缩，整墙收进一屏。 */
  #brands .h2{margin-top:clamp(10px,1.6svh,18px)}
  #brands .wall{
    margin-top:clamp(18px,3.4svh,40px);
    gap:clamp(8px,1.4svh,14px);
  }
  #brands .wall li{
    min-height:clamp(84px,17.5svh,160px);
    padding-block:clamp(14px,2.4svh,30px);
  }

  /* 页脚：主张放大为收尾主视觉，字标横向铺满中段 */
  .foot__claim{font-size:clamp(34px,min(4vw,5.6svh),60px);line-height:1.32}
  .foot__mark{font-size:clamp(56px,min(18.6vw,28svh),256px)}
}

/* 矮屏桌面（如 1280×720、1200×700）：孵化区内容比一屏高，收紧间距 */
@media (min-width:1024px) and (max-height:799px){
  #incubation{padding-block:clamp(20px,3svh,32px)}
  #incubation .h2{margin-top:clamp(12px,1.8svh,20px)}
  #incubation .path li{padding-bottom:clamp(10px,1.7svh,20px)}
  #incubation .path__t{font-size:clamp(16px,1.5vw,19px);margin-top:.3em}
  #incubation .path li p{margin-top:.3em;line-height:1.65}
}

/* 中屏：浮动按钮与页脚底栏同高，给备案号右侧留白 */
@media (min-width:768px) and (max-width:1399px){
  .foot__meta{padding-right:64px}
}

/* 平板竖屏：核心价值观改 2×2 并拉开行高，避免中段被拉成一整片空窗 */
@media (min-width:640px) and (max-width:1023px){
  .foot__index{grid-template-columns:1fr 1fr}
  .foot__index li{
    padding-block:clamp(24px,4svh,42px);
    font-size:clamp(26px,3.6vw,34px);
  }
  .foot__mark{font-size:clamp(64px,24vw,176px)}
}

/* 小屏：页脚压进一屏，地址横排、二维码与提示并排 */
@media (max-width:639px){
  .foot{padding-top:clamp(22px,3.2vh,30px)}
  .foot__claim{margin-top:14px}
  .foot__index{grid-template-columns:1fr 1fr}
  .foot__index li{
    padding-block:clamp(22px,3.4svh,30px);
    font-size:clamp(24px,7vw,30px);
  }
  .foot__in{padding-top:18px;gap:20px}
  .foot__brand{display:flex;align-items:center;gap:14px}
  .foot__logo{height:34px}
  .foot__addr dl{gap:.6em}
  .foot__addr dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .foot__addr dt{font-size:.78rem;white-space:nowrap}
  .foot__addr dd{margin:0;font-size:.75rem;line-height:1.5;text-align:right}
  .foot__contact{gap:14px}
  .foot__qr{gap:12px}
  /* 给右下角回顶按钮留出空间，避免遮住杭州地址 */
  .foot__addr{padding-right:52px}
  .qr img{width:clamp(70px,19vw,84px);padding:4px}
}

/* 窄屏：Hero 文案区压在图上，蒙版加厚 */
@media (max-width:767px){
  .hero__media img{object-position:50% 38%;animation:none}
  .hero__veil{
    background:
      linear-gradient(180deg,rgba(29,5,11,.90) 0%,rgba(29,5,11,.72) 38%,rgba(29,5,11,.86) 74%,rgba(29,5,11,.95) 100%);
  }
  .hero__body{max-width:100%}
  .hero__act .btn{flex:1 1 auto}
  /* 窄屏页脚底栏贴右下角，浮动按钮上移，避免压住备案号 */
  .totop{bottom:calc(84px + env(safe-area-inset-bottom))}
  .stats{grid-template-columns:1fr 1fr}
  .stats li{padding-left:0}
  /* 窄屏放不下左侧引号栏：引号收到正文上方 */
  .quote{grid-template-columns:1fr;gap:0}
  .quote__mark{font-size:52px;padding-top:0;margin-bottom:.12em}
  .quote__close{font-size:52px}
  .quote__body p{font-size:clamp(19px,5.4vw,24px)}
  .quote__body p br{display:none}
  .nav__links{
    position:fixed;inset:0;z-index:70;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:clamp(10px,2.4vh,22px);
    padding:calc(var(--nav-h) + 24px) var(--pad) calc(48px + env(safe-area-inset-bottom));
    background:var(--grad-wine);
    transform:translateY(-100%);visibility:hidden;
    transition:transform .5s var(--ease),visibility .5s var(--ease);
  }
  body.is-open .nav__links{transform:none;visibility:visible}
  .nav__links a{color:#fff;font-size:clamp(20px,5.6vw,26px);font-family:var(--ff-serif);letter-spacing:.1em;opacity:.9}
  .burger{display:block;position:relative;z-index:80}
  body.is-open .nav{
    color:#fff;background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  body.is-open .nav::after{display:none}
  html.is-locked,body.is-open{overflow:hidden}
}

/* ── 无障碍：尊重 reduce motion ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__media img{animation:none}
  .js [data-reveal]{opacity:1;transform:none}
}