/* ============================================================
   IA na Prática — POLISH PASS v=23 (premium tier)
   Soma sobre o style.css existente. Foco: scroll-progress,
   cursor-glow nos cards, hero refinement, micro-interactions
   ============================================================ */

/* ===== SCROLL PROGRESS BAR (top of page) ===== */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;
  background:transparent;pointer-events:none;
}
.scroll-progress::after{
  content:"";display:block;height:100%;width:var(--sp,0%);
  background:var(--grad);
  box-shadow:0 0 16px rgba(123,63,242,.55), 0 0 4px rgba(37,99,255,.5);
  transition:width .12s cubic-bezier(.4,.7,.2,1);
}

/* ===== CURSOR-FOLLOW GLOW ON CARDS =====
   Use this class to attach a soft gradient blob that follows the mouse
   inside the card. Coordinates set via JS as --mx, --my (px).            */
.glow-card{position:relative;isolation:isolate;overflow:hidden}
.glow-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    rgba(123,63,242,.18), rgba(37,99,255,.10) 35%, transparent 70%);
  opacity:0;transition:opacity .35s ease;
  border-radius:inherit;pointer-events:none;
}
.glow-card:hover::before{opacity:1}
.glow-card::after{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  padding:1px;background:linear-gradient(135deg,rgba(123,63,242,.0),rgba(37,99,255,.0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:background .35s ease;pointer-events:none;
}
.glow-card:hover::after{
  background:linear-gradient(135deg,rgba(123,63,242,.45),rgba(37,99,255,.35) 60%,rgba(6,214,230,.25));
}

/* ===== MAGNETIC CTA — primary button lifts and emits soft glow ===== */
.btn-primary{position:relative}
.btn-primary::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:var(--grad);opacity:0;filter:blur(18px);
  transition:opacity .3s ease;pointer-events:none;
}
.btn-primary:hover::after{opacity:.55}

/* ===== HERO — bigger statement, smoother aurora ===== */
.hero{position:relative;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-bg::before{
  content:"";position:absolute;inset:-10% -5%;
  background:
    radial-gradient(900px 480px at 78% 8%,rgba(123,63,242,.22),transparent 62%),
    radial-gradient(820px 420px at 14% 0%,rgba(37,99,255,.18),transparent 64%),
    radial-gradient(620px 340px at 50% 105%,rgba(6,214,230,.14),transparent 70%);
  animation:auroraDrift 22s ease-in-out infinite alternate;
  filter:saturate(1.05);
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-16px,10px,0) scale(1.02)}
  100%{transform:translate3d(12px,-6px,0) scale(1.01)}
}

/* Headline: tighter tracking, bolder visual hierarchy on the grad word */
.hero h1{
  font-size:clamp(36px,5.2vw,68px)!important;
  line-height:1.02!important;
  letter-spacing:-.04em!important;
  font-weight:800;
}
.hero h1 .grad-text{
  background:linear-gradient(96deg,#7B3FF2 0%,#5B2DD9 28%,#2563FF 64%,#06D6E6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;
  animation:gradFlow 8s ease-in-out infinite alternate;
}
@keyframes gradFlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}

.hero-sub{font-size:clamp(16px,1.55vw,19px);color:#3A364D!important;max-width:580px;line-height:1.6}

/* Hero CTA — bolder, lifted */
.hero-cta .btn-primary{
  padding:17px 30px!important;font-size:16px!important;
  box-shadow:0 14px 32px rgba(123,63,242,.36), 0 2px 4px rgba(123,63,242,.2);
}
.hero-cta .btn-primary:hover{transform:translateY(-3px) scale(1.02)}

/* Hero proof row — better trust badges */
.hero-proof{display:inline-flex;align-items:center;gap:14px}
.proof-txt{font-size:13.5px;color:#3A364D;line-height:1.3}
.proof-txt b{color:var(--ink);font-weight:700}

/* ===== MODULES — cards with cursor glow + lift ===== */
.mod-card{
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
  will-change:transform;
}
.mod-card:hover{transform:translateY(-6px) scale(1.005)}

/* Module number badge */
.m-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--th);font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--purple);background:rgba(123,63,242,.08);
  padding:5px 11px;border-radius:var(--r-pill);margin-bottom:12px;
  border:1px solid rgba(123,63,242,.16);
}

/* Module icon — gradient stops mapped to brand */
.m-ic{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 20px rgba(60,30,160,.18);
  margin-bottom:14px;
}
.m-ic svg{width:24px;height:24px}
.m-ic.g1{background:linear-gradient(135deg,#7B3FF2,#5028D0)}
.m-ic.g2{background:linear-gradient(135deg,#9333EA,#7B3FF2)}
.m-ic.g3{background:linear-gradient(135deg,#6D28D9,#2563FF)}
.m-ic.g4{background:linear-gradient(135deg,#2563FF,#3B82F6)}
.m-ic.g5{background:linear-gradient(135deg,#3B82F6,#06D6E6)}
.m-ic.g6{background:linear-gradient(135deg,#06D6E6,#0EA5E9)}
.m-ic.g7{background:linear-gradient(135deg,#7B3FF2,#EC4899)}
.m-ic.g8{background:linear-gradient(135deg,#EC4899,#F59E0B)}
.m-ic.g9{background:linear-gradient(135deg,#F59E0B,#7B3FF2)}
.m-ic.g10{background:linear-gradient(135deg,#10B981,#06D6E6)}

/* Module tag (entrega) */
.m-tag{
  display:block;font-family:var(--tb);font-size:12.5px;font-weight:700;
  color:var(--purple);background:linear-gradient(135deg,rgba(123,63,242,.08),rgba(37,99,255,.06));
  padding:8px 12px;border-radius:10px;margin-top:14px;
  border:1px dashed rgba(123,63,242,.2);
}

/* ===== FINAL CTA premium ===== */
.final{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(135deg,#7B3FF2 0%,#5B2DD9 30%,#2563FF 70%,#06D6E6 100%);
  padding:64px 40px;text-align:center;color:#fff;
  box-shadow:0 50px 100px -30px rgba(123,63,242,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px 400px at 50% -10%,rgba(255,255,255,.25),transparent 60%);
}
.final::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:var(--grad);filter:blur(40px);opacity:.4;
}
.final h2{color:#fff;font-size:clamp(30px,4.4vw,52px);max-width:880px;margin:14px auto 14px;letter-spacing:-.03em}
.final p{color:rgba(255,255,255,.85);font-size:18px;max-width:580px;margin:0 auto 28px}
.final .btn{position:relative;z-index:1}
.final .btn-white{background:#fff;color:var(--ink);font-weight:800;padding:17px 32px;font-size:16.5px;border:none}
.final .btn-white:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.25)}

/* ===== REVEAL — smoother, longer easing ===== */
.reveal{transition:opacity .9s cubic-bezier(.16,.84,.3,1), transform .9s cubic-bezier(.16,.84,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ===== ANIMATED COUNT (used for stats) ===== */
.count-up{font-variant-numeric:tabular-nums}

/* ===== TYPE RHYTHM — tighten sec-head globally ===== */
.sec-head h2{font-weight:800;line-height:1.05}
.sec-head p{max-width:580px;margin:0 auto}

/* ===== FAQ — premium accordion ===== */
.faq-item{transition:border-color .25s, box-shadow .25s, background .25s}
.faq-item:hover{border-color:rgba(123,63,242,.18)}
.faq-item[open]{background:linear-gradient(135deg,rgba(123,63,242,.025),rgba(37,99,255,.02))}

/* ===== PILL TAG LIVE with smoother ping ===== */
.pill-tag.live .ping{
  position:relative;width:8px;height:8px;border-radius:50%;
  background:var(--purple);
}
.pill-tag.live .ping::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--purple);
  animation:ping-ring 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping-ring{
  0%{transform:scale(1);opacity:.65}
  80%,100%{transform:scale(2.6);opacity:0}
}

/* ===== Reduce motion respect ===== */
@media (prefers-reduced-motion: reduce){
  .hero-bg::before,
  .grad-text,
  .hero h1 .grad-text,
  .pill-tag.live .ping::after,
  .anth-float,
  .float-card{animation:none!important}
  .reveal{transition:none}
  .scroll-progress::after{transition:none}
}