/* ==========================================================================
   BUILDING CHLOE — V3 HOMEPAGE
   继承 v3.css 的 tokens 与基元，这里只写首页专属的场景与编排。
   ========================================================================== */

/* 明场景 token 与 .sec-head 已移到 v3.css —— 多个页面都在用。 */

/* ══ 01 HERO ═══════════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;padding-block:clamp(96px,12vh,150px) clamp(80px,10vh,120px)}
.hero__atmos{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 72% 34%,rgba(109,184,255,.10),transparent 58%),
    radial-gradient(80% 60% at 12% 78%,rgba(63,162,255,.05),transparent 62%)}

/* Founder —— 右侧 34–42%，靠遮罩融进黑暗，不是矩形图块 */
.hero__founder{position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:clamp(340px,42vw,660px);aspect-ratio:1122/1402;margin:0;
  display:grid;place-items:center;pointer-events:none;z-index:var(--z-base)}
.hero__portrait{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  /* 底部与两侧化进空气里 */
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0%,#000 13%,#000 62%,transparent 96%),
    linear-gradient(90deg,transparent 0%,#000 22%,#000 84%,transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0%,#000 13%,#000 62%,transparent 96%),
    linear-gradient(90deg,transparent 0%,#000 22%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:0;transform:scale(1.05);
  transition:opacity 1.9s var(--e-out),transform 2.6s var(--e-out);
  will-change:opacity,transform}
.hero__halo{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;
  top:12%;left:9%;
  background:radial-gradient(circle,rgba(247,243,233,.13) 0%,rgba(109,184,255,.07) 42%,transparent 68%);
  filter:blur(4px);opacity:0;transition:opacity 2.2s var(--e-out) .5s}
.hero__halo-arc{position:absolute;width:88%;aspect-ratio:1;top:9%;left:6%;overflow:visible}
.halo-arc__path{fill:none;stroke:rgba(247,243,233,.44);stroke-width:1.1;
  filter:drop-shadow(0 0 14px rgba(247,243,233,.4));
  stroke-dasharray:1106;stroke-dashoffset:1106;
  transition:stroke-dashoffset 2.4s var(--e-out) 1.2s}

[data-hero-in] .hero__portrait{opacity:1;transform:none}
[data-hero-in] .hero__halo{opacity:1}
[data-hero-in] .halo-arc__path{stroke-dashoffset:180}

.hero__in{position:relative;z-index:var(--z-raised);width:100%;min-width:0}
.hero__eyebrow{opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--e-out) .35s,transform .9s var(--e-out) .35s}
[data-hero-in] .hero__eyebrow{opacity:1;transform:none}

.hero__h1{margin:var(--s-5) 0 0;max-width:min(15ch,100%)}
/* 参考稿的标题内部分级 —— 小行 .46em + 正字距，大行放足 */
.hero__h1 .clipline--sm > span{display:block;font-size:.46em;letter-spacing:.06em;
  line-height:1.06;color:var(--t-1)}
.hero__h1 .clipline--lg > span{display:block;letter-spacing:-.005em}
.clipline{display:block;overflow:hidden}
.clipline > span{display:block;transform:translateY(104%);
  transition:transform 1.05s var(--e-out)}
[data-hero-in] .clipline > span{transform:none}
[data-hero-in] .clipline:nth-child(1) > span{transition-delay:.72s}
[data-hero-in] .clipline:nth-child(2) > span{transition-delay:.84s}
[data-hero-in] .clipline:nth-child(3) > span{transition-delay:.96s}

.hero__lede{margin-top:var(--s-6);max-width:min(46ch,100%);opacity:0;
  transition:opacity 1s var(--e-out) 1.35s}
[data-hero-in] .hero__lede{opacity:1}

.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
  margin-top:var(--s-7);opacity:0;transform:translateY(12px);
  transition:opacity 1s var(--e-out) 1.55s,transform 1s var(--e-out) 1.55s}
[data-hero-in] .hero__cta{opacity:1;transform:none}
.hero__ai{display:inline-flex;align-items:center;gap:10px;
  font:500 12px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-2);padding:14px 4px;transition:color var(--d-base) var(--e-soft)}
.hero__ai:hover{color:var(--ice)}

.hero__system{margin-top:clamp(48px,7vh,90px);max-width:min(520px,100%);
  opacity:0;transition:opacity 1.1s var(--e-out) 1.9s}
[data-hero-in] .hero__system{opacity:1}
.hero__events{list-style:none;display:flex;gap:var(--s-6);margin:var(--s-4) 0;padding:0;flex-wrap:wrap}
.hero__events li{display:flex;align-items:center;gap:9px}

.hero__scroll{position:absolute;left:var(--gut);bottom:clamp(22px,4vh,40px);
  display:flex;align-items:center;gap:12px;z-index:var(--z-raised);
  opacity:0;transition:opacity 1s var(--e-out) 2.2s}
[data-hero-in] .hero__scroll{opacity:.7}
.hero__scroll:hover{opacity:1}
.hero__scroll-line{width:38px;height:1px;background:var(--t-3);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;inset:0;background:var(--accent-soft);
  transform:translateX(-100%);animation:scroll-hint 2.6s var(--e-inout) infinite}
@keyframes scroll-hint{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ══ 02 DISCONNECTED ═══════════════════════════════════════════════════ */
.disconnect{position:relative;padding-block:var(--s-sec);overflow:hidden}
/* 从 Hero 的黑接进来 —— 顶部一层暗色渐隐，不是硬切 */
.disconnect::before{content:"";position:absolute;inset:0 0 auto 0;height:clamp(120px,18vh,240px);
  background:linear-gradient(180deg,#0A0C12,rgba(10,12,18,0));pointer-events:none;z-index:2}
.disconnect__head{max-width:none;margin-bottom:var(--s-9);position:relative;z-index:3}
.disconnect__head .t-h1{max-width:16ch}
.disconnect__head .t-lede{max-width:46ch}
.disconnect__head .t-h1{margin:var(--s-4) 0}

.tools{position:relative;aspect-ratio:900/520;max-width:900px;margin-inline:auto}
.tools__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tools__wire-g path{fill:none;stroke:var(--accent-soft);stroke-width:1.1;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  opacity:.0;transition:stroke-dashoffset 1.2s var(--e-out),opacity .5s}
.tools[data-connected] .tools__wire-g path{stroke-dashoffset:0;opacity:.75}
.tools__list{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.tools__list li{position:absolute;left:var(--tx);top:var(--ty);
  transform:translate(var(--dx,0),var(--dy,0));
  transition:transform 1.3s var(--e-out)}
.tools__list span{display:inline-block;padding:10px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-1);background:var(--surface);
  font:500 12px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-2);white-space:nowrap;
  transition:border-color var(--d-slow) var(--e-soft),color var(--d-slow) var(--e-soft)}
.tools[data-connected] .tools__list span{border-color:rgba(31,111,208,.44);color:var(--t-hi)}
.tools__result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;text-align:center;max-width:11ch;opacity:0;transition:opacity .8s var(--e-out) .25s;
  font:400 clamp(26px,3.2vw,48px)/1.06 var(--f-display);color:var(--t-hi);
  letter-spacing:.01em;text-transform:uppercase;
  z-index:4;padding:var(--s-5) var(--s-6);
  /* 连线会从文字底下穿过 —— 给一层同色柔光把它托起来 */
  background:radial-gradient(ellipse 62% 58% at 50% 50%,
    var(--ground) 42%,rgba(247,243,233,.86) 68%,transparent 82%)}
.tools__result span{display:inline}
.tools[data-connected] .tools__result{opacity:1}

.leaks{list-style:none;margin:var(--s-9) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-2);border:1px solid var(--line-2)}
.leaks li{background:var(--ground);padding:var(--s-5);
  font:300 15px/1.6 var(--f-body);color:var(--t-2)}

/* ══ 03 JOURNEY（钉住） ════════════════════════════════════════════════ */
.journey{position:relative;height:520vh;background:var(--void)}
.journey__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center}
.journey__in{width:100%;position:relative;z-index:var(--z-base)}
.journey__head{margin-bottom:var(--s-7)}
.journey__head .t-h2{margin-top:var(--s-3)}

/* ══ BC Line 引擎（与 /solutions/ 同一套）══════════════════════════════ */
/* 画布占右半区，比例接近方形 —— 铺满整宽会把形态拉成一条扁线 */
.journey__canvas{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:min(52%,620px);aspect-ratio:1/.82;pointer-events:none;z-index:0}
.journey__canvas canvas{width:100%;height:100%;display:block}
.journey__rail{display:none}

.journey__stages{list-style:none;margin:0;padding:0;
  display:block;min-height:clamp(280px,38vh,400px)}
/* 直接切显示，淡入放在内层 —— 堆叠 + 可见性切换在这个上下文里不可靠 */
.jstage{display:none}
.jstage[data-active]{display:flex;align-items:center}
/* 不给阶段文字加淡入 —— 阶段变化已由画布形态和进度指示表达，
   再叠一层 transition 只会多一个失败点（内容卡在 opacity:0）。 */

.jstage__text{align-self:center;width:46%;position:relative;z-index:2}
.jstage__n{font:400 12px/1 var(--f-mono);letter-spacing:.2em;color:var(--accent-soft)}
.jstage__t{margin:var(--s-3) 0 var(--s-4);max-width:12ch}
.jstage__d{max-width:40ch}
.jstage__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:var(--s-5) 0 0;padding:0}
.jstage__list li{font:400 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-2);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 13px}
.jstage__world{display:grid;place-items:center;min-height:240px;position:relative;align-self:center}

/* 四个 + 一个世界，各自不同的视觉语言 */
.jworld--attract{background:radial-gradient(circle at 50% 50%,rgba(109,184,255,.10),transparent 62%)}
.jworld--retain .retain__loop{width:190px;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line-1);border-top-color:var(--accent-soft);
  box-shadow:var(--glow-sm);animation:bc-orbit-spin 14s linear infinite}
.jworld--scale .scale__net{width:220px;aspect-ratio:1;position:relative;
  background:
    radial-gradient(circle 3px at 20% 20%,var(--accent-soft) 98%,transparent),
    radial-gradient(circle 3px at 80% 22%,var(--accent-soft) 98%,transparent),
    radial-gradient(circle 3px at 50% 50%,var(--ice) 98%,transparent),
    radial-gradient(circle 3px at 18% 78%,var(--accent-soft) 98%,transparent),
    radial-gradient(circle 3px at 82% 80%,var(--accent-soft) 98%,transparent),
    linear-gradient(38deg,transparent 49.4%,var(--line-1) 49.4%,var(--line-1) 50.6%,transparent 50.6%),
    linear-gradient(-38deg,transparent 49.4%,var(--line-1) 49.4%,var(--line-1) 50.6%,transparent 50.6%),
    linear-gradient(90deg,transparent 49.4%,var(--line-1) 49.4%,var(--line-1) 50.6%,transparent 50.6%);
  filter:drop-shadow(0 0 8px rgba(63,162,255,.3))}

/* ══ 04 FOUR WORLDS ════════════════════════════════════════════════════ */
.worlds__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-3);border:1px solid var(--line-3)}
.world{position:relative;background:var(--ground);padding:clamp(28px,3.4vw,56px);
  min-height:clamp(300px,38vh,420px);display:flex;flex-direction:column;
  overflow:hidden;transition:background var(--d-slow) var(--e-soft)}
.world:hover{background:#0D1017}
.world__n{font:400 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--accent-soft)}
.world__t{margin:var(--s-4) 0 var(--s-3);letter-spacing:.006em;max-width:10ch}
.world__d{font:300 clamp(15px,1.3vw,18px)/1.6 var(--f-body);color:var(--t-2);margin:0;max-width:32ch}
.world__l{font:400 11px/1.7 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-2);margin:var(--s-5) 0 0;max-width:34ch}
.world__go{margin-top:auto;padding-top:var(--s-6);display:inline-flex;align-items:center;gap:10px;
  font:500 11px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--t-1)}
.world:hover .world__go{color:var(--ice)}
.world:hover .arw{transform:translateX(4px)}
.world__art{position:absolute;right:-8%;top:-6%;width:56%;aspect-ratio:1;
  pointer-events:none;opacity:.5;transition:opacity var(--d-slow) var(--e-soft)}
.world:hover .world__art{opacity:.85}

/* 各自不同的世界，不是四张一样的卡 */
.world--attract .world__art i{position:absolute;inset:0;margin:auto;border-radius:50%;
  border:1px solid rgba(109,184,255,.34);animation:wave 4.4s var(--e-out) infinite}
.world--attract .world__art i:nth-child(1){width:34%;aspect-ratio:1}
.world--attract .world__art i:nth-child(2){width:62%;aspect-ratio:1;animation-delay:.7s}
.world--attract .world__art i:nth-child(3){width:90%;aspect-ratio:1;animation-delay:1.4s}
@keyframes wave{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.25)}}

.world--convert .world__art i{position:absolute;inset:14%;border-radius:50%;
  border:1px solid rgba(247,243,233,.30);
  box-shadow:0 0 46px rgba(109,184,255,.2),inset 0 0 54px rgba(63,162,255,.14)}
.world--convert .world__art::after{content:"";position:absolute;left:50%;top:50%;
  width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--ice);
  box-shadow:var(--glow-md)}

.world--automate .world__art i{position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--accent-soft);box-shadow:var(--glow-sm)}
.world--automate .world__art i:nth-child(1){left:12%;top:22%}
.world--automate .world__art i:nth-child(2){left:76%;top:14%}
.world--automate .world__art i:nth-child(3){left:48%;top:50%;background:var(--ice)}
.world--automate .world__art i:nth-child(4){left:18%;top:76%}
.world--automate .world__art i:nth-child(5){left:80%;top:70%}
.world--automate .world__art::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(34deg,transparent 49.6%,rgba(174,179,187,.3) 49.6%,rgba(174,179,187,.3) 50.4%,transparent 50.4%),
    linear-gradient(-34deg,transparent 49.6%,rgba(174,179,187,.3) 49.6%,rgba(174,179,187,.3) 50.4%,transparent 50.4%)}

.world--scale .world__art i{position:absolute;border:1px solid rgba(174,179,187,.26);border-radius:2px}
.world--scale .world__art i:nth-child(1){left:10%;top:12%;width:32%;height:26%}
.world--scale .world__art i:nth-child(2){left:50%;top:12%;width:38%;height:14%}
.world--scale .world__art i:nth-child(3){left:50%;top:32%;width:38%;height:44%}
.world--scale .world__art i:nth-child(4){left:10%;top:44%;width:32%;height:32%}

/* ══ 05 BC AI ══════════════════════════════════════════════════════════ */
.ai__stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:var(--gap);align-items:start}
.ai__chat{padding:var(--s-6);display:grid;gap:var(--s-4)}
.ai__msg{max-width:82%;padding:14px 18px;border-radius:var(--r-panel);
  font:300 15px/1.6 var(--f-body);
  opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--e-out),transform .55s var(--e-out)}
.ai__msg p{margin:0}
.ai__msg.is-on{opacity:1;transform:none}
.ai__msg--user{justify-self:end;background:rgba(174,179,187,.09);
  border:1px solid var(--line-2);color:var(--t-1)}
.ai__msg--bot{justify-self:start;background:rgba(63,162,255,.09);
  border:1px solid rgba(109,184,255,.3);color:var(--ice)}
.ai__panel{padding:var(--s-6);position:sticky;top:100px}
.ai__panel-h{margin:0 0 var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid var(--line-2)}
.ai__fields{margin:0;display:grid;gap:var(--s-3)}
.ai__fields > div{display:grid;grid-template-columns:104px 1fr;gap:var(--s-3);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line-3);
  opacity:0;transform:translateX(-8px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.ai__fields > div.is-on{opacity:1;transform:none}
.ai__fields dt{font:500 10px/1.5 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--t-2)}
.ai__fields dd{margin:0;font:300 14px/1.5 var(--f-body);color:var(--t-1)}
.ai__note{margin:var(--s-5) 0 0}

/* ══ 06 DATA SPINE ═════════════════════════════════════════════════════ */
.spine__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--gap);align-items:start}
.spine__record{border:1px solid var(--line-1);border-radius:var(--r-card);background:var(--surface)}
.spine__record-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line-2)}
.spine__fields{margin:0;padding:var(--s-2) var(--s-5) var(--s-5)}
.spine__fields > div{display:grid;grid-template-columns:140px 1fr;gap:var(--s-4);
  padding:13px 0;border-bottom:1px solid var(--line-3)}
.spine__fields > div:last-child{border-bottom:0}
.spine__fields dt{font:500 10px/1.5 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--t-2)}
.spine__fields dd{margin:0;font:300 15px/1.5 var(--f-body);color:var(--t-hi)}
.spine__timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.spine__timeline li{display:flex;align-items:center;gap:var(--s-4);padding:14px 0;
  font:300 15px/1.4 var(--f-body);color:var(--t-2);position:relative}
.spine__timeline li:not(:last-child)::after{content:"";position:absolute;left:4.5px;top:32px;bottom:-4px;
  width:1px;background:var(--line-2)}

/* ══ 07 HANDOFF ════════════════════════════════════════════════════════ */
.handoff__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--gap)}
.hstate{display:grid;gap:var(--s-3);padding:var(--s-5);
  border:1px solid var(--line-2);border-radius:var(--r-card)}
.hstate__v{font:400 17px/1.3 var(--f-ui);color:var(--t-hi)}
.hstate__bar{height:2px;background:var(--line-2);position:relative;overflow:hidden;border-radius:2px}
.hstate__bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill);
  background:linear-gradient(90deg,var(--accent-soft),rgba(109,184,255,.2));
  box-shadow:var(--glow-sm)}

/* ══ 08 MANAGED（沿轨道展开） ══════════════════════════════════════════ */
.managed__orbit{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);position:relative}
.managed__orbit::before{content:"";position:absolute;left:5px;right:5px;top:5px;height:1px;
  background:linear-gradient(90deg,var(--accent-soft),rgba(109,184,255,.18))}
.managed__orbit li{display:grid;gap:var(--s-3);padding-top:var(--s-5);position:relative;
  align-content:start}
.managed__orbit li .bc-node{position:absolute;top:0;left:0}
.managed__orbit b{font:400 16px/1.2 var(--f-ui);color:var(--t-hi);font-weight:400}
.managed__orbit i{font:300 13px/1.55 var(--f-body);color:var(--t-2);font-style:normal}
/* 六个阶段依次点亮 */
.managed__orbit li{opacity:.42;transition:opacity .6s var(--e-out)}
.managed__orbit li.is-on{opacity:1}

/* ══ 09 PRICING ════════════════════════════════════════════════════════ */
.pricing__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line-3);border:1px solid var(--line-3)}
.ptier{background:var(--ground);padding:var(--s-6) var(--s-5);display:flex;flex-direction:column;
  position:relative;transition:background var(--d-base) var(--e-soft)}
.ptier:hover{background:#0D1017}
.ptier__k{margin:0 0 var(--s-5)}
.ptier__t{font:400 17px/1.34 var(--f-ui);color:var(--t-hi);margin:0 0 var(--s-4);letter-spacing:0}
.ptier__p{font-size:clamp(26px,2.5vw,38px)!important;margin:0;text-transform:none;letter-spacing:-.01em}
.ptier__sub{font:300 13px/1.5 var(--f-body);color:var(--t-2);margin:6px 0 0}
.ptier__d{font:300 14px/1.6 var(--f-body);color:var(--t-2);margin:var(--s-4) 0 0}
.ptier__go{margin-top:auto;padding-top:var(--s-6);
  font:500 10.5px/1.4 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--t-2)}
.ptier:hover .ptier__go{color:var(--ice)}
/* 最受欢迎 —— 不过度发光 */
.ptier--pop{background:#0D1118}
.ptier--pop::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--accent-soft)}
.ptier__badge{position:absolute;top:var(--s-5);right:var(--s-5);
  font:500 10px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-soft);border:1px solid rgba(109,184,255,.4);
  border-radius:var(--r-xs);padding:5px 8px}
.pricing__note{margin-top:var(--s-6)}

/* ══ 10 WORK ═══════════════════════════════════════════════════════════ */
.work__empty{border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:clamp(30px,4vw,64px);display:grid;gap:var(--s-5);
  background:linear-gradient(160deg,rgba(30,35,40,.34),rgba(10,12,18,.6))}
.work__tags{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ══ 11 INDUSTRIES ═════════════════════════════════════════════════════ */
/* 三个，不是六个 —— 和 /industries/ 锁定的一致。
   原来 74px 的球在深底上几乎全黑，六个排一起像六个墨点。
   球大一点、高光亮一点，它才读得出是「星体」而不是「洞」。 */
/* 两栏：标题在左，三个星体聚成一簇在右 —— 原来三个球摊在 1440 宽里，
   彼此隔了几百 px，读起来是「三个黑点」，不是一个构图。 */
.industries__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-8) var(--gap);align-items:center}
.industries .sec-head{margin-bottom:0}
.industries .sec-head .bc-btn{margin-top:var(--s-6)}
.ind__orbits{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);max-width:520px}
.ind__orbits li{display:grid;gap:var(--s-5);justify-items:center;text-align:center;
  font:400 13px/1.4 var(--f-ui);letter-spacing:.08em;color:var(--t-2);
  padding:var(--s-5) var(--s-3)}
.ind__body{width:clamp(78px,9vw,104px);aspect-ratio:1;border-radius:50%;position:relative;
  background:radial-gradient(circle at 32% 28%,
    rgba(247,243,233,.46),rgba(174,179,187,.14) 44%,rgba(10,12,18,.94) 74%);
  border:1px solid var(--line-2);
  box-shadow:inset -12px -10px 30px rgba(0,0,0,.75),0 0 34px rgba(63,162,255,.14)}
.ind__body::after{content:"";position:absolute;inset:-22% -8%;border-radius:50%;
  border:1px solid var(--line-3);transform:rotateX(74deg)}
.ind__orbits li:hover .ind__body{box-shadow:inset -10px -8px 26px rgba(0,0,0,.7),0 0 40px rgba(63,162,255,.24)}

/* ══ 12 TRUST ══════════════════════════════════════════════════════════ */
.trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;
  background:var(--line-3);border:1px solid var(--line-3);margin:0}
.trust__grid > div{background:var(--ground);padding:var(--s-5)}
.trust__grid dt{font:400 15px/1.3 var(--f-ui);color:var(--t-hi);margin-bottom:10px}
.trust__grid dd{margin:0;font:300 14px/1.6 var(--f-body);color:var(--t-2)}
.trust__grid em{font-style:normal;color:var(--t-2)}

/* ══ 13 FOUNDER ════════════════════════════════════════════════════════ */
.founder{position:relative;overflow:hidden}
.founder__art{position:absolute;inset:0;pointer-events:none}
.founder__mask{position:absolute;right:-4%;top:-14%;width:clamp(280px,38vw,560px);
  aspect-ratio:1122/1402;display:block;
  -webkit-mask-image:radial-gradient(ellipse 58% 46% at 46% 26%,#000 34%,transparent 76%);
  mask-image:radial-gradient(ellipse 58% 46% at 46% 26%,#000 34%,transparent 76%)}
.founder__mask img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;
  filter:grayscale(.24) contrast(1.04)}
.founder__orbit{position:absolute;right:2%;top:6%;width:clamp(240px,32vw,480px);aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(247,243,233,.15);
  transform:rotateX(74deg) rotate(12deg)}
.founder__in{position:relative;z-index:var(--z-base)}
/* max-width 放到子元素上 —— 加在 .bc-wrap 自己身上会把整块居中 */
.founder__in .t-h1{max-width:20ch}
.founder__in .t-lede,.founder__in .founder__q{max-width:38ch}
.founder__q{margin:var(--s-6) 0 0;padding-left:var(--s-5);
  border-left:1px solid var(--accent-soft);
  font:400 clamp(21px,2.4vw,36px)/1.28 var(--f-display);font-style:italic;
  color:var(--t-hi);letter-spacing:-.004em}
.founder__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)}

/* ══ 14 FINALE ═════════════════════════════════════════════════════════ */
.finale{position:relative;min-height:100svh;display:grid;place-items:center;
  overflow:hidden;text-align:center;padding-block:var(--s-sec)}
.finale__horizon{position:absolute;left:50%;bottom:-42%;transform:translateX(-50%);
  width:150%;aspect-ratio:2/1;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%,rgba(109,184,255,.20),rgba(63,162,255,.06) 42%,transparent 66%);
  filter:blur(6px)}
.finale__portal{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);opacity:.5}
.finale__in{position:relative;z-index:var(--z-raised);display:grid;
  gap:var(--s-6);justify-items:center}
.finale__h{max-width:14ch;margin-inline:auto}
.finale .t-lede{max-width:46ch;margin-inline:auto}
.finale__cta{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:center}

/* ══ 响应式 ════════════════════════════════════════════════════════════
   §22：手机不是桌面缩小。人物退成氛围背景，旅程改竖排，动效密度降到 ~35%。 */
@media (max-width:1080px){
  .worlds__grid{grid-template-columns:1fr}
  .pricing__grid{grid-template-columns:repeat(2,1fr)}
  .managed__orbit{grid-template-columns:repeat(3,1fr)}
  .ai__stage,.spine__grid{grid-template-columns:1fr}
  .ai__panel{position:static}
}
@media (max-width:900px){
  /* 手机也是钉住式旅程 —— 五个阶段各有滚动空间，形态一路变过去。
     不是把五段堆起来一次看完，那样就没有 transformation 可言。 */
  .journey{height:340svh}
  .journey__sticky{position:sticky;top:0;height:100svh;padding-block:0;
    display:flex;align-items:center;overflow:hidden}
  .journey__in{padding-left:44px;position:relative}
  .journey__rail{display:block;position:absolute;left:0;top:0;bottom:0;width:32px}
  .journey__canvas{position:relative;inset:auto;transform:none;
    width:100%;height:34svh;margin:0 0 var(--s-5);aspect-ratio:auto}
  .journey__head{margin-bottom:var(--s-5)}
  .journey__head .t-h2{font-size:clamp(22px,6.4vw,32px)}

  /* Hero：人物变背景氛围，压暗压弱，保证标题绝不压脸 */
  .hero{min-height:96svh;align-items:flex-end;padding-bottom:clamp(56px,9vh,90px)}
  .hero__founder{width:min(96vw,520px);right:-14%;top:6%;transform:none;opacity:.5}
  .hero__portrait{object-position:50% 16%;
    -webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 20%,#000 52%,transparent 88%);
    mask-image:linear-gradient(180deg,transparent 2%,#000 20%,#000 52%,transparent 88%)}
  .hero__h1{max-width:12ch}
  .hero__system{margin-top:var(--s-7)}
  .hero__scroll{display:none}

  /* 旧版手机旅程规则已删 —— 手机现在也是钉住式（见上方 .journey{height:340svh}）*/
  .jstage__world > *{transform:scale(.72)}

  .managed__orbit{grid-template-columns:1fr;gap:var(--s-5)}
  .managed__orbit::before{left:5px;top:5px;bottom:5px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,var(--accent-soft),rgba(109,184,255,.18))}
  .managed__orbit li{padding:0 0 0 var(--s-6);opacity:1}
  .managed__orbit li .bc-node{top:6px}
  .pricing__grid{grid-template-columns:1fr}
  .tools{aspect-ratio:1/1.15}
  .tools__list span{padding:8px 12px;font-size:10.5px}
  .founder__mask{opacity:.4;right:-22%;top:-4%}
}
@media (max-width:768px){.leaks{grid-template-columns:1fr 1fr}}
@media (max-width:430px){
  .hero__cta{gap:var(--s-3)}
  .hero__events{gap:var(--s-4)}
  .leaks{grid-template-columns:1fr}
  /* 三个球在 390 上并排还是读得清，不要掉成两列留一个孤儿 */
  .industries__in{grid-template-columns:1fr;gap:var(--s-7)}
  .industries .sec-head .bc-btn{margin-top:var(--s-5)}
  .ind__orbits{grid-template-columns:repeat(3,1fr);gap:var(--s-4);max-width:none}
  .ind__orbits li{font-size:11.5px;letter-spacing:.04em;padding:var(--s-4) 2px;gap:var(--s-4)}
  .ind__body{width:clamp(60px,17vw,78px)}
}

@media (prefers-reduced-motion:reduce){
  .hero__portrait,.hero__halo,.hero__eyebrow,.hero__lede,.hero__cta,.hero__system,.hero__scroll{
    opacity:1!important;transform:none!important}
  .clipline > span{transform:none!important}
  .halo-arc__path{stroke-dashoffset:180!important}
  .jstage{opacity:1;transform:none;position:static;pointer-events:auto}
  .journey{height:auto}
  .journey__sticky{position:static;height:auto;padding-block:var(--s-sec)}
  .journey__stages{position:static;display:grid;gap:var(--s-8)}
  .journey__now{display:none}
/* 旅程的语义列表在 reduced-motion 下要「显形」──────────────────────────
   钉住的滚动动画一关，视觉层只剩当前那一段，眼睛看得见的用户反而少拿到内容。
   那份 <ol class="bc-sr"> 本来就是完整的真实内容，这里把它排出来给人看。 */
[data-journey-semantic]{position:static;width:auto;height:auto;margin:var(--s-6) 0 0;
  padding:0;clip:auto;clip-path:none;white-space:normal;overflow:visible;
  list-style:none;display:grid;gap:1px;background:var(--line-3);
  border:1px solid var(--line-3)}
[data-journey-semantic] li{background:var(--ground);padding:var(--s-5);display:grid;gap:6px}
[data-journey-semantic] li > span:first-child{font:400 11px/1 var(--f-mono);
  letter-spacing:.18em;color:var(--accent-soft)}
[data-journey-semantic] strong{font:400 17px/1.3 var(--f-ui);color:var(--t-hi);font-weight:400}
[data-journey-semantic] li > span{font:300 13.5px/1.6 var(--f-body);color:var(--t-2)}
[data-journey-semantic] li > span:last-child{color:var(--t-2);font-size:12px}

  .ai__msg,.ai__fields > div{opacity:1!important;transform:none!important}
  .managed__orbit li{opacity:1}
  .tools__wire-g path{stroke-dashoffset:0;opacity:.7}
  .tools__result{opacity:1}
  .hero__scroll-line::after{animation:none}
}

/* ── Hero 入场兜底 ──────────────────────────────────────────────────────
   入场靠 transition 链推进，但只要有一环没跑完，标题就永远不出现 —— 
   这对 Hero 是灾难性失败。序列时长一到，JS 打上 data-hero-done，
   强制落终态并撤掉过渡。慢设备、被打断的绘制、后台标签页都能兜住。 */
.hero[data-hero-done] .hero__eyebrow,
.hero[data-hero-done] .hero__lede,
.hero[data-hero-done] .hero__cta,
.hero[data-hero-done] .hero__system,
.hero[data-hero-done] .hero__portrait,
.hero[data-hero-done] .hero__halo{
  opacity:1!important;transform:none!important;transition:none!important}
.hero[data-hero-done] .hero__scroll{opacity:.7!important;transition:none!important}
.hero[data-hero-done] .clipline > span{transform:none!important;transition:none!important}
.hero[data-hero-done] .halo-arc__path{stroke-dashoffset:180!important;transition:none!important}


/* ── Hero 系统线：活的，不是静态 ────────────────────────────────────── */
.bc-line--live{overflow:visible}
.bc-line__pulse{position:absolute;top:50%;left:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:var(--ice);box-shadow:0 0 12px rgba(109,184,255,.9),
  0 0 26px rgba(63,162,255,.5);
  animation:bc-line-pulse 3.6s var(--e-inout) infinite}
@keyframes bc-line-pulse{
  0%{left:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:100%;opacity:0}
}
@media (prefers-reduced-motion:reduce){ .bc-line__pulse{animation:none;left:64%} }

/* ── 旅程当前阶段：一个常驻块，内容由 JS 换 ──────────────────────────
   之前用五个堆叠元素 + 可见性切换，在 sticky + 绝对定位的上下文里
   反复出现内容不绘制的问题。单块结构没有这个失败模式。 */
.journey__now{position:relative;z-index:3;width:46%;min-height:clamp(240px,32vh,340px);
  margin-left:72px}   /* 给固定的进度指示让位 */
.journey__head{margin-left:72px}
@media (max-width:900px){ .journey__now,.journey__head{width:100%;min-height:0;margin-left:0} }


/* ══════════════════════════════════════════════════════════════════════
   BATCH 03.2 — HERO → BC LINE CINEMATIC TRANSITION
   Hero 不是结束了，是正在变成下一章。
   --he  = Chloe 退场进度   --he2 = 标题与正文退场进度（都由 bc-thread.js 写）
   ══════════════════════════════════════════════════════════════════════ */

/* .bc-thread 的基础规则已经移到 v3.css —— bc-thread.js 现在是全站共享引擎，
   AI Sales Engine 等页面也在用，规则不能锁在首页的样式表里。 */

/* 画布接手之后，SVG 那圈弧就交出去。交接发生在入场刚跑完、画面静止的那一帧，
   两个渲染器的圆心半径完全一样，所以没有可见的 crossfade。 */
.hero[data-thread] .halo-arc__path{opacity:0!important;transition:none!important}

/* Chloe 退场（§04）：只做 scale / blur / 对比度 / 透明度。
   脸不做任何 morph 或 warp —— 变形的是光和线，不是人。 */
.hero__founder{z-index:4;
  opacity:calc(1 - var(--he,0) * .94);
  filter:blur(calc(var(--he,0) * 7px)) contrast(calc(1 - var(--he,0) * .34))
         saturate(calc(1 - var(--he,0) * .45));
  transform:translateY(-50%) scale(calc(1 - var(--he,0) * .05));
  transform-origin:70% 40%;
  will-change:opacity,filter,transform}

/* 标题退场（§05）：向上裁切 + 轻微上移缩放，克制，不抢 Line 的戏。
   clip 在 h1 的静止盒上，位移在内层 —— 这样才是「被遮罩吃掉」而不是整块飘走。 */
.hero__h1{clip-path:inset(0 0 calc(var(--he2,0) * 102%) 0)}
.hero[data-thread] .hero__h1 .clipline{
  transform:translateY(calc(var(--he2,0) * -46px)) scale(calc(1 - var(--he2,0) * .03));
  transform-origin:left top}
/* 其余 Hero 文案整体让位；用 .hero__in 是因为入场兜底对内部元素写了 !important */
.hero[data-thread] .hero__in{opacity:calc(1 - var(--he2,0) * .96)}
.hero[data-thread] .hero__scroll{opacity:calc(.7 * (1 - var(--he2,0) * 1.6))!important;
  transition:none!important}
/* 手机端减法（§10）：过渡时粒子先撤，留下 Halo / Pulse / 竖线三件事 */
.hero .bc-particles{opacity:calc(1 - var(--he,0))}

/* Journey 画布由 bc-thread 在最后 14% 交接进来（inline opacity）。
   没有 JS / reduced-motion 时它保持默认的完全不透明。 */
.journey__canvas{opacity:1}

/* 脉冲抵达 → ATTRACT 亮起来。这是「同一个东西」最直接的证据（§06）。 */
[data-attract-arrived] .journey__head .t-label{
  color:var(--ice);text-shadow:0 0 18px rgba(109,184,255,.55)}
[data-attract-arrived] .sol-rail__node[data-cur]{
  box-shadow:0 0 0 3px rgba(109,184,255,.18),var(--glow-md)}
.sol-prog__n{transition:color .45s var(--e-soft),text-shadow .45s var(--e-soft)}
[data-attract-arrived] .sol-prog__n{color:var(--ice);
  text-shadow:0 0 16px rgba(109,184,255,.7)}

@media (max-width:900px){
  /* §09 —— 手机上脸必须一直好看：人像整体上移收小，让出标题的位置，
     标题绝不压到脸，月晕的弧也不切眼睛。透明度比原来提一点，脸才看得清。 */
  .hero{padding-top:clamp(232px,33svh,340px)}
  /* 人像不再整块出血到屏幕外了，所以左右两边也要化开，不能留直边 */
  .hero__portrait{-webkit-mask-image:
      linear-gradient(180deg,transparent 2%,#000 20%,#000 52%,transparent 92%),
      linear-gradient(90deg,transparent 0%,#000 26%,#000 78%,transparent 100%);
    mask-image:
      linear-gradient(180deg,transparent 2%,#000 20%,#000 52%,transparent 92%),
      linear-gradient(90deg,transparent 0%,#000 26%,#000 78%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .hero__founder{width:min(80vw,430px);right:-6%;top:1%;
    transform:scale(calc(1 - var(--he,0) * .04));transform-origin:60% 26%;
    opacity:calc(.62 * (1 - var(--he,0) * .94))}
  .hero[data-thread] .hero__h1 .clipline{transform:translateY(calc(var(--he2,0) * -30px))}
}

@media (prefers-reduced-motion:reduce){
  .bc-thread{display:none!important}
  .hero__founder{opacity:1;filter:none;transform:translateY(-50%)}
  .hero__h1{clip-path:none}
  .journey__canvas{opacity:1!important}
  @media (max-width:900px){ .hero__founder{opacity:.62;transform:none} }
}

/* ── 无障碍：五个阶段的完整语义永远在 DOM 里（§12 / §13）───────────────
   视觉层是单个常驻块 + JS 换字（那是为了绕开堆叠元素不绘制的渲染问题），
   但内容层不能因此只剩一个阶段。下面这份列表是真实 HTML，
   screen reader 和搜索引擎读得到完整五段，视觉上不占位。 */
/* .bc-sr 已移到 v3.css（多个页面都要用）。 */

/* 手机上不做散布。.tools 是 900/520 的比例框，在 390 上只有 390×225 ——
   八个绝对定位的药丸塞不进去：要么顶出右边缘，要么压在中间那句话上。
   所以 ≤760 直接改成「一簇药丸 + 下面一句结论」，连线也藏掉（那个尺寸下读不出来）。 */
@media (max-width:760px){
  .tools{aspect-ratio:auto;display:grid;gap:var(--s-6);justify-items:center}
  .tools__wires{display:none}
  .tools__list{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .tools__list li{position:static;transform:none !important}
  .tools__list span{padding:9px 14px;font-size:11px;letter-spacing:.08em}
}

/* 761–900 之间仍是散布布局，药丸别掉到 11px 以下 */
@media (min-width:761px) and (max-width:900px){
  .tools__list span{font-size:11px}
  .tools__result{position:static;transform:none;max-width:14ch;
    padding:0;background:none;margin-inline:auto}
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE HOMEPAGE HERO —— 390 为准的独立构图（不是缩小 Desktop）
   ----------------------------------------------------------------------
   原来的问题：人像 + 光环占住上半屏，标题正好压在人像下半部分，
   两者互抢，看起来像三张图叠在一起。

   新的顺序（她的 §03）：
     标题在上 → 人像沉到右下 → 光环在人像后面、被挡掉 1/3–1/2 → BC Line 从光环出来
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .hero{min-height:100svh;align-items:flex-start;
    padding-block:clamp(26px,4.5vh,46px) 0}

  /* 文案整块回到顶部，人像不再顶着它 */
  .hero__in{display:flex;flex-direction:column}
  .hero__h1{max-width:min(9.5em,100%);font-size:clamp(34px,9.4vw,44px);line-height:1.16}
  .hero__lede{margin-top:var(--s-5);max-width:min(19em,100%);font-size:15px;line-height:1.75}
  .hero__cta{margin-top:var(--s-6)}

  /* 人像沉到右下，脸落在屏幕中下段，身体化进 void */
  .hero__founder{width:min(96vw,470px);right:-14%;left:auto;
    top:auto;bottom:0;transform:none;
    /* 退场：手机上她是视觉焦点，不能像桌面那样又糊又留在原地。
       只做轻虚化 + 真的淡出，两条同一个 --he 驱动，不打架。
       （原来 opacity 被钉死在 .9，但 blur 还跟着 --he 走到 4.8px ——
         结果是「糊了却没淡出」，看起来像脏了一块。） */
    opacity:calc(.95 - var(--he,0) * 1.35);
    filter:blur(calc(var(--he,0) * 2.2px))}
  .hero__portrait{object-position:50% 10%;
    -webkit-mask-image:
      linear-gradient(180deg,transparent 0%,#000 26%,#000 58%,transparent 92%),
      linear-gradient(90deg,transparent 0%,#000 34%,#000 88%,transparent 100%);
    mask-image:
      linear-gradient(180deg,transparent 0%,#000 26%,#000 58%,transparent 92%),
      linear-gradient(90deg,transparent 0%,#000 34%,#000 88%,transparent 100%)}

  /* 光环跟着头走，不再是一个完整的圆挂在那里 */
  .hero__halo{width:64%;top:4%;left:16%;filter:blur(6px)}
  .hero__halo-arc{width:62%;top:3%;left:17%;opacity:.5}

  /* 环境层（§07 第四层）：手机上只留一条安静的线。
     三个节点标签（新 Lead / 已筛选 / 预约）原来正好飘在她脸上 ——
     那是「labels 比 Chloe 更抢」，直接不显示。
     「系统预览」这个诚实标签跟着一起收：它标注的东西不显示了，
     留一个孤零零的标签反而没有意义。 */
  .hero__system{margin-top:var(--s-6);opacity:1;max-width:none}
  .hero__system .bc-tag--proto,
  .hero__events{display:none}
  .hero__system .bc-line{opacity:.5}
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE · THE REAL PROBLEM —— 纵向叙事，不是把桌面场景缩小
   ----------------------------------------------------------------------
   桌面是「八个工具散在平面上 → 收拢成环 → 飞线连中心」。
   390 上没有横向空间，那套会糊成一团（散落 pill + 一列竖排单字）。

   手机改成：五个工具从上往下错开、断开 → BC Line 一路穿下来 → 一个一个接上。
   最后落在「一条接起来的路。」
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .tools{aspect-ratio:auto;max-width:none;margin-top:var(--s-8);
    padding-left:38px;padding-bottom:var(--s-7)}

  /* 桌面的飞线整组不要 */
  .tools__wires{display:none}

  /* BC Line：一条从上往下画的竖线，长度跟着滚动进度走。
     暖白底上 1px 的浅蓝几乎看不见 —— 加到 2px，收尾也不淡到透明。 */
  .tools::before{content:"";position:absolute;left:11px;top:0;width:2px;
    border-radius:2px;height:100%;background:var(--line-2)}
  .tools::after{content:"";position:absolute;left:11px;top:0;width:2px;
    border-radius:2px;height:calc(var(--connect,0) * 100%);
    background:linear-gradient(180deg,var(--accent),var(--accent-soft));
    box-shadow:0 0 12px rgba(31,111,208,.35)}

  /* 原来是 absolute + inset:0；改成 static 之后被外层的居中规则收成了内容宽，
     整列缩到屏幕中间、离那条线一百多 px。显式拉回整宽、左对齐。 */
  .tools__list{position:static;display:grid;gap:var(--s-6);
    width:100%;justify-content:start;justify-items:start}
  .tools__list li{position:static;transform:none;transition:none;
    left:auto;top:auto}

  /* 只留五个：Instagram · WhatsApp · 网站 · 日历 · 付款
     （发现 → 问 → 看 → 约 → 付，就是客户真实走的顺序）
     表格 / 广告 / 团队 在手机上不出现 —— §11 最多 5 个 */
  .tools__list li:nth-child(4),
  .tools__list li:nth-child(7),
  .tools__list li:nth-child(8){display:none}

  /* 断开的时候左右错开一点，接上之后归位成一条 */
  .tools__list li > span{position:relative;display:inline-flex;align-items:center;
    transform:translateX(var(--off,0));
    transition:transform .7s var(--e-out),color .5s var(--e-soft),
               border-color .5s var(--e-soft)}
  .tools__list li:nth-child(2) > span{--off:26px}
  .tools__list li:nth-child(3) > span{--off:12px}
  .tools__list li:nth-child(5) > span{--off:30px}
  .tools__list li:nth-child(6) > span{--off:14px}
  .tools__list li[data-on] > span{--off:0px}

  /* 线走到它，它才接上 */
  .tools__list li > span::before{content:"";position:absolute;left:-28px;top:50%;
    width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
    background:var(--ground);border:1.5px solid var(--line-1);
    transition:border-color .45s var(--e-soft),box-shadow .45s var(--e-soft),
               background .45s var(--e-soft)}
  .tools__list li[data-on] > span::before{border-color:var(--accent);
    background:var(--accent);box-shadow:0 0 10px rgba(31,111,208,.45)}

  /* 结果句不再绝对居中压在中间 */
  .tools__result{position:static;transform:none;max-width:none;text-align:left;
    left:auto;top:auto;margin-top:var(--s-7);
    /* 落点句和大标题对齐，不缩在线的沟槽里 */
    margin-left:-38px;
    font-size:clamp(26px,7.4vw,34px);line-height:1.2}

  /* 六张 leak 卡片在手机上是一长条，收紧一点，别喧宾夺主 */
  .leaks{margin-top:var(--s-8);grid-template-columns:1fr}
  .leaks li{padding:var(--s-4) var(--s-5);font-size:14.5px}
}