/* ============================================================
   HERO · escolha do Antonio: estilo 3 + estilo 4
   ------------------------------------------------------------
   TIPOGRAFIA CINÉTICA  → a palavra do título digita e troca
   BLOCOS VIVOS         → mas os blocos são TELINHAS do SYSLED
                          flutuando em volta do texto
   Cores e componentes: brandbook v2.1 (/sysled-brand)
   ============================================================ */

/* ===== 1 · FUNDO ===== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:56px 0 0;
  background:linear-gradient(180deg,#EAF5FD 0%,#F6FAFE 48%,#FFFFFF 100%);
}
@media(min-width:768px){.hero{padding:72px 0 0}}

/* ===== 2 · COLUNA CENTRAL ===== */
.hero-wati{max-width:880px;margin:0 auto;text-align:center;position:relative}

/* ===== 3 · SLOGAN ===== */
.slogan{
  display:inline-block;margin-bottom:18px;padding:0;
  background:none;box-shadow:none;border:none;
  font-family:var(--font-heading);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#2B6CB0;
}

/* ===== 4 · TÍTULO — a palavra viva ===== */
.hero-wati h1{
  font-size:clamp(2.1rem,5.6vw,3.8rem);
  line-height:1.1;letter-spacing:-.035em;
  color:#0F172A;
}
/* a palavra que digita e troca */
.hero-wati .troca{
  display:inline-block;color:#2B6CB0;text-align:left;
  min-width:8.6ch;
}
.hero-wati .troca::after{
  content:'';display:inline-block;width:3px;height:.86em;
  background:#2B6CB0;margin-left:2px;vertical-align:-.07em;border-radius:2px;
}
@media(prefers-reduced-motion:no-preference){
  .hero-wati .troca::after{animation:cursorPisca 1s steps(2) infinite}
}
@keyframes cursorPisca{50%{opacity:0}}
/* o marca-texto antigo sai de cena: a palavra viva é o destaque */
.hero-wati .hl{background:none;box-shadow:none;padding:0;color:inherit}

.hero-sub{
  margin:20px auto 0;max-width:44rem;
  font-size:clamp(.98rem,1.6vw,1.12rem);line-height:1.65;
  color:#475569;
}

/* ===== 5 · AS TELINHAS DO SYSLED (os "blocos" do estilo 4) ===== */
.telinha{
  position:absolute;z-index:1;text-align:left;
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 10px 30px rgba(15,23,42,.10);
  font-size:.72rem;color:#1E293B;overflow:hidden;
}
.telinha .t-topo{
  display:flex;align-items:center;gap:6px;
  padding:7px 11px;border-bottom:1px solid #EEF2F6;
  font-family:var(--font-heading);font-size:.58rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#64748B;background:#F8FAFC;
}
.telinha .t-topo i{width:6px;height:6px;border-radius:50%;background:#48C9B0;flex-shrink:0}
.telinha .t-corpo{padding:10px 12px}

/* telinha 1 · indicador de faturamento */
.telinha.kpi{left:-268px;top:-6px;width:212px}
.telinha.kpi b{
  display:block;font-family:var(--font-heading);font-weight:800;
  font-size:1.28rem;letter-spacing:-.02em;color:#0F172A;
  font-variant-numeric:tabular-nums;
}
.telinha.kpi small{display:block;margin-top:2px;font-size:.66rem;color:#1D7B4E}

/* telinha 2 · conversa chegando */
.telinha.chat{left:-252px;bottom:116px;width:224px}
.telinha.chat p{margin:0;font-size:.74rem;line-height:1.45;color:#334155}
.telinha.chat .quem{
  display:block;font-family:var(--font-heading);font-size:.58rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:#2B6CB0;margin-bottom:3px;
}

/* telinha 3 · funil andando */
.telinha.funil{right:-262px;top:8px;width:216px}
.telinha.funil .fx{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-top:6px}
.telinha.funil .fx:first-child{margin-top:0}
.telinha.funil .fx span{font-size:.66rem;color:#475569;white-space:nowrap}
.telinha.funil .fx i{font-style:normal;font-size:.66rem;font-weight:700;color:#0F172A;font-variant-numeric:tabular-nums}
.telinha.funil .fx .tr{height:6px;border-radius:99px;background:#EEF2F6;overflow:hidden}
.telinha.funil .fx .tr u{display:block;height:100%;border-radius:99px;background:#3A8FD6}
.telinha.funil .fx:nth-child(2) .tr u{background:#5BB8F5}
.telinha.funil .fx:nth-child(3) .tr u{background:#48C9B0}

/* telinha 4 · pedido pago */
.telinha.pago{right:-244px;bottom:104px;width:206px}
.telinha.pago .linha-pago{display:flex;align-items:center;gap:9px}
.telinha.pago .ok{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;background:#ECFDF5;
}
.telinha.pago .ok svg{width:14px;height:14px;stroke:#1D7B4E;stroke-width:2}
.telinha.pago b{display:block;font-family:var(--font-heading);font-size:.8rem;color:#0F172A}
.telinha.pago small{display:block;font-size:.64rem;color:#64748B}

/* flutuação contínua, dessincronizada (o gesto do estilo 4) */
@media(prefers-reduced-motion:no-preference){
  .telinha.kpi  {animation:flutuaCima  3.4s infinite ease-in-out}
  .telinha.chat {animation:flutuaBaixo 3.0s infinite ease-in-out}
  .telinha.funil{animation:flutuaBaixo 3.7s infinite ease-in-out}
  .telinha.pago {animation:flutuaCima  3.2s infinite ease-in-out}
}
/* só aparecem quando há espaço de sobra */
@media(max-width:1359px){.telinha{display:none}}

/* ===== 6 · PROVA ===== */
.hero-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:24px}
.hero-proof span{
  display:inline-flex;align-items:center;gap:7px;
  padding:.55rem 1.05rem;border-radius:9999px;
  background:#FFFFFF;border:1px solid #E2E8F0;
  font-size:.8rem;color:#475569;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.hero-proof svg{width:15px;height:15px;stroke:#2B6CB0;flex-shrink:0}
@media(max-width:639px){.hero-proof span:nth-child(3){display:none}}

/* ===== 7 · BOTÕES — componente do brandbook ===== */
.hero-botoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.hero-botoes .btn-adesivo{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 2rem;border-radius:12px;
  font-family:var(--font-heading);font-size:.9rem;font-weight:700;
  text-decoration:none;border:1.5px solid transparent;
  transition:all .18s ease;
}
.hero-botoes .primario{
  background:#2B6CB0;color:#FFFFFF;
  box-shadow:0 2px 8px rgba(43,108,176,.3);
}
.hero-botoes .primario:hover{
  background:#3A8FD6;box-shadow:0 4px 14px rgba(43,108,176,.38);
  transform:translateY(-1px);
}
.hero-botoes .secundario{
  background:transparent;color:#2B6CB0;border-color:#2B6CB0;box-shadow:none;
}
.hero-botoes .secundario:hover{background:rgba(43,108,176,.06)}
.hero-botoes .btn-adesivo:active{transform:translateY(0) scale(.985)}

/* ===== 8 · A TELA GRANDE DO PRODUTO ===== */
.hero-tela{
  margin-top:40px;
  max-height:min(46vh,430px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  padding:0;background:none;box-shadow:none;border-radius:0;
}
@media(max-width:639px){.hero-tela{margin-top:30px;max-height:min(36vh,280px)}}
.hero-tela .tela-hero{
  border-radius:16px;transform:none;overflow:hidden;
  box-shadow:0 8px 40px rgba(15,23,42,.15),0 2px 12px rgba(15,23,42,.08);
  background:#FFFFFF;
}

/* ===== 9 · ENTRADA ===== */
@media(prefers-reduced-motion:no-preference){
  .hero .slogan,.hero-wati h1,.hero-sub,.hero-proof,.hero-botoes,.hero-tela,.telinha{
    opacity:0;transform:translateY(14px);
    animation:entraMarca .7s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero .slogan {animation-delay:.05s}
  .hero-wati h1 {animation-delay:.12s}
  .hero-sub     {animation-delay:.19s}
  .hero-proof   {animation-delay:.26s}
  .hero-botoes  {animation-delay:.33s}
  .hero-tela    {animation-delay:.28s}
  .telinha.kpi  {animation:entraMarca .7s cubic-bezier(.16,1,.3,1) .5s forwards,  flutuaCima  3.4s 1.3s infinite ease-in-out}
  .telinha.chat {animation:entraMarca .7s cubic-bezier(.16,1,.3,1) .62s forwards, flutuaBaixo 3.0s 1.4s infinite ease-in-out}
  .telinha.funil{animation:entraMarca .7s cubic-bezier(.16,1,.3,1) .74s forwards, flutuaBaixo 3.7s 1.5s infinite ease-in-out}
  .telinha.pago {animation:entraMarca .7s cubic-bezier(.16,1,.3,1) .86s forwards, flutuaCima  3.2s 1.6s infinite ease-in-out}
}
@keyframes entraMarca{to{opacity:1;transform:translateY(0)}}

/* ===== 10 · MÓDULOS ===== */
.modulos{
  margin-top:0;padding:26px 0 8px;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.mod{
  padding:16px 17px;border-radius:16px;
  background:#FFFFFF;border:1px solid #E2E8F0;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.mod:hover{box-shadow:0 8px 40px rgba(0,0,0,.12);transform:translateY(-3px)}
.mod-ic{width:34px;height:34px;border-radius:10px;background:#EAF5FD;margin-bottom:10px}
.mod-ic svg{width:18px;height:18px;stroke:#2B6CB0}
.mod b{font-size:.92rem;color:#0F172A}
.mod small{margin-top:5px;font-size:.77rem;line-height:1.42;color:#475569}
@media(max-width:639px){
  .modulos{grid-template-columns:1fr 1fr;gap:9px}
  .mod{padding:13px;text-align:center}
  .mod-ic{margin:0 auto 8px}
  .mod small{display:none}
}