@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

.alx-root{
  --alx-accent:#A8CE3E; --alx-accent-2:#BCDD55; --alx-teal:#4B8199; --alx-teal-2:#5A97AE;
  --alx-bg:#0E1020; --alx-ink:#EAF0F6; --alx-muted:#93A2B8; --alx-line:rgba(255,255,255,.1);
  --alx-sweep:6s;
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(70px,9vw,120px) 20px;
  background:radial-gradient(120% 90% at 15% 10%, #15183a, var(--alx-bg) 60%);
  font-family:'Sora',system-ui,-apple-system,sans-serif;
}
.alx-root__glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 55% at 80% 40%, rgba(75,129,153,.28), transparent 60%)}
.alx-root__grid{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 45%, #000, transparent 75%);
          mask-image:radial-gradient(70% 70% at 70% 45%, #000, transparent 75%)}

.alx-wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center}

/* -------- cabeçalho -------- */
.alx-eyebrow{display:inline-flex; align-items:center; gap:.6rem; margin:0 0 16px;
  font-weight:600; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--alx-accent)}
.alx-eyebrow .dot{position:relative; width:8px; height:8px; border-radius:50%; background:var(--alx-accent)}
.alx-eyebrow .dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--alx-accent); opacity:.6; animation:alx-ping 2s ease-out infinite}
@keyframes alx-ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.4);opacity:0}}
.alx-title{font-weight:800; letter-spacing:-.02em; line-height:1.08; color:var(--alx-ink);
  font-size:clamp(2rem,4.2vw,3.05rem); margin:0 0 18px}
.alx-title .hl{position:relative; color:var(--alx-accent-2); white-space:nowrap}
.alx-title .hl::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.13em; border-radius:2px;
  background:linear-gradient(90deg,var(--alx-teal),var(--alx-accent));
  transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.16,.84,.34,1) .25s}
.alx-root.is-in .alx-title .hl::after{transform:scaleX(1)}
.alx-lead{color:var(--alx-muted); font-size:1.05rem; line-height:1.65; max-width:460px; margin:0 0 30px}

/* -------- painel -------- */
.alx-panel{position:relative; padding:24px 26px; border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid var(--alx-line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  overflow:hidden; min-height:172px}
.alx-panel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--alx-teal),var(--alx-accent))}
.alx-panel__head{display:flex; align-items:baseline; gap:10px}
.alx-panel__num{font-size:2rem; font-weight:800; line-height:1;
  background:linear-gradient(120deg,var(--alx-teal-2),var(--alx-accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.alx-panel__count{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--alx-muted)}
.alx-panel__title{margin:12px 0 8px; font-size:1.5rem; color:var(--alx-ink); font-weight:700}
.alx-panel__desc{margin:0 0 18px; color:#C7D3E0; font-size:1rem; line-height:1.55; min-height:3em}
.alx-panel.swap .alx-panel__title,.alx-panel.swap .alx-panel__desc,.alx-panel.swap .alx-panel__num{animation:alx-swapin .45s cubic-bezier(.16,.84,.34,1)}
@keyframes alx-swapin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.alx-panel__dots{display:flex; gap:8px; flex-wrap:wrap}
.alx-root .alx-panel__dots button{width:26px; height:5px; border-radius:3px; border:0 !important; padding:0; cursor:pointer;
  background:rgba(255,255,255,.16) !important; box-shadow:none; transition:background .3s, transform .3s}
.alx-root .alx-panel__dots button.on{background:linear-gradient(90deg,var(--alx-teal),var(--alx-accent)) !important; transform:scaleY(1.4)}

/* -------- radar -------- */
.alx-col-right{display:flex; flex-direction:column; align-items:center; gap:14px}
.alx-radar{--size:min(86vw,520px); --r:calc(var(--size) * .40);
  position:relative; width:var(--size); height:var(--size); border-radius:50%}
.alx-radar__ring{position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid rgba(90,151,174,.22)}
.alx-radar__ring.r1{width:100%; height:100%}
.alx-radar__ring.r2{width:66%; height:66%}
.alx-radar__ring.r3{width:33%; height:33%; border-color:rgba(168,206,62,.28)}
.alx-radar__cross{position:absolute; inset:0; margin:auto;
  background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) center/1px 100% no-repeat,
             linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) center/100% 1px no-repeat}
.alx-radar__sweep{position:absolute; inset:0; margin:auto; width:100%; height:100%; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(168,206,62,.28), rgba(168,206,62,0) 60deg, transparent 360deg);
  animation:alx-sweep var(--alx-sweep) linear infinite; z-index:1}
@keyframes alx-sweep{to{transform:rotate(360deg)}}
.alx-radar__lock{position:absolute; left:50%; top:50%; width:2px; height:var(--r);
  transform-origin:50% 100%; transform:translate(-50%,-100%) rotate(var(--lock,0deg));
  background:linear-gradient(180deg, transparent, var(--alx-accent)); opacity:.7;
  transition:transform .6s cubic-bezier(.16,.84,.34,1); z-index:2}
.alx-radar__core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%; display:grid; place-items:center; z-index:3;
  background:radial-gradient(circle at 30% 30%, #26407a, #12132A);
  border:1px solid rgba(168,206,62,.4); box-shadow:0 0 40px -8px rgba(75,129,153,.7)}
.alx-radar__core-label{font-weight:700; font-size:.95rem; color:var(--alx-ink); letter-spacing:.02em}
.alx-radar__core-ping{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(168,206,62,.5);
  animation:alx-corePing 2.6s ease-out infinite}
@keyframes alx-corePing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}
.alx-radar__nodes{position:absolute; inset:0; z-index:4}
.alx-node{position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1))}
/* Chips blindados: o !important impede que o estilo de botão/link do
   tema ou do Site Kit (ex.: aquele rosa padrão) vaze para dentro. */
.alx-root .alx-node__chip{display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 13px; border-radius:999px; white-space:nowrap;
  background:rgba(14,16,32,.72) !important; border:1px solid var(--alx-line) !important;
  color:var(--alx-ink) !important; box-shadow:none;
  font-size:.82rem; font-weight:600; font-family:inherit; text-decoration:none;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .3s, box-shadow .3s, transform .3s, background .3s, color .3s;
  animation:alx-floaty 5s ease-in-out infinite}
.alx-node:nth-child(2n) .alx-node__chip{animation-delay:-2.5s}
.alx-root .alx-node__chip svg{width:16px; height:16px; fill:none !important;
  stroke:var(--alx-teal-2) !important; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s}
.alx-root .alx-node__chip:hover{transform:translateY(-2px); border-color:rgba(168,206,62,.5) !important}
.alx-root .alx-node.on .alx-node__chip{
  background:linear-gradient(135deg, rgba(168,206,62,.22), rgba(75,129,153,.14)) !important;
  border-color:var(--alx-accent) !important; color:#fff !important;
  box-shadow:0 0 0 4px rgba(168,206,62,.12), 0 14px 30px -14px rgba(168,206,62,.5)}
.alx-root .alx-node.on .alx-node__chip svg{stroke:var(--alx-accent-2) !important}
.alx-root .alx-node__chip:focus-visible{outline:2px solid var(--alx-accent); outline-offset:2px}
@keyframes alx-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.alx-radar__hint{margin:0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--alx-muted); opacity:.7; text-align:center}

/* -------- responsivo -------- */
@media (max-width:900px){
  .alx-wrap{grid-template-columns:1fr; gap:40px}
  .alx-col-right{order:2}
  .alx-radar{--size:min(90vw,420px)}
  .alx-node__chip{font-size:.74rem; padding:7px 10px}
}
@media (max-width:400px){ .alx-radar{--size:340px} }

/* -------- movimento reduzido -------- */
@media (prefers-reduced-motion:reduce){
  .alx-radar__sweep,.alx-radar__core-ping,.alx-node__chip,.alx-eyebrow .dot::after{animation:none}
  .alx-title .hl::after{transform:scaleX(1); transition:none}
}