/* ────────────────────────────────────────
   Hero / NAIPEXO Digital System v3
   One coherent visual object, no UI-card collage
   ──────────────────────────────────────── */
.nxhome-system-art{
  position:relative;
  min-height:590px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 68% 35%,rgba(255,46,87,.12),transparent 24%),
    radial-gradient(circle at 35% 72%,rgba(102,83,181,.16),transparent 32%),
    linear-gradient(145deg,#0b0732 0%,#08042b 57%,#05031d 100%);
  border:1px solid rgba(12,6,63,.14);
  box-shadow:0 34px 80px rgba(12,6,63,.16);
}
.nxhome-system-art:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.04),transparent 22%,transparent 72%,rgba(255,255,255,.018)),
    radial-gradient(circle at 50% 110%,rgba(255,255,255,.06),transparent 42%);
}
.nxsa-grid{
  position:absolute;
  z-index:0;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  transform:perspective(900px) rotateX(63deg) scale(1.35);
  transform-origin:50% 88%;
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.72) 55%,transparent 88%);
}
.nxsa-glow{position:absolute;border-radius:50%;filter:blur(55px);opacity:.5;z-index:0}
.nxsa-glow--a{width:220px;height:220px;background:rgba(255,46,87,.22);right:6%;top:12%}
.nxsa-glow--b{width:260px;height:260px;background:rgba(84,68,190,.22);left:6%;bottom:3%}
.nxsa-ground{
  position:absolute;
  z-index:1;
  left:8%;
  right:8%;
  bottom:12%;
  height:31%;
  transform:perspective(850px) rotateX(64deg);
  transform-origin:center bottom;
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 70px rgba(0,0,0,.22);
}
.nxsa-object{
  position:absolute;
  z-index:3;
  left:50%;
  top:49%;
  width:520px;
  height:430px;
  transform:translate(-50%,-50%);
  perspective:1200px;
}
.nxsa-base{
  position:absolute;
  left:50%;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(145deg,rgba(38,34,72,.98),rgba(10,7,38,.98));
  box-shadow:0 26px 55px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateX(-50%) rotateX(61deg) rotateZ(-28deg);
}
.nxsa-base--back{width:330px;height:240px;top:96px;opacity:.72}
.nxsa-base--front{width:410px;height:286px;top:128px}
.nxsa-base--front:after{
  content:"";
  position:absolute;
  inset:14%;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 42px rgba(255,46,87,.08) inset;
}
.nxsa-tower{
  position:absolute;
  z-index:5;
  width:96px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(160deg,rgba(246,244,251,.92),rgba(185,180,207,.42) 50%,rgba(34,29,73,.32));
  box-shadow:0 22px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(9px);
}
.nxsa-tower:after{
  content:"";
  position:absolute;
  right:-12px;
  top:11px;
  width:12px;
  height:100%;
  background:linear-gradient(to bottom,rgba(255,255,255,.12),rgba(15,10,52,.44));
  transform:skewY(-42deg);
  transform-origin:left top;
  border-right:1px solid rgba(255,255,255,.1);
}
.nxsa-tower--left{height:228px;left:130px;top:82px;transform:skewY(-3deg)}
.nxsa-tower--right{height:190px;right:118px;top:118px;transform:skewY(2deg);opacity:.82}
.nxsa-tower i{
  position:absolute;
  left:18px;
  right:18px;
  height:5px;
  background:rgba(12,6,63,.2);
}
.nxsa-tower i:nth-child(1){top:32px}
.nxsa-tower i:nth-child(2){top:51px;width:45%}
.nxsa-tower i:nth-child(3){bottom:31px;height:42px;background:linear-gradient(to top,rgba(255,46,87,.72) 0 33%,rgba(12,3,103,.58) 33% 61%,rgba(12,6,63,.18) 61%)}
.nxsa-tower--right i:nth-child(1){top:38px}
.nxsa-tower--right i:nth-child(2){bottom:32px;height:72px;background:repeating-linear-gradient(to top,rgba(12,6,63,.2) 0 3px,transparent 3px 14px)}
.nxsa-glass{
  position:absolute;
  z-index:4;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 22px 42px rgba(0,0,0,.16);
  backdrop-filter:blur(8px);
}
.nxsa-glass:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(125deg,rgba(255,255,255,.09),transparent 35%,transparent 72%,rgba(255,46,87,.09));
  pointer-events:none;
}
.nxsa-glass--one{width:178px;height:112px;left:38px;top:183px;transform:rotate(-6deg)}
.nxsa-glass--two{width:186px;height:126px;right:22px;top:204px;transform:rotate(5deg)}
.nxsa-glass--three{width:220px;height:92px;left:153px;bottom:18px;transform:rotate(-1deg)}
.nxsa-glass i{position:absolute;background:rgba(230,227,242,.6)}
.nxsa-glass--one i:nth-child(1){left:18px;top:20px;width:72px;height:7px}
.nxsa-glass--one i:nth-child(2){left:18px;top:41px;width:118px;height:4px;opacity:.5}
.nxsa-glass--one i:nth-child(3){left:18px;bottom:20px;width:85px;height:28px;background:linear-gradient(90deg,rgba(12,3,103,.48),rgba(255,46,87,.72))}
.nxsa-glass--two i:nth-child(1){left:18px;top:22px;width:105px;height:5px}
.nxsa-glass--two i:nth-child(2){left:18px;right:18px;bottom:22px;height:45px;background:repeating-linear-gradient(to top,rgba(255,255,255,.2) 0 2px,transparent 2px 12px)}
.nxsa-glass--three i{bottom:17px;width:17px;background:linear-gradient(to top,rgba(255,46,87,.8),rgba(255,46,87,.25))}
.nxsa-glass--three i:nth-child(1){left:24px;height:25px}
.nxsa-glass--three i:nth-child(2){left:52px;height:42px}
.nxsa-glass--three i:nth-child(3){left:80px;height:31px}
.nxsa-glass--three i:nth-child(4){left:108px;height:58px;background:linear-gradient(to top,#ff2e57,rgba(255,107,135,.35))}
.nxsa-core{
  position:absolute;
  z-index:8;
  left:50%;
  top:49%;
  width:62px;
  height:62px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg,#ff6b87,#ff2e57 48%,#c70d38);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 18px rgba(255,46,87,.75),0 0 58px rgba(255,46,87,.32);
}
.nxsa-core:before,.nxsa-core:after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.48);
}
.nxsa-core:after{inset:21px;background:#fff;border:0;box-shadow:0 0 18px #fff}
.nxsa-core span{
  position:absolute;
  inset:-16px;
  border:1px solid rgba(255,46,87,.24);
  animation:nxsa-pulse 3.8s ease-in-out infinite;
}
.nxsa-node{
  position:absolute;
  z-index:9;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff2e57;
  border:2px solid #ffd5dd;
  box-shadow:0 0 0 7px rgba(255,46,87,.09),0 0 20px rgba(255,46,87,.58);
}
.nxsa-node--1{left:62px;top:140px}
.nxsa-node--2{right:64px;top:118px}
.nxsa-node--3{right:38px;bottom:82px}
.nxsa-node--4{left:79px;bottom:58px}
.nxsa-line{
  position:absolute;
  z-index:7;
  height:1px;
  background:linear-gradient(90deg,rgba(255,46,87,0),rgba(255,83,117,.9),rgba(255,46,87,0));
  transform-origin:left center;
  box-shadow:0 0 10px rgba(255,46,87,.35);
}
.nxsa-line--1{width:183px;left:70px;top:147px;transform:rotate(17deg)}
.nxsa-line--2{width:180px;left:265px;top:204px;transform:rotate(-31deg)}
.nxsa-line--3{width:190px;left:268px;top:229px;transform:rotate(30deg)}
.nxsa-line--4{width:190px;left:89px;top:360px;transform:rotate(-34deg)}
.nxsa-micro{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding:13px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.035);
}
.nxsa-micro i{width:6px;background:rgba(255,255,255,.35)}
.nxsa-micro--1{left:7%;top:13%;width:92px;height:66px}
.nxsa-micro--1 i:nth-child(1){height:18px}
.nxsa-micro--1 i:nth-child(2){height:31px}
.nxsa-micro--1 i:nth-child(3){height:25px;background:#ff2e57}
.nxsa-micro--2{right:6%;bottom:10%;width:108px;height:72px}
.nxsa-micro--2 i:nth-child(1){height:17px}
.nxsa-micro--2 i:nth-child(2){height:28px}
.nxsa-micro--2 i:nth-child(3){height:23px}
.nxsa-micro--2 i:nth-child(4){height:38px;background:#ff2e57}
@keyframes nxsa-pulse{0%,100%{transform:scale(.94);opacity:.45}50%{transform:scale(1.12);opacity:.9}}
@media(prefers-reduced-motion:reduce){.nxsa-core span{animation:none}}
@media(max-width:1050px){
  .nxhome-system-art{min-height:540px}
  .nxsa-object{transform:translate(-50%,-50%) scale(.9)}
}
@media(max-width:720px){
  .nxhome-system-art{
    min-height:430px;
    margin:0 -24px;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }
  .nxsa-object{width:520px;height:430px;transform:translate(-50%,-50%) scale(.69)}
  .nxsa-micro{display:none}
}