.sis-hero{max-width:none;background:var(--sis-dark-blue);color:#fff;padding:72px max(40px,calc((100vw - 1224px)/2)) 64px;grid-template-columns:1.02fr 1fr;gap:48px;min-height:690px;position:relative}
.sis-hero h1{font-size:clamp(46px,5.2vw,76px);line-height:1.07;letter-spacing:-.025em;font-weight:600;max-width:660px}
.sis-hero .intro{color:var(--sis-light-blue);text-transform:none;letter-spacing:.02em}
.sis-hero .lede{color:#dce6ee;font-size:20px;max-width:490px}
.sis-hero .hero-note{font-size:14px;color:#b8cad8;margin:20px 0 0}
.experience{min-width:0;align-self:center}
.system-scene{height:380px;position:relative;perspective:800px;isolation:isolate;--rx:0deg;--ry:0deg}
.system-board{position:absolute;inset:0;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .3s ease-out;transform-style:preserve-3d}
.system-grid{position:absolute;inset:8% 0;background-image:radial-gradient(#5db6d43d 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse,#000 35%,transparent 72%)}
.system-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.system-wire path{fill:none;stroke:#5db6d4;stroke-width:1.5;stroke-dasharray:700;stroke-dashoffset:700;opacity:.65;transition:stroke-dashoffset 1.8s ease-in-out .3s}
.connected .system-wire path{stroke-dashoffset:0}
.system-wire .signal{stroke:var(--sis-orange);stroke-width:3;stroke-dasharray:9 260;stroke-dashoffset:0;opacity:0;transition:opacity .5s 1.3s;animation:signal-travel 4s linear 1 forwards}
.connected .system-wire .signal{opacity:1}
.system-wire .signal.second{animation-delay:0s}
.system-node{position:absolute;width:132px;left:calc(var(--x)*1% - 66px);top:calc(var(--y)*1% - 48px);height:96px;border:1px solid #5db6d455;border-radius:4px;background:#233853;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;box-shadow:0 14px 32px #0f1b2c55;transform:translate(var(--dx),var(--dy)) rotate(var(--angle));transition:transform 1.2s cubic-bezier(.2,.8,.2,1),background .5s,border-color .5s;z-index:2}
.connected .system-node{transform:translate(0,0) rotate(0);border-color:#5db6d488}
.system-node svg{width:26px;height:26px;stroke:var(--sis-light-blue);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.node-caption{font:500 13px var(--font-display);color:#fff;white-space:nowrap}
.system-hub{position:absolute;width:72px;height:72px;left:calc(50% - 36px);top:calc(50% - 36px);display:grid;place-items:center;border:1px solid #e9a03999;background:var(--sis-orange);border-radius:4px;transform:rotate(-45deg);transition:transform 1.2s cubic-bezier(.2,.8,.2,1);z-index:3;box-shadow:0 0 50px #e9a03920}
.connected .system-hub{transform:rotate(0)}
.system-hub svg{width:42px;height:42px;fill:none;stroke:var(--sis-dark-blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hub-halo{position:absolute;left:calc(50% - 52px);top:calc(50% - 52px);width:104px;height:104px;border:1px solid #e9a03945;border-radius:4px;opacity:0;transition:opacity 1s;animation:hub-breathe 4s ease-in-out 1}
.connected .hub-halo{opacity:1}
.sis .section-heading h2{font-size:clamp(32px,3.7vw,50px);letter-spacing:-.02em;font-weight:500}
.sis .service-list article{transition:transform .25s ease-out;border-top:2px solid var(--sis-orange)}
.sis .service-list article:hover{transform:translateY(-6px)}
.sis .contact h2{letter-spacing:-.02em;font-weight:500}
@keyframes signal-travel{to{stroke-dashoffset:-538}}
@keyframes hub-breathe{50%{transform:scale(1.14);border-color:#e9a03980}}
@media(min-width:1000px){.sis-hero>div:first-child{animation:hero-arrive .8s ease-out both}}
@keyframes hero-arrive{from{transform:translateY(15px)}to{transform:translateY(0)}}
@media(max-width:1000px){.sis-hero{gap:32px;padding-top:52px}.system-node{width:110px;left:calc(var(--x)*1% - 55px)}.node-caption{font-size:11px}}
@media(max-width:800px){.sis-hero{grid-template-columns:1fr;padding:48px 24px;gap:32px}.sis-hero h1{font-size:clamp(44px,9vw,66px)}.sis-hero .lede{font-size:19px}.experience{max-width:540px;width:100%;margin:0 auto}.system-node{width:126px;left:calc(var(--x)*1% - 63px)}.node-caption{font-size:13px}.system-scene{height:340px}.scenario-detail{min-height:0}.sis header{padding:22px 24px}}
@media(max-width:400px){.system-node{width:104px;height:86px;left:calc(var(--x)*1% - 52px);top:calc(var(--y)*1% - 43px)}.node-caption{font-size:11px}.system-scene{height:300px}.scenario{font-size:12px;padding:8px}.sis-hero h1{font-size:43px}.sis header{gap:12px}.sis header .logo{width:170px}.sis header .button{padding:9px;min-height:44px}.scene-controls{gap:16px}}
@media(prefers-reduced-motion:reduce){.sis-hero *, .sis-hero>div:first-child{animation:none!important;transition:none!important}.system-board{transform:none!important}.sis .service-list article:hover{transform:none}}

.system-node-a{--x:22;--y:25;--dx:-8px;--dy:18px;--angle:-12deg}.system-node-b{--x:78;--y:25;--dx:6px;--dy:-9px;--angle:10deg}.system-node-c{--x:22;--y:75;--dx:10px;--dy:4px;--angle:9deg}.system-node-d{--x:78;--y:75;--dx:-7px;--dy:-14px;--angle:-10deg}

.sis .sis-hero h1{color:#fff}

.sis-hero .system-caption{color:#bed1df;text-align:center;font:500 16px var(--font-display);margin:24px 0 0}
.pointer-active .system-wire .signal{animation-name:signal-hover}
@keyframes signal-hover{from{stroke-dashoffset:0}to{stroke-dashoffset:-538}}
