/* Hero em planos independentes: grid, fluxo, cartoes */

.hero{position:relative;z-index:1;padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(48px,6vw,72px)}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
  min-height:calc(100dvh - 66px - 56px);
}
.hero__copy{max-width:620px}
.hero h1{margin-top:18px}
.hero h1 .dim{color:#8f9bb3}
.hero__sub{margin-top:20px;max-width:52ch;color:#c3cbd9;font-size:clamp(1rem,1.3vw,1.1rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__chips{margin-top:26px}
.hero__micro{margin-top:16px;font-size:.82rem;color:#8f9bb3;display:flex;gap:8px;align-items:flex-start;max-width:44ch}
.hero__micro svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--cyan)}

/* prancha de demonstracao */
.rig{
  position:relative;
  margin:0;
  aspect-ratio:640/520;
  isolation:isolate;
}
.rig__plane{position:absolute;inset:0;will-change:transform}
.rig__plane--glow{
  background:radial-gradient(52% 46% at 58% 46%, rgba(88,230,255,.16), transparent 70%),
             radial-gradient(46% 42% at 72% 68%, rgba(155,124,255,.18), transparent 72%);
  filter:blur(6px);
}
.rig__plane--grid{
  inset:auto 0 4% 0;
  height:88%;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    linear-gradient(rgba(246,248,252,.055) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(246,248,252,.055) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg, rgba(17,23,37,.92), rgba(8,11,18,.94));
  box-shadow:inset 0 1px 0 rgba(246,248,252,.06), var(--shadow-card);
  overflow:hidden;
}
.rig__plane--grid::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(8,11,18,.75));
}
.rig__bar{
  position:absolute;top:0;left:0;right:0;height:34px;
  display:flex;align-items:center;gap:6px;padding:0 14px;
  border-bottom:1px solid var(--line);
  background:rgba(8,11,18,.55);
  z-index:2;
}
.rig__dot{width:7px;height:7px;border-radius:50%;background:rgba(246,248,252,.22)}
.rig__dot--lime{background:var(--lime)}
.rig__file{
  margin-left:10px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;
  color:#9aa5ba;text-transform:lowercase;
}
.rig__tag{
  margin-left:auto;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  color:var(--lime);text-transform:uppercase;
  border:1px solid rgba(198,243,107,.35);border-radius:999px;padding:3px 8px;
  background:rgba(198,243,107,.08);
}

.rig__flow--m{display:none}
.rig__flow{
  position:absolute;inset:34px 0 0 0;width:100%;height:calc(100% - 34px);
  z-index:1;
  overflow:visible;
}
.nd{fill:rgba(24,34,53,.94);stroke:rgba(246,248,252,.16);stroke-width:1}
.nd--hot{fill:rgba(24,34,53,1);stroke:rgba(198,243,107,.75);stroke-width:1.4}
.nd__t{fill:#cfd8e8;font-family:var(--font-mono);font-size:12.4px;letter-spacing:.02em}
.nd__t--hot{fill:#eafcc0}
.nd__s{fill:#95a2b8;font-family:var(--font-mono);font-size:9.8px;letter-spacing:.04em}
.edge{
  fill:none;stroke:rgba(88,230,255,.42);stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:200;
  stroke-dashoffset:200;
}
.edge--hot{stroke:rgba(198,243,107,.6)}
.port{fill:rgba(88,230,255,.55)}
.port--hot{fill:var(--lime)}
.bar-track{fill:rgba(246,248,252,.12)}
.bar-fill{fill:var(--lime);transform-origin:left center;transform:scaleX(0)}

.rig__card-wrap{
  position:absolute;z-index:3;width:190px;will-change:transform;
}
.rig__card{
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:linear-gradient(160deg,rgba(24,34,53,.97),rgba(17,23,37,.97));
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(246,248,252,.07);
  padding:11px 13px;
}
.rig__card-wrap--a{left:-26px;bottom:-7%}
.rig__card-wrap--b{right:-14px;top:-5%;width:176px}
.rig__card h4{font-size:.78rem;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.rig__card p{font-size:.7rem;color:#95a1b7;margin-top:3px;line-height:1.35}
.rig__card .ok{
  width:14px;height:14px;border-radius:50%;flex:none;
  background:rgba(198,243,107,.16);color:var(--lime);
  display:grid;place-items:center;font-size:9px;
}
.rig__bars{display:grid;gap:5px;margin-top:9px}
.rig__bars i{display:block;height:4px;border-radius:999px;background:rgba(246,248,252,.12);overflow:hidden}
.rig__bars i::after{content:"";display:block;height:100%;width:var(--w,60%);background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:999px}
.rig__steps{display:flex;gap:5px;margin-top:9px}
.rig__steps span{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;color:#9aa5ba;border:1px solid var(--line);border-radius:5px;padding:2px 5px}
.rig__steps span.on{color:var(--lime);border-color:rgba(198,243,107,.4)}

/* entrada dos planos e do fluxo */
@media (prefers-reduced-motion:no-preference){
  .edge{animation:draw 900ms var(--ease) forwards}
  .edge:nth-of-type(1){animation-delay:.15s}
  .edge:nth-of-type(2){animation-delay:.32s}
  .edge:nth-of-type(3){animation-delay:.46s}
  .edge:nth-of-type(4){animation-delay:.62s}
  .edge:nth-of-type(5){animation-delay:.78s}
  .node{opacity:0;animation:nodeIn 520ms var(--ease) forwards}
  .node:nth-of-type(1){animation-delay:.05s}
  .node:nth-of-type(2){animation-delay:.2s}
  .node:nth-of-type(3){animation-delay:.34s}
  .node:nth-of-type(4){animation-delay:.5s}
  .node:nth-of-type(5){animation-delay:.66s}
  .node:nth-of-type(6){animation-delay:.82s}
  .bar-fill{animation:fillBar 1100ms var(--ease) 1.05s forwards}
  .rig__card{opacity:0;animation:cardIn 620ms var(--ease) forwards}
  .rig__card-wrap--a .rig__card{animation-delay:.95s}
  .rig__card-wrap--b .rig__card{animation-delay:1.15s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes nodeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fillBar{to{transform:scaleX(1)}}
.node{transform-box:fill-box}

/* parallax de planos: scroll-driven CSS, sem listener */
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  @supports (animation-timeline:scroll()){
    .rig__plane--grid{animation:planeA linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .rig__flow{animation:planeB linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .rig__card-wrap--a{animation:planeC linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .rig__card-wrap--b{animation:planeD linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .hero__copy{animation:planeE linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  }
}
@keyframes planeA{to{transform:translate3d(0,34px,0)}}
@keyframes planeB{to{transform:translate3d(0,-14px,0)}}
@keyframes planeC{to{transform:translate3d(-10px,-46px,0) rotate(-1.4deg)}}
@keyframes planeD{to{transform:translate3d(12px,-30px,0) rotate(1.2deg)}}
@keyframes planeE{to{transform:translate3d(0,-26px,0);opacity:.72}}

@media (max-width:980px){
  h1 .lb{display:none}
  .hero__grid{grid-template-columns:1fr;min-height:0;gap:36px}
  .hero__copy{max-width:none}
  .rig{max-width:540px;margin-inline:auto;width:100%}
}
@media (max-width:620px){
  .rig__flow{display:none}
  .rig__flow--m{display:block}
  .rig__card-wrap{display:none}
  .hl{white-space:nowrap}
  .rig__card-wrap--a{left:-4px;bottom:6%;width:160px}
  .rig__card-wrap--b{right:-2px;top:10%;width:150px}
  .rig__card h4{font-size:.72rem}
  .rig__card p{font-size:.66rem}
}