/**
 * ARANOX Home — Hero Executivo Premium
 * Release: AW3_003 REV02
 */

.arx3-hero{
  --arx3-x:50%;
  --arx3-y:42%;
  position:relative;
  isolation:isolate;
  min-height:max(820px,100svh);
  overflow:hidden;
  display:grid;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at var(--arx3-x) var(--arx3-y),rgba(36,185,238,.18),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(98,85,255,.19),transparent 26%),
    radial-gradient(circle at 16% 84%,rgba(26,216,178,.12),transparent 30%),
    linear-gradient(132deg,#03070c 0%,#071522 48%,#0b2635 100%);
}

.arx3-hero__grid,
.arx3-hero__aurora,
.arx3-hero__noise{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.arx3-hero__grid{
  opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.88) 65%,transparent 100%);
}

.arx3-hero__aurora{
  inset:-22%;
  opacity:.72;
  filter:blur(70px);
  background:
    conic-gradient(
      from 180deg at 50% 50%,
      transparent,
      rgba(36,185,238,.16),
      transparent 34%,
      rgba(90,73,255,.13),
      transparent 66%,
      rgba(26,216,178,.11),
      transparent
    );
  animation:arx3Aurora 22s linear infinite;
}

.arx3-hero__noise{
  opacity:.055;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.arx3-hero__shell{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
  align-items:center;
  gap:clamp(44px,7vw,110px);
  padding-top:clamp(130px,15vh,180px);
  padding-bottom:clamp(170px,19vh,220px);
}

.arx3-hero__content{
  max-width:780px;
}

.arx3-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin:0 0 26px;
  padding:9px 14px;
  border:1px solid rgba(131,225,255,.2);
  border-radius:999px;
  color:rgba(228,248,255,.84);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
  font-size:clamp(.72rem,.9vw,.82rem);
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.arx3-hero__status{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4df1c7;
  box-shadow:0 0 0 6px rgba(77,241,199,.10),0 0 22px rgba(77,241,199,.72);
  animation:arx3Status 2.2s ease-in-out infinite;
}

.arx3-hero__title{
  margin:0;
  max-width:14ch;
  color:#fff;
  font-size:clamp(3.4rem,6.3vw,7.2rem);
  font-weight:870;
  line-height:.92;
  letter-spacing:-.065em;
}

.arx3-hero__title span{
  display:block;
  margin-top:.17em;
  max-width:15ch;
  color:transparent;
  background:linear-gradient(105deg,#fff 5%,#93e5ff 40%,#88f0d4 72%,#b9b2ff);
  -webkit-background-clip:text;
  background-clip:text;
  font-size:.56em;
  line-height:1.08;
  letter-spacing:-.045em;
}

.arx3-hero__lead{
  max-width:68ch;
  margin:30px 0 0;
  color:rgba(228,238,245,.72);
  font-size:clamp(1.02rem,1.32vw,1.22rem);
  line-height:1.72;
}

.arx3-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:36px;
}

.arx3-button{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  min-height:56px;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 23px;
  border:1px solid transparent;
  border-radius:999px;
  color:#fff;
  font-size:.94rem;
  font-weight:850;
  text-decoration:none;
  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}

.arx3-button--primary{
  color:#031016;
  background:linear-gradient(110deg,#81e7ff,#58e6be);
  box-shadow:0 18px 52px rgba(55,210,223,.20);
}

.arx3-button--primary::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.72) 48%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .8s ease;
}

.arx3-button--primary:hover::before{
  transform:translateX(120%);
}

.arx3-button--ghost{
  border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
}

.arx3-button:hover{
  transform:translateY(-3px);
}

.arx3-button--ghost:hover{
  border-color:rgba(128,230,255,.42);
  background:rgba(255,255,255,.07);
}

.arx3-hero__assurance{
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:32px;
  color:rgba(218,232,240,.58);
  font-size:.79rem;
  font-weight:720;
}

.arx3-hero__assurance span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.arx3-hero__assurance i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#79dff7;
  box-shadow:0 0 12px rgba(121,223,247,.75);
}

.arx3-hero__visual{
  position:relative;
  min-height:560px;
  display:grid;
  place-items:center;
  perspective:1200px;
}

.arx3-core{
  position:relative;
  width:min(100%,570px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
}

.arx3-core__halo{
  position:absolute;
  inset:17%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(79,214,255,.20),rgba(73,105,255,.08) 44%,transparent 72%);
  filter:blur(14px);
  animation:arx3Breath 5.6s ease-in-out infinite;
}

.arx3-core__ring{
  position:absolute;
  border:1px solid rgba(128,221,255,.19);
  border-radius:50%;
  box-shadow:inset 0 0 30px rgba(74,194,255,.025);
}

.arx3-core__ring::before,
.arx3-core__ring::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#80e5ff;
  box-shadow:0 0 18px rgba(128,229,255,.9);
}

.arx3-core__ring::before{
  top:8%;
  left:24%;
}

.arx3-core__ring::after{
  right:10%;
  bottom:25%;
  background:#76efc8;
  box-shadow:0 0 18px rgba(118,239,200,.9);
}

.arx3-core__ring--one{
  inset:7%;
  animation:arx3Spin 34s linear infinite;
}

.arx3-core__ring--two{
  inset:18%;
  border-style:dashed;
  animation:arx3SpinReverse 24s linear infinite;
}

.arx3-core__ring--three{
  inset:29%;
  animation:arx3Spin 17s linear infinite;
}

.arx3-core__brand{
  position:relative;
  z-index:4;
  width:43%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  align-content:center;
  gap:13px;
  padding:27px;
  border:1px solid rgba(165,229,255,.2);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 30%,rgba(255,255,255,.12),transparent 28%),
    linear-gradient(145deg,rgba(12,43,62,.94),rgba(6,21,34,.92));
  box-shadow:
    0 0 0 12px rgba(255,255,255,.018),
    0 32px 90px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 100px rgba(44,186,232,.13);
  backdrop-filter:blur(24px);
}

.arx3-core__logo{
  display:block;
  width:88%;
  max-width:190px;
  height:auto;
  max-height:54px;
  object-fit:contain;
  object-position:center;
}

.arx3-core__node{
  position:absolute;
  z-index:5;
  min-width:112px;
  display:grid;
  gap:3px;
  padding:11px 14px;
  border:1px solid rgba(147,223,249,.16);
  border-radius:14px;
  color:#fff;
  background:rgba(6,22,34,.74);
  box-shadow:0 14px 40px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}

.arx3-core__node:hover{
  z-index:8;
  transform:translateY(-4px) scale(1.035);
  border-color:rgba(128,229,255,.42);
  background:rgba(9,37,53,.92);
}

.arx3-core__node strong{
  font-size:.76rem;
  letter-spacing:.05em;
}

.arx3-core__node small{
  color:rgba(210,230,238,.54);
  font-size:.63rem;
}

.arx3-core__node--tes{left:2%;top:23%}
.arx3-core__node--agrion{right:0;top:19%}
.arx3-core__node--sentrix{right:-3%;bottom:24%}
.arx3-core__node--vitalis{left:4%;bottom:18%}
.arx3-core__node--cyrius{left:37%;top:1%}
.arx3-core__node--cyrion{left:36%;bottom:0}

.arx3-core__telemetry{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.arx3-core__telemetry span{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 18px #8fe8ff;
  animation:arx3Telemetry 4.5s ease-in-out infinite;
}

.arx3-core__telemetry span:nth-child(1){left:14%;top:47%}
.arx3-core__telemetry span:nth-child(2){right:18%;top:43%;animation-delay:1s}
.arx3-core__telemetry span:nth-child(3){left:44%;top:11%;animation-delay:2s}
.arx3-core__telemetry span:nth-child(4){left:50%;bottom:12%;animation-delay:3s}

.arx3-hero__metrics{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:38px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  background:rgba(5,18,28,.62);
  box-shadow:0 22px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(22px);
}

.arx3-metric{
  position:relative;
  min-height:112px;
  display:grid;
  align-content:center;
  gap:5px;
  padding:20px 26px;
}

.arx3-metric+.arx3-metric{
  border-left:1px solid rgba(255,255,255,.09);
}

.arx3-metric strong{
  color:#fff;
  font-size:clamp(1.65rem,2.2vw,2.3rem);
  line-height:1;
  letter-spacing:-.04em;
}

.arx3-metric span{
  color:rgba(211,229,237,.56);
  font-size:.74rem;
  font-weight:740;
}

.arx3-hero__scroll{
  position:absolute;
  z-index:7;
  right:28px;
  bottom:58px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(221,237,244,.48);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-decoration:none;
  text-transform:uppercase;
  writing-mode:vertical-rl;
}

.arx3-hero__scroll i{
  width:1px;
  height:42px;
  overflow:hidden;
  background:rgba(255,255,255,.16);
}

.arx3-hero__scroll i::after{
  content:"";
  display:block;
  width:100%;
  height:50%;
  background:#89e6ff;
  animation:arx3Scroll 1.8s ease-in-out infinite;
}

@keyframes arx3Aurora{
  to{transform:rotate(360deg)}
}

@keyframes arx3Spin{
  to{transform:rotate(360deg)}
}

@keyframes arx3SpinReverse{
  to{transform:rotate(-360deg)}
}

@keyframes arx3Breath{
  50%{transform:scale(1.08);opacity:.72}
}

@keyframes arx3Status{
  50%{
    opacity:.52;
    box-shadow:
      0 0 0 10px rgba(77,241,199,0),
      0 0 26px rgba(77,241,199,.48);
  }
}

@keyframes arx3Telemetry{
  50%{transform:scale(4);opacity:.18}
}

@keyframes arx3Scroll{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(200%)}
}

@media(max-width:1100px){
  .arx3-hero__shell{
    grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);
    gap:34px;
  }

  .arx3-hero__title{
    font-size:clamp(3.2rem,6vw,5.4rem);
  }

  .arx3-hero__visual{
    min-height:500px;
  }

  .arx3-core__node{
    min-width:94px;
    padding:9px 11px;
  }
}

@media(max-width:900px){
  .arx3-hero{
    min-height:auto;
  }

  .arx3-hero__shell{
    grid-template-columns:1fr;
    padding-top:130px;
    padding-bottom:210px;
  }

  .arx3-hero__content{
    max-width:760px;
  }

  .arx3-hero__visual{
    min-height:500px;
  }

  .arx3-core{
    width:min(100%,520px);
  }

  .arx3-hero__metrics{
    bottom:30px;
  }

  .arx3-hero__scroll{
    display:none;
  }
}

@media(max-width:680px){
  .arx3-hero__shell{
    padding-top:112px;
    padding-bottom:300px;
  }

  .arx3-hero__title{
    max-width:100%;
    font-size:clamp(2.85rem,13vw,4.2rem);
  }

  .arx3-hero__title span{
    max-width:100%;
    font-size:.5em;
  }

  .arx3-hero__lead{
    font-size:1rem;
  }

  .arx3-hero__actions{
    display:grid;
  }

  .arx3-button{
    width:100%;
  }

  .arx3-hero__assurance{
    display:grid;
  }

  .arx3-hero__visual{
    min-height:390px;
  }

  .arx3-core{
    width:360px;
    max-width:100%;
  }

  .arx3-core__brand{
    width:48%;
  }

  .arx3-core__node{
    min-width:78px;
    padding:8px 9px;
  }

  .arx3-core__node strong{
    font-size:.61rem;
  }

  .arx3-core__node small{
    font-size:.54rem;
  }

  .arx3-hero__metrics{
    grid-template-columns:repeat(2,1fr);
    width:calc(100% - 32px);
    bottom:22px;
  }

  .arx3-metric{
    min-height:92px;
    padding:15px 16px;
  }

  .arx3-metric:nth-child(3){
    border-left:0;
    border-top:1px solid rgba(255,255,255,.09);
  }

  .arx3-metric:nth-child(4){
    border-top:1px solid rgba(255,255,255,.09);
  }
}

@media(prefers-reduced-motion:reduce){
  .arx3-hero__aurora,
  .arx3-core__ring,
  .arx3-core__halo,
  .arx3-core__telemetry span,
  .arx3-hero__status,
  .arx3-hero__scroll i::after{
    animation:none!important;
  }
}