/* ==========================================================================
   01 HERO — título, CTAs, canais e o "Control Center" animado
   ========================================================================== */
.hero{background:var(--bg-dark);color:#fff;padding:154px 0 clamp(72px,9vw,116px);position:relative;overflow:hidden}

/* grade de fundo */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:linear-gradient(var(--border-dark) 1px,transparent 1px),linear-gradient(90deg,var(--border-dark) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(115% 80% at 78% 6%,#000,transparent 70%);
  mask-image:radial-gradient(115% 80% at 78% 6%,#000,transparent 70%);
  animation:gridIn 900ms var(--e-soft) .1s forwards}
@keyframes gridIn{to{opacity:.62}}

/* brilho azul no canto */
.hero::after{content:"";position:absolute;width:1000px;height:1000px;right:-320px;top:-470px;pointer-events:none;
  background:radial-gradient(circle,rgba(92,153,242,.16) 0%,rgba(92,153,242,0) 58%)}

.hero .wrap{position:relative;z-index:2}
.hero .g12{align-items:center;row-gap:54px}
.hero h1{margin:22px 0 24px;max-width:15ch;overflow-wrap:break-word}

/* sublinhado animado no trecho <i> do título */
.hero h1 i{font-style:normal;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 92%;background-size:0 .075em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:ul 1s var(--e-out) .7s forwards}
@keyframes ul{to{background-size:100% .075em}}

.hero .lede{max-width:48ch}
.hcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* ---------- canais alimentando o núcleo ---------- */
.net{margin-top:44px;padding-top:22px;border-top:1px solid var(--border-dark)}
.net>p{font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);color:var(--on-dark-3);margin-bottom:14px}
.net ul{display:flex;flex-wrap:wrap;gap:7px}
.net li{display:flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--border-dark);border-radius:7px;
  font-size:var(--f-13);color:var(--on-dark-2);background:rgba(255,255,255,.035);
  opacity:0;transform:translateY(6px);transition:border-color var(--t-base),background var(--t-base)}
.net li:hover{border-color:rgba(92,153,242,.5);background:rgba(92,153,242,.1)}
.hero.is-in .net li{animation:dIn 420ms var(--e-out) forwards;animation-delay:calc(.34s + var(--i) * 70ms)}

/* ==========================================================================
   CONTROL CENTER (.cc) — cartão com feed, gráfico e KPIs
   Sequência (após .cc.is-in): feed 1.05s → linha 1.2s → KPIs 1.72s → status .95s
   ========================================================================== */
.cc{background:linear-gradient(168deg,#112045,#0A142E 56%,#060C1E);border:1px solid var(--border-dark-2);
  border-radius:14px;box-shadow:0 44px 100px rgba(0,0,0,.6);overflow:hidden}

/* barra de título */
.cc-t{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-dark);flex-wrap:wrap}
.cc-t b{font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);font-weight:600;color:#fff;letter-spacing:.05em}
.cc-t .r{display:flex;align-items:center;gap:8px}
.cc-status{display:inline-flex;align-items:center;gap:6px;opacity:0;transition:opacity var(--t-base)}
.cc.is-in .cc-status{opacity:1;transition-delay:.95s}

/* KPIs */
.cc-k{display:grid;grid-template-columns:repeat(2,1fr)}
.ck{padding:16px;border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);opacity:0}
.ck:nth-child(2n){border-right:none}
.cc.is-in .ck{animation:dIn 420ms var(--e-out) forwards;animation-delay:calc(1.72s + var(--i) * 70ms)}
.ck>span{display:block;font-size:var(--f-12);color:var(--on-dark-3);margin-bottom:7px}
.ck b{display:block;font-family:Archivo;font-stretch:108%;font-weight:800;font-size:clamp(1.28rem,2.1vw,1.68rem);
  letter-spacing:-.035em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.ck .delta{margin-top:8px}

/* gráfico de linha */
.cc-c{padding:16px;border-top:1px solid var(--border-dark)}
.cc-c .r{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;font-size:var(--f-12)}
.cc-c .r span{color:var(--on-dark-3);font-family:"IBM Plex Mono",monospace}
.cc-c svg{width:100%;height:auto;display:block}
.spark{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sfill{fill:url(#gF);opacity:0;transition:opacity 700ms var(--e-soft) 1.75s}
.cc.is-in .sfill{opacity:1}
.draw{stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
.cc.is-in .draw{animation:draw 900ms var(--e-out) 1.2s forwards}

/* feed de eventos */
.cc-f{border-top:none}
.cc-f li{display:grid;grid-template-columns:58px 1fr auto;gap:11px;align-items:center;
  padding:9px 16px;font-size:var(--f-13);color:var(--on-dark-2);border-bottom:1px solid var(--border-dark);opacity:0;transform:translateX(-7px)}
.cc-f li:last-child{border-bottom:none}
.cc.is-in .cc-f li{animation:fIn 460ms var(--e-out) forwards;animation-delay:calc(1.05s + var(--i) * 130ms)}
@keyframes fIn{to{opacity:1;transform:none}}
.cc-f b{color:#fff;font-weight:500;font-size:var(--f-13)}

/* rodapé "dados ilustrativos" */
.cc-note{padding:9px 16px;border-top:1px solid var(--border-dark);background:rgba(0,0,0,.18);
  display:flex;align-items:center;gap:8px}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .hero{padding-top:136px}
  .cc-k{grid-template-columns:repeat(4,1fr)}
  .ck:nth-child(2n){border-right:1px solid var(--border-dark)}
  .ck:last-child{border-right:none}
}
@media (max-width:600px){
  .hero{padding-top:122px}
  .cc-k{grid-template-columns:repeat(2,1fr)}
  .ck:nth-child(2n){border-right:none}
  .hcta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .draw{stroke-dashoffset:0!important}
  .net li,.ck,.cc-f li{opacity:1!important;transform:none!important}
  .hero::before{opacity:.62}
  .hero h1 i{background-size:100% .075em}
  .cc-status{opacity:1!important}
}