/**
 * ARANOX Component Library
 * Release: AW2_147
 * Dependências: AW2_145 + AW2_146
 */

/* 01 — Executive Hero */
.arx-cmp-hero{
  position:relative;
  isolation:isolate;
  min-height:78vh;
  display:grid;
  align-items:center;
  padding:clamp(110px,14vw,180px) 0 clamp(90px,10vw,130px);
  color:var(--arx-white);
  background:
    radial-gradient(circle at 78% 32%,rgba(66,217,223,.16),transparent 28%),
    radial-gradient(circle at 16% 76%,rgba(119,96,238,.14),transparent 26%),
    linear-gradient(135deg,var(--arx-black),var(--arx-navy-900));
  overflow:hidden;
}

.arx-cmp-hero__grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(40px,6vw,88px);
  align-items:center;
}

.arx-cmp-hero h1{
  margin:22px 0 24px;
  font-size:var(--arx-font-size-hero);
  line-height:var(--arx-line-tight);
  letter-spacing:var(--arx-tracking-tight);
  text-wrap:balance;
}

.arx-cmp-hero p{
  max-width:740px;
  color:rgba(255,255,255,.72);
  font-size:var(--arx-font-size-lg);
  line-height:var(--arx-line-body);
}

.arx-cmp-hero__visual{
  position:relative;
  min-height:480px;
  border:1px solid var(--arx-line-dark);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(66,217,223,.10),transparent 52%),
    rgba(255,255,255,.02);
  box-shadow:var(--arx-shadow-glow),var(--arx-shadow-lg);
}

/* 02 — Orbital Core */
.arx-cmp-orbit{
  position:relative;
  display:grid;
  min-height:420px;
  place-items:center;
}

.arx-cmp-orbit__ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.arx-cmp-orbit__ring:nth-child(1){width:88%;height:88%}
.arx-cmp-orbit__ring:nth-child(2){width:64%;height:64%}
.arx-cmp-orbit__ring:nth-child(3){width:40%;height:40%}

.arx-cmp-orbit__core{
  z-index:2;
  display:grid;
  width:156px;
  height:156px;
  place-items:center;
  border:1px solid rgba(255,255,255,.20);
  border-radius:50%;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
  box-shadow:var(--arx-shadow-glow);
}

/* 03 — KPI Strip */
.arx-cmp-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-xl);
  background:var(--arx-white);
  box-shadow:var(--arx-shadow-md);
  overflow:hidden;
}

.arx-cmp-kpis article{
  padding:28px;
  border-right:1px solid var(--arx-line-light);
}

.arx-cmp-kpis article:last-child{border-right:0}

.arx-cmp-kpis strong{
  display:block;
  font-size:clamp(2rem,4vw,4.2rem);
  line-height:1;
  letter-spacing:-.04em;
}

.arx-cmp-kpis span{
  display:block;
  margin-top:10px;
  color:var(--arx-muted);
  font-size:var(--arx-font-size-sm);
}

/* 04 — Feature Matrix */
.arx-cmp-feature-matrix{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--arx-grid-gap);
}

.arx-cmp-feature{
  position:relative;
  min-height:260px;
  padding:28px;
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-lg);
  background:var(--arx-white);
  box-shadow:var(--arx-shadow-sm);
  overflow:hidden;
}

.arx-cmp-feature::after{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  bottom:22px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--arx-cyan-500),transparent);
}

.arx-cmp-feature__code{
  color:var(--arx-blue-600);
  font-size:2rem;
  font-weight:900;
  opacity:.45;
}

/* 05 — Process Flow */
.arx-cmp-process{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.arx-cmp-process article{
  position:relative;
  min-height:200px;
  padding:26px;
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-lg);
  background:var(--arx-white);
  box-shadow:var(--arx-shadow-sm);
}

.arx-cmp-process article:not(:last-child)::after{
  content:"→";
  position:absolute;
  top:50%;
  right:-15px;
  z-index:2;
  transform:translateY(-50%);
  color:var(--arx-blue-600);
  font-size:1.35rem;
  font-weight:900;
}

/* 06 — Timeline */
.arx-cmp-timeline{
  position:relative;
  display:grid;
  gap:22px;
}

.arx-cmp-timeline::before{
  content:"";
  position:absolute;
  left:26px;
  top:18px;
  bottom:18px;
  width:2px;
  background:linear-gradient(var(--arx-cyan-500),var(--arx-violet-500));
}

.arx-cmp-timeline article{
  position:relative;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:24px;
  align-items:start;
}

.arx-cmp-timeline__marker{
  z-index:2;
  display:grid;
  width:54px;
  height:54px;
  place-items:center;
  border-radius:50%;
  color:var(--arx-white);
  background:linear-gradient(145deg,var(--arx-navy-900),var(--arx-blue-600));
  box-shadow:0 0 0 8px var(--arx-paper-50);
  font-weight:900;
}

/* 07 — Architecture Map */
.arx-cmp-architecture{
  display:grid;
  gap:18px;
  padding:28px;
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-xl);
  background:rgba(255,255,255,.035);
  box-shadow:var(--arx-shadow-lg);
}

.arx-cmp-architecture__layer{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:18px;
  align-items:center;
}

.arx-cmp-architecture__label{
  color:var(--arx-cyan-500);
  font-size:var(--arx-font-size-xs);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.arx-cmp-architecture__nodes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.arx-cmp-architecture__node{
  min-height:82px;
  display:grid;
  place-items:center;
  padding:14px;
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-md);
  background:rgba(255,255,255,.05);
  text-align:center;
  font-weight:800;
}

/* 08 — Command Center */
.arx-cmp-command{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  padding:20px;
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-xl);
  background:linear-gradient(145deg,#08131d,#122c3b);
  box-shadow:var(--arx-shadow-lg);
}

.arx-cmp-command__main,
.arx-cmp-command__side{
  display:grid;
  gap:14px;
}

.arx-cmp-command__screen{
  min-height:210px;
  padding:22px;
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-lg);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    rgba(255,255,255,.025);
  background-size:34px 34px;
}

/* 09 — Evidence Grid */
.arx-cmp-evidence-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.arx-cmp-evidence{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:18px;
  min-height:150px;
  align-items:start;
  padding:24px;
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-lg);
  background:var(--arx-white);
  box-shadow:var(--arx-shadow-sm);
}

/* 10 — Trust Matrix */
.arx-cmp-trust-matrix{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-xl);
  background:var(--arx-line-light);
  overflow:hidden;
}

.arx-cmp-trust-matrix article{
  min-height:180px;
  padding:26px;
  background:var(--arx-white);
}

/* 11 — Decision Matrix */
.arx-cmp-decision{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.arx-cmp-decision article{
  min-height:210px;
  padding:26px;
  border-left:4px solid var(--arx-blue-600);
  border-radius:0 var(--arx-radius-lg) var(--arx-radius-lg) 0;
  background:var(--arx-white);
  box-shadow:var(--arx-shadow-sm);
}

/* 12 — Security Layers */
.arx-cmp-security-layers{
  display:grid;
  gap:12px;
  padding:24px;
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-xl);
  background:rgba(255,255,255,.03);
}

.arx-cmp-security-layers article{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:18px;
  align-items:center;
  min-height:88px;
  padding:18px;
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-md);
  background:rgba(255,255,255,.045);
}

/* 13 — AI Pipeline */
.arx-cmp-ai-pipeline{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.arx-cmp-ai-pipeline article{
  position:relative;
  min-height:180px;
  padding:22px;
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-lg);
  background:var(--arx-white);
  box-shadow:var(--arx-shadow-sm);
}

.arx-cmp-ai-pipeline article:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-14px;
  width:14px;
  height:2px;
  background:var(--arx-cyan-500);
}

/* 14 — Network Graph */
.arx-cmp-network{
  position:relative;
  min-height:420px;
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-xl);
  background:
    radial-gradient(circle at 50% 50%,rgba(66,217,223,.08),transparent 42%),
    rgba(255,255,255,.025);
  overflow:hidden;
}

.arx-cmp-network__node{
  position:absolute;
  display:grid;
  min-width:120px;
  min-height:64px;
  place-items:center;
  padding:12px;
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-pill);
  background:rgba(255,255,255,.07);
  color:var(--arx-white);
  text-align:center;
  backdrop-filter:blur(12px);
}

/* 15 — Metric Bars */
.arx-cmp-metrics{
  display:grid;
  gap:18px;
}

.arx-cmp-metric{
  display:grid;
  grid-template-columns:180px 1fr 72px;
  gap:18px;
  align-items:center;
}

.arx-cmp-metric__track{
  height:10px;
  border-radius:999px;
  background:var(--arx-paper-200);
  overflow:hidden;
}

.arx-cmp-metric__fill{
  width:var(--arx-value,0%);
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--arx-cyan-500),var(--arx-blue-600),var(--arx-violet-500));
}

/* 16 — Quote / Manifesto */
.arx-cmp-manifesto{
  position:relative;
  padding:clamp(30px,5vw,70px);
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-xl);
  background:
    radial-gradient(circle at 80% 20%,rgba(66,217,223,.10),transparent 28%),
    rgba(255,255,255,.04);
  box-shadow:var(--arx-shadow-lg);
}

.arx-cmp-manifesto blockquote{
  margin:0;
  font-size:clamp(2rem,4.5vw,4.8rem);
  line-height:1.05;
  letter-spacing:-.04em;
  text-wrap:balance;
}

/* 17 — Comparison */
.arx-cmp-comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.arx-cmp-comparison article{
  min-height:260px;
  padding:28px;
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-lg);
  background:var(--arx-white);
  box-shadow:var(--arx-shadow-sm);
}

.arx-cmp-comparison article:last-child{
  color:var(--arx-white);
  border-color:transparent;
  background:linear-gradient(145deg,var(--arx-navy-900),var(--arx-blue-600));
}

/* 18 — Accordion */
.arx-cmp-accordion{
  display:grid;
  gap:12px;
}

.arx-cmp-accordion details{
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-lg);
  background:var(--arx-white);
  box-shadow:var(--arx-shadow-xs);
  overflow:hidden;
}

.arx-cmp-accordion summary{
  display:flex;
  min-height:72px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 24px;
  cursor:pointer;
  font-weight:900;
}

.arx-cmp-accordion details>div{
  padding:0 24px 24px;
  color:var(--arx-muted);
  line-height:var(--arx-line-body);
}

/* 19 — Tabs */
.arx-cmp-tabs__nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.arx-cmp-tabs__nav button{
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-pill);
  background:var(--arx-white);
  color:var(--arx-ink);
  cursor:pointer;
  font-weight:900;
}

.arx-cmp-tabs__nav button.is-active{
  color:var(--arx-white);
  border-color:transparent;
  background:linear-gradient(135deg,var(--arx-navy-900),var(--arx-blue-600));
}

.arx-cmp-tabs__panel{
  display:none;
}

.arx-cmp-tabs__panel.is-active{
  display:block;
}

/* 20 — Premium CTA */
.arx-cmp-cta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:center;
  padding:clamp(30px,5vw,62px);
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-xl);
  color:var(--arx-white);
  background:
    radial-gradient(circle at 18% 50%,rgba(66,217,223,.14),transparent 28%),
    linear-gradient(135deg,var(--arx-black),var(--arx-navy-800));
  box-shadow:var(--arx-shadow-lg);
}

/* Shared text */
:where(
  .arx-cmp-feature,
  .arx-cmp-process article,
  .arx-cmp-timeline article,
  .arx-cmp-evidence,
  .arx-cmp-trust-matrix article,
  .arx-cmp-decision article,
  .arx-cmp-ai-pipeline article,
  .arx-cmp-comparison article
) h3{
  margin:16px 0 8px;
}

:where(
  .arx-cmp-feature,
  .arx-cmp-process article,
  .arx-cmp-timeline article,
  .arx-cmp-evidence,
  .arx-cmp-trust-matrix article,
  .arx-cmp-decision article,
  .arx-cmp-ai-pipeline article,
  .arx-cmp-comparison article
) p{
  margin:0;
  color:var(--arx-muted);
  line-height:var(--arx-line-body);
}

/* Responsive */
@media(max-width:1080px){
  .arx-cmp-hero__grid,
  .arx-cmp-command{
    grid-template-columns:1fr;
  }

  .arx-cmp-kpis,
  .arx-cmp-feature-matrix,
  .arx-cmp-process,
  .arx-cmp-trust-matrix{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .arx-cmp-ai-pipeline{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .arx-cmp-architecture__layer{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .arx-cmp-kpis,
  .arx-cmp-feature-matrix,
  .arx-cmp-process,
  .arx-cmp-evidence-grid,
  .arx-cmp-trust-matrix,
  .arx-cmp-decision,
  .arx-cmp-ai-pipeline,
  .arx-cmp-comparison{
    grid-template-columns:1fr;
  }

  .arx-cmp-kpis article{
    border-right:0;
    border-bottom:1px solid var(--arx-line-light);
  }

  .arx-cmp-kpis article:last-child{
    border-bottom:0;
  }

  .arx-cmp-process article:not(:last-child)::after,
  .arx-cmp-ai-pipeline article:not(:last-child)::after{
    display:none;
  }

  .arx-cmp-architecture__nodes{
    grid-template-columns:1fr;
  }

  .arx-cmp-security-layers article{
    grid-template-columns:54px 1fr;
  }

  .arx-cmp-security-layers article>*:last-child{
    grid-column:2;
  }

  .arx-cmp-metric{
    grid-template-columns:1fr;
  }

  .arx-cmp-cta{
    grid-template-columns:1fr;
  }
}