/* ==========================================================================
   群盟香氛 · 全站样式（唯一来源）
   方案 A 东方木质（需求文档指定，色值不擅改）
   米白 #F5F1EA 主底 / 墨黑 #1C1A17 局部 / 香槟金 #B08D57 强调 / 正文 #3A352F

   动效主题：香雾扩散（diffuse → focus）
   —— 内容不是「滑入」，是「由虚到实」：blur 8px→0、opacity 0→1、
      位移仅 14px。标题按行从遮罩里升起，像一缕香雾抬起。
      一个焦点序列（首屏）+ 克制的支撑动效，不做通用 fade-and-rise。
   ========================================================================== */

/* ---------- 1. 令牌 ---------- */
:root {
  /* 方案 A 东方木质 —— 需求文档「核心结构」第 4 条，色值固定 */
  --paper: #F5F1EA;        /* 米白：页面背景 */
  --paper-2: #FAF6EF;      /* 卡片底：米白提亮半档 */
  --panel: #EEE7DB;        /* 分区底 */
  --ink: #1C1A17;          /* 墨黑：仅首屏 / 合伙人 / 页脚 */
  --ink-2: #16140F;
  --gold: #B08D57;         /* 香槟金：按钮、细线、小标题，面积 ≤10% */
  --gold-soft: #C4A06A;    /* hover 提亮 */
  --gold-deep: #7A5C33;    /* 米白底上的金色文字 5.48:1 */
  --cream: #F5F1EA;
  --cream-2: #EFE8DC;
  --text: #3A352F;         /* 正文：深灰褐，不用纯黑 */
  --text-2: #5A5248;
  --line: rgba(176, 141, 87, .30);
  --line-soft: rgba(176, 141, 87, .18);
  --on-dark: rgba(245, 241, 234, .78);
  --on-dark-2: rgba(245, 241, 234, .56);
  --serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif;
  --sans: 'PingFang SC', 'Microsoft YaHei', -apple-system, 'Helvetica Neue', sans-serif;
  --wrap: 1200px;
  --gutter: 24px;
  --section-y: 104px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .3s;
}

/* ---------- 2. 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

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

/* ---------- 3. 通用排版件 ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 20px;
}
.kicker {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gold-deep);
  margin-bottom: 16px;
}
.section--dark .kicker, .hero .kicker, .page-header .kicker, .partner .kicker { color: var(--gold-deep); }

.rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: .7;
  margin: 0 auto 24px;
}

.section { padding: var(--section-y) 0; }
.section--tight { padding: calc(var(--section-y) * .62) 0; }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--full { min-height: 750px; display: flex; align-items: center; }
.section--full > .container { width: 100%; }

.section__head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section__title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  letter-spacing: 5px;
  line-height: 1.35;
  color: var(--cream);
}
.section__lead {
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-2);
}
.section--dark .section__title { color: var(--cream); }
.section--dark .section__lead { color: var(--on-dark-2); }

/* ---------- 4. 导航 ---------- */
/* 薄玻璃：顶部极低不透明度 + 强模糊，让hero的暗部透上来，
   不再是一条灰带；底边用两端淡出的金色发丝线，滚动后才出现。 */
/* 薄玻璃：用 backdrop-filter 的 brightness 压暗「背后内容」，
   而不是靠加厚底色——这样无论下面是深图还是米白页，米白字都有对比度。 */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  background: linear-gradient(180deg, rgba(12, 10, 8, .30), rgba(12, 10, 8, .08));
  -webkit-backdrop-filter: blur(26px) saturate(1.2) brightness(.62);
  backdrop-filter: blur(26px) saturate(1.2) brightness(.62);
  transition: background .45s var(--ease), padding .45s var(--ease);
}
.nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 141, 87, .42) 16%, rgba(176, 141, 87, .42) 84%, transparent);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.nav.is-scrolled {
  background: rgba(16, 14, 12, .70);
  padding: 11px 0;
}
/* 内页常驻深玻璃；不透明度更高，保证「JS 失效 → 无法切浅色」时文字仍可读 */
.nav--solid {
  background: rgba(16, 14, 12, .80);
  padding: 11px 0;
}
.nav.is-scrolled::after,
.nav--solid::after { opacity: 1; }


/* 滚动进度：一根贴着底边的金色发丝，代替“老式进度条” */
.nav__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.nav__progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(176, 141, 87, 0), var(--gold) 40%, var(--gold-soft));
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: .85;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .nav.is-scrolled, .nav--solid { background: rgba(18, 16, 14, .93); }
}
.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* 单行锁排：中文与英文同一条视觉中线上，不再两行堆叠 */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--cream);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
  transition: color .45s var(--ease), opacity .3s var(--ease);
}
.nav__logo:hover { opacity: .82; }
.nav__logo span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--gold-deep);
  margin-top: 0;
  position: relative;
  top: 1px;
}
/* 导航右侧 CTA：小一号的胶囊按钮，只在桌面出现 */
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 20px;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--cream);
  text-decoration: none;
  border: 1px solid rgba(242, 239, 233, .3);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.nav__cta:hover { background: rgba(242, 239, 233, .07); border-color: rgba(242, 239, 233, .6); }
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav__links a {
  position: relative;
  color: rgba(245, 241, 234, .72);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1.6px;
  padding: 6px 0 4px;
  transition: color .35s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .45s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--cream); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* 桌面：菜单居中，左右各留一区（logo / CTA）——对齐参考页的三区布局 */
@media (min-width: 901px) {
  .nav__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 900px) {
  .nav__cta { display: none; }
}

.nav__toggle {
  display: none;
  position: relative;
  z-index: 96;          /* 高于抽屉面板，展开时仍可见、可点 */
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 1px;
  background: var(--panel);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__panel { display: flex; align-items: center; }
.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 18, 16, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.nav__scrim.is-open { opacity: 1; pointer-events: auto; }

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 32px;
  font-size: 14px;
  letter-spacing: 2px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background var(--dur) var(--ease), color var(--dur), transform var(--dur) var(--ease), border-color var(--dur);
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary { background: var(--gold); color: var(--cream); }
.btn--primary:hover { background: var(--gold-soft); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(242, 239, 233, .3); }
.btn--ghost:hover { background: rgba(242, 239, 233, .06); border-color: rgba(242, 239, 233, .62); transform: translateY(-2px); }
.btn--ghost-dark { background: transparent; color: var(--cream); border-color: rgba(242, 239, 233, .3); }
.btn--ghost-dark:hover { background: rgba(242, 239, 233, .06); border-color: rgba(242, 239, 233, .62); transform: translateY(-2px); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* ---------- 6. 首屏 ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: -12px;
  background: url('plates/partner-bg.webp') center 32% / cover no-repeat;
  /* 轻微失焦 + 压暗：让背景退成「气氛」，不跟文字抢焦点 */
  filter: blur(3px) brightness(.9) saturate(.92);
  z-index: -2;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* 器物底部一层极淡的暖光，把切图从暗背景里托出来 */
    radial-gradient(ellipse 44% 34% at 50% 92%, rgba(176, 141, 87, .16), transparent 72%),
    linear-gradient(180deg, rgba(12, 10, 8, .74) 0%, rgba(12, 10, 8, .40) 38%, rgba(12, 10, 8, .88) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px 10px;
}
.hero__eyebrow {
  font-size: 11px;
  letter-spacing: 8px;
  color: var(--gold-deep);
  margin-bottom: 26px;
}
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  letter-spacing: 5px;
  color: var(--gold-deep);
  margin-bottom: 22px;
}
.hero__kicker::before, .hero__kicker::after {
  content: '';
  width: 36px; height: 1px;
  background: var(--gold);
  opacity: .55;
}
.hero__title {
  font-family: var(--serif);
  font-size: clamp(46px, 8.4vw, 112px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 10px;
  text-indent: 10px;
  color: var(--cream);
  margin-bottom: 26px;
}
.hero__divider {
  width: 56px; height: 1px;
  background: var(--gold);
  opacity: .6;
  margin-bottom: 26px;
}
.hero__tagline {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 6px;
  color: var(--cream);
  margin-bottom: 16px;
}
.hero__scene {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--on-dark);
  margin-bottom: 12px;
}
.hero__sub {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--gold-deep);
  margin-bottom: 36px;
}
.hero__cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__product {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6px;
  margin-bottom: 10px;
  pointer-events: none;
}
.hero__product img {
  height: clamp(190px, 27vh, 290px);
  width: auto;
  border-radius: 10px;
  border: 1px solid rgba(176, 141, 87, .34);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(0, 0, 0, .35);
}
/* 产品铭牌：像展厅里的标签，比直接压在图上克制 */
.hero__product-name {
  width: 100%;
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--cream);
  text-align: center;
  line-height: 1.5;
}
.hero__product-name span {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.6px;
  color: rgba(216, 184, 127, .92);
  margin-top: 6px;
}
/* 器物背后的呼吸暖光：替代原来那几根细条香雾（细条会飘到器物外，像瑕疵） */
.hero__smoke { display: none; }
.hero__product::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 460px;
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(176, 141, 87, .20), rgba(176, 141, 87, .06) 45%, transparent 68%);
  z-index: -1;
  pointer-events: none;
  animation: glowBreath 11s ease-in-out infinite;
}
@keyframes glowBreath {
  0%, 100% { opacity: .7;  transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}
.smoke { display: none; }
.smoke-legacy {
  position: absolute;
  bottom: 72%;
  left: 50%;
  width: 3px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(to top, rgba(245, 241, 234, .5), transparent);
  filter: blur(5px);
  opacity: 0;
}
.smoke:nth-child(1) { left: 48%; animation: smoke-rise 8s ease-out infinite; }
.smoke:nth-child(2) { left: 50%; animation: smoke-rise 10s ease-out 2.4s infinite; }
.smoke:nth-child(3) { left: 52%; animation: smoke-rise 12s ease-out 5.2s infinite; }
@keyframes smoke-rise {
  0%   { opacity: 0;   transform: translateY(0) scaleX(1); }
  18%  { opacity: .15; }
  100% { opacity: 0;   transform: translateY(-120px) scaleX(2.6); }
}

/* ---------- 7. 内页页头 ---------- */
.page-header {
  position: relative;
  padding: 168px 0 96px;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.page-header__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('plates/bg-texture.webp') center/cover no-repeat;
  opacity: .55;
}
.page-header__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 18, 16, .9) 0%, rgba(20, 18, 16, .7) 60%, rgba(20, 18, 16, .96) 100%);
}
.page-header h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: 6px;
  color: var(--cream);
  margin-bottom: 18px;
  line-height: 1.3;
}
.page-header .desc {
  max-width: 620px;
  margin: 0 auto;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--on-dark-2);
  line-height: 1.9;
}

/* ---------- 8. 栅格与卡片 ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card {
  background: transparent;
  border: 1px solid var(--line);
  padding: 40px 32px;
  transition: border-color var(--dur);
}
.card:hover { border-color: var(--gold-deep); }
.card--dark { background: rgba(20, 18, 16, .55); border-color: var(--line-soft); }
.card h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cream);
  margin-bottom: 12px;
}
.card--dark h3 { color: var(--cream); }
.card p { font-size: 14px; line-height: 1.9; color: var(--text-2); }
.card--dark p { color: var(--on-dark-2); }

.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line-soft);
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s var(--ease);
}
.media-frame:hover img { transform: scale(1.03); }
.media-frame--3-4 { aspect-ratio: 3 / 4; }
.media-frame--1-1 { aspect-ratio: 1 / 1; }
.media-frame--3-2 { aspect-ratio: 3 / 2; }
.media-frame--16-9 { aspect-ratio: 16 / 9; }

/* ---------- 9. 三向分流 ---------- */
.split-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.split-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 56px 36px 44px;
  border: 1px solid var(--line);
  text-align: center;
  transition: transform var(--dur) var(--ease), border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
/* 圆角后不再用整条 border-top 做强调（金边会顺着圆角拐弯），
   改成顶部居中的一段短金线 */
.split-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.split-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-deep);
  background: rgba(242, 239, 233, .045);
}
.split-card__icon {
  width: 46px; height: 46px;
  margin: 0 auto 28px;
  color: var(--gold-deep);
}
.split-card__icon svg { width: 100%; height: 100%; }
.split-card__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cream);
  margin-bottom: 14px;
}
.split-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-2);
  margin-bottom: 28px;
  flex: 1;
}
.split-card .btn { align-self: center; }

/* ---------- 10. 品牌主张 ---------- */
.claim { display: grid; grid-template-columns: .92fr 1.08fr; gap: 72px; align-items: center; }
.claim__media { aspect-ratio: 3 / 2; }
.claim__items { display: grid; gap: 34px; }
.claim__item { padding-left: 24px; border-left: 1px solid var(--line); }
.claim__item .num {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.claim__item h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cream);
  margin-bottom: 8px;
}
.claim__item p { font-size: 14px; line-height: 1.9; color: var(--text-2); }

/* ---------- 11. 旗舰 ---------- */
.flagship { padding: var(--section-y) 0; background: var(--panel); }
.flagship__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.flagship__media { aspect-ratio: 3 / 4; max-width: 460px; width: 100%; }
.flagship__body h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--cream);
  margin-bottom: 20px;
  line-height: 1.4;
}
.flagship__body .desc {
  font-size: 15px;
  line-height: 2;
  color: var(--text-2);
  margin-bottom: 32px;
  max-width: 46ch;
}
.flagship__list { margin-bottom: 36px; }
.flagship__list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--text);
}
.flagship__list li::before { content: '— '; color: var(--gold-deep); }

/* ---------- 12. 双线并置 ---------- */
.two-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.line {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: rgba(242, 239, 233, .035);
}
.line__media { height: 280px; overflow: hidden; }
.line__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.line:hover .line__media img { transform: scale(1.03); }
.line__body { padding: 44px 48px 48px; display: flex; flex-direction: column; flex: 1; }
.line__body h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--cream);
  margin-bottom: 16px;
}
.line__body p { font-size: 14px; line-height: 1.95; color: var(--text-2); margin-bottom: 18px; }
.line__body .flow { margin-bottom: 28px; font-size: 13px; color: var(--text-2); line-height: 2.1; }
.line__body .flow span { color: var(--gold-deep); margin-right: 8px; }
.line__body .btn { align-self: flex-start; margin-top: auto; }

/* ---------- 13. 会员 ---------- */
.member { padding: var(--section-y) 0; }
.member__layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; margin-bottom: 56px; }
.member__media { aspect-ratio: 3 / 2; }
.member__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.member__step { text-align: center; }
.member__step .n {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.member__step .t { font-size: 13px; color: var(--text); }
.member__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.member__card { padding: 32px 24px; border: 1px solid var(--line); }
.member__card .n {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.member__card h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--cream);
  margin-bottom: 8px;
}
.member__card p { font-size: 13px; line-height: 1.8; color: var(--text-2); }
.member__cta { text-align: center; }
.member__cta .note { margin-top: 16px; font-size: 12px; color: var(--text-2); }

/* ---------- 14. 门店查询 ---------- */
.stores {
  margin-top: 56px;
  padding: 48px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.stores__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.stores__head h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--cream);
  margin-bottom: 6px;
}
.stores__head p { font-size: 13px; color: var(--text-2); }
.stores__search { display: flex; gap: 8px; }
.stores__search input {
  min-height: 44px;
  padding: 0 16px;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
}
.stores__search input:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(122, 92, 51, .3); }
.stores__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.store {
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.store h4 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--cream);
  margin-bottom: 6px;
}
.store .city { font-size: 12px; letter-spacing: 2px; color: var(--gold-deep); margin-bottom: 10px; }
.store .addr { font-size: 13px; line-height: 1.8; color: var(--text-2); margin-bottom: 14px; }
.store a {
  font-size: 13px;
  color: var(--gold-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid transparent;
}
.stores__empty { font-size: 13px; color: var(--text-2); padding: 16px 0; }

/* ---------- 15. 合伙人 ---------- */
.partner {
  position: relative;
  padding: var(--section-y) 0;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.partner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('plates/page-shangyong.webp') center/cover no-repeat;
  opacity: .55;
}
.partner__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 18, 16, .88), rgba(20, 18, 16, .72) 55%, rgba(20, 18, 16, .95));
}
.partner .section__title { color: var(--cream); }
.partner .section__lead { color: var(--on-dark-2); }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.perk {
  padding: 32px 26px;
  background: rgba(20, 18, 16, .5);
  border: 1px solid var(--line-soft);
  transition: border-color var(--dur);
}
.perk:hover { border-color: var(--gold-deep); }
.perk h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cream);
  margin-bottom: 10px;
}
.perk p { font-size: 13px; line-height: 1.85; color: var(--on-dark-2); }

.partner__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.partner__step { text-align: center; }
.partner__step .n { font-size: 11px; letter-spacing: 2px; color: var(--gold-deep); margin-bottom: 8px; }
.partner__step .t { font-size: 13px; color: var(--on-dark); }

.partner__motto {
  text-align: center;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--on-dark-2);
  margin-bottom: 44px;
}

/* ---------- 16. 表单 ---------- */
.form { display: grid; gap: 20px; max-width: 760px; margin: 0 auto; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 12px; letter-spacing: 2px; color: var(--gold-deep); }
.field__control {
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  background: rgba(245, 241, 234, .05);
  border: 1px solid var(--line);
  color: var(--cream);
  font-size: 14px;
  font-family: var(--sans);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field__control::placeholder { color: rgba(245, 241, 234, .62); }
.field__control:focus,
.field__control:focus-visible {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 2px var(--gold);
}
textarea.field__control { min-height: 96px; resize: vertical; }
.field__error { font-size: 12px; color: #E8A99B; letter-spacing: .5px; }
.field--invalid .field__control { border-color: #C97B6B; box-shadow: 0 0 0 1px #C97B6B; }
.form .btn { margin-top: 8px; }
.form__status { min-height: 20px; font-size: 13px; text-align: center; letter-spacing: 1px; }
.form__status.is-ok { color: #B9D3A8; }
.form__status.is-err { color: #E8A99B; }
.form-note { text-align: center; font-size: 12px; color: rgba(245, 241, 234, .55); }

/* ---------- 17. 页脚 ---------- */
.footer { background: var(--ink-2); color: var(--on-dark-2); padding: 80px 0 36px; }
.footer__stats {
  display: flex;
  justify-content: center;
  gap: 72px;
  flex-wrap: wrap;
  padding-bottom: 44px;
  margin-bottom: 52px;
  border-bottom: 1px solid var(--line-soft);
}
.stat { text-align: center; }
.stat .num { font-family: var(--serif); font-size: 30px; color: var(--gold-deep); margin-bottom: 6px; }
.card .stat .num { color: var(--gold-deep); }   /* 米白系卡片上金色数字需加深，30px 大字 4.5:1+ */
.stat .label { font-size: 12px; letter-spacing: 2px; }
.footer__grid { display: grid; grid-template-columns: 1.9fr 0.9fr 1.1fr 0.9fr; gap: 40px; margin-bottom: 48px; }
.footer__brand h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cream);
  margin-bottom: 16px;
}
.footer__brand p { font-size: 13px; line-height: 2.1; }
.footer__brand a {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
.footer__col h3 { font-size: 12px; letter-spacing: 3px; color: var(--gold-deep); margin-bottom: 16px; font-weight: 400; }
.footer__col li { margin-bottom: 4px; }
.footer__col a {
  font-size: 13px;
  color: var(--on-dark-2);
  text-decoration: none;
  transition: color var(--dur);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
}
.footer__col a:hover { color: var(--gold-deep); }
.qr-placeholder {
  display: block;
  width: 88px; height: 88px;
  border: 1px solid var(--line);
  background: rgba(245, 241, 234, .04);
  position: relative;
  margin-bottom: 10px;
}
.qr-placeholder::before,
.qr-placeholder::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--line);
}
.qr-placeholder::before { top: 12px; left: 12px; }
.qr-placeholder::after { bottom: 12px; right: 12px; }
.qr-note { font-size: 12px; color: rgba(245, 241, 234, .55); }
.footer__bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(176, 141, 87, .10);
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(245, 241, 234, .55);
}

/* ---------- 18. 动效 · 香雾扩散 ---------- */
/* 统一挂在 .js 下：JS 未执行时内容保持可见，不做无 JS 的空白页 */

/* 18.1 块级扩散：由虚到实（defocus → focus），位移只作辅助 */
.js .fade-in {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  transition: opacity .9s var(--ease), filter 1.05s var(--ease), transform 1.05s var(--ease);
}
.js .fade-in.is-visible { opacity: 1; filter: blur(0); transform: none; }

/* 18.2 标题按行升起：每行从遮罩里抬起，像一缕香雾 */
.js .lines-ready .ln { display: block; overflow: hidden; }
.js .lines-ready .ln__i {
  display: block;
  transform: translateY(108%);
  filter: blur(6px);
  opacity: 0;
  transition: transform 1.15s var(--ease), filter 1.05s var(--ease), opacity .7s var(--ease);
  will-change: transform, filter;
}
.js .lines-ready.is-in .ln__i {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
}
/* 行间错开：第二行起逐行 +90ms（最多 5 行） */
.js .lines-ready.is-in .ln:nth-child(2) .ln__i { transition-delay: .09s; }
.js .lines-ready.is-in .ln:nth-child(3) .ln__i { transition-delay: .18s; }
.js .lines-ready.is-in .ln:nth-child(4) .ln__i { transition-delay: .27s; }
.js .lines-ready.is-in .ln:nth-child(5) .ln__i { transition-delay: .36s; }

/* 18.3 引导语：比标题晚一拍，同样扩散 */
.js .section__head .section__lead {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
  transition-delay: .16s;
}
.js .section__head.is-visible .section__lead { opacity: 1; filter: blur(0); transform: none; }

/* 18.4 金色分隔线：从左向右画出 */
.js .section__head .rule {
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .9s var(--ease);
}
.js .section__head.is-visible .rule { transform: scaleX(1); }

/* 18.5 图片：极慢的收焦（1.06 → 1），配合遮罩裁切感 */
.js .media-frame.fade-in img {
  transform: scale(1.06);
  transition: transform 1.6s var(--ease);
}
.js .media-frame.fade-in.is-visible img { transform: scale(1); }

/* 18.5b 带按行标题的 section__head：父层不再整体淡入，交由行与引导语各自扩散，
        避免「整体模糊 + 行升起」两套动画叠在一起 */
.js .section__head.fade-in {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}

/* 18.6 首屏与新页页头：载入序列（模糊散开，不是滑动） */
@keyframes diffuseIn {
  from { opacity: 0; filter: blur(10px); transform: translateY(14px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
.hero__eyebrow, .hero__kicker, .hero__title, .hero__divider,
.hero__tagline, .hero__scene, .hero__sub, .hero__cta, .hero__product,
.page-header .kicker, .page-header .desc {
  animation: diffuseIn 1.15s var(--ease) both;
}
.hero__eyebrow  { animation-delay: .10s; }
.hero__kicker   { animation-delay: .20s; }
.hero__title    { animation-delay: .30s; }
.hero__divider  { animation-delay: .56s; }
.hero__tagline  { animation-delay: .62s; }
.hero__scene    { animation-delay: .76s; }
.hero__sub      { animation-delay: .88s; }
.hero__cta      { animation-delay: 1.00s; }
.hero__product   { animation-delay: 1.10s; }

/* 内页页头 h1 交由「按行升起」处理，避免双重动画 */
.page-header .kicker { animation-delay: .08s; }
.page-header .desc  { animation-delay: .34s; }

/* 18.7 首屏背景：极慢推近，给静止画面一点呼吸 */
@keyframes heroPush {
  from { transform: scale(1.06); }
  to   { transform: scale(1.02); }
}
.hero__bg { animation: heroPush 2.6s var(--ease) both; }

/* ---------- 19. 内页通用块 ---------- */
/* 19.1 参数条：四格数值，用来收住空旷的下半屏 */
.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  margin-top: 44px;
}
.fact + .fact { border-left: 1px solid var(--line-soft); }
.fact { background: var(--panel); padding: 26px 18px; text-align: center; }
.fact .v {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 1px;
  color: var(--gold-deep);
  line-height: 1.3;
}
.fact .k { font-size: 12px; letter-spacing: 2px; color: var(--text-2); margin-top: 8px; }
.fact--wide .v { font-size: 16px; }
.section--dark .fact, .partner .fact, .cta-band .fact { background: rgba(20, 18, 16, .55); }
.section--dark .fact .v, .partner .fact .v { color: var(--gold-deep); }
.section--dark .fact .k, .partner .fact .k { color: var(--on-dark-2); }

/* 19.2 要点清单：金色短横起头，替代成段长句 */
.check-list { display: grid; gap: 11px; margin-top: 20px; }
.check-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .74em;
  width: 9px;
  height: 1px;
  background: var(--gold-deep);
}
.section--dark .check-list li, .partner .check-list li { color: var(--on-dark-2); }
.section--dark .check-list li::before, .partner .check-list li::before { background: var(--gold); }
.check-list--loose { gap: 14px; }
/* 居中的分流卡里，清单本身左对齐但整块居中，避免「短横在左、文字居中」的错位 */
.split-card .check-list {
  text-align: left;
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
}

/* 19.3 标签组：场景 / 品类，横向排布填空 */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pill {
  font-size: 12px;
  letter-spacing: 1px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  color: var(--text-2);
  white-space: nowrap;
}
.section--dark .pill, .partner .pill { color: var(--on-dark-2); border-color: var(--line-soft); }

/* 19.4 两列信息表：主体信息、到店须知一类 */
.info-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.info-table th, .info-table td {
  text-align: left;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  vertical-align: top;
}
.info-table th {
  width: 26%;
  font-weight: 400;
  color: var(--gold-deep);
  letter-spacing: 1px;
  white-space: nowrap;
}
.info-table td { color: var(--text-2); }
.section--dark .info-table th, .partner .info-table th { color: var(--gold-deep); }
.section--dark .info-table td, .partner .info-table td { color: var(--on-dark-2); }
.section--dark .info-table th, .section--dark .info-table td { border-bottom-color: var(--line-soft); }

.detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.detail__item { padding: 32px 0; border-top: 1px solid var(--line); }
.detail__item h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.detail__item p { font-size: 13px; line-height: 1.95; color: var(--text-2); }

.series { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.series-card { background: var(--panel); border: 1px solid var(--line); }
.series-card__media { aspect-ratio: 1 / 1; overflow: hidden; }
.series-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.series-card:hover .series-card__media img { transform: scale(1.03); }
.series-card__body { padding: 32px 28px 36px; }
.series-card__body h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cream);
  margin-bottom: 10px;
}
.series-card__body p { font-size: 13px; line-height: 1.9; color: var(--text-2); }

.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.process__step { padding: 28px 20px; border: 1px solid var(--line); text-align: center; }
.process__step .n { font-family: var(--serif); font-size: 12px; letter-spacing: 2px; color: var(--gold-deep); margin-bottom: 8px; }
.process__step .t { font-size: 13px; color: var(--text); }

.cta-band { padding: 72px 0; background: var(--ink); color: var(--cream); text-align: center; }
.cta-band h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  letter-spacing: 4px;
  margin-bottom: 12px;
}
.cta-band p { font-size: 14px; color: var(--on-dark-2); letter-spacing: 2px; margin-bottom: 28px; }

.note-line { text-align: center; font-size: 12px; color: var(--text-2); letter-spacing: 1px; }

/* ---------- 20. 响应式 ---------- */
@media (max-width: 1024px) {
  :root { --section-y: 88px; }
  .claim { gap: 48px; }
  .flagship__inner { gap: 48px; }
  .member__layout { gap: 40px; }
  .perks { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { gap: 32px; }
}

@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 95;
    width: min(320px, 86vw);
    padding: 96px 28px 32px;
    background: var(--ink);
    border-left: 1px solid var(--line-soft);
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    overflow-y: auto;
    display: block;
  }
  .nav__panel.is-open { transform: none; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links li { border-bottom: 1px solid var(--line-soft); }
  .nav__links a { display: block; padding: 18px 4px; font-size: 15px; }
  .nav__links a::after { display: none; }

  .grid-2, .grid-3, .grid-4, .split-cards, .two-lines, .detail, .series, .member__grid, .process { grid-template-columns: 1fr; }
  .fact-strip { grid-template-columns: repeat(2, 1fr); }
  .fact + .fact { border-left: none; }
  .fact:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .member__steps, .partner__steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .claim, .flagship__inner, .member__layout { grid-template-columns: 1fr; gap: 36px; }
  .claim__media { order: -1; }
  .flagship__media { max-width: 360px; margin: 0 auto; }
  .line__body { padding: 36px 28px 40px; }
  .stores { padding: 32px 24px; }
  .stores__search { width: 100%; }
  .stores__search input { min-width: 0; flex: 1; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__stats { gap: 40px; }
  .section--full { min-height: 0; }
}

@media (max-width: 768px) {
  :root { --section-y: 72px; --gutter: 20px; }
  .nav__logo { font-size: 17px; gap: 8px; letter-spacing: 1.5px; }
  .nav__logo span { font-size: 11px; letter-spacing: 1.2px; }
  .hero__bg { background-image: url('plates/hero-kv-mobile.webp'); background-position: center top; }
  /* 手机上竖版图明暗不均，均匀压暗一遍，保证 CTA 可读 */
  .hero__scrim {
    background:
      radial-gradient(ellipse 62% 26% at 50% 94%, rgba(176, 141, 87, .14), transparent 72%),
      linear-gradient(180deg, rgba(12, 10, 8, .88) 0%, rgba(12, 10, 8, .64) 40%, rgba(12, 10, 8, .95) 100%);
  }
  .hero__content { padding: 116px 20px 4px; justify-content: center; }
  .hero__title { letter-spacing: 6px; text-indent: 6px; }
  .hero__tagline { letter-spacing: 3px; }
  .hero__sub { letter-spacing: 1px; font-size: 12px; max-width: 300px; }
  .hero__cta { flex-direction: column; width: 100%; max-width: 320px; }
  .hero__cta .btn { width: 100%; }
  .hero__product img { height: clamp(150px, 21vh, 200px); }
  .hero__product-name { font-size: 12px; letter-spacing: 2px; margin-top: 10px; }
  .smoke { display: none; }

  .form__row { grid-template-columns: 1fr; }
  .section__head { margin-bottom: 44px; }
  .split-card { padding: 44px 24px 36px; }
  .page-header { padding: 140px 0 72px; }
  .footer__stats { gap: 28px; }
  .stat .num { font-size: 24px; }
}

@media (max-width: 480px) {
  .hero__title { font-size: clamp(40px, 13vw, 56px); }
  .hero__eyebrow { letter-spacing: 5px; }
  .member__steps, .partner__steps { grid-template-columns: 1fr; gap: 20px; }
  .btn { padding: 0 24px; letter-spacing: 1px; }
}

/* ---------- 21. 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .fade-in { opacity: 1; transform: none; filter: none; }
  .smoke { display: none; }
  .nav__progress { display: none; }
  /* 降级为「只保留不透明度」，去掉位移与模糊的空间运动 */
  .lines-ready .ln__i,
  .section__head .section__lead,
  .media-frame img {
    transform: none !important;
    filter: none !important;
    opacity: 1;
  }
}

/* ---------- 22. 圆角体系 ----------
   对照 workbuddy.cn 实测：12px 卡片 / 8px 图片 / 16px 大面板 / 999px 胶囊 / 6px 小标签。
   直角改圆角后统一用下面这套令牌，避免各组件各写一个数值。 */
:root {
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
}

/* 按钮：胶囊 */
.btn { border-radius: var(--r-pill); }
.nav__cta { border-radius: var(--r-pill); }

/* 卡片层 */
.card,
.card--dark,
.member__card,
.series-card,
.process__step,
.perk,
.store { border-radius: var(--r-lg); }

.split-card,
.line,
.stores { border-radius: var(--r-xl); }

/* 带顶部图的容器需要裁切，圆角才不会被图片方角顶掉 */
.line,
.series-card,
.fact-strip,
.media-frame { overflow: hidden; }

/* 图片与输入框 */
.media-frame { border-radius: var(--r-md); }
.field__control { border-radius: var(--r-md); }
.stores__search input { border-radius: var(--r-md); }
.qr-placeholder { border-radius: var(--r-md); }
.store { border-radius: var(--r-lg); }
.fact-strip { border-radius: var(--r-lg); }

/* 标签 */
.pill { border-radius: var(--r-pill); }

/* 圆角后给浮起元素补一层柔和投影，否则圆角会显得“贴”在背景上 */
.split-card:hover,
.line:hover,
.card:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.perk:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }

/* 内页页头的裁切容器不需要圆角 */
.page-header,
.hero { border-radius: 0; }

/* 深底区块里的参数条：容器透明，避免浅色底透出来 */
.partner .fact-strip,
.section--dark .fact-strip { background: transparent; }
.partner .fact + .fact,
.section--dark .fact + .fact { border-left-color: var(--line-soft); }

/* ==========================================================================
   23. 浅色主调（轻奢回归）
   --------------------------------------------------------------------------
   上一版把全站做成黑底，方向偏了：轻奢品牌的通行做法是「浅色为主 + 深色局部」。
   这里把主底改成中性近白（去黄，不是米黄），深色只保留首屏 / 合伙人 / 页脚 /
   内页页头 / CTA 带五处；强调色仍是朱砂，但落回浅底后要换成深一档才够对比。
   ========================================================================== */

body { background: var(--paper); color: var(--text); }

/* ---- 浅底组件回归白/浅灰 ---- */
.section { background: transparent; }
.flagship { background: var(--panel); }
.fact,
.fact-strip,
.store,
.series-card,
.card,
.member__card,
.process__step,
.split-card,
.line { background: var(--paper-2); border-color: var(--line-soft); }
.stores { background: var(--panel); border-color: var(--line-soft); }
.stores__search input { background: var(--paper-2); border-color: var(--line); color: var(--text); }
.split-card:hover { background: var(--paper-2); }
.card:hover,
.split-card:hover,
.line:hover,
.series-card:hover { box-shadow: 0 18px 40px rgba(20, 19, 17, .09); }

/* ---- 浅底上的文字回到近黑 ---- */
.section__title,
.claim__item h3,
.flagship__body h2,
.line__body h2,
.split-card__title,
.card h3,
.member__card h3,
.series-card__body h3,
.store h4,
.stores__head h3 { color: var(--ink); }
.card p,
.split-card__text,
.line__body p,
.check-list li,
.member__card p,
.series-card__body p,
.store .addr,
.stores__head p,
.note-line,
.info-table td,
.process__step .t { color: var(--text-2); }
.card .check-list li,
.card .btn { color: var(--text-2); }
.info-table th { color: var(--gold-deep); border-bottom-color: var(--line-soft); }
.info-table td { border-bottom-color: var(--line-soft); }

/* 次级按钮：浅底上用墨色描边 */
.btn--ghost-dark { color: var(--ink); border-color: rgba(27, 26, 23, .22); }
.btn--ghost-dark:hover { background: rgba(27, 26, 23, .045); border-color: rgba(27, 26, 23, .5); }

/* ---- 深色区块：把变量在作用域内翻回去 ---- */
.hero,
.section--dark,
.page-header,
.partner,
.footer {
  --text: rgba(242, 239, 233, .86);
  --text-2: rgba(242, 239, 233, .62);
  --line: rgba(242, 239, 233, .18);
  --line-soft: rgba(242, 239, 233, .10);
  --gold-deep: #D8B87F;    /* 深底上的浅香槟金 */
}
.section--dark,
.partner { background: var(--ink); }
.cta-band { background: var(--panel); }
.page-header { background: var(--ink); }
.footer { background: var(--ink-2); }

/* 深色区块内的标题与正文 */
.section--dark .section__title,
.partner .section__title,
.page-header h1,
.footer__brand h3 { color: var(--cream); }
.section--dark .section__lead,
.partner .section__lead,
.page-header .desc { color: var(--on-dark-2); }
.section--dark .check-list li,
.partner .check-list li { color: var(--on-dark-2); }
.section--dark .card h3,
.partner .perk h3 { color: var(--cream); }
.section--dark .card p,
.partner .perk p { color: var(--on-dark-2); }
.partner .fact,
.section--dark .fact { background: rgba(242, 239, 233, .04); }
.partner .fact-strip,
.section--dark .fact-strip { background: transparent; }

/* 深底上的次级按钮回到米白描边 */
.hero .btn--ghost,
.partner .btn--ghost { color: var(--cream); border-color: rgba(242, 239, 233, .3); }
.hero .btn--ghost:hover,
.partner .btn--ghost:hover { background: rgba(242, 239, 233, .06); border-color: rgba(242, 239, 233, .62); }

/* ---- 导航明暗自适应（浅底用浅玻璃 + 墨字） ---- */
.nav.is-light,
.nav.is-light.is-scrolled {
  background: rgba(247, 247, 245, .78);
  -webkit-backdrop-filter: blur(22px) saturate(1.05) brightness(1.04);
  backdrop-filter: blur(22px) saturate(1.05) brightness(1.04);
}
.nav.is-light::after {
  background: linear-gradient(90deg, transparent, rgba(27, 26, 23, .16) 16%, rgba(27, 26, 23, .16) 84%, transparent);
}
.nav.is-light .nav__logo { color: var(--ink); }
.nav.is-light .nav__logo span { color: var(--gold-deep); }
.nav.is-light .nav__links a { color: rgba(27, 26, 23, .64); }
.nav.is-light .nav__links a:hover,
.nav.is-light .nav__links a[aria-current="page"] { color: var(--ink); }
.nav.is-light .nav__toggle span { background: var(--ink); }
.nav.is-light .nav__cta { color: var(--ink); border-color: rgba(27, 26, 23, .22); }
.nav.is-light .nav__cta:hover { background: rgba(27, 26, 23, .05); border-color: rgba(27, 26, 23, .5); }

/* CTA 带改为浅底后，文字要跟着回到墨色 */
.cta-band { color: var(--text); }
.cta-band p { color: var(--text-2); }

/* 器物背后的光：回到方案 A 的金色光晕 */
.hero__product::before {
  background: radial-gradient(circle at 50% 50%, rgba(176, 141, 87, .26), rgba(176, 141, 87, .08) 45%, transparent 68%);
}

/* 主按钮：金底必须是墨字（米白字在金底上只有 2.7:1） */
.btn--primary { background: var(--gold); color: var(--ink); }

/* 导航不在深色区块内，需单独给深底用的浅金 */
.nav { --gold-deep: #D8B87F; }
.nav.is-light { --gold-deep: #7A5C33; }

/* ---------- 25. 滚动景深（参考电动车官网的画面推移） ---------- */
/* 首屏背景改为滚动驱动推近，去掉一次性入场动画，避免 animation 覆盖 inline transform */
.hero__bg { animation: none; }

/* 参与错位的图片区块：transform 交给每帧计算，不再走过渡，否则会拖影 */
.flagship__media.fade-in,
.claim__media.fade-in,
.line__media.fade-in {
  transition: opacity .7s var(--ease), filter .75s var(--ease);
  will-change: transform;
}

/* ==========================================================================
   26. 首屏双栏：左文右器（产品切图作为视觉主体，不再是标题下的小相框）
   ========================================================================== */
.hero__product img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, .55));
}

@media (min-width: 901px) {
  .hero {
    grid-template-columns: 1.04fr .96fr;
    grid-template-rows: 1fr;
    align-items: center;
    padding: 0 max(24px, calc((100vw - var(--wrap)) / 2));
    column-gap: 32px;
  }
  .hero__content {
    align-items: flex-start;
    text-align: left;
    padding: 76px 0 0;
  }
  .hero__divider { margin-left: 0; }
  .hero__cta { justify-content: flex-start; }
  .hero__product {
    justify-self: end;
    align-self: center;
    margin: 0;
    padding-top: 44px;
    padding-bottom: 24px;
  }
  .hero__product img { height: clamp(300px, 60vh, 540px); }
  .hero__product-name { margin-top: 18px; }
  .hero__title {
    font-size: clamp(54px, 5.6vw, 86px);
    letter-spacing: 6px;
    text-indent: 6px;
    margin-bottom: 22px;
  }
  .hero__product::before {
    width: 640px;
    height: 640px;
    bottom: 4%;
  }
}

@media (max-width: 900px) {
  .hero { padding: 0; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .hero__product { padding-bottom: 8px; }
  .hero__product img { height: clamp(150px, 23vh, 210px); }
  /* 手机上产品已经是陪衬，铭牌会挤掉按钮，直接省去 */
  .hero__product-name { display: none; }
  .hero__sub { max-width: 330px; }
}