/* ============================================================
   LIANZAO V24 — page compositions
   Each page has its own composition logic; no shared "hero template".
   ============================================================ */

/* ============ HOME ============ */
.hero-home{
  min-height:calc(100svh - var(--header-h));
  padding-top:clamp(18px,3.6vh,48px);
  display:flex;flex-direction:column;
  position:relative;
}
.hero-home-main{
  flex:1;
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  align-items:center;gap:clamp(12px,2vw,36px);
  padding-bottom:clamp(18px,3vh,40px);
}
.hero-copy{display:flex;flex-direction:column;gap:clamp(16px,2.2vh,28px);padding-block:clamp(12px,3vh,36px)}
.hero-copy h1{
  font-size:var(--t-display);letter-spacing:.01em;line-height:1.2;
  margin-top:clamp(2px,1vh,10px);
}
.hero-copy h1 em{color:var(--accent);font-style:normal}
.hero-copy .lede{max-width:38ch;color:var(--ink-2)}
.hero-actions{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;margin-top:clamp(4px,1.4vh,14px)}

.hero-scene{
  position:relative;
  height:clamp(520px,70vh,780px);
  margin-right:calc(var(--gutter) * -1);
}
.hero-scene::before{
  content:"";position:absolute;left:0;top:6%;bottom:12%;width:1px;
  background:linear-gradient(var(--line),transparent);
}
.hero-scene .scene-caption{left:2px;right:calc(var(--gutter) + 2px)}

.hero-index{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.hero-index a{
  position:relative;
  display:flex;flex-direction:column;gap:5px;
  padding:18px clamp(8px,1.2vw,18px) 22px 0;
  border-right:1px solid var(--line);
  transition:color .24s var(--ease);
}
.hero-index a:last-child{border-right:0}
.hero-index a span{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--ink-3)}
.hero-index a strong{font-size:var(--t-body);font-weight:600;letter-spacing:-.01em}
.hero-index a small{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--ink-3)}
.hero-index a::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease);
}
.hero-index a:hover{color:var(--accent)}
.hero-index a:hover::after{transform:scaleX(1)}

/* --- manifesto --- */
.manifesto{padding-block:var(--section)}
.section-top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.manifesto-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--col-gap);row-gap:var(--s5);margin-top:clamp(28px,3.6vw,52px);
}
.manifesto-grid h2{grid-column:1 / 7;font-size:var(--t-h2);line-height:1.26}
.manifesto-grid h2 span{display:block;color:var(--ink-2)}
.manifesto-body{grid-column:8 / 13;display:flex;flex-direction:column;gap:var(--s3);padding-top:2px}
.manifesto-body .lede{color:var(--ink);font-size:var(--t-lead)}
.principles{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,5vw,72px);row-gap:clamp(24px,3vw,40px);
  margin-top:clamp(36px,4.6vw,72px);
}
.principles li{
  display:grid;grid-template-columns:36px minmax(0,1fr);
  column-gap:14px;row-gap:6px;align-items:baseline;
  padding-top:18px;border-top:1px solid var(--line);
}
.principles .idx{font-family:var(--font-mono);font-size:var(--t-num);letter-spacing:.1em;color:var(--ink-3)}
.principles h3{font-size:var(--step-2);font-weight:600;letter-spacing:-.015em;line-height:1.24}
.principles p{grid-column:2;color:var(--ink-2);font-size:15px;line-height:1.7;max-width:34ch}

/* --- home systems --- */
.home-systems{
  padding-block:var(--section);
  background:var(--paper-raised);
  border-block:1px solid var(--line);
}
.sec-head .link-arrow{margin-top:22px}
.system-index{margin-top:clamp(34px,5vw,64px);border-top:1px solid var(--line-strong)}
.system-index li{border-bottom:1px solid var(--line)}
.system-index a{
  display:grid;
  grid-template-columns:56px minmax(200px,.72fr) minmax(0,1.75fr) 20px;
  gap:clamp(14px,2.2vw,34px);align-items:center;
  padding:clamp(28px,4vw,56px) 0;
  transition:color .26s var(--ease);
}
.system-index .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.system-index .name{font-size:var(--step-2);font-weight:600;letter-spacing:-.015em;line-height:1.3}
.system-index .name small{display:block;margin-top:6px;font-family:var(--font-mono);font-size:var(--t-meta);font-weight:400;letter-spacing:.16em;color:var(--ink-3)}
.system-index .desc{font-size:var(--t-body);color:var(--ink-2);max-width:none;text-wrap:pretty}
.system-index .arw{font-size:var(--t-body);color:var(--ink-3);transition:transform .26s var(--ease),color .26s}
.system-index a:hover{color:var(--accent)}
.system-index a:hover .arw{transform:translate(3px,-3px);color:var(--accent)}

/* --- home method --- */
.home-method{border-bottom:1px solid var(--line)}
.method-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,6vw,110px);padding-block:clamp(40px,4.6vw,60px);align-items:stretch;
}
.method-copy h2{font-size:var(--step-4);margin-top:18px;line-height:1.1}
.method-copy h2 span{display:block;color:var(--ink-2)}
.method-copy p{margin-top:22px}
.method-copy .link-arrow{margin-top:30px}
.step-rail{border-top:1px solid var(--line-strong);align-self:start;}
.step-rail li{
  display:grid;grid-template-columns:56px minmax(0,1fr) 84px;
  gap:clamp(12px,2vw,28px);align-items:start;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
}
.step-rail .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent);padding-top:4px}
.step-rail h3{font-size:var(--step-2);letter-spacing:-.02em}
.step-rail p{color:var(--ink-2);font-size:var(--t-body);margin-top:8px;max-width:40ch}
.step-rail small{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--ink-3);text-align:right;padding-top:8px}

/* --- home cta: the one deliberate centre of the site --- */
.home-cta{
  padding-block:clamp(96px,11vw,168px);
  border-top:1px solid var(--line);
  text-align:center;
}
.home-cta .shell{display:flex;flex-direction:column;align-items:center}
.cta-title{font-size:var(--t-display);margin-top:var(--s3);line-height:1.24;letter-spacing:.01em;max-width:24ch}
.cta-title span{display:block;color:var(--ink-2)}
.cta-actions{display:flex;gap:var(--s3);align-items:center;justify-content:center;margin-top:clamp(28px,3.6vw,44px);flex-wrap:wrap}

/* ============ SHARED PAGE OPENERS ============ */
.page-hero{
  padding-top:clamp(34px,5.4vh,74px);
  padding-bottom:clamp(26px,4vh,58px);
  border-bottom:1px solid var(--line);
}
.p-hero-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(22px,4vw,64px);align-items:stretch;
}
.p-hero-copy{display:flex;flex-direction:column;gap:clamp(14px,2vh,22px);padding-bottom:8px}
.p-hero-copy h1{font-size:var(--t-display);line-height:1.22;letter-spacing:.01em}
.p-hero-copy h1 em{color:var(--accent);font-style:normal}
.p-hero-scene{position:relative;height:clamp(480px,66vh,740px)}
.p-hero-scene .scene-caption{left:0;right:0}

.p-hero-list{border-top:1px solid var(--line-strong);margin-top:6px}
.p-hero-list li{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;
  gap:12px;padding:10px 0;border-bottom:1px solid var(--line);
}
.p-hero-list .idx{font-family:var(--font-mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.12em}
.p-hero-list a{font-size:var(--t-body);transition:color .22s var(--ease)}
.p-hero-list a:hover{color:var(--accent)}
.p-hero-list small{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.1em;color:var(--ink-3)}

/* ============ SCHEMATIC SYSTEM ============ */
/* schematic = technical plate: a drawn sheet, not a placeholder */
.schematic{width:100%;height:auto;max-height:520px;display:block}
.schematic .sch-line{fill:none;stroke:color-mix(in srgb,var(--ink) 62%,transparent);stroke-width:1.2;fill:none}
.schematic .sch-faint{fill:none;stroke:color-mix(in srgb,var(--ink) 26%,transparent);stroke-width:1;fill:none}
.schematic .sch-accent{
  stroke:var(--signal);stroke-width:1.6;fill:none;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--signal) 45%,transparent));
}
.schematic .sch-box{
  stroke:color-mix(in srgb,var(--signal) 55%,transparent);stroke-width:1;
  fill:color-mix(in srgb,var(--signal) 7%,transparent);
}
.schematic .sch-node{
  stroke:var(--signal);stroke-width:1.5;fill:color-mix(in srgb,var(--signal) 18%,transparent);
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--signal) 55%,transparent));
}
.schematic .sch-label{fill:var(--ink-2);font-family:var(--font-mono);font-size:11px;letter-spacing:.16em}
.schematic figcaption{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--ink-3)}

/* the sheet itself: fine grid, quiet glass, one hairline frame */
.chapter-art{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(14px,2vw,30px);
  border:1px solid var(--line);
  background:
    linear-gradient(155deg,color-mix(in srgb,var(--paper-raised) 92%,transparent),color-mix(in srgb,var(--paper-deep) 70%,transparent));
}
.chapter-art::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 100%);
}
html[data-theme="dark"] .chapter-art{
  background:linear-gradient(155deg,rgba(17,24,32,.9),rgba(6,9,13,.85));
}
html[data-theme="dark"] .chapter-art::before{
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1px);
}
figure{margin:0}
.chapter-art figcaption{
  margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--ink-3);
}

/* ============ PRODUCTS PAGE ============ */
.product-intro{padding-block:clamp(48px,5.6vw,88px)}

.chapter{padding-block:clamp(54px,6.4vw,104px);border-bottom:1px solid var(--line)}
.chapter-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(44px,8vw,130px);align-items:center;min-height:610px}
.chapter-grid-reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.chapter-grid-reverse .chapter-art{order:-1}
.chapter-copy{display:flex;flex-direction:column;gap:18px}
.chapter-meta{
  display:flex;gap:14px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--ink-3);
}
.chapter-meta span:first-child{color:var(--accent)}
.chapter-copy h2,.chapter-head h2{font-size:var(--t-h2);line-height:1.14}
.chapter-copy .body,.chapter-head .body{margin-top:-6px}
.spec-list{border-top:1px solid var(--line);margin-top:4px}
.spec-list li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec-list span{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.12em;color:var(--ink-3)}
.spec-list p{font-size:var(--t-body);color:var(--ink-2);margin:0}
.spec-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);border-top:0}
.spec-inline li:first-child,.spec-inline li:nth-child(2){border-top:1px solid var(--line)}
.chapter-copy .link-arrow{margin-top:6px}

.chapter-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(24px,4.4vw,64px);align-items:end;margin-bottom:clamp(26px,3vw,44px);
}
.chapter-head > .chapter-meta{grid-column:1 / -1}
.chapter-head h2{grid-column:1}
.chapter-head .body{grid-column:2;padding-bottom:4px}
.chapter-wide .schematic{max-height:none;width:100%}
.chapter-wide-foot{
  display:grid;grid-template-columns:minmax(0,1.6fr) auto;
  gap:clamp(20px,4vw,60px);align-items:end;margin-top:clamp(20px,3vw,34px);
}
.chapter-wide-foot .link-arrow{justify-self:end;margin-bottom:6px}
.data-rows{border-top:1px solid var(--line);margin-top:2px}
.data-rows div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--t-small)}
.data-rows span{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.12em;color:var(--ink-3)}
.data-rows b{font-weight:500;color:var(--ink)}
.chapter-grid-tight{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4.6vw,72px);align-items:center}
.chapter-grid-tight .chapter-copy{grid-column:2}

.page-closing{padding-block:clamp(56px,6.6vw,104px)}
.page-closing h2{font-size:var(--step-4);margin-top:22px;line-height:1.1}
.page-closing h2 span{display:block;color:var(--ink-2)}
.closing-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(22px,3.4vw,40px)}
.closing-body p{color:var(--ink-2);max-width:52ch}

/* ============ TECHNOLOGY ============ */
.tech-hero{padding-top:clamp(40px,6.4vh,86px);border-bottom:1px solid var(--line)}
.tech-hero h1{font-size:var(--t-display);margin:14px 0 0;line-height:1.2;letter-spacing:.01em}
.tech-hero h1 em{font-style:normal;color:var(--accent)}
.tech-hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);align-items:end;margin-top:clamp(18px,2.6vw,32px)}
.tech-hero-foot .lede{max-width:46ch}
.quiet-meta{color:var(--ink-3)}
.scene-band{position:relative;height:clamp(320px,38vw,540px);margin-top:clamp(26px,3.6vw,52px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scene-band .scene-canvas{width:100%;height:100%;display:block}
.scene-band-short{height:clamp(240px,26vw,380px)}

.flow{padding-block:clamp(64px,8vw,124px)}
.flow-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(20px,4vw,60px);align-items:end}
.flow-head h2{font-size:var(--step-4);margin-top:12px;line-height:1.08}
.flow-band{display:grid;grid-template-columns:1fr 90px 1fr 90px 1fr;align-items:stretch;margin-top:clamp(30px,4vw,56px)}
.flow-node{padding-top:16px;border-top:1px solid var(--line-strong)}
.flow-idx{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.18em;color:var(--ink-3)}
.flow-node h3{font-size:var(--step-2);margin:10px 0 6px;font-weight:600;letter-spacing:-.01em}
.flow-node p{font-size:var(--t-small);color:var(--ink-2);margin:0;font-family:var(--font-mono);letter-spacing:.04em}
.flow-link{position:relative;border-top:1px solid var(--line-strong);margin-top:16px;height:2px}
.flow-link i{position:absolute;right:0;top:-4px;width:6px;height:9px;background:var(--signal);display:block}
.flow-node .flow-note{font-family:var(--font-body);font-size:13px;line-height:1.6;letter-spacing:0;color:var(--ink-3);margin-top:10px;max-width:26ch}
.flow-tail{display:flex;justify-content:space-between;gap:20px;margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.flow-tail b{color:var(--ink);font-weight:500}

.rail{padding-bottom:clamp(60px,7vw,110px)}
.rail-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:end;padding-bottom:clamp(26px,3.4vw,44px)}
.rail-head h2{font-size:var(--step-4);line-height:1.08}
.rail-head h2 span{display:block;color:var(--ink-2)}
.rail-list{border-top:1px solid var(--line-strong)}
.rail-item{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:clamp(16px,3vw,48px);align-items:start;padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--line)}
.rail-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--signal);padding-top:6px}
.rail-main h3{font-size:var(--step-2);margin:0 0 8px;font-weight:600}
.rail-main p{color:var(--ink-2);margin:0;max-width:46ch}
.rail-tag{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--ink-3);white-space:nowrap;padding-top:8px}

.invert-band{background:var(--band-bg);color:var(--band-fg);padding-block:clamp(36px,4.2vw,64px)}
.invert-band .meta,.invert-band small,.invert-band .flow-idx{color:var(--band-fg-3)}
.invert-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,5vw,80px);align-items:center}
.invert-grid h2{font-size:var(--step-4);line-height:1.06;margin:0}
.invert-grid p{margin:0;font-size:15px;color:var(--band-fg-2)}
.invert-steps{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(28px,4vw,52px);border-top:1px solid var(--band-line);list-style:none}
.invert-steps li{padding:16px 0 0;display:flex;flex-direction:column;gap:6px}
.invert-steps span{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--band-fg-3)}
html[data-theme="dark"] .invert-steps span{color:var(--ink-3)}
.invert-steps b{font-size:var(--step-1);font-weight:600}
.invert-steps small{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em}
.invert-tall{padding-block:clamp(52px,5.6vw,88px)}
.invert-quote .quote{font-size:var(--step-4);line-height:1.08;margin:18px 0 0;max-width:20ch}
.invert-band .shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px)}
.invert-side{align-self:end}
.invert-side p{font-size:var(--t-body);line-height:1.7}
.invert-band .link-arrow{color:var(--band-fg);margin-top:18px;display:inline-flex}
.invert-cta{grid-column:1 / -1;display:inline-flex;justify-self:start;margin-top:clamp(24px,3vw,40px);padding-top:14px;border-top:1px solid var(--band-line);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--band-fg);gap:10px}
html[data-theme="dark"] .invert-cta{color:var(--ink);border-color:var(--line)}

/* ============ ABOUT ============ */
.about-hero{padding-top:clamp(36px,5.4vh,76px);border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,4.4vw,70px);align-items:center}
.about-display{font-family:var(--font-display);font-weight:500;font-size:var(--t-display);line-height:1.2;letter-spacing:.02em;margin:16px 0 0}
.about-copy .lede{margin-top:16px}
.about-display em{font-style:normal;color:var(--accent)}
.about-marks{display:flex;align-items:center;gap:18px;margin-top:clamp(18px,3vw,34px);color:var(--ink-3);font-size:var(--step-1)}
.about-marks span{font-size:var(--step-3);color:var(--ink-2);letter-spacing:.1em}
.about-marks i{flex:1;height:1px;background:var(--line-strong);display:block;max-width:180px}
.about-scene{position:relative;height:clamp(480px,62vh,700px)}
.about-scene .scene-canvas{width:100%;height:100%;display:block}

.meaning{padding-block:clamp(56px,7vw,110px)}
.meaning-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,4vw,60px);align-items:end;padding-bottom:clamp(28px,4vw,54px);border-bottom:1px solid var(--line-strong)}
.meaning-head h2{grid-column:1;font-size:var(--t-h2);margin:12px 0 0;line-height:1.14}
.meaning-head .body{grid-column:2}
.meaning-rows{display:flex;flex-direction:column}
.meaning-row{display:grid;grid-template-columns:clamp(72px,8vw,132px) minmax(0,1fr);gap:clamp(20px,4vw,64px);padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid var(--line);align-items:start}
.meaning-glyph{font-size:var(--t-display);line-height:1;color:var(--accent);filter:saturate(.9)}
.meaning-id{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--ink-3)}
.meaning-body h3{font-size:var(--step-2);margin:12px 0 14px;font-weight:600}
.meaning-body p{max-width:58ch;margin:0}

.worktable{padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--line)}
.worktable-head h2{font-size:var(--step-4);margin:14px 0 0;line-height:1.08}
.worktable-head h2 span{display:block;color:var(--ink-2)}
.worktable-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--line-strong)}
.wt-cell{padding:16px 0 22px;border-right:1px solid var(--line);padding-right:16px}
.wt-cell:last-child{border-right:0}
.wt-cell span{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--ink-3);display:block}
.wt-cell b{display:block;font-size:var(--step-1);font-weight:600;margin-top:10px}
.worktable-flow{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,2.6vw,32px);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3)}
.worktable-flow i{flex:1;height:1px;background:var(--line);display:block;max-width:120px}

.team{padding-block:clamp(60px,7vw,110px);border-top:1px solid var(--line)}
.team-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,4.6vw,80px);align-items:start}
.team-copy h2{font-size:var(--t-h2);margin:12px 0 20px;line-height:1.14}
.team-copy h2 span{display:block;color:var(--ink-2)}
.team-copy .body{margin:0 0 16px;max-width:52ch}
.belief-list{border-top:1px solid var(--line-strong);list-style:none}
.belief-list li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.belief-list span{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--signal)}
.belief-list b{font-size:var(--step-1);font-weight:600;display:block;margin-bottom:6px}
.belief-list p{font-size:var(--t-small);color:var(--ink-2);margin:0}
.belief-list small{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--ink-3);white-space:nowrap}

/* ============ CONNECT ============ */
.p-hero-grid-reverse{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.connect-tags{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding-top:14px;border-top:1px solid var(--line);margin-top:4px}
.connect-tags li{font-size:13px;color:var(--ink-2);letter-spacing:.08em;display:flex;align-items:center;gap:22px}
.connect-tags li:not(:last-child)::after{content:"";width:3px;height:3px;background:var(--ink-3);border-radius:50%;opacity:.6}

.dimensions{padding-block:clamp(56px,7vw,110px)}
.dim-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,4vw,60px);align-items:end;padding-bottom:clamp(24px,3vw,40px)}
.dim-head h2{font-size:var(--step-4);margin-top:12px;line-height:1.08}
.dim-head h2 span{display:block;color:var(--ink-2)}
.dim-list{border-top:1px solid var(--line-strong);list-style:none}
.dim-row{display:grid;grid-template-columns:56px clamp(120px,13vw,200px) minmax(0,1fr) 26px;gap:clamp(14px,2.4vw,40px);align-items:baseline;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.dim-row:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.dim-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3)}
.dim-name b{font-size:var(--step-2);font-weight:600;display:block;letter-spacing:.02em}
.dim-name small{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--ink-3)}
.dim-row p{margin:0;color:var(--ink-2);max-width:46ch}
.dim-arrow{color:var(--ink-3);font-size:var(--t-body)}

/* ============ ECOSYSTEM ============ */
.eco-hero{padding-top:clamp(40px,6.4vh,86px);border-bottom:1px solid var(--line)}
.eco-display{font-family:var(--font-display);font-weight:500;font-size:var(--t-display);line-height:1.2;letter-spacing:.01em;margin:14px 0 0}
.eco-display em{font-style:normal;color:var(--accent)}
.eco-hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);align-items:end;margin:clamp(16px,2.4vw,30px) 0 0}

.modes{padding-block:clamp(52px,6.4vw,100px)}
.modes-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr);gap:clamp(20px,4vw,60px);align-items:end;padding-bottom:clamp(30px,4vw,56px)}
.modes-head h2{font-size:var(--step-4);line-height:1.06;margin:0}
.modes-head h2 span{display:block;color:var(--ink-2)}
.mode-grid{display:grid;grid-template-columns:1.28fr .92fr 1.18fr;gap:clamp(18px,2.6vw,40px);align-items:start}
.mode{padding-top:16px;border-top:1px solid var(--line-strong)}
.mode-b{margin-top:clamp(20px,3vw,46px)}
.mode-c{margin-top:clamp(40px,6vw,92px)}
.mode-id{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--signal)}
.mode h3{font-size:var(--step-2);margin:12px 0 12px;font-weight:600}
.mode p{color:var(--ink-2);margin:0;max-width:34ch}

.cycle{padding-block:clamp(56px,7vw,110px);border-top:1px solid var(--line)}
.cycle-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.7fr);gap:clamp(20px,4vw,56px);align-items:end;padding-bottom:clamp(28px,3.6vw,48px)}
.cycle-head h2{grid-column:1;font-size:var(--t-h2);margin:14px 0 0}
.cycle-head .body{grid-column:2}
.cycle-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;position:relative;border-top:1px solid var(--line-strong);padding-top:20px}
.cycle-step{padding-right:clamp(16px,3vw,40px);border-right:1px solid var(--line)}
.cycle-step + .cycle-step{padding-left:clamp(16px,3vw,40px)}
.cycle-step:last-of-type{border-right:0}
.cycle-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--signal)}
.cycle-step h3{font-size:var(--step-2);margin:10px 0 10px;font-weight:600}
.cycle-step p{color:var(--ink-2);margin:0;max-width:32ch;font-size:var(--t-body)}
.cycle-step small{display:block;margin-top:12px;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--ink-3)}
.cycle-return{grid-column:1 / -1;display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3vw,36px);color:var(--ink-3);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em}
.cycle-return i{width:44px;height:1px;background:var(--signal);display:block}

/* ============ SUPPORT ============ */
.sup-hero{padding-top:clamp(36px,5.6vh,78px);border-bottom:1px solid var(--line)}
.sup-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(24px,4.4vw,70px);align-items:center}
.sup-copy h1{font-size:var(--t-display);line-height:1.22;margin:16px 0 0;letter-spacing:.01em}
.sup-copy .lede{margin-top:20px}
.sup-copy h1 em{font-style:normal;color:var(--accent)}
.sup-scene{position:relative;height:clamp(460px,60vh,700px)}
.sup-scene .scene-canvas{width:100%;height:100%;display:block}

.access{padding-block:clamp(56px,7vw,108px)}
.access-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,4vw,60px);align-items:end;padding-bottom:clamp(24px,3vw,40px)}
.access-head h2{font-size:var(--t-h2);margin-top:12px}
.access-list{border-top:1px solid var(--line-strong);list-style:none}
.access-row{position:relative;display:grid;grid-template-columns:clamp(96px,10vw,148px) max-content minmax(0,1fr) 30px;gap:clamp(16px,2.6vw,44px);align-items:center;padding:clamp(24px,2.9vw,38px) 0;border-bottom:1px solid var(--line)}
.access-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.access-row:hover::before{transform:scaleY(1)}
.access-row:hover .acc-name{color:var(--accent)}
.acc-id{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--ink-3)}
.acc-name{font-size:clamp(21px,2.35vw,34px);font-weight:500;letter-spacing:-.022em;line-height:1.15;transition:color .24s var(--ease)}
.access-row p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}
.acc-arrow{display:inline-block;color:var(--ink-3);transition:color .3s var(--ease),transform .4s var(--ease)}
.access-row:hover .acc-arrow{color:var(--accent);transform:translate(2px,-2px)}
.access-note{margin:18px 0 0;font-size:var(--t-small);color:var(--ink-3);letter-spacing:.02em}

.guidance{padding-block:clamp(52px,6.4vw,100px);border-top:1px solid var(--line)}
.guide-head h2{font-size:var(--t-h2);margin:14px 0 26px}
.guide-rows{display:grid;grid-template-columns:1fr;gap:0}
.guide-row{display:grid;grid-template-columns:clamp(150px,16vw,236px) minmax(0,1fr);grid-template-areas:"idx body" "ttl body";column-gap:clamp(20px,4vw,72px);padding:clamp(20px,2.4vw,32px) 0;border-top:1px solid var(--line-strong)}
.guide-id{grid-area:idx;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--signal)}
.guide-row h3{grid-area:ttl;font-size:var(--step-1);margin:10px 0 0;font-weight:600}
.guide-row p{grid-area:body;font-size:var(--t-body);margin:0;max-width:64ch}

.contact{padding-block:clamp(52px,6vw,96px);border-top:1px solid var(--line)}
.contact-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,5vw,80px);align-items:end}
.contact-copy h2{font-size:var(--step-4);margin:16px 0 0;line-height:1.06}
.contact-copy h2 span{display:block;color:var(--ink-2)}
.contact-body p{margin:0 0 14px;max-width:50ch}
.contact-body .quiet{color:var(--ink-3);font-size:var(--t-small)}

/* ============ NEW PAGE RESPONSIVE ============ */
@media (max-width:1023px){
  .tech-hero-foot,.eco-hero-foot{grid-template-columns:1fr;align-items:start}
  .flow-band{grid-template-columns:1fr;gap:22px}
  .flow-link{display:none}
  .rail-head,.dim-head,.modes-head,.cycle-head,.access-head{grid-template-columns:1fr;align-items:start}
  .cycle-head .body{grid-column:1}
  .rail-item{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .rail-tag{grid-column:2;padding-top:0;margin-top:8px}
  .about-grid,.sup-grid,.contact-inner{grid-template-columns:1fr;gap:26px}
  .about-scene,.sup-scene{height:clamp(260px,40vh,380px)}
  .meaning-head{grid-template-columns:1fr;align-items:start}
  .meaning-head .body{grid-column:1;margin-top:10px}
  .meaning-row{grid-template-columns:64px minmax(0,1fr);gap:18px}
  .team-grid{grid-template-columns:1fr;gap:30px}
  .dim-row{grid-template-columns:40px minmax(0,1fr);gap:12px 16px}
  .dim-row p{grid-column:2}
  .dim-arrow{display:none}
  .mode-grid{grid-template-columns:1fr;gap:24px}
  .mode-b,.mode-c{margin-top:0}
  .guide-rows{grid-template-columns:1fr;gap:0}
  .guide-row{grid-template-columns:1fr;grid-template-areas:"idx" "ttl" "body";row-gap:8px;padding:22px 0}
  .invert-band .shell{grid-template-columns:1fr;gap:24px}
  .invert-grid{grid-template-columns:1fr;gap:18px;align-items:start}
  .access-row{grid-template-columns:clamp(64px,15vw,110px) minmax(0,1fr) 24px;gap:10px 14px;padding:22px 0}
  .access-row p{grid-column:2}
}
@media (max-width:680px){
  .worktable-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invert-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0}
  .cycle-track{grid-template-columns:1fr;gap:0}
  .cycle-step{border-right:0;border-bottom:1px solid var(--line);padding:16px 0}
  .cycle-step:last-of-type{border-bottom:0}
  .meaning-row{grid-template-columns:48px minmax(0,1fr);gap:14px}
  .meaning-glyph{font-size:var(--step-4)}
  .tech-hero h1,.eco-display,.sup-copy h1{font-size:clamp(34px,9.4vw,46px)}
  .flow-node h3,.rail-main h3,.mode h3,.cycle-step h3{font-size:var(--step-2)}
  .guide-row h3{font-size:var(--step-1)}
}
@media (max-width:1023px){
  .p-hero-grid{grid-template-columns:1fr;gap:26px}
  .p-hero-scene{height:clamp(300px,42vh,430px)}
  .chapter-grid,.chapter-grid-reverse{grid-template-columns:1fr;gap:30px}
  .chapter-grid-reverse .chapter-art{order:0}
  .chapter-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .chapter-head .body{grid-column:1}
  .chapter-grid-tight{grid-template-columns:1fr;gap:26px}
  .chapter-grid-tight .chapter-copy{grid-column:1}
}
@media (max-width:680px){
  .p-hero-copy h1{font-size:clamp(30px,8.6vw,40px)}
  .p-hero-list li{grid-template-columns:28px minmax(0,1fr);}
  .p-hero-list small{grid-column:2;font-size:var(--t-meta)}
  .prev-hero-note{display:none}
  .chapter-copy h2,.chapter-head h2{font-size:clamp(25px,7vw,32px)}
  .spec-list li{grid-template-columns:82px minmax(0,1fr)}
  .spec-inline{grid-template-columns:1fr}
  .spec-inline li{grid-template-columns:88px minmax(0,1fr)}
  .spec-inline li:nth-child(2){border-top:0}
  .chapter-wide-foot{grid-template-columns:1fr;gap:18px}
  .chapter-wide-foot .link-arrow{justify-self:start}
  .closing-body{grid-template-columns:1fr;gap:20px}
  .schematic{max-height:320px}
}

@media (max-width:1180px){
  .hero-copy h1{font-size:clamp(34px,4.6vw,52px)}
  .system-index a{grid-template-columns:48px minmax(170px,.72fr) minmax(0,1.65fr) 18px}
}
@media (max-width:900px){
  .hero-home{min-height:0}
  .hero-home-main{grid-template-columns:1fr;gap:26px}
  .hero-copy{padding-block:0}
  .hero-scene{height:clamp(300px,44vh,460px);margin-right:0;margin-left:calc(var(--gutter) * -.4)}
  .hero-scene::before{display:none}
  .hero-index{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-index a{border-bottom:1px solid var(--line);padding-right:10px}
  .hero-index a:nth-child(3n){border-right:0}
  .manifesto-grid{grid-template-columns:1fr;gap:26px}
  .manifesto-grid h2,.manifesto-body{grid-column:1 / -1}
  .principles li{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .principles li p{grid-column:2}
  .system-index a{grid-template-columns:36px minmax(0,1fr) 16px;row-gap:8px}
  .system-index .desc{grid-column:2;grid-row:2}
  .system-index .state{display:none}
  .method-grid{grid-template-columns:1fr;gap:38px}
}
@media (max-width:680px){
  .hero-copy h1{font-size:clamp(30px,9vw,40px)}
  .hero-copy .lede{font-size:15px}
  .hero-scene{height:clamp(240px,34vh,340px);margin-right:calc(var(--gutter) * -1)}
  .hero-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-index a{padding:14px 8px 16px 0;min-height:44px}
  .hero-index a:nth-child(3n){border-right:1px solid var(--line)}
  .hero-index a:nth-child(2n){border-right:0}
  .hero-index a strong{font-size:13px}
  .hero-index a small{display:none}
  .manifesto-grid h2{font-size:clamp(26px,7.2vw,34px)}
  .principles li{padding:18px 0}
  .step-rail li{grid-template-columns:38px minmax(0,1fr)}
  .step-rail small{display:none}
  .cta-title{font-size:clamp(30px,8.4vw,42px)}
  .system-index .name{font-size:17px}
  .system-index .desc{font-size:var(--t-small)}
}

/* ---------- full-bleed hero: one scene, type laid over it ---------- */
.hero-full{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(calc(100svh - var(--header-h) - 12px),900px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(56px,8vh,110px);
}
.hero-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-stage .scene-art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 50%;
  transform:scale(1.02);
  animation:art-drift 40s cubic-bezier(.4,0,.6,1) infinite alternate;
}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(102deg,
    var(--paper) 4%,
    color-mix(in srgb,var(--paper) 92%,transparent) 26%,
    color-mix(in srgb,var(--paper) 74%,transparent) 44%,
    transparent 62%);
}
html[data-theme="dark"] .hero-veil{
  background:linear-gradient(102deg,
    rgba(5,7,10,.97) 4%,
    rgba(5,7,10,.9) 26%,
    rgba(5,7,10,.74) 44%,
    rgba(5,7,10,0) 62%);
}
.hero-layer{position:relative;z-index:1;flex:1 1 auto;min-height:clamp(380px,46vh,560px);display:flex;align-items:flex-end;padding-bottom:clamp(22px,3.6vh,52px)}
.hero-full .hero-copy{max-width:min(640px,48vw)}
.hero-foot{position:relative;z-index:1;display:flex;flex-direction:column;padding-bottom:clamp(16px,2.2vh,28px)}
/* the foot sits on the plate: give it a soft ground so the caption stays legible */
/* the foot band is solid, the picture dissolves above it:
   metre reads as a magazine plate, and the index never sits on glass */
.hero-full::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:40%;z-index:0;pointer-events:none;
  background:linear-gradient(to top,
    var(--paper) 0%,
    var(--paper) 58%,
    color-mix(in srgb,var(--paper) 88%,transparent) 74%,
    color-mix(in srgb,var(--paper) 56%,transparent) 87%,
    color-mix(in srgb,var(--paper) 20%,transparent) 96%,
    transparent 100%);
}
html[data-theme="dark"] .hero-full::after{
  background:linear-gradient(to top,
    rgba(5,7,10,1) 0%,
    rgba(5,7,10,1) 58%,
    rgba(5,7,10,.88) 74%,
    rgba(5,7,10,.54) 87%,
    rgba(5,7,10,.2) 96%,
    rgba(5,7,10,0) 100%);
}
.hero-full .scene-caption b{color:var(--ink)}
.hero-full .hero-index a span,.hero-full .hero-index a small{opacity:.72}

.hero-full .scene-caption{position:relative;left:auto;right:auto;bottom:auto;background:none;padding:0 2px 14px;border-bottom:1px solid var(--line)}
.hero-full .hero-index{margin-top:clamp(14px,2vh,24px)}

/* ---------- hero type stack + bottom band ---------- */
.hero-full .hero-copy{
  display:flex;flex-direction:column;gap:clamp(14px,2.1vh,26px);
  max-width:min(680px,50vw);
}
.hero-full .hero-copy .display{margin-bottom:0}
.hero-full .hero-act{margin-top:clamp(2px,1vh,10px)}
.hero-band{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;margin:0 0 clamp(12px,1.8vh,20px);padding:clamp(12px,1.8vh,18px) 0 0;
  border-top:1px solid var(--line);
}
.hero-band-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hero-band li{
  display:flex;flex-direction:column;gap:5px;
  padding-right:clamp(8px,1.4vw,22px);
  border-right:1px solid var(--line);
}
.hero-band li:last-child{border-right:0;padding-right:0}
.hero-band .idx{font-size:var(--t-meta);letter-spacing:.12em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.hero-band a{font-size:var(--t-body);color:var(--ink);text-decoration:none;line-height:1.35}
.hero-band a:hover{color:var(--accent)}
.hero-band small{font-size:var(--t-meta);letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.hero-full .quiet-meta{margin-top:6px}
/* the plate needs a whisper of structure so the type never floats on a photo */
.hero-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(12,18,22,.055) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;
  opacity:.5;
  mask-image:linear-gradient(to right,rgba(0,0,0,.9),transparent 58%);
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.9),transparent 58%);
}
html[data-theme="dark"] .hero-stage::after{
  background-image:linear-gradient(to right,rgba(237,242,245,.06) 1px,transparent 1px);
  opacity:.55;
}
@media (max-width:900px){
  .hero-full .hero-copy{max-width:none}
  .hero-full .hero-band{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .hero-band li{border-right:0;padding-right:0}
  .hero-full .hero-layer{min-height:clamp(280px,40vh,420px)}
}

.hero-full .lede{text-wrap:pretty;max-width:52ch}

/* ---------- rhythm: sections do not all breathe the same ---------- */
.manifesto,.interface,.home-cta,.contact{padding-block:clamp(96px,10vw,170px)}
.product-intro,.method,.cycle{padding-block:clamp(72px,7vw,112px)}
.invert-band,.invert-tall{padding-block:clamp(80px,8vw,136px)}

.manifesto-grid h2,
.interface h2,
.cta-title,
.invert-band h2,
.invert-tall h2{
  font-size:clamp(40px,5.2vw,74px);line-height:1.06;letter-spacing:-.015em;
  text-wrap:balance;
}
.sec-head h2{font-size:clamp(30px,3.1vw,44px);line-height:1.12;text-wrap:balance}
.sec-head{gap:clamp(20px,2.4vw,40px)}
/* body copy never runs the full measure of a column */
.sec-head p,.body p{max-width:var(--measure-body);text-wrap:pretty}

/* ---------- overflow guards + readable body ---------- */
.manifesto-grid h2{font-size:clamp(32px,3.55vw,52px);line-height:1.12;margin:0}
.manifesto-grid h2 span{line-height:1.12}
.interface h2{font-size:clamp(34px,4.4vw,62px);line-height:1.08}
.cta-title{font-size:clamp(34px,4.4vw,62px);line-height:1.1}
.body p,.sec-head p,.principles p,.home-method p{font-size:16px;line-height:1.8;color:var(--ink-2)}
.lede{font-size:17px;line-height:1.75}

/* ---------- full-bleed stage band: one breath between chapters ---------- */
.stage-band{position:relative;height:clamp(300px,44vh,520px);overflow:hidden;isolation:isolate;margin:0}
.stage-band .scene-art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 30%;
  transform:scale(1.55);
  animation:art-drift 52s cubic-bezier(.4,0,.6,1) infinite alternate;
}
.stage-band-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(4,6,9,.82) 2%,
    rgba(4,6,9,.5) 42%,
    rgba(4,6,9,.22) 74%,
    rgba(4,6,9,.12) 100%);
}
.stage-band-line{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(22px,4vh,48px);
  margin:0;color:#F7F9FA;font-size:clamp(22px,2.5vw,40px);line-height:1.16;
  letter-spacing:-.012em;font-family:var(--font-display);font-weight:500;
  text-shadow:0 1px 24px rgba(0,0,0,.35);
}
@media (max-width:760px){
  .stage-band{height:clamp(220px,36vh,340px)}
}

html[data-theme="dark"] .stage-band-veil{
  background:linear-gradient(to top,
    rgba(4,6,9,.78) 2%,
    rgba(4,6,9,.36) 44%,
    rgba(4,6,9,.08) 100%);
}
html[data-theme="dark"] .stage-band-line{color:#EAF2F7}

/* ---------- small screens: one clean frame, subject centred ---------- */
@media (max-width:760px){
  .hero-stage .scene-art{object-position:52% 54%}
  .hero-full{min-height:calc(100svh - var(--header-h));padding-top:clamp(40px,7vh,80px)}
  .hero-full .hero-index{display:none}
  .hero-full .hero-foot{padding-bottom:14px}
  .hero-full .scene-caption{padding-bottom:10px}
  .hero-full .scene-caption span{display:none}
  .hero-full .hero-layer{min-height:clamp(240px,38vh,380px);align-items:flex-end}
  .stage-band{height:clamp(240px,38vh,360px)}
  .stage-band-line{font-size:clamp(20px,6vw,28px)}
}

/* ================= GRID BASELINE (V23 handover) ================= */
:root{
  --t-h2-sec: clamp(36px, 3.6vw, 52px);
  --t-h2-claim: clamp(40px, 4.6vw, 66px);
  --measure-prose: 40em;
}

/* section rhythm: one value for every content section, hero and band stay full-bleed */
main > section:not(.hero):not(.hero-full):not(.band):not(.stage-band):not(.v2):not(.v3){
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* headings: exactly two display steps, no page-local exceptions */
main h2{font-size:var(--t-h2-sec);line-height:1.18;letter-spacing:-.012em}
.manifesto h2,
.interface h2,
.home-cta .cta-title,
.invert-band h2,
.page-closing h2,
.meaning h2{font-size:var(--t-h2-claim);line-height:1.1}

/* prose measure: ~40 Chinese characters per line, not 33 */
.body p,
.sec-head p,
.principles p,
.home-method p,
.chapter-copy p,
.modes-copy p,
.guidance p{max-width:var(--measure-prose)}
.lede{max-width:36em}

/* gutters at the two handed-over breakpoints */
@media (max-width:1100px){
  :root{--gutter:clamp(28px,5vw,58px)}
}
@media (max-width:760px){
  :root{--gutter:22px}
}

/* one display scale for the whole site: section heads vs manifesto heads */
.sec-head h2,
.method-copy h2,
.flow-head h2,
.rail-head h2,
.dim-head h2,
.modes-head h2,
.worktable-head h2,
.invert-grid h2,
.contact-copy h2,
.chapter-copy h2,
.chapter-head h2,
.meaning-head h2,
.team-copy h2,
.cycle-head h2,
.access-head h2,
.guide-head h2,
.guidance h2,
.product-intro h2{
  font-size: var(--t-h2-sec);
  line-height: 1.16;
  text-wrap: balance;
}

.manifesto-grid h2,
.page-closing h2,
.invert-tall h2,
.home-cta .cta-title,
.interface h2,
.meaning h2{
  font-size: var(--t-h2-claim);
  line-height: 1.08;
  text-wrap: balance;
}

/* the second line of a display headline is ink, not brand colour:
   one accent per view is worth more than a blue sentence */
.hero-copy h1 em,
.p-hero-copy h1 em,
.tech-hero h1 em,
.about-display em,
.eco-display em,
.sup-copy h1 em,
.hero-copy .display em{color:var(--ink)}

/* wide screens: a touch more type size for 16px body in a 1262 frame */
@media (min-width:1101px){
  body{font-size:16px}
  .lede{font-size:17px;line-height:1.72}
}

/* the plate's bottom weight follows what actually sits there */
.hero-full:has(.hero-band)::after,
.hero-full:has(.hero-index)::after{height:40%}
.hero-full:not(:has(.hero-band)):not(:has(.hero-index))::after{height:0}
/* narrow screens stack the index in rows, so the plate has to reach higher */
@media (max-width:900px){
  .hero-full:has(.hero-band)::after,
  .hero-full:has(.hero-index)::after{height:54%}
}

/* captions: no plate at all — type sits straight on the image and shares the
   headline's measure, so the two edges line up to the pixel */
.hero-full .scene-caption{
  padding:12px 0 9px;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
.hero-full .scene-caption b{color:var(--ink)}
html[data-theme="light"] .hero-full .scene-caption,
html[data-theme="light"] .hero-full .scene-caption b{color:var(--ink);font-weight:500}
html[data-theme="light"] .hero-full .scene-caption span{color:color-mix(in srgb,var(--ink) 78%,transparent)}
html[data-theme="dark"] .hero-full .scene-caption{
  background:rgba(5,7,10,.34);
  padding:10px 0;
}
html[data-theme="dark"] .hero-full .scene-caption b{color:var(--ink)}
html[data-theme="dark"] .hero-full .scene-caption span{color:#AEBCC6}

/* reading size for a 1262 frame: 17/1.75 body, 18 lede */
.body p,
.sec-head p,
.principles p,
.home-method p,
.chapter-copy p,
.modes-copy p,
.guidance p,
.manifesto-body p,
.aside p,
.step-rail p{
  font-size:var(--step-0);
  line-height:1.75;
}
.lede{font-size:18px;line-height:1.7}
.principles p,
.aside p,
.step-rail p{max-width:38em}

/* ---------- the image band is a second scene, not a banner ---------- */
.stage-band{
  height:clamp(420px,62vh,660px);
}
.stage-band-veil{
  background:
    linear-gradient(96deg,
      rgba(4,6,9,.62) 0%,
      rgba(4,6,9,.44) 22%,
      rgba(4,6,9,.16) 46%,
      rgba(4,6,9,.03) 66%,
      rgba(4,6,9,0) 80%),
    linear-gradient(to top,
      rgba(4,6,9,.42) 0%,
      rgba(4,6,9,.10) 32%,
      rgba(4,6,9,0) 54%);
}
.stage-band-line{
  left:var(--gutter);right:auto;
  max-width:min(760px,54vw);
  bottom:clamp(44px,7vh,96px);
  font-size:clamp(30px,4.2vw,62px);
  line-height:1.12;letter-spacing:-.015em;
  text-wrap:balance;
}
.stage-band::after{
  content:"";position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:clamp(22px,3.4vh,40px);height:1px;
  background:rgba(255,255,255,.22);pointer-events:none;
}
@media (max-width:760px){
  .stage-band{height:clamp(300px,46vh,420px)}
  .stage-band-line{max-width:none;right:var(--gutter);font-size:clamp(24px,7vw,34px);bottom:clamp(32px,5vh,48px)}
}

/* left column of the method block is a full-height rail, not a floating paragraph */
.method-copy{display:flex;flex-direction:column}
.method-copy .link-arrow{margin-top:auto;align-self:flex-start;padding-top:clamp(20px,3vw,40px)}

/* caption plate only where it carries the product index */

/* contact closes the page as a statement, not as a two-column form */
.contact-inner{grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px);align-items:start}
.contact-copy h2{font-size:var(--t-h2-claim)}
.contact-body{max-width:46ch}
.contact-body p{max-width:none}

/* the hero shares the page measure: at 1800 the old 1440 frame left 292px
   before the h1, and a full-bleed hero would then mis-align with the sections below */
/* and the copy sits higher: the plate below already carries its own weight */
.hero-full{padding-top:clamp(40px,5.4vh,78px)}
.hero-full .hero-layer{
  min-height:clamp(420px,48vh,620px);
  align-items:center;
  padding-top:0;
}

/* index micro-type needs one more step of ink on bright ground */
html[data-theme="light"] .hero-band small,
html[data-theme="light"] .hero-band .idx,
html[data-theme="light"] .hero-index small,
html[data-theme="light"] .hero-index a span{color:var(--ink-2)}

/* ---- 断行：标题求平衡，正文求不留孤字 ---------------------------------- */
:where(h1, h2, h3, .claim, .stage-band-line, .hero-copy h1){text-wrap:balance}
:where(.lede, .body, .aside, .closing-body p, .tab-body, .dim-row p, .guide-row p, .spec-list li p, .principle p){text-wrap:pretty}

/* 深色收尾屏：纯黑无体积，加一层极淡径向明度（不是发光，只是让画面有前后） */
html[data-theme="dark"] .home-cta,
html[data-theme="dark"] .page-closing{
  background-image:radial-gradient(130% 96% at 50% 26%, rgba(228,240,255,.052), rgba(228,240,255,0) 62%)
}

/* 触摸命中区：整行可点的列表项实测 23px，低于 24×24。扩 padding、用负 margin 抵消视觉位移 */
.dim-row a,
.access-row a{
  padding-block:4px;
  margin-block:-4px;
}
@media (pointer:coarse){
  .dim-row a,
  .access-row a,
  .footer-nav a,
  .link-arrow{padding-block:8px;margin-block:-8px}
}

/* hero 底部索引格：文字行高 23px，触摸命中区偏小 */
.hero-band a,
.hero-index a{padding-block:11px;margin-block:-11px}

/* 图带与 hero 用同一场景资产：换取景位置，避免「同一张图出现两次」 */
.stage-band .scene-art[data-art="products"]{object-position:50% 34%}
.stage-band .scene-art[data-art="technology"]{object-position:50% 68%}
.stage-band .scene-art[data-art="about"]{object-position:50% 44%}
.stage-band .scene-art[data-art="connect"]{object-position:50% 28%}
.stage-band .scene-art[data-art="ecosystem"]{object-position:50% 62%}
.stage-band .scene-art[data-art="support"]{object-position:50% 22%}
.stage-band .scene-art[data-art="index"]{object-position:50% 55%}

/* ---------- real product UI, not a drawing ---------- */
.ui-shot{margin:clamp(30px,3.6vw,54px) 0 0}
.ui-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--paper-raised);box-shadow:0 34px 76px -54px rgba(12,18,22,.32)}
.ui-shot figcaption{display:flex;justify-content:space-between;gap:1.4em;margin-top:12px;font-size:12px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
html[data-theme="dark"] .ui-shot img{filter:brightness(.86) contrast(1.03) saturate(.94);border-color:var(--line-strong);box-shadow:0 46px 110px -62px #000,0 0 0 1px rgba(255,255,255,.05)}
@media (max-width:760px){.ui-shot figcaption{font-size:11px;gap:1em}}

/* ---------- 信息层级：关键条目提为主读层，系统入口升为按钮 ---------- */
.spec-list span{font-size:15px;letter-spacing:.05em;color:var(--ink-2)}
.spec-list p{color:var(--ink);font-size:18px;line-height:1.72}
.chapter-wide-foot .btn{justify-self:end;margin-bottom:4px}
.chapter-wide-foot .btn + .btn{margin-top:10px}
.chapter-copy .btn{margin-top:18px;align-self:flex-start}
@media (max-width:760px){
  .spec-list span{font-size:14px}
  .chapter-wide-foot .btn{justify-self:start;margin-top:16px}
}

/* 章节引语提级：从右上小字改为可读的准副标题 */
.chapter-head .body{font-size:clamp(18px,1.42vw,20px);line-height:1.78;color:var(--ink-2);max-width:34em}
.ui-shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,.9vw,14px)}
@media (max-width:760px){.ui-shot-pair{grid-template-columns:1fr}}
/* 半栏真实界面 */
.chapter-art img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--paper-raised);box-shadow:0 30px 70px -52px rgba(12,18,22,.3)}
html[data-theme="dark"] .chapter-art img{filter:brightness(.86) contrast(1.03) saturate(.94);border-color:var(--line-strong);box-shadow:0 40px 100px -60px #000}
/* 含真实截图的半栏：去掉图纸网格与外框，只留图本身 */
.chapter-art:has(img){border:0;padding:0;background:none;overflow:visible}
.chapter-art:has(img)::before{display:none}
.chapter-art:has(img) figcaption{border-top:0;padding-top:0;margin-top:12px}

/* ---------- 第 18 轮：link-arrow 按钮化后的反色带适配 ---------- */
.invert-band .link-arrow{border-color:var(--band-line-strong)}
.invert-band .link-arrow span{background:var(--band-fg);color:var(--band-bg)}
.invert-band .link-arrow:hover{border-color:var(--band-fg)}

/* ---------- 第 18 轮：宽幅章节的入口按钮回到内容流 ---------- */
.chapter-wide-foot{grid-template-columns:minmax(0,1fr)}
.chapter-wide-foot .link-arrow{justify-self:start;margin-bottom:0}
.chapter-wide-foot .btn{grid-column:1/-1;justify-self:start;margin-top:clamp(18px,2.2vw,26px);margin-bottom:0}

/* ---------- 首屏底部索引条统一：六格 / 四格 / 五格 ---------- */
.hero-index, .hero-band{border-top:1px solid var(--line-strong);margin-top:clamp(20px,2.6vh,34px)}
.hero-index{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.hero-band{display:grid}
.hero-band-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-band-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hero-band li{list-style:none}
.hero-index a,
.hero-band li > a,
.hero-band-5 li{
  position:relative;display:flex;flex-direction:column;
  padding:20px clamp(16px,2vw,30px) 18px 0;
  border-right:none;
  transition:background .3s var(--ease);
}
.hero-band li > a{height:100%}
.hero-index a span,
.hero-band .idx{
  display:flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  color:var(--ink-3);line-height:1;
}
.hero-index a span i,
.hero-band .idx i{
  font-style:normal;font-size:9px;line-height:1;opacity:0;
  transform:translate(-3px,2px);
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.hero-index a strong,
.hero-band strong{
  font-size:clamp(17px,1.32vw,19px);font-weight:600;letter-spacing:-.01em;
  color:var(--ink);margin-top:11px;transition:color .24s var(--ease);
}
.hero-index a small,
.hero-band small{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--ink-3);margin-top:11px;line-height:1;
}
.hero-index a::after,
.hero-band li > a::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease);
}
.hero-index a:hover,
.hero-band li > a:hover{background:color-mix(in srgb,var(--paper-raised) 55%,transparent)}
.hero-index a:hover strong,
.hero-band li > a:hover strong{color:var(--accent)}
.hero-index a:hover span i,
.hero-band li > a:hover .idx i{opacity:1;transform:translate(0,0)}
.hero-index a:hover::after,
.hero-band li > a:hover::after,
.hero-index a:focus-visible::after,
.hero-band li > a:focus-visible::after{transform:scaleX(1)}
.hero-index a:focus-visible,
.hero-band li > a:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
html[data-theme="dark"] .hero-index a:hover,
html[data-theme="dark"] .hero-band li > a:hover{background:rgba(255,255,255,.045)}

/* ---------- 往下读 ---------- */
.hero-next{
  display:inline-flex;align-items:center;gap:16px;min-width:min(420px,100%);
  min-height:56px;padding:0 22px;margin-top:clamp(20px,2.6vh,34px);
  border:1px solid var(--line-strong);color:var(--ink);
  transition:border-color .26s var(--ease);
}
.hero-next .hn-k{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:var(--ink-3);
}
.hero-next strong{font-size:17px;font-weight:600;letter-spacing:-.01em}
.hero-next .hn-ar{margin-left:auto;font-size:14px;color:var(--ink-3);transition:transform .3s var(--ease),color .26s var(--ease)}
.hero-next:hover{border-color:var(--ink)}
.hero-next:hover .hn-ar{transform:translateY(3px);color:var(--accent)}
.hero-next:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

@media (max-width:900px){
  .hero-next{min-width:0;width:100%}
}
/* 往下读：不撑满，自带实底 */.hero-next{align-self:flex-start;background:var(--paper);min-width:0;width:auto}
.hero-next{min-width:300px}

/* 索引条落在场景图上：去竖线、给磨砂底、箭头默认可见 */
.hero-band li{border-right:none}
.hero-band, .hero-index{background:color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1)}
.hero-index a span i, .hero-band .idx i{opacity:.5;transform:translate(0,0)}
.hero-index a:hover span i, .hero-band li > a:hover .idx i{opacity:1;color:var(--accent);transform:translate(2px,-2px)}

/* hover 不再出现白块，只靠蓝线 + 标题变色 */
.hero-index a:hover, .hero-band li > a:hover, html[data-theme="dark"] .hero-index a:hover, html[data-theme="dark"] .hero-band li > a:hover{background:transparent}
.hero-band-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 三格：字号抬一档，密度跟上；索引条上沿渐变入场，去掉硬边 */
.hero-band-3 strong{font-size:clamp(20px,1.52vw,23px)}
.hero-band, .hero-index{
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--paper) 86%, transparent) 0,
    color-mix(in srgb, var(--paper) 97%, transparent) 22%,
    var(--paper) 46%);
}

/* 场景底部自然沉入纸面，索引条浮其上，去掉一切硬台阶 */
.hero-stage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(200px,26vh,320px);
  background:linear-gradient(to top,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 94%, transparent) 32%,
    color-mix(in srgb, var(--paper) 60%, transparent) 68%,
    transparent 100%);
  pointer-events:none;
}
.hero-band, .hero-index{background:color-mix(in srgb, var(--paper) 62%, transparent)}

/* 索引条底：84% 纸面，既压住图又不留块感 */
.hero-band, .hero-index{background:color-mix(in srgb, var(--paper) 84%, transparent)}

/* 首屏不再吃 section 级 padding：上下各 184px 把索引条顶出屏幕 */
.hero-full{padding-top:clamp(28px,4vh,56px);padding-bottom:0}

/* 底部渐隐收轻：别把场景下半截抹平 */
.hero-stage::after{height:clamp(150px,19vh,230px);background:linear-gradient(to top,
  var(--paper) 0%,
  color-mix(in srgb, var(--paper) 86%, transparent) 38%,
  color-mix(in srgb, var(--paper) 40%, transparent) 74%,
  transparent 100%)}

/* 手机端（<=900px）索引条：一次写清，六格/五格/四格三列，三格一行 */
@media (max-width:900px){
  .hero-index{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-full .hero-index{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-band-3,.hero-band-4,.hero-band-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-index a,.hero-band li > a,.hero-band-5 li{margin-block:0;padding:9px 10px 10px 0}
  .hero-full .hero-index a{padding:8px 8px 9px 0}
  .hero-index a strong,.hero-band strong{font-size:13px;margin-top:4px;line-height:1.3}
  .hero-index a span,.hero-band .idx{font-size:8.5px;letter-spacing:.12em}
  .hero-band small{font-size:9px;margin-top:6px}
  .hero-band-3 strong{font-size:14px}
  .hero-index a{border-bottom:0}
  .hero-index a small{display:none}
  .hero-index a:nth-child(3n),.hero-index a:nth-child(2n){border-right:0}
  .hero-full .hero-index a{border-right:0!important;border-bottom:0!important}
  .hero-full .hero-band li > a{border-right:0!important;border-bottom:0!important}
  .hero-full .hero-act{opacity:1}
}

/* ---------- 第 21 轮：四格补正文 ---------- */
.invert-steps em{
  font-style:normal;
  font-size:14px;
  line-height:1.6;
  margin-top:4px;
  max-width:23ch;
  color:var(--band-fg-2);
}
.wt-cell p{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
  max-width:24ch;
}
@media (max-width:680px){
  .invert-steps em{font-size:12.5px;max-width:none}
  .wt-cell p{font-size:13px;max-width:none}
}
/* ---------- 第 21 轮：流程行从装饰升级为可读语义行 ---------- */
.worktable-flow{
  margin-top:clamp(26px,3.2vw,44px);
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--ink-2);
  gap:16px;
}
.worktable-flow i{background:var(--line-strong);max-width:none;height:1px}
@media (max-width:680px){
  .worktable-flow{font-size:11.5px;gap:10px}
}
/* ---------- 第 21 轮：整句标题不许被 balance 拆成孤字 ---------- */
.invert-band h2{text-wrap:auto}
.invert-band h2 span{display:inline-block;white-space:nowrap}
@media (max-width:760px){
  .invert-band h2 span{display:inline;white-space:normal}
}

/* ---------- 第 21 轮：把首屏文案在手机上垂直居中，避免上方贴顶、下方大片空 ---------- */
@media (max-width:900px){
  .hero-full .hero-layer{align-items:center}
  .hero-full .hero-copy{width:100%}
}

/* ---------- 第 21 轮：三格索引在手机上必须一行三列（旧规则把它压成两列） ---------- */
@media (max-width:900px){
  .hero-band-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .hero-band-3 strong{font-size:13px}
}

/* ---------- 第 21 轮：五格索引在手机上一行三格，避免最后一个孤零零占半行 ---------- */
@media (max-width:900px){
  .hero-full .hero-band-5{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:0}
}

/* ============================================================
   第 23 轮 · products 结构去同构：六种屏型
   目标：一页之内每屏的容器骨架都不同，而不是同一套 shell 重复
   ============================================================ */
.v2{--edge:max(var(--gutter),calc((100vw - var(--shell)) / 2));}

/* —— 屏型 1：产品索引台（全幅贴边 · 四栏） —— */
.v2-suite{background:var(--paper);padding:clamp(74px,8.6vw,136px) 0 clamp(54px,6vw,92px);}
.v2-suite-head{padding-inline:var(--edge);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(28px,4.6vw,88px);row-gap:clamp(10px,1.2vw,18px);align-items:end;}
.v2-suite-head .sec-num{grid-column:1 / -1;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.2em;color:var(--ink-3);}
.v2-suite-head h2{grid-column:1;margin:0;font-size:clamp(34px,4.4vw,64px);line-height:1.1;letter-spacing:-.022em;}
.v2-suite-head h2 span{display:block;margin-top:.3em;font-size:.6em;letter-spacing:.01em;color:var(--ink-2);}
.v2-suite-head p{grid-column:2;margin:0 0 .42em;font-size:clamp(15px,1.15vw,17px);line-height:1.8;color:var(--ink-2);max-width:none;text-wrap:pretty;}

.v2-rail{margin:clamp(34px,4.6vw,68px) 0 0;padding:0;list-style:none;display:flex;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);}
.v2-card{flex:1 1 0;min-width:0;position:relative;border-right:1px solid var(--line);transition:background .45s ease;}
.v2-card:last-child{border-right:0;}
.v2-card::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.v2-card:hover{background:var(--paper-raised);}
.v2-card:hover::before{transform:scaleX(1);}
.v2-card{display:flex;flex-direction:column;height:100%;min-height:clamp(300px,30vw,400px);padding:clamp(24px,2.6vw,40px) clamp(20px,2.1vw,34px);}
.v2-card h3 a{text-decoration:none;color:inherit;}
.v2-card h3 a::after{content:"";position:absolute;inset:0;z-index:1;}
.v2-card-idx{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.2em;color:var(--ink-3);}
.v2-card h3{margin:clamp(16px,1.8vw,26px) 0 0;font-size:clamp(20px,1.75vw,27px);line-height:1.32;font-weight:600;letter-spacing:-.008em;}
.v2-card p{margin:10px 0 0;font-size:clamp(14px,.95vw,15px);line-height:1.72;color:var(--ink-2);max-width:26ch;}
.v2-tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.v2-tags li{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:11.5px;letter-spacing:.04em;color:var(--ink-3);}
.v2-go{margin-top:auto;padding-top:clamp(20px,2.4vw,34px);font-size:12.5px;letter-spacing:.08em;color:var(--accent);display:inline-flex;align-items:center;gap:8px;opacity:1;transition:color .3s ease,gap .3s ease;}
.v2-card:hover .v2-go{gap:13px;color:color-mix(in srgb,var(--accent) 82%,var(--ink));}
.v2-go i{font-style:normal;}

/* —— 屏型 2：深色全幅幕间（左文案 · 右结构） —— */
.v2-dark{background:var(--band-bg);color:var(--band-fg);padding:clamp(72px,8vw,128px) 0;}
.v2-dark-inner{padding-inline:var(--edge);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(34px,5.2vw,104px);align-items:center;}
.v2-meta{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.2em;color:var(--ink-3);}
.v2-dark .v2-meta{color:var(--band-fg-3);}
.v2-dark h2{margin:clamp(18px,2.2vw,30px) 0 0;font-size:clamp(38px,4.8vw,74px);line-height:1.06;letter-spacing:-.025em;}
.v2-dark h2 span{display:block;color:var(--band-fg-2);}
.v2-dark-lede{margin:clamp(20px,2.4vw,30px) 0 0;font-size:clamp(16px,1.15vw,19px);line-height:1.8;max-width:32ch;color:var(--band-fg-2);}
.v2-facts{margin:clamp(28px,3.4vw,46px) 0 0;border-top:1px solid var(--band-line-strong);}
.v2-facts div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(16px,1.8vw,28px);padding:14px 0;border-bottom:1px solid var(--band-line);}
.v2-facts dt{padding-top:3px;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--band-fg-3);}
.v2-facts dd{margin:0;font-size:clamp(14.5px,.95vw,16px);line-height:1.72;}
.v2-dark-art{margin:0;position:relative;will-change:transform;}
.v2-dark-art svg{display:block;width:100%;height:auto;}
.v2-dark-art figcaption{margin-top:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--band-fg-3);}
.v2-dark-art .sch-faint{fill:none;stroke:currentColor;stroke-opacity:.26;}
.v2-dark-art .sch-line{fill:none;stroke:currentColor;stroke-opacity:.58;}
.v2-dark-art .sch-box rect{fill:currentColor;fill-opacity:.07;stroke:currentColor;stroke-opacity:.34;}
.v2-dark-art .sch-node circle{fill:currentColor;}
.v2-dark-art .sch-label{fill:currentColor;fill-opacity:.55;}
.v2-sch-accent{stroke:var(--accent);fill:none;}

/* —— 通用按钮 —— */
.v2-btn{display:inline-flex;align-items:center;gap:10px;height:52px;margin-top:clamp(26px,3vw,40px);padding:0 clamp(20px,1.8vw,28px);border:1px solid var(--line-strong);border-radius:999px;font-size:15px;letter-spacing:.01em;text-decoration:none;color:var(--ink);transition:color .35s ease,background .35s ease,border-color .35s ease;}
.v2-btn span{transition:transform .35s ease;}
.v2-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.v2-btn:hover span{transform:translate(2px,-2px);}
.v2-btn-invert{border-color:var(--band-line-strong);color:var(--band-fg);}
.v2-btn-invert:hover{background:var(--band-fg);color:var(--band-bg);border-color:var(--band-fg);}

/* —— 屏型 3/4：左图右表 / 镜像 —— */
.v2-split{padding:clamp(54px,6.2vw,94px) var(--edge);display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(30px,4.4vw,84px);align-items:center;background:var(--paper);}
.v2-split-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.42fr);}
.v2-split-art{margin:0;min-width:0;}
.v2-split-art img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--paper-raised);box-shadow:0 40px 90px -62px rgba(12,18,22,.42);}
.v2-split-info{min-width:0;}
.v2-split-info h2{margin:clamp(16px,2vw,26px) 0 0;font-size:clamp(30px,3.2vw,48px);line-height:1.12;letter-spacing:-.02em;}
.v2-split-info>p{margin:clamp(16px,2vw,26px) 0 0;font-size:clamp(15px,1.05vw,17px);line-height:1.8;color:var(--ink-2);}

.v2-table{width:100%;border-collapse:collapse;margin:clamp(22px,2.8vw,38px) 0 0;}
.v2-table caption{caption-side:top;text-align:left;padding-bottom:10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);}
.v2-table th{text-align:left;padding:0 0 9px;border-bottom:1px solid var(--line-strong);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;font-weight:400;color:var(--ink-3);}
.v2-table td{padding:11px 0;border-bottom:1px solid var(--line);font-size:clamp(13.5px,.92vw,14.5px);line-height:1.62;color:var(--ink-2);vertical-align:top;}
.v2-table td:first-child{width:40%;padding-right:14px;color:var(--ink);font-weight:500;}
.v2-table tbody tr{transition:background .25s ease;}
.v2-table tbody tr:hover{background:var(--paper-raised);}

.v2-split-art figcaption,.v2-track-art figcaption{display:flex;justify-content:space-between;gap:1.4em;margin-top:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-2);opacity:1;}

/* —— 屏型 5：全幅图 + 横向步骤轨 —— */
.v2-track{background:var(--paper-deep);padding:0 0 clamp(64px,7.4vw,116px);overflow:hidden;}
.v2-track-art{margin:0;padding:clamp(36px,4.4vw,68px) var(--edge) 0;}
.v2-track-art img{display:block;width:100%;max-width:clamp(680px,72vw,1160px);height:auto;margin:0 auto;border:1px solid var(--line-strong);background:var(--paper-raised);box-shadow:0 46px 100px -64px rgba(12,18,22,.5);}
.v2-track-body{padding:clamp(40px,5.2vw,86px) var(--edge) 0;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-areas:"meta steps" "title steps" "lead steps" "btn steps";column-gap:clamp(30px,4.4vw,80px);align-items:start;}
.v2-track-body>.v2-meta{grid-area:meta;}
.v2-track-body h2{grid-area:title;}
.v2-track-lead{grid-area:lead;}
.v2-steps{grid-area:steps;}
.v2-track-body>.v2-btn{grid-area:btn;justify-self:start;}
.v2-track h2{margin:14px 0 0;font-size:clamp(30px,3.4vw,50px);line-height:1.1;letter-spacing:-.02em;}
.v2-track-lead{margin:16px 0 0;font-size:clamp(15px,1.05vw,17px);line-height:1.8;color:var(--ink-2);max-width:26ch;}
.v2-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong);}
.v2-steps li{position:relative;padding:20px clamp(14px,1.4vw,22px) 20px 0;}
.v2-steps li + li{border-left:1px solid var(--line);padding-left:clamp(14px,1.4vw,22px);}
.v2-steps li{min-height:clamp(140px,12vw,182px);}
.v2-steps li::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.v2-steps li.on::before{transform:scaleX(1);}
.v2-steps span{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.2em;color:var(--ink-3);}
.v2-steps b{display:block;margin-top:8px;font-size:clamp(16px,1.2vw,18px);font-weight:600;}
.v2-steps em{display:block;margin-top:6px;font-style:normal;font-size:13px;line-height:1.68;color:var(--ink-2);}

/* —— 屏型 6：全幅大引言 —— */
.v2-quote{background:var(--band-bg);color:var(--band-fg);border-top:1px solid var(--band-line);padding:clamp(84px,9.6vw,150px) 0 clamp(64px,7.4vw,112px);}
.v2-quote-inner{padding-inline:var(--edge);}
.v2-quote h2{margin:clamp(28px,4vw,60px) 0 0;font-size:clamp(42px,6.4vw,104px);line-height:1.04;letter-spacing:-.035em;}
.v2-quote h2 span{display:block;color:var(--band-fg-2);}
.v2-quote-foot{margin-top:clamp(48px,6vw,96px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.v2-quote-foot p{margin:0;font-size:clamp(16px,1.2vw,19px);color:var(--band-fg-2);}
.v2-quote .link-arrow{color:var(--band-fg);border-color:var(--band-line-strong);}
.v2-quote-inner>.v2-meta{color:var(--band-fg-3);}

/* —— 响应式 —— */
@media (max-width:1080px){
  .v2-suite-head{grid-template-columns:1fr;}
  .v2-suite-head p{grid-column:1;max-width:46ch;}
  .v2-dark-inner{grid-template-columns:1fr;gap:clamp(28px,5vw,56px);}
  .v2-dark-art{order:-1;}
  .v2-split,.v2-split-flip{grid-template-columns:1fr;gap:clamp(24px,4vw,48px);}
  .v2-split-flip .v2-split-art{order:-1;}
  .v2-track-body{grid-template-columns:1fr;gap:clamp(24px,4vw,40px);grid-template-areas:"meta" "title" "lead" "steps" "btn";}
  .v2-track-lead{max-width:46ch;}
}
@media (max-width:900px){
  .v2-rail{flex-wrap:wrap;}
  .v2-card{flex:1 1 50%;max-width:50%;border-bottom:1px solid var(--line);}
  .v2-card:nth-child(2n){border-right:0;}
  .v2-card{min-height:clamp(240px,44vw,320px);}
  .v2-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .v2-steps li:nth-child(3),.v2-steps li:nth-child(5){border-left:0;padding-left:0;}
  .v2-steps li:nth-child(n){border-top:1px solid var(--line);}
  .v2-steps li:nth-child(1),.v2-steps li:nth-child(2){border-top:0;}
}
@media (max-width:680px){
  .v2-card{flex:1 1 100%;max-width:100%;border-right:0;}
  .v2-card{min-height:0;padding:22px 18px 24px;}
  .v2-card::before{display:none;}
  .v2-quote-foot{flex-direction:column;align-items:flex-start;gap:20px;}
  .v2-facts div{grid-template-columns:46px minmax(0,1fr);gap:14px;}
  .v2-table td:first-child{width:44%;}
  .v2-steps{grid-template-columns:1fr;}
  .v2-steps li:nth-child(n){border-left:0;padding-left:0;border-top:1px solid var(--line);}
  .v2-steps li:first-child{border-top:0;}
}

/* ============================================================
   第 24 轮 · technology 结构去同构（.v3 屏型，与 .v2 不共用骨架）
   ============================================================ */
.v3{--edge:max(var(--gutter),calc((100vw - var(--shell))/2));}
.v3-meta{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.2em;color:var(--ink-3);}

/* —— 屏型 A：横向时间轴 + 参数条 —— */
.v3-axis{padding:clamp(58px,6.4vw,100px) 0 0;background:var(--paper);}
.v3-axis-inner{padding-inline:var(--edge);display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:clamp(28px,4.6vw,84px);align-items:start;}
.v3-axis-head h2{margin:clamp(16px,2vw,26px) 0 0;font-size:clamp(32px,3.6vw,54px);line-height:1.08;letter-spacing:-.022em;}
.v3-axis-head h2 span{display:block;color:var(--ink-3);}
.v3-axis-head p{margin:clamp(14px,1.8vw,22px) 0 0;font-size:clamp(14.5px,1vw,16px);line-height:1.78;color:var(--ink-2);}
.v3-axis-track{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.v3-axis-track::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line-strong);}
.v3-axis-track::after{content:"";position:absolute;top:5px;left:0;height:1px;width:0;background:var(--accent);transition:width 1.4s cubic-bezier(.2,.7,.2,1);}
.v3-axis-track.on::after{width:100%;}
.v3-axis-track li{position:relative;padding:34px clamp(16px,1.6vw,26px) 0 0;}
.v3-axis-dot{position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);transition:border-color .5s ease,background .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);}
.v3-axis-track li.on .v3-axis-dot{border-color:var(--accent);background:var(--accent);transform:scale(1.28);}
.v3-axis-track b{display:block;font-size:clamp(16px,1.25vw,19px);font-weight:600;letter-spacing:-.005em;}
.v3-axis-sub{display:block;margin-top:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);}
.v3-axis-track em{display:block;margin-top:14px;font-style:normal;font-size:13.5px;line-height:1.7;color:var(--ink-2);}

.v3-spec{margin:clamp(48px,5.6vw,92px) 0 0;padding:clamp(22px,2.4vw,34px) var(--edge);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-deep);}
.v3-spec>div{padding-right:clamp(14px,1.6vw,26px);}
.v3-spec>div+div{border-left:1px solid var(--line);padding-left:clamp(14px,1.6vw,26px);}
.v3-spec dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);}
.v3-spec dd{margin:10px 0 0;}
.v3-spec dd b{display:block;font-size:clamp(26px,2.4vw,36px);font-weight:600;line-height:1;letter-spacing:-.02em;}
.v3-spec dd span{display:block;margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--ink-2);}

/* —— 屏型 B：大编号纵向堆叠 —— */
.v3-stack{padding:clamp(62px,6.8vw,108px) 0;background:var(--paper);}
.v3-stack-inner{padding-inline:var(--edge);}
.v3-stack-head{max-width:none;}
.v3-stack-head h2{margin:clamp(16px,2vw,26px) 0 0;max-width:13em;font-size:clamp(32px,4.2vw,62px);line-height:1.1;letter-spacing:-.028em;}
.v3-stack-head h2 span{display:block;color:var(--ink-3);}
.v3-stack-head p{margin:clamp(16px,2vw,24px) 0 0;font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.8;color:var(--ink-2);}
.v3-stack-list{list-style:none;margin:clamp(48px,6vw,96px) 0 0;padding:0;border-top:1px solid var(--line-strong);}
.v3-stack-list li{display:grid;grid-template-columns:clamp(76px,9vw,150px) minmax(0,1fr) minmax(0,.34fr);gap:clamp(20px,3vw,56px);align-items:center;padding:clamp(28px,3.4vw,50px) 0;border-bottom:1px solid var(--line);}
.v3-stack-num{font-family:var(--font-mono);font-size:clamp(24px,2.6vw,40px);letter-spacing:-.02em;color:var(--ink-3);transition:color .5s ease;}
.v3-stack-list li.on .v3-stack-num{color:var(--accent);}
.v3-stack-body h3{margin:0;font-size:clamp(20px,1.9vw,27px);font-weight:600;letter-spacing:-.012em;}
.v3-stack-body p{margin:10px 0 0;font-size:clamp(14px,.96vw,15.5px);line-height:1.75;color:var(--ink-2);max-width:44ch;}
.v3-stack-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);justify-self:end;text-align:right;}

/* —— 屏型 C：双列对照 —— */
.v3-compare{padding:clamp(60px,6.6vw,104px) var(--edge);background:var(--paper-deep);}
.v3-compare h2{margin:clamp(16px,2vw,26px) 0 0;font-size:clamp(30px,3.6vw,52px);line-height:1.1;letter-spacing:-.025em;}
.v3-compare h2 span{display:block;color:var(--ink-3);}
.v3-compare-cols{margin:clamp(40px,5vw,78px) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-strong);}
.v3-col{padding:clamp(26px,3.2vw,44px) clamp(20px,2.6vw,42px) clamp(26px,3.2vw,44px) 0;transition:background .4s ease;}
.v3-col-a{text-align:right;min-height:clamp(340px,32vw,460px);}
.v3-col-b{min-height:clamp(340px,32vw,460px);}
.v3-col-b{border-left:1px solid var(--line);padding-left:clamp(20px,2.6vw,42px);padding-right:0;}
.v3-col-tag{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);}
.v3-col-b .v3-col-tag{color:var(--accent);}
.v3-col ul{list-style:none;margin:clamp(20px,2.4vw,34px) 0 0;padding:0;}
.v3-col li{position:relative;max-width:27em;margin-bottom:clamp(20px,2.2vw,32px);font-size:clamp(16px,1.16vw,18.5px);line-height:1.76;}
.v3-col-a li{color:var(--ink-3);text-align:right;padding-right:26px;margin-left:auto;}
.v3-col-a li{padding-right:0;}
.v3-col-b li{color:var(--ink);padding-left:26px;}
.v3-col-b li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:1px;background:var(--accent);}
.v3-col:hover{background:color-mix(in srgb,var(--paper) 60%,transparent);}

/* —— 屏型 D：浅色全幅单句 —— */
.v3-say{padding:clamp(64px,7.2vw,112px) 0 clamp(52px,6vw,92px);background:var(--paper);}
.v3-say-inner{padding-inline:var(--edge);}
.v3-say h2{margin:0;font-size:clamp(44px,8.2vw,148px);line-height:.98;letter-spacing:-.045em;font-weight:600;}
.v3-say-foot{margin-top:clamp(40px,5vw,76px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--line);}
.v3-say-foot p{margin:0;font-size:clamp(15px,1.1vw,17px);color:var(--ink-2);}

@media (max-width:1080px){
  .v3-axis-inner{grid-template-columns:1fr;gap:clamp(28px,4vw,44px);}
  .v3-axis-track{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(22px,3vw,34px);}
  .v3-axis-track::before,.v3-axis-track::after{display:none;}
  .v3-axis-track li{padding:26px 0 0;}
  .v3-axis-dot{position:static;display:block;margin-bottom:12px;}
  .v3-spec{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(18px,2.4vw,28px);}
  .v3-spec>div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px;}
  .v3-spec>div:nth-child(4){border-top:1px solid var(--line);padding-top:18px;}
  .v3-stack-list li{grid-template-columns:clamp(52px,7vw,80px) minmax(0,1fr);row-gap:8px;}
  .v3-stack-tag{grid-column:2;justify-self:start;text-align:left;}
  .v3-compare-cols{grid-template-columns:1fr;}
  .v3-col{padding-right:0;}
  .v3-col-b{border-left:0;padding-left:0;border-top:1px solid var(--line);}
  .v3-col-a{text-align:left;min-height:0;}
  .v3-col-b{min-height:0;}
  .v3-col-a li{text-align:left;padding-right:0;padding-left:26px;margin-left:0;}
}
@media (max-width:600px){
  .v3-axis-track{grid-template-columns:1fr;}
  .v3-spec{grid-template-columns:1fr;}
  .v3-spec>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px;}
  .v3-spec>div:nth-child(3){border-left:0;}
  .v3-stack-list li{grid-template-columns:1fr;}
  .v3-stack-tag{grid-column:1;}
  .v3-say h2{font-size:clamp(38px,12vw,64px);}
}

/* ============================================================
   第 25 轮 · 首页方法块：左栏钉住、右轨加高、行内产出物
   ============================================================ */
.home-method{overflow:visible;background:var(--paper-raised);border-top:1px solid var(--line);padding-block:0;}
.method-grid{align-items:start;}
.method-copy{position:static;display:flex;flex-direction:column;justify-content:flex-start;align-self:start;}
.method-copy .link-arrow{margin-top:clamp(24px,3vw,40px);align-self:flex-start;padding-top:0}
.method-toc{list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0;border-top:1px solid var(--line-strong);}
.method-toc li{position:relative;display:block;padding:14px 0 14px 26px;border-bottom:1px solid var(--line);transition:color .4s ease;}
.method-toc li::before{content:"";position:absolute;left:0;top:22px;width:13px;height:1px;background:var(--ink-2);transition:width .4s ease,background .4s ease;}
.method-toc .o-en{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--ink-2);transition:color .4s ease;}
.method-toc .o-cn{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--ink-2);opacity:.92;transition:color .4s ease,opacity .4s ease;}
.method-toc li.cur .o-en{color:var(--ink);}
.method-toc li.cur .o-cn{color:var(--ink);opacity:1;}
.method-toc li.cur::before{width:19px;background:var(--accent);}
.method-copy h2{font-size:clamp(32px,4.2vw,60px);line-height:1.08;letter-spacing:-.028em;}

.step-rail li{display:grid;grid-template-columns:clamp(92px,8.4vw,126px) minmax(0,1fr);gap:clamp(18px,2.6vw,44px);align-items:start;position:relative;min-height:clamp(112px,8.6vw,136px);padding:clamp(16px,2vw,24px) 0 clamp(16px,2vw,24px) 16px;border-bottom:1px solid var(--line);transition:background .4s ease;}
.step-rail li{border-left:1px solid var(--line-strong);}
.step-rail li::after{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.step-rail li.on::after{transform:scaleY(1);}
.step-rail li:hover{background:color-mix(in srgb,var(--paper) 5%,transparent);}
.step-rail .idx{transition:color .5s ease;}
.step-eng{font-family:var(--font-mono);font-size:clamp(11px,1.02vw,13px);letter-spacing:.2em;color:var(--ink-3);padding-top:6px;transition:color .5s ease;}
.step-rail li.on .step-eng{color:var(--accent);}
.step-rail h3{font-size:clamp(20px,1.9vw,28px);letter-spacing:-.018em;}
.step-rail p{max-width:42ch;}
.out{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(12px,1.4vw,18px);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);}
.out::before{content:"";width:16px;height:1px;background:var(--accent);opacity:.55;}

@media (max-width:1080px){
  .method-copy{position:static;top:auto;}
  .method-copy{padding-bottom:4px;}
  .method-toc{display:none;}
  .step-rail li{grid-template-columns:1fr;min-height:0;row-gap:8px;}
}


/* ---------- 第 28 轮：connect 专属屏型（.v4 阶梯汇合） ---------- */
.v4{--edge:max(var(--gutter),calc((100vw - var(--shell))/2))}
.v4-flow{padding:var(--section-y) 0;border-top:1px solid var(--line)}
.v4-head{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,6vw,110px);align-items:end}
.v4-kicker{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.2em;color:var(--ink-3);margin-bottom:clamp(14px,1.6vw,24px)}
.v4-head h2{font-size:var(--step-4);line-height:1.07;letter-spacing:-.03em;margin:0}
.v4-head h2 em{font-style:normal;color:var(--ink-2)}
.v4-lede{font-size:16px;line-height:1.8;color:var(--ink-2);max-width:46ch;margin:0}

.v4-steps{list-style:none;margin:clamp(46px,5.2vw,84px) 0 0;padding:0;border-bottom:1px solid var(--line)}
.v4-steps li{position:relative;display:grid;grid-template-columns:minmax(88px,9.4vw) minmax(0,1fr);gap:clamp(18px,2.6vw,48px);align-items:start;padding:clamp(20px,2.2vw,30px) clamp(14px,1.6vw,26px);border-top:1px solid var(--line);margin-left:calc(var(--i) * clamp(0px,2.5vw,40px));transition:background .4s ease}
.v4-steps li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.v4-steps li:hover{background:color-mix(in srgb,var(--paper) 5%,transparent)}
.v4-steps li:hover::before{transform:scaleY(1)}
.v4-id b{display:block;font-size:clamp(19px,1.8vw,26px);letter-spacing:-.02em;line-height:1.2}
.v4-id span{display:block;margin-top:9px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3)}
.v4-steps li p{margin:0;font-size:15.5px;line-height:1.78;color:var(--ink-2);max-width:50ch}
.v4-body{max-width:62ch}
.v4-out{display:flex;align-items:baseline;gap:10px;margin-top:clamp(10px,1.1vw,15px);text-align:left;padding:0}
.v4-out::before{content:"";width:16px;height:1px;background:var(--accent);opacity:.5;flex:none;align-self:center}
.v4-out-k{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--ink-3)}
.v4-out-v{display:block;margin:0;font-size:14.5px;color:var(--ink);letter-spacing:-.01em}

.v4-merge{position:relative;margin-top:clamp(48px,5.4vw,88px);padding-bottom:clamp(10px,1.2vw,18px);display:grid;gap:9px}
.v4-merge-cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--ink-3);margin:0 0 clamp(14px,1.4vw,22px);text-align:right}
.v4-mrow{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(12px,1.4vw,20px)}
.v4-mrow span{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);white-space:nowrap}
.v4-mrow i{position:relative;display:block;height:1px;width:calc(var(--w) * 1%);margin-left:auto;background:var(--ink-3);opacity:.42}
.v4-mrow i::after{content:"";position:absolute;right:-2.5px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--ink-2);transform:translateY(-50%);opacity:.9}
.v4-merge::after{content:"";position:absolute;right:0;top:0;bottom:clamp(10px,1.2vw,18px);width:2px;background:var(--accent);opacity:.5}

@media (max-width:900px){
  .v4-head{grid-template-columns:1fr;gap:clamp(20px,4vw,32px);align-items:start}
  .v4-steps li{grid-template-columns:1fr;row-gap:12px;margin-left:calc(var(--i) * 8px);padding:20px 0 20px 14px}
  .v4-body{max-width:100%}
  .v4-merge{display:none}
}


/* ---------- 第 29 轮：ecosystem 收尾色带（左侧论断 + 右侧三件留下的东西） ---------- */
.v5-keep{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.86fr);gap:clamp(40px,7vw,124px);align-items:start}
.v5-left h2{font-size:var(--step-4);line-height:1.07;letter-spacing:-.03em;margin:0;color:var(--band-fg)}
.v5-left h2 span{display:block;color:var(--band-fg-2)}
.v5-left p{margin:clamp(20px,2.2vw,30px) 0 0;font-size:16px;line-height:1.8;color:var(--band-fg-2);max-width:34ch}
.v5-left .invert-cta{margin-top:clamp(30px,3.4vw,48px)}
.v5-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--band-line-strong)}
.v5-list li{display:grid;grid-template-columns:minmax(52px,4.2rem) minmax(0,1fr);grid-template-areas:"k v" ". en";column-gap:clamp(14px,1.6vw,26px);align-items:baseline;padding:clamp(15px,1.7vw,21px) 0;border-bottom:1px solid var(--band-line)}
.v5-k{grid-area:k;font-size:clamp(15px,1.36vw,18px);color:var(--band-fg);letter-spacing:-.01em}
.v5-v{grid-area:v;font-size:14.5px;line-height:1.72;color:var(--band-fg-2)}
.v5-en{grid-area:en;margin-top:9px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--band-fg-3)}

@media (max-width:900px){
  .v5-keep{grid-template-columns:1fr;gap:clamp(30px,5vw,46px)}
  .v5-list{margin-top:0}
}


/* ---------- 第 30 轮：about 工作台（输入 / 轴线 / 输出，替换四格平铺） ---------- */
.wt-pair{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:clamp(24px,2.9vw,46px);align-items:start;margin-top:clamp(28px,3.4vw,48px);padding-top:clamp(24px,2.8vw,38px);border-top:1px solid var(--line-strong)}
.wt-side{display:grid;gap:clamp(20px,2.4vw,34px)}
.wt-side-k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--ink-3)}
.wt-item span{display:block;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--ink-3)}
.wt-item b{display:block;margin-top:10px;font-size:var(--step-1);font-weight:600}
.wt-item p{margin:10px 0 0;font-size:14px;line-height:1.72;color:var(--ink-2);max-width:42ch}
.wt-mid{position:relative;align-self:stretch;width:1px;justify-self:center;background:var(--line-strong)}
.wt-mid span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);writing-mode:vertical-rl;background:var(--paper);padding:14px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--ink-3);white-space:nowrap}

@media (max-width:900px){
  .wt-pair{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .wt-mid{display:none}
  .wt-item p{max-width:none}
}


/* stage-band 独立图：与 hero 主体区分，按主体在右侧裁切 */

/* band 图：独立裁切，关掉 art-drift（那动画把 transform 锁在 1.015，导致水平无溢出） */
.stage-band .scene-art[data-art$="-band"]{
  animation:none;
  transform:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 28%;
}

/* connect 双球占画面更高，单独收一档比例，避免球顶被硬切 */
.stage-band .scene-art[data-art="connect-band"]{
  animation:none;
  transform:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 8%;
}

/* index 横幅：球体偏下，让球顶完整落在容器内 */
.stage-band .scene-art[data-art$="index-band"]{
  object-position:50% 17%;
}


/* ===== 首页滚动吸附（仅 index，≥821px）：六屏，同源内容不拆开 ===== */
@media (min-width:821px){
  html.snap{scroll-snap-type:y mandatory;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h))}

  html.snap .hero-home,
  html.snap .manifesto,
  html.snap .home-systems,
  html.snap .home-method,
  html.snap .stage-band,
  html.snap .home-cta{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  html.snap .manifesto,
  html.snap .home-systems{
    min-height:calc(100svh - var(--header-h));
    display:flex;
    align-items:center;
    padding-block:clamp(30px,4.4vh,56px) !important;
  }

  /* 方法 + 四步：同一屏内左右并排 */
  html.snap .home-method{
    min-height:calc(100svh - var(--header-h));
    display:flex;
    align-items:center;
    padding-block:clamp(22px,3.2vh,44px) !important;
    border-block:0;
  }
  html.snap .home-method .method-grid{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    align-items:center;
    gap:clamp(28px,4vw,72px);
    padding-block:0 !important;
    width:100%;
  }
  html.snap .method-copy{padding:0;justify-content:center}
  html.snap .method-copy > *{max-width:none}
  html.snap .method-copy .method-toc{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(18px,2.4vw,36px);row-gap:0;
    margin-top:clamp(24px,3vw,42px);
  }
  html.snap .step-rail{padding:0;align-self:center}
  html.snap .step-rail li{padding-block:clamp(14px,2vh,26px)}
  html.snap .step-rail .idx{padding-top:2px}

  html.snap .hero-full{min-height:calc(100svh - var(--header-h))}
  html.snap .stage-band{height:auto;min-height:calc(100svh - var(--header-h))}
  html.snap .stage-band .stage-band-line{bottom:clamp(84px,12vh,160px)}

  html.snap .home-cta{min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(24px,3.2vh,36px)}
  html.snap .home-cta .cta-title{margin-top:clamp(10px,1.6vh,20px)}
  html.snap .home-cta .cta-actions{margin-top:clamp(18px,2.6vh,32px)}
  html.snap .site-footer{padding-top:clamp(24px,3.4vh,42px)}
}
@media (min-width:821px) and (prefers-reduced-motion:reduce){
  html.snap{scroll-snap-type:none}
}

/* ============================================================
   第 26 轮 · 二级页每段满宽横图 + 二级页紧凑节奏 + 宽松吸附
   ============================================================ */
main > section:has(> .sec-plate){display:flow-root}
main > section > .sec-plate{
  display:block;
  margin:clamp(22px,2.6vw,36px) var(--gutter) 0;
  height:clamp(380px, 62vh, 640px);
  overflow:hidden;
  background:var(--paper-deep);
  position:relative;
}
main > section > .sec-plate img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  display:block;
}
html[data-theme="dark"] main > section > .sec-plate{
  background:#0B0F14;
}
html[data-theme="dark"] main > section > .sec-plate img{
  filter:brightness(.88) contrast(1.06);
}
@media (max-width:820px){
  main > section > .sec-plate{
    height:clamp(190px, 27vh, 260px);
  }
}

/* 二级页收紧纵向留白，让每段尽量落在一屏内 */
html.snapsec main > section{
  padding-block:clamp(34px,4.2vw,60px) !important;
}
html.snapsec main > section.hero-full{
  padding-block:0 !important;
}
html.snapsec main > section.stage-band{
  padding-block:0 !important;
}

/* 二级页宽松吸附：接近才吸，内容超屏不强切 */
@media (min-width:821px){
  html.snapsec{scroll-snap-type:y mandatory;scroll-padding-top:calc(var(--header-h))}
  html.snapsec main > section{scroll-snap-align:start}
}
@media (min-width:821px) and (prefers-reduced-motion:reduce){
  html.snapsec{scroll-snap-type:none}
}


/* ============================================================
   第 26 轮 · 二级页每段末尾图块 + 二级页宽松吸附
   ============================================================ */



/* ============================================================
   第 26 轮 · 二级页每段配图（图只占右带，文字区保持干净）+ 宽松吸附
   ============================================================ */
main > section{position:relative;isolation:isolate}
main > section > .sec-art{
  position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,.22) 66%,
    rgba(0,0,0,.62) 80%, rgba(0,0,0,.92) 92%, rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,.22) 66%,
    rgba(0,0,0,.62) 80%, rgba(0,0,0,.92) 92%, rgba(0,0,0,1) 100%);
}
main > section > .sec-art img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:scale(1.04);
}
main > section > .sec-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(245,245,241,0) 0%, rgba(245,245,241,0) 58%,
    rgba(245,245,241,.10) 78%, rgba(245,245,241,.02) 100%);
}
html[data-theme="dark"] main > section > .sec-veil{
  background:linear-gradient(90deg,
    rgba(5,7,10,.0) 0%, rgba(5,7,10,.10) 52%,
    rgba(5,7,10,.55) 78%, rgba(5,7,10,.72) 100%);
}
main > section.invert-band > .sec-veil{
  background:linear-gradient(90deg,
    rgba(5,7,10,0) 0%, rgba(5,7,10,0) 58%,
    rgba(5,7,10,.14) 78%, rgba(5,7,10,.08) 100%);
}
main > section.invert-band{background:#05070A}
@media (max-width:820px){
  main > section > .sec-art{
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.9) 100%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.9) 100%);
  }
}

/* 二级页宽松吸附：接近才吸，内容超屏不强切 */
@media (min-width:821px){
  html.snapsec{scroll-snap-type:y mandatory;scroll-padding-top:calc(var(--header-h))}
  html.snapsec main > section{scroll-snap-align:start}
}
@media (min-width:821px) and (prefers-reduced-motion:reduce){
  html.snapsec{scroll-snap-type:none}
}