:root {
  --ink: #071a36;
  --muted: #657892;
  --blue: #0878f5;
  --deep: #020b18;
  --header-h: 76px;
  color-scheme: light;
  font-family: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); background: #f4f8fd; }
button, a { font: inherit; }
a { color: inherit; }
.shell { width: min(1440px, calc(100% - 64px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid #e3ebf5;
  backdrop-filter: blur(18px);
}
.header-inner { width: min(1440px, calc(100% - 64px)); height: 100%; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.brand { display: inline-flex; width: max-content; flex-direction: column; text-decoration: none; line-height: 1; }
.brand strong { font-size: 19px; font-weight: 760; letter-spacing: .01em; }
.brand span { margin-top: 7px; color: #8293aa; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.brand span i { display: inline-block; width: 1px; height: 9px; margin: 0 8px; background: #a6b5c7; vertical-align: -1px; }
.main-nav { display: flex; height: 100%; align-items: stretch; gap: 50px; }
.main-nav a { position: relative; display: grid; place-items: center; min-width: 68px; color: #18283f; text-decoration: none; font-size: 20px; font-weight: 750; letter-spacing: .02em; }
.main-nav a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--blue); transform: scaleX(0); }
.main-nav a.active { color: var(--blue); }
.main-nav a.active::after { transform: scaleX(1); }
.login-preview { justify-self: end; min-width: 88px; padding: 11px 25px; border: 0; border-radius: 999px; color: #8395aa; background: #e8f0fa; font-size: 15px; font-weight: 700; }

.living-vision { position: relative; height: 520vh; min-height: 3400px; background: var(--deep); }
.vision-sticky { position: sticky; top: var(--header-h); z-index: 2; height: calc(100vh - var(--header-h)); min-height: 600px; overflow: hidden; background: #020b18; }
.vision-stage { --vision-progress: 0; position: absolute; inset: 0; isolation: isolate; overflow: hidden; color: #fff; background: #020b18; }
.visual-layer { position: absolute; inset: -3%; margin: 0; opacity: 0; transition: opacity 1.15s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); }
.visual-layer img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.88) contrast(1.04); }
.earth-layer { opacity: 1; transform: scale(calc(1.03 + var(--vision-progress) * .035)) translate3d(calc(var(--vision-progress) * -1.5%),0,0); animation: earthBreath 16s ease-in-out infinite alternate; }
.earth-layer img { object-position: 50% 48%; }
.industry-layer { transform: scale(1.08) translate3d(2%,0,0); }
.human-layer { transform: scale(1.08) translate3d(-2%,0,0); }
[data-scene="foundation"] .earth-layer { opacity: .96; transform: scale(1.1) translate3d(-2%,0,0); }
[data-scene="industry"] .earth-layer, [data-scene="human"] .earth-layer { opacity: 0; }
[data-scene="industry"] .industry-layer { opacity: 1; transform: scale(1.02); }
[data-scene="human"] .industry-layer { opacity: .16; transform: scale(1.08) translate3d(-2%,0,0); }
[data-scene="human"] .human-layer { opacity: 1; transform: scale(1.02); }
[data-scene="global"] .earth-layer { opacity: 1; transform: scale(1.13) translate3d(0,-1%,0); }
[data-scene="global"] .industry-layer, [data-scene="global"] .human-layer { opacity: 0; }

.cinema-shade { position: absolute; z-index: 3; inset: 0; background: linear-gradient(90deg,rgba(1,8,20,.9),rgba(1,8,20,.6) 31%,rgba(1,8,20,.1) 60%,rgba(1,8,20,.36)), linear-gradient(180deg,rgba(0,8,20,.28),transparent 38%,rgba(0,7,18,.72)); transition: background 1.1s ease; }
[data-scene="foundation"] .cinema-shade, [data-scene="human"] .cinema-shade { background: linear-gradient(90deg,rgba(1,8,20,.28),rgba(1,8,20,.08) 44%,rgba(1,8,20,.8)), linear-gradient(180deg,rgba(0,8,20,.28),transparent 45%,rgba(0,7,18,.72)); }
[data-scene="industry"] .cinema-shade { background: linear-gradient(90deg,rgba(1,8,20,.78),rgba(1,8,20,.12) 58%,rgba(1,8,20,.35)), linear-gradient(180deg,rgba(0,8,20,.18),transparent 45%,rgba(0,7,18,.76)); }
[data-scene="global"] .cinema-shade { background: radial-gradient(circle at 62% 40%,transparent 0 20%,rgba(1,8,20,.32) 51%,rgba(1,8,20,.88) 100%), linear-gradient(180deg,rgba(0,8,20,.15),transparent 45%,rgba(0,7,18,.74)); }
.motion-depth { position: absolute; z-index: 2; inset: -30%; pointer-events: none; opacity: .42; }
.depth-one { background-image: radial-gradient(circle,rgba(129,198,255,.85) 0 1px,transparent 1.6px); background-size: 180px 180px; animation: starDrift 36s linear infinite; }
.depth-two { background-image: radial-gradient(circle,rgba(255,255,255,.6) 0 .7px,transparent 1.2px); background-size: 92px 92px; opacity: .2; animation: starDrift 58s linear infinite reverse; }
.scene-copy { position: absolute; z-index: 10; left: clamp(36px,7vw,142px); bottom: clamp(84px,14vh,154px); width: min(900px,58vw); text-shadow: 0 3px 28px rgba(0,0,0,.58); transition: left .9s ease,right .9s ease,width .9s ease,text-align .9s ease,transform .9s ease; }
.scene-copy[data-align="right"] { left: auto; right: clamp(36px,7vw,142px); text-align: right; }
.scene-copy[data-align="center"] { left: 50%; right: auto; bottom: 13vh; width: min(980px,82vw); text-align: center; transform: translateX(-50%); }
[data-scene="industry"] .scene-copy { top: clamp(120px,16vh,168px); bottom: auto; }
[data-scene="global"] .scene-copy[data-align="center"] { bottom: 7vh; }
.scene-kicker { margin-bottom: 20px; color: #88caff; font-size: 13px; font-weight: 750; letter-spacing: .24em; }
.scene-copy h1 { margin: 0; font-size: clamp(40px,4.4vw,72px); font-weight: 760; line-height: 1.08; letter-spacing: -.045em; }
.scene-copy p { width: min(620px,100%); margin: 26px 0 0; color: rgba(231,242,255,.83); font-size: clamp(16px,1.25vw,21px); line-height: 1.85; }
.scene-copy[data-align="right"] p { margin-left: auto; }
.scene-copy[data-align="center"] p { margin-inline: auto; }
.copy-enter { animation: copyEnter .72s cubic-bezier(.2,.75,.25,1) both; }
.scene-index { position: absolute; z-index: 10; top: 38px; right: clamp(32px,5vw,96px); display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.58); font-size: 12px; letter-spacing: .16em; }
.scene-index > i { display: block; width: 132px; height: 1px; background: rgba(255,255,255,.2); }
.scene-index b { display: block; width: 100%; height: 1px; background: #54b4ff; transform: scaleX(.03); transform-origin: left; }
.scroll-prompt { position: absolute; z-index: 10; left: 50%; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); color: rgba(255,255,255,.52); font-size: 9px; letter-spacing: .28em; transition: opacity .5s ease; }
.scroll-prompt i { width: 1px; height: 28px; background: linear-gradient(#78c6ff,transparent); animation: scrollPulse 1.7s ease-in-out infinite; }
[data-scene]:not([data-scene="origin"]) .scroll-prompt { opacity: 0; }

.capability-flow { position: absolute; z-index: 7; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.capability-flow > span { position: absolute; top: calc(27% + var(--row) * 12%); left: clamp(34px,6vw,118px); display: block; transform: translateX(-18%); opacity: 0; }
.capability-flow b { display: block; min-width: 150px; padding: 9px 14px; border: 1px solid rgba(131,202,255,.2); border-radius: 999px; color: rgba(233,246,255,.94); background: rgba(2,20,45,.34); box-shadow: 0 10px 30px rgba(0,18,44,.18); backdrop-filter: blur(6px); font-size: 16px; font-weight: 650; letter-spacing: .08em; text-align: center; }
.capability-flow i,.capability-flow em { display: none; }
[data-scene="foundation"] .capability-flow { opacity: 1; }
[data-scene="foundation"] .capability-flow > span { animation: flowIn 1.35s cubic-bezier(.2,.75,.25,1) var(--delay) forwards,flowFloat 6s ease-in-out calc(var(--delay) + 1.4s) infinite alternate; }

.industry-rise { position: absolute; z-index: 7; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.industry-rise > span { position: absolute; left: var(--x); bottom: 6%; width: auto; height: auto; opacity: 0; transform: translate(-50%,20px); }
.industry-rise i { display: none; }
.industry-rise b { display: block; min-height: 92px; padding: 13px 9px; border: 1px solid rgba(141,211,255,.22); border-radius: 18px; color: #fff; background: rgba(2,20,45,.34); box-shadow: 0 12px 32px rgba(0,15,38,.25); backdrop-filter: blur(7px); font-size: 15px; font-weight: 650; letter-spacing: .14em; line-height: 1; text-shadow: 0 2px 14px #001022; writing-mode: vertical-rl; text-orientation: upright; }
[data-scene="industry"] .industry-rise { opacity: 1; }
[data-scene="industry"] .industry-rise > span { animation: industryLabelIn .8s cubic-bezier(.2,.75,.25,1) var(--delay) forwards; }

.region-atlas { position: absolute; z-index: 8; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.region-atlas > span { position: absolute; left: var(--x); top: var(--y); display: grid; grid-template-columns: 11px auto; column-gap: 11px; opacity: 0; transform: translateY(12px); }
.region-atlas i { grid-row: 1 / span 2; align-self: center; width: 7px; height: 7px; border: 1px solid #bce8ff; border-radius: 50%; box-shadow: 0 0 19px rgba(72,181,255,.9); }
.region-atlas b { color: #fff; font-size: 15px; letter-spacing: .08em; }
.region-atlas small { margin-top: 3px; color: rgba(197,224,246,.68); font-size: 9px; letter-spacing: .17em; }
[data-scene="global"] .region-atlas { opacity: 1; }
[data-scene="global"] .region-atlas > span { animation: regionAppear .8s ease var(--delay) forwards; }

.vision-steps { position: absolute; inset: 0; z-index: 1; }
.vision-step { height: 104vh; min-height: 680px; pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: 15px; color: #7391b6; font-size: 11px; font-weight: 760; letter-spacing: .22em; }
.eyebrow span { width: 32px; height: 2px; background: var(--blue); }
.eyebrow.light { color: #8dcfff; }

.vision-statement { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(52px,9vw,150px); padding-block: clamp(110px,12vw,190px); border-bottom: 1px solid #dce7f3; }
.statement-lead h2 { margin: 32px 0 0; font-size: clamp(40px,4.25vw,68px); line-height: 1.14; letter-spacing: -.045em; }
.statement-copy { align-self: end; padding-bottom: 5px; }
.statement-copy p { margin: 0; color: #526a88; font-size: 18px; line-height: 2; }
.statement-copy p + p { margin-top: 26px; color: #7a8da5; }
.principles { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(60px,10vw,160px); padding-block: clamp(100px,11vw,170px); }
.principles-heading h2 { margin: 30px 0 0; font-size: clamp(40px,3.9vw,62px); line-height: 1.13; letter-spacing: -.045em; }
.principle-lines { border-top: 1px solid #cfddea; }
.principle-lines article { display: grid; grid-template-columns: 54px minmax(220px,.9fr) 1fr; align-items: center; gap: 26px; min-height: 126px; border-bottom: 1px solid #cfddea; transition: padding .35s ease,background .35s ease; }
.principle-lines article:hover { padding-inline: 18px; background: rgba(255,255,255,.62); }
.principle-lines > article > span { color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: .12em; }
.principle-lines small { color: #8ca0b8; font-size: 9px; letter-spacing: .16em; }
.principle-lines h3 { margin: 7px 0 0; font-size: 22px; }
.principle-lines p { margin: 0; color: #657b95; font-size: 16px; line-height: 1.75; }

.closing { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; min-height: 540px; margin-bottom: 70px; padding: clamp(60px,7vw,108px); overflow: hidden; color: #fff; border-radius: 34px; background: linear-gradient(118deg,#03152f 0%,#082d61 72%,#1056a3 135%); box-shadow: 0 24px 60px rgba(9,45,94,.18); }
.closing-glow { position: absolute; right: -11%; top: -54%; width: 620px; height: 620px; border: 1px solid rgba(120,200,255,.16); border-radius: 50%; box-shadow: 0 0 0 80px rgba(73,164,244,.04),0 0 0 170px rgba(73,164,244,.025); animation: closingOrbit 10s ease-in-out infinite alternate; }
.closing-copy-main,.closing-contact { position: relative; z-index: 1; }
.closing-copy-main h2 { margin: 30px 0 0; font-size: clamp(42px,4.1vw,68px); line-height: 1.11; letter-spacing: -.05em; }
.closing-contact { align-self: center; }
.closing-contact > p { margin: 0 0 52px; color: rgba(230,242,255,.82); font-size: 18px; line-height: 1.95; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.contact-row span { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); color: #94b9df; font-size: 13px; line-height: 1.8; }
.contact-row strong { color: #fff; font-size: 16px; }
footer { display: flex; justify-content: center; align-items: center; gap: 13px; min-height: 86px; color: #8093aa; background: #fff; font-size: 11px; letter-spacing: .12em; }
footer i { width: 1px; height: 12px; background: #ccd7e3; }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s ease,transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }

@keyframes earthBreath { from { filter: brightness(.94); } to { filter: brightness(1.06); } }
@keyframes starDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(9%,5%,0); } }
@keyframes copyEnter { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes scrollPulse { 0%,100% { opacity: .25; transform: scaleY(.45); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes flowIn { from { opacity: 0; transform: translateX(-20%); } to { opacity: 1; transform: translateX(0); } }
@keyframes flowFloat { from { transform: translateX(0); } to { transform: translateX(3%); } }
@keyframes industryLabelIn { from { transform: translate(-50%,20px); opacity: 0; } to { transform: translate(-50%,0); opacity: 1; } }
@keyframes regionAppear { to { opacity: 1; transform: translateY(0); } }
@keyframes closingOrbit { from { transform: translate3d(0,0,0) scale(.96); } to { transform: translate3d(-22px,18px,0) scale(1.04); } }

@media (max-width: 1100px) {
  :root { --header-h: 68px; }
  .header-inner,.shell { width: min(100% - 36px,960px); }
  .brand strong { font-size: 16px; }
  .brand span { font-size: 7px; }
  .main-nav { gap: 24px; }
  .main-nav a { font-size: 14px; }
  .login-preview { min-width: 72px; padding-inline: 18px; }
  .vision-sticky { min-height: 520px; }
  .scene-copy { width: min(760px,61vw); }
  .capability-flow b { width: 140px; font-size: 14px; }
  .vision-statement,.principles { gap: 58px; }
  .principle-lines article { grid-template-columns: 38px 1fr; gap: 18px; padding-block: 20px; }
  .principle-lines article p { grid-column: 2; }
  .closing { gap: 48px; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .header-inner { width: calc(100% - 28px); grid-template-columns: 1fr auto; gap: 12px; }
  .brand strong { font-size: 15px; }
  .brand span,.login-preview { display: none; }
  .main-nav { gap: 8px; overflow-x: auto; justify-self: end; }
  .main-nav a { min-width: auto; padding-inline: 7px; font-size: 12px; white-space: nowrap; }
  .living-vision { height: auto; min-height: 0; }
  .vision-sticky { position: relative; top: 0; height: auto; min-height: 0; overflow: visible; }
  .vision-stage { position: relative; min-height: 720px; }
  .vision-steps { display: none; }
  .earth-layer { inset: 0; animation: none; }
  .earth-layer img { object-position: 62% 50%; }
  .industry-layer,.human-layer { display: none; }
  .cinema-shade { background: linear-gradient(180deg,rgba(1,8,20,.12),rgba(1,8,20,.18) 33%,rgba(1,8,20,.93) 72%); }
  .scene-copy,.scene-copy[data-align="right"],.scene-copy[data-align="center"] { left: 24px; right: 24px; bottom: 68px; width: auto; text-align: left; transform: none; }
  .scene-kicker { font-size: 10px; }
  .scene-copy h1 { font-size: clamp(38px,11vw,54px); }
  .scene-copy p { font-size: 16px; line-height: 1.7; }
  .scene-index { top: 24px; right: 24px; }
  .scene-index > i { width: 72px; }
  .scroll-prompt,.capability-flow,.industry-rise,.region-atlas { display: none; }
  .vision-statement,.principles { grid-template-columns: 1fr; gap: 48px; padding-block: 88px; }
  .statement-copy p { font-size: 16px; }
  .principle-lines article { grid-template-columns: 36px 1fr; }
  .closing { grid-template-columns: 1fr; gap: 54px; width: calc(100% - 28px); margin-bottom: 22px; padding: 54px 24px; border-radius: 24px; }
  .closing-copy-main h2 { font-size: 42px; }
  .closing-contact > p { font-size: 16px; }
  .contact-row { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .capability-flow > span { opacity: 1; transform: none; }
  .industry-rise > span { opacity: 1; transform: translate(-50%,0); }
  .region-atlas > span { opacity: 1; transform: none; }
}

footer a { color: inherit; text-decoration: none; }