/* ==========================================================================
   Red Rabbit Intelligent — homepage
   Warm paper, ink and one red thread. No pure black anywhere.
   ========================================================================== */

:root {
  --paper:      #F7F5FC;
  --paper-2:    rgba(255, 255, 255, 0.42);
  --card:       rgba(255, 255, 255, 0.74);
  --ink:        #17132A;
  --ink-2:      #4E4768;
  --ink-3:      #8A82A6;
  --line:       rgba(23, 19, 42, 0.13);
  --line-soft:  rgba(23, 19, 42, 0.07);
  --red:        #E84C3D;
  --red-deep:   #C7352A;
  --red-tint:   rgba(232, 76, 61, 0.09);
  --violet:     #7C5CFC;
  --pink:       #F268A8;
  --sky:        #56CBE4;
  --grad:       linear-gradient(112deg, #E84C3D 0%, #F268A8 48%, #7C5CFC 100%);
  --grad-soft:  linear-gradient(135deg, rgba(232, 76, 61, 0.12), rgba(242, 104, 168, 0.10) 48%, rgba(124, 92, 252, 0.14));
  --deep:       #1A1436;
  --deep-2:     #241B47;
  --cream:      #F8F4FF;
  --cream-2:    rgba(248, 244, 255, 0.74);
  --cream-3:    rgba(248, 244, 255, 0.46);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --font-display: "Sora", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-text: "Manrope", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --sh-1: 0 1px 2px rgba(40, 24, 90, 0.06);
  --sh-2: 0 20px 44px -24px rgba(58, 32, 120, 0.36);
  --sh-3: 0 38px 80px -42px rgba(58, 32, 120, 0.48);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; font-weight: 600; }

p { margin: 0; }

ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--red); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------------------------------------------------------------- typography */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 20px;
}
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(216, 65, 44, 0.12);
}
.eyebrow--light { color: var(--cream-3); }

.she { max-width: 880px; margin-bottom: 48px; }
.she--narrow { max-width: 720px; }
.she--dark .she__title { color: var(--cream); }
.she--dark .she__intro { color: var(--cream-2); }

.she__title, .hero__h1, .cta__title { text-wrap: balance; }

.she__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.she__title--sm { font-size: clamp(24px, 2.4vw, 32px); }

.she__intro {
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 720px;
}

.section { padding: 104px 0; }
.section--tint { background: var(--paper-2); }

.section__kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}

.body {
  font-size: 15.5px;
  line-height: 1.86;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.body--sm { font-size: 13.5px; line-height: 1.8; }
.body strong { color: var(--ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--red);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(216, 65, 44, 0.32);
  transition: gap 0.2s ease, border-color 0.2s ease;
}
.link-arrow:hover { gap: 13px; border-color: var(--red); }

/* -------------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn--sm { padding: 11px 18px; font-size: 12px; }

.btn--red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(216, 65, 44, 0.8);
}
.btn--red:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(216, 65, 44, 0.85); }

.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: #000; transform: translateY(-1px); }

.btn--line {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn--line:hover { border-color: var(--ink); background: rgba(30, 25, 19, 0.04); }

.btn--ghost {
  border-color: rgba(246, 241, 232, 0.28);
  color: var(--cream);
  background: rgba(246, 241, 232, 0.05);
}
.btn--ghost:hover { background: rgba(246, 241, 232, 0.12); border-color: rgba(246, 241, 232, 0.5); }

/* ------------------------------------------------------------------------ nav */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(247, 244, 238, 0.84);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px -24px rgba(30, 25, 19, 0.5);
}
.nav__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo__mark { display: block; width: auto; height: 34px; }
.logo__rule {
  width: 4px; height: 30px;
  background: var(--red);
  border-radius: 2px;
  display: block;
}
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--ink);
}
.logo__sub {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--ink-3);
  margin-top: 5px;
}

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  position: relative;
  padding: 4px 0;
  transition: color 0.18s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1.5px;
  background: var(--red);
  transition: right 0.25s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { right: 0; }

.nav__right { display: flex; align-items: center; gap: 18px; }

/* ---- 「产品」下拉：一级仍是目录页，悬停/聚焦展开已建好的产品页 ---- */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__parent { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(180deg); opacity: 0.85; }

.nav__menu {
  position: absolute;
  top: 100%;
  left: -20px;
  width: 336px;
  margin-top: 14px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 34px 70px -34px rgba(20, 8, 44, 0.55), 0 0 0 1px rgba(20, 8, 44, 0.07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
/* 链接与面板之间那道 14px 空隙也要能接住鼠标，否则往下一划菜单就没了 */
.nav__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
/* hover 与键盘 :focus-within 都能开；两者同时命中，鼠标移进面板不会闪 */
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }

.nav__menu a {
  display: block;
  padding: 10px 12px 11px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.nav__menu a::after { display: none; }
.nav__menu a:hover { background: rgba(124, 92, 252, 0.07); color: var(--ink); }
.nav__menu a.is-current { background: rgba(124, 92, 252, 0.09); color: var(--ink); }
.nav__menu b { display: block; font-weight: 700; letter-spacing: -0.005em; }
/* 注意别写成 .nav__menu span —— rr_lang() 给每段文字都套了 .bi-en/.bi-zh 的 span，
   泛选择器会把标签本身也压成小灰字（踩过） */
.nav__menu .nav__note {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
}

/* 语言切换：胶囊按钮 + 下拉菜单（<details>，无 JS 也能用） */
.lpick { position: relative; display: inline-flex; }
.lpick__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 13px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.7);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.lpick__btn::-webkit-details-marker { display: none; }
.lpick__btn:hover { border-color: rgba(30, 25, 19, 0.26); }
.lpick[open] > .lpick__btn {
  border-color: rgba(30, 25, 19, 0.42);
  background: #fff;
  box-shadow: 0 12px 26px -20px rgba(30, 25, 19, 0.55);
}
.lpick__globe {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--ink-3);
  transition: color 0.2s ease;
}
.lpick[open] .lpick__globe { color: var(--ink); }
.lpick__f { display: inline-flex; flex: 0 0 auto; }
.lpick__flag { display: block; width: 17px; height: 12px; border-radius: 2.5px; }
.lpick__cur { white-space: nowrap; }
.lpick__chev {
  width: 10px;
  height: 7px;
  flex: 0 0 auto;
  margin-left: 1px;
  color: var(--ink-3);
  transition: transform 0.22s ease;
}
.lpick[open] .lpick__chev { transform: rotate(180deg); }

.lpick__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 238px;
  padding: 7px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(24, 16, 48, 0.42), 0 2px 8px rgba(24, 16, 48, 0.05);
  z-index: 90;
  animation: lpickIn 0.16s ease-out;
}
@keyframes lpickIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.lpick__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.16s ease;
}
.lpick__opt + .lpick__opt { margin-top: 2px; }
.lpick__opt:hover { background: #F7F4EF; }
.lpick__opt.is-active { background: #F4EFFC; }
.lpick__opt.is-active .lpick__names b { color: #6D3BD6; }
.lpick__menu .lpick__f { width: 22px; place-items: center; }
.lpick__names { display: grid; gap: 2px; min-width: 0; }
.lpick__names b { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.lpick__names i { font-style: normal; font-size: 10.5px; line-height: 1.2; color: var(--ink-3); }
.lpick__check { width: 15px; height: 15px; margin-left: auto; flex: 0 0 auto; color: #6D3BD6; opacity: 0; }
.lpick__opt.is-active .lpick__check { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lpick__menu { animation: none; }
}

/* ----------------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding: 132px 0 84px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -280px; right: -180px;
  width: 760px; height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(216, 65, 44, 0.13), rgba(216, 65, 44, 0) 68%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: -220px; bottom: -320px;
  width: 680px; height: 680px;
  border-radius: 50%;
  border: 1px solid rgba(30, 25, 19, 0.08);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 58px;
  align-items: center;
}

.hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.3vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.033em;
  font-weight: 700;
}
.hero__h1-a { display: block; color: var(--ink); }
.hero__h1-b { display: block; color: var(--red); }

.hero__lede {
  margin-top: 26px;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink-2);
  max-width: 560px;
}
.hero__lede--sm { margin-top: 14px; font-size: 14px; line-height: 1.75; color: var(--ink-3); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.hero__trust li {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__trust li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--red);
  opacity: 0.6;
}

.hero__fig { position: relative; margin: 0; }

.hero__plate {
  position: relative;
  border-radius: var(--r-xl);
  background: linear-gradient(158deg, #FCF8F1 0%, #F2E9DB 52%, #EBDFCD 100%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  padding: 28px 24px 38px;
  overflow: hidden;
}
.hero__plate::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 8%;
  height: 26px;
  background: radial-gradient(ellipse at 50% 50%, rgba(30, 25, 19, 0.16), rgba(30, 25, 19, 0) 72%);
  filter: blur(6px);
}
.hero__plate img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  filter: saturate(0.94) drop-shadow(0 26px 34px rgba(30, 25, 19, 0.22));
}

.hero__tag {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.86);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero__tag::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
}

.hero__specs {
  position: relative;
  z-index: 4;
  margin: -28px 22px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.hero__spec {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero__spec + .hero__spec { border-left: 1px solid var(--line-soft); }
.hero__spec-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__spec-v {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero__cap {
  margin-top: 18px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
  text-align: center;
}

/* ---------------------------------------------------------------------- facts */
.facts {
  padding: 54px 0 58px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.5), rgba(240, 234, 224, 0.5));
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.fact { padding: 0 22px; border-left: 1px solid var(--line-soft); }
.fact:first-child { padding-left: 0; border-left: 0; }
.fact__num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
}
.fact__num--sm {
  font-size: clamp(17px, 1.55vw, 22px);
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.fact__label {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.fact__note {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------- fleet */
.fleet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* 七个品类：宽屏走 4 列，四加三比三三一更稳 */
@media (min-width: 1180px) {
  .fleet { grid-template-columns: repeat(4, 1fr); }
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: rgba(30, 25, 19, 0.2);
}

.pcard__media {
  display: block;
  padding: 26px 24px 14px;
  background: radial-gradient(120% 100% at 50% 0%, #FBF6EC 0%, #F3EADC 78%);
  border-bottom: 1px solid var(--line-soft);
}
.pcard__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.pcard:hover .pcard__media img { transform: scale(1.035); }

.pcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }

.pcard__cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.pcard__name {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: -0.012em;
  font-weight: 600;
}
.pcard__name a:hover { color: var(--red); }

.pcard__best {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
  flex: 1;
}
.pcard__models {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.pcard__foot {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 首页卡片不再印价：型号行与圆形箭头合并成一行，避免价格留下的空档 */
.pcard__foot--solo {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  gap: 12px;
}
.pcard__foot--solo .pcard__models {
  margin: 0;
  padding: 0;
  border-top: 0;
  flex: 1;
}
/* 型号代码不允许从连字符中间断开（CT-606 不能拆成 CT- / 606） */
.pcard__code { white-space: nowrap; }
.pcard__dot { font-style: normal; }
.pcard__price {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.pcard__price em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-left: 4px;
}
.pcard__go {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  transition: all 0.22s ease;
}
.pcard:hover .pcard__go { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.fleet__foot {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.fleet__note { font-size: 12.5px; color: var(--ink-3); max-width: 620px; }

/* --------------------------------------------------------------------- maths */
.maths {
  position: relative;
  background: var(--deep);
  padding: 104px 0;
  overflow: hidden;
}
.maths::before {
  content: "";
  position: absolute;
  top: -240px; left: -120px;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 65, 44, 0.24), rgba(216, 65, 44, 0) 68%);
}
.maths .wrap { position: relative; }

.tablewrap { width: 100%; overflow-x: auto; }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl caption.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tbl--maths th, .tbl--maths td {
  padding: 20px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(246, 241, 232, 0.13);
  vertical-align: middle;
  white-space: nowrap;
}
.tbl--maths thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream-3);
  padding-top: 0;
  border-bottom-color: rgba(246, 241, 232, 0.24);
}
.tbl--maths tbody th {
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
}
.tbl--maths tbody td {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--cream-2);
  font-variant-numeric: tabular-nums;
}
.tbl--maths tbody tr:hover td,
.tbl--maths tbody tr:hover th { background: rgba(246, 241, 232, 0.04); }
.tbl--maths .tbl__hi { color: #FFB4A2; font-weight: 600; }

.maths__grid {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  align-items: start;
}
.maths__recompute {
  border-left: 2px solid var(--red);
  padding: 4px 0 4px 22px;
}
.maths__rlabel {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--red);
  margin-bottom: 10px;
}
.maths__rtext {
  font-size: 14px;
  line-height: 1.85;
  color: var(--cream-2);
  font-variant-numeric: tabular-nums;
}
.maths__p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--cream-2);
  margin-bottom: 16px;
}
.maths__p:first-child { color: var(--cream); }
.maths__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.maths__foot {
  margin-top: 24px;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--cream-3);
}

/* --------------------------------------------------------------------- price */
.price__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 76px;
  align-items: start;
}
.price__left { position: sticky; top: 108px; }

.bars { margin-top: 38px; display: grid; gap: 20px; }
.bar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.bar__label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bar__range {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.bar__track {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: rgba(30, 25, 19, 0.07);
  overflow: hidden;
}
.bar__fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 999px;
  background: rgba(30, 25, 19, 0.22);
}
.bar--mine .bar__fill { background: linear-gradient(90deg, var(--red), #E8763F); }
.bar--mine .bar__label { color: var(--ink); font-weight: 700; }
.bar--mine .bar__range { color: var(--red); }

.price__right { padding-top: 4px; }
.pitem {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
}
.pitem:first-child { border-top: 0; padding-top: 0; }
.pitem__n {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red);
  padding-top: 5px;
}
.pitem__h {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: 8px;
}
.pitem__p { font-size: 14px; line-height: 1.82; color: var(--ink-2); }
.price__right .link-arrow { margin-top: 26px; }

/* ------------------------------------------------------------------- factory */
.wide {
  margin: 0 0 44px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #DED6C8;
}
.wide img { width: 100%; height: auto; max-height: 540px; object-fit: cover; object-position: center 42%; }
.wide figcaption {
  padding: 12px 18px;
  font-size: 11px;
  color: var(--ink-3);
  background: var(--card);
  border-top: 1px solid var(--line-soft);
}

.factory__grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 64px;
  align-items: start;
}
/* 轮播里的图片有 600/1280 的固有宽度，栅格子项必须允许收缩，否则会把左栏挤扁 */
.factory__side,
.factory__text { min-width: 0; }
.entities__grid > * { min-width: 0; }
.factory__text .body:first-child { color: var(--ink); font-size: 16px; }

.points { display: grid; gap: 0; margin-bottom: 26px; }
.points li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.points b {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--red);
  min-width: 62px;
}
.points span { font-size: 13px; color: var(--ink-2); }

.factory__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.factory__shots figure { margin: 0; }
.factory__shots img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.factory__shots figcaption {
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ entities */
.entities__grid {
  display: grid;
  grid-template-columns: 1.14fr 0.86fr;
  gap: 68px;
  align-items: start;
}
.ecard {
  margin-top: 18px;
  padding: 26px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.ecard__role {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.ecard__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.ecard__name-zh { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.ecard__addr { margin-top: 12px; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }

.entities__note {
  margin-top: 26px;
  padding-left: 20px;
  border-left: 2px solid var(--red);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-2);
}
.entities__terms {
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.entities__fig { margin: 0; }
.entities__fig img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.entities__fig figcaption {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-3);
}

/* -------------------------------------------------------------------- venues */
.venues__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 44px;
  align-items: start;
}
.vlist { counter-reset: v; }
.vlist li {
  counter-increment: v;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
  color: var(--ink-2);
}
.vlist li::before {
  content: counter(v, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  padding-top: 4px;
}

.vno {
  padding: 24px 26px;
  background: var(--red-tint);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.vno__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 10px;
}
.vno__text { font-size: 13px; line-height: 1.8; color: #6B3B30; }

.venues__space {
  margin-top: 30px;
  max-width: 860px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-2);
}

.shots {
  margin: 44px 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.shot { margin: 0; }
.shot img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  filter: saturate(0.92) contrast(1.02);
  transition: filter 0.35s ease, transform 0.35s ease;
}
.shot:hover img { filter: saturate(1.05) contrast(1.02); transform: translateY(-3px); }
.shot figcaption { margin-top: 9px; font-size: 11px; line-height: 1.5; color: var(--ink-3); }

/* ------------------------------------------------------------------- running */
.running__grid {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 68px;
  align-items: start;
}

.bigcost {
  margin-top: 36px;
  padding: 30px 30px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.bigcost__num {
  display: block;
  font-family: var(--font-display);
  font-size: 82px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--red);
}
.bigcost__label {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bigcost__split {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 9px;
}
.bigcost__split li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-2);
}
.bigcost__split b {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tbl--cost { font-size: 13px; }
.tbl--cost thead th {
  text-align: left;
  padding: 0 12px 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.tbl--cost tbody th, .tbl--cost tbody td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.tbl--cost tbody th { font-size: 13px; font-weight: 600; color: var(--ink); }
.tbl--cost tbody td { font-size: 12.5px; color: var(--ink-3); }
.tbl--cost .tbl__price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.running__right .body--sm { margin-top: 20px; }
.running__right .link-arrow { margin-top: 8px; }

/* ----------------------------------------------------------------- operators */
.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.quote {
  position: relative;
  margin: 0;
  padding: 34px 32px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.quote__mark {
  position: absolute;
  top: -18px; right: 16px;
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 1;
  color: var(--red);
  opacity: 0.12;
}
.quote__text {
  position: relative;
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
.quote figcaption {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.quote figcaption b { font-size: 13.5px; }
.quote figcaption span { font-size: 11.5px; color: var(--ink-3); }

/* --------------------------------------------------------------------- steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.step {
  border-top: 2px solid var(--line);
  padding-top: 22px;
  position: relative;
}
.step::before {
  content: "";
  position: absolute;
  top: -4.5px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.step__n {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--red);
}
.step__t {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.step__d { margin-top: 10px; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
#steps .entities__note { margin-top: 40px; max-width: 780px; }

/* ----------------------------------------------------------------------- faq */
.faq { max-width: 920px; }

@media (min-width: 1020px) {
  .faqsection .wrap {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 72px;
    align-items: start;
  }
  .faqsection .she { margin-bottom: 0; position: sticky; top: 116px; }
  .faqsection .faq { max-width: none; }
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.18s ease;
}
.faq__item[open] .faq__q, .faq__item summary:hover .faq__q { color: var(--red); }

.faq__icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; margin-top: 5px; }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--ink-3);
  transition: transform 0.25s ease, background 0.2s ease;
}
.faq__icon::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.faq__icon::after { top: 0; bottom: 0; left: 7px; width: 1.5px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__item[open] .faq__icon::before { background: var(--red); }

.faq__a {
  padding: 0 60px 26px 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

/* ----------------------------------------------------------------------- cta */
.cta {
  position: relative;
  background: var(--deep);
  padding: 112px 0 104px;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  left: 50%; top: -180px;
  width: 900px; height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 40%, rgba(216, 65, 44, 0.34), rgba(216, 65, 44, 0) 66%);
  pointer-events: none;
}
.cta__inner { position: relative; text-align: center; }
.cta__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--cream);
  max-width: 860px;
  margin: 0 auto;
}
.cta__sub {
  margin: 24px auto 0;
  max-width: 660px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--cream-2);
}
.cta__btns {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.cta__contact {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--cream-3);
}
.cta__contact a { border-bottom: 1px solid rgba(246, 241, 232, 0.26); padding-bottom: 2px; }
.cta__contact a:hover { color: var(--cream); border-color: var(--cream); }

/* ---- homepage quote form (replaces the old two-button CTA) ---- */
.cta__split {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
.cta__copy { text-align: left; }
/* 56px 时会在「Name / your city」中间断行，压到 46 刚好两句一行 */
.cta__copy .cta__title { margin: 0; max-width: 560px; font-size: clamp(30px, 3.2vw, 46px); }
.cta__copy .cta__sub { margin: 22px 0 0; max-width: 520px; }
.cta__copy .cta__contact { margin-top: 26px; justify-content: flex-start; }

.qform {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 24px;
  padding: 26px 26px 20px;
  box-shadow: 0 44px 90px -54px rgba(0, 0, 0, 0.95);
  text-align: left;
}
.qform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qform__f { display: block; min-width: 0; }
.qform__f--wide { grid-column: 1 / -1; }
.qform__k {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  /* 不用大写：会把 WhatsApp 写成 WHATSAPP，品牌名保持原样 */
  color: var(--ink-2);
}
body.mode-zh .qform__k { font-size: 11.5px; }
.qform__k--req::after { content: " *"; color: var(--red); }
.qform__f input,
.qform__f select,
.qform__f textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
}
.qform__f textarea { min-height: 82px; resize: vertical; }
.qform__f select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A82A6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.qform__f input::placeholder,
.qform__f textarea::placeholder { color: #B4ADCB; }
.qform__f input:focus,
.qform__f select:focus,
.qform__f textarea:focus {
  outline: none;
  border-color: rgba(160, 120, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(160, 120, 255, 0.12);
}
.qform__f input[aria-invalid="true"],
.qform__f select[aria-invalid="true"] {
  border-color: rgba(232, 76, 61, 0.65);
  box-shadow: 0 0 0 3px rgba(232, 76, 61, 0.1);
}
.qform__btn { width: 100%; justify-content: center; margin-top: 16px; }
.qform__err { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--red); }
.qform__note { margin: 10px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--ink-3); }

/* 蜜罐：机器人会填，人看不见。不用 display:none —— 部分脚本会跳过隐藏字段 */
.qform__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qform__done { padding: 30px 8px 14px; text-align: center; }
.qform__done[hidden] { display: none; }
.qform__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e84c3d, #f268a8);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  box-shadow: 0 18px 36px -20px rgba(232, 76, 61, 0.95);
}
.qform__done-title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.qform__done-body {
  margin: 10px auto 0;
  max-width: 350px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--ink-2);
}
.qform__done-wa { margin-top: 20px; width: 100%; justify-content: center; }
.qform__again {
  margin-top: 13px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  text-decoration: underline;
  cursor: pointer;
}
.qform__again:hover { color: var(--ink); }
.qform__errwa {
  display: inline-block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--red);
}
.qform__errwa[hidden] { display: none; }

@media (max-width: 900px) {
  .cta__split { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 620px) {
  .qform { padding: 22px 18px 18px; border-radius: 20px; }
  .qform__grid { grid-template-columns: 1fr; }
  /* 邮箱和 WhatsApp 各占一行，别让分隔点孤零零挂在行尾 */
  .cta__contact { flex-direction: column; gap: 6px; }
  .cta__contact > span { display: none; }
}

/* -------------------------------------------------------------------- footer */
.footer {
  background: #1B1610;
  color: var(--cream-2);
  padding: 72px 0 30px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(246, 241, 232, 0.1);
}
.footer__lockup { display: block; width: 168px; height: auto; margin-bottom: 14px; }
.footer__tag { margin-top: 14px; font-size: 13px; line-height: 1.75; color: var(--cream-3); max-width: 320px; }
.footer__spec {
  display: inline-flex;
  gap: 6px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
  border-bottom: 1px solid rgba(246, 241, 232, 0.28);
  padding-bottom: 3px;
}
.footer__spec:hover { color: #FF9C86; border-color: #FF9C86; }

.footer__role {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(246, 241, 232, 0.4);
  margin-bottom: 10px;
}
.footer__name { font-size: 13px; font-weight: 600; color: var(--cream); line-height: 1.5; }
.footer__name-zh { font-size: 11px; color: var(--cream-3); margin-top: 2px; }
.footer__addr { margin-top: 8px; font-size: 11px; line-height: 1.7; color: rgba(246, 241, 232, 0.52); }

.footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.15fr;
  gap: 34px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(246, 241, 232, 0.1);
}
.footer__col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.footer__coltitle {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(246, 241, 232, 0.4);
  margin-bottom: 4px;
}
.footer__col a { font-size: 12.5px; color: var(--cream-2); transition: color 0.18s ease; }
.footer__col a:hover { color: #FF9C86; }
.footer__note { font-size: 10.5px; line-height: 1.7; color: rgba(246, 241, 232, 0.46); margin-top: 6px; }

.footer__bottom {
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  color: rgba(246, 241, 232, 0.46);
}
.footer__bottom a:hover { color: var(--cream); }

/* ---------------------------------------------------------------- bilingual */
.bi { display: block; }
.bi-en { display: inline; }
.bi-zh { display: none; }

/* English version: never render the Chinese copy in the flow */
body.mode-en .bi-zh { display: none !important; }

/* Chinese version */
body.mode-zh .bi-en { display: none !important; }
body.mode-zh .bi-zh {
  display: inline;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 0.96em;
  letter-spacing: 0;
}
body.mode-zh .bi-zh--block { display: block; }
body.mode-zh .hero__h1,
body.mode-zh .she__title,
body.mode-zh .cta__title,
body.mode-zh .pcard__name,
body.mode-zh .pitem__h,
body.mode-zh .step__t,
body.mode-zh .quote__text,
body.mode-zh .faq__q,
body.mode-zh .ecard__name {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  line-height: 1.28;
}
body.mode-zh .hero__h1 { font-size: clamp(30px, 3.7vw, 50px); }
body.mode-zh .hero__h1-b { color: var(--red); }
body.mode-zh .she__title { line-height: 1.3; }
body.mode-zh .tbl--maths tbody td,
body.mode-zh .tbl--maths tbody th { font-family: "Noto Sans SC", sans-serif; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .wrap { padding: 0 32px; }
  .nav__inner { padding: 0 32px; }
  .hero__grid { gap: 48px; }
  .price__grid, .factory__grid, .entities__grid, .running__grid { gap: 48px; }
  .nav__links { gap: 22px; }
}

@media (max-width: 1000px) {
  .section { padding: 84px 0; }
  .maths, .cta { padding: 84px 0; }

  .hero { padding: 112px 0 64px; }
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .hero__fig { max-width: 560px; margin: 0 auto; width: 100%; }
  .hero__lede, .hero__lede--sm { max-width: none; }

  .facts__grid { grid-template-columns: repeat(3, 1fr); }
  .fact { padding: 18px 20px; border-left: 1px solid var(--line-soft); }
  .fact:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .fact:nth-child(-n + 3) { padding-top: 0; }
  .fact:nth-child(n + 4) { border-top: 1px solid var(--line-soft); }

  .fleet { grid-template-columns: repeat(2, 1fr); }
  .price__grid, .factory__grid, .entities__grid, .running__grid { grid-template-columns: 1fr; }
  .price__left { position: static; }
  .venues__grid { grid-template-columns: 1fr; gap: 28px; }
  .maths__grid { grid-template-columns: 1fr; gap: 34px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  .quotes { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav__inner { height: auto; padding: 12px 24px 10px; flex-wrap: wrap; row-gap: 10px; }
  .nav__links {
    order: 3;
    width: 100%;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { font-size: 12px; white-space: nowrap; }
  .nav__menu, .nav__caret { display: none; }
  .hero { padding-top: 124px; }
  .shots { grid-template-columns: 1fr 1fr; }
  .shots .shot:last-child { grid-column: 1 / -1; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  body { overflow-x: hidden; }
  .wrap { padding: 0 20px; }
  .nav__inner { padding: 12px 20px 10px; gap: 8px; column-gap: 8px; }
  .logo { gap: 8px; }
  .logo__rule { width: 3px; height: 24px; }
  .logo__name { font-size: 12.5px; letter-spacing: 0.07em; }
  .logo__sub { font-size: 6.5px; letter-spacing: 0.26em; margin-top: 4px; }
  .nav__right { gap: 8px; }
  .lpick__btn { height: 34px; padding: 0 10px 0 9px; gap: 6px; font-size: 10.5px; }
  .lpick__globe { width: 12.5px; height: 12.5px; }
  .lpick__flag { width: 15px; height: 11px; }
  .lpick__menu { width: 218px; }
  .btn--sm { padding: 9px 12px; font-size: 10.5px; }
  .section { padding: 64px 0; }
  .maths, .cta { padding: 64px 0; }
  .hero { padding: 118px 0 48px; }
  .hero__h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero__lede { font-size: 15px; }
  .hero__plate { padding: 26px 20px 32px; }
  .hero__specs { margin: -18px 10px 0; }
  .hero__spec { padding: 10px 9px; min-width: 0; }
  .hero__spec-k { font-size: 8px; letter-spacing: 0.08em; }
  .hero__spec-v { font-size: 12px; white-space: nowrap; }
  .hero__cta .btn, .cta__btns .btn { flex: 1 1 100%; }

  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .fact { padding: 16px 14px; }
  .fact:nth-child(3n + 1) { padding-left: 14px; border-left: 1px solid var(--line-soft); }
  .fact:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .fact__num { font-size: 27px; }

  .fleet { grid-template-columns: 1fr; }
  .pcard__media { padding: 20px 18px 10px; }

  .tbl--maths thead { display: none; }
  .tbl--maths tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(246, 241, 232, 0.13);
  }
  .tbl--maths tbody th {
    grid-column: 1 / -1;
    border: 0;
    padding: 0 0 8px;
    font-size: 16px;
  }
  .tbl--maths tbody td {
    border: 0;
    padding: 4px 0;
    font-size: 14px;
    white-space: normal;
  }
  .tbl--maths tbody td::before {
    content: attr(data-l);
    display: block;
    font-family: var(--font-text);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cream-3);
    margin-bottom: 2px;
  }

  .steps { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .shot img { height: 220px; }
  .shots .shot:last-child { grid-column: auto; }
  .factory__shots { grid-template-columns: 1fr; }
  .pitem { grid-template-columns: 1fr; gap: 6px; }
  .pitem__n { padding-top: 0; }

  .faq__a { padding-right: 24px; }
  .faq__q { font-size: 15.5px; }

  .footer__top, .footer__cols { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bigcost__num { font-size: 64px; }
}

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

/* ==========================================================================
   DREAM LAYER — aurora wash, gradient accents, glass surfaces
   (appended after the structural rules so it wins on equal specificity)
   ========================================================================== */

/* ---- page wash ---- */
body {
  background:
    radial-gradient(900px 620px at 8% -6%, #FFE0D2 0%, rgba(255, 224, 210, 0) 62%),
    radial-gradient(1000px 700px at 92% -10%, #E3D8FF 0%, rgba(227, 216, 255, 0) 64%),
    radial-gradient(1100px 800px at 78% 42%, #D8F2FF 0%, rgba(216, 242, 255, 0) 60%),
    radial-gradient(900px 700px at 4% 68%, #FFE7F3 0%, rgba(255, 231, 243, 0) 58%),
    #F7F5FC;
  background-attachment: fixed;
}

/* ---- scrollbar ---- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(23, 19, 42, 0.04); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E84C3D 0%, #F268A8 52%, #7C5CFC 100%);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #F268A8 0%, #7C5CFC 100%);
  background-clip: padding-box;
}
html { scrollbar-width: thin; scrollbar-color: #C86CE0 rgba(23, 19, 42, 0.05); }

/* ---- nav ---- */
.nav { background: rgba(247, 245, 252, 0.78); }
.nav.is-stuck { box-shadow: 0 12px 34px -26px rgba(58, 32, 120, 0.55); }

/* ---- gradient type ---- */
.hero__h1-b .bi-en,
.hero__h1-b .bi-zh {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow__dot {
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(226, 110, 160, 0.14);
}

/* ---- buttons ---- */
.btn--red {
  background: var(--grad);
  background-size: 150% 100%;
  background-position: 0% 50%;
  box-shadow: 0 12px 30px -14px rgba(200, 60, 140, 0.75);
}
.btn--red:hover {
  background-position: 100% 50%;
  box-shadow: 0 18px 38px -16px rgba(124, 92, 252, 0.6);
}
.btn--ink { background: var(--ink); }
.btn--line { background: rgba(255, 255, 255, 0.55); }

/* ---- hero plate ---- */
.hero__plate {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255, 214, 226, 0.85) 0%, rgba(255, 214, 226, 0) 55%),
    linear-gradient(158deg, #FDFBFF 0%, #F0E9FF 48%, #E2F1FF 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 40px 90px -48px rgba(80, 44, 160, 0.55);
}
.hero__specs { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); }

/* ---- cards / panels ---- */
.pcard, .ecard, .quote, .casecard, .bigcost, .term {
  background: var(--card);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 40px -30px rgba(58, 32, 120, 0.42);
}
.pcard:hover {
  border-color: rgba(160, 120, 255, 0.55);
  box-shadow: 0 26px 60px -34px rgba(90, 46, 190, 0.55);
}
.pcard__media {
  background:
    radial-gradient(120% 100% at 50% 0%, #FDF7FF 0%, #F2EAFF 55%, #E9F3FF 100%);
}

/* ---- dark bands ---- */
.maths, .cta { background: var(--deep); }
.maths::before, .cta::before {
  background: radial-gradient(circle, rgba(124, 92, 252, 0.34), rgba(232, 76, 61, 0.10) 55%, rgba(26, 20, 54, 0) 72%);
}
.maths::after {
  content: "";
  position: absolute;
  right: -180px; bottom: -220px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 76, 61, 0.22), rgba(26, 20, 54, 0) 70%);
  pointer-events: none;
}
.footer { background: #150F2B; }
.tbl--maths .tbl__hi { color: #FFB4C8; }

/* ---- tint band ---- */
.section--tint {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.5));
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

/* ---- link arrow ---- */
.link-arrow { border-bottom-color: rgba(232, 76, 61, 0.3); }
.link-arrow:hover { border-color: var(--pink); }

/* =============================== advantage =============================== */
.adv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(23, 19, 42, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 26px 60px -44px rgba(58, 32, 120, 0.5);
}
.adv__item {
  background: rgba(255, 255, 255, 0.78);
  padding: 34px 32px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  transition: background 0.3s ease;
}
.adv__item:hover { background: rgba(255, 255, 255, 0.95); }
.adv__n {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-top: 5px;
}
.adv__h {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-bottom: 10px;
}
.adv__p { font-size: 14px; line-height: 1.82; color: var(--ink-2); }

.terms {
  margin-top: 24px;
  padding: 30px 32px 28px;
  border-radius: 24px;
  background: var(--grad-soft);
  border: 1px solid rgba(160, 120, 255, 0.22);
}
.terms__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.terms__grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.term { padding: 18px 18px 16px; border-radius: 16px; }
.term__k {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.term__v { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.terms__note { margin-top: 18px; font-size: 13px; line-height: 1.8; color: var(--ink-2); max-width: 880px; }

/* ================================ cases ================================= */
.she--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.she--row .she__intro { margin-bottom: 0; }
.cases__ctrl { display: flex; gap: 8px; flex: 0 0 auto; padding-bottom: 4px; }
.cases__btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-2);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.22s ease;
}
.cases__btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cases__btn:disabled { opacity: 0.35; cursor: default; }
.cases__btn:disabled:hover { background: rgba(255, 255, 255, 0.72); color: var(--ink-2); border-color: var(--line); }

.cases { position: relative; }
.cases__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 392px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cases__track::-webkit-scrollbar { display: none; }

.casecard {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  overflow: hidden;
}
.casecard__media { position: relative; }
.casecard__media img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  filter: saturate(0.95);
}
.casecard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 20, 54, 0) 45%, rgba(26, 20, 54, 0.28));
}
.casecard__body {
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.casecard__metric {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.casecard__quote {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink);
}
.casecard__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.casecard__foot b { font-size: 13.5px; }
.casecard__where { font-size: 11px; color: var(--ink-3); text-align: right; }

.cases__dots { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.cases__dots button {
  width: 7px; height: 7px;
  border: 0; padding: 0;
  border-radius: 999px;
  background: rgba(23, 19, 42, 0.16);
  cursor: pointer;
  transition: all 0.25s ease;
}
.cases__dots button.is-active { width: 26px; background: var(--grad); }

@media (max-width: 1000px) {
  .adv { grid-template-columns: 1fr; }
  .terms__grid { grid-template-columns: 1fr 1fr; }
  .she--row { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 620px) {
  .adv__item { grid-template-columns: 1fr; padding: 26px 22px; }
  .adv__n { padding-top: 0; }
  .terms { padding: 22px; }
  .terms__grid { grid-template-columns: 1fr; }
  .cases__track { grid-auto-columns: 84vw; }
  .casecard__media img { height: 170px; }
}

/* ============================== faq polish ============================== */
.faq__item { border-color: var(--line); transition: background 0.3s ease; }
.faq__item[open] {
  background: linear-gradient(90deg, rgba(232, 76, 61, 0.045), rgba(124, 92, 252, 0.055));
  border-radius: 14px;
  padding: 0 18px;
  margin: 0 -18px;
}
.faq__item[open] .faq__icon::before { background: var(--grad); }
.faq__item[open] .faq__q { color: var(--ink); }
.faq__q { transition: color 0.2s ease; }

/* ==========================================================================
   STAGE HERO — company front page: one dark room, the whole fleet on the floor
   ========================================================================== */
.stage {
  position: relative;
  overflow: hidden;
  padding: 126px 0 30px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--cream);
  background:
    radial-gradient(120% 80% at 50% 4%, #3D2079 0%, rgba(61, 32, 121, 0) 58%),
    radial-gradient(70% 50% at 50% 104%, rgba(124, 92, 252, 0.55) 0%, rgba(124, 92, 252, 0) 62%),
    radial-gradient(50% 40% at 12% 88%, rgba(232, 76, 61, 0.30) 0%, rgba(232, 76, 61, 0) 70%),
    linear-gradient(180deg, #090615 0%, #120A2B 46%, #1B0F3E 100%);
}

/* radiating beams from the vanishing point under the floor */
.stage__rays {
  position: absolute;
  left: -12%; right: -12%;
  top: -6%; bottom: -12%;
  background: repeating-conic-gradient(from 176deg at 50% 118%,
    rgba(150, 118, 255, 0.16) 0deg 1.1deg,
    rgba(150, 118, 255, 0) 1.1deg 7.5deg);
  -webkit-mask-image: radial-gradient(58% 66% at 50% 108%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 76%);
  mask-image: radial-gradient(58% 66% at 50% 108%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 76%);
  opacity: 0.85;
  pointer-events: none;
}

/* pooled light on the floor */
.stage__floor {
  position: absolute;
  left: 50%; bottom: -22%;
  width: 118%; height: 58%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(206, 182, 255, 0.55) 0%, rgba(124, 92, 252, 0.20) 40%, rgba(27, 15, 62, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, 0) 40%, rgba(6, 4, 16, 0.72) 100%);
  pointer-events: none;
}

.stage__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 10px;
}

.stage__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 244, 255, 0.55);
  margin-bottom: 24px;
}
.stage__eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 244, 255, 0.45));
}

.stage__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.9vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.032em;
  font-weight: 700;
  text-wrap: balance;
}
.stage__t1 { display: block; color: #FBF7FF; }
.stage__t2 { display: block; }
.stage__t2 .bi-en,
.stage__t2 .bi-zh {
  background: linear-gradient(104deg, #FF7C6B 0%, #F58CD6 42%, #9D86FF 78%, #6FD8F0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stage__sub {
  margin: 24px auto 0;
  max-width: 660px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(248, 244, 255, 0.78);
}
.stage__sub--sm {
  margin-top: 12px;
  max-width: 620px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(248, 244, 255, 0.46);
}

.stage__cta {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.stage__cta .btn--ghost {
  border-color: rgba(248, 244, 255, 0.26);
  background: rgba(248, 244, 255, 0.06);
  color: #FBF7FF;
}
.stage__cta .btn--ghost:hover { background: rgba(248, 244, 255, 0.14); border-color: rgba(248, 244, 255, 0.5); }

.stage__meta {
  margin-top: 26px;
  display: flex;
  gap: 10px 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.stage__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(248, 244, 255, 0.52);
}
.stage__meta li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF7C6B, #9D86FF);
}

/* --------- the fleet on the floor ----------
   四台一排、八款机型无缝向左循环；鼠标移入或键盘聚焦即暂停，减少动态偏好下不动。 */
.stage__fleet {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  padding: 0 clamp(16px, 4vw, 56px);
}

.fleet__viewport {
  container-type: inline-size;
  max-width: 1240px;
  margin: 0 auto;
  overflow: hidden;
  padding: 6px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.stage__strip {
  --mvis: 4;
  --mgap: clamp(12px, 1.5vw, 26px);
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: fleet-glide 54s linear infinite;
  will-change: transform;
}
@keyframes fleet-glide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .stage__strip { animation: none; }
}

.mcard {
  flex: 0 0 auto;
  /* 四台一排：一格宽度 =（容器宽 − 三个间距）÷ 4，右侧留一个间距给下一台 */
  width: calc((100vw - 2 * clamp(16px, 4vw, 56px) - (var(--mvis) - 1) * var(--mgap)) / var(--mvis));
  width: calc((100cqw - (var(--mvis) - 1) * var(--mgap)) / var(--mvis));
  margin: 0 var(--mgap) 0 0;
  position: relative;
  /* 不用白底：一圈细边 + 顶沿一道高光，机器像摆在灯下的展柜里 */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  background:
    /* 机器底部一团柔光，像展柜里的射灯，空出来的两侧才不显得空 */
    radial-gradient(58% 40% at 50% 76%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 46px -34px rgba(0, 0, 0, 0.9);
  padding: 20px 18px 0;
  transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease;
}
.mcard:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(58% 40% at 50% 76%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  transform: translateY(-4px);
}
.mcard img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 22px rgba(3, 2, 10, 0.45));
}
.mcard__cap {
  margin: 8px 0 14px;
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248, 244, 255, 0.42);
}
.mcard__cap b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(251, 247, 255, 0.92);
}

/* ---------- nav over the dark stage ----------
   注意：每条规则都要把 body.page-home / body.page-dark 两个前缀写全并各自带上后代选择器。
   之前写成 `A, B .child` 会让 A 直接命中导航本身，把按钮的 background:#fff 灌到导航上。 */
body.page-home .nav:not(.is-stuck),
body.page-dark .nav:not(.is-stuck) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

body.page-home .nav:not(.is-stuck) .logo__name,
body.page-dark .nav:not(.is-stuck) .logo__name { color: #FBF7FF; }

body.page-home .nav:not(.is-stuck) .logo__sub,
body.page-dark .nav:not(.is-stuck) .logo__sub { color: rgba(248, 244, 255, 0.5); }

body.page-home .nav:not(.is-stuck) .nav__links a,
body.page-dark .nav:not(.is-stuck) .nav__links a { color: rgba(248, 244, 255, 0.68); }

body.page-home .nav:not(.is-stuck) .nav__links a:hover,
body.page-dark .nav:not(.is-stuck) .nav__links a:hover { color: #fff; }
body.page-home .nav:not(.is-stuck) .nav__links .nav__menu a,
body.page-dark .nav:not(.is-stuck) .nav__links .nav__menu a { color: var(--ink); }
body.page-home .nav:not(.is-stuck) .nav__links .nav__menu a:hover,
body.page-dark .nav:not(.is-stuck) .nav__links .nav__menu a:hover { color: var(--ink); }

body.page-home .nav:not(.is-stuck) .lpick__btn,
body.page-dark .nav:not(.is-stuck) .lpick__btn {
  border-color: rgba(248, 244, 255, 0.2);
  background: rgba(248, 244, 255, 0.06);
  color: rgba(248, 244, 255, 0.86);
}

body.page-home .nav:not(.is-stuck) .lpick__globe,
body.page-dark .nav:not(.is-stuck) .lpick__globe,
body.page-home .nav:not(.is-stuck) .lpick__chev,
body.page-dark .nav:not(.is-stuck) .lpick__chev { color: rgba(248, 244, 255, 0.55); }

body.page-home .nav:not(.is-stuck) .btn--ink,
body.page-dark .nav:not(.is-stuck) .btn--ink { background: #FBF7FF; color: #17132A; }

body.page-home .nav:not(.is-stuck) .btn--ink:hover,
body.page-dark .nav:not(.is-stuck) .btn--ink:hover { background: #fff; }

@media (max-width: 900px) {
  .stage { min-height: auto; padding-top: 118px; }
  .stage__title { font-size: clamp(30px, 7vw, 42px); }
  .stage__strip { --mvis: 2.35; }
  .stage__fleet { padding: 0 16px; }
}
@media (max-width: 620px) {
  .stage__sub { font-size: 13.5px; }
  .stage__cta .btn { flex: 1 1 100%; }
  .stage__strip { --mvis: 1.7; }
  .mcard__cap { font-size: 9px; }
}

/* Very tall viewports (or full-page screenshots): let the stage size to content
   instead of stretching to a full 100vh. */
@media (min-height: 1100px) {
  .stage { min-height: auto; padding-bottom: 40px; }
}

/* ==========================================================================
   INNER PAGES — shared page header, prose, tables, calculator
   ========================================================================== */
.phero {
  position: relative;
  padding: 150px 0 64px;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(255, 210, 190, 0.55) 0%, rgba(255, 210, 190, 0) 60%),
    radial-gradient(70% 90% at 88% 0%, rgba(206, 190, 255, 0.55) 0%, rgba(206, 190, 255, 0) 62%),
    transparent;
}
.phero__inner { max-width: 880px; }
.phero__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.phero__crumbs a:hover { color: var(--red); }
.phero__crumbs span[aria-hidden] { opacity: 0.45; }
.phero__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}
.phero__lede {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 720px;
}
.phero__meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.phero__meta li {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.band { padding: 78px 0; }
.band--tight { padding: 54px 0; }
.band--tint { background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.52)); border-top: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.7); }

.prose p { font-size: 15px; line-height: 1.88; color: var(--ink-2); margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); }

/* --- FAQ groups --- */
.faqwrap { display: grid; grid-template-columns: 232px 1fr; gap: 56px; align-items: start; }
.faqnav { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 4px; }
.faqnav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 9px 14px;
  border-radius: 10px;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}
.faqnav a:hover, .faqnav a.is-active {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border-left-color: var(--red);
}
.faqgroup { margin-bottom: 46px; scroll-margin-top: 110px; }
.faqgroup__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.qitem { border-bottom: 1px solid var(--line); }
.qitem summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.qitem summary::-webkit-details-marker { display: none; }
.qitem__q { font-size: 15px; font-weight: 600; line-height: 1.5; }
.qitem__q:hover { color: var(--red); }
.qitem[open] .qitem__q { color: var(--red); }
.qitem__a { padding: 0 40px 20px 0; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.qitem__icon { position: relative; width: 14px; height: 14px; flex: 0 0 auto; margin-top: 5px; }
.qitem__icon::before, .qitem__icon::after {
  content: ""; position: absolute; background: var(--ink-3); transition: transform .25s ease;
}
.qitem__icon::before { left: 0; right: 0; top: 6px; height: 1.5px; }
.qitem__icon::after { top: 0; bottom: 0; left: 6px; width: 1.5px; }
.qitem[open] .qitem__icon::after { transform: scaleY(0); }
.qitem[open] .qitem__icon::before { background: var(--red); }

/* --- comparison table --- */
.ctable-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.6); }
.ctable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 780px; }
.ctable th, .ctable td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.ctable thead th {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  background: rgba(255,255,255,.72);
  position: sticky; top: 0;
}
.ctable tbody tr:hover { background: rgba(255,255,255,.75); }
.ctable tbody th { font-weight: 600; font-size: 13px; }
.ctable .num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* --- chips / filters --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbtn {
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s ease;
}
.chipbtn:hover { border-color: var(--ink-3); color: var(--ink); }
.chipbtn.is-active {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px -14px rgba(200, 60, 140, .8);
}
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* --- calculator --- */
.calcbox {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 2px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(23,19,42,.08);
  box-shadow: 0 30px 70px -50px rgba(58,32,120,.5);
}
.calcbox__side { background: rgba(255,255,255,.82); padding: 34px 32px; }
.calcbox__out {
  background: linear-gradient(155deg, #1B1436 0%, #2A1A4F 60%, #3A1E52 100%);
  color: var(--cream);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* ---------- homepage profit calculator ---------- */
.calcbox--home { margin-top: 34px; }
.calc__model {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.calc__model-k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.calc__model b { font-family: var(--font-display); font-size: 25px; letter-spacing: -.02em; color: var(--ink); }
.calc__model-p { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.calc__model-p i { font-style: normal; font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3); margin-left: 5px; }
.calc__model-note { margin: 0 0 20px; font-size: 11.5px; line-height: 1.65; color: var(--ink-3); }
.calc__plabel { margin: 0 0 10px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.calc__presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 26px; }
.calcchip {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid rgba(23, 19, 42, 0.12); background: rgba(255, 255, 255, 0.72);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.calcchip b { font-size: 12px; font-weight: 700; color: var(--ink); }
.calcchip__n { font-size: 10.5px; color: var(--ink-3); }
.calcchip:hover { border-color: rgba(23, 19, 42, 0.24); }
.calcchip.is-active { border-color: transparent; background: var(--grad); box-shadow: 0 10px 22px -16px rgba(124, 92, 252, .8); }
.calcchip.is-active b, .calcchip.is-active .calcchip__n { color: #fff; }
.calc__note { margin: 4px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--cream-3); }

@media (max-width: 430px) {
  .calc__presets { gap: 6px; }
  .calcchip { padding: 9px 9px; }
  .calcchip b { font-size: 11px; }
  .calcchip__n { font-size: 9.5px; white-space: nowrap; }
}

.field { margin-bottom: 22px; }
.field:last-child { margin-bottom: 0; }
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.field__label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field__val {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.field input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--pink), var(--violet));
  outline: none;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(23,19,42,.25);
}
.field input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); cursor: pointer;
}
.field select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}
.outrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(248,244,255,.12); }
.outrow:last-of-type { border-bottom: 0; padding-bottom: 0; }
.outrow__k { font-size: 12px; color: var(--cream-3); letter-spacing: 0.02em; }
.outrow__v { font-family: var(--font-display); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.outbig {
  margin-top: 6px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(248,244,255,.16);
}
.outbig__k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-3); }
.outbig__v {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(104deg, #FF9C86, #F58CD6 55%, #9D86FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.outbig__s { display: block; margin-top: 8px; font-size: 11.5px; color: var(--cream-3); }

/* --- how it works steps (reuse) --- */
.mini-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

@media (max-width: 1000px) {
  .faqwrap { grid-template-columns: 1fr; gap: 28px; }
  .faqnav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .mgrid { grid-template-columns: repeat(2, 1fr); }
  .calcbox { grid-template-columns: 1fr; }
  .mini-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .phero { padding: 128px 0 44px; }
  .band { padding: 56px 0; }
  .mgrid { grid-template-columns: 1fr; }
  .mini-steps { grid-template-columns: 1fr; }
  .calcbox__side, .calcbox__out { padding: 24px 20px; }
  .outbig__v { font-size: 36px; }
}

/* --- cotton candy model rows --- */
.mrow {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.mrow:first-of-type { border-top: 0; padding-top: 0; }
.mrow__head { position: sticky; top: 110px; align-self: start; }
.mrow__code {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mrow__name {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.mrow__price {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mrow__price em { font-style: normal; font-size: 10px; letter-spacing: .12em; color: var(--ink-3); margin-left: 5px; }
.mspecs { margin-top: 16px; display: grid; gap: 7px; }
.mspecs > div { display: flex; justify-content: space-between; gap: 14px; font-size: 11.5px; border-bottom: 1px dashed var(--line-soft); padding-bottom: 6px; }
.mspecs dt { color: var(--ink-3); }
.mspecs dd { margin: 0; font-weight: 600; text-align: right; }
.mrow__body p { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.mrow__best {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--grad-soft);
  border: 1px solid rgba(160,120,255,.16);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}
.mrow__best b { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }

@media (max-width: 900px) {
  .mrow { grid-template-columns: 1fr; gap: 18px; }
  .mrow__head { position: static; }
}

.points li:only-child { padding: 22px 0; border-bottom: 0; }
.points li:only-child b { font-size: 56px; min-width: 96px; }
.points li:only-child span { font-size: 14px; line-height: 1.6; }

/* ==========================================================================
   LANDING LAYOUT — product hero, model switcher, photo walls
   ========================================================================== */
.lhero {
  position: relative;
  overflow: hidden;
  padding: 128px 0 0;
  color: var(--cream);
  background:
    radial-gradient(120% 80% at 50% 0%, #3D2079 0%, rgba(61,32,121,0) 58%),
    radial-gradient(70% 50% at 50% 108%, rgba(124,92,252,.5) 0%, rgba(124,92,252,0) 62%),
    linear-gradient(180deg, #090615 0%, #120A2B 50%, #1B0F3E 100%);
}
.lhero__rays {
  position: absolute; inset: -6% -12% -12%;
  background: repeating-conic-gradient(from 176deg at 50% 118%,
    rgba(150,118,255,.15) 0deg 1.1deg, rgba(150,118,255,0) 1.1deg 7.5deg);
  -webkit-mask-image: radial-gradient(58% 66% at 50% 108%, #000 0%, transparent 76%);
  mask-image: radial-gradient(58% 66% at 50% 108%, #000 0%, transparent 76%);
  pointer-events: none;
}
.lhero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px;
  align-items: center;
  padding-bottom: 48px;
}
.lhero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.05; letter-spacing: -.032em; font-weight: 700;
  color: #FBF7FF; text-wrap: balance;
}
.lhero__title em {
  font-style: normal;
  background: linear-gradient(104deg,#FF7C6B,#F58CD6 45%,#9D86FF 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lhero__lede { margin-top: 20px; max-width: 540px; font-size: 15px; line-height: 1.8; color: rgba(248,244,255,.78); }
.lhero__price {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px;
}
.lhero__price li {
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(248,244,255,.22);
  background: rgba(248,244,255,.07);
  font-size: 12px; font-weight: 600; color: rgba(248,244,255,.9);
}
.lhero__price b { font-family: var(--font-display); font-weight: 700; color: #fff; }
.lhero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.lhero__meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11px; color: rgba(248,244,255,.5); }
.lhero__meta li::before { content: "·"; margin-right: 8px; color: #F58CD6; }

.lhero__stage { position: relative; }
.lhero__plate {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(90% 70% at 72% 0%, rgba(255,188,214,.32) 0%, rgba(255,188,214,0) 60%),
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(124,92,252,.16));
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.8);
  padding: 30px 26px 34px;
  backdrop-filter: blur(6px);
}
.lhero__plate img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); }
.lhero__badge {
  position: absolute; top: 16px; left: 16px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(9,6,21,.55); border: 1px solid rgba(255,255,255,.2);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #FBF7FF;
  backdrop-filter: blur(8px);
}
.lhero__card {
  position: absolute; right: -10px; bottom: 18px;
  background: rgba(255,255,255,.94); color: var(--ink);
  border-radius: 16px; padding: 14px 16px; min-width: 178px;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.7);
}
.lhero__card span { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lhero__card b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; }
.lhero__card i { font-style: normal; font-size: 10px; color: var(--ink-3); }

/* quick facts under hero */
.lstrip { background: rgba(9,6,21,.96); border-top: 1px solid rgba(255,255,255,.08); }
.lstrip__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.lstrip__i { padding: 22px 18px; border-left: 1px solid rgba(255,255,255,.08); }
.lstrip__i:first-child { border-left: 0; padding-left: 0; }
.lstrip__i b { display: block; font-family: var(--font-display); font-size: 24px; color: #FBF7FF; letter-spacing: -.02em; }
.lstrip__i span { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .04em; color: rgba(248,244,255,.45); }

/* model switcher */
.switch { display: grid; grid-template-columns: 232px 1fr; gap: 44px; align-items: start; }
.switch__tabs { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 6px; }
.switch__tab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: all .2s ease;
}
.switch__tab:hover { background: rgba(255,255,255,.65); color: var(--ink); }
.switch__tab.is-active {
  background: rgba(255,255,255,.92);
  border-color: rgba(160,120,255,.35);
  box-shadow: 0 14px 30px -24px rgba(58,32,120,.6);
  color: var(--ink);
}
.switch__tab i { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-family: var(--font-text); font-weight: 600; }

.panel { display: none; }
.panel.is-active { display: block; animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 40px; align-items: start; }
.panel__stage {
  border-radius: 22px; border: 1px solid rgba(255,255,255,.9);
  background: radial-gradient(120% 100% at 50% 0%, #FDF8FF 0%, #F1E9FF 55%, #E7F3FF 100%);
  padding: 26px;
  box-shadow: 0 26px 60px -44px rgba(58,32,120,.5);
}
.panel__stage img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; }
.panel__code { font-size: 10px; font-weight: 700; letter-spacing: .16em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel__name { margin-top: 8px; font-family: var(--font-display); font-size: 26px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
.panel__price { margin-top: 8px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--red); }
.panel__price em { font-style: normal; font-size: 10px; letter-spacing: .12em; color: var(--ink-3); margin-left: 5px; }
.panel__specs { margin-top: 18px; display: grid; gap: 8px; }
.panel__specs > div { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; padding-bottom: 7px; border-bottom: 1px dashed var(--line-soft); }
.panel__specs dt { color: var(--ink-3); }
.panel__specs dd { margin: 0; font-weight: 600; }
.panel__best {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: var(--grad-soft); border: 1px solid rgba(160,120,255,.16);
  font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
}
.panel__best b { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.panel__prose { margin-top: 16px; font-size: 14px; line-height: 1.82; color: var(--ink-2); }

/* photo walls */
.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wall figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.wall img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.96); transition: transform .5s ease; }
.wall figure:hover img { transform: scale(1.04); }
.wall figcaption {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 10.5px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.wall figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,6,24,.55)); }
.wall--tall figure:nth-child(1) { grid-row: span 2; }
.wall .tall { grid-row: span 2; }

.build { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.build__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.build__pics figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.build__pics img { width: 100%; height: 190px; object-fit: cover; display: block; }
.build__pics figcaption { padding: 8px 12px; font-size: 10.5px; color: var(--ink-3); background: rgba(255,255,255,.7); }

@media (max-width: 1000px) {
  .lhero__grid { grid-template-columns: 1fr; gap: 34px; }
  .lhero__stage { max-width: 460px; }
  .lstrip__grid { grid-template-columns: repeat(3, 1fr); }
  .lstrip__i { padding: 16px 14px; }
  .lstrip__i:nth-child(3n+1) { border-left: 0; }
  .switch { grid-template-columns: 1fr; gap: 22px; }
  .switch__tabs { position: static; flex-direction: row; flex-wrap: wrap; }
  .switch__tab { padding: 9px 12px; font-size: 12px; }
  .panel__grid { grid-template-columns: 1fr; }
  .wall { grid-template-columns: 1fr 1fr; }
  .build { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .lhero { padding-top: 112px; }
  .lstrip__grid { grid-template-columns: 1fr 1fr; }
  .lhero__card { position: static; margin-top: 14px; }
  .wall { grid-template-columns: 1fr; }
  .build__pics { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ABOUT — image-led company page
   ========================================================================== */
.ahero {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: flex-end;
  padding: 150px 0 62px;
  color: #fff;
  overflow: hidden;
}
.ahero__bg { position: absolute; inset: 0; }
.ahero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.85); }
.ahero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,6,24,.86) 0%, rgba(10,6,24,.28) 42%, rgba(10,6,24,.94) 100%);
}
.ahero__inner { position: relative; z-index: 2; max-width: 900px; }
.ahero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 700;
  color: #FBF7FF; text-wrap: balance;
}
.ahero__lede { margin-top: 18px; max-width: 660px; font-size: 15px; line-height: 1.8; color: rgba(248,244,255,.8); }
.ahero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.ahero__meta li {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
  font-size: 11.5px; font-weight: 600; color: rgba(248,244,255,.88);
}

.pull {
  margin: 0 0 28px;
  padding: 22px 0 22px 26px;
  border-left: 3px solid var(--red);
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.5; letter-spacing: -.01em;
  color: var(--ink);
}
.pull span { display: block; margin-top: 10px; font-family: var(--font-text); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .twocol { grid-template-columns: 1fr; gap: 22px; } }

/* --- scenarios / cases / certificates --- */
.scen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.scen__c {
  background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px -30px rgba(58,32,120,.42);
  display: flex; flex-direction: column;
}
.scen__c img { width: 100%; height: 158px; object-fit: cover; }
.scen__b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.scen__n { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.scen__best { font-size: 11.5px; color: var(--red); font-weight: 600; line-height: 1.5; }
.scen__t { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }

.casegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.casegrid .quote { padding: 0; overflow: hidden; }
.casegrid .quote img { width: 100%; height: 150px; object-fit: cover; }
.casegrid .quote__in { padding: 20px 22px 18px; }
.casegrid .casecard__metric { margin-bottom: 10px; }
.casegrid blockquote { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink); }
.casegrid .quote figcaption { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.casegrid .quote figcaption b { font-size: 12.5px; }
.casegrid .quote figcaption span { font-size: 11px; color: var(--ink-3); }

.cert { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.cert__c { background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; padding: 18px 18px 16px; }
.cert__m {
  display: inline-block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  padding: 4px 9px; border-radius: 6px; background: var(--grad-soft); color: var(--ink);
}
.cert__a { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.docs span { font-size: 11.5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--ink-2); }

@media (max-width: 1000px) {
  .scen, .casegrid, .cert { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .scen, .casegrid, .cert { grid-template-columns: 1fr; }
}
.casegrid .quote img.contain { object-fit: contain; padding: 16px; background: radial-gradient(120% 100% at 50% 0%, #FDF8FF, #EFF0FF); }

/* tall viewports: don't stretch the about hero to a full screen */
@media (min-height: 1100px) {
  .ahero { min-height: 620px; }
}

/* ==========================================================================
   MEDIA COMPONENTS — factory carousel, certificate carousel, case reel
   ========================================================================== */

/* --- dots shared by both sliders --- */
.sdots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sdots button {
  width: 22px; height: 3px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(23, 19, 42, 0.16); cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.sdots button:hover { background: rgba(23, 19, 42, 0.34); }
.sdots button.is-active { width: 34px; background: #E84C3D; }
.sdots--ink button { background: rgba(23, 19, 42, 0.14); }

/* --- factory carousel (home, who-you-sign-with) --- */
.fcar { margin: 0; align-self: center; }
.fcar__frame {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #fff;
}
.fcar__track {
  display: flex;
  will-change: transform;
  transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fcar__slide { flex: 0 0 100%; margin: 0; }
.fcar__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.fcar__slide figcaption {
  padding: 11px 16px 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* --- certificate carousel (home, factory side column) --- */
.certcar { margin-top: 22px; min-width: 0; }
.certcar__label {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.certcar__frame { overflow: hidden; }
.certcar__track {
  display: flex;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.certcar__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  align-items: start;
}
.certcard {
  margin: 0;
  min-width: 0;
  padding: 5px 5px 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}
.certcard img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1.414;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
}
.certcard figcaption { margin-top: 8px; padding: 0 2px; }
.certcard b {
  display: block;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.certcard span {
  display: block;
  margin-top: 2px;
  font-size: 8.5px;
  line-height: 1.35;
  color: var(--ink-3);
}

/* --- case reel: two rows, running opposite ways --- */
.reel { margin: 40px 0 30px; display: grid; gap: 14px; }
.reel__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.reel__track {
  display: flex;
  width: max-content;
  animation: reel-left 74s linear infinite;
  will-change: transform;
}
.reel__row--rev .reel__track { animation-name: reel-right; }
@keyframes reel-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes reel-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.reel__cell { flex: 0 0 auto; width: clamp(210px, 21vw, 320px); margin: 0 14px 0 0; }
.reel__cell img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  filter: saturate(0.94) contrast(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .reel__track { animation: none; }
}

@media (max-width: 900px) {
  .fcar { align-self: stretch; }
  .reel__cell { width: 210px; margin-right: 10px; }
}

@media (max-width: 620px) {
  .certcar__slide { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .certcard b { font-size: 10px; }
  .certcard span { font-size: 9px; }
}

/* --- factory: photo beside the copy + stat strip + certificate wall (home) --- */
.factory__side .fcar { margin-top: 4px; }

.fstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 54px 0 0;
}
.fstat { border-top: 1.5px solid var(--line); padding-top: 15px; }
.fstat b {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--red);
}
.fstat span { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

.certrail { margin-top: 56px; }
.certrail__head { margin-bottom: 18px; }
.certrail__label {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.certrail__note { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.certrail__dots { margin-top: 14px; }
.certrail__frame { overflow: hidden; }
.certrail__track {
  display: flex;
  will-change: transform;
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.certrail__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
  /* 右侧留 2px：最后一张卡的描边正好落在 overflow 裁剪线上会被切掉 */
  padding-right: 2px;
}
.certdoc {
  margin: 0;
  padding: 8px 8px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 22px 44px -34px rgba(58, 32, 120, 0.5);
}
.certdoc img {
  display: block;
  width: 100%;
  aspect-ratio: 520 / 735;
  object-fit: cover;
  border-radius: 7px 7px 0 0;
  background: #fff;
}
.certdoc figcaption { padding: 12px 8px 14px; }
.certdoc b {
  display: block;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.certdoc span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--ink-3); }

/* --- customer reviews (home): review wall --- */
.revhead { align-items: flex-end; }
.revscore {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 3px;
  padding: 13px 18px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -34px rgba(40, 24, 90, 0.5);
}
.revscore b {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.revscore__stars { display: flex; gap: 1px; color: #F2A93B; font-size: 11px; }
.revscore__stars i { font-style: normal; }
.revscore__l { font-style: normal; font-size: 10px; color: var(--ink-3); }

.revwall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 30px;
}
.revwall > .rev:nth-child(3n + 2) { margin-top: 26px; }
.rev {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: 20px;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(158deg, var(--acc-t) 0%, rgba(255, 255, 255, 0) 46%, var(--line) 100%) border-box;
  box-shadow: 0 26px 50px -44px rgba(40, 24, 90, 0.55);
  transition: transform .32s cubic-bezier(.2, .7, .3, 1), box-shadow .32s ease, border-color .32s ease;
}
.rev::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--acc) 0%, var(--acc) 20%, transparent 74%);
}
/* 右上角一层极淡的品牌色晕，避免大片纯白显得空 */
.rev::after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 62%;
  height: 120px;
  border-radius: 0 20px 0 60px;
  background: radial-gradient(120% 100% at 100% 0%, var(--acc-t) 0%, transparent 68%);
  opacity: .85;
  pointer-events: none;
}
.rev:hover {
  transform: translateY(-4px);
  border-color: var(--acc);
  box-shadow: 0 34px 58px -40px rgba(40, 24, 90, 0.5);
}
.rev__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rev__tag {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--acc-t);
  color: var(--acc);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rev__stars { display: flex; gap: 2px; flex: 0 0 auto; color: #EFA31C; font-size: 12px; position: relative; }
.rev__stars i { font-style: normal; }
.rev__q { margin: 16px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.rev__who { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 11px; }
.rev__ava {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 10px 20px -12px var(--acc);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--acc);
}
.rev__id { display: grid; gap: 2px; min-width: 0; }
.rev__id b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rev__role { font-size: 10.5px; line-height: 1.45; color: var(--ink-3); }

/* 中文：标签与正文单独放大一点，中文没有字距优势 */
body.mode-zh .rev__tag { font-size: 10.5px; letter-spacing: .04em; }
body.mode-zh .rev__q { font-size: 13.8px; line-height: 1.92; }
body.mode-zh .rev__role { font-size: 11px; }

@media (max-width: 1000px) {
  .fstats { grid-template-columns: 1fr 1fr; gap: 24px 28px; margin-top: 44px; }
  .fstat b { font-size: 28px; }
  .certrail__slide { grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (max-width: 1000px) {
  .revwall { grid-template-columns: 1fr 1fr; }
  .revwall > .rev:nth-child(3n + 2) { margin-top: 0; }
  .revwall > .rev:nth-child(2n) { margin-top: 22px; }
}
@media (max-width: 700px) {
  .revwall { grid-template-columns: 1fr; }
  .revwall > .rev:nth-child(2n) { margin-top: 0; }
  .revhead { flex-direction: column; align-items: flex-start; gap: 18px; }
  .revscore { justify-items: start; }
}
@media (max-width: 620px) {
  .fstats { gap: 20px 18px; margin-top: 38px; }
  .fstat b { font-size: 24px; }
  .certrail { margin-top: 42px; }
  .certdoc { padding: 5px 5px 0; }
  .certdoc figcaption { padding: 9px 5px 11px; }
  .certdoc b { font-size: 10.5px; }
  .certdoc span { font-size: 9.5px; }
}

/* ---- product video (cotton candy page) ---- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-top:30px}
.vcard{margin:0;border-radius:16px;overflow:hidden;background:#0d0a20;box-shadow:0 12px 34px rgba(26,20,54,.14)}
.vcard video{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#0d0a20}
.vcard figcaption{padding:9px 12px;font-size:12.5px;font-weight:600;color:#1a1436;background:#fff;min-height:44px}
.vnote{margin-top:16px;font-size:13px;color:#8b84a3}
.panel__flag{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e84c3d;background:rgba(232,76,61,.10);border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle}
.panel__watch{font-size:14px;font-weight:700;color:#e84c3d;text-decoration:none;border-bottom:1px solid rgba(232,76,61,.35)}

/* ==========================================================================
   ABOUT — company dossier
   ========================================================================== */

.abhero {
  position: relative;
  padding: 148px 0 64px;
  background:
    radial-gradient(90% 70% at 88% -10%, rgba(242, 104, 168, 0.13) 0%, rgba(242, 104, 168, 0) 60%),
    radial-gradient(70% 60% at 4% 10%, rgba(124, 92, 252, 0.10) 0%, rgba(124, 92, 252, 0) 62%),
    var(--paper);
}
.abhero__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 72px;
  align-items: start;
}
.abhero__eyebrow {
  margin: 26px 0 16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.abhero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(31px, 3.9vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
.abhero__lede {
  margin: 22px 0 0;
  max-width: 640px;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--ink-2);
}
.abchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.abchips li {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}

/* identity card */
.idcard {
  position: relative;
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.idcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad);
}
.idcard__logo { display: block; width: 168px; height: auto; margin-bottom: 20px; }
.idcard__label {
  margin: 0 0 18px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.idcard__ent { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.idcard__role {
  margin: 0 0 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.idcard__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.idcard__zh { margin: 3px 0 0; font-size: 12px; color: var(--ink-2); }
.idcard__addr { margin: 8px 0 0; font-size: 11px; line-height: 1.65; color: var(--ink-3); }
.idcard__foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* shared section shell */
.absec { padding: 74px 0; }
.absec--tint { background: #FBFAFE; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.abhead { max-width: 780px; margin-bottom: 38px; }
.abhead__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
.abhead__intro { margin: 14px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.abhead__kicker {
  margin: 0 0 18px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.abnote {
  margin: 26px 0 0;
  max-width: 760px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* three-column ledger */
.ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}
.ledger__col { padding: 24px 26px 4px 0; }
.ledger__col + .ledger__col { padding-left: 26px; border-left: 1px solid var(--line-soft); }
.ledger__k {
  margin: 0 0 16px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.ledger__list { margin: 0; padding: 0; list-style: none; }
.ledger__list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 15px;
  font-size: 13px;
  line-height: 1.78;
  color: var(--ink-2);
}
.ledger__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  line-height: 1.78;
}
.ledger__col--do .ledger__list li::before { content: "·"; color: var(--red); font-weight: 700; }
.ledger__col--no .ledger__list li::before { content: "—"; color: var(--ink-3); }
.ledger__col--ok .ledger__list li::before { content: "✓"; color: #2E9E6B; font-size: 11px; }

/* process rows */
.proc { border-top: 1px solid var(--line); }
.prow {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 64px;
  align-items: center;
  padding: 42px 0;
  border-bottom: 1px solid var(--line-soft);
}
.prow:nth-child(even) .prow__media { order: 2; }
.prow__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.prow__cap { margin: 10px 0 0; font-size: 10.5px; color: var(--ink-3); }
.prow__n {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
}
.prow__t {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}
.prow__d { margin: 0; max-width: 480px; font-size: 14px; line-height: 1.82; color: var(--ink-2); }

/* floor + stats */
.statband {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  gap: 56px;
  align-items: center;
}
.statband__fig { margin: 0; }
.statband__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.statband__fig figcaption { margin-top: 10px; font-size: 10.5px; color: var(--ink-3); }
.statlist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 28px;
  margin: 0;
}
.statitem { border-top: 1px solid var(--line); padding-top: 12px; }
.statitem__k {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.statitem__v { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

/* paperwork table */
.ptable { border-top: 1px solid var(--ink); }
.ptable__head,
.ptable__row {
  display: grid;
  grid-template-columns: 0.72fr 0.86fr 1.42fr;
  gap: 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ptable__head span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ptable__doc { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ptable__who { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.ptable__what { padding-right: 14px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }

/* documents */
.doclist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; border-top: 1px solid var(--ink); }
.docitem {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.docitem__n {
  flex: 0 0 auto;
  padding-top: 2px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.docitem__name { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.docitem__note { margin: 3px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }

/* roles */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rolecard {
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
}
.rolecard__role {
  margin: 0 0 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.rolecard__does { margin: 0; font-size: 13px; line-height: 1.78; color: var(--ink-2); }
.rolecard__limit {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
.rolecard__limitk {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--line-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 1080px) {
  .abhero__grid { gap: 44px; }
  .prow { gap: 40px; }
  .statband { gap: 36px; }
}

@media (max-width: 900px) {
  .abhero { padding: 118px 0 48px; }
  .abhero__grid { grid-template-columns: 1fr; gap: 34px; }
  .idcard { max-width: 520px; }
  .absec { padding: 52px 0; }
  .ledger { grid-template-columns: 1fr; border-top-width: 1px; }
  .ledger__col { padding: 20px 0 8px; }
  .ledger__col + .ledger__col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  .prow { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .prow:nth-child(even) .prow__media { order: 0; }
  .statband { grid-template-columns: 1fr; }
  .ptable__head { display: none; }
  .ptable__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0 18px; }
  .ptable__doc { font-size: 14px; }
  .doclist { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .abhero__title { font-size: clamp(27px, 8vw, 34px); }
  .abhero__lede { font-size: 14px; }
  .statlist { gap: 18px; }
  .statitem__k { font-size: 18px; }
}
/* ---- cotton candy v3 ---- */
body.page-dark .band{padding-top:58px;padding-bottom:58px}
body.page-dark .she{margin-bottom:6px}
.lhero--big .lhero__title{font-size:clamp(34px,4.2vw,54px);line-height:1.04;letter-spacing:-.02em}
.featgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.feat{background:#fff;border-radius:20px;padding:24px 20px;box-shadow:0 14px 40px rgba(26,20,54,.09);position:relative;overflow:hidden}
.feat:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#e84c3d,#f268a8,#7c5cfc)}
.feat b{display:block;font-size:40px;line-height:1;letter-spacing:-.03em;color:#1a1436}
.feat__u{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#8b84a3;margin:6px 0 12px}
.feat h3{font-size:16px;margin:0 0 6px;color:#1a1436}
.feat p{margin:0;font-size:13.5px;line-height:1.6;color:#4a4460}

/* 机型：上 3 下 2 居中 */
.modelgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:30px}
.pmcard{grid-column:span 2;position:relative;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(26,20,54,.11);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.pmcard:nth-child(4){grid-column:2 / span 2}
.pmcard:nth-child(5){grid-column:4 / span 2}
.pmcard:hover{transform:translateY(-4px);box-shadow:0 20px 54px rgba(26,20,54,.17)}
.pmcard--feat{outline:2px solid rgba(232,76,61,.55)}
.pmcard__flag{position:absolute;top:12px;left:12px;z-index:2;background:#e84c3d;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.pmcard__img{background:linear-gradient(160deg,#f7f4ff,#ffeef4);padding:16px 8px 0}
.pmcard__img img{display:block;width:100%;height:200px;object-fit:contain}
.pmcard__b{padding:16px 18px 20px;display:flex;flex-direction:column;gap:5px;flex:1}
.pmcard__code{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:#e84c3d}
.pmcard__b h3{font-size:16.5px;margin:0;color:#1a1436;line-height:1.32}
.pmcard__price{margin:2px 0 8px;font-size:22px;font-weight:800;color:#1a1436;letter-spacing:-.02em}
.pmcard__price em{font-style:normal;font-size:10.5px;font-weight:700;color:#8b84a3;margin-left:5px;letter-spacing:.08em}
.pmcard__specs{list-style:none;margin:0 0 10px;padding:0;border-top:1px solid #eee9f7}
.pmcard__specs li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #f4f0fb;font-size:12.5px;color:#6a6382}
.pmcard__specs b{color:#1a1436}
.pmcard__note{margin:0;font-size:13px;line-height:1.58;color:#4a4460}
.pmcard__watch{margin-top:10px;font-size:12.5px;font-weight:800;color:#e84c3d;text-decoration:none}

/* 计算器（对标示例一笔的布局） */
.calcwrap{display:grid;grid-template-columns:1fr 460px;gap:56px;align-items:start}
.calc__bullets{list-style:none;margin:20px 0 0;padding:0}
.calc__bullets li{position:relative;padding-left:24px;margin-bottom:10px;font-size:14.5px;color:#2c2545}
.calc__bullets li:before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:rgba(232,76,61,.16);box-shadow:inset 0 0 0 3px #e84c3d}
.costnote{margin-top:16px;font-size:13.5px;line-height:1.7;color:#6a6382}
.calccard{background:#fff;border-radius:24px;padding:22px 24px 18px;box-shadow:0 26px 64px rgba(26,20,54,.16)}
.calc__head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px;padding-bottom:12px;border-bottom:1px dashed #e8e2f4}
.calc__head span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#e84c3d}
.calc__head b{font-size:15px;color:#1a1436}
.calc__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.calc__row>span{font-size:13px;color:#6a6382}
.calc__row select{flex:0 0 190px;padding:8px 10px;border:1px solid #e6e0f2;border-radius:10px;font-size:13px;color:#1a1436;background:#fbfaff}
.calc__step{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.calc__step>span{font-size:13.5px;font-weight:600;color:#2c2545;line-height:1.25}
.calc__step>span i{display:block;font-style:normal;font-size:11.5px;color:#9a93b3;font-weight:400}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:30px;height:30px;border-radius:9px;border:1px solid #e6e0f2;background:#fbfaff;font-size:16px;line-height:1;color:#4a4460;cursor:pointer}
.stepper button:hover{border-color:#e84c3d;color:#e84c3d}
.stepper b{min-width:78px;text-align:center;font-size:15px;color:#1a1436}
.calc__bar{margin:16px 0 6px}
.calc__bar-fill{height:8px;border-radius:99px;background:linear-gradient(90deg,#e84c3d,#f268a8);width:98%;transition:width .2s ease}
.calc__bar{position:relative}
.calc__bar:before{content:"";position:absolute;left:0;right:0;top:0;height:8px;border-radius:99px;background:#eee9f7;z-index:-1}
.calc__bar-legend{display:flex;justify-content:space-between;margin-top:9px}
.calc__bar-legend span{font-size:11.5px;color:#8b84a3;display:flex;align-items:center;gap:6px}
.calc__bar-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.calc__bar-legend b{color:#1a1436}
.calc__profit{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid #f1ecfa}
.calc__profit span{font-size:13px;font-weight:600;color:#2c2545}
.calc__profit span i{display:block;font-style:normal;font-size:11.5px;color:#9a93b3;font-weight:400}
.calc__profit b{font-size:40px;line-height:1;letter-spacing:-.02em;color:#e84c3d}
.calc__cover{background:#faf7ff;border-radius:16px;padding:14px 16px;margin-top:14px}
.calc__cover>span{font-size:12.5px;color:#6a6382}
.calc__cover b{display:block;font-size:26px;color:#1a1436;margin-top:2px}
.calc__cover em{font-style:normal}
.calc__cover b i{font-style:normal;font-size:12px;color:#8b84a3}
.calc__cover u{display:block;text-decoration:none;font-size:11.5px;color:#9a93b3;margin-top:2px}
.calc__note{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:#8b84a3}
.calc__note b{color:#4a4460}
.band--full{padding-left:0;padding-right:0}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px;padding:0 10px}
.gcard{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#0d0a20}
.gcard img{display:block;width:100%;height:200px;object-fit:cover;transition:transform .4s ease}
.gcard:hover img{transform:scale(1.05)}
.gcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 10px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(10,6,24,.82))}
.vstable-wrap{overflow-x:auto;margin-top:22px;border-radius:20px;background:#fff;box-shadow:0 16px 44px rgba(26,20,54,.09)}
.vstable{width:100%;border-collapse:collapse;min-width:700px}
.vstable th,.vstable td{padding:13px 15px;text-align:left;font-size:13.5px;border-bottom:1px solid #f4f0fb}
.vstable thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#8b84a3;background:#faf8ff}
.vstable tbody th{font-weight:700;color:#1a1436;width:160px}
.vstable__own{background:rgba(232,76,61,.06);color:#1a1436;font-weight:700}
.vstable thead .vstable__own{color:#e84c3d}
@media(max-width:1100px){
 .featgrid{grid-template-columns:1fr 1fr}
 .modelgrid{grid-template-columns:1fr 1fr}
 .pmcard,.pmcard:nth-child(4),.pmcard:nth-child(5){grid-column:auto}
 .ggrid{grid-template-columns:1fr 1fr}
 .calcwrap{grid-template-columns:1fr;gap:28px}
}
@media(max-width:640px){.featgrid,.modelgrid,.ggrid{grid-template-columns:1fr}}


/* ==========================================================================
   ABOUT PAGE  ·  2026-11-10 rebuild
   Dark hero (left copy / right orb) -> formula band -> story + stat cards
   -> build/skip dual cards -> four alternating steps on dark -> paperwork
   -> certification wall -> expo cards -> CTA
   ========================================================================== */

/* ---------------------------------------------------------------- hero */
.abh {
  position: relative;
  padding: 132px 0 0;
  color: var(--cream);
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 84% -6%, rgba(124, 92, 252, 0.46) 0%, rgba(124, 92, 252, 0) 58%),
    radial-gradient(66% 56% at 2% 8%, rgba(232, 76, 61, 0.24) 0%, rgba(232, 76, 61, 0) 62%),
    linear-gradient(170deg, #150C33 0%, #1A1436 52%, #0B0620 100%);
}
.abh::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 244, 255, 0.16), transparent);
}
.abh__grid {
  display: grid;
  grid-template-columns: 1.14fr 0.86fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  padding-bottom: 62px;
}
.abh__crumbs { margin: 0 0 26px; }
.abh__crumbs a, .abh__crumbs span { color: rgba(248, 244, 255, 0.5); }
.abh__crumbs a:hover { color: #fff; }
.abh__eyebrow {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid rgba(248, 244, 255, 0.2);
  background: rgba(248, 244, 255, 0.06);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 244, 255, 0.78);
}
.abh__title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(29px, 3.05vw, 43px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.abh__ta { display: block; color: #FBF7FF; }
.abh__tb { display: block; }
.abh__tb .bi-en,
body.mode-zh .abh__tb .bi-zh {
  background-image: linear-gradient(96deg, #FF9270 0%, #FF7FB4 34%, #C4A5FF 64%, #A9C8FF 86%, #DCEAFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.abh__lede {
  margin: 24px 0 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.88;
  color: rgba(248, 244, 255, 0.66);
}
.abh__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* orb */
.abh__orb {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}
.abh__ring {
  position: absolute;
  top: 0;
  left: 50%;
  width: 104%;
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(0deg);
  border-radius: 50%;
  background: conic-gradient(from 150deg,
    rgba(232, 76, 61, 0.9), rgba(242, 104, 168, 0.8),
    rgba(124, 92, 252, 0.95), rgba(86, 203, 228, 0.55), rgba(232, 76, 61, 0.9));
  filter: blur(40px);
  opacity: 0.85;
  z-index: -1;
  pointer-events: none;
  animation: orbSpin 26s linear infinite;
}
/* 外层呼吸光晕：比圆环更大更散，两种速度叠加 = 有生命感的发光 */
.abh__orb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 108%;
  aspect-ratio: 1;
  transform: translateX(-50%) scale(1);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(124, 92, 252, 0.5) 0%, rgba(124, 92, 252, 0.18) 42%, rgba(86, 203, 228, 0.12) 58%, transparent 72%);
  filter: blur(54px);
  opacity: 0.5;
  z-index: -2;
  pointer-events: none;
  animation: orbBreathe 8s ease-in-out infinite;
}
@keyframes orbSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
@keyframes orbSpinC {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbBreathe {
  0%, 100% { opacity: 0.42; transform: translateX(-50%) scale(0.97); }
  50%      { opacity: 0.72; transform: translateX(-50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .abh__ring, .abh__orb::before, .abh__rim { animation: none; }
}
.abh__media {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  border-radius: 50%;
}
.abh__orb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(248, 244, 255, 0.14);
  box-shadow: 0 46px 96px -30px rgba(6, 2, 20, 0.92), inset 0 0 60px rgba(10, 4, 30, 0.45);
  display: block;
  position: relative;
  z-index: 1;
}
/* 沿圆边旋转的发光描边：mask 只留 2.5px 边，看起来像机身边缘在发光 */
/* 比图片大 3px 的渐变圆，被图片盖住中间 → 只剩一圈发光描边，不用 mask */
.abh__rim {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0) 186deg,
    rgba(255, 146, 112, 0.95) 232deg,
    rgba(255, 127, 180, 1) 266deg,
    rgba(196, 165, 255, 1) 300deg,
    rgba(169, 200, 255, 0.9) 332deg,
    rgba(255, 255, 255, 0) 360deg);
  animation: orbSpinC 9s linear infinite;
}
.abh__orb figcaption {
  margin: 22px 0 0;
  max-width: 30em;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgba(248, 244, 255, 0.4);
}

/* formula band */
.abh__formula {
  border-top: 1px solid rgba(248, 244, 255, 0.1);
  background: rgba(255, 255, 255, 0.028);
}
.abh__formula-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  padding: 26px 0;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.45vw, 19px);
  letter-spacing: -0.01em;
}
.abh__term { font-weight: 600; color: #FBF7FF; }
.abh__op { font-weight: 700; color: var(--pink); }
.abh__result { font-weight: 500; color: rgba(248, 244, 255, 0.68); }

/* --------------------------------------------------------------- story */
.absect--story { padding-top: 92px; }
.abstory {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.abstory__title {
  margin: 14px 0 0;
  max-width: 15em;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.abstory__p {
  margin: 22px 0 0;
  max-width: 35em;
  font-size: 14.5px;
  line-height: 1.92;
  color: var(--ink-2);
}
/* 四张统计卡：2×2 网格比纵向堆叠紧凑，右侧列宽只有 0.9fr */
.abstory__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.statcard {
  padding: 17px 18px 15px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-soft);
}
.statcard__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.statcard__k { margin: 9px 0 0; font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.statcard__note {
  margin: 6px 0 0; font-size: 11px; line-height: 1.55; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------------------------------------------------------- principles */
#principles { background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
/* 四张服务卡：白底区域 + 浅灰卡片，彩色图标做视觉锚点（顶线已取消） */
.aprin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.aprin__c {
  position: relative;
  padding: 28px 30px 30px;
  border-radius: 20px;
  background: #F6F5FA;
  border: 1px solid rgba(18, 28, 45, 0.07);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.aprin__c:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 92, 252, 0.22);
  box-shadow: 0 26px 46px -38px rgba(58, 32, 120, 0.5);
}
.aprin__c--0 { --ico-a: #F0E6FF; --ico-b: #DFCDFB; --ico-ring: rgba(124, 92, 252, .18); }
.aprin__c--1 { --ico-a: #FFE6F2; --ico-b: #F9CBE0; --ico-ring: rgba(236, 72, 153, .18); }
.aprin__c--2 { --ico-a: #E3F0FF; --ico-b: #C9DEFB; --ico-ring: rgba(59, 130, 246, .18); }
.aprin__c--3 { --ico-a: #FFEDD8; --ico-b: #FAD4AE; --ico-ring: rgba(240, 138, 30, .2); }
.aprin__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.aprin__ico {
  width: 58px; height: 58px; flex: 0 0 58px;
  display: grid; place-items: center;
  border-radius: 17px;
  font-size: 30px; line-height: 1;
  background: linear-gradient(158deg, var(--ico-a, #F6F1FF) 0%, var(--ico-b, #EADFFC) 100%);
  box-shadow: inset 0 0 0 1px var(--ico-ring, rgba(124, 92, 252, .14)),
              0 10px 20px -14px rgba(58, 32, 120, .55);
}
.aprin__ico > span { transform: translateY(-1px); }
.aprin__n {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--ink-3);
}
.aprin__t {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.aprin__b {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.88;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .aprin { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- four steps */
.abfour {
  position: relative;
  padding: 94px 0 24px;
  color: var(--cream);
  overflow: hidden;
  background: linear-gradient(175deg, #0B0620 0%, #150E33 44%, #1A1436 100%);
}
.abfour__head { max-width: 720px; margin-bottom: 18px; }
.abfour__kicker {
  margin: 0 0 16px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248, 244, 255, 0.44);
}
.abfour__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.9vw, 42px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #FBF7FF;
}
.abfour__intro {
  margin: 16px 0 0;
  max-width: 36em;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(248, 244, 255, 0.58);
}
.fourrow {
  display: grid;
  grid-template-columns: 1.14fr 0.86fr;
  gap: clamp(28px, 4vw, 62px);
  align-items: center;
  padding: 46px 0;
  border-top: 1px solid rgba(248, 244, 255, 0.09);
}
.fourrow:first-child { border-top: 0; }
.fourrow:nth-child(even) .fourrow__media { order: 2; }
.fourrow__media { margin: 0; }
.fourrow__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: 0 42px 84px -46px rgba(0, 0, 0, 0.92);
}
.fourrow__media figcaption {
  margin: 12px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(248, 244, 255, 0.4);
}
.fourrow__n {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--pink);
}
.fourrow__t {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #FBF7FF;
}
.fourrow__d {
  margin: 14px 0 0;
  max-width: 31em;
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(248, 244, 255, 0.62);
}

/* ------------------------------------------------ docs sub-block head */
.docblock {
  margin: 40px 0 20px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}
.docblock__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.docblock__intro {
  margin: 10px 0 0;
  max-width: 46em;
  font-size: 12.5px;
  line-height: 1.78;
  color: var(--ink-3);
}

/* ------------------------------------------------------- centring bits */
.abhead--center { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.abnote--center {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  border-left: 0;
  text-align: center;
}

/* ------------------------------------------------------ certification */
.certwall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.certdot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 14px 18px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.certdot:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.certdot__mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 0 9px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* 渐变描边：两层背景，padding-box 铺白、border-box 铺渐变 */
  border: 1.5px solid transparent;
  background-color: #fff;
  background-image: linear-gradient(#fff, #fff),
    conic-gradient(from 210deg, #E84C3D, #F268A8, #7C5CFC, #56CBE4, #E84C3D);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 12px 24px -18px rgba(58, 32, 120, 0.85);
}
.certdot__name {
  display: block;
  margin: 14px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}
.certdot__ap {
  display: block;
  margin: 5px 0 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- expo */
.abexpo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.expocard { position: relative; margin: 0; }
.expocard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.expocard__year {
  position: absolute;
  top: 13px;
  left: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: rgba(11, 6, 32, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.expocard figcaption {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ------------------------------------------- Chinese headline metrics */
/* 中文标题在同字号下占宽约为英文的 1.6 倍，必须单独压字号、放行高，否则断行难看 */
body.mode-zh .abh__title {
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.34;
  letter-spacing: -0.006em;
  text-wrap: balance;
}
body.mode-zh .abstory__title {
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.48;
  letter-spacing: 0;
}
body.mode-zh .abfour__title {
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.38;
  letter-spacing: -0.01em;
}
body.mode-zh .aprin__t {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.52;
  letter-spacing: 0;
}
body.mode-zh .docblock__title {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  letter-spacing: 0;
}
body.mode-zh .fourrow__t {
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.42;
  letter-spacing: 0;
}
body.mode-zh .statcard__num { letter-spacing: -0.02em; }

/* -------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .abh__grid { grid-template-columns: 1fr; gap: 44px; padding-bottom: 48px; }
  .abh__orb img { max-width: 380px; }
  .abstory { grid-template-columns: 1fr; gap: 34px; }
  .abstory__cards { grid-template-columns: repeat(2, 1fr); }
  .fourrow { grid-template-columns: 1fr; gap: 24px; padding: 38px 0; }
  .fourrow:nth-child(even) .fourrow__media { order: 0; }
  .abexpo { grid-template-columns: 1fr 1fr; }
  .certwall { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .abstory__cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .abh { padding-top: 104px; }
  .abh__title { font-size: clamp(25px, 6.6vw, 32px); line-height: 1.16; text-wrap: wrap; text-wrap-style: auto; }
  .abh__orb img { max-width: 300px; }
  .abh__orb figcaption { font-size: 10px; }
  .abstory__cards { grid-template-columns: 1fr; }
  .certwall { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .certdot { padding: 20px 10px 16px; }
  .certdot__mark { width: 66px; height: 66px; font-size: 11.5px; }
  .abexpo { grid-template-columns: 1fr; }
  .abfour { padding-top: 66px; }
  .absect--story { padding-top: 66px; }
}

/* ==========================================================================
   LANDING LAYOUT — product hero, model switcher, photo walls
   ========================================================================== */
.lhero {
  position: relative;
  overflow: hidden;
  padding: 128px 0 0;
  color: var(--cream);
  background:
    radial-gradient(120% 80% at 50% 0%, #3D2079 0%, rgba(61,32,121,0) 58%),
    radial-gradient(70% 50% at 50% 108%, rgba(124,92,252,.5) 0%, rgba(124,92,252,0) 62%),
    linear-gradient(180deg, #090615 0%, #120A2B 50%, #1B0F3E 100%);
}
.lhero__rays {
  position: absolute; inset: -6% -12% -12%;
  background: repeating-conic-gradient(from 176deg at 50% 118%,
    rgba(150,118,255,.15) 0deg 1.1deg, rgba(150,118,255,0) 1.1deg 7.5deg);
  -webkit-mask-image: radial-gradient(58% 66% at 50% 108%, #000 0%, transparent 76%);
  mask-image: radial-gradient(58% 66% at 50% 108%, #000 0%, transparent 76%);
  pointer-events: none;
}
.lhero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px;
  align-items: center;
  padding-bottom: 48px;
}
.lhero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.05; letter-spacing: -.032em; font-weight: 700;
  color: #FBF7FF; text-wrap: balance;
}
.lhero__title em {
  font-style: normal;
  background: linear-gradient(104deg,#FF7C6B,#F58CD6 45%,#9D86FF 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lhero__lede { margin-top: 20px; max-width: 540px; font-size: 15px; line-height: 1.8; color: rgba(248,244,255,.78); }
.lhero__price {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px;
}
.lhero__price li {
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(248,244,255,.22);
  background: rgba(248,244,255,.07);
  font-size: 12px; font-weight: 600; color: rgba(248,244,255,.9);
}
.lhero__price b { font-family: var(--font-display); font-weight: 700; color: #fff; }
.lhero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.lhero__meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11px; color: rgba(248,244,255,.5); }
.lhero__meta li::before { content: "·"; margin-right: 8px; color: #F58CD6; }

.lhero__stage { position: relative; }
.lhero__plate {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(90% 70% at 72% 0%, rgba(255,188,214,.32) 0%, rgba(255,188,214,0) 60%),
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(124,92,252,.16));
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.8);
  padding: 30px 26px 34px;
  backdrop-filter: blur(6px);
}
.lhero__plate img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); }
.lhero__badge {
  position: absolute; top: 16px; left: 16px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(9,6,21,.55); border: 1px solid rgba(255,255,255,.2);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #FBF7FF;
  backdrop-filter: blur(8px);
}
.lhero__card {
  position: absolute; right: -10px; bottom: 18px;
  background: rgba(255,255,255,.94); color: var(--ink);
  border-radius: 16px; padding: 14px 16px; min-width: 178px;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.7);
}
.lhero__card span { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lhero__card b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; }
.lhero__card i { font-style: normal; font-size: 10px; color: var(--ink-3); }

/* quick facts under hero */
.lstrip { background: rgba(9,6,21,.96); border-top: 1px solid rgba(255,255,255,.08); }
.lstrip__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.lstrip__i { padding: 22px 18px; border-left: 1px solid rgba(255,255,255,.08); }
.lstrip__i:first-child { border-left: 0; padding-left: 0; }
.lstrip__i b { display: block; font-family: var(--font-display); font-size: 24px; color: #FBF7FF; letter-spacing: -.02em; }
.lstrip__i span { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .04em; color: rgba(248,244,255,.45); }

/* model switcher */
.switch { display: grid; grid-template-columns: 232px 1fr; gap: 44px; align-items: start; }
.switch__tabs { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 6px; }
.switch__tab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: all .2s ease;
}
.switch__tab:hover { background: rgba(255,255,255,.65); color: var(--ink); }
.switch__tab.is-active {
  background: rgba(255,255,255,.92);
  border-color: rgba(160,120,255,.35);
  box-shadow: 0 14px 30px -24px rgba(58,32,120,.6);
  color: var(--ink);
}
.switch__tab i { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-family: var(--font-text); font-weight: 600; }

.panel { display: none; }
.panel.is-active { display: block; animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 40px; align-items: start; }
.panel__stage {
  border-radius: 22px; border: 1px solid rgba(255,255,255,.9);
  background: radial-gradient(120% 100% at 50% 0%, #FDF8FF 0%, #F1E9FF 55%, #E7F3FF 100%);
  padding: 26px;
  box-shadow: 0 26px 60px -44px rgba(58,32,120,.5);
}
.panel__stage img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; }
.panel__code { font-size: 10px; font-weight: 700; letter-spacing: .16em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel__name { margin-top: 8px; font-family: var(--font-display); font-size: 26px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
.panel__price { margin-top: 8px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--red); }
.panel__price em { font-style: normal; font-size: 10px; letter-spacing: .12em; color: var(--ink-3); margin-left: 5px; }
.panel__specs { margin-top: 18px; display: grid; gap: 8px; }
.panel__specs > div { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; padding-bottom: 7px; border-bottom: 1px dashed var(--line-soft); }
.panel__specs dt { color: var(--ink-3); }
.panel__specs dd { margin: 0; font-weight: 600; }
.panel__best {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: var(--grad-soft); border: 1px solid rgba(160,120,255,.16);
  font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
}
.panel__best b { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.panel__prose { margin-top: 16px; font-size: 14px; line-height: 1.82; color: var(--ink-2); }

/* photo walls */
.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wall figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.wall img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.96); transition: transform .5s ease; }
.wall figure:hover img { transform: scale(1.04); }
.wall figcaption {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 10.5px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.wall figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,6,24,.55)); }
.wall--tall figure:nth-child(1) { grid-row: span 2; }
.wall .tall { grid-row: span 2; }

.build { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.build__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.build__pics figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.build__pics img { width: 100%; height: 190px; object-fit: cover; display: block; }
.build__pics figcaption { padding: 8px 12px; font-size: 10.5px; color: var(--ink-3); background: rgba(255,255,255,.7); }

@media (max-width: 1000px) {
  .lhero__grid { grid-template-columns: 1fr; gap: 34px; }
  .lhero__stage { max-width: 460px; }
  .lstrip__grid { grid-template-columns: repeat(3, 1fr); }
  .lstrip__i { padding: 16px 14px; }
  .lstrip__i:nth-child(3n+1) { border-left: 0; }
  .switch { grid-template-columns: 1fr; gap: 22px; }
  .switch__tabs { position: static; flex-direction: row; flex-wrap: wrap; }
  .switch__tab { padding: 9px 12px; font-size: 12px; }
  .panel__grid { grid-template-columns: 1fr; }
  .wall { grid-template-columns: 1fr 1fr; }
  .build { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .lhero { padding-top: 112px; }
  .lstrip__grid { grid-template-columns: 1fr 1fr; }
  .lhero__card { position: static; margin-top: 14px; }
  .wall { grid-template-columns: 1fr; }
  .build__pics { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ABOUT — image-led company page
   ========================================================================== */
.ahero {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: flex-end;
  padding: 150px 0 62px;
  color: #fff;
  overflow: hidden;
}
.ahero__bg { position: absolute; inset: 0; }
.ahero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.85); }
.ahero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,6,24,.86) 0%, rgba(10,6,24,.28) 42%, rgba(10,6,24,.94) 100%);
}
.ahero__inner { position: relative; z-index: 2; max-width: 900px; }
.ahero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 700;
  color: #FBF7FF; text-wrap: balance;
}
.ahero__lede { margin-top: 18px; max-width: 660px; font-size: 15px; line-height: 1.8; color: rgba(248,244,255,.8); }
.ahero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.ahero__meta li {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
  font-size: 11.5px; font-weight: 600; color: rgba(248,244,255,.88);
}

.pull {
  margin: 0 0 28px;
  padding: 22px 0 22px 26px;
  border-left: 3px solid var(--red);
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.5; letter-spacing: -.01em;
  color: var(--ink);
}
.pull span { display: block; margin-top: 10px; font-family: var(--font-text); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .twocol { grid-template-columns: 1fr; gap: 22px; } }

/* --- scenarios / cases / certificates --- */
.scen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.scen__c {
  background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px -30px rgba(58,32,120,.42);
  display: flex; flex-direction: column;
}
.scen__c img { width: 100%; height: 158px; object-fit: cover; }
.scen__b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.scen__n { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.scen__best { font-size: 11.5px; color: var(--red); font-weight: 600; line-height: 1.5; }
.scen__t { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }

.casegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.casegrid .quote { padding: 0; overflow: hidden; }
.casegrid .quote img { width: 100%; height: 150px; object-fit: cover; }
.casegrid .quote__in { padding: 20px 22px 18px; }
.casegrid .casecard__metric { margin-bottom: 10px; }
.casegrid blockquote { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink); }
.casegrid .quote figcaption { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.casegrid .quote figcaption b { font-size: 12.5px; }
.casegrid .quote figcaption span { font-size: 11px; color: var(--ink-3); }

.cert { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.cert__c { background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; padding: 18px 18px 16px; }
.cert__m {
  display: inline-block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  padding: 4px 9px; border-radius: 6px; background: var(--grad-soft); color: var(--ink);
}
.cert__a { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.docs span { font-size: 11.5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--ink-2); }

@media (max-width: 1000px) {
  .scen, .casegrid, .cert { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .scen, .casegrid, .cert { grid-template-columns: 1fr; }
}
.casegrid .quote img.contain { object-fit: contain; padding: 16px; background: radial-gradient(120% 100% at 50% 0%, #FDF8FF, #EFF0FF); }

/* tall viewports: don't stretch the about hero to a full screen */
@media (min-height: 1100px) {
  .ahero { min-height: 620px; }
}

/* ==========================================================================
   COTTON CANDY LANDING — 12 modules
   ========================================================================== */
.ico { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -2px; }
.btn .ico { width: 14px; height: 14px; margin-left: 4px; }

.tagpill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(248,244,255,.22);
  background: rgba(248,244,255,.08);
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(248,244,255,.82);
}
.tagpill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg,#FF7C6B,#9D86FF); }

.badgebar { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.badgebar li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 10px;
  border: 1px solid rgba(248,244,255,.16);
  background: rgba(248,244,255,.05);
  font-size: 11.5px; font-weight: 600; color: rgba(248,244,255,.86);
}
.badgebar .ico { width: 13px; height: 13px; color: #8FE3C6; }

.lhero__chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.lhero__chips li {
  font-size: 10.5px; letter-spacing: .03em; color: rgba(248,244,255,.62);
  padding: 6px 11px; border-radius: 999px; background: rgba(248,244,255,.06);
  border: 1px solid rgba(248,244,255,.12);
}

/* metrics */
.metric4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.85); }
.metric4__c { background: rgba(255,255,255,.78); padding: 28px 26px 26px; }
.metric4__n {
  display: block; font-family: var(--font-display); font-size: 46px; line-height: 1;
  letter-spacing: -.04em; font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metric4__l { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.metric4__b { margin-top: 8px; font-size: 12.5px; line-height: 1.72; color: var(--ink-2); }

/* video */
.videoblock { display: grid; grid-template-columns: 1fr .82fr; gap: 54px; align-items: center; }
.vlist { margin-top: 20px; display: grid; gap: 11px; }
.vlist li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.vlist .ico { color: var(--red); margin-top: 2px; }
.vlist--tight li { font-size: 13px; }

.vcard {
  position: relative; margin: 0; border-radius: 24px; overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 40px 80px -50px rgba(40,20,90,.6);
  background: #0d0920;
}
.vcard video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard__btn {
  position: absolute; right: 16px; bottom: 16px;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(12,8,26,.55); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(10px); transition: all .2s ease;
}
.vcard__btn:hover { background: rgba(12,8,26,.8); transform: scale(1.05); }
.vcard__btn .ico { width: 18px; height: 18px; }
.vcard__btn .ico--pause { display: none; }
.vcard.is-playing .ico--play { display: none; }
.vcard.is-playing .ico--pause { display: block; }

/* model selector */
.msel { margin-top: 30px; }
.msel__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.msel__tab {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 12px 18px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  transition: all .2s ease;
}
.msel__tab b { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); }
.msel__tab i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.msel__tab:hover { border-color: rgba(160,120,255,.4); }
.msel__tab.is-active {
  background: var(--ink); border-color: var(--ink);
}
.msel__tab.is-active b, .msel__tab.is-active i { color: #fff; }

.msel__tabs { display: none; }
.mpanel { display: grid; grid-template-columns: .86fr 1.14fr; gap: 44px; margin-top: 24px; }
/* JS 接管后才收成选项卡；无 JS / 爬虫看到的是五段完整内容 */
.msel.is-tabbed .msel__tabs { display: flex; }
.msel.is-tabbed .msel__panels { min-height: 500px; }
.msel.is-tabbed .mpanel { display: none; }
.msel.is-tabbed .mpanel.is-active { display: grid; animation: fadeUp .3s ease; }
.mpanel__stage {
  position: relative; border-radius: 24px; padding: 26px;
  border: 1px solid rgba(255,255,255,.9);
  background: radial-gradient(120% 100% at 50% 0%, #FDF8FF 0%, #F1E9FF 55%, #E7F3FF 100%);
  box-shadow: 0 30px 60px -46px rgba(58,32,120,.5);
}
.mpanel__stage img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; }
.mpanel__badge {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.mpanel__name { font-family: var(--font-display); font-size: 24px; line-height: 1.28; font-weight: 700; letter-spacing: -.02em; }
.mpanel__price { margin-top: 8px; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--red); }
.mpanel__price em { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--ink-3); margin-left: 6px; }
.mpanel__rows { margin-top: 18px; display: grid; gap: 0; }
.mpanel__rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line-soft); font-size: 12.5px; }
.mpanel__rows dt { color: var(--ink-3); }
.mpanel__rows dd { margin: 0; font-weight: 600; text-align: right; }
.mpanel__detail { margin-top: 16px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }

/* spec table */
.ctable--spec { min-width: 900px; }
.ctable--spec tbody th { position: sticky; left: 0; background: rgba(255,255,255,.96); z-index: 1; }
.ctable--spec thead th:first-child { position: sticky; left: 0; z-index: 2; background: rgba(247,245,252,.98); }

/* consumables */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.duo__c { border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.74); box-shadow: 0 24px 50px -40px rgba(58,32,120,.45); }
.duo__media img { width: 100%; height: 220px; object-fit: cover; display: block; }
.duo__body { padding: 24px 26px 26px; }
.duo__t { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.duo__rows { margin-top: 14px; display: grid; gap: 0; }
.duo__rows > div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px dashed var(--line-soft); font-size: 12.5px; }
.duo__rows dt { color: var(--ink-3); }
.duo__rows dd { margin: 0; font-weight: 600; text-align: right; max-width: 60%; }
.duo__note { margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }

/* calculator v2 */
.calc2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.9); background: rgba(23,19,42,.08); margin-top: 26px; box-shadow: 0 34px 70px -54px rgba(58,32,120,.5); }
.calc2__side { background: rgba(255,255,255,.84); padding: 32px 30px; }
.calc2__out { background: linear-gradient(155deg,#191234 0%,#2A1A4F 58%,#3A1E52 100%); color: var(--cream); padding: 32px 30px; display: flex; flex-direction: column; gap: 14px; }

/* venues wall */
.vwall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; }
.vwall figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.vwall img { width: 100%; height: 150px; object-fit: cover; display: block; transition: transform .5s ease; }
.vwall figure:hover img { transform: scale(1.05); }
.vwall figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 10px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.vwall figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,6,24,.62)); }

.quote__flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 7px;
  background: rgba(10,6,24,.72); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
}
.casegrid .quote { position: relative; }
.casecard__note { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--ink-2); }

/* certs */
.certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.certs__c { padding: 20px 18px 18px; border-radius: 16px; background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.92); }
.certs__mark {
  display: inline-block; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .12em;
  padding: 6px 12px; border-radius: 8px;
  background: var(--grad); color: #fff;
}
.certs__name { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--ink); }
.certs__body { margin-top: 6px; font-size: 11.5px; line-height: 1.65; color: var(--ink-2); }
.honestnote {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 22px; padding: 18px 20px; border-radius: 14px;
  background: rgba(232,76,61,.06); border: 1px solid rgba(232,76,61,.2);
  font-size: 13px; line-height: 1.75; color: var(--ink-2);
}
.honestnote .ico { color: var(--red); margin-top: 2px; }

/* freight */
.freight { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.checklist { margin-top: 20px; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.checklist .ico { color: var(--red); margin-top: 2px; }
.ctable--freight { min-width: 0; }
.ctable--freight td { white-space: normal; }

/* final cta */
.finalcta { position: relative; overflow: hidden; background: var(--deep); color: var(--cream); padding: 88px 0 76px; }
.finalcta::before {
  content: ""; position: absolute; left: 50%; top: -220px; width: 900px; height: 620px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,252,.34), rgba(232,76,61,.10) 55%, rgba(26,20,54,0) 72%);
}
.finalcta__in { position: relative; text-align: center; }
.finalcta .cta__sub { margin-left: auto; margin-right: auto; }
.measure { margin: 32px auto 0; max-width: 880px; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; align-items: end; }
.measure label { text-align: left; display: block; }
.measure span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(248,244,255,.5); margin-bottom: 7px; }
.measure input {
  width: 100%; padding: 13px 14px; border-radius: 10px;
  border: 1px solid rgba(248,244,255,.2); background: rgba(248,244,255,.07);
  color: #fff; font-family: inherit; font-size: 14px;
}
.measure input::placeholder { color: rgba(248,244,255,.32); }
.measure input:focus { outline: none; border-color: rgba(248,220,255,.6); background: rgba(248,244,255,.12); }
.finalcta__foot { margin-top: 26px; font-size: 11px; color: rgba(248,244,255,.42); }

@media (max-width: 1000px) {
  .videoblock, .mpanel, .freight, .duo { grid-template-columns: 1fr; gap: 28px; }
  .metric4 { grid-template-columns: 1fr 1fr; }
  .vwall { grid-template-columns: 1fr 1fr; }
  .certs { grid-template-columns: 1fr 1fr; }
  .calc2 { grid-template-columns: 1fr; }
  .measure { grid-template-columns: 1fr 1fr; }
  .measure button { grid-column: 1 / -1; }
  .vcard { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .metric4, .vwall, .certs { grid-template-columns: 1fr; }
  .measure { grid-template-columns: 1fr; }
  .lhero__chips { justify-content: flex-start; }
}

/* freight table: keep volume on one line */
.ctable--freight td.num { white-space: nowrap; }

/* hero video */
.lhero__video {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 18px; display: block; background: #0d0920;
}
.lhero__pause {
  position: absolute; left: 16px; bottom: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(10,6,24,.55); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(8px); transition: background .2s ease;
}
.lhero__pause:hover { background: rgba(10,6,24,.85); }
.lhero__pause .ico { width: 16px; height: 16px; }
.lhero__pause .ico--play { display: none; }
.lhero__stage.is-paused .ico--pause { display: none; }
.lhero__stage.is-paused .ico--play { display: block; }

/* case cards v2 */
.casegrid .quote { background: rgba(255,255,255,.86); }
.quote__media { position: relative; }
.quote__media img { width: 100%; height: 176px; object-fit: cover; display: block; }
.quote__flag {
  position: absolute; top: 10px; left: 10px;
  padding: 5px 9px; border-radius: 6px;
  background: rgba(10,6,24,.72); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
}
.stars { display: flex; gap: 2px; margin-bottom: 10px; }
.stars i { font-style: normal; font-size: 13px; color: #F2A93B; line-height: 1; }
.quote__in blockquote { font-size: 15px; line-height: 1.55; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.quote__where {
  margin-top: 8px; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.quote__note { margin-top: 12px; font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.quote__who { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; }
.quote__ava {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--grad); color: #fff;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
}
.quote__who b { display: block; font-size: 12px; color: var(--ink); }
.quote__who i { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }

/* consumable media: show the whole product, not a cropped strip */
.duo__media {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: linear-gradient(180deg,#FDFCFF,#F6F3FB);
  border-bottom: 1px solid var(--line-soft);
}
.duo__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* payment band */
.she--center { max-width: none; text-align: center; }
.she--center .she__intro { margin-left: auto; margin-right: auto; }
.payband { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
/* 支付段的备注是浅底上的小字：.maths__foot 默认给深色块用，这里按浅底改色 */
.payband .maths__foot { color: #6B6280; }
.payrows { margin-top: 22px; }
.payrows > div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; }
.payrows dt { color: var(--ink-3); flex: 0 0 auto; }
.payrows dd { margin: 0; font-weight: 600; text-align: right; }
.payfig { margin: 0; }
.payfig img { width: 100%; height: auto; border-radius: 22px; border: 1px solid rgba(255,255,255,.9); display: block; box-shadow: 0 30px 60px -46px rgba(58,32,120,.45); }
.payfig figcaption { margin-top: 10px; font-size: 11px; color: var(--ink-3); text-align: center; }
.payfig--render img { border: 0; border-radius: 0; box-shadow: none; }

/* remote hub: features around a circular core */
.hub { display: grid; grid-template-columns: 1fr 380px 1fr; gap: 24px; align-items: center; margin-top: 36px; }
.hub__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hub__c { background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.94); border-radius: 16px; padding: 15px 17px;
  position: relative;
  transition: translate .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease; }
/* 悬停高亮：只给真有指针的设备；触屏点一下不留 hover 态 */
@media (hover: hover) {
  .hub__c:hover {
    background: #fff; border-color: rgba(232,76,61,.26); translate: 0 -3px;
    box-shadow: 0 20px 38px -24px rgba(58,32,120,.5), 0 2px 0 0 rgba(255,255,255,.9) inset;
  }
  .hub__c:hover .hub__n { opacity: 1; letter-spacing: .18em; }
  .hub__c::after {
    content: ""; position: absolute; left: 17px; right: 17px; top: -1px; height: 2px; border-radius: 2px;
    background: var(--grad); opacity: 0; transform: scaleX(.2); transform-origin: left center;
    transition: opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1);
  }
  .hub__c:hover::after { opacity: 1; transform: scaleX(1); }
}
.hub__n { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; transition: letter-spacing .3s ease; }
@media (prefers-reduced-motion: reduce){ .hub__c:hover{translate:none} .hub__c::after{transition:none} }
.hub__h { margin-top: 3px; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.hub__p { margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.hub__core { margin: 0; }
.hub__core img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border: 0; box-shadow: none;
  filter: drop-shadow(0 26px 44px rgba(58,32,120,.16));
  display: block; margin: 0 auto;
}
.hub__core figcaption { margin-top: 12px; text-align: center; font-size: 11px; color: var(--ink-3); }

@media (max-width: 1000px) {
  .payband { grid-template-columns: 1fr; gap: 26px; }
  .hub { grid-template-columns: 1fr; gap: 20px; }
  .hub__core { order: -1; }
  /* 手机端不再给圆图套白色圆角卡片：图本身已透明，只留一圈柔光 */
  .hub__core img { border-radius: 0; filter: drop-shadow(0 18px 30px rgba(58,32,120,.12)); }
  .hub__side { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .hub__side { display: grid; grid-template-columns: 1fr; }
}

/* unit economics strip inside the consumables block */
.econ {
  margin-top: 20px; padding: 24px 26px;
  border-radius: 20px; background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.94);
  box-shadow: 0 24px 50px -40px rgba(58,32,120,.4);
}
.econ__t { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.econ__grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.econ__c {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(180deg,#FDFCFF,#F6F3FB);
  border: 1px solid var(--line-soft);
}
.econ__c--sum { background: var(--grad-soft); border-color: rgba(160,120,255,.28); }
.econ__k { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.econ__v {
  font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.econ__n { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }
.econ__bridge {
  margin-top: 16px; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
}
.econ__bridge .ico { width: 14px; height: 14px; color: var(--red); transform: rotate(90deg); }

/* about + certificates */
.aboutgrid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 46px; align-items: start; }
.aboutstats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aboutstats__i {
  padding: 18px 18px 16px; border-radius: 16px;
  background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.94);
}
.aboutstats__i b {
  display: block; font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: -.03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.aboutstats__i span { display: block; margin-top: 7px; font-size: 11px; line-height: 1.5; color: var(--ink-3); }
.certblock { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.certblock__t { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.certblock__s { margin-top: 8px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); max-width: 760px; }

@media (max-width: 1000px) {
  .aboutgrid { grid-template-columns: 1fr; gap: 26px; }
  .econ__grid { grid-template-columns: 1fr; }
}

/* about: factory photo under the stats */
.aboutfig { margin: 12px 0 0; }
.aboutfig img { width: 100%; height: 168px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); display: block; }
.aboutfig figcaption { margin-top: 7px; font-size: 10.5px; color: var(--ink-3); }

/* certificate carousel */
.certcar { position: relative; }
.certcar__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 4);
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 2px 2px 6px; scrollbar-width: none;
}
.certcar__track::-webkit-scrollbar { display: none; }
.certcar__track .certs__c { scroll-snap-align: start; }
.certcar__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.certcar .cases__dots { justify-content: flex-start; margin-top: 6px; }

/* dual-track CTA */
.cta2__head { text-align: center; max-width: 820px; margin: 0 auto 34px; }
.cta2__head .cta__title { font-size: clamp(26px, 3.2vw, 40px); }
.cta2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }

.wacard {
  display: flex; flex-direction: column; gap: 12px;
  padding: 30px 30px 26px; border-radius: 24px;
  background: linear-gradient(160deg,#0C3B2C 0%,#0F5132 55%,#14663F 100%);
  border: 1px solid rgba(255,255,255,.14);
  color: #EAF7F0; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wacard:hover { transform: translateY(-3px); box-shadow: 0 34px 60px -40px rgba(12,59,44,.9); }
.wacard__status { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #9BE7BF; }
.wacard__status i { width: 7px; height: 7px; border-radius: 50%; background: #37D67A; box-shadow: 0 0 0 0 rgba(55,214,122,.7); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(55,214,122,.6); } 70% { box-shadow: 0 0 0 9px rgba(55,214,122,0); } 100% { box-shadow: 0 0 0 0 rgba(55,214,122,0); } }
.wacard__t { font-family: var(--font-display); font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: #fff; }
.wacard__p { font-size: 13px; line-height: 1.7; color: rgba(234,247,240,.8); }
.wacard__list { display: grid; gap: 9px; margin-top: 2px; }
.wacard__list li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: rgba(234,247,240,.92); }
.wacard__list .ico { width: 14px; height: 14px; color: #5FE39B; margin-top: 2px; }
.wacard__btn {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 12px 18px; border-radius: 12px;
  background: #fff; color: #0F5132; font-weight: 700; font-size: 13px;
}
.wacard__num { font-size: 11px; color: rgba(234,247,240,.55); letter-spacing: .04em; }

.lead { background: rgba(255,255,255,.96); border-radius: 24px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.lead__t { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.lead__f { display: block; }
.lead__f > span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.lead__f--req > span { white-space: nowrap; }
.lead__f--req > span::after { content: " *"; color: var(--red); }
.lead__f input {
  width: 100%; padding: 12px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
}
.lead__f input:focus { outline: none; border-color: rgba(160,120,255,.6); box-shadow: 0 0 0 3px rgba(160,120,255,.12); }
.lead__f input::placeholder { color: #B4ADCB; }
.lead__btn { width: 100%; justify-content: center; margin-top: 4px; }
.lead__trust { font-size: 10.5px; line-height: 1.6; color: var(--ink-3); margin-top: 2px; }

@media (max-width: 900px) {
  .cta2 { grid-template-columns: 1fr; }
  .certcar__track { grid-auto-columns: calc((100% - 12px) / 2); }
}
@media (max-width: 620px) {
  .certcar__track { grid-auto-columns: 82%; }
  .wacard, .lead { padding: 22px 20px; }
}

/* review card: attribution + stars as one footer block */
.quote__who { align-items: flex-start; }
.quote__by { display: block; min-width: 0; }
.quote__who .stars { margin-left: auto; margin-bottom: 0; padding-top: 3px; gap: 1px; }
.quote__who .stars i { font-size: 12px; }

/* force the review footer into one row (it inherits column from the case grid) */
.casegrid .quote__who { flex-direction: row; align-items: flex-start; }
/* ---- product cards air ---- */
section[id]{scroll-margin-top:92px}
/* 分类页卡片：拉开呼吸感，控制正文行数，统一高度 */
#families .mgrid{grid-template-columns:repeat(3,1fr);gap:28px;margin-top:0}
@media(min-width:1360px){#families .mgrid{grid-template-columns:repeat(4,1fr);gap:26px}}
@media(max-width:1024px){#families .mgrid{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(max-width:640px){#families .mgrid{grid-template-columns:1fr;gap:20px}}

#families .pcard{border-radius:22px}
#families .pcard__media{padding:34px 30px 22px;background:radial-gradient(120% 100% at 50% 0%,#fbf7ff 0%,#f2ecff 78%)}
#families .pcard__media img{max-height:220px}
#families .pcard__body{padding:26px 26px 24px}
#families .pcard__cat{font-size:10px;letter-spacing:.16em;margin-bottom:10px}
#families .pcard__name{font-size:20px;line-height:1.3}
#families .pcard__best{margin-top:14px;font-size:13.5px;line-height:1.78;color:#4a4460;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
#families .pcard__best + .pcard__best{margin-top:10px;font-size:12.5px;color:#7a7392;-webkit-line-clamp:3}
#families .pcard__models{margin-top:18px;padding-top:14px;font-size:10.5px;letter-spacing:.03em;line-height:1.7;color:#9a93b3}
#families .pcard__foot{margin-top:18px;padding-top:4px}
#families .pcard__price{font-size:19px}
#families .pcard__go{width:34px;height:34px;font-size:14px}

/* consumables + calculator: two spec cards on the left, tall calculator on the right */
.matsplit { display: grid; grid-template-columns: 1.04fr .96fr; gap: 22px; margin-top: 30px; align-items: stretch; }
.matsplit__col { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; min-width: 0; }
.matsplit__calc { display: grid; min-width: 0; }
.matcard {
  display: grid; grid-template-columns: minmax(200px, 244px) 1fr;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.8);
  box-shadow: 0 24px 50px -40px rgba(58,32,120,.45);
}
.matcard__media { margin: 0; min-width: 0; display: grid; place-items: center; background: linear-gradient(180deg,#FDFCFF,#F4F1FA); border-right: 1px solid var(--line-soft); }
.matcard__media img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; display: block; }
.matcard__body { padding: 24px 26px; align-self: center; min-width: 0; }
.matcard__t { font-family: var(--font-display); font-size: 15.5px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
.matcard__rows { margin-top: 12px; display: grid; gap: 0; }
.matcard__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); font-size: 11.5px; }
.matcard__rows dt { color: var(--ink-3); }
.matcard__rows dd { margin: 0; font-weight: 600; text-align: right; max-width: 64%; }
.matcard__note { margin-top: 10px; font-size: 11.5px; line-height: 1.65; color: var(--ink-2); }
.calc2--stack { grid-template-columns: 1fr; height: 100%; margin-top: 0; }
.calc2--stack .calc2__side { padding: 26px 26px 22px; }
.calc2--stack .calc2__out { padding: 24px 26px 26px; }
.calc2 .vlist li::before { content: none; }
.calc2 .vlist li { display: flex; gap: 10px; padding: 0; border-bottom: 0; }
@media (max-width: 1000px) {
  .matsplit { grid-template-columns: 1fr; gap: 20px; }
  .matsplit__col { grid-template-rows: auto auto; }
  .matcard { grid-template-columns: minmax(150px, 200px) 1fr; }
}
@media (max-width: 620px) {
  .matcard { grid-template-columns: 1fr; }
  .matcard__media { aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .matcard__body { padding: 20px 20px 22px; }
}

/* spec table footnote on light bands */
.ctable-note { margin-top: 16px; font-size: 11.5px; line-height: 1.75; color: var(--ink-3); max-width: 980px; }
/* ---- machines calculator + why + lead ---- */
.fld{display:block;margin-bottom:15px}
.fld>span{display:block;font-size:12.5px;color:#6a6382;margin-bottom:7px;letter-spacing:.01em}
.fld input,.fld select,.fld textarea{width:100%;padding:11px 13px;border:1px solid #e6e0f2;border-radius:12px;font-family:inherit;font-size:14px;color:#1a1436;background:#fbfaff;box-sizing:border-box}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:rgba(232,76,61,.55);box-shadow:0 0 0 3px rgba(232,76,61,.10)}
.fld textarea{resize:vertical;min-height:84px}
.fld2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.bcalc{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px;align-items:stretch}
.bcalc__in{background:#fff;border-radius:22px;padding:26px 26px 20px;box-shadow:0 18px 48px rgba(26,20,54,.10)}
.bcalc__note{margin:8px 0 0;font-size:11.5px;line-height:1.65;color:#8b84a3}
.bcalc__out{background:linear-gradient(165deg,#1a1436,#241a4d);border-radius:22px;padding:8px 26px 22px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(26,20,54,.28)}
.orow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.orow span{font-size:13px;color:rgba(255,255,255,.62)}
.orow b{font-size:19px;color:#fff;letter-spacing:-.01em}
.orow--net b{color:#f268a8;font-size:22px}
.bcalc__pay{margin-top:auto;padding-top:18px;display:flex;align-items:baseline;justify-content:space-between}
.bcalc__pay>span{font-size:13px;color:rgba(255,255,255,.62)}
.bcalc__pay b{font-size:40px;line-height:1;color:#fff;letter-spacing:-.02em}
.bcalc__pay em{font-style:normal}
.bcalc__u{display:inline-block;margin-left:8px;font-size:14px;font-weight:600;color:rgba(255,255,255,.66);letter-spacing:0}

.whyGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.whyCard{background:#fff;border-radius:20px;padding:26px 24px;box-shadow:0 14px 40px rgba(26,20,54,.09);transition:transform .25s ease,box-shadow .25s ease}
.whyCard:hover{transform:translateY(-3px);box-shadow:0 20px 52px rgba(26,20,54,.15)}
.whyCard__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:16px;font-size:26px;line-height:1;background:linear-gradient(135deg,#f1ecff,#ffe9f0)}
.whyCard h3{margin:0 0 8px;font-size:16.5px;line-height:1.35;color:#1a1436}
.whyCard p{margin:0;font-size:13.5px;line-height:1.66;color:#4a4460}

.leadwrap{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.leadwrap__list{list-style:none;margin:22px 0 26px;padding:0}
.leadwrap__list li{position:relative;padding-left:22px;margin-bottom:10px;font-size:13.5px;line-height:1.6;color:#2c2545}
.leadwrap__list li:before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:#e84c3d}
.leadwrap__wa{margin-top:2px}
.leadform{background:#fff;border-radius:22px;padding:26px;box-shadow:0 18px 48px rgba(26,20,54,.10)}
.leadform .btn{width:100%;justify-content:center;margin-top:4px}
.leadform__note{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:#8b84a3}
@media(max-width:1000px){.bcalc,.leadwrap{grid-template-columns:1fr}.whyGrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.whyGrid{grid-template-columns:1fr}.fld2{grid-template-columns:1fr}}
/* ---- cta quote v2 ---- */
#contact .leadwrap{grid-template-columns:1fr 480px;gap:52px;align-items:start}
#contact .leadwrap__l .she__title{font-size:clamp(26px,2.6vw,36px);line-height:1.12;letter-spacing:-.02em;margin-bottom:14px}
#contact .leadwrap__l .she__intro{font-size:14.5px;line-height:1.72;color:#4a4460;max-width:44ch}

.leadwrap__list{list-style:none;margin:24px 0 0;padding:0}
.leadwrap__list li:before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:#e84c3d;box-shadow:none}
.leadwrap__list li{position:relative;padding-left:22px;display:block}
.leadwrap__list li b{display:block;font-size:14.5px;font-weight:800;color:#1a1436;line-height:1.4;margin-bottom:2px}
.leadwrap__list li span{display:block;font-size:13.5px;line-height:1.62;color:#5b5473}

.leadwrap__lead{margin:20px 0 11px;font-size:13.5px;line-height:1.6;font-weight:600;color:#2c2545;max-width:46ch}
.btn--wa{display:inline-flex;align-items:center;gap:10px;border:0;background:#12A150;color:#fff;font-size:15.5px;font-weight:800;
  letter-spacing:.01em;padding:15px 26px;border-radius:14px;text-decoration:none;box-shadow:0 14px 30px rgba(18,161,80,.30);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.btn--wa:hover{background:#0E8A43;transform:translateY(-1px);box-shadow:0 18px 36px rgba(18,161,80,.36)}
.btn--wa svg{flex:0 0 20px;width:20px;height:20px}
.btn--wa span{color:#fff}
.leadwrap__wanote{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:#8b84a3;letter-spacing:.01em}

#contact .leadform{padding:26px 26px 22px}
#contact .leadform .fld{margin-bottom:14px}
#contact .leadform .fld>span{font-size:12px;font-weight:700;color:#4a4460;letter-spacing:.02em;margin-bottom:6px}
#contact .leadform .fld input,#contact .leadform .fld textarea{padding:12px 14px;font-size:14px}
#contact .leadform .fld input::placeholder,#contact .leadform .fld textarea::placeholder{font-size:12.5px;color:#a9a2bd}
#contact .leadform__submit{width:100%;justify-content:center;font-size:15px;padding:15px 20px;margin-top:4px}
#contact .leadform__note{font-size:11.5px;line-height:1.55;color:#8b84a3;margin-top:10px}
@media(max-width:1000px){
  #contact .leadwrap{grid-template-columns:1fr;gap:30px}
  .btn--wa{width:100%;justify-content:center}
}
/* ---- materials grid ---- */
/* 1×2：砂糖左、纸棒右；卡内图与规格各半 */
.matgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px;align-items:stretch}
.matgrid .matcard{grid-template-columns:1fr 1fr;grid-template-rows:1fr;min-height:0}
.matgrid .matcard__media{position:relative;min-height:290px;padding:0;background:linear-gradient(150deg,#FBF7FF 0%,#F5F0FB 100%);overflow:hidden;border-radius:16px}
.matgrid .matcard__media img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);
  object-fit:contain;display:block;border-radius:10px}
.matgrid .matcard__body{padding:22px 20px;align-self:center}
.matgrid .matcard__t{font-size:14px;line-height:1.35}
.matgrid .matcard__rows{margin-top:12px}
.matgrid .matcard__rows > div{display:block;padding:8px 0;border-bottom:1px dashed var(--line-soft)}
.matgrid .matcard__rows dt{color:#9A93B3;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px}
.matgrid .matcard__rows dd{margin:0;text-align:left;max-width:none;font-size:12px;font-weight:700;line-height:1.45;color:#1A1436}
.matgrid .matcard__note{margin-top:10px;font-size:10.5px;line-height:1.6;color:var(--ink-2)}
@media(max-width:820px){
  .matgrid{grid-template-columns:1fr}
  .matgrid .matcard__media{min-height:250px}
}
@media(max-width:600px){
  .matgrid .matcard{grid-template-columns:1fr}
  .matgrid .matcard__media{min-height:0;aspect-ratio:16/11}
  .matgrid .matcard__body{padding:18px 18px 20px}
}
/* ---- about v2 ---- */
.about2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:stretch}
.about2__l{display:flex;flex-direction:column;min-width:0}
.about2__l .she__title{font-size:clamp(25px,2.5vw,34px);line-height:1.14;letter-spacing:-.02em}
.about2__prose{margin-top:20px}
.about2__p{font-size:14px;line-height:1.8;color:#4A4460;margin:0 0 15px}
.about2__p:last-child{margin-bottom:0}
.about2__p strong{color:#1A1436;font-weight:800}
.about2__addr{display:flex;align-items:flex-start;gap:7px;margin:auto 0 0;padding-top:15px;
  border-top:1px solid rgba(30,20,60,.09);font-size:11.5px;line-height:1.55;color:#7A7392}
.about2__addr svg{flex:0 0 14px;margin-top:1px;color:#E84C3D}

.about2__r{display:flex;flex-direction:column;min-width:0}
.fshots{position:relative;width:100%;margin:0;border-radius:20px;overflow:hidden;background:#E9E3F6;
  aspect-ratio:16/9;box-shadow:0 20px 50px -30px rgba(30,20,60,.55)}
.fshots__track{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:100%;grid-auto-rows:100%;width:100%;height:100%;will-change:transform;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.fshots__track img{width:100%;height:100%;object-fit:cover;display:block}
.fshots__cap{position:absolute;right:11px;bottom:11px;display:inline-flex;align-items:center;gap:6px;
  max-width:calc(100% - 96px);padding:7px 12px;border-radius:999px;
  font-size:10.5px;font-weight:600;color:#fff;letter-spacing:.01em;
  background:rgba(16,10,36,.46);border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2)}
.fshots__cap svg{flex:0 0 12px;opacity:.9}
.fshots__dots{position:absolute;left:13px;bottom:13px;display:flex;gap:6px;z-index:2}
.fshots__dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;
  background:rgba(255,255,255,.5);cursor:pointer;transition:width .25s ease,background .25s ease}
.fshots__dots button.is-on{width:20px;background:#fff}

.aboutstats2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.stat2{background:#fff;border-radius:16px;padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 26px rgba(30,20,60,.06)}
.stat2__n{display:block;font-family:var(--font-display);font-size:30px;line-height:1;font-weight:800;
  color:#1A1436;letter-spacing:-.025em}
.stat2__t{display:block;margin-top:7px;font-size:12.5px;font-weight:800;line-height:1.3;color:#1A1436}
.stat2__d{display:block;margin-top:5px;font-size:11px;line-height:1.55;color:#7A7392}
@media(max-width:1000px){
  .about2{grid-template-columns:1fr;gap:32px}
  .about2__addr{padding-top:16px}
}
@media(max-width:560px){
  .aboutstats2{gap:10px}
  .stat2{padding:15px 14px 14px}
  .stat2__n{font-size:26px}
  .stat2__t{font-size:12px}
  .stat2__d{font-size:10.5px}
  .fshots__cap{font-size:9.5px;padding:6px 9px;right:8px;bottom:8px;max-width:calc(100% - 74px)}
}

/* ---- ROI simulator (cotton #economics) ---- */
.calc2--roi{grid-template-columns:.92fr 1.08fr}
.calc2--roi .calc2__side{padding:30px 30px 26px;display:flex;flex-direction:column}
.calc2--roi .calc2__out{padding:28px 30px 26px;gap:0}
.calc2__out .bi{display:inline}

.roigrp{margin:0 0 18px;font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#9A93B3}
.calc2--roi .field{margin-bottom:18px}
.roirng{display:flex;justify-content:space-between;margin-top:7px;font-size:9.5px;color:#A9A2BD;font-variant-numeric:tabular-nums}

/* advanced inputs (native details, works without JS) */
.roiadv{margin:4px 0 0;padding-top:16px;border-top:1px dashed rgba(30,20,60,.14);background:none}
.roiadv__sum{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;
  font-size:12.5px;font-weight:800;color:#1A1436;letter-spacing:-.01em;transition:color .2s ease}
.roiadv__sum::-webkit-details-marker{display:none}
.roiadv__sum::before{content:"+";flex:0 0 19px;width:19px;height:19px;border-radius:99px;display:grid;place-items:center;
  background:rgba(232,76,61,.10);color:#E84C3D;font-size:15px;font-weight:700;line-height:1;
  transition:transform .25s ease,background .25s ease}
.roiadv__sum:hover{color:#E84C3D}
.roiadv[open] .roiadv__sum::before{transform:rotate(45deg);background:rgba(232,76,61,.16)}
.roiadv__body{padding-top:18px}
.roiadv__note{margin:12px 0 0;font-size:10.5px;line-height:1.65;color:#8B84A3}
.roichips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.roichips button{border:1px solid rgba(30,20,60,.13);background:#fff;border-radius:99px;padding:6px 11px;
  font-family:inherit;font-size:10.5px;font-weight:700;color:#4A4460;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.roichips button:hover{border-color:#E84C3D;color:#E84C3D}
.roichips button.is-on{background:#1A1436;border-color:#1A1436;color:#fff}
.roiwhy{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(30,20,60,.09)}
.roiwhy li{font-size:11.5px;line-height:1.62;color:#5B5473}
.roiwhy svg{color:#E84C3D}

/* right panel: three layers */
.roifsum{margin:0 0 16px;font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,244,255,.42)}
.roilayer{padding:16px 0 9px;border-top:1px solid rgba(248,244,255,.13)}
.roilayer:first-of-type{border-top:0;padding-top:0}
.roilayer--last{padding-bottom:0}
.roilayer__k{margin:0 0 11px;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,244,255,.48)}
.roirow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:5px 0;
  font-size:12.5px;line-height:1.45;color:rgba(248,244,255,.70)}
.roirow b{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:#fff;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.roirow--net{margin-top:7px;padding-top:12px;border-top:1px solid rgba(248,244,255,.16)}
.roirow--net > span:first-child{color:#fff;font-weight:700}
.roirow--net b{font-size:23px;font-weight:700}
.roirow__v{display:inline-flex;align-items:baseline;gap:5px}
.roirow__v i{font-style:normal;font-size:10.5px;color:rgba(248,244,255,.45);letter-spacing:.02em}
.roilayer__n{margin:9px 0 0;font-size:10.5px;line-height:1.7;color:rgba(248,244,255,.46)}
.roilayer__n b{color:rgba(248,244,255,.85);font-weight:700;font-variant-numeric:tabular-nums}
.roipay{display:flex;align-items:baseline;gap:9px;margin:2px 0 0}
.roipay b{font-family:var(--font-display);font-size:54px;line-height:.95;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;background:linear-gradient(115deg,#FF8A7A,#F268A8 52%,#B08BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.roipay span{font-size:12px;color:rgba(248,244,255,.55);letter-spacing:.02em}
.roicta{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:20px;padding:11px 18px;
  border-radius:99px;font-size:12.5px;font-weight:700;color:#fff;text-decoration:none;
  background:linear-gradient(115deg,#E84C3D,#F268A8);box-shadow:0 14px 28px -16px rgba(232,76,61,.9);
  transition:transform .2s ease,box-shadow .2s ease}
.roicta:hover{transform:translateY(-1px);box-shadow:0 18px 32px -16px rgba(232,76,61,.95)}
.roicta__note{margin:9px 0 0;font-size:10.5px;color:rgba(248,244,255,.40)}

@media(max-width:1000px){
  .calc2--roi{grid-template-columns:1fr}
  .calc2--roi .calc2__side,.calc2--roi .calc2__out{padding:26px 22px}
}
@media(max-width:620px){
  .roipay b{font-size:42px}
  .roirow--net b{font-size:20px}
  .roilayer{padding:14px 0 3px}
  .roicta{align-self:stretch;justify-content:center}
}

/* ---- why this cabinet (cotton #engineering) ---- */
.wstats{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.wstats li{background:#fff;border:1px solid rgba(255,255,255,.92);border-radius:16px;padding:16px 18px;
  box-shadow:0 14px 30px -26px rgba(30,20,60,.55)}
.wstats b{display:block;font-family:var(--font-display);font-size:26px;line-height:1;font-weight:800;
  letter-spacing:-.03em;color:#1A1436}
.wstats span{display:block;margin-top:7px;font-size:10.5px;line-height:1.45;color:#7A7392}

.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.wcard{background:#fff;border:1px solid rgba(255,255,255,.92);border-radius:22px;overflow:hidden;
  box-shadow:0 22px 46px -34px rgba(30,20,60,.5);
  transition:transform .25s ease,box-shadow .25s ease}
.wcard:hover{transform:translateY(-2px);box-shadow:0 28px 54px -32px rgba(30,20,60,.55)}
.wcard__media{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:#F1ECFA}
.wcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.wcard:hover .wcard__media img{transform:scale(1.03)}
.wcard__n{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:31px;height:31px;
  border-radius:99px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 18px -10px rgba(30,20,60,.6);
  font-family:var(--font-display);font-size:11.5px;font-weight:800;color:#1A1436;letter-spacing:-.02em}
.wcard__body{padding:22px 24px 20px}
.wcard__k{margin:0;font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#E84C3D}
.wcard__t{margin:8px 0 0;font-family:var(--font-display);font-size:18px;line-height:1.31;
  font-weight:700;letter-spacing:-.02em;color:#1A1436}
.wcard__d{margin:9px 0 0;font-size:12.5px;line-height:1.72;color:#4A4460}
.wcard__specs{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.wcard__specs li{display:flex;gap:8px;font-size:11.5px;line-height:1.55;color:#5B5473}
.wcard__specs svg{flex:0 0 13px;margin-top:2px;color:#E84C3D}
.wcard__pat{display:flex;align-items:center;gap:6px;margin:16px 0 0;padding-top:13px;
  border-top:1px solid rgba(30,20,60,.08);
  font-size:10px;font-weight:700;letter-spacing:.04em;color:#9A93B3}
.wcard__pat svg{flex:0 0 12px;color:#BDB6CE}
.wfoot{margin:18px 0 0;font-size:10.5px;line-height:1.65;color:#8B84A3;text-align:center}

@media(max-width:900px){
  .wstats{grid-template-columns:1fr 1fr}
  .wgrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .wstats{gap:10px}
  .wstats li{padding:13px 14px}
  .wstats b{font-size:22px}
  .wcard__body{padding:18px 18px 16px}
  .wcard__t{font-size:16.5px}
  .wcard__media{aspect-ratio:4/3}
}

/* ---- venue cases v3 (cotton #venues) ---- */
#venues .cases__track{grid-auto-columns:344px}
.cases__track .quote{padding:0;display:flex;flex-direction:column;background:#fff}
.cases__track .quote__media{overflow:hidden}
.cases__track .quote__media img{height:196px;object-fit:cover;display:block;filter:none}
.cases__track .quote__ph{display:grid;place-items:center;height:196px;
  background:linear-gradient(150deg,#1B1236 0%,#2B1A52 55%,#3E2168 100%);
  font-family:var(--font-display);font-size:104px;line-height:1;color:#fff;opacity:.92;
  text-shadow:0 12px 40px rgba(232,76,61,.45)}
.cases__track .quote__flag{top:12px;left:12px;padding:5px 10px;border-radius:99px;
  background:rgba(16,10,36,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  font-size:8.5px;font-weight:700;letter-spacing:.11em;line-height:1.3;max-width:calc(100% - 24px)}
.cases__track .quote__in{padding:18px 20px 18px;display:flex;flex-direction:column;flex:1}
.cases__track .stars{margin-bottom:9px}
.cases__track .stars i{font-size:12px}
.cases__track blockquote{margin:0;font-size:14.5px;line-height:1.45;text-align:left;letter-spacing:-.015em}
.cases__track .quote__note{font-size:12px;line-height:1.7;margin-top:9px;text-align:left}
.cases__track .quote__metrics{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 0;padding:0}
.cases__track .quote__metrics li{padding:5px 9px;border-radius:8px;background:rgba(124,92,252,.075);
  color:#4A4460;font-size:10px;font-weight:700;letter-spacing:.01em;line-height:1.35}
.cases__track .quote__who{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);
  /* .quote figcaption（0,1,1）会把方向设成 column，这里必须用 (0,2,0) 压过去，头像才在名字左边 */
  flex-direction:row;align-items:center;gap:11px}
.cases__track .quote__ava{width:36px;height:36px;background:var(--grad);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:-.01em;
  overflow:hidden;box-shadow:0 0 0 1.5px rgba(26,20,54,.07),0 4px 10px -6px rgba(58,32,120,.45)}
.cases__track .quote__ava img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.cases__track .quote__who b{font-size:11.5px;line-height:1.35}
.cases__track .quote__who i{font-size:10px;line-height:1.35;margin-top:2px}

@media(max-width:620px){
  .cases__track{grid-auto-columns:minmax(268px,88vw)}
  .cases__track .quote__media img,.cases__track .quote__ph{height:172px}
}

/* ---- about contact card (cotton #about) ---- */
.about2__foot{margin-top:auto}
.about2__contact{display:flex;align-items:center;gap:11px;margin:18px 0 0;padding:12px 13px;
  border-radius:16px;background:#fff;border:1px solid rgba(255,255,255,.94);
  box-shadow:0 14px 30px -24px rgba(30,20,60,.5);text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.about2__contact:hover{transform:translateY(-1px);border-color:rgba(232,76,61,.35);
  box-shadow:0 18px 34px -22px rgba(30,20,60,.55)}
.about2__av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-family:var(--font-display);font-size:13px;font-weight:800;line-height:1}
.about2__c{min-width:0;display:flex;flex-direction:column;gap:2px}
.about2__c b{font-size:12.5px;font-weight:800;color:#1A1436;letter-spacing:-.01em}
.about2__c i{font-style:normal;font-size:10.5px;line-height:1.45;color:#7A7392}
.about2__c i .bi{display:inline}
.about2__c i .num{color:#3A3355;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.about2__wa{margin-left:auto;flex:0 0 auto;width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;background:rgba(18,161,80,.11);color:#12A150}
.about2__foot .about2__addr{margin:14px 0 0}

@media(max-width:560px){
  .about2__contact{padding:11px 12px;gap:10px}
  .about2__c b{font-size:12px}
  .about2__c i{font-size:10px}
}

/* ---- certificate photo rail (cotton #about) ---- */
.certblock__warn{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:10px 13px;
  border-radius:12px;background:rgba(232,76,61,.045);border:1px solid rgba(232,76,61,.15);
  font-size:11.5px;line-height:1.62;color:#6B4A45}
.certblock__warn svg{flex:0 0 13px;margin-top:2px;color:#E84C3D}
.certblock__warn .bi{display:inline}

.certfig{margin:0;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:14px;border:1px solid rgba(255,255,255,.94);
  box-shadow:0 18px 34px -28px rgba(30,20,60,.55);scroll-snap-align:start}
.certfig__m{aspect-ratio:520/737;overflow:hidden;background:#F7F3FD}
.certfig__m img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.certfig figcaption{padding:11px 12px 13px;border-top:1px solid rgba(30,20,60,.07)}
.certfig figcaption b{display:block;font-family:var(--font-display);font-size:12px;font-weight:800;
  letter-spacing:-.01em;color:#1A1436}
.certfig figcaption span{display:block;margin-top:3px;font-size:10px;line-height:1.4;color:#8B84A3}
.certcar__track .certfig{scroll-snap-align:start}

@media(max-width:620px){
  .certcar__track{grid-auto-columns:calc((100% - 12px) / 2)}
  .certfig figcaption{padding:10px 10px 11px}
  .certfig figcaption b{font-size:11px}
  .certfig figcaption span{font-size:9.5px}
  .certblock__warn{font-size:11px}
}

/* ---- certificate marquee (cotton #about) ---- */
.certmarq{position:relative;margin-top:16px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.2%,#000 97.8%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 2.2%,#000 97.8%,transparent 100%)}
.certmarq__strip{display:flex;width:max-content;will-change:transform;
  animation:certmarq 52s linear infinite}
@keyframes certmarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.certmarq__strip{animation:none}}

.certmarq .certfig{flex:0 0 auto;width:150px;margin-right:14px}
.certmarq .certfig__m{aspect-ratio:520/737}
.certmarq .certfig figcaption{padding:9px 10px 10px}
.certmarq .certfig figcaption b{font-size:10.5px}
.certmarq .certfig figcaption span{font-size:9px;margin-top:2px;line-height:1.35}

@media(max-width:620px){
  .certmarq .certfig{width:116px;margin-right:10px}
  .certmarq__strip{animation-duration:44s}
  .certmarq .certfig figcaption{padding:8px 8px 9px}
  .certmarq .certfig figcaption b{font-size:9.5px}
  .certmarq .certfig figcaption span{font-size:8.5px}
}

/* ================= motion & mobile polish ================= */

/* 1 · 滚动揭示：类名由 JS 挂载，脚本不跑就完全可见 */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translate3d(0,18px,0);
    transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--d,0ms)}
  .reveal.is-in{opacity:1;transform:none}
}

/* 2 · 顶部阅读进度（2px 渐变） */
.nav__prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;border-radius:0 2px 2px 0;
  background:var(--grad);opacity:.9;pointer-events:none;transition:width .1s linear}

/* 3 · 数值跳变 */
@keyframes numTick{0%{transform:translateY(5px);opacity:.35}100%{transform:none;opacity:1}}
[data-res].is-tick{animation:numTick .3s cubic-bezier(.22,.61,.36,1)}

/* 4 · 案例卡悬停 */
.cases__track .quote{transition:transform .25s ease,box-shadow .25s ease}
.cases__track .quote:hover{transform:translateY(-3px);box-shadow:0 26px 50px -34px rgba(30,20,60,.5)}

/* 5 · 移动端：联系区单列。1fr 的最小值是 max-content，卡片里有个长号码撑到 454px，
   必须用 minmax(0,1fr) 才能真正压回容器宽度 */
@media(max-width:900px){
  #contact .leadwrap{grid-template-columns:minmax(0,1fr);gap:34px}
  .cta2{grid-template-columns:minmax(0,1fr)}
  .cta2 > *{min-width:0}
  .lead__f input,.lead__f textarea{min-width:0}
}

/* 6 · 移动端：对比表首列吸附 + 右侧渐隐提示还能横滑 */
@media(max-width:820px){
  .ctable-wrap{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%)}
  .ctable--spec th[scope="row"]{position:sticky;left:0;z-index:2;background:#FBF9FF;
    box-shadow:1px 0 0 var(--line)}
  .ctable--spec thead th:first-child{position:sticky;left:0;z-index:3;background:#FBF9FF}
}

/* 7 · 触摸设备：热区拉到 ≥44px（视觉尺寸不变，用伪元素扩） */
@media(hover:none){
  .nav__links a{display:inline-flex;align-items:center;min-height:44px}
  .msel__tab{min-height:44px}
  .cases__dots button,.fshots__dots button{position:relative}
  .cases__dots button::after,.fshots__dots button::after{content:"";position:absolute;inset:-13px -5px}
  .roichips button,.chips button{min-height:40px;padding-left:14px;padding-right:14px}
  .cases__btn{min-width:44px;min-height:44px}
}

/* 8 · 窄屏微调 */
@media(max-width:620px){
  .she__title{letter-spacing:-.025em}
  .wcard__pat{font-size:9.5px}
  #venues .cases__track{scroll-padding-left:2px}
}

/* ---- pattern library strip (cotton #models) ---- */
.patlib { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.patlib__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.patlib__cap b { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.patlib__cap span { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }

.patrail { margin-top: 15px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.patrail__strip { --t: 128px; display: flex; width: max-content; will-change: transform;
  animation: patDrift 1080s linear infinite; }
/* 位置用「列/行 × 格宽」算，改 --t 就能整体缩放，不用重算每个 background-position */
.patrail__i { flex: 0 0 auto; display: block; width: var(--t); height: var(--t);
  margin-right: calc(var(--t) * .2);
  background-image: var(--pat); background-repeat: no-repeat;
  background-size: calc(var(--t) * var(--cols)) calc(var(--t) * var(--rows));
  background-position: calc(var(--t) * var(--c) * -1) calc(var(--t) * var(--r) * -1); }
/* sprite 有 297 KB，而这一带在第 8 屏 —— 滚到两屏内才让浏览器下（JS 加 .is-near），
   首屏带宽全留给视频和机型图。JS 没跑时由模板里的 <noscript> 兜底。 */
.patlib:not(.is-near) .patrail__i { background-image: none; }
@keyframes patDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .patrail__strip { animation: none; } }
@media (max-width: 900px) { .patrail__strip { --t: 104px; } .patlib__cap > span { display: none; } }
@media (max-width: 620px) { .patrail__strip { --t: 84px; } }

/* ---- also in the fleet (cotton #fleet-more) ---- */
.rechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.rechead__l { max-width: 620px; }
.rechead__r { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; }
.rechead__all { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: 12px; font-weight: 700; color: var(--ink); padding-bottom: 2px;
  border-bottom: 1px solid rgba(26,20,54,.28); transition: opacity .2s ease, border-color .2s ease; }
.rechead__all:hover { opacity: .62; border-color: rgba(26,20,54,.6); }
.rechead__nav { display: flex; gap: 8px; }

.recrail { margin-top: 26px; position: relative; }
.recrail__track { display: grid; grid-auto-flow: column; grid-auto-columns: 272px; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 2px 2px 6px; }
.recrail__track::-webkit-scrollbar { display: none; }

.rcard { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease, border-color .28s ease; }
@media (hover: hover) {
  .rcard:hover { transform: translateY(-3px); border-color: rgba(232,76,61,.22);
    box-shadow: 0 22px 40px -28px rgba(58,32,120,.5); }
  .rcard:hover .rcard__go { background: var(--ink); border-color: var(--ink); color: #fff; }
}
/* 图是竖构图，必须把比例钉住并用绝对定位 contain —— 否则 img 的 min-content 高度会顶破
   aspect-ratio，媒体区变成行高撑开的方块（线上实测 270×270） */
.rcard__m { position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(160deg, #FBF7FF 0%, #F2ECFA 100%); }
.rcard__m img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px);
  object-fit: contain; display: block; }
.rcard__b { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.rcard__n { font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.rcard__t { font-size: 11.5px; line-height: 1.55; color: var(--ink-2); min-height: 36px; }
.rcard__f { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; }
.rcard__f b { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.rcard__f em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: var(--ink-3); margin-left: 5px; }
.rcard__go { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2);
  transition: background .25s ease, color .25s ease, border-color .25s ease; }

@media (max-width: 900px) {
  .rechead { flex-direction: column; align-items: flex-start; gap: 18px; }
  .rechead__r { width: 100%; justify-content: space-between; }
  .recrail__track { grid-auto-columns: 250px; }
}
@media (max-width: 620px) {
  .recrail__track { grid-auto-columns: minmax(232px, 78vw); }
  .rcard__t { min-height: 0; }
}

/* ===== ice cream landing page (/ice-cream-vending-machine/) =====
   只在这一页出现的组件：口味矩阵、杯型规格图、点位网格、单条可核验评价。
   共享组件（lhero/metric4/msel/ctable/wcard/matgrid/calc2/hub/cases/qitem）一律复用，不覆盖。 */

/* 口味矩阵：三张图文卡（奶浆 / 果酱 / 小料）。
   版式参考甲方给的样稿：编号 + 名称 + 一句定位 + 实物图 + 底部胶囊；
   照片是纯白底，卡片也给纯白，两者无缝，不抠图。 */
.flavmat{margin-top:44px;padding-top:30px;border-top:1px solid var(--line-soft)}
.flavn{display:flex;align-items:baseline;gap:10px;flex:0 0 auto;margin:0}
.flavn b{font-family:var(--font-display);font-size:48px;line-height:1;font-weight:800;letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.flavn span{display:block;max-width:190px;font-size:10.5px;line-height:1.45;color:var(--ink-3)}

.flavcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.flavcard{display:flex;flex-direction:column;padding:22px 20px 20px;border-radius:20px;
  background:#fff;border:1px solid rgba(30,20,60,.07);
  box-shadow:0 22px 46px -34px rgba(30,20,60,.45)}
.flavcard__hd{display:flex;align-items:baseline;gap:9px;margin:0}
.flavcard__n{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.06em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.flavcard__k{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.015em;color:#1A1436}
.flavcard__s{margin:5px 0 0;font-size:11.5px;line-height:1.5;color:#8B84A3}
.flavcard__m{margin:14px 0 0;background:#fff;border-radius:12px;overflow:hidden}
.flavcard__m img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.flavcard__chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:auto 0 0;padding:15px 0 0;
  border-top:1px solid rgba(30,20,60,.07)}
.flavcard__chips li{padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:11px;font-weight:600;line-height:1.35;color:#1A1436}
.flavnote{margin:16px 0 0;font-size:10.5px;line-height:1.65;color:var(--ink-3)}
@media(max-width:980px){.flavcards{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .flavcards{grid-template-columns:1fr}
  .flavn b{font-size:42px}
  .flavcard{padding:18px 16px 16px}
}

/* 杯型规格图：inline SVG，走 matgrid 的绝对定位媒体位 */
.matgrid .matcard__media .cupspec{position:absolute;inset:0;width:100%;height:100%;
  padding:16px 18px;box-sizing:border-box;display:block}

/* 计算器：单杯成本滑块下的口径说明 + 页脚注释 */
.field__hint{margin:7px 0 0;font-size:10px;line-height:1.6;color:var(--ink-3)}
.calcnudge{max-width:840px;margin:22px auto 0;font-size:10.5px;line-height:1.72;
  color:var(--ink-3);text-align:center}

/* 点位网格：替代棉花糖页的现场照片轮播——这台机器还没有可公开的点位照片，
   与其拿工厂图冒充客户现场，不如把「六个点位为什么成立」写清楚 */
.isites{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.isite{position:relative;padding:24px 22px 22px;border-radius:18px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.94);
  box-shadow:0 18px 40px -34px rgba(30,20,60,.55);
  transition:transform .25s ease,box-shadow .25s ease}
.isite:hover{transform:translateY(-3px);box-shadow:0 26px 50px -32px rgba(30,20,60,.42)}
.isite__n{position:absolute;top:17px;right:20px;font-family:var(--font-display);
  font-size:11px;font-weight:800;letter-spacing:.1em;color:#C9C2DC}
.isite__k{margin:0;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#E84C3D}
.isite__t{margin:7px 0 0;font-family:var(--font-display);font-size:16px;line-height:1.32;
  font-weight:700;letter-spacing:-.015em;color:#1A1436}
.isite__d{margin:9px 0 0;font-size:12px;line-height:1.72;color:#5B5473}

/* 单条可核验评价：深色卡，克制到只有一句引语和一个署名 */
.isquote{max-width:840px;margin:34px auto 0;padding:30px 32px 26px;border-radius:22px;
  background:linear-gradient(150deg,#1A1436 0%,#2A1A4F 100%);color:var(--cream)}
.isquote__k{margin:0;font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(248,244,255,.5)}
.isquote__t{margin:14px 0 0;font-family:var(--font-display);font-size:clamp(17px,1.9vw,22px);
  line-height:1.5;font-weight:600;letter-spacing:-.02em}
.isquote__m{display:inline-block;margin:16px 0 0;padding:6px 13px;border-radius:999px;
  background:rgba(232,76,61,.2);border:1px solid rgba(232,76,61,.42);
  font-size:11px;font-weight:700;color:#FFD9D3}
.isquote__n{margin:16px 0 0;font-size:11px;line-height:1.7;color:rgba(248,244,255,.55)}
.isquote .quote__who{margin-top:20px;border-top-color:rgba(248,244,255,.14)}
.isquote .quote__ava{width:38px;height:38px;flex:0 0 38px;border-radius:50%;overflow:hidden;
  background:var(--grad);color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-size:14px;font-weight:700}
.isquote .quote__ava img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.isquote .quote__who b{color:#fff;font-size:13px}
.isquote .quote__who i{color:rgba(248,244,255,.5)}

/* why 卡片脚注里的报告编号 / 冷媒 / 功率，要压过灰色的标签 */
.wcard__pat b{color:#5B5473;font-weight:800;letter-spacing:.02em}

@media(max-width:1000px){
  .isites{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .flavmat__head{flex-direction:column;align-items:flex-start;gap:14px}
  .flavmat__row{grid-template-columns:1fr;gap:9px;padding:12px 14px}
  .flavmat__cap span{font-size:11px}
}
@media(max-width:620px){
  .flavmat__n b{font-size:36px}
  .isites{grid-template-columns:1fr;gap:12px}
  .isite{padding:20px 18px 18px}
  .isquote{padding:24px 20px 20px;border-radius:18px}
}

/* ---- ice cream cup ribbon (ice cream #models) ----
   32 个单杯（16 单色 + 16 双色交替）走一张 8×4 雪碧图，DOM 放两遍 + translate3d(-50%) 无缝循环。
   格宽 --t、格高 1.1333×--t，改 --t 整体缩放，不用重算 background-position。 */
.cuprail{margin-top:18px;padding-bottom:10px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%)}
.cuprail__strip{--t:120px;display:flex;width:max-content;will-change:transform;
  animation:cupDrift 260s linear infinite}
.cuprail__i{--ch:calc(var(--t) * 1.1333);display:block;flex:0 0 auto;
  width:var(--t);height:var(--ch);margin-right:calc(var(--t) * .16);
  background-image:var(--cups);background-repeat:no-repeat;
  background-size:calc(var(--t) * var(--cols)) calc(var(--ch) * var(--rows));
  background-position:calc(var(--t) * var(--c) * -1) calc(var(--ch) * var(--r) * -1)}
@keyframes cupDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion: reduce){.cuprail__strip{animation:none}}
@media (max-width:900px){.cuprail__strip{--t:104px}}
@media (max-width:620px){.cuprail__strip{--t:86px}}

/* ==========================================================================
   ⚠ 自 2026-11-12 起本文件的「页面专属样式」不再追加到这里。
   新落地页请建 assets/css/page-<seo-id>.css（shell.php 会按 seo id 自动注入），
   否则两个人各做一页时必然在同一文件末尾打架。
   本文件只保留共享层：token、.wrap/.band/.she、通用卡片骨架、导航与页脚。
   ========================================================================== */

/* ==========================================================================
   多页共用的组件变体（2026-11-12 从 page-phonecase.css 提回共享层）
   手机壳 / 拼图 / 雪花冰三个页都在用，所以不该留在某一页的专属文件里。
   ========================================================================== */

/* spec table: the third column is prose, not a number */
.ctable--pc { min-width: 720px; }
.ctable--pc tbody th { width: 24%; white-space: normal; }
.ctable--pc .ctable__note-cell { white-space: normal; min-width: 260px; color: var(--ink-2); font-size: 12.5px; }

/* placement cards (no venue photography for this cabinet yet) */
.quote__media--site { height: 176px; display: grid; place-items: center; }
.quote__num {
  font-family: var(--font-display); font-size: 86px; font-weight: 800; line-height: 1;
  letter-spacing: -.05em; color: rgba(248, 244, 255, .88);
}
.cases__track > .quote:nth-child(1) .quote__media--site { background: linear-gradient(150deg, #1A1436, #3B2660 58%, #6E3358); }
.cases__track > .quote:nth-child(2) .quote__media--site { background: linear-gradient(150deg, #171B36, #263A63 58%, #2F6C7A); }
.cases__track > .quote:nth-child(3) .quote__media--site { background: linear-gradient(150deg, #211430, #4A2352 58%, #8A3A6A); }
.cases__track > .quote:nth-child(4) .quote__media--site { background: linear-gradient(150deg, #131A2E, #2B3D5C 58%, #4A7FA0); }
.cases__track > .quote:nth-child(5) .quote__media--site { background: linear-gradient(150deg, #231726, #5A2B44 58%, #A34A46); }
.cases__track > .quote:nth-child(6) .quote__media--site { background: linear-gradient(150deg, #16182B, #33324F 58%, #6C5A82); }

/* why-cards without photography: the number moves inside the body */
.wcard--text .wcard__body { padding: 26px 24px 24px; }
.wcard__n--flat {
  position: static; display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0 0 15px; border-radius: 12px;
  background: linear-gradient(140deg, #E84C3D, #F268A8 55%, #7C5CFC);
  color: #fff; box-shadow: 0 10px 20px -12px rgba(232, 76, 61, .8);
}
.wcard--text { background: linear-gradient(180deg, #FFFFFF, #FCFAFF); }

/* ---- sites: photo cards (ice cream #venues) ----
   六张场景图落在卡片顶部，4:3 原始比例不裁切（合成时机器底部留了 ~22% 地面余量）。
   只在加了 --photo 的容器里覆盖 padding，别的页面用 .isite 不受影响。 */
.isites--photo .isite{padding:0 22px 22px;overflow:hidden}
.isite__m{margin:0 -22px 16px;aspect-ratio:4/3;overflow:hidden;background:#EDE8F5}
.isite__m img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.isite:hover .isite__m img{transform:scale(1.025)}
.isites--photo .isite__n{top:12px;right:12px;padding:3px 9px 2px;border-radius:999px;
  background:rgba(255,255,255,.9);color:#1A1436;font-size:10px;
  box-shadow:0 4px 12px -6px rgba(20,12,40,.5)}
@media (max-width:620px){
  .isites--photo .isite{padding:0 18px 18px}
  .isite__m{margin:0 -18px 14px}
}

/* ---- sites: four operator quotes (ice cream #venues) ----
   1 条大卡 → 4 条两列。卡内顺序：小标 / 引用 / 指标胶囊 / 场景说明 / 署名。
   .isquote__n 用 margin-top:auto 顶到卡底，两列等高时署名行对齐。 */
.iquotes{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1160px;
  margin:34px auto 0;align-items:stretch}
.iquotes .isquote{max-width:none;margin:0;padding:26px 28px 22px;
  display:flex;flex-direction:column}
.iquotes .isquote__t{font-size:clamp(15px,1.22vw,18px);line-height:1.54}
.iquotes .isquote__m{margin-top:14px;align-self:flex-start}
.iquotes .isquote__n{margin-top:auto;padding-top:14px;font-size:10.5px;line-height:1.68}
.iquotes .isquote .quote__who{margin-top:16px;padding-top:15px}
.iquotes__note{max-width:840px;margin:22px auto 0;font-size:10.5px;line-height:1.72;
  color:var(--ink-3);text-align:center}
@media (max-width:1000px){
  .iquotes{grid-template-columns:1fr;gap:14px}
  .iquotes .isquote{padding:22px 22px 20px}
}

/* ==========================================================================
   三视图轮播 + 六项参数（.vmodel / .vcar / .vspec）   ·  2026-11-13
   单机型落地页共用：左边三个视角轮播，右边只列硬参数。
   取代原来「每视角一个 tab + 每视角一套视觉说明 + 下方带解释列的完整表格」——
   那套结构把同一组数据在六个页面上重复了四遍。
   ========================================================================== */
/* 参数只有六行，图片有 500 高；顶端对齐会在右下方留一大块空，改垂直居中 */
.vmodel { display: grid; grid-template-columns: 1.02fr .98fr; gap: 46px; margin-top: 28px; align-items: center; }

.vcar { min-width: 0; }
.vcar__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 24px; border: 1px solid rgba(255,255,255,.9);
  background: radial-gradient(120% 100% at 50% 0%, #FDF8FF 0%, #F1E9FF 55%, #E7F3FF 100%);
  box-shadow: 0 30px 60px -46px rgba(58,32,120,.5);
}
.vcar__track::-webkit-scrollbar { display: none; }
.vcar__slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; margin: 0;
  padding: 26px 26px 44px; display: grid; place-items: center;
}
.vcar__slide img { width: auto; max-width: 100%; max-height: 500px; height: auto; object-fit: contain; }
.vcar__slide figcaption {
  position: absolute; left: 14px; bottom: 13px;
  padding: 6px 11px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.vcar__ctl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.vcar__nav { display: flex; gap: 8px; }
.vcar__btn {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border-radius: 999px; border: 1px solid var(--line-soft); background: #fff;
  color: var(--ink-2); font-size: 14px; line-height: 1; cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
@media (hover: hover) {
  .vcar__btn:hover:not(:disabled) { color: var(--ink); border-color: rgba(232,76,61,.35); background: #fff; }
}
.vcar__btn:disabled { opacity: .32; cursor: default; }

.vspec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.vspec__model { font-family: var(--font-display); font-size: 24px; line-height: 1.28; font-weight: 700; letter-spacing: -.02em; }
.vspec__price { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--red); }
.vspec__price em { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--ink-3); margin-left: 6px; }
.vspec__rows { margin: 18px 0 0; display: grid; gap: 0; }
.vspec__rows > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 11px 0; border-bottom: 1px dashed var(--line-soft); font-size: 12.5px;
}
.vspec__rows dt { color: var(--ink-3); white-space: nowrap; }
.vspec__rows dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 900px) {
  .vmodel { grid-template-columns: 1fr; gap: 26px; }
  .vcar__slide { padding: 20px 20px 40px; }
  .vcar__slide img { max-height: 420px; }
}

/* ---- sites: single-review carousel (ice cream #venues) ----
   4 条评价一次只显示一条，轨道 scroll-snap 翻页，复用 [data-carousel] 与 .cases__btn / .cases__dots。
   卡片 flex:0 0 100% → JS 的 step() 正好等于一页宽；轨道 align-items:stretch 让各页等高，翻页时高度不跳。 */
.iqueue{max-width:860px;margin:34px auto 0}
.iqueue__track{display:flex;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.iqueue__track::-webkit-scrollbar{display:none}
.iqueue .isquote{flex:0 0 100%;max-width:none;margin:0;scroll-snap-align:start;
  display:flex;flex-direction:column}
.iqueue .isquote__m{align-self:flex-start}
.iqueue .isquote__n{margin-top:auto;padding-top:16px}
.iqueue__ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.iqueue__ctrl .cases__dots{margin-top:0}
@media (max-width:620px){
  .iqueue .isquote{padding:24px 20px 20px;border-radius:18px}
  .iqueue__ctrl{gap:12px;margin-top:16px}
}

/* 故事段按钮：与两段正文拉开一点呼吸 */
.abstory__cta { margin-top: 26px; }

/* ==========================================================================
   关于页 · 公司与工厂实景（1 张 16:9 主图 + 4 张 4:3 场景图 + 灯箱）
   ========================================================================== */
.abgal { background: #fff; border-top: 1px solid var(--line-soft); }
.abgal__main { margin: 30px 0 0; }
.abgal__main img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 16px; display: block; cursor: zoom-in;
}
.abgal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.abgal__item { margin: 0; }
.abgal__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; display: block; cursor: zoom-in;
}
.abgal figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.abgal__main figcaption { font-size: 13px; }
.abgal img:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.abgal__tour {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  margin-top: 40px; padding: 28px 32px; border-radius: 18px;
  background: #F6F5FA; flex-wrap: wrap;
}
/* 左侧文案组：flex 子项默认 min-width:auto，长句会把右侧按钮挤出去 */
.abgal__tour-t { flex: 1 1 auto; min-width: 0; }
.abgal__tour-h {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; color: var(--ink);
}
.abgal__tour-p { margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); max-width: 52em; }

/* 灯箱：点击任意实景图放大 */
.abgal__lb {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(6, 4, 16, .975);
  display: flex; align-items: center; justify-content: center;
  padding: 4vw;
}
.abgal__lb[hidden] { display: none; }
.abgal__lb img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.abgal__lb-x {
  position: absolute; top: 18px; right: 22px;
  width: 42px; height: 42px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer;
}
.abgal__lb-x:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 760px) {
  .abgal__grid { grid-template-columns: 1fr; gap: 18px; }
  .abgal__tour { padding: 22px 20px; }
}

/* ------------------------------------------------------- privacy page */
.ppupd {
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.ppwrap {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.ppnav {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 9px;
  padding-right: 14px;
  border-right: 1px solid var(--line-soft);
}
.ppnav a {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3);
  transition: color .2s ease;
}
.ppnav a:hover { color: var(--red); }
.ppbody { max-width: 780px; }
.ppsec + .ppsec {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}
.ppsec__h {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.pplist {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.pplist li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-2);
}
.pplist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  opacity: .5;
}
.ppfoot {
  margin: 38px 0 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--red-tint);
  font-size: 13px;
  line-height: 1.78;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .ppwrap { grid-template-columns: 1fr; gap: 22px; }
  .ppnav {
    position: static;
    padding: 0 0 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
}
/* 手机上 12 条目录太占屏，直接收起，正文按顺序读 */
@media (max-width: 620px) {
  .ppnav { display: none; }
}

/* ------------------------------------------------------------- 404 page */
.nf-page { background: #0B0620; }
.nf {
  position: relative;
  padding: 132px 0 96px;
  color: var(--cream);
  overflow: hidden;
  background:
    radial-gradient(85% 80% at 50% -12%, rgba(124, 92, 252, 0.38) 0%, rgba(124, 92, 252, 0) 62%),
    radial-gradient(50% 45% at 96% 20%, rgba(232, 76, 61, 0.20) 0%, rgba(232, 76, 61, 0) 70%),
    linear-gradient(168deg, #150C33 0%, #17102F 52%, #0B0620 100%);
}
.nf__in { max-width: 800px; }
.nf__code {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(84px, 13vw, 158px);
  line-height: .86;
  font-weight: 800;
  letter-spacing: -.06em;
  background-image: linear-gradient(96deg, #FF9270 0%, #FF7FB4 34%, #C4A5FF 64%, #A9C8FF 86%, #DCEAFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf__t {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.14;
  letter-spacing: -.026em;
  font-weight: 700;
  color: #FBF7FF;
  text-wrap: balance;
}
.nf__p {
  margin: 18px 0 0;
  max-width: 35em;
  font-size: 15px;
  line-height: 1.88;
  color: rgba(248, 244, 255, 0.66);
}
.nf__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.nf__hint {
  margin: 28px 0 0;
  max-width: 42em;
  font-size: 12px;
  line-height: 1.75;
  color: rgba(248, 244, 255, 0.45);
}
body.mode-zh .nf__t { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.36; }

/* ==========================================================================
   关于页 · 双主体（制造 / 出口）两张卡
   ========================================================================== */
.abents {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 30px;
}
.abent {
  position: relative;
  padding: 28px 30px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line-soft);
}
.abent__tag {
  display: inline-block; margin: 0;
  padding: 5px 10px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em;
  background: var(--abent-tint, rgba(124, 92, 252, .1));
  color: var(--abent-ink, #5B3FD6);
}
.abent--mfg { --abent-tint: rgba(124, 92, 252, .11); --abent-ink: #5B3FD6; }
.abent--exp { --abent-tint: rgba(59, 130, 246, .11); --abent-ink: #1D5FBF; }
.abent__name {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700; line-height: 1.35; letter-spacing: -.01em;
  color: var(--ink);
}
.abent__body {
  margin: 10px 0 0;
  font-size: 12.8px; line-height: 1.75; color: var(--ink-2);
}
.abent__roles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  font-size: 11.5px; font-weight: 700; color: var(--abent-ink, #5B3FD6);
}
.abent__roles li { display: flex; align-items: center; }
.abent__roles li + li::before {
  content: "·"; margin: 0 8px; color: var(--ink-3); font-weight: 400;
}
@media (max-width: 760px) {
  .abents { grid-template-columns: 1fr; gap: 16px; }
  .abent { padding: 22px 20px 20px; }
  /* 手机上职责改成 chip，避免换行后行首出现孤零零的「·」 */
  .abent__roles { gap: 6px 8px; }
  .abent__roles li {
    background: var(--abent-tint, rgba(124, 92, 252, .1));
    padding: 4px 9px; border-radius: 999px;
  }
  .abent__roles li + li::before { display: none; }
}

/* 认证段底部：这句是行动引导，不能跟普通脚注一样灰 */
.abnote--cta {
  max-width: 780px;
  margin-top: 26px;
  padding: 16px 22px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  text-align: center;
}

/* ==========================================================================
   Nav: quote button + mobile drawer  ·  2026-11-14
   桌面端导航保持原样（三项 + 语言 + 报价按钮），≤860 收进左侧抽屉。
   抽屉结构参考 Sweet Robo：顶部品牌 + 报价胶囊 + 关闭键，中部大号菜单行，
   底部渐变 CTA。产品一项可展开，列出 models.json 里已建好的品类页。
   ========================================================================== */
.nav__burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.nav__burger-box { display: inline-grid; gap: 5px; width: 20px; }
.nav__burger-box i {
  display: block; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav__burger:active .nav__burger-box i { opacity: .6; }

/* ---- drawer ---- */
.md { position: fixed; inset: 0; z-index: 90; }
.md[hidden] { display: none; }
.md::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(12, 8, 28, .52); opacity: 0; transition: opacity .26s ease;
}
.md.is-open::before { opacity: 1; }

.md__panel {
  position: absolute; inset: 0 auto 0 0;
  width: min(420px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: 0 0 60px -20px rgba(20, 12, 40, .45);
  transform: translate3d(-102%, 0, 0);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.md.is-open .md__panel { transform: none; }

.md__top {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.md__brand {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; color: var(--ink); text-transform: uppercase;
}
.md__brand img { display: block; width: auto; height: 26px; }
.md__brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md__quote {
  margin-left: auto; flex: 0 0 auto;
  padding: 9px 15px; border-radius: 999px;
  background: linear-gradient(120deg, #E84C3D, #F268A8 55%, #7C5CFC);
  color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 10px 20px -14px rgba(232, 76, 61, .95);
}
.md__close {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: #fff;
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
}

.md__list { flex: 1 1 auto; overflow-y: auto; padding: 6px 16px 18px; -webkit-overflow-scrolling: touch; }
.md__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 17px 2px; border: 0; border-bottom: 1px solid var(--line-soft);
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.md__link.is-current, .md__link[aria-current="page"] { color: var(--red); }
.md__caret {
  flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .22s ease;
}
.md__group.is-open .md__caret { transform: rotate(-135deg) translateY(-2px); }
.md__sub { display: none; padding: 2px 0 12px; }
.md__group.is-open .md__sub { display: block; }
.md__sub a { display: block; padding: 11px 4px 11px 13px; border-left: 2px solid var(--line-soft); }
.md__sub a + a { margin-top: 2px; }
.md__sub a b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.md__sub a span { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); }
.md__sub a.is-current { border-left-color: var(--red); }
.md__sub a.is-current b { color: var(--red); }

.md__foot {
  flex: 0 0 auto; display: grid; gap: 12px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft); background: #FCFBFE;
}
.md__lang { justify-self: start; }
.md__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; border-radius: 999px;
  background: linear-gradient(120deg, #E84C3D, #F268A8 55%, #7C5CFC);
  color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 18px 34px -20px rgba(232, 76, 61, .95);
}
.md__cta:active { transform: translateY(1px); }

body.md-open { overflow: hidden; }

@media (max-width: 860px) {
  /* 两行挤压式导航下线，交给抽屉 */
  .nav__inner {
    height: 64px; padding: 0 20px;
    flex-wrap: nowrap; row-gap: 0; gap: 10px;
  }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__right { gap: 10px; }
}

@media (max-width: 620px) {
  .nav__inner { height: 62px; padding: 0 16px; gap: 8px; column-gap: 8px; }
  .nav__right { gap: 8px; }
  .nav__right .btn--sm { padding: 9px 11px; font-size: 10.5px; }
  .nav__burger { width: 36px; height: 36px; border-radius: 10px; }
  .nav__burger-box { width: 18px; }
  .md__panel { width: 100%; }
  .md__brand span { font-size: 11px; }
}
.md__foot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.md__num { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.md__num:hover { color: var(--ink); }

/* ≤420 把语言开关收进抽屉，给报价胶囊和汉堡腾位置；≤360 连胶囊也收起（抽屉里有整条 CTA） */
@media (max-width: 420px) { .nav__right .lpick { display: none; } }
@media (max-width: 360px) { .nav__right .btn--sm { display: none; } }
.nav__burger { color: var(--ink); }
.nav__burger-box i { background: currentColor; }

/* 深色页面（关于/404）上的语言切换 */
.page-dark .lpick__btn { border-color: rgba(248,244,255,.22); background: rgba(248,244,255,.08); color: rgba(248,244,255,.88); }
.page-dark .lpick__globe, .page-dark .lpick__chev { color: rgba(248,244,255,.6); }

/* 移动抽屉里的语言下拉：贴左展开 */
.md__lang .lpick__menu {
  left: 0;
  right: auto;
  top: auto;
  bottom: calc(100% + 10px);
}
.md__lang .lpick__btn { height: 36px; }
.md__lang .lpick__chev { transform: rotate(180deg); }
.md__lang .lpick[open] .lpick__chev { transform: rotate(0deg); }