.systems-explorer-section{position:relative;overflow:hidden;padding:110px 0;background:#061d35;color:#fff;isolation:isolate}
.systems-explorer-section:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(rgba(49,180,95,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(49,180,95,.055) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent)}
.systems-explorer-section:after{content:"";position:absolute;z-index:-1;width:720px;height:720px;left:45%;top:20%;border-radius:50%;background:radial-gradient(circle,rgba(36,154,75,.13),transparent 68%);transform:translate(-50%,-50%)}
.gxp-heading{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:48px;align-items:end;margin-bottom:42px}
.gxp-heading .eyebrow{color:#80d49b}
.gxp-heading h2{max-width:760px;margin:12px 0 0;color:#fff;font-size:clamp(2.7rem,6vw,5.5rem);line-height:.9;letter-spacing:-.065em}
.gxp-heading p{max-width:520px;margin:0;color:#b9c9c3;font-size:1.02rem;line-height:1.75}
.gxp-shell{position:relative;display:grid;grid-template-columns:190px minmax(0,1fr) 330px;min-height:650px;border:1px solid rgba(128,212,155,.32);border-radius:28px;overflow:hidden;background:rgba(3,20,36,.9);box-shadow:0 32px 90px rgba(0,0,0,.28)}
.gxp-tabs{display:flex;flex-direction:column;border-right:1px solid rgba(128,212,155,.2);background:rgba(3,18,31,.56)}
.gxp-tab{position:relative;min-height:81px;padding:18px 16px;border:0;border-bottom:1px solid rgba(128,212,155,.15);background:transparent;color:#aebdb8;text-align:left;font-size:.82rem;font-weight:800;line-height:1.3;transition:background .28s,color .28s,padding .28s}
.gxp-tab:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green-bright);transform:scaleY(0);transition:transform .28s}
.gxp-tab:hover{color:#fff;background:rgba(255,255,255,.035)}
.gxp-tab[aria-selected=true]{padding-left:23px;color:#fff;background:linear-gradient(90deg,rgba(36,154,75,.24),rgba(36,154,75,.08))}
.gxp-tab[aria-selected=true]:before{transform:scaleY(1)}
.gxp-tab:focus-visible,.gxp-tool:focus-visible,.gxp-link:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.gxp-stage{position:relative;min-width:0;min-height:650px;background:radial-gradient(circle at 52% 46%,#143b35 0,#0a2828 38%,#041a25 78%)}
.gxp-stage canvas{display:block;width:100%;height:100%;min-height:650px;touch-action:pan-y}
.gxp-toolbar{position:absolute;z-index:3;top:16px;right:16px;display:flex;gap:8px}
.gxp-tool{width:43px;height:43px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(3,18,31,.78);color:#fff;font-size:1rem;display:grid;place-items:center;transition:.2s}
.gxp-tool:hover,.gxp-tool[aria-pressed=true]{border-color:#80d49b;background:var(--green)}
.gxp-stage-label{position:absolute;left:20px;bottom:16px;margin:0;color:#aabbb5;font-size:.62rem;line-height:1.5}
.gxp-legend{position:absolute;z-index:2;left:20px;top:18px;padding:8px 12px;border:1px solid rgba(128,212,155,.24);border-radius:999px;background:rgba(3,18,31,.7);color:#d8e7e0;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(10px)}
.gxp-panels{position:relative;border-left:1px solid rgba(128,212,155,.2);background:#071f31}
.gxp-panel{display:none;min-height:650px;padding:42px 28px 30px;animation:gxp-panel-in .42s ease both}
.gxp-panel.active{display:flex;flex-direction:column}
@keyframes gxp-panel-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.gxp-number{display:block;color:var(--green-bright);font-size:3.8rem;font-weight:800;line-height:1;letter-spacing:-.06em}
.gxp-panel h3{margin:10px 0 18px;color:#fff;font-size:2rem;line-height:1.05;letter-spacing:-.045em}
.gxp-live{display:flex;align-items:center;gap:10px;margin-bottom:25px;padding:12px 14px;border:1px solid rgba(128,212,155,.22);border-radius:12px;background:rgba(36,154,75,.11);color:#dff2e3;font-size:.74rem;font-weight:700}
.gxp-live:before{content:"";width:9px;height:9px;border-radius:50%;background:#58d77e;box-shadow:0 0 0 5px rgba(88,215,126,.12);animation:gxp-live 1.8s ease-in-out infinite}
@keyframes gxp-live{50%{box-shadow:0 0 0 9px rgba(88,215,126,0)}}
.gxp-spec{margin:0 0 16px}
.gxp-spec dt{margin-bottom:4px;color:#80d49b;font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.gxp-spec dd{margin:0;color:#c2d0cb;font-size:.78rem;line-height:1.55}
.gxp-link{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:16px 18px;border-radius:10px;background:var(--green);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:.25s}
.gxp-link:hover{background:var(--green-bright);transform:translateY(-2px)}
.gxp-mobile-name{display:none}
@media(max-width:1050px){.gxp-shell{grid-template-columns:165px minmax(0,1fr) 290px}.gxp-tab{font-size:.74rem}.gxp-panel{padding-inline:22px}.gxp-panel h3{font-size:1.65rem}}
@media(max-width:860px){.systems-explorer-section{padding:82px 0}.gxp-heading{grid-template-columns:1fr;gap:18px}.gxp-shell{display:flex;flex-direction:column;min-height:0}.gxp-tabs{order:0;display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));overflow-x:auto;border-right:0;border-bottom:1px solid rgba(128,212,155,.2)}.gxp-tab{min-height:68px;border-right:1px solid rgba(128,212,155,.12);white-space:normal}.gxp-stage{order:1;min-height:470px}.gxp-stage canvas{min-height:470px}.gxp-panels{order:2;border-left:0;border-top:1px solid rgba(128,212,155,.2)}.gxp-panel{min-height:0;padding:30px}.gxp-number{font-size:2.8rem}.gxp-panel h3{font-size:1.9rem}.gxp-link{margin-top:16px}}
@media(max-width:600px){.systems-explorer-section{padding:68px 0}.gxp-heading h2{font-size:clamp(2.55rem,14vw,4rem)}.gxp-heading p{font-size:.9rem}.gxp-shell{border-radius:18px}.gxp-tabs{grid-template-columns:repeat(8,140px)}.gxp-tab{min-height:62px;padding:14px}.gxp-tab[aria-selected=true]{padding-left:19px}.gxp-stage,.gxp-stage canvas{min-height:390px}.gxp-toolbar{top:12px;right:12px}.gxp-tool{width:39px;height:39px}.gxp-stage-label{left:14px;right:14px;font-size:.56rem}.gxp-legend{top:13px;left:13px;max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gxp-panel{padding:26px 20px}.gxp-panel h3{font-size:1.65rem}.gxp-spec{margin-bottom:13px}}
@media(prefers-reduced-motion:reduce){.gxp-panel,.gxp-live:before{animation:none}.gxp-tab,.gxp-link{transition:none}}
