/**
 * ARANOX Home — Ecossistema Premium
 * Release: AW3_005
 */

.arx5-ecosystem{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(104px,13vw,182px) 0;
  color:#edf7fb;
  background:
    linear-gradient(180deg,#07151d 0%,#091c27 48%,#06131b 100%);
}

.arx5-ecosystem__background{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.arx5-ecosystem__halo{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.24;
}

.arx5-ecosystem__halo--one{
  width:500px;
  height:500px;
  top:-180px;
  left:-140px;
  background:#14a7cb;
}

.arx5-ecosystem__halo--two{
  width:560px;
  height:560px;
  right:-180px;
  bottom:-220px;
  background:#695ce1;
}

.arx5-ecosystem__mesh{
  position:absolute;
  inset:0;
  opacity:.17;
  background-image:
    linear-gradient(rgba(126,207,227,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,207,227,.08) 1px,transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(circle at center,#000 20%,transparent 82%);
}

.arx5-ecosystem__shell{
  position:relative;
  z-index:2;
}

.arx5-ecosystem__header{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:clamp(40px,8vw,120px);
  align-items:end;
}

.arx5-ecosystem__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
  color:#67d7ef;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.arx5-ecosystem__eyebrow::before{
  content:"";
  width:36px;
  height:1px;
  background:linear-gradient(90deg,#58d4ef,transparent);
}

.arx5-ecosystem__title{
  max-width:16ch;
  margin:0;
  color:#f5fbfd;
  font-size:clamp(2.65rem,5vw,5.5rem);
  font-weight:880;
  line-height:.98;
  letter-spacing:-.057em;
}

.arx5-ecosystem__intro{
  margin:0 0 6px;
  color:#9fb2bc;
  font-size:clamp(1rem,1.22vw,1.18rem);
  line-height:1.75;
}

.arx5-ecosystem__stage{
  position:relative;
  min-height:860px;
  margin-top:clamp(74px,10vw,126px);
  border:1px solid rgba(125,203,224,.10);
  border-radius:38px;
  background:
    radial-gradient(circle at center,rgba(34,154,185,.10),transparent 32%),
    rgba(255,255,255,.018);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 42px 120px rgba(0,0,0,.28);
}

.arx5-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:6;
  width:250px;
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:34px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(101,221,241,.28);
  border-radius:50%;
  text-align:center;
  background:
    radial-gradient(circle at 40% 30%,rgba(106,219,239,.18),transparent 36%),
    linear-gradient(145deg,rgba(13,53,68,.96),rgba(9,31,43,.98));
  box-shadow:
    0 0 0 18px rgba(54,179,205,.035),
    0 0 0 40px rgba(54,179,205,.018),
    0 25px 90px rgba(0,0,0,.38);
}

.arx5-core__label{
  color:#6ad9ed;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.arx5-core strong{
  margin-top:10px;
  color:#fff;
  font-size:2rem;
  letter-spacing:.08em;
}

.arx5-core p{
  max-width:180px;
  margin:14px 0 0;
  color:#adc0c8;
  font-size:.85rem;
  line-height:1.55;
}

.arx5-core__pulse{
  position:absolute;
  inset:-1px;
  border:1px solid rgba(90,214,235,.35);
  border-radius:50%;
  animation:arx5-core-pulse 3.4s ease-out infinite;
}

.arx5-ecosystem__connections{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.arx5-ecosystem__connection{
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(94,211,232,.46),rgba(94,211,232,.06));
}

.arx5-ecosystem__connection::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:6px;
  height:6px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#65d7ec;
  box-shadow:0 0 15px rgba(101,215,236,.75);
}

.arx5-ecosystem__connection--1{transform:rotate(-152deg)}
.arx5-ecosystem__connection--2{transform:rotate(-90deg)}
.arx5-ecosystem__connection--3{transform:rotate(-28deg)}
.arx5-ecosystem__connection--4{transform:rotate(28deg)}
.arx5-ecosystem__connection--5{transform:rotate(90deg)}
.arx5-ecosystem__connection--6{transform:rotate(152deg)}

.arx5-ecosystem__orbit{
  position:absolute;
  inset:0;
}

.arx5-ecosystem__orbit::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:67%;
  height:67%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(111,201,223,.09);
  border-radius:50%;
}

.arx5-ecosystem__orbit--platforms::before{
  width:88%;
  height:88%;
  border-style:dashed;
  border-color:rgba(136,126,237,.10);
}

.arx5-node{
  --arx5-x:50%;
  --arx5-y:50%;
  position:absolute;
  width:min(250px,24%);
  min-height:184px;
  padding:25px;
  border:1px solid rgba(133,211,230,.12);
  border-radius:22px;
  background:
    radial-gradient(circle at var(--arx5-x) var(--arx5-y),rgba(72,192,219,.13),transparent 34%),
    rgba(10,32,43,.80);
  box-shadow:0 20px 58px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  transition:
    transform .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}

.arx5-node:hover{
  transform:translateY(-7px);
  border-color:rgba(100,215,237,.34);
  box-shadow:0 30px 82px rgba(0,0,0,.38);
}

.arx5-node__type{
  color:#65cfe6;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.arx5-node h3{
  margin:10px 0 0;
  color:#fff;
  font-size:1.22rem;
  font-weight:900;
  letter-spacing:.035em;
}

.arx5-node p{
  margin:12px 0 0;
  color:#9eb1ba;
  font-size:.84rem;
  line-height:1.58;
}

.arx5-node--tes{
  left:7%;
  top:12%;
}

.arx5-node--agrion{
  left:50%;
  top:5%;
  transform:translateX(-50%);
}

.arx5-node--agrion:hover{
  transform:translateX(-50%) translateY(-7px);
}

.arx5-node--sentrix{
  right:7%;
  top:12%;
}

.arx5-node--vitalis{
  left:7%;
  bottom:12%;
}

.arx5-node--cyrius{
  left:50%;
  bottom:5%;
  transform:translateX(-50%);
}

.arx5-node--cyrius:hover{
  transform:translateX(-50%) translateY(-7px);
}

.arx5-node--cyrion{
  right:7%;
  bottom:12%;
}

.arx5-ecosystem__logic{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}

.arx5-ecosystem__logic-item{
  position:relative;
  padding:28px;
  border:1px solid rgba(125,203,224,.09);
  border-radius:20px;
  background:rgba(255,255,255,.025);
}

.arx5-ecosystem__logic-item span{
  color:#5dd3e8;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.14em;
}

.arx5-ecosystem__logic-item strong{
  display:block;
  margin-top:16px;
  color:#f2f8fa;
  font-size:1.08rem;
}

.arx5-ecosystem__logic-item p{
  margin:10px 0 0;
  color:#91a5ae;
  font-size:.87rem;
  line-height:1.6;
}

.arx5-ecosystem__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:34px;
  margin-top:clamp(56px,7vw,90px);
  padding-top:32px;
  border-top:1px solid rgba(129,205,224,.12);
}

.arx5-ecosystem__footer p{
  max-width:760px;
  margin:0;
  color:#a8bac2;
  font-size:clamp(1.08rem,1.45vw,1.34rem);
  line-height:1.55;
}

.arx5-ecosystem__link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#6bd9ed;
  text-decoration:none;
  font-size:.77rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.arx5-ecosystem__link svg{
  width:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  transition:transform .25s ease;
}

.arx5-ecosystem__link:hover svg{
  transform:translateX(5px);
}

@keyframes arx5-core-pulse{
  0%{transform:scale(.92);opacity:.72}
  75%,100%{transform:scale(1.18);opacity:0}
}

@media(max-width:1080px){
  .arx5-ecosystem__stage{
    min-height:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    padding:24px;
  }

  .arx5-ecosystem__connections,
  .arx5-ecosystem__orbit::before{
    display:none;
  }

  .arx5-core,
  .arx5-node,
  .arx5-node--agrion,
  .arx5-node--cyrius{
    position:relative;
    inset:auto;
    width:auto;
    min-height:210px;
    transform:none;
  }

  .arx5-core{
    grid-column:1/-1;
    width:260px;
    min-height:260px;
    margin:10px auto 24px;
  }

  .arx5-ecosystem__orbit{
    display:contents;
  }

  .arx5-node:hover,
  .arx5-node--agrion:hover,
  .arx5-node--cyrius:hover{
    transform:translateY(-7px);
  }
}

@media(max-width:760px){
  .arx5-ecosystem__header{
    grid-template-columns:1fr;
  }

  .arx5-ecosystem__title{
    max-width:100%;
    font-size:clamp(2.45rem,12vw,3.8rem);
  }

  .arx5-ecosystem__stage{
    grid-template-columns:1fr;
  }

  .arx5-core{
    grid-column:auto;
  }

  .arx5-ecosystem__logic{
    grid-template-columns:1fr;
  }

  .arx5-ecosystem__footer{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  .arx5-core__pulse{
    animation:none!important;
  }

  .arx5-node,
  .arx5-ecosystem__link svg{
    transition:none!important;
  }
}