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

.lacx-root{
  --lacx-accent:#A8CE3E; --lacx-accent-2:#BCDD55; --lacx-teal:#4B8199; --lacx-teal-2:#5A97AE;
  --lacx-wire:rgba(90,151,174,.45); --lacx-bg:#0E1020; --lacx-ink:#EAF0F6; --lacx-muted:#93A2B8;
  --lacx-line:rgba(255,255,255,.1); --lacx-flow:2.4s;
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(70px,9vw,120px) 20px;
  background:radial-gradient(120% 90% at 85% 12%, #15183a, var(--lacx-bg) 60%);
  font-family:'Sora',system-ui,-apple-system,sans-serif;
}
.lacx-glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 55% at 22% 45%, rgba(75,129,153,.26), transparent 60%)}
.lacx-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 30% 50%, #000, transparent 75%);
          mask-image:radial-gradient(70% 70% at 30% 50%, #000, transparent 75%)}

.lacx-wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center}
.lacx-col-viz{order:1}
.lacx-col-text{order:2}
/* variante: animação à direita */
.lacx-root--viz-right .lacx-col-viz{order:2}
.lacx-root--viz-right .lacx-col-text{order:1}

/* -------- textos -------- */
.lacx-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(--lacx-accent)}
.lacx-eyebrow .dot{position:relative; width:8px; height:8px; border-radius:50%; background:var(--lacx-accent)}
.lacx-eyebrow .dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--lacx-accent); opacity:.6; animation:lacx-ping 2s ease-out infinite}
@keyframes lacx-ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.4);opacity:0}}
.lacx-title{font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--lacx-ink);
  font-size:clamp(1.9rem,4vw,2.9rem); margin:0 0 18px; max-width:22ch}
.lacx-title .hl{position:relative; color:var(--lacx-accent-2); white-space:nowrap}
.lacx-title .hl::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.13em; border-radius:2px;
  background:linear-gradient(90deg,var(--lacx-teal),var(--lacx-accent));
  transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.16,.84,.34,1) .3s}
.lacx-root.is-in .lacx-title .hl::after{transform:scaleX(1)}
.lacx-lead{color:var(--lacx-muted); font-size:1.05rem; line-height:1.65; max-width:480px; margin:0 0 28px}
.lacx-punch{display:flex; flex-direction:column; gap:2px}
.lacx-punch .old{font-weight:700; font-size:1.3rem; color:var(--lacx-muted); text-decoration:line-through; text-decoration-color:rgba(147,162,184,.5);
  opacity:0; transform:translateY(8px); transition:opacity .5s ease .4s, transform .5s ease .4s}
.lacx-punch .new{font-weight:800; font-size:1.7rem; color:var(--lacx-accent-2);
  opacity:0; transform:translateY(8px); transition:opacity .6s cubic-bezier(.16,.84,.34,1) .9s, transform .6s cubic-bezier(.16,.84,.34,1) .9s}
.lacx-root.is-in .lacx-punch .old,.lacx-root.is-in .lacx-punch .new{opacity:1; transform:none}

/* -------- constelação -------- */
.lacx-col-viz{display:flex; flex-direction:column; align-items:center; gap:14px}
.lacx-viz{--size:min(88vw,520px); position:relative; width:var(--size); height:var(--size)}
.lacx-wires{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1}
.lacx-wire{stroke:var(--lacx-wire); fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .9s cubic-bezier(.16,.84,.34,1), stroke .3s}
.lacx-viz.on .lacx-wire{stroke-dashoffset:0}
.lacx-wire.hot{stroke:var(--lacx-accent)}
.lacx-flow{stroke:var(--lacx-accent); fill:none; stroke-width:2; vector-effect:non-scaling-stroke;
  stroke-dasharray:.07 .93; stroke-dashoffset:0; opacity:0; filter:drop-shadow(0 0 3px rgba(168,206,62,.7));
  animation:lacx-flow var(--lacx-flow) linear infinite}
.lacx-viz.on .lacx-flow{opacity:.9}
@keyframes lacx-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}

.lacx-nodes{position:absolute; inset:0; z-index:2}
.lacx-node{position:absolute; transform:translate(-50%,-50%) scale(.8); opacity:0;
  transition:opacity .5s ease, transform .5s cubic-bezier(.16,.84,.34,1)}
.lacx-viz.on .lacx-node{opacity:1; transform:translate(-50%,-50%) scale(1)}
.lacx-root .lacx-node__chip{display:flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;
  padding:9px 14px; border-radius:12px; background:rgba(14,16,32,.78) !important; border:1px solid var(--lacx-line) !important;
  color:var(--lacx-ink) !important; box-shadow:none; font-size:.85rem; font-weight:600; 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}
.lacx-root .lacx-node__chip svg{width:16px; height:16px; fill:none !important; stroke:var(--lacx-teal-2) !important; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s}
.lacx-node.hot{z-index:5}
.lacx-node.hot .lacx-node__chip{border-color:var(--lacx-accent) !important; color:#fff !important;
  background:linear-gradient(135deg, rgba(168,206,62,.18), rgba(75,129,153,.1)) !important;
  box-shadow:0 10px 30px -12px rgba(168,206,62,.5); transform:scale(1.04)}
.lacx-node.hot .lacx-node__chip svg{stroke:var(--lacx-accent-2) !important}

.lacx-hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:132px; height:132px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:radial-gradient(circle at 30% 30%, #24427c, #10132a);
  border:1px solid rgba(168,206,62,.45); box-shadow:0 0 50px -10px rgba(75,129,153,.75)}
.lacx-hub-mark{width:34px; height:34px; display:block; object-fit:contain}
.lacx-hub-name{font-weight:800; font-size:1.1rem; color:#fff; letter-spacing:-.01em}
.lacx-hub-ping{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(168,206,62,.5);
  animation:lacx-hubping 3s ease-out infinite}
@keyframes lacx-hubping{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
.lacx-hint{margin:0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lacx-muted); opacity:.7; text-align:center}

/* -------- responsivo -------- */
@media (max-width:900px){
  .lacx-wrap{grid-template-columns:1fr; gap:40px}
  .lacx-col-viz{order:2}
  .lacx-col-text{order:1}
  .lacx-root--viz-right .lacx-col-viz{order:2}
  .lacx-root--viz-right .lacx-col-text{order:1}
  .lacx-viz{--size:min(90vw,430px)}
  .lacx-root .lacx-node__chip{font-size:.76rem; padding:7px 11px}
  .lacx-hub{width:108px; height:108px}
}
@media (max-width:400px){ .lacx-viz{--size:340px} .lacx-root .lacx-node__chip{font-size:.7rem; padding:6px 9px} }

/* -------- movimento reduzido -------- */
@media (prefers-reduced-motion:reduce){
  .lacx-flow,.lacx-hub-ping,.lacx-eyebrow .dot::after{animation:none}
  .lacx-wire{transition:none; stroke-dashoffset:0}
  .lacx-node{transition:none; opacity:1; transform:translate(-50%,-50%)}
  .lacx-title .hl::after{transform:scaleX(1); transition:none}
  .lacx-punch .old,.lacx-punch .new{transition:none; opacity:1; transform:none}
}