/* ============================================================
   Tekovate · styles.css
   ------------------------------------------------------------
   ⚠️ 品牌视觉全部收在下面第一个区块的 CSS 变量里。
      Kelvin 的 brand guideline 到了,只改 [BRAND TOKENS] 那一段,
      页面结构与组件完全不用动。

   2026-08-19 已按客户点头的 STRUCTA 参考转亮色(hero 保留摄影+深色压字)。
   Pei Zhi 的正式 guideline 到了,改 [BRAND TOKENS] 即可。
   ============================================================ */

/* ---------- [BRAND TOKENS] ---------- */
/* 2026-08-19 换亮色 · 依据客户点头的 STRUCTA 参考(dribbble 25872967 + 25882832):
   亮色摄影主导 · 白色 bento 卡 · 炭黑药丸主按钮 · 黄色只当点缀 chip。
   黄色沿用 Tekovate 现有金 #FFCD00 —— STRUCTA 的柠檬绿是别人的品牌色,
   Pei Zhi guideline 到了要换只改这里。 */
:root {
  --gold:        #FFCD00;
  --gold-2:      #FFA724;
  --gold-soft:   rgba(255, 205, 0, .18);
  /* 金色文字版:#FFCD00 放白底上对比度不够,文字/链接一律用这个深琥珀 */
  --accent-text: #8a6b00;

  /* STRUCTA 式炭黑 —— 主按钮 / CTA band / footer 锚块 */
  --charcoal:    #15171b;
  --charcoal-2:  #23262c;

  --bg:          #f4f6f9;
  --bg-2:        #ffffff;
  --surface:     #ffffff;
  --surface-2:   #eef1f6;

  --ink:         #101318;
  --ink-soft:    rgba(16, 19, 24, .72);
  --ink-mute:    rgba(16, 19, 24, .50);

  --stroke:      rgba(16, 19, 24, .09);
  --stroke-2:    rgba(16, 19, 24, .18);

  --card-shadow: 0 10px 34px rgba(16, 19, 24, .07);

  --font:        "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius:      18px;
  --radius-sm:   13px;
  --ease:        cubic-bezier(.22, .61, .36, 1);

  --shell:       1200px;
  --shell-narrow: 780px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;            /* 守 feedback_ui_design_direction:字号 ≥14px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font); line-height: 1.18; margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--shell-narrow); }
.ico { width: 20px; height: 20px; flex: none; }

/* ---------- buttons · 最小高度 48px ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font-family: var(--font); font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; transition: transform .18s var(--ease),
    background .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn--lg { min-height: 54px; padding: 15px 28px; font-size: 1rem; }
/* STRUCTA 式:主按钮 = 炭黑药丸白字,金色留给 chip 与图标 */
.btn--solid { background: var(--charcoal); color: #fff; }
.btn--solid:hover { background: var(--charcoal-2); transform: translateY(-2px); }
.btn--solid .ico { color: var(--gold); }
.btn--ghost { border-color: var(--stroke-2); color: var(--ink); background: var(--bg-2); }
.btn--ghost:hover { border-color: var(--charcoal); transform: translateY(-2px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, .82);
  transition: box-shadow .25s var(--ease);
}
.nav.is-stuck { box-shadow: 0 6px 24px rgba(16, 19, 24, .06); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.brand { display: inline-flex; align-items: center; }
/* 官方横版 logo(Variant-01 · 2026-08-27 客户交付) —— 禁自画 mark,守 feedback_official_brand_assets_only */
.brand-logo { height: 30px; width: auto; display: block; }
.footer .brand-logo { height: 34px; }
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links > a {
  padding: 10px 14px; border-radius: 10px; font-size: .93rem; font-weight: 500;
  color: var(--ink-soft); transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__links > a:hover { color: var(--ink); background: var(--surface-2); }
.nav__links > a.is-active { color: var(--accent-text); }
.nav__links .btn { margin-left: 10px; }
/* 中文标题断行控制:浏览器对 CJK 逢字可断,词中断开很难看 —— 词包 nowrap,词间给 <wbr> */
.nowrap { white-space: nowrap; }
/* 语言切换:EN｜中 双格开关(Kelvin 2026-08-28:胶囊+globe 出戏 → 借面板
   情景按钮的开关语言,当前语言 = 按下的那格。缩写,不占地) */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 10px;
  padding: 4px; border-radius: 999px; background: var(--surface-2);
}
.lang-toggle__seg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 6px 10px; border-radius: 999px;
  font-family: var(--font); font-size: .82rem; font-weight: 600;
  color: var(--ink-mute); transition: color .18s var(--ease), background .18s var(--ease);
}
.lang-toggle__seg.is-on { background: var(--charcoal); color: var(--gold); }
a.lang-toggle__seg:hover { color: var(--ink); background: var(--bg-2); }
/* .nav__links > a 的 color 规则比 .btn--solid 特异性高,会把白字盖成暗字 —— 显式钉回 */
.nav__links > a.btn--solid { color: #fff; }
.nav__links > a.btn--solid:hover { color: #fff; background: var(--charcoal-2); }
.nav__toggle { display: none; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; }
.nav__toggle:hover { background: var(--surface); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; min-height: clamp(560px, 78vh, 780px); display: flex; align-items: center; }
.hero__inner { position: relative; z-index: 2; padding: clamp(56px, 8vw, 96px) 24px; }
/* 首页:文案 + 灯光切换面板并排。面板是客户点名要保留的组件。 */
.hero__inner--split {
  display: grid; grid-template-columns: minmax(0, 1fr) 384px;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero__copy { max-width: 720px; }
.hero /* Hero 是唯一保留摄影+深色压字的区块(STRUCTA 的白色巨型压字打法)。
   页面 token 已转亮,所以这里的文字颜色必须显式写白,不能再靠继承。 */
.hero { color: #fff; }
.hero__h1 {
  font-size: clamp(2.4rem, 5.8vw, 4.4rem); letter-spacing: -.02em;
  text-transform: uppercase; font-weight: 800; line-height: 1.04; color: #fff;
}
.hero__lead { margin-top: 20px; font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(255, 255, 255, .78); max-width: 62ch; }
.hero__facts { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.hero__facts span { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: rgba(255, 255, 255, .78); }
.hero__facts .ico { color: var(--gold); margin-top: 2px; }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/* 房间图层 —— 组件抽自客户现网站,见 _preserve/room-demo/ */
.hero__room { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.room__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.room__img--base         { background-image: url('/images/livingroom-base.jpg'); }
.room__img--curtains     { background-image: url('/images/livingroom-curtains.jpg'); }
.room__img--night        { background-image: url('/images/livingroom-night.jpg'); }
.room__img--curtains-off { background-image: url('/images/livingroom-curtains-off.jpg'); }
.room__img--cinema       { background-image: url('/images/livingroom-cinema.jpg'); }
.hero__room[data-mode="lit"]          .room__img--base { opacity: 1; }
.hero__room[data-mode="curtains"]     .room__img--base { opacity: 1; }
.hero__room[data-mode="curtains"]     .room__img--curtains { opacity: 1; }
.hero__room[data-mode="off"]          .room__img--night { opacity: 1; }
.hero__room[data-mode="cinema"]       .room__img--cinema { opacity: 1; }
.hero__room[data-mode="curtains-off"] .room__img--curtains-off { opacity: 1; }
.room__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,12,15,.94) 0%, rgba(11,12,15,.80) 42%, rgba(11,12,15,.30) 100%),
    linear-gradient(0deg, rgba(11,12,15,.86), transparent 55%);
}
@media (prefers-reduced-motion: reduce) { .room__img { transition: none; } }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 7vw, 84px) 0; }
/* 相邻 section 不叠双倍留白 —— 上一段的底 + 这一段的顶只算一次呼吸
   (2026-08-28 Kelvin 连抓两处大死区,这条把全站节奏一次修对) */
.section + .section { padding-top: clamp(24px, 3.5vw, 44px); }
.section--alt { background: var(--bg-2); }
.section__h { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.02em; }
.section__sub { margin-top: 14px; color: var(--ink-soft); max-width: 62ch; font-size: 1.02rem; }
.note { margin-top: 26px; color: var(--ink-mute); font-size: .93rem; }
.note a { color: var(--accent-text); display: inline-flex; align-items: center; gap: 6px; }

/* 底边分隔线 Kelvin 2026-08-28 嫌多余,删了 */
.page-head { padding: clamp(48px, 7vw, 84px) 0 clamp(24px, 3vw, 40px); }
.page-head__h1 { font-size: clamp(1.95rem, 4.4vw, 3.1rem); letter-spacing: -.025em; }
.page-head__lead { margin-top: 18px; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.13rem); max-width: 64ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 18px; font-size: .84rem; color: var(--ink-mute); }
.crumbs a { color: var(--ink-mute); }
.crumbs a:hover { color: var(--accent-text); }
.crumbs .ico { width: 13px; height: 13px; opacity: .5; }

/* ---------- cards ---------- */
.cards { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card {
  position: relative; padding: 30px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--stroke);
  box-shadow: var(--card-shadow);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--stroke-2); box-shadow: 0 18px 44px rgba(16, 19, 24, .12); }
/* STRUCTA 式黄色 chip:金底 + 炭黑图标 */
.card__ico {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--gold); color: var(--charcoal); margin-bottom: 20px;
}
.card__ico .ico { width: 25px; height: 25px; }
.card__h { font-size: 1.22rem; margin-bottom: 10px; }
.card__p { color: var(--ink-soft); font-size: .95rem; }
.card__go { position: absolute; top: 30px; right: 30px; color: var(--ink-mute); transition: color .2s var(--ease), transform .2s var(--ease); }
.card:hover .card__go { color: var(--accent-text); transform: translateX(4px); }

/* ---------- question cards ---------- */
.qcards { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.qcards--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qcard {
  display: flex; flex-direction: column; gap: 11px; padding: 28px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke);
  box-shadow: var(--card-shadow);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.qcard:hover { transform: translateY(-5px); border-color: var(--stroke-2); }
.qcard__h { font-size: 1.1rem; line-height: 1.34; }
.qcard__p { color: var(--ink-soft); font-size: .93rem; }
.qcard__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 7px; color: var(--accent-text); font-weight: 600; font-size: .89rem; }
.qcard:hover .qcard__go .ico { transform: translateX(4px); }
.qcard__go .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }

/* ---------- steps ---------- */
.steps { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; }
.step { display: flex; gap: 22px; padding: 20px 0; }
.step:last-child { border-bottom: 0; }
.step__n {
  width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: var(--gold); color: var(--charcoal);
  font-family: var(--font); font-weight: 700; font-size: 1.05rem;
}
.step__h { font-size: 1.14rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 11px; }
.step__dur { font-family: var(--font-body); font-weight: 500; font-size: .82rem; color: var(--accent-text); background: var(--gold-soft); padding: 3px 10px; border-radius: 999px; }
.step__p { margin-top: 8px; color: var(--ink-soft); font-size: .96rem; }

/* ---------- property cards ---------- */
.props { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.prop { padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); }
.prop__h { font-size: 1.05rem; margin-bottom: 9px; color: var(--accent-text); }
.prop__p { color: var(--ink-soft); font-size: .95rem; }

/* ---------- prose (guide / service 内文) ---------- */
.prose h2 { font-size: clamp(1.32rem, 2.3vw, 1.72rem); margin: 46px 0 16px; letter-spacing: -.015em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); font-size: 1.04rem; margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }
.ticks { margin: 20px 0 8px; display: flex; flex-direction: column; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: 1rem; }
.ticks .ico { color: var(--accent-text); margin-top: 4px; width: 18px; height: 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pill {
  padding: 11px 17px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--stroke); font-size: .9rem; color: var(--ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pill:hover { border-color: var(--charcoal); color: var(--ink); }

/* ---------- accordion (FAQ) ---------- */
/* FAQ = bento 卡族(2026-08-28 Kelvin 嫌删线后太素):每题一张白卡 + 金圈箭头 */
.acc-list { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.acc {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--radius-sm); box-shadow: var(--card-shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.acc:hover { transform: translateY(-2px); border-color: var(--stroke-2); }
.acc.is-open { box-shadow: 0 16px 40px rgba(16, 19, 24, .12); border-color: rgba(255, 205, 0, .55); }
.acc__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 22px; text-align: left;
  font-family: var(--font); font-weight: 600; font-size: 1.04rem; line-height: 1.4;
}
.acc__chev {
  width: 36px; height: 36px; flex: none; padding: 9px; border-radius: 50%;
  background: var(--gold-soft); color: var(--accent-text);
  transform: rotate(90deg);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.acc.is-open .acc__chev { transform: rotate(-90deg); background: var(--gold); color: var(--charcoal); }
/* grid-template-rows 0fr→1fr 而不是 max-height:
   max-height 会 layout thrash,而且要写一个上限值 —— 上限猜小了会裁掉长答案。
   FAQ 答案长度不固定,不能有上限。 */
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.acc.is-open .acc__a { grid-template-rows: 1fr; }
/* 被裁切的那一层不准有 padding。
   min-height:0 只管内容高度,管不到 padding —— padding-bottom:24px 会让 0fr 的行
   永远至少 24px 高,看起来就是「收不起来」(实测:grid-template-rows 解析成 24px)。
   所以间距放进 .acc__inner 里面,跟着内容一起被 overflow:hidden 裁掉。 */
.acc__a > .acc__inner { overflow: hidden; min-height: 0; }
.acc__a p {
  padding: 0 22px 22px; margin: 0;
  color: var(--ink-soft); font-size: 1rem; max-width: 68ch;
}
@media (prefers-reduced-motion: reduce) { .acc__a { transition: none; } }

/* ---------- CTA band ---------- */
/* CTA band = STRUCTA 式炭黑锚块:亮色页面里的深色对比区,金色在这里当亮点 */
.band { padding: clamp(48px, 6vw, 76px) 0; background: var(--charcoal); color: #fff; }
.band .band__p { color: rgba(255, 255, 255, .72); }
.band .btn--solid { background: var(--gold); color: var(--charcoal); }
.band .btn--solid .ico { color: var(--charcoal); }
.band .btn--solid:hover { background: var(--gold-2); }
.band .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.band .btn--ghost:hover { border-color: #fff; }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.band__h { font-size: clamp(1.45rem, 2.8vw, 2.05rem); letter-spacing: -.02em; }
.band__p { margin-top: 11px; color: var(--ink-soft); max-width: 52ch; }
.band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- footer ---------- */
.footer { padding: clamp(48px, 6vw, 72px) 0 32px; background: var(--bg-2); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 44px; }
.footer__tag { margin-top: 18px; font-family: var(--font); font-weight: 600; font-size: 1.05rem; }
.footer__sub { margin-top: 7px; color: var(--ink-mute); font-size: .88rem; }
.footer__social { margin-top: 20px; display: flex; gap: 10px; }
.footer__social a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--stroke); color: var(--ink-soft);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer__social a:hover { color: var(--accent-text); border-color: var(--charcoal); }
.footer__h { font-family: var(--font); font-weight: 600; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; }
.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a { color: var(--ink-soft); font-size: .94rem; }
.footer__links a:hover { color: var(--accent-text); }
.footer__contact { display: flex; flex-direction: column; gap: 15px; }
.footer__contact li { display: flex; gap: 11px; color: var(--ink-soft); font-size: .93rem; }
.footer__contact .ico { color: var(--accent-text); margin-top: 3px; }
.footer__contact a:hover { color: var(--accent-text); }
.footer__base {
  margin-top: 44px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--ink-mute); font-size: .85rem;
}

/* ===== ROOM DEMO PANEL (抽自客户现网站 · 见 _preserve/room-demo/) ===== */
/* 玻璃底 —— 面板与 badge 都靠它。原本在 room-demo.css 里,抽面板区块时没带过来。 */
.glass {
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 24px 60px rgba(16, 19, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* ⚠️ .hero__panel-badge / .pulse / .hero__panel-hint 已经在下面原始组件区块里定义过。
   不要在这里再写一份 —— 之前重复定义时,我的 top 与原本的 bottom 同时生效,
   绝对定位的徽章被撑满整个面板高度。只补组件区块真的没有的东西。 */
.hero__panel { position: relative; }
/* .hero 把文字设成了白色(压字用),但白玻璃面板里必须回到深色文字,
   否则 Living Room / tile 数值全部白字白卡隐形(2026-08-19 实测踩到) */
.hero__panel .panel,
.hero__panel .hero__panel-badge { color: var(--ink); }
.hero .hero__panel-hint { color: rgba(255, 255, 255, .72); }
.hero .hero__panel-hint svg { color: var(--gold); }
/* 徽章浮在面板左下角外侧,提示文字要让开它,否则两行字叠在一起 */
.hero__panel .hero__panel-hint { padding-left: 190px; }
@media (max-width: 860px) {
  .hero__panel .hero__panel-hint { padding-left: 0; padding-top: 26px; }
}

.room__fx { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.room__fx--warm { background: radial-gradient(120% 95% at 62% 28%, rgba(255,176,48,.45), rgba(255,150,20,.10) 55%, transparent 78%); mix-blend-mode: soft-light; }
.room__fx--cool { background: radial-gradient(120% 95% at 55% 22%, rgba(150,196,255,.42), rgba(120,170,255,.10) 55%, transparent 78%); mix-blend-mode: soft-light; }
/* Climate haze — opacity scales with how cold the set temperature is (JS-driven) */
.room__fx--climate { background: linear-gradient(190deg, rgba(150,205,255,.55), transparent 48%); mix-blend-mode: screen; opacity: var(--climate-haze, 0); }
/* Closed-curtain drape over the left windows (used in night/cinema modes).
   Pleated fabric look, masked to the window zone, rendered above the scrim. */
.room__fx--curtains {
  background:
    linear-gradient(180deg, rgba(96,88,76,.12), rgba(0,0,0,.34) 82%),
    repeating-linear-gradient(90deg,
      rgba(104,95,82,.96) 0px,
      rgba(62,56,48,.97) 7px,
      rgba(34,30,26,.98) 14px,
      rgba(20,18,15,.98) 20px,
      rgba(34,30,26,.98) 26px,
      rgba(62,56,48,.97) 33px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 26%, rgba(0,0,0,.85) 36%, transparent 44%);
          mask-image: linear-gradient(90deg, #000 0 26%, rgba(0,0,0,.85) 36%, transparent 44%);
}
.room__fx--security {
  background: radial-gradient(130% 100% at 50% 50%, transparent 58%, rgba(40,120,255,.28) 100%);
  box-shadow: inset 0 0 120px rgba(40,120,255,.35);
}
.hero__room.is-warm    .room__fx--warm     { opacity: 1; }
.hero__room.is-cool    .room__fx--cool     { opacity: 1; }
/* Curtains are now baked into the curtains / curtains-off / cinema photos,
   so the old faint fabric overlay is no longer activated for any mode. */
.hero__room.is-armed   .room__fx--security { opacity: 1; animation: securityPulse 3.4s var(--ease) infinite; }
@keyframes securityPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* Dark scrim — keeps hero text legible over the photo */

/* ---------- 控制面板 · 场景 · 设备 tile · 温控转盘 ---------- */
.panel { border-radius: var(--radius); padding: 22px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; }
.panel__title { display: flex; align-items: center; gap: 9px; font-family: var(--font); font-weight: 600; font-size: 1.05rem; }
.panel__dot { width: 9px; height: 9px; border-radius: 50%; background: #36d399; box-shadow: 0 0 10px #36d399; }
.panel__status { font-size: .72rem; color: var(--ink-mute); }
.panel__scene { display: flex; gap: 8px; margin: 18px 0; }
.scene { flex: 1; padding: 9px; border-radius: 11px; background: var(--surface); border: 1px solid var(--stroke); color: var(--ink-soft); font-size: .8rem; font-weight: 500; transition: all .2s var(--ease); }
.scene--active { background: var(--gold-soft); border-color: rgba(255,205,0,.4); color: var(--accent-text); }
.panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.tile { position: relative; padding: 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--stroke); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.tile:hover { transform: translateY(-3px); border-color: var(--stroke-2); }
.tile__icon { width: 34px; height: 34px; border-radius: 10px; background: var(--gold-soft); color: var(--accent-text); display: grid; place-items: center; margin-bottom: 12px; }
.tile__icon svg { width: 19px; height: 19px; }
.tile__label { display: block; font-size: .78rem; color: var(--ink-mute); }
.tile__value { display: block; font-family: var(--font); font-weight: 600; font-size: .92rem; margin-top: 2px; }
.toggle { position: absolute; top: 14px; right: 14px; width: 32px; height: 18px; border-radius: 999px; background: rgba(16,19,24,.18); transition: background .25s var(--ease); }
.toggle::after { content:""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.toggle--on { background: var(--gold); }
.toggle--on::after { transform: translateX(14px); }
.panel__energy { margin-top: 16px; padding-top: 16px; }
.energy__row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft); margin-bottom: 9px; }
.energy__val { color: #0d8f60; font-weight: 600; }
.energy__bar { height: 7px; border-radius: 999px; background: rgba(16,19,24,.10); overflow: hidden; }
/* 条本身撑满,用 translateX 把多余的部分推出左边界(父层 overflow:hidden 裁掉)。
   等价于动 width,但只动 transform 层 —— 不触发 layout。
   JS 的介面不变,还是设 --w: 62% 这种百分比。 */
.energy__bar span {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  transform: translateX(calc(var(--w, 0%) - 100%));
}

.hero__panel-badge { position: absolute; bottom: -18px; left: -18px; display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(255,205,0,.6); animation: ring 2s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,205,0,.55); } 70% { box-shadow: 0 0 0 12px rgba(255,205,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,205,0,0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.hero__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-mute); font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; }
.hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--gold); animation: scrolldot 2s var(--ease) infinite; }
@keyframes scrolldot { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } }

/* ---------- Interactive panel: hint + control states ---------- */
.hero__panel-hint {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  margin-top: 26px; color: var(--ink-mute); font-size: .78rem; letter-spacing: .01em;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.hero__panel-hint svg { color: var(--gold); flex: none; }
.hero__panel-hint.is-dismissed { opacity: 0; transform: translateY(6px); pointer-events: none; }

.scene { cursor: pointer; }
.tile[role="button"] { cursor: pointer; outline: none; }
.tile[aria-pressed="false"] { opacity: .72; }
.tile[aria-pressed="false"] .tile__icon { background: rgba(16,19,24,.06); color: var(--ink-mute); }
.scene:focus-visible, .tile[role="button"]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; opacity: 1;
}
.energy__bar span { transition: transform .7s var(--ease); }

/* Full-width tile spanning both columns */
.tile--wide { grid-column: 1 / -1; }

/* Climate: circular temperature dial */
.tile--climate { cursor: default; display: flex; align-items: center; gap: 18px; }
.climate-dial { position: relative; width: 116px; height: 116px; flex: none; cursor: grab; touch-action: none; outline: none; }
.climate-dial:active { cursor: grabbing; }
.climate-dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial__track { fill: none; stroke: rgba(16,19,24,.12); stroke-width: 7; stroke-linecap: round; }
.dial__prog { fill: none; stroke: url(#dialGrad); stroke-width: 7; stroke-linecap: round; }
.dial__handle { fill: #fff; stroke: rgba(10,12,20,.35); stroke-width: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.climate-dial:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 50%; }
.dial__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: none; }
.dial__cap { font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.dial__temp { font-family: var(--font); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--ink); }
.climate-info { display: flex; flex-direction: column; gap: 3px; }
.climate-info .tile__label { font-size: .95rem; color: var(--ink); }
.climate-sub { font-size: .82rem; color: var(--ink-soft); }
.climate-hint { font-size: .72rem; color: var(--ink-mute); margin-top: 2px; }



/* ============================================================
   Responsive · desktop 多栏撑满 → mobile 单栏
   守 feedback_desktop_fullwidth_responsive
   ============================================================ */
@media (max-width: 1080px) {
  .cards, .qcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; inset: 74px 0 auto; flex-direction: column; align-items: stretch;
    gap: 4px; padding: 16px 24px 24px; background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 30px rgba(16, 19, 24, .08); display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links .btn { margin: 10px 0 0; }
  .lang-toggle { margin: 10px 0 0; align-self: center; }
  .lang-toggle__seg { min-height: 40px; min-width: 52px; }
  .hero__facts { grid-template-columns: 1fr; }
  .band__inner { flex-direction: column; align-items: flex-start; }
  /* 面板栏是固定 384px,不收掉的话会把文案栏挤成 0px —— 手机上标题整个消失。
     实测过:390px 视口下 grid-template-columns 会解析成 "0px 384px"。 */
  .hero__inner--split { grid-template-columns: minmax(0, 1fr); }
  .hero__panel { max-width: 420px; width: 100%; }
  .hero { min-height: 0; }
}
@media (max-width: 640px) {
  .cards, .qcards, .qcards--list, .props { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .container { padding: 0 18px; }
  .step { gap: 15px; }
  /* 满宽按钮:图标脱离 flex 靠边站,让**文字本身**在按钮里正中。
     不这样做的话 flex 会把「图标+文字」当一组居中,文字被推偏 ~15px
     (Kelvin 2026-09-01 在桌面版 416px 按钮上看出来,手机版每颗都有)。
     图标在前 → 靠左;尾随的箭头加 .ico--end → 靠右。 */
  .btn { width: 100%; position: relative; }
  .btn > .ico { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); }
  .btn > .ico--end { left: auto; right: 22px; }
  /* 例外:底部固定条是并排两颗、宽度不够,图标绝对定位会压到文字 */
  .lp-sticky .btn > .ico { position: static; transform: none; }
  .hero__actions .btn, .band__actions .btn { width: 100%; }
}

/* ---------- 支柱长文 ---------- */
.pills--toc { margin-top: 22px; }
.pills--toc .pill { font-size: .85rem; padding: 9px 15px; }
.prose h3 { font-size: 1.12rem; margin: 30px 0 10px; letter-spacing: -.01em; }
.prose--pillar h2 { scroll-margin-top: 90px; }
.pillar-card {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px;
  padding: clamp(26px, 4vw, 40px); border-radius: var(--radius);
  background: var(--charcoal); color: #fff; box-shadow: var(--card-shadow);
  transition: transform .22s var(--ease);
}
.pillar-card:hover { transform: translateY(-4px); }
.pillar-card__h { font-size: clamp(1.3rem, 2.6vw, 1.85rem); letter-spacing: -.02em; }
.pillar-card .qcard__p { color: rgba(255, 255, 255, .72); }
.pillar-card .qcard__go { color: var(--gold); }

/* ---------- Landing Page(表单) ---------- */
.quote__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
  padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 72px);
}
.quote__facts { margin-top: 24px; }
.steps--tight { margin-top: 30px; }
.steps--tight .step { padding: 16px 0; }
.quote__formcard {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--card-shadow); position: sticky; top: 96px;
}
.quote__form-h { font-size: 1.3rem; margin-bottom: 20px; }
.field { display: block; margin-bottom: 16px; }
.field__label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 7px; color: var(--ink-soft); }
.field__input {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--stroke-2); background: var(--bg-2);
  font: inherit; font-size: .96rem; color: var(--ink);
  transition: border-color .18s var(--ease);
}
.field__input:focus { outline: none; border-color: var(--charcoal); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 送出键刻意不放图标:标题长又满宽,箭头绝对定位会在手机上被文字压到
   (2026-09-01 实测 289px 宽时重叠)。满宽主按钮的箭头是装饰,拿掉最干净。 */
.quote__submit { width: 100%; margin-top: 6px; position: relative; }
.quote__note { margin-top: 12px; font-size: .92rem; color: var(--accent-text); min-height: 1.4em; }
/* 送出中/已送出:按钮锁住,而且要看得出来锁了(不然像点了没反应) */
.quote__submit:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
/* PDPA 同意声明 —— 照 fitcomfitness.com 的做法:按钮下方一行小字,不用勾选框 */
/* ⚠️ 12px,明着低于 feedback_ui_design_direction 的「字号 ≥14px」——
   Kelvin 2026-09-01 要求缩小。法务免责小字是那条规则的例外:它是揭露文字不是内容。
   其他地方不准照抄这个尺寸。 */
.quote__consent { margin: 10px auto 0; font-size: .75rem; line-height: 1.5;
  color: var(--ink-mute); max-width: 46ch; text-align: center; }
.quote__consent a { color: var(--accent-text); text-decoration: underline; }
.quote__alt { margin-top: 14px; font-size: .88rem; color: var(--ink-mute); }
.quote__alt a { color: var(--accent-text); font-weight: 600; }
@media (max-width: 900px) {
  .quote__grid { grid-template-columns: minmax(0, 1fr); }
  .quote__formcard { position: static; }
}

/* quote 页的 facts 在白底上,hero 的白字规则会让它隐形(2026-08-28 实测踩到) */
.quote__facts span { color: var(--ink-soft); }
.quote__facts .ico { color: var(--accent-text); }

/* 紧跟 page-head 的第一个 section:顶距从 116px 收到 36px。
   实测 2026-08-28(1512 视口):原 gap = 40(head)+116(section)+44(cards) = 200px,
   Kelvin 嫌太大。收完 = 40+36+0 ≈ 76px。 */
.page-head + .section { padding-top: clamp(20px, 3vw, 36px); }
.page-head + .section > .container > .cards:first-child,
.page-head + .section > .container > .qcards:first-child { margin-top: 0; }

/* ═══ 2026-08-28 impeccable audit 修正批 ═══ */

/* skip link:键盘用户第一 Tab 直达内容 */
.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 700;
  padding: 12px 20px; border-radius: 999px; background: var(--charcoal); color: #fff;
  font-family: var(--font); font-weight: 600; font-size: .9rem;
}
.skip-link:focus { left: 12px; }

/* 特色大卡:打破六张同构 —— 入门方案带真实房间照,占两列 */
.card--featured { grid-column: span 2; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__media { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.card--featured .card__body { position: relative; padding: 26px 30px 30px; }
.card--featured .card__ico { position: absolute; top: -26px; left: 30px; box-shadow: 0 8px 20px rgba(16, 19, 24, .18); }
.card--featured .card__h { margin-top: 14px; font-size: 1.4rem; }
.card--featured .card__go { top: auto; bottom: 30px; }
@media (max-width: 1080px) { .card--featured { grid-column: span 2; } }
@media (max-width: 640px)  { .card--featured { grid-column: span 1; } }

/* 正文对比度:ink-mute 从 .50 提到 .58(小字号 4.5:1 达标) */
:root { --ink-mute: rgba(16, 19, 24, .58); }

/* 触控目标:pill 链接补到 44px 最小高度 */
.pill { min-height: 44px; display: inline-flex; align-items: center; }

/* 排版细节:标题均衡断行 · 长文减孤字 */
h1, h2, h3 { text-wrap: balance; }
.prose p, .acc__a p, .card__p, .qcard__p { text-wrap: pretty; }

/* 手机版 hero:标题太大太贴顶(Kelvin 2026-08-28 实机截图) */
@media (max-width: 640px) {
  .hero__inner { padding-top: 56px; }
  .hero__h1 { font-size: clamp(1.85rem, 8.4vw, 2.3rem); line-height: 1.08; }
  .hero__lead { font-size: 1rem; }
}

/* ---------- 手机滚动场景故事(GSAP) ---------- */
.scene-story { display: none; }
/* JS 初始化(加 has-scene-story)才显示 —— 桌面+手机都跑(Kelvin 2026-08-28)。
   桌面上面板照旧可点,滚动只是替用户"点"它。 */
.has-scene-story .scene-story {
  display: block; position: absolute; left: 0; right: 0; bottom: 20px;
  z-index: 3; color: #fff; pointer-events: none;   /* 字幕不挡面板点击 */
}
.scene-caps { position: relative; min-height: 76px; }
.scene-cap {
  position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(8px);
  font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .85);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.scene-cap strong { color: var(--gold); font-family: var(--font); }
.scene-cap.is-active { opacity: 1; transform: none; }
.scene-dots { display: flex; gap: 7px; margin-top: 10px; }
.scene-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .25s var(--ease), transform .25s var(--ease); }
.scene-dot.is-active { background: var(--gold); transform: scale(1.25); }
.scene-hint { margin-top: 10px; font-size: .78rem; color: rgba(255, 255, 255, .55); }
@media (max-width: 860px) {
  /* 故事模式下:面板与提示让位(它在手机上"没有用途"),hero 撑满一屏被 pin */
  .has-scene-story .hero__panel { display: none; }
  .has-scene-story .hero { min-height: 100svh; }
  .has-scene-story .hero__inner { padding-bottom: 140px; }
}
@media (prefers-reduced-motion: reduce) { .scene-cap { transition: none; } }

/* ---------- 炭黑声明块(construction 段 · 权威时刻用深色) ---------- */
.dark-band {
  background: var(--charcoal); color: #fff;
  border-radius: var(--radius); padding: clamp(30px, 4.5vw, 56px);
  box-shadow: var(--card-shadow);
}
.dark-band__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.dark-band__h { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.02em; color: #fff; }
.dark-band__p { margin-top: 16px; color: rgba(255, 255, 255, .74); font-size: 1.02rem; max-width: 58ch; }
.dark-band__p strong { color: var(--gold); font-weight: 600; }
.dark-band__links { display: flex; flex-direction: column; gap: 10px; }
.dark-band__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; padding: 13px 20px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font); font-weight: 600; font-size: .95rem; color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.dark-band__links a:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 205, 0, .5); transform: translateX(3px); }
.dark-band__links .ico { color: var(--gold); width: 18px; height: 18px; flex: none; }
@media (max-width: 860px) { .dark-band__grid { grid-template-columns: minmax(0, 1fr); } }

/* 最后一张方案卡拉通整行(横向长卡) —— 网格收成整块,无孤儿位 */
.card--wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; padding: 26px 30px; }
.card--wide .card__ico { margin-bottom: 0; flex: none; }
.card--wide .card__h { margin-bottom: 6px; }
.card__wide-body { flex: 1; min-width: 0; }
.card__go--inline { position: static; flex: none; }
@media (max-width: 640px) {
  .card--wide { flex-direction: column; align-items: flex-start; gap: 14px; }
  .card__go--inline { display: none; }
}

/* ---------- 文章配图 ---------- */
.article-hero {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--card-shadow);
  margin-top: 6px;
}

/* guide hub 卡带缩略图(吸引点击) */
.qcard--img { padding: 0; overflow: hidden; }
.qcard__media { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.qcard--img .qcard__body {
  display: flex; flex-direction: column; gap: 11px; flex: 1;
  padding: 20px 26px 24px;
}

/* ============================================================
   /zh/free-quote · Marketing LP（Kelvin 2026-08-28「要有 Marketing purpose」）
   复用既有 token/组件族,只加落地页专属件
   ============================================================ */

/* 痛点卡:白卡族,与 .card 同血统但不带链接手势 */
.pains { margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.pain {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--radius-sm); box-shadow: var(--card-shadow); padding: 26px 24px;
}
.pain__h { font-family: var(--font); font-size: 1.06rem; font-weight: 700; margin-top: 14px; }
.pain__p { margin-top: 8px; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

/* 六方案静态 pill(带 icon,非链接) */
.pills--lp { justify-content: center; margin-top: 26px; }
.pill--static { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.pill--static .ico { width: 17px; height: 17px; color: var(--accent-text); }
.pill--static:hover { border-color: var(--stroke); color: var(--ink-soft); }

/* offer 深色带里的白字 tick 列 + 金色 CTA */
.ticks--dark li { color: rgba(255, 255, 255, .88); font-size: 1.04rem; }
.ticks--dark .ico { color: var(--gold); }
.btn--gold { background: var(--gold); color: var(--charcoal); }
.btn--gold .ico { color: var(--charcoal); }
.btn--gold:hover { background: var(--gold-2); color: var(--charcoal); }
.dark-band__cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.dark-band__sub { color: rgba(255, 255, 255, .62); font-size: .92rem; }

/* 表单区左侧配图 */
.lp-room-photo { margin-top: 26px; width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--card-shadow); }

/* 手机底部常驻 CTA(桌面隐藏)。z-index 走站内语义档位:高于 sticky nav(60) */
.lp-sticky { display: none; }
@media (max-width: 860px) {
  .lp-sticky {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(16, 19, 24, .12);
  }
  .lp-sticky .btn { flex: 1; justify-content: center; min-height: 48px; }
  /* 底栏占掉的高度还给页面,免得 footer 被盖住 */
  body:has(.lp-sticky) { padding-bottom: 76px; }
}
/* LP hero:多了一行 demo 提示,flex 改纵向免得提示被挤到右边当同排项 */
.hero--lp { flex-direction: column; justify-content: center; }
.hero--lp .hero__inner { width: 100%; }
/* LP 直效文案组件:CTA 降摩擦行 · 居中过渡钩 · 命名保证块 */
.hero__reassure { margin-top: 14px; font-size: .92rem; color: rgba(255, 255, 255, .66); }
.note--center { text-align: center; max-width: 46ch; margin-left: auto; margin-right: auto; }
.lp-guarantees { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.lp-guarantees p { color: rgba(255, 255, 255, .74); font-size: .97rem; max-width: 58ch; }
.lp-guarantees strong { color: var(--gold); font-weight: 600; }
/* LP 分区大圆角过渡(Kelvin 2026-08-28 参考 reichheld ting + 补充规则:
   只有颜色反差大的交界才翻圆角 —— 暗 hero → 亮内容区。
   灰底/白底同属浅色系,交界保持直线,别每一刀都圆) */
.lp .hero--lp { padding-bottom: 44px; }
.lp .hero--lp + .section {
  position: relative; z-index: 2;
  border-radius: 44px 44px 0 0; margin-top: -44px;
  background: var(--bg);
  padding-top: clamp(56px, 7vw, 84px);
}
/* LP hero 文字离边角远一点(手机上 24px 太贴) */
@media (max-width: 860px) {
  .lp .hero__inner { padding-left: 34px; padding-right: 34px; }
  .lp .hero--lp { padding-bottom: 56px; }
}
/* LP 顶部卖点横条:金底炭黑,一行三卖点(Kelvin 2026-08-28) */
.lp-topbar {
  background: var(--gold); color: var(--charcoal);
  font-family: var(--font); font-weight: 600; font-size: .88rem;
  text-align: center; padding: 9px 16px; line-height: 1.5;
}
@media (max-width: 560px) { .lp-topbar { font-size: .8rem; padding: 8px 12px; } }
/* LP 分栏区:标题在左、内容在右(Kelvin 2026-08-28 参考版式)。手机叠回单栏 */
.split-sec {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
  max-width: 1020px;   /* 整块收窄往中间靠(Kelvin 2026-08-28:都移去 center) */
}
.split-sec__head .section__h { text-align: left; }
.split-sec__head .section__sub { text-align: left; margin-left: 0; }
.split-sec .steps { margin-top: 0; }
.acc-list--split { margin-top: 0; }
@media (max-width: 900px) {
  .split-sec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .split-sec__head { position: static; }
}

/* LP 解法区:全部元素回到中轴,pill 3x2 网格(Kelvin 2026-08-28:之前左右混排乱了) */
.section--center .section__h,
.section--center .section__sub,
.section--center .note { text-align: center; margin-left: auto; margin-right: auto; }
/* ch 单位按「0」宽算,中文一字吃两 ch,62ch/58ch 在中文里只剩一行 30 字 ——
   中文段落放开 ch 限宽,行长交给 780px 窄容器管(约 45 字/行) */
.section--center .section__sub, .section--center .note { max-width: none; }
@media (min-width: 700px) {
  .section--center .pills--lp { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; gap: 12px; }
}
/* LP hero:压暗层调轻(Kelvin 2026-08-28:背景太暗)。文字区仍够黑保住对比 */
.hero--lp .room__scrim {
  background:
    linear-gradient(100deg, rgba(11,12,15,.82) 0%, rgba(11,12,15,.58) 42%, rgba(11,12,15,.16) 100%),
    linear-gradient(0deg, rgba(11,12,15,.66), transparent 55%);
}
/* 视频块:圆角白卡族,下面解释保留 */
.lp-video-wrap { max-width: 860px; margin: 30px auto 0; }
.lp-video, .lp-video-fallback { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--card-shadow); display: block; }
.lp-video-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-video { display: none; }
  .lp-video-fallback { display: block; }
}
/* EN LP 标题:英文问句长,全大写 4.4rem 会顶出五行 —— 只对英文收一档,中文不动 */
.hero--lp .hero__h1:lang(en) { font-size: clamp(2.1rem, 4.4vw, 3.3rem); max-width: 17ch; }
/* footer 地图链接:金字族,跟其他 footer 链接区分开 */
.footer__maps { color: var(--accent-text); font-size: .9rem; }
.footer__maps:hover { text-decoration: underline; }