*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

:root{
  --primary:#3B47D6;
  --primary-dark:#2f3ac2;

  --green-1:#25D366;
  --green-2:#1ebe5d;
  --green-3:#128C7E;

  --secondary:#eef2ff;

  --text:#101828;
  --text-light:#667085;

  --white:#ffffff;
  --bg:#f5f8ff;

  --border:rgba(255,255,255,.35);

  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.72);

  --shadow:
    0 10px 30px rgba(17,24,39,.06),
    0 25px 60px rgba(59,71,214,.10);

  --shadow-soft:
    0 8px 30px rgba(59,71,214,.08);

  --blur:blur(18px);
}


    body{
      font-family:'Inter',sans-serif;
      background:var(--bg);
      color:var(--text);
      overflow-x:hidden;
      background:
    radial-gradient(circle at top left, rgba(59,71,214,.10), transparent 30%),
    radial-gradient(circle at bottom right, rgba(37,211,102,.10), transparent 25%),
    linear-gradient(to bottom, #f7f9ff, #eef3ff);
    }

/* Efeito Fundo Animado */

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);

  background-size:40px 40px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
  z-index:-2;
}

body::after{
  content:'';
  position:fixed;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(59,71,214,.12), transparent 70%);
  top:-200px;
  left:-100px;
  filter:blur(40px);
  animation:floatBg 12s ease-in-out infinite;
  z-index:-1;
}

@keyframes floatBg{
  0%{
    transform:translateY(0px) translateX(0px);
  }
  50%{
    transform:translateY(40px) translateX(30px);
  }
  100%{
    transform:translateY(0px) translateX(0px);
  }
}

    .container{
      width:100%;
      max-width:1200px;
      margin:0 auto;
      padding:0 24px;
    }

    a{
      text-decoration:none;
    }

    img{
      max-width:100%;
      display:block;
    }

    /* Header*/

    header{
      position:sticky;
      top:0;
      z-index:999;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(0,0,0,.05);
    }

    .navbar{
      height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      font-size:1.15rem;
      font-weight:800;
      color:var(--text);
    }

    .logo img{
      height:42px;
    }

    .nav-cta{
      background:var(--primary);
      color:#fff;
      padding:14px 22px;
      border-radius:14px;
      font-weight:700;
      transition:.25s;
      box-shadow:0 10px 25px rgba(59,71,214,.25);
    }

    .nav-cta:hover{
      background:var(--primary-dark);
      transform:translateY(-2px);
    }

    /* Hero */

    .hero{
      padding:90px 0 70px;
      position:relative;
      overflow:hidden;
    }

    .hero::before{
      content:'';
      position:absolute;
      width:700px;
      height:700px;
      background:radial-gradient(circle, rgba(59,71,214,.16) 0%, rgba(59,71,214,0) 70%);
      top:-200px;
      right:-200px;
      z-index:0;
    }

    .hero-content{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:60px;
      align-items:center;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--secondary);
      color:var(--primary);
      padding:10px 18px;
      border-radius:999px;
      font-weight:700;
      margin-bottom:24px;
      font-size:.95rem;
    }

    .hero h1{
      font-size:4rem;
      line-height:1.05;
      font-weight:800;
      letter-spacing:-2px;
      margin-bottom:24px;
    }

    .hero h1 span{
      color:var(--primary);
    }

    .hero p{
      font-size:1.15rem;
      color:var(--text-light);
      line-height:1.8;
      margin-bottom:34px;
      max-width:620px;
    }

    .hero-buttons{
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      margin-bottom:34px;
    }

    .btn-primary{
      background:var(--primary);
      color:#fff;
      padding:18px 30px;
      border-radius:16px;
      font-weight:800;
      font-size:1rem;
      transition:.25s;
      box-shadow:0 15px 30px rgba(59,71,214,.25);
    }

    .btn-primary:hover{
      background:var(--primary-dark);
      transform:translateY(-3px);
    }

    .btn-secondary{
      background:#fff;
      border:1px solid var(--border);
      color:var(--text);
      padding:18px 30px;
      border-radius:16px;
      font-weight:700;
      transition:.25s;
    }

    .btn-secondary:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow);
    }

    .hero-stats{
      display:flex;
      gap:30px;
      flex-wrap:wrap;
    }

    .stat{
      background:#fff;
      padding:18px 22px;
      border-radius:18px;
      box-shadow:var(--shadow);
      min-width:150px;
    }

    .stat h3{
      font-size:1.8rem;
      color:var(--primary);
      margin-bottom:6px;
    }

    .stat span{
      color:var(--text-light);
      font-size:.95rem;
    }

    .hero-image{
      position:relative;
    }

    .hero-image img{
      border-radius:32px;
      box-shadow:0 30px 60px rgba(0,0,0,.12);
    }

    .floating-card{
      position:absolute;
      background:#fff;
      padding:18px;
      border-radius:20px;
      box-shadow:var(--shadow);
      width:220px;
    }

    .floating-card.top{
      top:30px;
      left:-40px;
    }

    .floating-card.bottom{
      /* bottom:30px; */
      right:-40px;
    }

    .floating-card h4{
      font-size:1rem;
      margin-bottom:8px;
    }

    .floating-card p{
      margin:0;
      font-size:.92rem;
      line-height:1.5;
      color:var(--text-light);
    }

    /* Section */

    section{
      padding:90px 0;
    }

    .section-title{
      text-align:center;
      margin-bottom:60px;
    }

    .section-title span{
      color:var(--primary);
      font-weight:800;
      text-transform:uppercase;
      font-size:.9rem;
      letter-spacing:1px;
    }

    .section-title h2{
      font-size:3rem;
      margin-top:14px;
      line-height:1.1;
    }

    .section-title p{
      color:var(--text-light);
      margin-top:18px;
      max-width:700px;
      margin-left:auto;
      margin-right:auto;
      line-height:1.8;
    }

    /* BENEFITS */

    .benefits{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:26px;
    }

    .benefit-card{
      background:#fff;
      border-radius:28px;
      padding:34px;
      box-shadow:var(--shadow);
      transition:.25s;
    }

    .benefit-card:hover{
      transform:translateY(-6px);
    }

    .icon{
      width:62px;
      height:62px;
      border-radius:18px;
      background:var(--secondary);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.6rem;
      margin-bottom:22px;
    }

    .benefit-card h3{
      margin-bottom:14px;
      font-size:1.25rem;
    }

    .benefit-card p{
      color:var(--text-light);
      line-height:1.7;
    }

    /* Marketplaces */

    .marketplaces{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:18px;
      margin-top:40px;
    }

    .marketplace{
      background:#fff;
      border:1px solid var(--border);
      padding:16px 24px;
      border-radius:16px;
      font-weight:700;
      color:var(--text-light);
      box-shadow:0 8px 20px rgba(0,0,0,.04);
    }

    /* Showcase */

    .showcase{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:40px;
      align-items:center;
    }

    .showcase img{
      border-radius:28px;
      box-shadow:var(--shadow);
    }

    .showcase-content h2{
      font-size:3rem;
      line-height:1.1;
      margin-bottom:24px;
    }

    .showcase-content p{
      color:var(--text-light);
      line-height:1.9;
      margin-bottom:24px;
    }

    .feature-list{
      display:flex;
      flex-direction:column;
      gap:16px;
      margin-bottom:36px;
    }

    .feature{
      display:flex;
      gap:14px;
      align-items:flex-start;
    }

    .feature-check{
      min-width:28px;
      height:28px;
      border-radius:50%;
      background:var(--secondary);
      color:var(--primary);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
    }

    /* CTA */

    .cta-section{
      padding:110px 0;
    }

    .cta-box{
      background:linear-gradient(135deg,var(--primary),#5a65ff);
      border-radius:36px;
      padding:70px;
      text-align:center;
      color:#fff;
      position:relative;
      overflow:hidden;
    }

    .cta-box::before{
      content:'';
      position:absolute;
      width:500px;
      height:500px;
      background:rgba(255,255,255,.08);
      border-radius:50%;
      top:-250px;
      right:-150px;
    }

    .cta-box h2{
      font-size:3rem;
      margin-bottom:22px;
      position:relative;
      z-index:2;
    }

    .cta-box p{
      max-width:760px;
      margin:0 auto 36px;
      line-height:1.8;
      color:rgba(255,255,255,.9);
      position:relative;
      z-index:2;
    }

    .cta-box a{
      display:inline-block;
      background:#fff;
      color:var(--primary);
      padding:18px 34px;
      border-radius:18px;
      font-weight:800;
      transition:.25s;
      position:relative;
      z-index:2;
    }

    .cta-box a:hover{
      transform:translateY(-4px);
    }

    /* Footer */

    footer{
      padding:40px 0 60px;
      text-align:center;
      color:var(--text-light);
    }

    /* Responsive */

    @media(max-width:980px){

      .hero-content,
      .showcase{
        grid-template-columns:1fr;
      }

      .hero h1{
        font-size:3rem;
      }

      .benefits{
        grid-template-columns:1fr;
      }

      .floating-card{
        display:none;
      }

      .cta-box{
        padding:50px 30px;
      }

      .cta-box h2{
        font-size:2.2rem;
      }
    }

    @media(max-width:640px){

      .hero{
        padding-top:50px;
      }

      .hero h1{
        font-size:2.3rem;
      }

      .section-title h2,
      .showcase-content h2{
        font-size:2rem;
      }

      .hero-buttons{
        flex-direction:column;
      }

      .btn-primary,
      .btn-secondary{
        width:100%;
        text-align:center;
      }

      .nav-cta{
        display:none;
      }

      .cta-box h2{
        font-size:1.8rem;
      }
    }
	


/* =========================
   HEADER GLASSMORPHISM
========================= */

header{
  background:rgba(255,255,255,.50);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(255,255,255,.35);

  box-shadow:
    0 8px 30px rgba(17,24,39,.04);
}

/* =========================
   HERO
========================= */

.hero{
  position:relative;
}

.hero::after{
  content:'';
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:
    radial-gradient(circle,
    rgba(37,211,102,.14),
    transparent 70%);
  bottom:-100px;
  right:10%;
  filter:blur(20px);
}

/* =========================
   BADGE
========================= */

.badge{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-soft);
}

/* =========================
   TÍTULO ANIMADO
========================= */

.hero h1{
  position:relative;
  animation:fadeUp .8s ease;
}

.hero h1 span{
  background:linear-gradient(
    90deg,
    #3B47D6,
    #5d69ff,
    #25D366
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  background-size:200% auto;

  animation:gradientMove 6s linear infinite;
}

@keyframes gradientMove{
  to{
    background-position:200% center;
  }
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   HERO IMAGE
========================= */

.hero-image{
  position:relative;
}

.hero-image img{
  border-radius:34px;

  border:1px solid rgba(255,255,255,.5);

  box-shadow:
    0 20px 50px rgba(59,71,214,.15),
    0 30px 80px rgba(0,0,0,.08);

  transform:perspective(1000px) rotateY(-4deg);
  transition:.45s ease;
}

.hero-image:hover img{
  transform:
    perspective(1000px)
    rotateY(0deg)
    translateY(-8px);
}

/* =========================
   GLASS CARDS
========================= */

.benefit-card,
.stat,
.marketplace,
.floating-card{
  background:rgba(255,255,255,.58);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.5);

  box-shadow:var(--shadow);

  position:relative;
  overflow:hidden;
}

.benefit-card::before,
.stat::before,
.marketplace::before{
  content:'';
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.35),
      transparent 45%
    );

  pointer-events:none;
}

.benefit-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 20px 50px rgba(59,71,214,.12);
}

/* =========================
   ÍCONES
========================= */

.icon{
  background:
    linear-gradient(
      135deg,
      rgba(59,71,214,.14),
      rgba(37,211,102,.18)
    );

  backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,.5);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.4),
    0 10px 25px rgba(59,71,214,.10);
}

/* =========================
   BOTÕES WHATSAPP
========================= */

.btn-primary,
.nav-cta,
.cta-box a{
  background:
    linear-gradient(
      135deg,
      var(--green-1),
      var(--green-2),
      var(--green-3)
    );

  color:#fff;

  border:none;

  box-shadow:
    0 10px 30px rgba(37,211,102,.28),
    inset 0 1px 0 rgba(255,255,255,.2);

  position:relative;
  overflow:hidden;
}

/* brilho animado */

.btn-primary::before,
.nav-cta::before,
.cta-box a::before{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:80%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  transform:skewX(-20deg);
}

.btn-primary:hover::before,
.nav-cta:hover::before,
.cta-box a:hover::before{
  animation:shine .9s ease;
}

@keyframes shine{
  100%{
    left:150%;
  }
}

.btn-primary:hover,
.nav-cta:hover,
.cta-box a:hover{
  transform:
    translateY(-3px)
    scale(1.02);

  box-shadow:
    0 18px 40px rgba(37,211,102,.34);
}

/* =========================
   BOTÃO SECUNDÁRIO
========================= */

.btn-secondary{
  background:rgba(255,255,255,.55);

  backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.6);

  box-shadow:var(--shadow-soft);
}

.btn-secondary:hover{
  background:#fff;
  transform:translateY(-3px);
}

/* =========================
   TÍTULOS DAS SEÇÕES
========================= */

.section-title h2,
.showcase-content h2{
  position:relative;
  display:inline-block;
}

.section-title h2::after,
.showcase-content h2::after{
  content:'';
  position:absolute;

  width:60%;
  height:10px;

  left:50%;
  transform:translateX(-50%);

  bottom:-6px;

  background:
    linear-gradient(
      90deg,
      rgba(59,71,214,.18),
      rgba(37,211,102,.20)
    );

  border-radius:999px;

  z-index:-1;
}

/* =========================
   SHOWCASE
========================= */

.showcase img{
  border-radius:32px;

  border:1px solid rgba(255,255,255,.55);

  box-shadow:
    0 20px 60px rgba(59,71,214,.12);

  transition:.45s ease;
}

.showcase img:hover{
  transform:
    translateY(-8px)
    scale(1.01);
}

/* =========================
   CHECKLIST
========================= */

.feature-check{
  background:
    linear-gradient(
      135deg,
      var(--green-1),
      var(--green-3)
    );

  color:#fff;

  box-shadow:
    0 10px 20px rgba(37,211,102,.25);
}

/* =========================
   CTA FINAL
========================= */

.cta-box{
  position:relative;

  background:
    linear-gradient(
      135deg,
      rgba(59,71,214,.92),
      rgba(37,211,102,.92)
    );

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.15);

  overflow:hidden;

  box-shadow:
    0 30px 80px rgba(59,71,214,.22);
}

.cta-box::after{
  content:'';
  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.12),
      transparent 70%
    );

  bottom:-250px;
  left:-120px;
}

/* =========================
   MARKETPLACE TAGS
========================= */

.marketplace{
  transition:.25s ease;
}

.marketplace:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.75);
}

/* =========================
   FLOATING ANIMATION
========================= */

.floating-card{
  animation:floatingCard 5s ease-in-out infinite;
}

.floating-card.bottom{
  animation-delay:2s;
}

@keyframes floatingCard{
  0%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(-12px);
  }
  100%{
    transform:translateY(0px);
  }
}

/* =========================
   SECTION TRANSITION
========================= */

section{
  position:relative;
}

section::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(59,71,214,.12),
      transparent
    );
}

/* =========================
   FOOTER
========================= */

footer{
  position:relative;
  color:#7a8193;
}

footer::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);

  width:200px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(59,71,214,.18),
      transparent
    );
}

/* Social Proof Popup */

.social-proof{
  position:fixed;

  right:24px;
  bottom:24px;

  z-index:9999;

  display:flex;
  align-items:center;
  gap:14px;

  width:320px;
  max-width:calc(100vw - 24px);

  padding:14px 16px;

  border-radius:22px;

  background:rgba(255,255,255,.68);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.55);

  box-shadow:
    0 10px 30px rgba(17,24,39,.08),
    0 20px 60px rgba(37,211,102,.10);

  overflow:hidden;

  animation:popupIn .55s ease;

  transition:
    opacity .35s ease,
    transform .35s ease;
}

/* brilho glass */

.social-proof::before{
  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.35),
      transparent 45%
    );

  pointer-events:none;
}

/* barra lateral */

.social-proof::after{
  content:'';

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:5px;

  background:
    linear-gradient(
      to bottom,
      #25D366,
      #1ebe5d,
      #128C7E
    );
}

/* ícone */

.social-proof-icon{
  min-width:52px;
  width:52px;
  height:52px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      135deg,
      rgba(37,211,102,.14),
      rgba(18,140,126,.16)
    );

  color:#1ebe5d;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.5),
    0 10px 20px rgba(37,211,102,.10);
}

/* conteúdo */

.social-proof-content{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.social-proof-content strong{
  font-size:.90rem;
  font-weight:800;

  color:#128C7E;
}

.social-proof-content span{
  font-size:.80rem;
  color:#344054;

  margin-top:2px;
}

.social-proof-content small{
  font-size:.78rem;
  color:#667085;

  margin-top:4px;
}

/* animação */

@keyframes popupIn{

  from{
    opacity:0;

    transform:
      translateY(20px)
      scale(.96);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

}

/* mobile */

@media(max-width:640px){

  .social-proof{
    right:12px;
    left:12px;
    bottom:14px;

    width:auto;

    padding:13px 14px;
  }

}

/* CTA pulsante hover*/

.btn-primary,
.nav-cta,
.cta-box a{
  position:relative;
  overflow:hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

/* efeito pulsante */

.btn-primary::after,
.nav-cta::after,
.cta-box a::after{
  content:'';

  position:absolute;
  inset:0;

  border-radius:inherit;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.25),
      transparent 70%
    );

  opacity:0;

  transform:scale(.9);

  pointer-events:none;
}

/* hover */

.btn-primary:hover,
.nav-cta:hover,
.cta-box a:hover{

  transform:
    translateY(-3px)
    scale(1.03);

  filter:brightness(1.03);

  box-shadow:
    0 0 0 0 rgba(37,211,102,.45),
    0 18px 45px rgba(37,211,102,.30);

  animation:pulseGlow 1.6s infinite;
}

/* glow pulsante */

.btn-primary:hover::after,
.nav-cta:hover::after,
.cta-box a:hover::after{
  animation:pulseOverlay 1.6s infinite;
}

@keyframes pulseGlow{

  0%{
    box-shadow:
      0 0 0 0 rgba(37,211,102,.45),
      0 18px 45px rgba(37,211,102,.30);
  }

  70%{
    box-shadow:
      0 0 0 16px rgba(37,211,102,0),
      0 20px 55px rgba(37,211,102,.38);
  }

  100%{
    box-shadow:
      0 0 0 0 rgba(37,211,102,0),
      0 18px 45px rgba(37,211,102,.30);
  }

}

@keyframes pulseOverlay{

  0%{
    opacity:0;
    transform:scale(.92);
  }

  50%{
    opacity:1;
    transform:scale(1.04);
  }

  100%{
    opacity:0;
    transform:scale(1.08);
  }

}