:root { --signal: #d9f451; }
.immersive-hero { position: relative; min-height: min(940px, 100svh); display: flex; align-items: flex-end; overflow: hidden; background: #070a08; isolation: isolate; }
.immersive-hero-photo, .immersive-hero-photo::after, .immersive-hero-grid, .immersive-hero-vignette { position: absolute; inset: 0; }
.immersive-hero-photo { z-index: -3; }
.immersive-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 58%; filter: saturate(.72) contrast(1.1) brightness(.68); transform: scale(1.018); }
.immersive-hero-photo::after { content: ''; background: linear-gradient(90deg, rgba(4,6,5,.97) 0%, rgba(4,6,5,.79) 34%, rgba(4,6,5,.22) 68%, rgba(4,6,5,.3)), linear-gradient(0deg, rgba(4,6,5,.92), transparent 52%, rgba(4,6,5,.31)); }
.immersive-hero-grid { z-index: -2; opacity: .28; background-image: linear-gradient(rgba(217,244,81,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(217,244,81,.06) 1px, transparent 1px); background-size: 84px 84px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 42%, transparent); }
.immersive-hero-vignette { z-index: -1; background: radial-gradient(ellipse at 71% 53%, transparent 18%, rgba(4,6,5,.58) 82%); }
.immersive-hero-copy { width: 100%; padding: 185px 0 142px; }
.immersive-hero-copy h1 { max-width: 850px; margin: 16px 0 24px; font-size: clamp(48px, 5.8vw, 96px); line-height: .93; letter-spacing: -.08em; }
.immersive-hero-copy p { max-width: 500px; margin: 0; color: #bdc7c0; font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 31px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: #e1e8e3; font-size: 13px; font-weight: 700; }
.text-link span { color: var(--signal); font-size: 18px; transition: transform .2s; }.text-link:hover span { transform: translate(3px, 3px); }
.immersive-hero-proof { position: absolute; z-index: 2; right: 42px; bottom: 32px; display: flex; gap: 30px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.2); color: #dae2dd; }
.immersive-hero-proof span { display: flex; gap: 10px; align-items: center; font-size: 11px; white-space: nowrap; }.immersive-hero-proof b { color: var(--signal); font: 800 11px/1 ui-monospace, monospace; }.immersive-hero-proof i { font-style: normal; }
.hero-corner-note { position: absolute; z-index: 2; top: 106px; right: 42px; display: flex; align-items: center; gap: 9px; color: #d4ddd6; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; }.hero-corner-note .live { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(217,244,81,.11); }
.demo-heading h2, .flow-heading h2, .roles-intro h2, .delivery-layout h2, .case-heading h2 { margin: 16px 0 0; font-size: clamp(40px, 4.6vw, 76px); line-height: .98; letter-spacing: -.07em; }.demo-heading p, .case-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.interaction-demo { padding: 126px 0 0; background: #080b09; }.demo-heading { display: grid; grid-template-columns: 1fr .5fr; gap: 65px; align-items: end; margin-bottom: 60px; }.demo-machine { position: relative; overflow: hidden; min-height: 730px; border-top: 1px solid rgba(255,255,255,.17); background: radial-gradient(ellipse at 50% 47%, #24382b 0%, #111a15 42%, #080b09 78%); }.demo-machine::before { content: ''; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }.demo-machine-topbar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(4,7,5,.37); color: #c6d0c9; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .1em; }.demo-machine-topbar small { margin-left: auto; color: #85918a; }.demo-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(217,244,81,.11); }
.demo-screen-wall { position: absolute; z-index: 2; top: 107px; left: 7%; right: 7%; display: grid; grid-template-columns: 1fr 1.48fr 1fr; height: 294px; transform: perspective(1100px) rotateX(5deg); transform-origin: center top; }.demo-screen { position: relative; overflow: hidden; padding: 20px; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(145deg, rgba(26,46,34,.94), rgba(7,12,9,.95)); }.demo-screen-left { transform: perspective(900px) rotateY(11deg); transform-origin: right; }.demo-screen-right { transform: perspective(900px) rotateY(-11deg); transform-origin: left; }.screen-label { position: absolute; top: 17px; left: 18px; color: #8f9e95; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .14em; }.screen-kicker { margin-top: 40px; color: var(--signal); font: 700 9px/1 ui-monospace, monospace; letter-spacing: .1em; }.demo-screen h3 { max-width: 200px; margin: 18px 0 11px; font-size: clamp(20px, 2.1vw, 31px); line-height: 1; letter-spacing: -.05em; }.demo-screen p { max-width: 230px; margin: 0; color: #b2c0b8; font-size: 11px; line-height: 1.55; }.screen-rule { position: absolute; left: 20px; right: 20px; bottom: 40px; height: 1px; background: rgba(255,255,255,.17); }.screen-page { position: absolute; left: 20px; bottom: 19px; color: #809088; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .12em; }.demo-center { display: grid; place-items: center; padding: 0; background: radial-gradient(circle at 50% 45%, rgba(154,207,108,.28), transparent 28%), linear-gradient(#15251c, #07110b); }.center-halo { position: absolute; width: 230px; height: 230px; border: 1px solid rgba(217,244,81,.35); border-radius: 50%; box-shadow: 0 0 0 26px rgba(217,244,81,.035), 0 0 90px rgba(217,244,81,.13); animation: haloBreathe 4s ease-in-out infinite; }.demo-car, .table-car { position: relative; width: 195px; height: 78px; border: 2px solid #d8e6dd; border-radius: 52% 45% 23% 27% / 58% 54% 31% 26%; background: linear-gradient(155deg, #d7ebe0, #719a81 42%, #294837 43%, #101c15 73%); box-shadow: inset 18px 10px 19px rgba(255,255,255,.4), 0 20px 28px rgba(0,0,0,.42); transform: perspective(500px) rotateX(12deg) rotateZ(-4deg); transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s; }.demo-car::before, .table-car::before { content: ''; position: absolute; left: 41px; top: -28px; width: 101px; height: 42px; border: 2px solid #b9cfbf; border-bottom: 0; border-radius: 54% 53% 0 0; background: linear-gradient(135deg, rgba(189,240,226,.82), rgba(57,93,84,.82)); transform: skewX(-12deg); }.demo-car i, .table-car i { position: absolute; z-index: 2; bottom: -14px; width: 31px; height: 31px; border: 5px solid #0c100e; border-radius: 50%; background: #829c89; box-shadow: inset 0 0 0 5px #252f29; }.demo-car i:nth-child(1), .table-car i:nth-child(1) { left: 26px; }.demo-car i:nth-child(2), .table-car i:nth-child(2) { right: 24px; }.demo-car i:nth-child(n+3), .table-car i:nth-child(n+3) { display: none; }.demo-car b, .table-car b { position: absolute; right: 8px; top: 20px; width: 20px; height: 7px; border-radius: 5px; background: var(--signal); box-shadow: 0 0 12px var(--signal); }.center-caption { position: absolute; left: 0; right: 0; bottom: 25px; color: #dce6df; font-size: 11px; text-align: center; letter-spacing: .1em; }.demo-right { background: radial-gradient(circle at 58% 40%, rgba(70,125,128,.46), transparent 35%), linear-gradient(145deg, #17312d, #07120e); }.component-orbit { position: absolute; top: 28px; right: 17px; width: 100px; height: 100px; border: 1px solid rgba(217,244,81,.35); border-radius: 50%; animation: orbit 8s linear infinite; }.component-orbit::before, .component-orbit::after { content: ''; position: absolute; border-radius: 50%; background: var(--signal); box-shadow: 0 0 13px var(--signal); }.component-orbit::before { width: 9px; height: 9px; top: 17px; right: 6px; }.component-orbit::after { width: 6px; height: 6px; bottom: 7px; left: 19px; }.component-orbit i { position: absolute; left: 30px; top: 30px; width: 36px; height: 36px; border: 3px solid #e3f1e9; border-radius: 6px; background: linear-gradient(135deg,#758f84,#1d392b); box-shadow: 0 0 30px rgba(217,244,81,.24); }.component-orbit b { position: absolute; top: 42px; left: 45px; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }.ai-marker { position: absolute; top: 28px; left: 20px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--signal); border-radius: 50%; color: var(--signal); font: 800 9px/1 ui-monospace, monospace; }.demo-right h3 { margin-top: 136px; }.location-chip { position: absolute; left: 20px; bottom: 19px; color: var(--signal); font: 700 9px/1 ui-monospace, monospace; letter-spacing: .08em; }
.demo-table-zone { position: absolute; z-index: 2; left: 50%; bottom: 80px; width: min(440px, 45vw); height: 210px; transform: translateX(-50%); }.table-top { position: absolute; inset: 0 0 22px; overflow: hidden; border: 1px solid rgba(217,244,81,.3); border-radius: 50% 50% 13% 13%; background: radial-gradient(ellipse at 53% 44%, rgba(131,174,136,.31), transparent 34%), linear-gradient(160deg, #172c20, #0c1710); transform: perspective(650px) rotateX(59deg); transform-origin: bottom; box-shadow: 0 35px 50px rgba(0,0,0,.5); }.table-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(217,244,81,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(217,244,81,.15) 1px, transparent 1px); background-size: 22px 22px; }.table-car { position: absolute; left: 50%; top: 43%; width: 130px; height: 54px; transform: translate(-50%,-50%) scale(.67) rotateZ(-7deg); }.table-label { position: absolute; left: 20px; bottom: 14px; color: #c5d1c9; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .13em; }.gesture-ring { position: absolute; left: 50%; top: 46%; width: 164px; height: 66px; border: 1px dashed rgba(217,244,81,.66); border-radius: 50%; transform: translate(-50%,-50%); animation: ring 6s linear infinite; }.sample-dock { position: absolute; right: -165px; bottom: 1px; width: 128px; height: 117px; cursor: pointer; }.sample-sensor { position: absolute; left: 10px; right: 10px; bottom: 0; height: 55px; border: 1px solid rgba(255,255,255,.24); border-radius: 9px 9px 2px 2px; background: linear-gradient(#26352c,#0c120e); box-shadow: 0 25px 30px rgba(0,0,0,.4); }.sample-part { position: absolute; left: 37px; top: 3px; width: 52px; height: 62px; border-radius: 10px; background: linear-gradient(135deg,#c2d2c7,#4c6b58 45%,#111c15); transform: rotate(-20deg); box-shadow: 0 13px 20px rgba(0,0,0,.45); transition: transform .45s, box-shadow .45s; }.sample-part i { position: absolute; right: -19px; top: 22px; width: 25px; height: 13px; border-radius: 3px; background: #b5c6b9; }.sample-part b { position: absolute; left: 11px; top: 13px; width: 18px; height: 18px; border: 2px solid #1b2d21; border-radius: 50%; }.sample-label { position: absolute; z-index: 1; left: 50%; bottom: -24px; width: 160px; color: #93a098; font: 700 8px/1 ui-monospace, monospace; text-align: center; letter-spacing: .1em; transform: translateX(-50%); }
.demo-mode-picker { position: absolute; z-index: 3; left: 28px; bottom: 30px; display: flex; gap: 5px; }.demo-mode-picker button { min-width: 124px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.17); background: rgba(6,10,7,.58); color: #aab6ae; cursor: pointer; text-align: left; transition: .22s; }.demo-mode-picker button:hover, .demo-mode-picker button.active { border-color: rgba(217,244,81,.65); background: rgba(217,244,81,.11); color: #eff8e8; }.demo-mode-picker b { display: block; margin-bottom: 6px; color: var(--signal); font: 700 9px/1 ui-monospace,monospace; }.demo-mode-picker span { font-size: 11px; font-weight: 700; }
.demo-machine[data-demo-mode="sample"] .sample-part { transform: translateY(-38px) rotate(17deg); box-shadow: 0 21px 28px rgba(217,244,81,.24); }.demo-machine[data-demo-mode="sample"] .demo-car { filter: drop-shadow(0 0 16px rgba(217,244,81,.48)); transform: perspective(500px) rotateX(12deg) rotateZ(3deg) scale(1.1); }.demo-machine[data-demo-mode="sample"] .component-orbit { border-color: var(--signal); box-shadow: 0 0 26px rgba(217,244,81,.35); }.demo-machine[data-demo-mode="guide"] .demo-screen-left, .demo-machine[data-demo-mode="guide"] .demo-screen-right { background: linear-gradient(145deg, rgba(25,52,39,.98), rgba(6,13,9,.98)); }.demo-machine[data-demo-mode="guide"] .center-halo { border-style: dashed; animation-duration: 1.8s; }.demo-machine[data-demo-mode="guide"] .demo-car { transform: perspective(500px) rotateX(12deg) rotateZ(1deg) scale(1.08); }
.immersive-flow { padding: 142px 0; background: #101713; }.flow-heading { display: flex; justify-content: space-between; align-items: end; }.flow-list { display: grid; grid-template-columns: repeat(4,1fr); margin: 74px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.flow-list li { min-height: 283px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.flow-list b { color: var(--signal); font: 800 11px/1 ui-monospace,monospace; }.flow-list div { margin-top: 112px; }.flow-list strong { display: block; font-size: 22px; letter-spacing: -.04em; }.flow-list p { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.content-roles { padding: 145px 0; background: #090c0b; }.roles-intro { display: flex; align-items: end; justify-content: space-between; }.roles-list { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 74px; }.roles-list article { min-height: 365px; padding: 31px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.roles-list article + article { border-left: 1px solid var(--line); }.roles-list span { color: var(--signal); font: 800 10px/1 ui-monospace,monospace; letter-spacing: .12em; }.roles-list h3 { margin: 145px 0 12px; font-size: clamp(26px, 2.8vw, 43px); line-height: 1; letter-spacing: -.06em; }.roles-list p { max-width: 350px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.delivery-scope { padding: 136px 0; background: #d9f451; color: #11160d; }.delivery-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 90px; }.delivery-layout .eyebrow { color: #44510b; }.delivery-list { border-top: 1px solid rgba(16,22,13,.33); }.delivery-list > div { display: grid; grid-template-columns: 48px 1fr; gap: 13px; padding: 20px 0; border-bottom: 1px solid rgba(16,22,13,.33); }.delivery-list b { font: 800 11px/1 ui-monospace,monospace; }.delivery-list strong { display: block; font-size: 17px; letter-spacing: -.03em; }.delivery-list small { display: block; max-width: 430px; margin-top: 7px; color: rgba(16,22,13,.65); font-size: 12px; line-height: 1.55; }
.case-industry { padding: 140px 0; background: #0d1210; }.case-heading { display: grid; grid-template-columns: 1fr .5fr; gap: 65px; align-items: end; }.case-gallery { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; margin-top: 78px; }.case-gallery figure { position: relative; min-height: 370px; margin: 0; overflow: hidden; background: #17201b; }.case-gallery .case-large { grid-row: span 1; }.case-gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.08) brightness(.76); transition: transform .7s ease, filter .5s ease; }.case-gallery figure:hover img { transform: scale(1.04); filter: saturate(.92) contrast(1.05) brightness(.86); }.case-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 64px 20px 19px; background: linear-gradient(transparent, rgba(5,8,6,.9)); }.case-gallery figcaption span { color: var(--signal); font: 800 9px/1 ui-monospace,monospace; letter-spacing: .13em; }.case-gallery figcaption strong { max-width: 270px; font-size: 15px; line-height: 1.25; }.industry-rail { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 48px; border-top: 1px solid var(--line); }.industry-rail span { min-height: 185px; padding: 21px 20px; border-bottom: 1px solid var(--line); }.industry-rail span + span { border-left: 1px solid var(--line); }.industry-rail b { color: var(--signal); font: 800 10px/1 ui-monospace,monospace; }.industry-rail strong { display: block; margin-top: 62px; font-size: 17px; letter-spacing: -.035em; }.industry-rail small { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.6; }
@keyframes haloBreathe { 50% { transform: scale(1.12); opacity: .55; } } @keyframes orbit { to { transform: rotate(360deg); } } @keyframes ring { to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (max-width: 1050px) { .immersive-hero-proof { left: 32px; right: 32px; justify-content: space-between; gap: 10px; }.demo-heading, .case-heading { grid-template-columns: 1fr .7fr; gap: 38px; }.demo-screen-wall { left: 3%; right: 3%; }.sample-dock { right: -132px; }.demo-mode-picker { left: 20px; }.delivery-layout { gap: 54px; }.case-gallery figure { min-height: 305px; } }
@media (max-width: 700px) { .immersive-hero { min-height: 780px; align-items: flex-start; }.immersive-hero-photo img { object-position: 57% center; filter: saturate(.62) contrast(1.06) brightness(.48); }.immersive-hero-photo::after { background: linear-gradient(180deg, rgba(4,6,5,.9) 0%, rgba(4,6,5,.56) 43%, rgba(4,6,5,.96) 100%); }.immersive-hero-copy { padding: 130px 0 0; }.immersive-hero-copy h1 { font-size: clamp(44px, 12.5vw, 65px); }.immersive-hero-copy p { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }.hero-corner-note { top: auto; bottom: 144px; left: 16px; right: auto; }.immersive-hero-proof { right: 16px; bottom: 25px; left: 16px; display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 11px; }.demo-heading, .case-heading, .delivery-layout { grid-template-columns: 1fr; gap: 25px; }.interaction-demo, .immersive-flow, .content-roles, .delivery-scope, .case-industry { padding: 86px 0; }.demo-heading { margin-bottom: 35px; }.demo-machine { min-height: 760px; margin: 0 -16px; }.demo-machine-topbar { font-size: 8px; }.demo-machine-topbar small { display: none; }.demo-screen-wall { top: 83px; height: 245px; left: 9px; right: 9px; grid-template-columns: 1fr 1.35fr 1fr; }.demo-screen { padding: 10px; }.screen-label { top: 10px; left: 10px; font-size: 6px; }.screen-kicker { margin-top: 28px; font-size: 6px; }.demo-screen h3 { margin: 12px 0 7px; font-size: 15px; }.demo-screen p { font-size: 8px; line-height: 1.45; }.screen-rule { left: 10px; right: 10px; bottom: 27px; }.screen-page { left: 10px; bottom: 12px; font-size: 7px; }.center-halo { width: 140px; height: 140px; }.demo-car { width: 122px; height: 50px; transform: perspective(500px) rotateX(12deg) rotateZ(-4deg) scale(.73); }.center-caption { bottom: 16px; padding: 0 10px; font-size: 8px; }.component-orbit { top: 23px; right: 7px; transform: scale(.69); transform-origin: top right; }.ai-marker { top: 11px; left: 10px; transform: scale(.72); transform-origin: top left; }.demo-right h3 { margin-top: 117px; }.location-chip { left: 10px; bottom: 12px; font-size: 7px; }.demo-table-zone { bottom: 174px; width: 300px; height: 150px; }.table-top { transform: perspective(650px) rotateX(58deg) scale(.8); }.sample-dock { right: -12px; bottom: -92px; transform: scale(.74); transform-origin: right bottom; }.demo-mode-picker { right: 14px; bottom: 26px; left: 14px; display: grid; grid-template-columns: repeat(3, 1fr); }.demo-mode-picker button { min-width: 0; padding: 10px; }.demo-mode-picker span { font-size: 10px; }.flow-heading, .roles-intro { display: block; }.flow-list, .roles-list, .industry-rail { grid-template-columns: 1fr; margin-top: 48px; }.flow-list li { min-height: 190px; }.flow-list div { margin-top: 55px; }.roles-list article { min-height: 250px; }.roles-list article + article, .industry-rail span + span { border-left: 0; }.roles-list h3 { margin-top: 70px; }.case-gallery { grid-template-columns: 1fr; margin-top: 45px; }.case-gallery figure { min-height: 290px; }.industry-rail span { min-height: 145px; }.industry-rail strong { margin-top: 38px; }.delivery-list > div { grid-template-columns: 36px 1fr; } }

/* Real delivered-space orchestration preview. */
body .demo-machine{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,.74fr);min-height:720px;background:#080c09;border-top:1px solid rgba(255,255,255,.17)}
body .demo-machine::before{display:none}
body .demo-machine-topbar{position:relative;inset:auto;grid-column:1/-1;min-height:49px;background:#0b100d}
.demo-real-scene{position:relative;min-height:670px;overflow:hidden;background:#111713}
.demo-real-scene>img{width:100%;height:100%;object-fit:cover;object-position:center 52%;filter:saturate(.7) contrast(1.08) brightness(.62);transition:opacity .28s,filter .35s,transform 1.2s}
.demo-scene-grade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,7,5,.88) 0%,transparent 37%),linear-gradient(90deg,rgba(4,7,5,.22),transparent 48%,rgba(4,7,5,.24));pointer-events:none}
.screen-anchor{position:absolute;top:27%;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(217,244,81,.48);background:rgba(5,9,6,.78);box-shadow:0 8px 28px rgba(0,0,0,.27);color:#edf4ef;font-size:9px;white-space:nowrap;backdrop-filter:blur(8px)}.screen-anchor b{color:var(--signal);font:800 9px/1 Consolas,monospace}.screen-anchor i{font-style:normal;font-weight:750}.screen-anchor::after{content:'';position:absolute;top:100%;left:50%;width:1px;height:54px;background:linear-gradient(var(--signal),transparent)}.screen-anchor-left{left:8%}.screen-anchor-center{left:43%}.screen-anchor-right{right:5%}
.input-event{position:absolute;right:282px;bottom:19px;left:18px;max-width:570px;padding:16px 18px;border-left:2px solid var(--signal);background:rgba(5,9,7,.88);backdrop-filter:blur(12px)}.input-event>span{display:flex;align-items:center;gap:8px}.input-event .event-pulse{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 6px rgba(217,244,81,.1)}.input-event span b,.input-event span small{font:800 9px/1 Consolas,monospace;letter-spacing:.08em}.input-event span b{color:var(--signal)}.input-event span small{color:#849087}.input-event strong{display:block;margin-top:11px;font-size:17px;letter-spacing:-.03em}.input-event p{margin:5px 0 0;color:#abb7af;font-size:11px;line-height:1.55}
.physical-sample{position:absolute;right:18px;bottom:19px;display:grid;grid-template-columns:62px 1fr;width:245px;padding:0;border:1px solid rgba(255,255,255,.22);background:rgba(5,9,7,.9);color:#eef4f0;text-align:left;cursor:pointer;overflow:hidden;transition:.25s}.physical-sample:hover{border-color:var(--signal);transform:translateY(-3px)}.physical-sample img{width:62px;height:64px;object-fit:cover;object-position:50% 68%;filter:saturate(.72) contrast(1.1)}.physical-sample span{display:flex;flex-direction:column;justify-content:center;padding:8px 10px}.physical-sample b{font-size:10px}.physical-sample small{margin-top:5px;color:var(--signal);font:700 7px/1 Consolas,monospace;letter-spacing:.06em}
.demo-machine[data-demo-mode="sample"] .physical-sample{border-color:var(--signal);box-shadow:0 0 0 1px rgba(217,244,81,.2),0 0 34px rgba(217,244,81,.19)}.demo-machine[data-demo-mode="sample"] .demo-real-scene>img{filter:saturate(.8) contrast(1.08) brightness(.69);transform:scale(1.018)}.demo-machine[data-demo-mode="guide"] .screen-anchor{box-shadow:0 0 28px rgba(217,244,81,.18)}
.demo-orchestrator{display:flex;flex-direction:column;min-width:0;padding:22px 22px 18px;border-left:1px solid rgba(255,255,255,.14);background:linear-gradient(155deg,#121a15,#080c09)}
.orchestrator-head,.output-status{display:flex;align-items:center;justify-content:space-between}.orchestrator-head span,.output-status span{font-size:10px;font-weight:800;letter-spacing:.06em}.orchestrator-head b,.output-status small{color:var(--signal);font:800 8px/1 Consolas,monospace;letter-spacing:.08em}
.signal-pipeline{display:grid;grid-template-columns:1fr 18px 1fr 18px 1fr;align-items:center;margin:20px 0 26px}.signal-pipeline span{display:grid;justify-items:center;gap:6px;color:#93a098}.signal-pipeline b{display:grid;width:24px;height:24px;place-items:center;border:1px solid rgba(217,244,81,.6);border-radius:50%;color:var(--signal);font:800 8px/1 Consolas,monospace}.signal-pipeline i{font-size:8px;font-style:normal;font-weight:750}.signal-pipeline em{height:1px;background:linear-gradient(90deg,var(--signal),rgba(217,244,81,.15));animation:signalFlow 1.5s ease-in-out infinite}
.output-status{padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.14)}.screen-output{display:grid;gap:0}.screen-output article{position:relative;min-height:124px;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.12)}.screen-output article>span{color:#77847c;font:700 8px/1 Consolas,monospace;letter-spacing:.12em}.screen-output article>div{margin-top:9px;color:var(--signal);font:700 8px/1 Consolas,monospace}.screen-output h3{margin:8px 0 5px;font-size:16px;line-height:1.05;letter-spacing:-.035em}.screen-output p{max-width:310px;margin:0;color:#9eaaa3;font-size:9px;line-height:1.5}.screen-output article>small{position:absolute;right:2px;bottom:13px;color:#748078;font:700 7px/1 Consolas,monospace;letter-spacing:.06em}.sync-meter{height:2px!important;margin-top:16px!important;background:#28332d}.sync-meter i{display:block;width:78%;height:100%;background:var(--signal);box-shadow:0 0 9px rgba(217,244,81,.5);animation:syncMeter 1.8s ease-in-out infinite}
body .demo-mode-picker{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:auto;padding-top:17px}body .demo-mode-picker button{min-width:0;padding:10px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.2)}
@keyframes signalFlow{50%{opacity:.35}}@keyframes syncMeter{50%{width:96%}}
@media(max-width:1050px){body .demo-machine{grid-template-columns:1.25fr .75fr}.physical-sample{width:205px;grid-template-columns:52px 1fr}.physical-sample img{width:52px}.screen-anchor{font-size:8px}.input-event{right:238px;max-width:440px}.input-event p{max-width:370px}}
@media(max-width:700px){body .demo-machine{display:block;min-height:0;margin:0 -16px}.demo-real-scene{min-height:510px}.demo-real-scene>img{position:absolute;inset:0}.screen-anchor{top:24%;padding:5px 6px}.screen-anchor i{display:none}.screen-anchor-left{left:4%}.screen-anchor-center{left:42%}.screen-anchor-right{right:3%}.screen-anchor::after{height:35px}.input-event{right:12px;bottom:96px;left:12px;padding:13px}.input-event strong{font-size:14px}.input-event p{font-size:9px}.physical-sample{right:12px;bottom:16px;width:220px}.demo-orchestrator{padding:20px 16px;border-top:1px solid rgba(255,255,255,.14);border-left:0}.screen-output article{min-height:115px}.demo-mode-picker{position:sticky!important;bottom:0;z-index:5;background:#090d0a}}


/* Layout refinement: align the immersive hero with the site grid and keep Chinese copy readable. */
.immersive-hero-copy { width: min(var(--max), calc(100% - 64px)); padding: 168px 0 132px; }
.immersive-hero-copy h1 { max-width: 1160px; margin: 18px 0 26px; font-size: clamp(46px, 4.75vw, 68px); line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; }
.immersive-hero-copy p { max-width: 600px; font-size: 17px; line-height: 1.75; }
.immersive-hero-proof { right: max(32px, calc((100% - var(--max)) / 2)); bottom: 30px; gap: 26px; }
.immersive-hero-proof span { font-size: 12px; }
.hero-corner-note { right: max(32px, calc((100% - var(--max)) / 2)); }
@media (max-width: 700px) {
  .immersive-hero-copy { width: calc(100% - 32px); padding: 124px 0 0; }
  .immersive-hero-copy h1 { max-width: 100%; margin-top: 14px; font-size: clamp(39px, 11vw, 58px); line-height: 1.07; letter-spacing: -.05em; }
  .immersive-hero-copy p { max-width: 35rem; font-size: 15px; line-height: 1.72; }
  .immersive-hero-proof { right: 16px; left: 16px; }
  .hero-corner-note { right: auto; }
}