/* ===================================================================
   VCEAU · 增强视觉层 (v3)
   暖金香槟 · 实体 3D 山脉 · 浏览器窗口框 · 统一字体比例 · 玻璃质感
   叠加在 vceau.css 之上 — 宇宙黑暗调，暖金为唯一点缀
   =================================================================== */

:root {
  /* —— 暖金 / 香槟点缀（克制） —— */
  --gold:       #e8c089;
  --gold-bright:#f4d8a6;
  --gold-soft:  rgba(232, 192, 137, 0.55);
  --gold-faint: rgba(232, 192, 137, 0.16);

  --glass:      rgba(255, 252, 246, 0.045);
  --glass-line: rgba(255, 245, 230, 0.13);
  --shadow-lg:  0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 48px 120px rgba(0, 0, 0, 0.62);

  /* ================================================================
     统一字体比例 (modular scale) — 一套节奏贯穿全站
     ================================================================ */
  --fs-caption: clamp(10.5px, 0.78vw, 12px);    /* kicker / mono 标签 */
  --fs-meta:    clamp(12.5px, 0.95vw, 13.5px);  /* 次要信息 / 页脚 */
  --fs-body:    clamp(14.5px, 1.05vw, 16px);    /* 正文 */
  --fs-lead:    clamp(17px, 1.7vw, 21px);       /* 引导句 / 副标题强调 */
  --fs-h3:      clamp(21px, 2.2vw, 28px);       /* 卡片标题 / 流程字 */
  --fs-h2:      clamp(30px, 4.2vw, 50px);       /* 区块大标题 */
  --fs-display: clamp(36px, 5.6vw, 68px);       /* 陈述句 / 收尾大标题 */
  --fs-hero:    clamp(32px, 4.8vw, 60px);       /* Hero 英文展示 */
  --fs-giant:   clamp(58px, 8.4vw, 116px);      /* 单字 / V·SO */

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-body:    1.78;
}

/* 无横向溢出：跨浏览器把根背景和横轴都收口，避免 Edge/Safari 露出默认白底 */
html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--bg);
}
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  background: var(--bg);
}

::selection { background: rgba(232, 200, 150, 0.24); color: #fff; }

/* =================================================================
   统一字号映射 — 让全站字体协调
   ================================================================= */
.kicker { font-size: var(--fs-caption); letter-spacing: 0.4em; }
.nav-links a { font-size: var(--fs-meta); letter-spacing: 0.14em; }
.section-sub { font-size: var(--fs-body); line-height: var(--lh-body); }
.section-title { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.statement p { font-size: clamp(16.5px, 5.28vw, 53.9px); line-height: 1.32; } /* = hero-en × 1.1 */
.intro-section .statement-kicker { margin-bottom: clamp(22px, 3vw, 32px); }
.statement .statement-product-line {
  font-size: clamp(21px, 3.36vw, 34px); /* 70% of the current hero display scale */
  line-height: 1.18;
  letter-spacing: .06em;
  margin: 0 auto clamp(34px, 4.2vw, 52px);
  max-width: 20em;
  white-space: nowrap;
}
.statement .en-tag { font-size: var(--fs-lead); margin-top: 0; }
.glyph-char { font-size: var(--fs-giant); }
.glyph-zh { font-size: var(--fs-body); }
.glyphs-foot .lead { font-size: var(--fs-lead); }
.eau-left .vso { font-size: clamp(120px, 9vw, 168px); letter-spacing: .045em; padding-left: .045em; }
.eau-body > p {
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.85;
  font-weight: 400;
  color: rgba(244,246,250,.86);
}
.closing-en { font-size: var(--fs-display); }
.footer-brand p, .footer-col a, .footer-col .li { font-size: var(--fs-meta); }

/* =================================================================
   HERO — 实体 3D 山脉地形（无线框）
   ================================================================= */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(58% 46% at 46% 40%, rgba(74, 52, 28, 0.42) 0%, rgba(20, 15, 10, 0) 60%),
    radial-gradient(140% 110% at 50% 116%, #0f0c08 0%, #0a0a0e 42%, var(--bg) 100%);
}
@supports (min-height: 100dvh) {
  .hero { min-height: 100dvh; }
}
#terrain { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#terrain canvas {
  opacity: .98;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,.86) 82%,
    rgba(0,0,0,.34) 94%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,.86) 82%,
    rgba(0,0,0,.34) 94%,
    rgba(0,0,0,0) 100%);
}
#terrain::before {
  content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 24%;
  background:
    radial-gradient(62% 70% at 50% 8%, rgba(232,192,137,.045), transparent 58%),
    linear-gradient(to bottom,
      rgba(5,7,11,0) 0%,
      rgba(5,7,11,.20) 28%,
      rgba(5,7,11,.54) 62%,
      rgba(5,7,11,.22) 100%);
  filter: blur(.2px);
  pointer-events: none;
}
#terrain::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  background:
    radial-gradient(70% 48% at 50% 16%, rgba(232,192,137,.045), transparent 66%),
    linear-gradient(to bottom, rgba(5,7,11,0) 0%, rgba(5,7,11,.22) 44%, rgba(5,7,11,.92) 100%);
  pointer-events: none;
}
#stars { z-index: 0; opacity: .7; }
.hero-inner { z-index: 3; gap: 0; }
.hero-en {
  font-family: var(--font-disp); font-weight: 300; letter-spacing: .015em;
  font-size: clamp(15px, 4.8vw, 49px); line-height: 1.05; padding: 0 .14em; max-width: 96vw; text-align: center;
  margin: clamp(14px, 1.8vw, 24px) auto 0;
  background: linear-gradient(180deg, #fff7ec 0%, #f0dcc0 56%, #e3c191 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap; text-wrap: nowrap;
}
.hero-en em {
  font-style: italic;
  color: inherit;
  background: inherit;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-zh { font-size: clamp(25px, 2.95vw, 29px); line-height: 1.15; letter-spacing: .16em; padding-left: .16em;
  margin-top: clamp(18px, 2vw, 24px); }
/* warm grade + base vignette layered above terrain, below content */
.hero::after {
  z-index: 2;
  background: linear-gradient(to bottom, rgba(10,9,12,0) 0%, rgba(8,8,12,0.45) 62%, var(--bg) 100%);
}
.hero-vignette { z-index: 2;
  background: radial-gradient(126% 96% at 50% 44%, transparent 44%, rgba(6,4,2,.46) 76%, rgba(2,2,3,.8) 100%); }
.scroll-cue { z-index: 4; color: rgba(244,246,250,.46); text-shadow: 0 0 12px rgba(244,246,250,.32); }
.scroll-cue .ln {
  width: 2px; height: 54px;
  background: linear-gradient(180deg, rgba(255,247,236,.92), rgba(232,192,137,.5) 45%, transparent 100%);
  box-shadow: 0 0 18px rgba(232,192,137,.55), 0 0 34px rgba(244,246,250,.26);
}
@keyframes cue {
  0%,100% { transform: scaleY(.42); opacity: .58; }
  45% { transform: scaleY(1); opacity: 1; }
}
@media (max-height: 720px) { .scroll-cue { display: none; } }

/* mark — floats above the central valley with a living warm glow */
.hero-mark { position: relative; top: clamp(-36px, calc(-1.7vw - 16px), -26px); filter: drop-shadow(0 0 40px var(--glow)); }
.hero-mark img { width: clamp(280px, 36vw, 460px); opacity: .96; object-fit: contain; animation: markFloat 8s var(--ease) infinite; }
.hero-mark::before {
  content: ""; position: absolute; left: 50%; top: 48%; width: 165%; height: 165%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  opacity: .42; filter: blur(10px); z-index: -1; animation: glowPulse 6s ease-in-out infinite;
}
@keyframes markFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
@keyframes glowPulse { 0%,100%{ opacity:.34; } 50%{ opacity:.58; } }

.hero-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .42em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: clamp(22px, 4vw, 38px);
  opacity: 0; animation: fadeUp 1.2s var(--ease) .3s forwards;
}
@keyframes fadeUp { from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }

/* word-by-word reveal */
[data-stagger] .wd { display: inline-block; opacity: 0; transform: translateY(0.5em);
  animation: wdIn .9s var(--ease) forwards; animation-delay: calc(var(--i) * 85ms + .3s); }
[data-stagger] .wd em { font-style: italic; }
@keyframes wdIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-stagger] .wd { opacity:1; transform:none; animation:none; } }

@media (max-width: 620px) {
  .hero-en { font-size: clamp(15px, 4.6vw, 20px); margin-top: clamp(34px, 7vw, 48px); }
  .hero-zh { font-size: clamp(13px, 3.5vw, 17px); letter-spacing: .1em; padding-left: .1em; margin-top: 24px; }
  .hero-mark { top: clamp(-30px, calc(-3vw - 16px), -24px); }
  .hero-mark img { width: min(72vw, 280px); }
  .scroll-cue .ln { height: 46px; }
  .statement .statement-product-line {
    font-size: clamp(18px, 5.8vw, 24px);
    max-width: 14em;
    white-space: normal;
  }
}

/* =================================================================
   INTRO statement — warm gradient text
   ================================================================= */
.statement p {
  font-family: var(--font-zh); font-weight: 200; max-width: none; margin: 0 auto; white-space: nowrap;
  background: linear-gradient(180deg, #fbf4e9, #d9c3a3);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body[data-lang="en"] .statement p, body[data-lang="de"] .statement p,
body[data-lang="fr"] .statement p, body[data-lang="it"] .statement p {
  font-family: var(--font-disp); font-weight: 300; max-width: none;
}

/* =================================================================
   GLASS atom + cursor-follow specular glow
   ================================================================= */
.glass {
  background: linear-gradient(160deg, rgba(255,250,242,.06), rgba(255,250,242,.012) 46%, rgba(255,250,242,0));
  backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,245,230,.08);
}

/* =================================================================
   STORY — warm glyph hover + flow
   ================================================================= */
.glyph-cell { --gx: 50%; --gy: 50%; overflow: hidden; cursor: default;
  transition: background .6s var(--ease); }
.glyph-cell::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--gx) var(--gy), rgba(232,192,137,.12), transparent 62%);
  transition: opacity .45s var(--ease); }
.glyph-cell:hover::before { opacity: 1; }
.glyph-cell:hover .glyph-char { color: #fff; text-shadow: 0 0 40px rgba(232,192,137,.4); transform: translateY(-4px); }
.glyph-char { transition: color .5s, text-shadow .5s, transform .5s var(--ease); }


/* flow 词 hover：节点与词微微点亮（横向流动线版） */
.flow-step { transition: color .4s var(--ease); }
.flow-step:hover .t { color: #fff; }

.eau-body .accent {
  display: block;
  margin-bottom: clamp(20px, 2.2vw, 30px);
  font-size: clamp(25px, 2.5vw, 36px);
  line-height: 1.28;
  font-weight: 500;
  color: var(--ink);
}

.flow-step:not(:last-child)::before {
  background: linear-gradient(90deg,
    rgba(232,186,116,.10),
    rgba(232,186,116,.62),
    rgba(255,232,190,.92),
    rgba(232,186,116,.28));
  background-size: 220% 100%;
  box-shadow: 0 0 10px rgba(232,186,116,.20);
  animation: flowLine 3.8s linear infinite;
}
.flow-step:not(:last-child)::after {
  display: none;
  box-shadow: 0 0 9px rgba(232,186,116,.7), 0 0 18px rgba(232,186,116,.25);
  animation: flowDot 2.4s ease-in-out infinite;
}
.flow-step:nth-child(2)::before, .flow-step:nth-child(2)::after { animation-delay: .34s; }
.flow-step:nth-child(3)::before, .flow-step:nth-child(3)::after { animation-delay: .68s; }

/* eau section tight tuning from visual annotations */
.eau {
  padding-bottom: clamp(38px, 5.6vh, 72px);
}

.story-divide {
  margin-top: clamp(21px, 2.8vw, 34px);
}

.eau-grid {
  --eau-grid-width: min(1712px, calc(100vw - clamp(160px, 17vw, 340px)));
  margin-top: clamp(17px, 2vw, 25px);
}

.eau-left {
  --eau-left-x: clamp(0px, calc(var(--eau-grid-width, 1712px) / 2 - 597px), 260px);
  --eau-left-y: -5px;
  transform: translate(var(--eau-left-x), var(--eau-left-y));
}

.eau-left.reveal:not(.in) {
  transform: translate(var(--eau-left-x), calc(var(--eau-left-y) + 26px));
}

.eau-left.reveal.in {
  transform: translate(var(--eau-left-x), var(--eau-left-y));
}

.eau-body {
  --eau-body-x: -20px;
  transform: translateX(var(--eau-body-x));
}

.eau-body.reveal:not(.in) {
  transform: translate(var(--eau-body-x), 26px);
}

.eau-body.reveal.in {
  transform: translateX(var(--eau-body-x));
}

.eau-title {
  margin-bottom: clamp(15px, 1.7vw, 20px);
}

.eau-text {
  line-height: 1.52;
}

.eau-text-detail,
.eau-text-detail-tail {
  margin-top: clamp(2px, .4vw, 5px);
}

.flow {
  --flow-char-size: clamp(25.5px, 1.84vw, 33px);
  --flow-line-y: calc(var(--flow-char-size) * .52);
  margin-top: clamp(21px, 2.1vw, 27px);
}

body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .flow {
  --flow-char-size: clamp(19px, 1.45vw, 25px);
  --flow-gap: clamp(20px, 2.1vw, 38px);
  --flow-line-y: calc(var(--flow-char-size) * 1.18);
  flex-wrap: nowrap;
  justify-content: center;
  width: min(100%, 780px);
  align-items: flex-start;
}

body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .flow-step {
  flex: 0 1 clamp(132px, 10vw, 170px);
  min-width: 0;
  text-align: center;
}

body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .flow-step .t {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--flow-char-size) * 2.35);
  padding-left: 0;
  font-family: var(--font-disp);
  font-weight: 300;
  font-size: var(--flow-char-size);
  line-height: 1.08;
  letter-spacing: .025em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .flow-step .e {
  white-space: nowrap;
  font-size: clamp(14px, .95vw, 18px);
  line-height: 1.1;
  letter-spacing: .035em;
  text-align: center;
}

body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .flow-step:not(:last-child)::before {
  display: block;
}

@media (max-width: 560px) {
  body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .flow {
    flex-wrap: wrap;
    row-gap: 24px;
  }

  body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .flow-step:not(:last-child)::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .eau-left {
    --eau-left-x: 0px;
  }

  .eau-body {
    --eau-body-x: 0px;
  }
}

@media (max-width: 620px) {
  .eau-left {
    --eau-left-x: 0px;
    --eau-left-y: 0px;
  }
}

@media (min-width: 1600px) {
  .eau-left {
    --eau-left-x: clamp(0px, calc(var(--eau-grid-width, 1712px) / 2 - 597px), 260px);
  }
}

/* =================================================================
   PRODUCTS — direct product matrix on the site background
   ================================================================= */
#products .product-head {
  align-items: center;
  gap: 0;
  margin-bottom: clamp(24px, 3vw, 38px);
  text-align: center;
  transform: translateY(-55px);
}

#products .product-kicker {
  margin: 0 auto;
}

#products .cats {
  justify-content: center;
  margin-bottom: clamp(22px, 3vw, 36px);
  transform: translateY(-61px);
}

#products .wrap {
  max-width: min(1760px, calc(100vw - 64px));
  padding-inline: clamp(22px, 4vw, 70px);
}

.product-matrix {
  position: relative;
  margin-top: clamp(18px, 2.5vw, 34px);
}
.product-matrix::before {
  content: "";
  position: absolute;
  inset: -10% -8% auto;
  height: 58%;
  background:
    radial-gradient(56% 68% at 22% 16%, rgba(232,192,137,.09), transparent 66%),
    radial-gradient(50% 64% at 78% 8%, rgba(116,138,166,.08), transparent 70%);
  pointer-events: none;
  opacity: .78;
}
.product-matrix .bp-grid { position: relative; z-index: 1; }

.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 1.8vw, 28px); }

.bp-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(130px, 36%) minmax(0, 1fr);
  min-height: clamp(154px, 11vw, 194px);
  background:
    radial-gradient(92% 130% at 24% 50%, rgba(232,192,137,.09), transparent 54%),
    linear-gradient(156deg, rgba(255,250,242,.058), rgba(255,250,242,.012) 56%, rgba(255,250,242,0));
  border: 1px solid rgba(255,245,230,.13);
  box-shadow: 0 18px 46px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,245,230,.05);
  transition: border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bp-card::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background: radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(232,192,137,.16), transparent 60%);
  transition: opacity .45s; z-index: 0; }
.bp-card:hover { transform: translateY(-5px); border-color: var(--glass-line);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,245,230,.08); }
.bp-card:hover::before { opacity: 1; }

.bp-stage {
  position: relative;
  z-index: 1;
  min-height: 100%;
  overflow: visible;
  background: transparent;
  border-bottom: 0;
  display: grid;
  place-items: center;
  padding: clamp(22px, 2.2vw, 34px);
  isolation: isolate;
}
.bp-stage::before {
  content: "";
  position: absolute;
  width: clamp(96px, 8vw, 136px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(232,192,137,.24);
  background:
    radial-gradient(circle at 50% 42%, rgba(232,192,137,.12), rgba(232,192,137,.035) 46%, rgba(255,255,255,.018) 66%, transparent 67%),
    linear-gradient(180deg, rgba(255,245,230,.055), rgba(255,245,230,0));
  box-shadow: inset 0 0 32px rgba(232,192,137,.045), 0 0 38px rgba(232,192,137,.06);
  z-index: -1;
}
.bp-stage::after { content:""; position:absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,176,110,.10), transparent 64%);
  z-index: -1; }
.bp-phone {
  position: relative; z-index: 1; width: clamp(56px, 5.3vw, 88px); aspect-ratio: 9 / 17; border-radius: 18px; overflow: hidden;
  background: #0a0908; border: 1px solid rgba(255,235,205,.14);
  box-shadow: 0 18px 42px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,235,205,.12);
  margin-top: 0;
  transition: transform .6s var(--ease);
}
.bp-card:hover .bp-phone { transform: translateY(-4px); }
.bp-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 30%; height: 4px;
  border-radius: 3px; background: rgba(255,235,205,.18); z-index: 3; }
.bp-screen { position: absolute; inset: 0; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.bp-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; margin-top: 8px;
  background: radial-gradient(120% 100% at 50% 0%, #2a2114, #100c08); border: 1px solid rgba(255,235,205,.1); }
.bp-ic svg { width: 14px; height: 14px; }
.bp-bar { height: 6px; border-radius: 4px; background: rgba(255,245,230,.07); }
.bp-bar.w70{width:70%} .bp-bar.w50{width:50%} .bp-bar.w85{width:85%} .bp-bar.w40{width:40%}
.bp-bar.accent { background: linear-gradient(90deg, var(--gold-soft), rgba(232,192,137,.1)); }
.bp-chip-row { display: flex; gap: 5px; margin-top: 2px; }
.bp-chip { height: 13px; flex: 1; border-radius: 4px; background: rgba(255,245,230,.06); }
.bp-chip.fill { background: linear-gradient(160deg, rgba(232,192,137,.42), rgba(232,192,137,.08)); }
.bp-graph { margin-top: auto; height: 30px; display: flex; align-items: flex-end; gap: 3px; }
.bp-graph i { flex: 1; border-radius: 2px 2px 0 0; display: block;
  background: linear-gradient(180deg, var(--gold-soft), rgba(232,192,137,.08)); }

.bp-info {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 2.3vw, 34px) clamp(20px, 2.6vw, 38px) clamp(22px, 2.3vw, 34px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1vw, 14px);
  min-width: 0;
}
.bp-info .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bp-info .nm { font-family: var(--font-zh); font-weight: 400; font-size: var(--fs-h3); color: var(--ink); white-space: nowrap; }
.bp-info .en { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.bp-info .desc { font-weight: 300; font-size: var(--fs-meta); line-height: 1.7; color: var(--ink-mute); flex: 0; max-width: 22em; }
.bp-info .stat { align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; display: inline-flex; align-items: center; gap: 7px; }
.bp-info .stat .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px var(--gold); animation: pulse 2.4s ease-in-out infinite; }

/* more-to-come card */
.bp-card.more .bp-stage { aspect-ratio: auto; }
.bp-more-mark { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--glass-line); background: var(--glass); position: relative; z-index: 1; }
.bp-more-mark .plus { position: relative; width: 20px; height: 20px; }
.bp-more-mark .plus::before, .bp-more-mark .plus::after { content:""; position:absolute; background: var(--gold);
  border-radius: 2px; box-shadow: 0 0 12px var(--gold-soft); }
.bp-more-mark .plus::before { left: 50%; top: 0; width: 1.6px; height: 100%; transform: translateX(-50%); }
.bp-more-mark .plus::after { top: 50%; left: 0; height: 1.6px; width: 100%; transform: translateY(-50%); }
.bp-card.more:hover .bp-more-mark { animation: morePulse 2.6s ease-in-out infinite; }
@keyframes morePulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} }
.bp-card.more .nm { font-family: var(--font-disp); font-style: italic; font-weight: 300; }

@media (max-width: 900px) {
  .bp-grid { grid-template-columns: repeat(2, 1fr); }
  .bp-card { grid-template-columns: 1fr; min-height: 0; }
  .bp-stage { min-height: 128px; border-bottom: 1px solid var(--line); }
  .bp-info { padding: clamp(18px, 2vw, 24px); }
}
@media (max-width: 560px) { .bp-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }

/* category pills — warm */
.cat-pill { font-size: var(--fs-caption); }

/* =================================================================
   MAGNETIC buttons / CTA
   ================================================================= */
[data-magnet] { will-change: transform; }
.cta {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .12em; text-transform: uppercase;
  color: #1a140c; background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 0; border-radius: 999px; padding: 15px 30px;
  box-shadow: 0 14px 34px rgba(232,176,110,.28); transition: box-shadow .4s, filter .3s;
}
.cta:hover { box-shadow: 0 20px 46px rgba(232,176,110,.4); filter: brightness(1.05); }
.cta svg { width: 16px; height: 16px; }
/* =================================================================
   NAV — magnetic underline (warm)
   ================================================================= */
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold-bright));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav.scrolled { background: rgba(8,7,6,0.74); }

/* =================================================================
   POLICY PAGES — quiet legal reading surface
   ================================================================= */
.policy-body {
  min-height: 100vh;
  background:
    radial-gradient(86% 70% at 50% 24%, rgba(19, 23, 30, .34) 0%, rgba(7, 8, 11, 0) 66%),
    linear-gradient(180deg, #05070b 0%, #030509 100%);
}

.policy-main {
  min-height: calc(100vh - 190px);
  padding-top: 70px;
}

.policy-section {
  padding: clamp(112px, 17svh, 190px) 0 clamp(80px, 12svh, 140px);
}

.policy-wrap {
  max-width: min(1180px, 100%);
  text-align: center;
}

.policy-kicker {
  display: block;
  margin-bottom: clamp(32px, 4.6vw, 56px);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

.policy-title {
  display: block;
  margin: 0;
  font-family: var(--font-disp);
  font-size: clamp(40px, 5vw, 70px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .05em;
  color: rgba(244, 246, 250, .84);
}

.policy-copy {
  display: block;
  margin: clamp(38px, 4.8vw, 58px) auto 0;
  max-width: min(76em, 100%);
  font-family: var(--font-zh);
  font-size: clamp(16px, 1.24vw, 21px);
  font-weight: 300;
  line-height: 1.96;
  letter-spacing: .045em;
  color: rgba(244, 246, 250, .56);
  text-align: center;
  text-wrap: pretty;
}

.policy-copy-line {
  display: inline;
}

.policy-email {
  white-space: nowrap;
}

body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]):not([data-lang="ja"]):not([data-lang="ko"]) .policy-copy {
  max-width: min(78em, 100%);
  font-family: var(--font-disp);
  line-height: 1.72;
  letter-spacing: .018em;
}

.policy-back {
  display: inline-flex;
  margin-top: clamp(42px, 5vw, 62px);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .18em;
  color: rgba(244, 246, 250, .42);
  text-transform: uppercase;
  transition: color .35s var(--ease), text-shadow .35s var(--ease);
}

.policy-back:hover {
  color: #fffaf2;
  text-shadow: 0 0 22px rgba(232, 192, 137, .18);
}

.policy-footer {
  margin-top: 0;
}

.policy-footer .footer-wrap {
  padding-top: 0;
}

/* =================================================================
   FOOTER — reference image lockup: quiet black, spaced nav, living line
   ================================================================= */
.footer {
  --footer-nav-center-offset: 35px;
  position: relative;
  min-height: auto;
  margin-top: calc(var(--footer-nav-center-offset) * -1);
  padding: 0;
  border-top: 0;
  overflow: hidden;
  background:
    radial-gradient(86% 84% at 50% 52%, rgba(19, 23, 30, .18) 0%, rgba(7, 8, 11, 0) 64%),
    radial-gradient(115% 78% at 50% 100%, rgba(232, 192, 137, .045) 0%, rgba(6, 7, 10, 0) 54%),
    linear-gradient(180deg, #05070b 0%, #030509 100%);
}

.footer::before,
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.footer::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 16%, transparent 84%, rgba(0,0,0,.4)),
    radial-gradient(90% 74% at 50% 50%, transparent 42%, rgba(0,0,0,.44) 100%);
}

.footer::after {
  opacity: .23;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
  mask-image: radial-gradient(82% 72% at 50% 48%, #000 0%, transparent 72%);
}

.footer-wrap {
  position: relative;
  z-index: 1;
  max-width: min(100%, 1920px);
  min-height: inherit;
  padding: 0 clamp(34px, 4.8vw, 92px) calc(clamp(22px, 2.7svh, 33px) + 15px);
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
}

.footer-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: clamp(66px, 4.45vw, 86px);
  min-width: clamp(66px, 4.45vw, 86px);
  padding-inline: clamp(10px, 1.16vw, 21px);
  color: rgba(244, 246, 250, .78);
  text-align: center;
}

.footer-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 36px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, rgba(232, 192, 137, .52) 18%, rgba(232, 192, 137, .28) 82%, transparent);
}

.footer-link:last-child::after {
  display: none;
}

.footer-link-label {
  display: block;
  width: 100%;
  font-family: var(--font-zh-s);
  font-size: clamp(12.2px, .88vw, 16.3px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .15em;
  padding-left: 0;
  text-align: center;
  text-shadow: 0 0 28px rgba(255, 255, 255, .1);
  transition: color .35s var(--ease), text-shadow .35s var(--ease), transform .35s var(--ease);
}

.footer-link-sub {
  display: block;
  width: 100%;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: clamp(5.4px, .39vw, 6.8px);
  line-height: 1;
  letter-spacing: .2em;
  text-align: center;
  color: rgba(244, 246, 250, .34);
  transition: color .35s var(--ease), letter-spacing .35s var(--ease);
}

body[data-lang="en"] .footer-link {
  min-height: 42px;
}

body[data-lang="en"] .footer-link-label {
  font-family: var(--font-disp);
  font-size: clamp(13.2px, .96vw, 17.5px);
  line-height: 1;
  letter-spacing: .14em;
}

body[data-lang="en"] .footer-link-sub {
  display: none;
}

.footer-link:hover .footer-link-label {
  color: #fffaf2;
  transform: translateY(-2px);
  text-shadow: 0 0 26px rgba(232, 192, 137, .24);
}

.footer-link:hover .footer-link-sub {
  color: rgba(232, 192, 137, .74);
  letter-spacing: .24em;
}

.footer-mail {
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(9.6px, .76vw, 13.6px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .22em;
  color: rgba(244, 246, 250, .38);
  text-align: right;
  transition: color .35s var(--ease), text-shadow .35s var(--ease);
}

.footer-mail::before {
  display: none;
}

.footer-mail:hover {
  color: #fffaf2;
  text-shadow: 0 0 22px rgba(232, 192, 137, .22);
}

.footer-flow-line {
  position: relative;
  height: 1px;
  margin-top: calc(clamp(27px, 3.4svh, 42px) + var(--footer-nav-center-offset));
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(244, 246, 250, .10),
    rgba(244, 246, 250, .20) 42%,
    rgba(244, 246, 250, .09));
  box-shadow: none;
}

.footer-flow-line::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(244, 246, 250, .22), transparent);
  filter: blur(.6px);
  animation: footerLineFlow 5.8s linear infinite;
}

.footer-flow-line::after {
  content: "";
  position: absolute;
  inset: -14px 0;
  background:
    radial-gradient(circle at 22% 50%, rgba(244, 246, 250, .10) 0 1.2px, transparent 2px),
    radial-gradient(circle at 63% 50%, rgba(244, 246, 250, .08) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 50%, rgba(244, 246, 250, .09) 0 1.1px, transparent 1.9px);
  opacity: .42;
}

.footer-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-top: clamp(13px, 1.9svh, 18px);
}

.footer-copy,
.footer-statement,
.footer-legal {
  font-family: var(--font-mono);
  font-size: clamp(9.6px, .76vw, 13.6px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .22em;
  color: rgba(244, 246, 250, .38);
}

.footer-copy {
  justify-self: start;
}

.footer-legal {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: .72em;
  text-align: center;
  white-space: nowrap;
}

.footer-legal a {
  transition: color .35s var(--ease), text-shadow .35s var(--ease);
}

.footer-legal a:hover {
  color: #fffaf2;
  text-shadow: 0 0 22px rgba(232, 192, 137, .22);
}

.footer-mail {
  justify-self: end;
}

.footer-statement {
  margin: 0;
  font-family: var(--font-disp);
  letter-spacing: .08em;
  color: rgba(244, 246, 250, .42);
  text-align: right;
}

.footer-statement em {
  font-style: normal;
}

@keyframes footerNodePulse {
  0%, 100% { opacity: .75; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes footerLineFlow {
  0% { transform: translateX(-110%); opacity: 0; }
  12% { opacity: .8; }
  88% { opacity: .8; }
  100% { transform: translateX(300%); opacity: 0; }
}

@media (max-width: 1180px) {
  .footer {
    --footer-nav-center-offset: 30px;
  }

  .footer-wrap {
    padding-top: 0;
  }

  .footer-main {
    align-items: center;
    flex-direction: row;
    justify-content: center;
    min-height: 0;
  }

  .footer-nav {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 18px;
    margin-left: 0;
  }

  .footer-flow-line {
    margin-top: calc(clamp(21px, 3svh, 31px) + var(--footer-nav-center-offset));
  }
}

@media (max-width: 680px) {
  .footer {
    min-height: auto;
    --footer-nav-center-offset: 30px;
  }

  .footer-wrap {
    padding: 0 clamp(22px, 7vw, 34px) 34px;
  }

  .footer-nav {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-left: 0;
  }

  .footer-link {
    width: clamp(65px, 20vw, 86px);
    min-width: clamp(65px, 20vw, 86px);
    padding: 0 14px;
  }

  .footer-link::after {
    height: 29px;
  }

  .footer-link:last-child::after {
    display: none;
  }

  .footer-link-label {
    font-size: clamp(12.2px, 4.1vw, 16.3px);
  }

  .footer-flow-line {
    margin-top: calc(20px + var(--footer-nav-center-offset));
  }

  .footer-meta {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-mail {
    text-align: left;
  }

  .footer-main {
    min-height: 0;
  }
}

body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .footer-link {
  width: clamp(148px, 8vw, 164px);
  min-width: clamp(148px, 8vw, 164px);
  padding-inline: 0;
}

body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .footer-link-label {
  width: auto;
  padding-inline: clamp(18px, 1.4vw, 24px);
  white-space: nowrap;
}

@media (max-width: 680px) {
  body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .footer-link {
    width: clamp(92px, 28vw, 116px);
    min-width: clamp(92px, 28vw, 116px);
    padding-inline: 0;
  }

  body:not([data-lang="zh-Hans"]):not([data-lang="zh-Hant"]) .footer-link-label {
    padding-inline: 12px;
    font-size: clamp(11px, 3vw, 12.4px);
    letter-spacing: .08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark img, .hero-mark::before, .eau-left .vso:hover,
  .bp-card.more:hover .bp-more-mark,
  .footer-flow-line::before { animation: none !important; }
}