:root{--black:#0b0e10;--gray:#667078;--line:rgba(11,14,16,.1);--green:#75d51f;--cyan:#08c9d4;--navy:#050b12;font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--black);background:white}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}a{color:inherit;text-decoration:none}.frame{width:calc(100% - 104px);margin-inline:auto}.light-section,.dark-section{position:relative;overflow:hidden}.visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}h1,h2{margin:0;font-weight:580;letter-spacing:-.055em}h1 em,h2 em{font-style:normal}.eyebrow,.index{font-size:11px;font-weight:600;letter-spacing:.24em}.hero{height:100vh;min-height:720px;background:#f4f7f6}.hero .visual{object-position:center}.nav{height:62px;position:relative;z-index:3;display:flex;align-items:center;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:10px;margin-right:auto}.logo b{display:block;font-size:15px;letter-spacing:.12em}.logo small{display:block;font-size:6px;letter-spacing:.18em;margin-top:2px}.mark{width:30px;height:25px;position:relative}.mark i{position:absolute;width:24px;height:7px;border-radius:100% 10%;background:#111;transform:rotate(30deg);top:4px}.mark i+ i{transform:rotate(-30deg);top:14px}.nav-links{display:flex;gap:68px;font-size:13px}.nav-tools{display:flex;gap:18px;margin-left:auto}.nav-tools button,.nav-tools a{height:34px;padding:0 18px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.65);display:flex;align-items:center;font:inherit;font-size:11px}.nav-tools a{background:#17191a;color:white;padding-inline:23px}.hero-copy{position:relative;z-index:2;padding-top:clamp(120px,17vh,175px)}.hero .eyebrow{margin:0 0 34px}.hero h1{font-size:clamp(54px,5.2vw,88px);line-height:1.06}.hero h1 em{background:linear-gradient(90deg,#111 10%,#147f7c 60%,#61b812);-webkit-background-clip:text;background-clip:text;color:transparent}.intro{margin:26px 0 32px;color:var(--gray);font-size:14px;line-height:1.85}.actions{display:flex;gap:16px}.actions a{width:150px;height:44px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px}.actions .primary{justify-content:space-between;padding:0 22px;background:linear-gradient(100deg,#67cd20,#8bdd31)}.actions .secondary{border:1px solid #9aca6c;background:rgba(255,255,255,.55)}.hero-foot{position:absolute;z-index:2;bottom:25px;left:52px;right:52px;width:auto;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em}.idea{padding:145px 0 125px;background:#fbfcfc}.section-head{display:grid;grid-template-columns:1.25fr .75fr;align-items:end}.index{margin:0 0 50px;color:#8a949a}.section-head h2,.motion h2{font-size:clamp(58px,6.4vw,104px);line-height:1}.section-head h2 em{color:#149b83}.statement{padding-bottom:8px}.statement p{font-size:18px;line-height:1.8;margin:0 0 40px}.statement span{font-size:10px;letter-spacing:.25em;color:#71909a}.stage{height:min(670px,52vw);margin-top:100px;position:relative;overflow:hidden}.stage img{width:100%;height:100%;object-fit:cover}.stage-label{position:absolute;left:32px;right:32px;bottom:28px;height:48px;padding:0 22px;display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.76);backdrop-filter:blur(18px);font-size:9px;letter-spacing:.2em}.stage-label i{height:1px;flex:1;background:linear-gradient(90deg,var(--cyan),var(--green))}.idea-foot{display:flex;justify-content:space-between;align-items:end;margin-top:46px}.idea-foot p{max-width:600px;margin:0;color:#465860;font-size:17px;line-height:1.7}.idea-foot a{font-size:11px;border-bottom:1px solid;padding-bottom:10px}.motion{height:1080px;color:white;background:var(--navy)}.motion .visual{object-position:center}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,6,11,.72),transparent 56%),linear-gradient(180deg,transparent 52%,rgba(2,6,11,.84) 83%,#02050a)}.motion-copy{position:relative;z-index:2;padding-top:125px}.motion .index{margin-bottom:55px;color:#75818c}.motion .eyebrow{color:#60dace;margin-bottom:22px}.motion h2{font-size:clamp(58px,6.2vw,100px)}.motion h2 em{color:#78dc32}.motion .intro{color:#9ca8b0}.flow{position:absolute;z-index:2;left:52px;right:52px;bottom:125px;width:auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.23)}.flow article{position:relative;padding:25px 20px 20px 0;border-right:1px solid rgba(255,255,255,.12)}.flow article:before{content:"";position:absolute;top:-3px;width:6px;height:6px;border-radius:50%;background:#7ae32c;box-shadow:0 0 12px #55d5a5}.flow b{font-size:10px;color:#76e13b}.flow span{display:block;margin-top:20px;font-size:8px;letter-spacing:.16em;color:#758795}.flow h3{font-size:17px;font-weight:500;margin:8px 0}.motion-foot{position:absolute;z-index:2;bottom:36px;left:52px;right:52px;width:auto;display:flex;justify-content:space-between;font-size:10px;color:#81909b}.motion-foot p{margin:0}
@media(max-width:900px){.frame{width:calc(100% - 40px)}.nav-links{display:none}.nav{height:58px}.hero .visual{object-position:62% center}.hero-copy{padding-top:120px}.hero h1{font-size:clamp(48px,11vw,72px)}.section-head{grid-template-columns:1fr;gap:45px}.idea{padding:95px 0}.stage{height:60vw;min-height:400px;margin-top:60px}.idea-foot{align-items:start;gap:30px}.motion{height:1050px}.flow{left:20px;right:20px;grid-template-columns:1fr 1fr;bottom:120px}.motion-foot{left:20px;right:20px}.motion-copy{padding-top:90px}}
@media(max-width:560px){.nav-tools button{display:none}.nav-tools a{padding-inline:14px}.hero .visual{object-position:70% center;opacity:.72}.hero:after{content:"";position:absolute;inset:58px 0 0;background:linear-gradient(90deg,rgba(246,249,248,.98),rgba(246,249,248,.38) 85%)}.hero-copy,.hero-foot{z-index:3}.hero-copy{padding-top:105px}.hero h1{font-size:47px}.hero-foot{left:20px;right:20px}.stage{width:100%;height:460px}.stage img{object-position:62% center}.stage-label{left:12px;right:12px;bottom:12px;gap:8px}.idea-foot{display:block}.idea-foot a{display:inline-block;margin-top:25px}.motion .visual{object-position:65% center}.motion-copy{z-index:3}.flow article{padding-right:8px}.motion-foot p{display:none}}

/* V2.1 — balanced typography for faster recognition */
.eyebrow,.index{font-size:12px;letter-spacing:.19em}
.hero h1{font-size:clamp(48px,4.35vw,72px);line-height:1.12}
.intro{margin:30px 0 36px;color:#4f5b62;font-size:16px;line-height:1.9}
.section-head h2,.motion h2{font-size:clamp(52px,5.25vw,82px);line-height:1.08}
.statement p{font-size:20px;line-height:1.75;color:#30393e}
.idea-foot p{max-width:660px;color:#3f5058;font-size:18px;line-height:1.75}
@media(max-width:900px){.hero h1{font-size:clamp(44px,9vw,62px)}}
@media(max-width:560px){.hero h1{font-size:40px;line-height:1.16}.intro{font-size:15px;line-height:1.8}.section-head h2,.motion h2{font-size:44px;line-height:1.1}}

/* V2.2 — immersive full-bleed second section */
.idea{height:100vh;min-height:760px;padding:0;background:#f5f8f7}
.idea .stage{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0}
.idea .stage img{object-position:center center}
.idea .stage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,250,250,.96) 0%,rgba(248,250,250,.74) 35%,rgba(248,250,250,.08) 62%,transparent 100%);pointer-events:none}
.idea .section-head{position:relative;z-index:2;height:100%;padding-top:clamp(105px,14vh,145px);display:block}
.idea .section-head>div:first-child{max-width:620px}
.idea .section-head .statement{max-width:520px;margin-top:34px;padding:0}
.idea .section-head .index{margin-bottom:38px}
.idea .stage-label{z-index:3;left:52px;right:52px;bottom:30px;background:rgba(255,255,255,.62)}
.idea .idea-foot{position:absolute;z-index:3;left:52px;right:52px;bottom:98px;width:auto;margin:0;align-items:flex-end}
.idea .idea-foot p{max-width:560px;font-size:16px}
@media(max-width:900px){.idea{min-height:820px}.idea .section-head{padding-top:90px}.idea .section-head .statement{margin-top:28px}.idea .stage img{object-position:62% center}.idea .stage-label{left:20px;right:20px;bottom:22px}.idea .idea-foot{left:20px;right:20px;bottom:92px}}
@media(max-width:560px){.idea{height:100svh;min-height:760px}.idea .stage{height:100%}.idea .stage img{object-position:70% center}.idea .stage:after{background:linear-gradient(90deg,rgba(248,250,250,.98),rgba(248,250,250,.74) 62%,rgba(248,250,250,.18))}.idea .section-head{padding-top:72px}.idea .section-head .statement{max-width:88%;margin-top:24px}.idea .section-head .statement p{font-size:16px}.idea .idea-foot{display:block;bottom:86px}.idea .idea-foot p{max-width:88%;font-size:14px}.idea .idea-foot a{display:none}.idea .stage-label{font-size:7px}}

/* V2.3 — restore titles without punctuation and keep one scale */
.hero h1,.idea h2,.motion h2{font-size:clamp(48px,4.35vw,72px);line-height:1.12}
.idea .section-head .statement{margin-top:30px}
.motion .intro{font-size:16px;line-height:1.9}
@media(max-width:900px){.hero h1,.idea h2,.motion h2{font-size:clamp(44px,9vw,62px)}}
@media(max-width:560px){.hero h1,.idea h2,.motion h2{font-size:40px;line-height:1.16}}

/* V3 — real product family, official logo and simplified energy path */
.official-logo{width:190px;height:48px;overflow:hidden}
.official-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.hero .visual,.idea .stage img{object-position:center center}
.motion{height:100vh;min-height:760px}
.motion .visual{object-fit:cover;object-position:center center}
.motion-copy{padding-top:clamp(110px,15vh,145px)}
.flow{display:none}
.flow-path{position:absolute;z-index:3;left:52px;right:52px;bottom:125px;width:auto;padding:20px 24px;border:1px solid rgba(255,255,255,.17);border-radius:14px;background:rgba(3,10,17,.44);backdrop-filter:blur(12px)}
.flow-track{height:2px;margin:8px 10px 18px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#159bd7,#14c6bd 58%,#77d62d)}
.flow-track i{width:9px;height:9px;border-radius:50%;background:#f6fbfc;border:2px solid #24c8be;box-shadow:0 0 0 5px rgba(36,200,190,.12)}
.flow-labels{display:grid;grid-template-columns:repeat(4,1fr);font-size:14px;color:#dce7ea}
.flow-labels span:nth-child(2),.flow-labels span:nth-child(3){text-align:center}.flow-labels span:last-child{text-align:right}
@media(max-width:900px){.official-logo{width:160px;height:42px}.motion{min-height:760px}.flow-path{left:20px;right:20px;bottom:112px}.idea .stage img{object-position:58% center}}
@media(max-width:560px){.official-logo{width:142px;height:38px}.hero .visual{object-position:62% center}.motion .visual{object-position:58% center}.flow-path{padding:16px 14px}.flow-labels{font-size:11px;gap:4px}}

/* V4.1 — readable hero, complete brand story, visible energy motion */
.hero:before{content:"";position:absolute;z-index:1;inset:62px 0 0;background:linear-gradient(90deg,rgba(3,24,46,.88) 0%,rgba(4,38,66,.72) 32%,rgba(4,34,59,.18) 57%,transparent 75%);pointer-events:none}
.hero .nav{background:rgba(248,251,251,.86);backdrop-filter:blur(16px);border-bottom-color:rgba(11,35,48,.12)}
.hero-copy{color:#fff;text-shadow:0 2px 24px rgba(0,15,30,.18)}
.hero h1 em{background:linear-gradient(90deg,#12c9d4,#72dc36);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .eyebrow{color:#8ce2dc}.hero .intro{color:rgba(255,255,255,.88)}
.hero .secondary{color:#fff;border-color:rgba(255,255,255,.58);background:rgba(5,31,52,.28);backdrop-filter:blur(8px)}
.hero .hero-foot{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.idea .section-head{padding-top:clamp(78px,10vh,100px)}
.idea .section-head .statement{max-width:570px;margin-top:22px}
.idea .section-head .statement p{margin:0;font-size:17px;line-height:1.75}
.idea-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:680px;margin-top:24px}
.idea-capabilities>div{padding:16px 17px;border:1px solid rgba(8,90,108,.13);border-radius:10px;background:rgba(255,255,255,.7);backdrop-filter:blur(10px)}
.idea-capabilities b{display:block;margin-bottom:8px;font-size:15px;color:#087f82}.idea-capabilities span{display:block;font-size:12px;line-height:1.65;color:#45565e}
.idea .idea-foot{bottom:94px}.idea .idea-foot p{max-width:700px}
.motion-copy{padding-top:34vh}
.motion-copy .intro{margin-top:24px}
.flow-track{position:relative;overflow:visible;background:linear-gradient(90deg,#129cd8,#10c7c1 48%,#7be334,#129cd8);background-size:220% 100%;animation:energy-flow 3.6s linear infinite}
.flow-track:after{content:"";position:absolute;top:-4px;left:0;width:90px;height:10px;border-radius:20px;background:linear-gradient(90deg,transparent,rgba(181,255,237,.95),transparent);filter:blur(2px);animation:energy-sweep 3.6s ease-in-out infinite}
.flow-track i{animation:energy-pulse 2.2s ease-in-out infinite}.flow-track i:nth-child(2){animation-delay:.35s}.flow-track i:nth-child(3){animation-delay:.7s}.flow-track i:nth-child(4){animation-delay:1.05s}
@keyframes energy-flow{to{background-position:-220% 0}}
@keyframes energy-sweep{0%{left:-4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:96%;opacity:0}}
@keyframes energy-pulse{0%,100%{transform:scale(.9);box-shadow:0 0 0 4px rgba(36,200,190,.1)}50%{transform:scale(1.2);box-shadow:0 0 0 8px rgba(36,200,190,.2),0 0 18px rgba(65,237,195,.8)}}
@media(max-width:900px){.hero:before{inset:58px 0 0;background:linear-gradient(90deg,rgba(3,24,46,.92),rgba(4,38,66,.62) 70%,rgba(4,34,59,.14))}.idea .section-head{padding-top:65px}.idea-capabilities{grid-template-columns:1fr;max-width:480px;gap:7px;margin-top:16px}.idea-capabilities>div{display:grid;grid-template-columns:92px 1fr;align-items:center;padding:10px 13px}.idea-capabilities b{margin:0}.motion-copy{padding-top:28vh}}
@media(max-width:560px){.hero:before{background:linear-gradient(90deg,rgba(3,24,46,.94),rgba(4,38,66,.72) 82%,rgba(4,34,59,.3))}.idea-capabilities{max-width:90%}.idea-capabilities span{font-size:11px}.idea .idea-foot{bottom:82px}.motion-copy{padding-top:25vh}}
@media(prefers-reduced-motion:reduce){.flow-track,.flow-track:after,.flow-track i{animation:none}}

/* V4.2 — cabinet-aligned modules and adaptive fixed navigation */
.nav{position:fixed!important;z-index:20;top:0;left:52px;right:52px;width:auto!important;margin:0!important;padding:0 16px;border-radius:0 0 12px 12px;transition:background-color .35s ease,color .35s ease,box-shadow .35s ease,border-color .35s ease}
.nav.nav-hero{background:rgba(20,92,139,.2);color:#071923;border-color:rgba(255,255,255,.22);box-shadow:0 10px 30px rgba(1,29,52,.08)}
.nav.nav-idea{background:rgba(248,251,251,.72);color:#0b151b;border-color:rgba(7,38,53,.1);box-shadow:0 10px 30px rgba(9,49,67,.08)}
.nav.nav-motion{background:rgba(3,20,36,.62);color:#f4f9fa;border-color:rgba(255,255,255,.13);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.nav.nav-motion .nav-links a{color:#f4f9fa}.nav.nav-motion .nav-tools a{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
.hero .nav{background:rgba(20,92,139,.2)}
.idea .stage-label{left:auto;right:4.2%;bottom:15%;width:49%;height:auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:transparent;backdrop-filter:none}
.idea .stage-label i{display:none}
.idea .stage-label span{position:relative;padding:14px 10px 13px;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:rgba(246,251,251,.68);backdrop-filter:blur(12px);text-align:center;font-size:12px;font-weight:600;letter-spacing:.08em;color:#163b4a;box-shadow:0 10px 24px rgba(6,63,81,.1)}
.idea .stage-label span:before{content:"";position:absolute;left:50%;top:-20px;width:1px;height:20px;background:linear-gradient(180deg,transparent,#27cabe)}
.motion-copy{padding-top:27vh}
@media(max-width:900px){.nav{left:20px;right:20px}.idea .stage-label{right:3%;width:58%;bottom:14%}.idea .stage-label span{font-size:10px;padding:11px 5px}.motion-copy{padding-top:23vh}}
@media(max-width:560px){.nav{left:10px;right:10px;padding:0 10px}.idea .stage-label{left:16px;right:16px;bottom:18px;width:auto;gap:6px}.idea .stage-label span:before{display:none}.motion-copy{padding-top:21vh}}

/* V4.3 — edge-to-edge integrated navigation and capability mapping */
.nav{left:0!important;right:0!important;width:100%!important;padding-left:52px;padding-right:52px;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
.nav.nav-hero,.hero .nav{background:rgba(15,75,116,.2);border-color:rgba(255,255,255,.16)}
.nav.nav-idea{background:rgba(230,241,244,.2);border-color:rgba(8,45,61,.1);box-shadow:none}
.nav.nav-motion{background:rgba(2,24,45,.2);border-color:rgba(255,255,255,.12);box-shadow:none}
.idea .stage-label{left:52px;right:52px;bottom:20px;width:auto;height:58px;padding:0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:0;background:rgba(240,248,249,.2);border-top:1px solid rgba(16,153,166,.32);border-bottom:1px solid rgba(16,153,166,.16);backdrop-filter:none}
.idea .stage-label span{padding:0 18px;border:0;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:none;text-align:center;font-size:13px;color:#143b48}
.idea .stage-label span:before{display:none}.idea .stage-label i{display:block;width:100%;min-width:80px;height:1px;background:linear-gradient(90deg,#17b9cc,#71d637)}
@media(max-width:900px){.nav{padding-left:20px;padding-right:20px}.idea .stage-label{left:20px;right:20px}}
@media(max-width:560px){.nav{padding-left:12px;padding-right:12px}.idea .stage-label{left:0;right:0;bottom:0;height:54px}.idea .stage-label span{padding:0 6px;font-size:11px}.idea .stage-label i{min-width:20px}}

/* V4.4 — lower brand copy, strengthen the three-part energy rail, dark-nav adaptation */
.idea .section-head{padding-top:clamp(112px,14vh,150px)}
.idea .stage-label{
  bottom:18px;
  height:72px;
  padding:0 24px;
  border:1px solid rgba(10,116,137,.22);
  background:linear-gradient(90deg,rgba(235,247,248,.86),rgba(212,239,239,.72),rgba(225,244,232,.78));
}
.idea .stage-label span{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:650;
  letter-spacing:.08em;
  color:#0b5261;
}
.idea .stage-label span:before{
  content:"";
  display:block;
  position:absolute;
  top:-6px;
  left:50%;
  width:11px;
  height:11px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#20c7c5;
  border:3px solid rgba(240,250,250,.95);
  box-shadow:0 0 0 1px rgba(18,149,160,.4),0 0 15px rgba(30,210,192,.48);
}
.idea .stage-label span:last-child{color:#347c26}
.idea .stage-label span:last-child:before{background:#73d839}
.idea .stage-label i{height:2px;min-width:90px;background:linear-gradient(90deg,#19b8ce,#24c6b5 52%,#71d637)}
.nav.nav-motion{background:rgba(2,24,45,.38);border-color:rgba(255,255,255,.18)}
.nav.nav-motion .official-logo{position:relative}
.nav.nav-motion .official-logo img{filter:none;clip-path:inset(0 69% 0 0)}
.nav.nav-motion .official-logo:after{content:"";position:absolute;inset:0;background:url("./assets/shangpai-logo.png") left center/contain no-repeat;filter:brightness(0) invert(1);clip-path:inset(0 0 0 28%);pointer-events:none}
.nav.nav-motion .nav-links a{color:#fff}
.nav.nav-motion .nav-tools a{color:#fff;background:rgba(4,15,27,.66);border-color:rgba(255,255,255,.2)}
@media(max-width:900px){.idea .section-head{padding-top:92px}.idea .stage-label{height:64px;padding:0 14px}.idea .stage-label span{font-size:12px}}
@media(max-width:560px){.idea .section-head{padding-top:86px}.idea .stage-label{bottom:0;height:58px;padding:0 8px}.idea .stage-label span{font-size:11px}.idea .stage-label span:before{top:-5px;width:9px;height:9px;border-width:2px}.idea .stage-label i{min-width:18px}}

/* V4.5 — move the three capability stages into the left narrative area */
.idea .stage-label{left:52px;right:auto;bottom:27%;width:45%;height:72px}
@media(max-width:1100px){.idea .stage-label{width:52%;bottom:25%}}
@media(max-width:900px){.idea .stage-label{left:20px;width:62%;bottom:23%}}
@media(max-width:560px){.idea .stage-label{left:12px;right:12px;width:auto;bottom:16px}}

/* V5 — fourth-section typography calibration */
.four{height:100vh;min-height:760px;color:#fff;background:#061a2b}
.four .visual{object-position:center}
.four-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,22,40,.88) 0%,rgba(3,34,57,.7) 35%,rgba(3,35,58,.12) 68%,transparent)}
.four-copy{position:relative;z-index:2;padding-top:146px}
.title-lock{height:176px;display:flex;align-items:flex-start}
.four h2{margin:0;font-size:clamp(48px,4.35vw,72px);line-height:1.12;font-weight:580;letter-spacing:-.055em}
.four h2 em{font-style:normal;color:#72db31}
.four .intro{margin:24px 0 32px;color:#d7e2e6;font-size:16px;line-height:1.9}
.four .secondary{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(4,31,52,.3)}
.title-height-note{position:absolute;z-index:2;left:52px;bottom:34px;padding:7px 12px;border-left:2px solid #72db31;color:#b7c7cc;font-size:11px;letter-spacing:.08em}
.nav.nav-four{background:rgba(2,24,45,.38);color:#fff;border-color:rgba(255,255,255,.18)}
.nav.nav-four .official-logo{position:relative}.nav.nav-four .official-logo img{filter:none;clip-path:inset(0 69% 0 0)}
.nav.nav-four .official-logo:after{content:"";position:absolute;inset:0;background:url("./assets/shangpai-logo.png") left center/contain no-repeat;filter:brightness(0) invert(1);clip-path:inset(0 0 0 28%);pointer-events:none}
.nav.nav-four .nav-links a{color:#fff}.nav.nav-four .nav-tools a{color:#fff;background:rgba(4,15,27,.66);border-color:rgba(255,255,255,.2)}
@media(max-width:900px){.four-copy{padding-top:128px}.title-lock{height:160px}.title-height-note{left:20px}}
@media(max-width:560px){.four-copy{padding-top:108px}.title-lock{height:132px}.four h2{font-size:40px}.title-height-note{left:12px}}

/* V5.1 — align every main-title top edge to section three */
.hero-copy{padding-top:calc(27vh - 48px)}
.idea .section-head{padding-top:27vh}
.motion-copy{padding-top:27vh}
.four-copy{padding-top:27vh}
@media(max-width:900px){
  .hero-copy{padding-top:calc(23vh - 44px)}
  .idea .section-head,.motion-copy,.four-copy{padding-top:23vh}
}
@media(max-width:560px){
  .hero-copy{padding-top:calc(21vh - 38px)}
  .idea .section-head,.motion-copy,.four-copy{padding-top:21vh}
}

/* Section 05 — storage technology */
.storage{height:100svh;min-height:0;color:#fff;background:#061426}
.storage .visual{object-position:center center}
.storage-shade{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(2,16,31,.9) 0%,rgba(3,25,47,.68) 34%,rgba(3,22,42,.12) 60%,rgba(2,13,25,.1) 100%),linear-gradient(180deg,rgba(3,19,35,.05) 58%,rgba(2,12,23,.78) 100%)}
.storage-copy{position:relative;z-index:2;padding-top:var(--locked-title-top)}
.storage h2{margin:0;font-size:var(--locked-title-size);line-height:var(--locked-title-line);font-weight:580;letter-spacing:-.055em}
.storage h2 em{font-style:normal;color:#75dd30}
.storage .intro{color:rgba(236,246,249,.82);font-size:17px;line-height:1.9}
.storage-capabilities{position:absolute;z-index:2;left:52px;right:52px;bottom:38px;width:auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(92,221,214,.38);border-bottom:1px solid rgba(255,255,255,.12);background:rgba(2,15,28,.48);backdrop-filter:blur(10px)}
.storage-capabilities article{min-height:104px;padding:22px 24px;border-right:1px solid rgba(255,255,255,.12)}
.storage-capabilities article:last-child{border-right:0}
.storage-capabilities b{display:block;font-size:17px;font-weight:600;color:#71e0d4}
.storage-capabilities span{display:block;margin-top:12px;font-size:14px;line-height:1.55;color:rgba(231,241,244,.74)}
.nav.nav-storage{color:#fff;background:rgba(2,24,45,.32);border-color:rgba(255,255,255,.14)}
.nav.nav-storage .nav-links a{color:#fff!important}
.nav.nav-storage .wordmark-black{opacity:0!important}
.nav.nav-storage .wordmark-white{opacity:1!important}
.nav.nav-storage .nav-tools a{color:#fff;background:rgba(4,15,27,.54);border-color:rgba(255,255,255,.22)}
@media(max-width:900px){
  .storage .visual{object-position:58% center}
  .storage-capabilities{left:20px;right:20px;grid-template-columns:1fr 1fr;bottom:24px}
  .storage-capabilities article{min-height:74px;padding:13px 16px}
  .storage-capabilities b{font-size:15px}.storage-capabilities span{margin-top:6px;font-size:12px}
}
@media(max-width:560px){
  .storage .visual{object-position:65% center}
  .storage-shade{background:linear-gradient(90deg,rgba(2,16,31,.94),rgba(3,25,47,.6) 82%,rgba(3,22,42,.18))}
  .storage .intro{font-size:14px;max-width:86%}
  .storage-capabilities{grid-template-columns:1fr 1fr;bottom:14px}
  .storage-capabilities article{min-height:68px;padding:10px 12px}
  .storage-capabilities span{font-size:10px}
}

/* V5.2 — full-page adaptive snap and simplified brand section */
html{scroll-snap-type:none;scroll-padding-top:0}
html.is-settling{scroll-behavior:auto}
html.is-wheel-dragging{scroll-behavior:auto}
main>section{height:100svh;min-height:0;scroll-snap-align:none}
body.is-middle-dragging{cursor:grabbing;user-select:none}
.hero-foot{justify-content:flex-start}
.hero-foot span{padding:7px 0 7px 14px;border-left:2px solid #70dc31;font-size:12px;letter-spacing:.08em}
.idea .stage-label{display:none!important}
.idea-capabilities{margin-top:38px}
@media(max-width:900px){.idea-capabilities{margin-top:28px}}
@media(max-width:560px){.idea-capabilities{margin-top:22px}}

/* V5.3 — unified title scale and first-section contrast */
.hero .eyebrow{display:none}
.hero-copy{padding-top:27vh}
.hero h1,.idea h2,.motion h2,.four h2{font-size:clamp(48px,4.35vw,72px);line-height:1.12}
.hero-foot span{padding-right:14px;border-right:2px solid #70dc31}
.nav.nav-hero{color:#fff}
.nav.nav-hero .nav-links a{color:#fff}
.nav.nav-hero .official-logo{position:relative}
.nav.nav-hero .official-logo img{filter:none;clip-path:inset(0 69% 0 0)}
.nav.nav-hero .official-logo:after{content:"";position:absolute;inset:0;background:url("./assets/shangpai-logo.png") left center/contain no-repeat;filter:brightness(0) invert(1);clip-path:inset(0 0 0 28%);pointer-events:none}
@media(max-width:900px){.hero-copy{padding-top:23vh}.hero h1,.idea h2,.motion h2,.four h2{font-size:clamp(44px,9vw,62px)}}
@media(max-width:560px){.hero-copy{padding-top:21vh}.hero h1,.idea h2,.motion h2,.four h2{font-size:40px;line-height:1.16}}

/* V5.4 — official split logo assets with synchronized black/white navigation */
.official-logo{width:220px;height:52px;display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px;overflow:visible}
.official-logo:after{display:none!important}
.official-logo>img.logo-mark{display:block;width:52px;height:50px;object-fit:contain;clip-path:none!important;filter:none!important}
.logo-wordmark{position:relative;display:block;width:156px;height:47px}
.logo-wordmark img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:left center;clip-path:none!important;filter:none!important;transition:opacity .25s ease}
.logo-wordmark .wordmark-black{opacity:1}.logo-wordmark .wordmark-white{opacity:0}
.nav.nav-hero .wordmark-black,.nav.nav-motion .wordmark-black,.nav.nav-four .wordmark-black{opacity:0}
.nav.nav-hero .wordmark-white,.nav.nav-motion .wordmark-white,.nav.nav-four .wordmark-white{opacity:1}
.nav.nav-idea .wordmark-black{opacity:1}.nav.nav-idea .wordmark-white{opacity:0}

/* Section 06 — visible energy intelligence */
.intelligence{height:100svh;min-height:0;background:#eef6f8}
.intelligence .visual{object-position:center center}
.intelligence-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,251,251,.97) 0%,rgba(244,250,250,.88) 31%,rgba(241,248,249,.18) 53%,transparent 72%),linear-gradient(180deg,transparent 62%,rgba(235,245,246,.7) 100%)}
.intelligence-copy{position:relative;z-index:2;padding-top:var(--locked-title-top)}
.intelligence h2{margin:0;font-size:var(--locked-title-size);line-height:var(--locked-title-line);font-weight:580;letter-spacing:-.055em}
.intelligence h2 em{font-style:normal;color:#139b87}
.intelligence .intro{font-size:17px;line-height:1.9;color:#3c535b}
.intelligence-nodes{position:absolute;z-index:2;left:52px;right:52px;bottom:38px;width:auto;height:78px;padding:0 26px;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:18px;border-top:1px solid rgba(13,132,147,.28);border-bottom:1px solid rgba(13,132,147,.14);background:rgba(242,249,249,.72);backdrop-filter:blur(10px)}
.intelligence-nodes span{font-size:15px;font-weight:600;color:#234d57;white-space:nowrap}
.intelligence-nodes span:last-child{color:#118a7d}
.intelligence-nodes i{height:1px;background:linear-gradient(90deg,#19bcd1,#65d13a)}
.nav.nav-intelligence{color:#0b151b;background:rgba(236,246,248,.46);border-color:rgba(8,45,61,.1)}
.nav.nav-intelligence .nav-links a{color:#0b151b!important}
.nav.nav-intelligence .wordmark-black{opacity:1!important}
.nav.nav-intelligence .wordmark-white{opacity:0!important}
@media(max-width:900px){.intelligence .visual{object-position:58% center}.intelligence-nodes{left:20px;right:20px;bottom:24px;padding:0 16px;gap:8px}.intelligence-nodes span{font-size:12px}}
@media(max-width:560px){.intelligence .visual{object-position:66% center}.intelligence-shade{background:linear-gradient(90deg,rgba(248,251,251,.98),rgba(244,250,250,.82) 72%,rgba(241,248,249,.2))}.intelligence .intro{font-size:14px;max-width:88%}.intelligence-nodes{height:auto;min-height:70px;grid-template-columns:repeat(5,1fr);gap:4px;padding:10px 8px}.intelligence-nodes i{display:none}.intelligence-nodes span{font-size:10px;text-align:center;white-space:normal}}

/* Section 07 — brand values */
.values{height:100svh;min-height:0;color:#fff;background:#041324}
.values .visual{object-position:center center}
.values-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,16,31,.9) 0%,rgba(3,24,44,.64) 35%,rgba(3,19,36,.08) 62%,transparent 78%),linear-gradient(180deg,transparent 58%,rgba(2,12,23,.78) 100%)}
.values-copy{position:relative;z-index:2;padding-top:var(--locked-title-top)}
.values h2{margin:0;font-size:var(--locked-title-size);line-height:var(--locked-title-line);font-weight:580;letter-spacing:-.055em}
.values h2 em{font-style:normal;color:#74dd31}
.values .intro{font-size:17px;line-height:1.9;color:rgba(234,245,248,.82)}
.values-grid{position:absolute;z-index:2;left:52px;right:52px;bottom:38px;width:auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(87,219,211,.36);border-bottom:1px solid rgba(255,255,255,.12);background:rgba(2,14,27,.5);backdrop-filter:blur(10px)}
.values-grid article{min-height:108px;padding:22px 24px;border-right:1px solid rgba(255,255,255,.12)}
.values-grid article:last-child{border-right:0}
.values-grid b{display:block;font-size:17px;color:#6fe0d3}
.values-grid span{display:block;margin-top:12px;font-size:14px;line-height:1.55;color:rgba(230,241,244,.72)}
.nav.nav-values{color:#fff;background:rgba(2,24,45,.34);border-color:rgba(255,255,255,.14)}
.nav.nav-values .nav-links a{color:#fff!important}
.nav.nav-values .wordmark-black{opacity:0!important}.nav.nav-values .wordmark-white{opacity:1!important}
.nav.nav-values .nav-tools a{color:#fff;background:rgba(4,15,27,.54);border-color:rgba(255,255,255,.22)}
@media(max-width:900px){.values .visual{object-position:60% center}.values-grid{left:20px;right:20px;bottom:24px;grid-template-columns:1fr 1fr}.values-grid article{min-height:74px;padding:13px 16px}.values-grid b{font-size:15px}.values-grid span{margin-top:6px;font-size:12px}}
@media(max-width:560px){.values .visual{object-position:66% center}.values-shade{background:linear-gradient(90deg,rgba(2,16,31,.95),rgba(3,24,44,.66) 82%,rgba(3,19,36,.18))}.values .intro{font-size:14px;max-width:88%}.values-grid{bottom:14px}.values-grid article{min-height:68px;padding:10px 12px}.values-grid span{font-size:10px}}

/* Section 08 — sustainability */
.sustainability{height:100svh;min-height:0;background:#edf5f3}
.sustainability .visual{object-position:center center}
.sustainability-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(249,250,247,.96) 0%,rgba(248,249,244,.8) 33%,rgba(247,248,241,.14) 57%,transparent 76%),linear-gradient(180deg,transparent 60%,rgba(237,245,240,.64) 100%)}
.sustainability-copy{position:relative;z-index:2;padding-top:var(--locked-title-top)}
.sustainability h2{margin:0;font-size:var(--locked-title-size);line-height:var(--locked-title-line);font-weight:580;letter-spacing:-.055em}
.sustainability h2 em{font-style:normal;color:#159b72}
.sustainability .intro{font-size:17px;line-height:1.9;color:#3e544f}
.sustainability-grid{position:absolute;z-index:2;left:52px;right:52px;bottom:38px;width:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(17,139,110,.26);border-bottom:1px solid rgba(17,139,110,.14);background:rgba(245,249,244,.7);backdrop-filter:blur(10px)}
.sustainability-grid article{min-height:104px;padding:22px 26px;border-right:1px solid rgba(17,112,93,.14)}
.sustainability-grid article:last-child{border-right:0}
.sustainability-grid b{display:block;font-size:17px;color:#12866f}
.sustainability-grid span{display:block;margin-top:12px;font-size:14px;line-height:1.55;color:#4c635d}
.nav.nav-sustainability{color:#0b151b;background:rgba(241,248,245,.4);border-color:rgba(8,45,61,.1)}
.nav.nav-sustainability .nav-links a{color:#0b151b!important}
.nav.nav-sustainability .wordmark-black{opacity:1!important}.nav.nav-sustainability .wordmark-white{opacity:0!important}
@media(max-width:900px){.sustainability .visual{object-position:58% center}.sustainability-grid{left:20px;right:20px;bottom:24px}.sustainability-grid article{min-height:82px;padding:15px 16px}.sustainability-grid b{font-size:15px}.sustainability-grid span{margin-top:7px;font-size:12px}}
@media(max-width:560px){.sustainability .visual{object-position:66% center}.sustainability-shade{background:linear-gradient(90deg,rgba(249,250,247,.98),rgba(248,249,244,.82) 74%,rgba(247,248,241,.18))}.sustainability .intro{font-size:14px;max-width:88%}.sustainability-grid{bottom:14px}.sustainability-grid article{min-height:70px;padding:10px 9px}.sustainability-grid b{font-size:12px}.sustainability-grid span{font-size:10px}}

/* Section 09 — project delivery */
.projects{height:100svh;min-height:0;color:#fff;background:#061a30}
.projects .visual{object-position:center center}
.projects-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,17,32,.92) 0%,rgba(3,27,49,.72) 34%,rgba(3,24,44,.13) 59%,transparent 78%),linear-gradient(180deg,transparent 58%,rgba(2,13,25,.78) 100%)}
.projects-copy{position:relative;z-index:2;padding-top:var(--locked-title-top)}
.projects h2{margin:0;font-size:var(--locked-title-size);line-height:var(--locked-title-line);font-weight:580;letter-spacing:-.055em}
.projects h2 em{font-style:normal;color:#75dd31}
.projects .intro{font-size:17px;line-height:1.9;color:rgba(234,244,248,.82)}
.project-contact{width:min(620px,44vw);height:54px;margin-top:24px;display:grid;grid-template-columns:1fr 1fr auto;border:1px solid rgba(118,224,216,.34);background:rgba(2,17,31,.5);backdrop-filter:blur(10px)}
.project-contact label{position:relative;display:block;border-right:1px solid rgba(255,255,255,.12)}
.project-contact label span{position:absolute;left:16px;top:7px;font-size:9px;letter-spacing:.08em;color:#6fded4}
.project-contact input{width:100%;height:100%;padding:20px 16px 4px;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:14px}
.project-contact button{min-width:158px;padding:0 18px;border:0;background:linear-gradient(100deg,#62cc25,#82df31);color:#061321;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.projects-grid{position:absolute;z-index:2;left:52px;right:52px;bottom:38px;width:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(77,214,211,.34);border-bottom:1px solid rgba(255,255,255,.12);background:rgba(2,15,29,.54);backdrop-filter:blur(10px)}
.projects-grid article{min-height:132px;padding:20px 26px;border-right:1px solid rgba(255,255,255,.12)}
.projects-grid article:last-child{border-right:0}
.projects-grid b{display:block;font-size:17px;color:#6fe0d4}
.projects-grid strong{display:block;margin-top:10px;font-size:14px;font-weight:500;color:#fff}
.projects-grid span{display:block;margin-top:9px;font-size:13px;line-height:1.55;color:rgba(231,241,244,.72)}
.nav.nav-projects{color:#fff;background:rgba(2,24,45,.34);border-color:rgba(255,255,255,.14)}
.nav.nav-projects .nav-links a{color:#fff!important}
.nav.nav-projects .wordmark-black{opacity:0!important}.nav.nav-projects .wordmark-white{opacity:1!important}
.nav.nav-projects .nav-tools a{color:#fff;background:rgba(4,15,27,.54);border-color:rgba(255,255,255,.22)}
@media(max-width:900px){.projects .visual{object-position:60% center}.project-contact{width:62vw}.projects-grid{left:20px;right:20px;bottom:24px}.projects-grid article{min-height:104px;padding:14px 16px}.projects-grid b{font-size:15px}.projects-grid strong{font-size:12px}.projects-grid span{margin-top:6px;font-size:11px}}
@media(max-width:560px){.projects .visual{object-position:67% center}.projects-shade{background:linear-gradient(90deg,rgba(2,17,32,.96),rgba(3,27,49,.7) 82%,rgba(3,24,44,.2))}.projects .intro{font-size:14px;max-width:88%}.project-contact{width:calc(100vw - 40px);height:48px;grid-template-columns:1fr 1fr}.project-contact button{grid-column:1/-1;min-height:40px}.projects-grid{bottom:14px}.projects-grid article{min-height:88px;padding:9px 8px}.projects-grid b{font-size:12px}.projects-grid strong{font-size:10px}.projects-grid span{font-size:9px}}

/* Section 09 — featured case and contact handoff */
.projects-copy{width:calc(100% - 104px);margin-inline:auto}
.projects-case-list{width:min(720px,51vw);margin-top:26px}
.featured-case{position:relative;width:100%;min-height:72px;margin:0;padding:7px 2px;display:grid;grid-template-columns:94px minmax(360px,520px) 100px;justify-content:start;align-items:center;column-gap:24px;border:0;border-bottom:1px solid rgba(122,203,222,.24);background:transparent;color:#fff;transition:.22s ease}
.featured-case img{width:94px;height:58px;object-fit:cover;filter:saturate(.78) brightness(.82);transition:.25s ease}
.featured-case span{font-size:10px;letter-spacing:.12em;color:rgba(91,214,233,.72)}
.featured-case b{font-size:16px;font-weight:520;letter-spacing:.01em;color:rgba(255,255,255,.84)}
.featured-case i{min-width:88px;font-style:normal;font-size:11px;text-align:left;color:rgba(126,226,239,.72)}
.featured-case:hover{padding-left:8px;background:linear-gradient(90deg,rgba(25,155,184,.12),transparent)}
.featured-case:hover img{filter:saturate(1) brightness(1)}
.featured-case:hover span,.featured-case:hover i{color:#77e171}.featured-case:hover b{color:#fff}
.projects-contact-wrap{width:min(650px,46vw);margin-top:22px;display:flex;align-items:center;gap:26px}
.projects-contact-wrap p{margin:0;font-size:13px;color:rgba(231,242,246,.7)}
.projects-contact-link{width:156px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(128,224,64,.72);background:rgba(91,205,36,.12);color:#a1ef68;font-size:13px;font-weight:600;transition:.25s ease}
.projects-contact-link:hover{background:#70dc2c;color:#071727;transform:translateX(3px)}

/* Case article */
.case-page{margin:0;background:#04172a;color:#eaf4f7;overflow:auto;scroll-snap-type:none}
.case-page main{background:#04172a}
.case-nav{position:fixed;z-index:20;top:0;left:0;right:0;width:100%;max-width:none;height:72px;margin:0;padding-inline:52px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14);background:rgba(3,20,38,.82);backdrop-filter:blur(12px)}
.case-nav .official-logo{position:relative;left:auto;top:auto}.case-nav .wordmark-white{opacity:1}.case-back{font-size:12px;color:#fff}
.case-hero{position:relative;width:100%;height:100svh;min-height:720px;overflow:hidden}.case-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}.case-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,15,29,.96),rgba(3,24,44,.58) 52%,rgba(3,20,38,.14)),linear-gradient(0deg,#04172a 0,transparent 24%)}.case-label[hidden]{display:none!important}
.case-hero-copy{position:relative;z-index:2;padding-top:27vh}.case-hero-copy>p:first-child,.case-kicker{font-size:12px;letter-spacing:.18em;color:#5adbe6}.case-chapter .case-kicker{position:absolute;left:0;top:130px;margin:0;transform:none;font-size:13px;letter-spacing:.08em;color:rgba(219,239,243,.7)}.case-hero h1{margin:24px 0 28px;font-size:clamp(48px,5.2vw,82px);line-height:1.05;letter-spacing:-.055em}.case-hero h1 em{font-style:normal;color:#75df2f}.case-hero-copy>p:last-child{font-size:17px;line-height:1.9;color:rgba(238,246,248,.78)}
.case-article{padding-top:70px;padding-bottom:120px}.case-chapter{position:relative;padding:72px 0;display:grid;grid-template-columns:90px minmax(0,850px);gap:34px;border-top:1px solid rgba(116,210,227,.24)}.case-chapter:first-child{border-top:0}.case-index{position:relative;padding-top:0;font-size:30px;font-weight:300;line-height:1;letter-spacing:.04em;color:#61dce8}.case-index:after{content:"";position:absolute;left:0;top:46px;width:28px;height:2px;background:#74df36}.case-chapter h2{margin:0 0 22px;font-size:34px;font-weight:560;letter-spacing:-.035em}.case-chapter>div:last-child>p:last-child,.case-chapter>div:last-child>p:nth-of-type(2){max-width:740px;font-size:16px;line-height:1.9;color:rgba(228,239,242,.72)}
.case-data,.case-metrics{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);border-top:0}.case-data span{padding:22px 20px 20px 0;font-size:14px;line-height:1.55;color:rgba(230,240,243,.68)}.case-data b{display:block;margin-bottom:8px;font-size:18px;color:#fff}
.case-metrics{grid-template-columns:repeat(4,1fr)}.case-metrics span{padding:24px 18px 24px 0;border-right:0}.case-metrics small,.case-metrics b,.case-metrics em{display:block}.case-metrics small{font-size:14px;color:#5adbe6}.case-metrics b{margin:13px 0 8px;font-size:20px}.case-metrics.numeric b{font-size:30px;font-weight:520;color:#78e039}.case-metrics em{font-style:normal;font-size:14px;line-height:1.5;color:rgba(230,240,243,.65)}
.case-note{margin-top:30px;padding:20px 22px;border-left:2px solid #72df34;background:rgba(11,46,67,.62);display:grid;grid-template-columns:112px 1fr;gap:18px;font-size:15px;line-height:1.75}.case-note b{color:#82e64b}.case-note span{color:rgba(231,241,244,.75)}
.case-spec-grid{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(95,194,214,.16)}.case-spec-grid.four-cols{grid-template-columns:repeat(4,1fr)}.case-spec-grid span{min-height:92px;padding:20px;background:#061c30;font-size:14px;line-height:1.55;color:rgba(226,239,242,.68)}.case-spec-grid b{display:block;margin-bottom:9px;font-size:17px;color:#68dce6}
.case-flow{margin-top:32px;display:flex;align-items:center;justify-content:flex-start;gap:0}.case-flow span{display:flex;align-items:center;flex:0 0 auto;padding:20px 0;font-size:15px;font-weight:500;color:rgba(235,244,246,.84)}.case-flow span:not(:last-child):after{content:"→";position:static;margin-inline:28px;font-size:17px;font-weight:400;line-height:1;color:#62dce8}
@media(max-width:700px){.case-nav{padding-inline:20px}.case-hero{height:100svh;min-height:600px}.case-hero-copy{padding-top:24vh}.case-hero h1{font-size:44px}.case-article{padding-inline:20px}.case-chapter{grid-template-columns:42px 1fr;gap:12px;padding:44px 0}.case-index{font-size:18px}.case-index:after{top:30px;width:20px}.case-chapter .case-kicker{position:static;margin-bottom:10px;font-size:10px}.case-chapter h2{font-size:27px}.case-data,.case-metrics,.case-spec-grid{grid-template-columns:1fr 1fr}.case-note{grid-template-columns:1fr}.case-flow{display:grid;grid-template-columns:1fr 1fr}.case-flow span:after{display:none}}

/* Section 10 — brand close and contact */
.contact{height:100svh;min-height:0;color:#fff;background:#031427}
.contact .visual{object-position:center center}
.contact-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,15,29,.94),rgba(3,24,44,.7) 45%,rgba(3,20,38,.18) 75%),linear-gradient(180deg,rgba(2,13,25,.08),rgba(2,13,25,.72))}
.contact-layout{position:relative;z-index:2;padding-top:var(--locked-title-top);display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,560px);gap:7vw}
.contact h2{margin:0;font-size:var(--locked-title-size);line-height:var(--locked-title-line);font-weight:580;letter-spacing:-.055em}
.contact h2 em{font-style:normal;color:#75dd31}
.contact-copy p{margin:30px 0 0;font-size:17px;line-height:1.9;color:rgba(232,243,247,.8)}
.contact-panel{align-self:center;padding:34px 0;border-top:1px solid rgba(104,220,216,.4);border-bottom:1px solid rgba(104,220,216,.22)}
.contact-panel>p{margin:0 0 30px;font-size:20px;line-height:1.6;color:rgba(240,248,250,.92)}
.contact-topics{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:34px}
.contact-topics span{padding:13px 16px 13px 0;border-right:1px solid rgba(255,255,255,.14);font-size:13px;color:#72ded6}
.contact-topics span+span{padding-left:20px}
.contact-action{width:190px;height:50px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border:0;background:linear-gradient(100deg,#62cc25,#83df31);color:#061526;font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.contact-action i{font-style:normal;font-size:18px}
.site-footer{position:absolute;z-index:2;left:52px;right:52px;bottom:28px;width:auto;padding-top:18px;display:grid;grid-template-columns:1fr 1fr auto;border-top:1px solid rgba(255,255,255,.16);font-size:11px;color:rgba(231,242,246,.62)}
.site-footer span:nth-child(2){text-align:center}.site-footer a{color:#75ddd5}
.contact-process{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);max-width:620px}.contact-process span{padding:16px 20px 16px 0;border-top:1px solid rgba(99,214,211,.28)}.contact-process b,.contact-process strong,.contact-process small{display:block}.contact-process b{font-size:11px;color:#67dce1}.contact-process strong{margin:10px 0 6px;font-size:15px}.contact-process small{font-size:12px;color:rgba(230,241,244,.58)}
.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:22px;border:1px solid rgba(99,214,211,.28);background:rgba(3,22,40,.68);backdrop-filter:blur(12px)}
.lead-form label{position:relative;min-height:58px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035)}
.lead-form label span{position:absolute;left:14px;top:8px;font-size:12px;letter-spacing:.05em;color:#69dcd2}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;height:100%;padding:23px 14px 6px;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:14px}
.lead-form select{appearance:none}.lead-form option{color:#071727;background:#fff}
.lead-form .lead-requirement{grid-column:1/-1;min-height:96px}
.lead-form textarea{resize:none}
.lead-form button{grid-column:1/-1;height:50px;border:0;background:linear-gradient(100deg,#62cc25,#83df31);color:#071727;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.lead-note{grid-column:1/-1!important;margin:0!important;font-size:11px!important;line-height:1.4!important;text-align:center;color:rgba(230,241,244,.48)!important}
.nav.nav-contact{color:#fff;background:rgba(2,24,45,.4);border-color:rgba(255,255,255,.14)}
.nav.nav-contact .nav-links a{color:#fff!important}
.nav.nav-contact .wordmark-black{opacity:0!important}.nav.nav-contact .wordmark-white{opacity:1!important}
.nav.nav-contact .nav-tools a{color:#fff;background:rgba(4,15,27,.54);border-color:rgba(255,255,255,.22)}
.nav-links a{position:relative;padding-block:22px}
.nav-links a:after{content:"";position:absolute;left:50%;right:50%;bottom:13px;height:2px;background:#75df31;transition:left .24s ease,right .24s ease}
.nav-links a.is-active:after{left:0;right:0}
.nav.nav-dark{color:#fff;background:rgba(2,24,45,.42);border-color:rgba(255,255,255,.14)}
.nav.nav-dark .nav-links a{color:#fff!important}.nav.nav-dark .wordmark-black{opacity:0!important}.nav.nav-dark .wordmark-white{opacity:1!important}
.nav.nav-dark .nav-tools a{color:#fff;background:rgba(4,15,27,.56);border-color:rgba(255,255,255,.22)}
.nav.nav-light{color:#07131a;background:rgba(238,247,248,.72);border-color:rgba(7,29,39,.1)}
.nav.nav-light .nav-links a{color:#07131a!important}.nav.nav-light .wordmark-black{opacity:1!important}.nav.nav-light .wordmark-white{opacity:0!important}
@media(max-width:900px){.projects-copy{width:calc(100% - 40px)}.projects-case-list,.projects-contact-wrap{width:62vw}.featured-case{width:100%}.contact-layout{grid-template-columns:1fr 400px;gap:30px}.contact-panel>p{font-size:18px}.site-footer{left:20px;right:20px}}
@media(max-width:700px){.projects-case-list,.projects-contact-wrap{width:calc(100vw - 40px)}.featured-case{width:100%;grid-template-columns:78px minmax(0,1fr) 76px;column-gap:12px}.featured-case img{width:78px;height:52px}.featured-case i{min-width:0}.contact-layout{display:block}.contact-panel{margin-top:34px;padding:24px 0}.contact-copy p{font-size:14px}.contact h2{font-size:var(--locked-title-size)}.site-footer{grid-template-columns:1fr auto}.site-footer span:nth-child(2){display:none}}
@media(max-width:560px){.featured-case{margin-top:18px}.featured-case summary{min-height:64px;padding:10px 12px}.featured-case summary b{font-size:15px}.featured-case-detail{font-size:11px}.projects-contact-link{height:42px;margin-top:12px}.contact-layout{padding-top:18vh}.contact h2{font-size:36px}.contact-copy p{margin-top:18px}.lead-form{margin-top:20px;padding:12px;gap:8px}.lead-form label{min-height:50px}.lead-form label span{top:6px}.lead-form .lead-requirement{min-height:72px}.lead-form button{height:44px}}

/* V6 — five narrative chapters / fifteen full-screen sections */
body:not(.technology-page):not(.case-page)>main[data-codex-root]{display:flex;flex-direction:column}
body:not(.technology-page):not(.case-page)>main[data-codex-root]>section{flex:0 0 100svh}
#hero{order:1}#idea{order:2}#brand-proof{order:3}#motion{order:4}#storage{order:5}#intelligence{order:6}#solutions{order:7}#solution-industrial-detail{order:8}#solution-charging-detail{order:9}#solution-park-detail{order:10}#projects{order:11}#values{order:12}#sustainability{order:13}#insights{order:14}#contact{order:15}
.section-role{display:block;margin-bottom:20px;padding-left:14px;border-left:2px solid #75df31;font-size:13px;font-weight:600;letter-spacing:.08em;color:#69dcd5}
.brand-proof,.scenario-detail,.insights{position:relative;height:100svh;min-height:0;overflow:hidden}
.brand-proof-shade,.scenario-shade,.insights-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,16,31,.94),rgba(3,27,48,.68) 45%,rgba(3,22,40,.12) 76%),linear-gradient(180deg,rgba(2,13,25,.08),rgba(2,13,25,.74))}
.scenario-shade-light{background:linear-gradient(90deg,rgba(247,251,250,.96),rgba(241,249,247,.66) 47%,rgba(235,247,244,.08) 78%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(239,247,245,.7))}
.brand-proof-copy,.scenario-copy,.insights-copy{position:relative;z-index:2;padding-top:var(--locked-title-top)}
.brand-proof h2,.scenario-detail h2,.insights h2{margin:0;max-width:980px;font-size:var(--locked-title-size);line-height:var(--locked-title-line);font-weight:580;letter-spacing:-.055em}
.brand-proof h2 em,.scenario-detail h2 em,.insights h2 em{font-style:normal;color:#75df31}
.brand-proof .intro,.scenario-detail .intro,.insights .intro{font-size:17px;line-height:1.9;color:rgba(232,243,247,.82)}
.scenario-park{color:#09131a}.scenario-park h2 em{color:#139b83}.scenario-park .section-role{color:#087d76}.scenario-park .intro{color:#40565d}
.brand-proof-grid,.scenario-data,.insights-grid{position:absolute;z-index:2;left:52px;right:52px;bottom:48px;width:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(100,218,215,.35);background:rgba(2,18,33,.67);backdrop-filter:blur(12px)}
.brand-proof-grid article,.scenario-data article{min-height:112px;padding:23px 26px;border-right:1px solid rgba(255,255,255,.13)}
.brand-proof-grid b,.brand-proof-grid span,.scenario-data b,.scenario-data span{display:block}.brand-proof-grid b,.scenario-data b{font-size:17px;color:#71ded8}.brand-proof-grid span,.scenario-data span{margin-top:12px;font-size:13px;line-height:1.6;color:rgba(232,243,247,.68)}
.scenario-park .scenario-data{background:rgba(244,250,248,.76);border-color:rgba(11,118,112,.24)}.scenario-park .scenario-data article{border-color:rgba(11,60,67,.13)}.scenario-park .scenario-data b{color:#087d76}.scenario-park .scenario-data span{color:#475b61}
.section-action{position:absolute;z-index:3;right:52px;bottom:184px;min-width:170px;height:46px;padding:0 20px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(117,223,49,.72);background:rgba(7,25,37,.5);color:#9aec68;font-size:13px;font-weight:600}
.scenario-park .section-action{background:rgba(255,255,255,.66);color:#087d76;border-color:rgba(8,125,118,.38)}
.insights-grid a{min-height:148px;padding:24px 28px;border-right:1px solid rgba(255,255,255,.13);color:#fff}.insights-grid span,.insights-grid b,.insights-grid i{display:block}.insights-grid span{font-size:11px;color:#6eddd7}.insights-grid b{margin-top:15px;font-size:18px;line-height:1.5}.insights-grid i{margin-top:18px;font-style:normal;font-size:12px;color:rgba(231,242,246,.64)}
@media(max-width:900px){.brand-proof-grid,.scenario-data,.insights-grid{left:20px;right:20px}.section-action{right:20px}.brand-proof .intro,.scenario-detail .intro,.insights .intro{font-size:15px}}
@media(max-width:560px){.brand-proof-grid,.scenario-data,.insights-grid{grid-template-columns:1fr;bottom:14px}.brand-proof-grid article,.scenario-data article,.insights-grid a{min-height:66px;padding:10px 14px}.brand-proof-grid span,.scenario-data span{margin-top:4px;font-size:10px}.insights-grid b{margin-top:5px;font-size:13px}.insights-grid i{display:none}.section-action{right:20px;bottom:232px;height:40px}.section-role{margin-bottom:14px}.brand-proof .intro,.scenario-detail .intro,.insights .intro{font-size:13px}}

/* V5.7 — final explicit logo/menu color states */
.nav.nav-hero .nav-links a,.nav.nav-motion .nav-links a,.nav.nav-four .nav-links a{color:#fff!important}
.nav.nav-idea .nav-links a{color:#0b151b!important}
.nav.nav-hero .wordmark-black,.nav.nav-motion .wordmark-black,.nav.nav-four .wordmark-black{opacity:0!important}
.nav.nav-hero .wordmark-white,.nav.nav-motion .wordmark-white,.nav.nav-four .wordmark-white{opacity:1!important}
.nav.nav-idea .wordmark-black{opacity:1!important}
.nav.nav-idea .wordmark-white{opacity:0!important}

/* LOCKED BASELINE — Sections 01–03. Do not override in later sections. */
:root{--locked-title-size:clamp(48px,4.35vw,72px);--locked-title-line:1.12;--locked-title-top:27vh}
.nav{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important}
.hero-copy,.idea .section-head,.motion-copy{padding-top:var(--locked-title-top)!important}
.hero h1,.idea h2,.motion h2{font-size:var(--locked-title-size)!important;line-height:var(--locked-title-line)!important}
.official-logo>img.logo-mark{filter:none!important;clip-path:none!important;opacity:1!important}
.nav.nav-hero .nav-links a,.nav.nav-motion .nav-links a{color:#fff!important}
.nav.nav-idea .nav-links a{color:#0b151b!important}
.nav.nav-hero .wordmark-black,.nav.nav-motion .wordmark-black{opacity:0!important}
.nav.nav-hero .wordmark-white,.nav.nav-motion .wordmark-white{opacity:1!important}
.nav.nav-idea .wordmark-black{opacity:1!important}.nav.nav-idea .wordmark-white{opacity:0!important}
@media(max-width:900px){:root{--locked-title-size:clamp(44px,9vw,62px);--locked-title-top:23vh}}
@media(max-width:560px){:root{--locked-title-size:40px;--locked-title-line:1.16;--locked-title-top:21vh}}

/* Independent technology page */
.technology-page{margin:0;background:#031427;color:#fff}
.technology-page-root{background:#031427}
.technology-nav{color:#fff;background:rgba(2,22,41,.72)!important;border-color:rgba(255,255,255,.14)!important;backdrop-filter:blur(14px)}
.technology-nav .wordmark-black{opacity:0!important}.technology-nav .wordmark-white{opacity:1!important}
.technology-nav .nav-links a{color:#fff!important}.technology-nav .nav-tools a{color:#fff;background:rgba(4,15,27,.56);border-color:rgba(255,255,255,.22)}
.technology-section{position:relative;height:100svh;min-height:650px;overflow:hidden;color:#fff;background:#031427}
.technology-section .visual{filter:saturate(.86)}
.technology-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,16,31,.94) 0%,rgba(3,27,48,.72) 42%,rgba(3,22,40,.18) 72%),linear-gradient(180deg,rgba(2,14,27,.12),rgba(2,13,25,.76))}
.technology-copy{position:relative;z-index:2;padding-top:var(--locked-title-top);max-width:none}
.technology-label{display:block;margin-bottom:28px;padding-left:14px;border-left:2px solid #77df31;font-size:13px;font-weight:600;letter-spacing:.08em;color:#79ded9}
.technology-copy h1,.technology-copy h2{max-width:930px;margin:0;font-size:var(--locked-title-size);line-height:var(--locked-title-line);font-weight:580;letter-spacing:-.055em}
.technology-copy em{font-style:normal;color:#76df31}
.technology-copy p{margin:30px 0 0;font-size:17px;line-height:1.9;color:rgba(232,243,247,.82)}
.technology-flow,.technology-data-grid{position:absolute;z-index:2;left:52px;right:52px;bottom:52px;width:auto;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(2,18,33,.68);border-top:1px solid rgba(102,218,215,.36);backdrop-filter:blur(12px)}
.technology-flow span,.technology-data-grid article{min-height:112px;padding:24px 26px;border-right:1px solid rgba(255,255,255,.13)}
.technology-flow span:last-child,.technology-data-grid article:last-child{border-right:0}
.technology-flow b,.technology-flow small,.technology-data-grid b,.technology-data-grid span{display:block}
.technology-flow b,.technology-data-grid b{font-size:17px;font-weight:600;color:#70dfd8}
.technology-flow small,.technology-data-grid span{margin-top:12px;font-size:13px;line-height:1.6;color:rgba(232,243,247,.68)}
.technology-hardware .visual{object-position:center center}.technology-control .visual{object-position:center center}.technology-safety .visual{object-position:center center}
.technology-footer{position:absolute;z-index:3;left:52px;right:52px;bottom:20px;width:auto;display:flex;justify-content:space-between;font-size:11px;color:rgba(231,242,246,.65)}
.technology-safety .technology-data-grid{bottom:68px}
.technology-footer a{color:#76ded7}
@media(max-width:900px){.technology-copy{padding-top:22vh}.technology-flow,.technology-data-grid{left:20px;right:20px;grid-template-columns:1fr 1fr}.technology-flow span,.technology-data-grid article{min-height:82px;padding:14px 16px}.technology-copy p{font-size:15px}.technology-safety .technology-data-grid{bottom:60px}.technology-footer{left:20px;right:20px}}
@media(max-width:560px){.technology-section{min-height:700px}.technology-copy h1,.technology-copy h2{font-size:40px}.technology-copy p{font-size:14px;max-width:90%}.technology-label{margin-bottom:20px}.technology-flow b,.technology-data-grid b{font-size:14px}.technology-flow small,.technology-data-grid span{font-size:11px}.technology-flow,.technology-data-grid{bottom:20px}.technology-safety .technology-data-grid{bottom:54px}}

/* Section 04 — solutions */
.solutions{height:100svh;min-height:0;color:#0b151b;background:#eef6f7}
.solutions .visual{object-position:center}.solutions-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,251,250,.97),rgba(245,250,249,.78) 34%,rgba(244,250,249,.16) 58%,transparent 76%)}
.solutions-copy{position:relative;z-index:2;padding-top:var(--locked-title-top)}
.solutions h2{margin:0;font-size:var(--locked-title-size);line-height:var(--locked-title-line);font-weight:580;letter-spacing:-.055em}.solutions h2 em{font-style:normal;color:#149b83}
.solutions .intro{margin-top:28px;color:#3f555d;font-size:16px;line-height:1.9}
.solutions-cards{position:absolute;z-index:2;left:52px;right:52px;bottom:42px;width:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(9,89,104,.24);border-bottom:1px solid rgba(9,89,104,.12);background:rgba(242,249,248,.72)}
.solutions-cards article{min-height:94px;padding:20px 24px;border-right:1px solid rgba(9,89,104,.14)}.solutions-cards article:last-child{border-right:0}.solutions-cards b{display:block;margin-bottom:10px;font-size:15px;color:#087f82}.solutions-cards span{font-size:12px;color:#4e6269}
.nav.nav-solutions{color:#0b151b;background:rgba(230,241,244,.2);border-color:rgba(8,45,61,.1)}.nav.nav-solutions .nav-links a{color:#0b151b!important}.nav.nav-solutions .wordmark-black{opacity:1!important}.nav.nav-solutions .wordmark-white{opacity:0!important}
@media(max-width:900px){.solutions-cards{left:20px;right:20px;bottom:24px}.solutions-cards article{padding:16px 14px}.solutions .intro{font-size:15px}}
@media(max-width:560px){.solutions .visual{object-position:62% center}.solutions-shade{background:linear-gradient(90deg,rgba(247,251,250,.97),rgba(245,250,249,.68) 72%,rgba(244,250,249,.2))}.solutions-cards{left:12px;right:12px;grid-template-columns:1fr;bottom:12px}.solutions-cards article{min-height:54px;padding:9px 12px}.solutions-cards b{margin-bottom:3px;font-size:13px}.solutions-cards span{font-size:10px}}

/* Section 04 carousel states */
.solutions-scenes{position:absolute;inset:0}.scene-image{opacity:0;transform:scale(1.012);transition:opacity .8s ease,transform 6s ease}.scene-image.is-active{opacity:1;transform:scale(1)}
.solutions-detail{width:min(560px,46vw);margin-top:30px;border-top:1px solid rgba(10,100,113,.22)}
.solutions-detail>div{display:grid;grid-template-columns:82px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid rgba(10,100,113,.14)}.solutions-detail b{font-size:12px;color:#087f82}.solutions-detail p{margin:0;font-size:13px;line-height:1.65;color:#354b54}
.solutions-cards button{appearance:none;min-height:94px;padding:20px 24px;border:0;border-right:1px solid rgba(9,89,104,.14);background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color .25s ease,color .25s ease}.solutions-cards button:last-child{border-right:0}.solutions-cards button.is-active{background:linear-gradient(90deg,rgba(13,172,184,.16),rgba(108,213,54,.14));box-shadow:inset 0 3px 0 #20b9bb}.solutions-cards button b{color:#4b6168}.solutions-cards button.is-active b{color:#087f82}.solutions-cards button span{display:block}
@media(max-width:900px){.solutions-detail{width:min(520px,68vw)}.solutions-cards button{padding:16px 14px}}
@media(max-width:560px){.solutions-detail{width:92vw;margin-top:20px}.solutions-detail>div{grid-template-columns:68px 1fr;padding:8px 0}.solutions-detail p{font-size:11px}.solutions-cards button{min-height:54px;padding:9px 12px}.solutions-cards button b{margin-bottom:3px;font-size:13px}.solutions-cards button span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.scene-image{transition:none}}

/* Section 04 — one-third scene detail and larger readable type */
.solutions-detail{width:33.333vw;min-width:560px;max-width:680px;margin-top:34px}
.solutions-detail>div{grid-template-columns:96px 1fr;gap:22px;padding:16px 0}
.solutions-detail b{font-size:14px;line-height:1.7}
.solutions-detail p{font-size:16px;line-height:1.7}
.solutions-cards button b{font-size:18px;line-height:1.4}
.solutions-cards button span{margin-top:9px;font-size:14px;line-height:1.5}
@media(max-width:1100px){.solutions-detail{width:48vw;min-width:0}.solutions-detail p{font-size:14px}.solutions-cards button b{font-size:16px}.solutions-cards button span{font-size:12px}}
@media(max-width:560px){.solutions-detail{width:92vw;margin-top:18px}.solutions-detail>div{grid-template-columns:72px 1fr;gap:10px;padding:8px 0}.solutions-detail b{font-size:12px}.solutions-detail p{font-size:11px}.solutions-cards button b{font-size:13px}.solutions-cards button span{margin-top:3px;font-size:10px}}

/* Section 04 — scene selector and its current insight share one left-side panel */
.solutions .solutions-copy{width:calc(100% - 104px);margin-inline:auto}
.solutions .solutions-cards{
  position:relative;left:auto;right:auto;bottom:auto;
  width:min(680px,36vw);min-width:600px;margin:26px 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(9,89,104,.18);border-radius:2px;
  background:rgba(244,250,249,.76);backdrop-filter:blur(8px);
  overflow:hidden
}
.solutions .solutions-cards button{min-height:76px;padding:13px 18px}
.solutions .solutions-cards button b{font-size:17px}
.solutions .solutions-cards button span{margin-top:6px;font-size:14px}
.solutions .solutions-detail{width:min(680px,36vw);min-width:600px;margin-top:16px}
.solutions .solutions-detail>div{grid-template-columns:92px 1fr;gap:20px;padding:14px 0}
.solutions .solutions-detail b{font-size:15px}
.solutions .solutions-detail p{font-size:17px;line-height:1.65}
@media(max-width:1100px){
  .solutions .solutions-copy{width:calc(100% - 40px)}
  .solutions .solutions-cards,.solutions .solutions-detail{width:52vw;min-width:0}
  .solutions .solutions-detail p{font-size:15px}
}
@media(max-width:560px){
  .solutions .solutions-copy{width:calc(100% - 40px)}
  .solutions .solutions-cards,.solutions .solutions-detail{width:calc(100vw - 40px)}
  .solutions .solutions-cards{margin-top:18px}
  .solutions .solutions-cards button{min-height:58px;padding:9px 8px}
  .solutions .solutions-cards button b{font-size:13px}
  .solutions .solutions-cards button span{font-size:10px}
  .solutions .solutions-detail>div{grid-template-columns:70px 1fr;gap:10px;padding:9px 0}
  .solutions .solutions-detail b{font-size:12px}
  .solutions .solutions-detail p{font-size:12px}
}
.nav.nav-hero .nav-links,.nav.nav-motion .nav-links,.nav.nav-four .nav-links{color:#fff}
.nav.nav-idea .nav-links{color:#0b151b}
@media(max-width:900px){.official-logo{width:184px;height:48px;grid-template-columns:46px 1fr;gap:10px}.official-logo>img.logo-mark{width:46px;height:44px}.logo-wordmark{width:128px;height:40px}}
@media(max-width:560px){.official-logo{width:158px;height:43px;grid-template-columns:40px 1fr;gap:8px}.official-logo>img.logo-mark{width:40px;height:39px}.logo-wordmark{width:110px;height:34px}}

/* V5.5 — reduce official logo by one third */
.official-logo{width:147px;height:35px;grid-template-columns:35px 1fr;gap:8px}
.official-logo>img.logo-mark{width:35px;height:34px}
.logo-wordmark{width:104px;height:31px}
@media(max-width:900px){.official-logo{width:123px;height:32px;grid-template-columns:31px 1fr;gap:7px}.official-logo>img.logo-mark{width:31px;height:30px}.logo-wordmark{width:85px;height:27px}}
@media(max-width:560px){.official-logo{width:105px;height:29px;grid-template-columns:27px 1fr;gap:5px}.official-logo>img.logo-mark{width:27px;height:26px}.logo-wordmark{width:73px;height:23px}}

/* V5.6 — explicit section color sequence: white / black / white / white */
.nav.nav-hero,.nav.nav-motion,.nav.nav-four{color:#fff}
.nav.nav-hero .nav-links,.nav.nav-motion .nav-links,.nav.nav-four .nav-links{color:#fff}
.nav.nav-hero .wordmark-black,.nav.nav-motion .wordmark-black,.nav.nav-four .wordmark-black{opacity:0}
.nav.nav-hero .wordmark-white,.nav.nav-motion .wordmark-white,.nav.nav-four .wordmark-white{opacity:1}
.nav.nav-idea{color:#0b151b}
.nav.nav-idea .nav-links{color:#0b151b}
.nav.nav-idea .wordmark-black{opacity:1}.nav.nav-idea .wordmark-white{opacity:0}
main > section.is-group-hidden{display:none!important}

/* Global dark-scene readability: base title stays white, accent line keeps its section color. */
main > section.dark-section h1,
main > section.dark-section h2{color:#fff}

/* Locked section label: one shared bar, spacing and vertical alignment everywhere. */
.section-role{
  display:flex;
  align-items:center;
  width:max-content;
  height:30px;
  margin-bottom:20px;
  padding:0 18px;
  border-left:2px solid #75df31;
  border-right:2px solid #75df31;
  font-size:15px;
  line-height:30px;
}
main > section.light-section .section-role{color:#087d76}
main > section.dark-section .section-role{color:#69dcd5}

/* Home narrative panels sit between the main title and its description. */
main > section .narrative-panel{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:min(100%,820px)!important;
  max-width:820px!important;
  margin:16px 0 0!important;
}
main > section .narrative-panel + p{margin-top:16px!important}
main > section .narrative-panel article{min-height:72px!important;padding:12px 16px!important}
main > section .narrative-panel article b{font-size:16px!important;line-height:1.45!important}
main > section .narrative-panel article span{font-size:14px!important;line-height:1.55!important}
main > section .insights-grid.narrative-panel a{min-height:88px!important;padding:13px 16px!important}
main > section .insights-grid.narrative-panel b{font-size:16px!important}
main > section .insights-grid.narrative-panel span,
main > section .insights-grid.narrative-panel i{font-size:12px!important}
main > section .storage-capabilities.narrative-panel article{min-height:70px!important}
main > section .projects-case-list.narrative-panel{max-width:820px!important}

/* About Shangpai — compact interactive company timeline. */
.brand-proof{background:#03172a}
.brand-proof>.visual{inset:62px 0 0 44%;width:56%;height:calc(100% - 62px);object-position:center;opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 100%)}
.brand-proof .brand-proof-shade{background:linear-gradient(90deg,#03172a 0,#03172a 42%,rgba(3,23,42,.72) 49%,rgba(3,23,42,.2) 61%,rgba(3,23,42,.04) 72%)}
.brand-proof .brand-proof-copy{width:calc(48% - 52px);margin-left:52px;margin-right:0;padding-top:calc(18vh + 36px)!important}
.brand-proof h2{font-size:clamp(42px,3.7vw,62px);line-height:1.08}
.about-intro{margin:18px 0 0;font-size:14px;line-height:1.75;color:rgba(230,242,246,.72)}
.about-timeline{width:min(100%,720px);margin-top:18px;border-bottom:1px solid rgba(104,218,216,.22)}
.about-timeline article{display:grid;grid-template-columns:74px 1fr;gap:18px;min-height:58px;padding:13px 0;border-top:1px solid rgba(104,218,216,.22);cursor:pointer;opacity:.1;transition:opacity .6s ease,background-color .6s ease,padding .6s ease}
.about-timeline article:hover,.about-timeline article:focus,.about-timeline article.is-open{padding-left:12px;background:linear-gradient(90deg,rgba(40,186,180,.13),transparent);opacity:1;outline:0}
.about-timeline time{padding-top:2px;font-size:14px;font-weight:600;letter-spacing:.08em;color:#70ddd6}
.about-timeline b{display:block;font-size:17px;line-height:1.5;color:#fff}
.about-timeline p{max-height:0;margin:0;overflow:hidden;font-size:13px;line-height:1.7;color:rgba(230,242,246,.72);opacity:0;transform:translateY(-4px);transition:max-height .6s ease,margin .6s ease,opacity .5s ease,transform .6s ease}
.about-timeline article.is-open p{max-height:76px;margin-top:6px;opacity:1;transform:none}
@media(max-width:900px){.brand-proof>.visual{left:48%;width:52%}.brand-proof .brand-proof-copy{width:52%;margin-left:20px;padding-top:calc(17vh + 30px)!important}.brand-proof h2{font-size:44px}.about-timeline{margin-top:20px}.about-timeline article{grid-template-columns:62px 1fr;min-height:52px;padding:10px 0}}
@media(max-width:620px){.brand-proof>.visual{left:0;width:100%;opacity:.32}.brand-proof .brand-proof-shade{background:rgba(3,23,42,.78)}.brand-proof .brand-proof-copy{width:calc(100% - 40px);margin-inline:20px;padding-top:calc(12vh + 24px)!important}.brand-proof h2{font-size:36px}.about-intro{font-size:12px}.about-timeline article{grid-template-columns:52px 1fr}.about-timeline b{font-size:15px}.about-timeline p{font-size:11px}}

.about-profile{width:min(100%,720px);margin-top:28px;border-bottom:1px solid rgba(104,218,216,.22)}
.about-profile article{display:grid;grid-template-columns:96px 1fr;gap:22px;padding:17px 0;border-top:1px solid rgba(104,218,216,.22)}
.about-profile b{font-size:15px;line-height:1.7;color:#70ddd6}.about-profile p{margin:0;font-size:14px;line-height:1.75;color:rgba(232,243,247,.78)}
@media(max-width:620px){.about-profile{margin-top:20px}.about-profile article{grid-template-columns:76px 1fr;gap:12px;padding:12px 0}.about-profile b,.about-profile p{font-size:12px}}
/* Technology pages — locked layout revision. */
.motion .motion-copy{padding-top:28vh!important}
.motion .flow-path{left:52px!important;right:52px!important;bottom:122px!important;width:auto!important;margin:0!important;padding:20px 24px!important;border-radius:14px!important;background:rgba(3,10,17,.48)!important}
.motion .flow-track{display:grid!important;grid-template-columns:repeat(4,1fr)!important;margin:8px 0 18px!important}
.motion .flow-track i{justify-self:center!important}
.motion .flow-labels{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.motion .flow-labels span{width:100%;text-align:center!important}

.storage .storage-copy{width:640px!important;max-width:calc(100vw - 104px)!important;margin:0 0 0 52px!important;padding-top:19vh!important}
.storage .storage-capabilities{position:relative!important;inset:auto!important;width:640px!important;max-width:100%!important;margin:22px 0 0!important;padding:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;border-top:1px solid rgba(92,221,214,.38)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;background:rgba(2,15,28,.58)!important}
.storage .storage-capabilities article{min-height:82px!important;padding:14px 18px!important;border-right:1px solid rgba(255,255,255,.12)!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
.storage .storage-capabilities article:nth-child(2n){border-right:0!important}
.storage .storage-capabilities article:nth-last-child(-n+2){border-bottom:0!important}
.storage .storage-capabilities b{font-size:16px!important}
.storage .storage-capabilities span{margin-top:6px!important;font-size:13px!important}
.storage .storage-copy .intro{margin-top:18px!important}

.intelligence .intelligence-nodes{position:absolute!important;z-index:2!important;left:52px!important;right:52px!important;bottom:28px!important;width:auto!important;height:78px!important;margin:0!important;padding:0 26px!important;display:grid!important;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto!important;align-items:center!important;gap:18px!important}

@media(max-width:900px){
  .motion .flow-path{left:20px!important;right:20px!important;bottom:96px!important}
  .storage .storage-copy{width:560px!important;max-width:calc(100vw - 40px)!important;margin-left:20px!important;padding-top:17vh!important}
  .intelligence .intelligence-nodes{left:20px!important;right:20px!important;bottom:20px!important;padding:0 16px!important;gap:8px!important}
}
@media(max-width:560px){
  .motion .flow-path{padding:15px 10px!important}
  .storage .storage-copy{padding-top:15vh!important}
  .storage .storage-capabilities{margin-top:14px!important}
  .storage .storage-capabilities article{min-height:66px!important;padding:9px 11px!important}
  .storage .storage-copy .intro{margin-top:12px!important}
  .intelligence .intelligence-nodes{height:auto!important;min-height:68px!important;grid-template-columns:repeat(5,1fr)!important;gap:4px!important;padding:9px 8px!important}
  .intelligence .intelligence-nodes i{display:none!important}
}

/* Solution detail alignment and readable contrast. */
.scenario-industrial .intro,
.scenario-charging .intro{color:rgba(239,247,250,.9)!important}
.scenario-detail .section-action{
  left:52px!important;right:auto!important;bottom:62px!important;
  min-width:190px!important
}
.scenario-park .scenario-copy{
  padding-top:calc(var(--locked-title-top) - 34px)!important
}
.scenario-park .intro{
  max-width:720px!important;margin-top:18px!important;
  font-size:14px!important;line-height:1.7!important
}
.projects .featured-case i{transform:translateX(-34px)}

@media(max-width:900px){
  .scenario-detail .section-action{left:20px!important;bottom:54px!important}
  .scenario-park .scenario-copy{padding-top:calc(var(--locked-title-top) - 22px)!important}
  .projects .featured-case i{transform:translateX(-16px)}
}
@media(max-width:560px){
  .scenario-detail .section-action{left:20px!important;bottom:220px!important;min-width:160px!important}
  .scenario-park .intro{font-size:12px!important}
  .projects .featured-case i{transform:none}
}

/* Ecosystem pages — enlarged information bands anchored at the bottom. */
.values .values-grid,
.sustainability .sustainability-grid{
  position:absolute!important;z-index:3!important;left:52px!important;right:52px!important;
  bottom:26px!important;width:auto!important;margin:0!important
}
.values .values-grid article,
.sustainability .sustainability-grid article{
  min-height:126px!important;padding:25px 28px!important
}
.values .values-grid b,
.sustainability .sustainability-grid b{
  font-size:19px!important;line-height:1.4!important
}
.values .values-grid span,
.sustainability .sustainability-grid span{
  margin-top:12px!important;font-size:15px!important;line-height:1.65!important
}

@media(max-width:900px){
  .values .values-grid,.sustainability .sustainability-grid{left:20px!important;right:20px!important;bottom:18px!important}
  .values .values-grid article,.sustainability .sustainability-grid article{min-height:92px!important;padding:16px 18px!important}
  .values .values-grid b,.sustainability .sustainability-grid b{font-size:16px!important}
  .values .values-grid span,.sustainability .sustainability-grid span{margin-top:7px!important;font-size:13px!important}
}
@media(max-width:560px){
  .values .values-grid,.sustainability .sustainability-grid{bottom:10px!important}
  .values .values-grid article,.sustainability .sustainability-grid article{min-height:68px!important;padding:10px 12px!important}
  .values .values-grid b,.sustainability .sustainability-grid b{font-size:13px!important}
  .values .values-grid span,.sustainability .sustainability-grid span{font-size:10px!important;line-height:1.45!important}
}

/* Explore articles — enlarged cards anchored lower in the composition. */
.insights .insights-copy{padding-top:calc(var(--locked-title-top) + 20px)!important}
.insights .insights-grid{
  position:absolute!important;z-index:3!important;left:52px!important;right:auto!important;
  bottom:18px!important;width:min(1400px,calc(100vw - 104px))!important;margin:0!important;
  display:grid!important;grid-template-columns:repeat(3,1fr)!important
}
.insights .insights-grid a{min-height:176px!important;padding:28px 34px!important}
.insights .insights-grid span{font-size:13px!important}
.insights .insights-grid b{margin-top:14px!important;font-size:20px!important;line-height:1.45!important}
.insights .insights-grid i{margin-top:18px!important;font-size:13px!important}
@media(max-width:900px){
  .insights .insights-grid{left:20px!important;bottom:28px!important;width:calc(100vw - 40px)!important}
  .insights .insights-grid a{min-height:130px!important;padding:18px!important}
  .insights .insights-grid b{font-size:17px!important}
}
@media(max-width:560px){
  .insights .insights-copy{padding-top:18vh!important}
  .insights .insights-grid{bottom:12px!important;grid-template-columns:1fr!important}
  .insights .insights-grid a{min-height:72px!important;padding:10px 14px!important}
  .insights .insights-grid b{margin-top:5px!important;font-size:14px!important}
  .insights .insights-grid i{margin-top:5px!important;font-size:10px!important}
}