/* =============================================================
   MAITONG 脉通 · 官网 v3  —  Ultrahuman 框架 / Oura 交互 / 辨证云内容
   设计系统：浅色为主骨架 + 战略性深色段 + 墨绿做品牌签名
   ============================================================= */

/* ---------- tokens ---------- */
:root{
  /* 深色系 */
  --night:#0a2218;        /* 玄夜深森林绿 */
  --night-deep:#06160e;   /* 凹陷 / hero 底 */
  --black:#000000;
  --forest-raise:#11301f; /* 深色抬升面 */
  /* 信号色 */
  --pulse:#3fe088;        /* 荧光绿 — 生命/脉搏（调亮·更鲜活） */
  --pulse-soft:#37bd72;
  --gold:#c9a84c;         /* 暖金 — 点缀 <5% */
  --zhusha:#c0442b;       /* 朱砂 — 动作色(按钮底) */
  --zhusha-text:#a53a20;  /* 朱砂 — 文字用(过 AA 对比度) */
  --zhusha-hover:#a53a20;
  --tenghuang:#d4a72c;    /* 藤黄 — 点缀 */
  --teal-deep:#16282a;    /* 烟雨黛青深 */
  --teal:#1f3a3c;
  --teal-mid:#2c5257;
  /* 浅色系 */
  --white:#fbf5e6;        /* 杏仁白 */
  --paper:#f5ecd7;        /* 宣纸米 */
  --mist:#e7efe2;         /* 浅青玉 */
  --line-soft:#e0d5b8;
  /* 文字 */
  --ink:#16201b;          /* 浅底主文字 */
  --ink-2:#5d655e;        /* 浅底次文字 */
  --ink-light:#f4f1e8;    /* 深底主文字 */
  --ink-light-2:#aab4ab;  /* 深底次文字 */
  --hair-dark:rgba(244,241,232,.14);
  --hair-light:rgba(20,32,27,.12);
  /* 排版 */
  --wrap:1180px;
  --r:22px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* 字体随语言切换 */
html[lang="zh"]{ --f-body:"Noto Sans SC",-apple-system,sans-serif; --f-display:"Noto Serif SC",serif; --tracking:0; }
html[lang="en"]{ --f-body:"Inter",-apple-system,sans-serif;     --f-display:"Hanken Grotesk",sans-serif; --tracking:-.02em; }

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
em{font-style:normal}

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

/* ---------- 通用排版 ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.22;letter-spacing:var(--tracking)}
.eyebrow{
  font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zhusha-text);margin-bottom:18px;
}
.eyebrow--light{color:var(--tenghuang)}
.kicker{font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-light-2)}
.sec__title{font-size:clamp(1.7rem,3.3vw,2.7rem);color:var(--ink);max-width:18em}
.sec__title--light{color:var(--ink-light)}
.sec__head{margin-bottom:64px;max-width:760px}
.sec__head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec__head--center .sec__title{margin-left:auto;margin-right:auto}

/* ---------- section 骨架（深浅交替） ---------- */
.sec{padding:128px 0;position:relative}
.sec--paper{background:var(--paper)}
.sec--white{background:var(--white)}
.sec--mist{background:var(--mist)}
.sec--forest{background:var(--night);color:var(--ink-light)}
.sec--forest .sec__title{color:var(--ink-light)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:999px;font-size:.95rem;font-weight:500;
  font-family:var(--f-body);transition:transform .15s var(--ease),background .2s,color .2s;
  white-space:nowrap;
}
.btn--sm{padding:10px 20px;font-size:.85rem}
.btn--solid{background:var(--zhusha);color:#fff}
.btn--solid:hover{background:var(--zhusha-hover)}
.btn--ghost{border:1px solid currentColor;color:inherit}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn:active{transform:scale(.96)}

/* ---------- 进视口淡入 ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* =============================================================
   NAV
   ============================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(22,40,42,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-dark);
}
.nav--solid{background:rgba(22,40,42,.97)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink-light)}
.brand__mark{width:42px;height:22px;color:var(--pulse)}
.brand__name{display:flex;align-items:baseline;gap:7px;font-weight:600}
.brand__name b{font-family:var(--f-display);font-size:1.18rem}
.brand__name i{font-size:.66rem;letter-spacing:.22em;color:var(--ink-light-2);font-weight:500}
.nav__links{display:flex;gap:34px}
.nav__links a{font-size:.92rem;color:var(--ink-light-2);transition:color .2s}
.nav__links a:hover{color:var(--ink-light)}
.nav__act{display:flex;align-items:center;gap:16px}
.lang{
  display:flex;align-items:center;gap:3px;font-size:.82rem;
  color:var(--ink-light-2);border:1px solid var(--hair-dark);
  padding:10px 14px;border-radius:999px;transition:color .2s,border-color .2s;
}
.lang:hover{color:var(--ink-light);border-color:var(--ink-light-2)}
.lang__sep{opacity:.4}
html[lang="zh"] .lang__zh{color:var(--pulse)}
html[lang="en"] .lang__en{color:var(--pulse)}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px;min-width:44px;min-height:44px}
.burger span{width:22px;height:2px;background:var(--ink-light);border-radius:2px;transition:.25s}
.nav.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){transform:translateY(-0px) rotate(-45deg)}

/* =============================================================
   HERO  —  我们的产品图，高对比近黑底
   ============================================================= */
.hero{
  background:var(--paper);color:var(--ink);
  min-height:90vh;display:flex;align-items:center;
  padding:150px 0 100px;border-bottom:1px solid var(--line-soft);
}
.hero__grid{
  display:grid;grid-template-columns:.84fr 1.16fr;gap:56px;
  align-items:center;width:100%;
}
.hero .kicker{color:var(--pulse-soft);margin-bottom:18px}
.hero__title{font-size:clamp(2.5rem,4.8vw,4rem);color:var(--ink);max-width:13em}
.hero__sub{
  margin-top:18px;font-size:clamp(1.04rem,1.5vw,1.3rem);
  color:var(--ink-2);max-width:25em;
}
.hero__cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
/* 灰底渐变 stage：颜色贴近视频自带灰底 → 视频无框融入 */
.hero__media{
  background:linear-gradient(158deg,#eae8e0,#d3d1c5);
  border-radius:24px;overflow:hidden;
  box-shadow:0 36px 66px -32px rgba(20,32,27,.36);
}
.hero__media video{width:100%;display:block}

/* =============================================================
   MANIFESTO  —  满屏文字浮中
   ============================================================= */
.manifesto{
  background:linear-gradient(180deg,#04100a,#0a2218);
  color:var(--ink-light);padding:150px 0;text-align:center;
}
.manifesto__in{display:flex;flex-direction:column;align-items:center}
.manifesto__lead{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pulse)}
.manifesto__big{
  margin-top:26px;font-size:clamp(1.7rem,3.7vw,3rem);
  color:var(--ink-light);max-width:20em;font-weight:500;
}
.manifesto__big em{color:var(--ink-light-2);display:block}
.manifesto__note{
  margin-top:40px;font-size:1.05rem;color:var(--pulse);
  padding:13px 26px;border:1px solid rgba(74,207,133,.34);border-radius:999px;
}

/* =============================================================
   FLOW  —  三模一体 · Binah 式编号 + 流动圆点
   ============================================================= */
.flow__track{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
  position:relative;padding-top:46px;
}
.flow__track::before{
  content:"";position:absolute;top:52px;left:8%;right:8%;height:1px;
  background:var(--hair-light);
}
.flow__track::after{   /* 流动圆点 */
  content:"";position:absolute;top:49px;left:8%;width:7px;height:7px;border-radius:50%;
  background:var(--pulse);box-shadow:0 0 12px var(--pulse);
  animation:flowdot 4.6s linear infinite;
}
@keyframes flowdot{0%{left:8%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:92%;opacity:0}}
.flow__node{position:relative;padding-top:8px}
.flow__no{font-family:var(--f-display);font-size:1rem;color:var(--pulse-soft);font-weight:600}
.flow__dot{
  display:block;width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:2px solid var(--tenghuang);
  margin:14px 0 22px;position:relative;z-index:2;
}
.flow__dot--end{background:var(--tenghuang);border-color:var(--tenghuang);box-shadow:0 0 0 5px rgba(212,167,44,.2)}
.flow__node h3{font-size:1.18rem;color:var(--ink);margin-bottom:8px}
.flow__node p{font-size:.92rem;color:var(--ink-2)}
.flow__node--end h3{color:var(--pulse-soft)}

/* =============================================================
   SCENES  —  Oura 式满屏场景切换 + 能量色
   ============================================================= */
.scenes{background:var(--teal-deep);color:var(--ink-light);padding-bottom:128px;
}
.scenes__head{text-align:center;max-width:680px;margin:0 auto 46px}
.scenes__tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.stab{
  font-size:.92rem;color:var(--ink-light-2);padding:9px 20px;border-radius:999px;
  border:1px solid var(--hair-dark);transition:.25s;
}
.stab:hover{color:var(--ink-light)}
.stab.is-on{background:var(--zhusha);color:#fff;border-color:var(--zhusha)}
.scenes__stage{
  position:relative;max-width:1240px;margin:0 auto;padding:0 64px;
  min-height:560px;
}
.scene{
  position:absolute;inset:0 64px;display:grid;grid-template-columns:1.15fr .85fr;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.scene.is-on{opacity:1;pointer-events:auto;position:relative;inset:auto}
.scene__img,.scene__ph{
  border-radius:var(--r);overflow:hidden;min-height:560px;
  width:100%;object-fit:cover;
}
/* 占位块：显示 nano banana prompt */
.scene__ph{
  display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
  padding:34px;border:1px solid var(--hair-dark);
}
.ph__label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.ph__prompt{font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.62);
  border-top:1px dashed rgba(255,255,255,.22);padding-top:14px}
.scene__copy{display:flex;flex-direction:column;justify-content:center;padding:0 12px 0 56px}
.scene__time{font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;color:var(--tenghuang)}
.scene__copy h3{font-size:clamp(1.6rem,2.6vw,2.3rem);color:var(--ink-light);margin-bottom:16px}
.scene__copy p{color:var(--ink-light-2);font-size:1.02rem}
.sarrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;font-size:1.5rem;line-height:1;
  background:rgba(255,255,255,.06);border:1px solid var(--hair-dark);
  color:var(--ink-light);transition:.2s;
}
.sarrow:hover{background:rgba(255,255,255,.14)}
.sarrow--prev{left:0}
.sarrow--next{right:0}

/* 能量色：占位块渐变 + tab 高亮 + 场景文字时间标签 */


/* 场景图：可点击放大 */
.scene__img{cursor:zoom-in;transition:filter .3s var(--ease)}
.scene__img:hover{filter:brightness(1.06)}
.scenes__hint{
  text-align:center;margin-top:34px;font-size:.86rem;
  letter-spacing:.04em;color:var(--ink-light-2);
}

/* ---------- LIGHTBOX · 场景全屏 ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;background:#05100a;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__imgwrap{position:absolute;inset:0;overflow:hidden}
.lightbox__img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);transition:transform .7s var(--ease);
}
.lightbox.is-open .lightbox__img{transform:scale(1)}
.lightbox__imgwrap::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,.14) 72%);
}
.lightbox__line{
  position:relative;z-index:2;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.7rem,4.8vw,3.6rem);color:#fff;text-align:center;
  padding:0 28px;text-shadow:0 2px 34px rgba(0,0,0,.78);
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) .22s,transform .6s var(--ease) .22s;
}
.lightbox.is-open .lightbox__line{opacity:1;transform:none}
.lightbox__nav,.lightbox__close{
  position:absolute;z-index:3;color:#fff;line-height:1;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);
  border-radius:50%;transition:background .2s;
}
.lightbox__nav:hover,.lightbox__close:hover{background:rgba(0,0,0,.7)}
.lightbox__nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:1.8rem}
.lightbox__nav--prev{left:24px}
.lightbox__nav--next{right:24px}
.lightbox__close{top:22px;right:26px;width:46px;height:46px;font-size:1.5rem}

/* =============================================================
   WORKS  —  三套机构 · 三段产品动态视频卡片
   ============================================================= */
.works__lead{margin-top:14px;color:var(--ink-2);font-size:1.02rem;max-width:42em}
.works__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.wcard{
  background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(20,32,27,.3)}
.wcard__media{
  background:linear-gradient(158deg,#eae8e0,#d6d4c9);  /* 贴近视频灰底，无框融入 */
}
.wcard__media video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.wcard figcaption{padding:24px 24px 28px}
.wcard__step{
  font-family:var(--f-display);font-weight:700;font-size:.84rem;
  color:var(--gold);letter-spacing:.12em;margin-bottom:8px;
}
.wcard figcaption h3{font-size:1.24rem;color:var(--ink);margin-bottom:9px}
.wcard figcaption p{font-size:.92rem;color:var(--ink-2)}

/* =============================================================
   TECH  —  3 chip strip + 横向卡片
   ============================================================= */
.tech__strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-bottom:64px;
}
.tech__chip{
  background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:36px 28px;text-align:center;
}
.tech__chip-num{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(3rem,7vw,5rem);line-height:1;
  color:var(--zhusha);letter-spacing:-.02em;
  margin:0 0 12px 0;
}
.tech__chip-label{
  font-size:.95rem;color:var(--ink-2);
  margin:0;letter-spacing:.04em;
}
.tech__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{
  background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:34px 30px;
}
.tcard h3{font-size:1.2rem;color:var(--ink);margin-bottom:12px}
.tcard h3::before{
  content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:var(--pulse);margin-bottom:16px;
}
.tcard p{font-size:.92rem;color:var(--ink-2)}

/* =============================================================
   PROFILE  —  九体质 + wellness 环
   ============================================================= */
.profile__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.profile__lead{margin:22px 0 30px;color:var(--ink-2);font-size:1.04rem}
.ctypes{display:flex;flex-wrap:wrap;gap:10px}
.ctypes li{
  font-size:.9rem;padding:8px 16px;border-radius:999px;
  background:var(--mist);border:1px solid var(--line-soft);color:var(--ink);
}
.ctypes li:first-child{background:var(--pulse);border-color:var(--pulse);color:#06160e}
.profile__viz{display:flex;flex-direction:column;align-items:center;gap:20px}
.ring{position:relative;width:280px;height:280px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:var(--line-soft);stroke-width:13}
.ring__fg{
  fill:none;stroke:var(--pulse);stroke-width:13;stroke-linecap:round;
  stroke-dasharray:528;stroke-dashoffset:528;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.ring.is-in .ring__fg{stroke-dashoffset:127}  /* 约 76% */
.ring__center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
}
.ring__score{font-family:var(--f-display);font-size:4rem;font-weight:700;color:var(--ink);line-height:1}
.ring__unit{font-size:.8rem;letter-spacing:.1em;color:var(--ink-2)}
.ring__cap{font-size:.9rem;color:var(--ink-2)}

/* =============================================================
   APP  —  All in one app · 黑底 + 巨型绿字 + 可滑手机 feed
   ============================================================= */
.app{background:var(--teal);color:var(--ink-light);text-align:center}
.app__big{font-size:clamp(2.6rem,8vw,6.2rem);font-weight:700;letter-spacing:-.03em}
.app__big span{
  color:var(--ink-light);
}
.app__stage{margin:54px auto 0;display:flex;flex-direction:column;align-items:center;gap:30px}

/* ---- 手机外壳 ---- */
.phone{
  position:relative;width:286px;height:608px;border-radius:46px;
  background:linear-gradient(160deg,#222,#0a0a0a);
  border:1px solid #2a2a2a;padding:11px;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.92),0 0 70px rgba(74,207,133,.12);
}
.phone__notch{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:108px;height:24px;background:#0a0a0a;border-radius:0 0 14px 14px;z-index:4;
}
/* 状态栏（浮在屏幕之上） */
.phone__status{
  position:absolute;top:11px;left:11px;right:11px;height:34px;z-index:3;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 22px;color:var(--ink-light);font-size:11px;font-weight:600;
  pointer-events:none;
}
.ps__time{font-variant-numeric:tabular-nums}
.ps__icons{display:flex;gap:6px;align-items:center;opacity:.92}
.ps__icons svg{display:block}

/* 屏幕（可滑动）*/
.phone__screen{
  position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#0c2317,#04100a 70%);
}

/* 每个 feed = 可上下滑的整屏 */
.appscr{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  padding:46px 14px 22px;display:flex;flex-direction:column;gap:11px;text-align:left;
  scrollbar-width:none;-ms-overflow-style:none;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.appscr::-webkit-scrollbar{display:none}
.appscr.is-on{opacity:1;pointer-events:auto}

/* ---- feed 通用 ---- */
.afhdr{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 4px}
.afhdr__brand{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--ink-light)}
.afhdr__ico{font-size:14px;color:var(--ink-light-2)}
.afhdr__count{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--pulse)}
.afhdr__count i{font-style:normal;color:var(--ink-light-2);font-weight:400;margin-left:2px}

.afgreet{font-size:10.5px;letter-spacing:.08em;color:var(--ink-light-2);text-transform:uppercase;margin:6px 4px 0}
.afh{font-family:var(--f-display);font-size:19px;color:var(--ink-light);margin:0 4px 4px;font-weight:600}
.afsub{font-size:10.5px;color:var(--ink-light-2);text-transform:uppercase;letter-spacing:.08em;margin:6px 4px 0}

.afcard{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:13px;display:flex;flex-direction:column;gap:10px;
}
.afcard--hero{padding:10px;gap:9px}
.afcard__t{font-size:12px;color:var(--ink-light-2);font-weight:500}
.afcard__sub{font-size:13px;color:var(--ink-light)}
.afcard__th{display:flex;justify-content:space-between;align-items:center}
.afcard__pill{font-size:10px;padding:3px 9px;border-radius:999px;background:rgba(74,207,133,.18);color:var(--pulse)}
.afcard__foot{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-light-2)}
.afdot{width:6px;height:6px;border-radius:50%;background:var(--pulse);box-shadow:0 0 6px var(--pulse);animation:afpulse 1.4s ease-in-out infinite}
@keyframes afpulse{0%,100%{opacity:.5}50%{opacity:1}}

/* 脉象 - hero video + 寸关尺 mini + 柱图 */
.afpulse{width:100%;height:92px;object-fit:cover;border-radius:9px;background:#04100a;display:block}
.afmini{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.afmcard{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:11px;padding:9px 10px;display:flex;flex-direction:column;gap:4px;color:var(--pulse);
}
.afm__t{font-family:var(--f-display);font-size:13px;color:var(--ink-light);font-weight:600}
.afm__w{width:100%;height:18px;color:var(--pulse);opacity:.9}

.afbars{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;align-items:end;height:56px}
.afbars span{background:rgba(74,207,133,.34);border-radius:3px;height:var(--h)}
.afbars span.is-now{background:var(--pulse);box-shadow:0 0 8px rgba(74,207,133,.7)}
.afdays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.afdays i{font-style:normal;font-size:10px;color:var(--ink-light-2);text-align:center}

/* footer-like 行 */
.afts{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 13px;background:rgba(255,255,255,.03);
  border-radius:11px;font-size:11px;color:var(--ink-light-2);
  border:1px solid rgba(255,255,255,.05);
}
.afts__arrow{color:var(--pulse);font-size:15px;line-height:1}

/* 舌象 - 视频窗口 + 顶部蒙层（盖掉 gif 自带的英文 header 与 % 字样） */
.aftw{position:relative;border-radius:9px;overflow:hidden;height:178px;background:#0a1a12}
.aftw__gif{width:100%;height:100%;object-fit:cover;object-position:50% 78%}  /* 推下来露出舌头，挡掉顶部 */
.aftw__mask{
  position:absolute;top:0;left:0;right:0;height:60px;
  background:linear-gradient(180deg,rgba(6,22,14,.98),rgba(6,22,14,.55) 70%,transparent);
}
.aftw__chip{
  position:absolute;top:10px;left:10px;font-size:10px;
  padding:4px 10px;border-radius:999px;color:var(--pulse);
  background:rgba(6,22,14,.7);backdrop-filter:blur(4px);
  border:1px solid rgba(74,207,133,.4);
}

/* 舌象 - key-value */
.afkv{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;overflow:hidden;
}
.afkv__row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.05);
}
.afkv__row:last-child{border-bottom:none}
.afkv__k{font-size:12px;color:var(--ink-light-2)}
.afkv__v{font-family:var(--f-display);font-size:13px;color:var(--ink-light);font-weight:500}

/* 问诊 - 进度 / 问题 / 选项 / 完成清单 */
.afprog{height:4px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin:2px 4px 0}
.afprog__fill{display:block;width:40%;height:100%;background:var(--pulse);border-radius:4px}

.afcard--q{gap:11px}
.afq__lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pulse);font-weight:600}
.afq__t{font-family:var(--f-display);font-size:15px;color:var(--ink-light);font-weight:600;line-height:1.32}

.afopts{display:flex;flex-direction:column;gap:6px;margin:3px 0}
.afopts li{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  font-size:12px;color:var(--ink-light);transition:.18s;
}
.afopt__r{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink-light-2);flex:none;position:relative}
.afopts li.is-on{background:rgba(74,207,133,.12);border-color:rgba(74,207,133,.42)}
.afopts li.is-on .afopt__r{border-color:var(--pulse)}
.afopts li.is-on .afopt__r::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--pulse)}

.afnext{
  margin-top:4px;padding:9px 0;background:var(--pulse);color:#06160e;
  font-weight:600;font-size:12px;border-radius:9px;font-family:var(--f-body);width:100%;
}

.afdone{
  display:flex;flex-direction:column;gap:0;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
  border-radius:11px;overflow:hidden;
}
.afdone li{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:12px;color:var(--ink-light);border-bottom:1px solid rgba(255,255,255,.04)}
.afdone li:last-child{border-bottom:none}
.afd__c{width:14px;height:14px;border-radius:50%;background:rgba(74,207,133,.2);color:var(--pulse);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}
.afd__k{flex:1;color:var(--ink-light-2)}
.afd__v{color:var(--ink-light);font-weight:500}

/* ---- 底部 tab + 描述 + badges ---- */
.app__tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.atab{
  font-size:.88rem;color:var(--ink-light-2);padding:9px 20px;border-radius:999px;
  border:1px solid var(--hair-dark);transition:.22s;
}
.atab.is-on{background:var(--pulse);color:#06160e;border-color:var(--pulse)}
.app__desc{max-width:42em;margin:46px auto 0;color:var(--ink-light-2);font-size:1.04rem}
.app__badges{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.badge{
  font-size:.86rem;color:var(--ink-light-2);
  border:1px solid var(--hair-dark);border-radius:12px;padding:13px 22px;
}
.badge em{color:var(--pulse)}

/* =============================================================
   DESIGN · SKU
   ============================================================= */
.sku{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.skucard{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:34px;
}
.swatch{display:block;width:64px;height:64px;border-radius:50%;margin-bottom:22px;
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.28)}
.swatch--night{background:radial-gradient(circle at 35% 30%,#1d4030,#091c12)}
.swatch--dawn{background:radial-gradient(circle at 35% 30%,#e3c98e,#b58e4a)}
.swatch--mist{background:radial-gradient(circle at 35% 30%,#d6d8d2,#9aa09a)}
.skucard h3{font-size:1.3rem;color:var(--ink);margin-bottom:10px}
.skucard p{font-size:.92rem;color:var(--ink-2)}
.design__note{margin-top:34px;max-width:46em;color:var(--ink-2);font-size:1rem}

/* =============================================================
   VISION
   ============================================================= */
.vision__in{max-width:880px}
.vision__line{font-size:clamp(1.8rem,4vw,3.1rem);color:var(--ink-light);font-weight:500}
.vision__line em{color:var(--pulse);display:block}
.vision__body{margin-top:30px;color:var(--ink-light-2);font-size:1.08rem;max-width:40em}

/* =============================================================
   JOIN · CTA banner
   ============================================================= */
.join__panel{
  background:linear-gradient(160deg,var(--teal-mid),var(--teal-deep));
  border:1px solid rgba(159,216,196,.22);border-radius:34px;
  padding:84px 56px;text-align:center;color:var(--ink-light);
}
.join__panel h2{font-size:clamp(1.8rem,3.6vw,2.8rem);color:var(--ink-light)}
.join__panel>p{margin:16px auto 0;color:var(--ink-light-2);max-width:30em}
.join__form{display:flex;gap:10px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.join__input{
  font-family:var(--f-body);font-size:.95rem;
  padding:15px 22px;border-radius:999px;width:min(320px,80vw);
  background:rgba(255,255,255,.06);border:1px solid var(--hair-dark);
  color:var(--ink-light);
}
.join__input::placeholder{color:#c3ccc4}
.join__input:focus{outline:none;border-color:var(--pulse)}
.join__fine{margin-top:18px;font-size:.82rem;color:#c3ccc4}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{background:var(--teal-deep);color:var(--ink-light-2);padding:70px 0 40px}
.footer__in{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:48px;
  padding-bottom:34px;border-bottom:1px solid var(--hair-dark);
}
.footer .brand__name b{color:var(--ink-light)}
.footer__tag{margin-top:10px;font-size:.88rem}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.fcol{display:flex;flex-direction:column;gap:12px}
.fcol__head{font-weight:600;font-size:.92rem;color:var(--ink-light);margin:0 0 6px 0}
.fcol a{color:var(--ink-light-2);font-size:.9rem;text-decoration:none;transition:color .2s}
.fcol a:hover{color:var(--ink-light)}
.fcol a[aria-disabled="true"]{pointer-events:none;color:var(--ink-light-2);opacity:.6}
.footer__legal{padding-top:26px}
.disclaimer{font-size:.84rem;line-height:1.7;max-width:62em;color:var(--ink-light-2)}
.copyright{margin-top:14px;font-size:.8rem;color:var(--ink-light-2);opacity:.85}

/* =============================================================
   响应式
   ============================================================= */
@media (max-width:1024px){
  .sec{padding:96px 0}
  .profile__grid{grid-template-columns:1fr;gap:48px}
  .scene{grid-template-columns:1fr}
  .scene__copy{padding:28px 6px 0}
  .scene__img{min-height:340px}
  .scene.is-on{display:flex;flex-direction:column}
}
/* 导航 ~810px 折叠 */
@media (max-width:860px){
  .nav__links{
    position:fixed;top:68px;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(7,18,12,.97);backdrop-filter:blur(14px);
    padding:8px 0;transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.25s var(--ease);border-bottom:1px solid var(--hair-dark);
  }
  .nav.is-open .nav__links{transform:none;opacity:1;pointer-events:auto}
  .nav__links a{padding:15px 32px;font-size:1rem}
  .burger{display:flex}
  .nav__act{gap:10px}
  .nav__act .btn--sm{padding:8px 14px;font-size:.78rem;white-space:nowrap}
}
@media (max-width:768px){
  .wrap{padding:0 22px}
  .sec{padding:80px 0}
  .sec__head{margin-bottom:44px}
  .hero{padding:116px 0 64px;min-height:auto}
  .hero__grid{grid-template-columns:1fr;gap:32px}
  .flow__track{grid-template-columns:1fr;gap:8px;padding-top:8px}
  .flow__track::before,.flow__track::after{display:none}
  .flow__node{padding:22px 0 22px 30px;border-left:1px solid var(--hair-light)}
  .flow__dot{position:absolute;left:-7px;top:24px;margin:0}
  .tech__cards,.sku,.works__grid{grid-template-columns:1fr}
  .tech__strip{grid-template-columns:1fr;gap:14px}
  .tech__chip{padding:24px}
  .scenes__stage{padding:0 6px;min-height:auto}
  .sarrow{display:none}
  .join__panel{padding:56px 26px}
  .footer__in{grid-template-columns:1fr;gap:32px}
  .footer__cols{grid-template-columns:repeat(3,1fr);gap:24px}
}
@media (max-width:600px){
  .footer__cols{grid-template-columns:1fr;gap:24px}
}

/* =============================================================
   WHY TCM  —  What / Why / How 事实层
   ============================================================= */
.whytcm__rows { display: flex; flex-direction: column; gap: 64px; margin-top: 48px; }
.whytcm__row { display: grid; grid-template-columns: 0.15fr 0.85fr; gap: 32px; align-items: start; }
.whytcm__num {
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--ink-2);
  margin: 0;
  letter-spacing: .04em;
}
.whytcm__body h3 {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 12px 0;
  color: var(--ink);
}
.whytcm__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
  max-width: 56em;
}
@media (max-width: 700px) {
  .whytcm__row { grid-template-columns: 1fr; gap: 8px; }
  .whytcm__num { font-size: 1.8rem; }
}

/* ===================== WATCH · 手环 ===================== */
#watch.sec--white {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.watch__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 48px 0;
}
.watch__gallery figure {
  margin: 0;
  border-radius: var(--r, 12px);
  overflow: hidden;
  background: var(--paper, #f5f1e6);
}
.watch__gallery img {
  width: 100%;
  height: auto;
  display: block;
}
.watch__sub {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 32px 0 16px 0;
  color: var(--ink);
}
.watch__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
  margin: 0;
}
.watch__specs > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.watch__specs dt {
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.watch__specs dd {
  margin: 0;
  color: var(--ink-2);
  font-size: .95rem;
}
.watch__state {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 48px;
}
.watch__state-card {
  padding: 24px;
  border-radius: var(--r, 12px);
  background: var(--paper, #f5f1e6);
  border: 1px solid var(--line-soft);
}
.watch__state-card--active {
  background: var(--night, #0a2218);
  color: var(--ink-light, #f4f1e8);
  border-color: var(--night, #0a2218);
}
.watch__state-card--active .watch__state-h {
  color: var(--pulse, #4acf85);
}
.watch__state-h {
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 12px 0;
  color: var(--ink-2);
}
.watch__state-arrow {
  font-size: 1.4rem;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .watch__gallery { grid-template-columns: repeat(2, 1fr); }
  .watch__specs { grid-template-columns: 1fr; }
  .watch__state { grid-template-columns: 1fr; }
  .watch__state-arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* ===================== ABOUT ===================== */
.about__in { max-width: 880px; }
.about__body { margin-top: 48px; }
.about__body p { 
  font-size: 1.1rem; 
  line-height: 1.7; 
  color: var(--ink); 
  margin: 0 0 24px 0; 
}
.about__team-note { 
  font-size: .95rem !important; 
  color: var(--ink-2) !important; 
  font-style: italic; 
  margin-top: 8px !important; 
}
.about__contact { 
  margin-top: 56px; 
  padding-top: 32px; 
  border-top: 1px solid var(--line-soft); 
}
.about__contact-label { 
  font-size: .85rem; 
  letter-spacing: .04em; 
  text-transform: uppercase; 
  color: var(--ink-2); 
  margin: 0 0 12px 0; 
}
.about__mail { 
  font-size: 1.3rem; 
  font-weight: 500; 
  color: var(--ink); 
  text-decoration: none; 
  border-bottom: 1px solid var(--ink); 
  padding-bottom: 2px; 
}
.about__mail:hover { 
  color: var(--pulse); 
  border-bottom-color: var(--pulse); 
}
@media (max-width: 720px) {
  .about__body p { font-size: 1rem; }
  .about__mail { font-size: 1.1rem; }
}

/* ---------- learn-more link ---------- */
.learn-more {
  display: inline-block;
  margin-top: 32px;
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--pulse, #4acf85);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.learn-more:hover { opacity: 0.7; }

/* ============ RELATE · 检查都正常,可你就是不舒服 ============ */
.relate{padding-top:88px}
.relate .sec__head{text-align:center;margin-left:auto;margin-right:auto}
.relate .sec__title{margin-left:auto;margin-right:auto}
.relate__strip{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:52px;
}
.rcard{grid-column:span 1}


.rcard{display:flex;flex-direction:column;min-width:0}
.rcard__media{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
}
.rcard__media img{width:100%;height:100%;object-fit:cover;display:block}
/* 占位态:出图前的高级感底 + 部位飙红 */
.rcard__ph{
  background:
    radial-gradient(80% 60% at var(--sx,50%) var(--sy,50%),rgba(192,68,43,.16),transparent 60%),
    linear-gradient(165deg,#f2efe6,#e2ded0);
  display:grid;place-items:center;
}
.rcard__fig{
  width:56%;height:auto;fill:none;stroke:#9a958a;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85;
}
.rcard__fig circle{stroke:#9a958a}
.rcard__spot{
  position:absolute;left:var(--sx,50%);top:var(--sy,50%);width:34%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(199,54,26,.55),rgba(199,54,26,.22) 45%,transparent 70%);
  filter:blur(2px);
  animation:relatePulse 2.6s ease-in-out infinite;
}
.rcard__spot--wide{width:70%;filter:blur(10px);opacity:.6}
@keyframes relatePulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}
  50%{transform:translate(-50%,-50%) scale(1.14);opacity:1}
}
.rcard h3{margin:16px 0 4px;font-size:1.06rem}
.rcard figcaption p{color:var(--ink-2);font-size:.9rem;line-height:1.6;margin:0}
.relate__bridge{
  margin-top:56px;text-align:center;font-family:var(--f-display);
  font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink);
}
.relate__bridge a{
  margin-left:1em;color:var(--pulse-soft);border-bottom:1px solid currentColor;
  padding-bottom:2px;white-space:nowrap;
}
.relate__bridge a:hover{opacity:.75}
@media(max-width:1080px){
  .relate__strip{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;margin-left:-32px;margin-right:-32px;
    padding-left:32px;padding-right:32px;scrollbar-width:none;
  }
  .relate__strip::-webkit-scrollbar{display:none}
  .rcard{flex:0 0 44%;scroll-snap-align:start}
}
@media(max-width:768px){
  .relate__strip{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
}
@media(max-width:640px){
  .rcard{flex:0 0 72%}
  .relate__bridge a{display:block;margin:10px auto 0;width:max-content}
}

/* 场景图放大按钮(键盘可达) */
.scene__zoom{padding:0;border:0;background:none;cursor:pointer;display:block;width:100%}
/* 表单提交成功态 */
.join__done{font-size:1.05rem;color:var(--ink-light);padding:14px 0}

/* App · 结果/食补/运动 新屏 */
.afcard--type{background:linear-gradient(160deg,rgba(63,224,136,.10),rgba(255,255,255,.03));border-color:rgba(63,224,136,.18)}
.aftype__name{font-family:var(--f-display);font-size:1.3rem;color:#eafff2;margin:2px 0 6px}
.aftype__line{color:rgba(244,241,232,.72);font-size:.84rem;margin:0 0 12px}
.afkv__k--yi{color:var(--pulse)}
.afkv__k--shao{color:#e8a08c}

/* relate 五图一行最大化 */
.relate .wrap{max-width:min(96vw,1800px)}

/* ---------- app 五手机一行 ---------- */
.app .wrap{max-width:min(97vw,1800px)}
.app__row{display:flex;justify-content:center;align-items:flex-start;gap:22px;margin-top:54px;flex-wrap:wrap}
.app__col{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0;cursor:pointer}
.phone--mini{width:286px;height:608px;flex:0 0 auto;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.app__col--hero .phone--mini{box-shadow:0 60px 100px -30px rgba(0,0,0,.95),0 0 90px rgba(74,207,133,.25)}
.app__col.is-focus .phone--mini{transform:translateY(-14px) scale(1.03);box-shadow:0 70px 110px -30px rgba(0,0,0,.95),0 0 110px rgba(74,207,133,.32)}
.app__lab{font-size:.92rem;color:var(--ink-light-2);border:1px solid var(--hair-dark);padding:8px 18px;border-radius:999px;transition:.22s}
.app__col--hero .app__lab,.app__col.is-focus .app__lab{background:var(--pulse);color:#06160e;border-color:var(--pulse)}
.app__note{margin-top:44px;color:var(--ink-light-2);text-align:center}
@media (max-width:1620px){
  .phone--mini{width:246px;height:523px}
}
@media (max-width:1380px){
  .app__row{flex-wrap:wrap}
  .phone--mini{width:286px;height:608px}
}