/* =========================================================
   Site Express 72h — Digitalize MPE  ·  V3 "Tráfego 5.0"
   Landing page de conversão. Mobile first.
   Identidade visual alinhada ao Tráfego 5.0: roxo #533afd,
   seções escuras quase-pretas alternadas com claras,
   tipografia Sora + Inter. Portfólio com projetos reais.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Roxo da marca */
  --violet:#533AFD;
  --violet-hover:#4530E0;
  --violet-deep:#351FD3;
  --violet-300:#A394FF;   /* roxo claro para fundos escuros */
  --violet-100:#ECE9FF;   /* roxo suave para fundos claros */

  /* Escuros */
  --dark:#09080E;         /* seções escuras e rodapé */
  --dark-2:#12101B;

  /* Texto */
  --ink:#121019;
  --ink-800:#292633;
  --muted:#6F6A7B;
  --muted-light:#AAA4B8;  /* texto de apoio sobre fundo escuro */

  /* Superfícies */
  --white:#FFFFFF;
  --surface:#FAFAFA;      /* "papel" — seções claras alternadas */
  --tint:#ECE9FF;         /* pílulas e destaques suaves */
  --lilac:#F5F3F9;        /* fundo da seção de preço */
  --line:#E7E4ED;
  --line-strong:#D5D0E0;
  --line-dark:rgba(255,255,255,.14);

  /* Apoio */
  --wa:#25D366;
  --amber:#F2A43B;

  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:24px;            /* raio dos cards, como no Tráfego 5.0 */
  --r-btn:12px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(21,15,44,.04), 0 12px 34px -18px rgba(21,15,44,.20);
  --sh-2:0 2px 6px rgba(21,15,44,.05), 0 20px 50px -24px rgba(10,8,25,.30);
  --sh-3:0 4px 10px rgba(21,15,44,.06), 0 34px 90px -32px rgba(10,8,25,.42);
  --sh-violet:0 14px 34px -12px rgba(83,58,253,.55);

  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display:"Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --pad:clamp(1.25rem, 5vw, 2rem);
  --sec-y:clamp(4rem, 9vw, 7.5rem);
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; line-height:1.14; letter-spacing:-.022em; font-weight:800; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
strong,b{ font-weight:700; }
:target{ scroll-margin-top:6.5rem; }
section[id]{ scroll-margin-top:5rem; }

/* Foco visível e consistente */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--violet);
  outline-offset:3px;
  border-radius:6px;
}
.sec--dark :where(a,button):focus-visible,
.final :where(a,button):focus-visible,
.ft :where(a,button):focus-visible{ outline-color:#fff; }

.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:200;
  padding:.75rem 1.15rem; background:var(--violet); color:#fff;
  border-radius:var(--r-sm); font-weight:600;
  transform:translateY(-160%); transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{ width:1.25em; height:1.25em; flex:none; }

/* ---------- 3. Layout ---------- */
.wrap{ width:min(100% - (var(--pad) * 2), 1200px); margin-inline:auto; }
.wrap--narrow{ max-width:820px; }

.sec{ padding-block:var(--sec-y); position:relative; }
.sec--tint{ background:var(--surface); }
.sec--dark{
  background:
    radial-gradient(64rem 32rem at 82% -12%, rgba(83,58,253,.34), transparent 64%),
    var(--dark);
  color:#fff;
}
.sec--dark h2,.sec--dark h3{ color:#fff; }
/* Preço em lilás claro, com o cartão branco em destaque (padrão Tráfego 5.0) */
.sec--price{ background:var(--lilac); }

.sec__head{ max-width:44rem; margin-bottom:clamp(2.25rem,5vw,3.5rem); }
.sec__head h2{ font-size:clamp(1.8rem, 4.4vw, 3rem); }
.sec__lead{
  margin-top:1rem; font-size:clamp(1rem,1.6vw,1.125rem);
  color:var(--muted); max-width:38rem;
}
.sec__head--light .sec__lead{ color:var(--muted-light); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8125rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--violet); margin-bottom:1rem;
}
.sec__head--light .eyebrow{ color:var(--violet-300); }
.eyebrow .ic{ width:1.05em; height:1.05em; }

.grid{ display:grid; gap:1.25rem; }
@media (min-width:640px){ .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){
  .grid--3{ grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  .grid--4{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- 4. Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.5rem;
  min-height:48px;
  border-radius:var(--r-btn);
  font-family:var(--display);
  font-weight:800; font-size:.95rem; letter-spacing:.005em;
  text-align:center; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease);
}
.btn .ic{ width:1.15em; height:1.15em; transition:transform .25s var(--ease); }
.btn:hover .ic{ transform:translateX(3px); }
.btn--sm{ padding:.65rem 1.1rem; min-height:42px; font-size:.875rem; border-radius:12px; }
.btn--lg{ padding:1.05rem 1.9rem; min-height:56px; font-size:1.02rem; }
.btn--xl{ padding:1.2rem 2.1rem; min-height:62px; font-size:1.08rem; border-radius:14px; }
.btn--block{ display:flex; width:100%; }

.btn--primary{ background:var(--violet); color:#fff; box-shadow:var(--sh-violet); }
.btn--primary:hover{ background:var(--violet-hover); transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(83,58,253,.72); }
.btn--primary:active{ transform:translateY(0); }

.btn--ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line-strong); box-shadow:var(--sh-1); }
.btn--ghost:hover{ border-color:var(--violet); color:var(--violet); transform:translateY(-2px); }
.btn--ghost .ic:first-child{ color:var(--wa); }
.btn--ghost:hover .ic{ transform:none; }

.btn--white{ background:#fff; color:var(--violet-deep); box-shadow:0 18px 40px -18px rgba(0,0,0,.55); }
.btn--white:hover{ transform:translateY(-2px); box-shadow:0 24px 50px -18px rgba(0,0,0,.6); }

.link{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--violet); font-weight:700; margin-top:1.4rem;
}
.link .ic{ width:1.05em; height:1.05em; transition:transform .25s var(--ease); }
.link:hover{ text-decoration:underline; text-underline-offset:4px; }
.link:hover .ic{ transform:translateX(3px); }

/* ---------- 5. Header ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  /* Fundo sólido: o header fica sobre o branco do body no topo da página,
     então translucidez aqui viraria cinza em vez de escuro. */
  background:var(--dark);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:var(--line-dark); box-shadow:0 8px 30px -16px rgba(0,0,0,.9); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px; }
.hdr__logo img{ width:auto; height:30px; border-radius:6px; }

.hdr__nav{ display:none; }
.hdr__nav a:not(.btn){
  font-size:.925rem; font-weight:500; color:rgba(255,255,255,.82);
  transition:color .2s var(--ease); position:relative;
}
.hdr__nav a:not(.btn):hover{ color:#fff; }
/* CTA do header em roxo cheio sobre o fundo escuro */
.hdr__cta.btn--primary{ background:var(--violet); color:#fff; box-shadow:var(--sh-violet); }
.hdr__cta.btn--primary:hover{ background:var(--violet-hover); color:#fff; }

.hdr__burger{
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:12px; border:1px solid rgba(255,255,255,.35); color:#fff;
}
.hdr__burger .ic{ width:22px; height:22px; }
.hdr__burger .ic--close{ display:none; }
.hdr__burger[aria-expanded="true"] .ic--open{ display:none; }
.hdr__burger[aria-expanded="true"] .ic--close{ display:block; }

@media (max-width:959px){
  .hdr__nav{
    position:fixed; inset:70px 0 auto; z-index:99;
    display:flex; flex-direction:column; gap:.25rem;
    padding:1rem var(--pad) 1.5rem;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--sh-2);
    transform:translateY(-115%);
    transition:transform .32s var(--ease);
    visibility:hidden;
  }
  .hdr__nav.is-open{ transform:translateY(0); visibility:visible; }
  .hdr__nav a:not(.btn){ padding:.85rem .25rem; font-size:1rem; border-bottom:1px solid var(--line); color:var(--ink); }
  .hdr__nav a:not(.btn):hover{ color:var(--violet); }
  .hdr__nav .hdr__cta.btn--primary{ background:var(--violet); color:#fff; }
  .hdr__cta{ margin-top:1rem; width:100%; }
}
@media (min-width:960px){
  .hdr__nav{ display:flex; align-items:center; gap:2rem; }
  .hdr__burger{ display:none; }
  .hdr__logo img{ height:34px; }
}
.hdr__scrim{
  position:fixed; inset:0; z-index:98;
  background:rgba(9,8,14,.55); backdrop-filter:blur(2px);
  animation:fade .25s var(--ease);
}
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(2.75rem,7vw,5rem) clamp(3.5rem,7vw,6rem);
  background:
    radial-gradient(48rem 30rem at 18% 8%, rgba(83,58,253,.30), transparent 62%),
    var(--dark);
  color:#fff;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 22%, #000 0%, transparent 80%);
  mask-image:radial-gradient(75% 65% at 50% 22%, #000 0%, transparent 80%);
  pointer-events:none;
}
.hero__glow{
  position:absolute; top:-26rem; right:-16rem; width:54rem; height:54rem;
  background:radial-gradient(circle, rgba(115,95,255,.30), transparent 62%);
  pointer-events:none;
}
.hero__in{ position:relative; display:grid; gap:clamp(2.75rem,6vw,3.5rem); }

.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem .5rem .8rem;
  background:rgba(83,58,253,.22); color:#fff;
  border:1px solid rgba(163,148,255,.45);
  border-radius:var(--r-pill);
  font-size:.8125rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.badge .ic{ width:1.05em; height:1.05em; color:var(--violet-300); }

.hero__h1{
  margin-top:1.35rem;
  font-size:clamp(2.2rem, 6.4vw, 4.05rem);
  line-height:1.06;
  letter-spacing:-.032em;
}
/* Palavra-chave do H1 em roxo claro, como no Tráfego 5.0 */
.hl{ position:relative; color:#8F7BFF; white-space:nowrap; }
.hl__ink{
  position:absolute; left:-.04em; right:-.04em; bottom:.03em; height:.28em;
  background:linear-gradient(90deg, rgba(83,58,253,.55), rgba(83,58,253,.15));
  border-radius:.2em; z-index:-1;
  transform:scaleX(0); transform-origin:left;
  animation:hl .7s .5s var(--ease) forwards;
}
@keyframes hl{ to{ transform:scaleX(1) } }

.hero__sub{
  margin-top:1.35rem; max-width:32rem;
  font-size:clamp(1.075rem,2.1vw,1.3rem); color:rgba(255,255,255,.94); font-weight:500;
}
.hero__sub strong{ color:#8F7BFF; font-weight:700; white-space:nowrap; }
.hero__lead{
  margin-top:.9rem; max-width:31rem;
  font-size:clamp(.975rem,1.5vw,1.0625rem); color:rgba(255,255,255,.78);
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.hero__actions .btn{ flex:1 1 15rem; }
/* CTA principal em roxo cheio sobre o fundo escuro */
.hero .btn--ghost{ background:rgba(255,255,255,.07); color:#fff; border-color:var(--line-dark); }
.hero .btn--ghost:hover{ border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.11); }
.hero__note{ margin-top:.9rem; font-size:.875rem; color:rgba(255,255,255,.72); }

.trust{
  display:flex; flex-wrap:wrap; gap:.65rem 1.5rem;
  margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line-dark);
}
.trust li{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:600; color:#fff; }
.trust .ic{ width:1.05em; height:1.05em; padding:.15em; color:#fff; background:var(--violet); border-radius:50%; }

@media (min-width:1000px){
  .hero__in{ grid-template-columns:minmax(0,1.02fr) minmax(0,1.15fr); align-items:center; gap:3.5rem; }
}

/* ---------- 7. Hero: notebook + celular ---------- */
.hero__visual{ position:relative; }
/* O padding reserva as margens onde os chips flutuam sem cobrir o mockup. */
.stage{ position:relative; padding:3.25rem 0 4.25rem; }

.laptop{ position:relative; z-index:1; }
.laptop__screen{
  background:#1B1826;
  padding:.5rem .5rem .5rem;
  border-radius:14px 14px 4px 4px;
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(255,255,255,.08);
}
.laptop__base{
  position:relative;
  height:12px; margin-inline:-3.5%;
  background:linear-gradient(180deg,#2A2738 0%,#16141F 100%);
  border-radius:0 0 12px 12px;
  box-shadow:0 14px 22px -14px rgba(23,32,51,.65);
}
.laptop__base span{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:16%; height:4px; background:rgba(255,255,255,.16);
  border-radius:0 0 6px 6px;
}

.phone{
  position:absolute; z-index:3;
  right:-3%; bottom:1rem; width:24.5%; max-width:164px;
}
.phone__frame{
  position:relative;
  background:#1B1826;
  padding:.42rem;
  border-radius:22px;
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(255,255,255,.1);
}
.phone__screen{ overflow:hidden; border-radius:16px; background:#fff; }
.phone__notch{
  position:absolute; z-index:2; top:.42rem; left:50%; transform:translateX(-50%);
  width:36%; height:11px; background:#1B1826; border-radius:0 0 8px 8px;
}
.phone__notch--sm{ height:9px; top:.3rem; }

.chip{
  position:absolute; z-index:4;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem;
  background:rgba(18,16,27,.86);
  backdrop-filter:blur(10px);
  border:1px solid var(--line-dark);
  border-radius:var(--r-pill);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.9);
  font-size:.775rem; font-weight:700; color:#fff;
  white-space:nowrap;
}
.chip .ic{ width:1em; height:1em; color:var(--violet-300); }
.chip--1{ top:.2rem; left:1%; animation:float 6s ease-in-out infinite; }
.chip--2{ top:1.35rem; right:2%; animation:float 7s ease-in-out .8s infinite; }
.chip--3{
  bottom:1.1rem; left:0;
  background:var(--violet); color:#fff; border-color:transparent;
  animation:float 6.5s ease-in-out .4s infinite;
}
.chip--3 .ic{ color:#fff; }
@keyframes float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-7px) }
}
@media (max-width:539px){
  .chip{ font-size:.7rem; padding:.4rem .7rem; }
  .chip--2{ top:1.15rem; }
}

.stage__caption{
  margin-top:.35rem; text-align:center;
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* ---------- 8. Molduras dos projetos (navegador + celular) ---------- */
.mk{
  background:#fff; border-radius:8px; overflow:hidden;
  container-type:inline-size;
}
.mk__chrome{
  display:flex; align-items:center; gap:4px;
  padding:6px 9px;
  background:#F1F4F9; border-bottom:1px solid #E4E9F2;
}
.mk__dot{ width:6px; height:6px; border-radius:50%; background:#CBD4E3; flex:none; }
.mk__dot:nth-child(1){ background:#E9A9A2; }
.mk__dot:nth-child(2){ background:#EBCE9B; }
.mk__dot:nth-child(3){ background:#A9CDA5; }
.mk__url{
  display:flex; align-items:center; gap:4px;
  margin-left:8px; padding:2px 10px;
  background:#fff; border:1px solid #E4E9F2; border-radius:999px;
  font-size:8px; color:#7B879B; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk__lock{ width:7px; height:7px; color:#9AA6BA; flex:none; }
.mk__view{ container-type:inline-size; background:#fff; }

/* Screenshot real de projeto dentro do frame de navegador/celular */
.mk__shot{ display:block; width:100%; height:auto; }


/* ---------- 9. Strip de benefícios ---------- */
/* Faixa em roxo cheio: momento de cor forte entre o hero escuro e o claro */
.strip{
  background:linear-gradient(100deg, var(--violet-deep) 0%, var(--violet) 100%);
  color:#fff; padding-block:clamp(1.5rem,3vw,2rem);
}
.strip__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.strip__list li{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--display); font-weight:700; font-size:clamp(.875rem,2.2vw,1.0625rem);
  letter-spacing:-.01em;
}
.strip__list .ic{ width:1.35em; height:1.35em; color:rgba(255,255,255,.72); }
.strip__price{ color:#fff; }
.strip__price .ic{ color:#fff; }
.strip__price span{ font-size:1.1em; }
.strip__price em{ font-style:normal; font-weight:600; opacity:.7; font-size:.75em; }
@media (min-width:860px){
  .strip__list{ grid-template-columns:repeat(4,1fr); align-items:center; }
  .strip__list li{ justify-content:center; }
  .strip__list li + li{ border-left:1px solid rgba(255,255,255,.22); }
}

/* ---------- 10. Cards ---------- */
.card{
  padding:clamp(1.5rem,3vw,2rem);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-strong); }
.card h3{ font-size:1.22rem; margin-bottom:.6rem; }
.card p{ color:var(--muted); font-size:.975rem; }
.card__ico{
  display:grid; place-items:center; width:52px; height:52px;
  margin-bottom:1.15rem;
  background:var(--tint); color:var(--violet);
  border-radius:var(--r-md);
}
.card__ico .ic{ width:26px; height:26px; }
.card__ico--solid{ background:var(--violet); color:#fff; box-shadow:var(--sh-violet); }
.card--problem{ background:var(--surface); }
.card--problem .card__ico{ background:#fff; color:var(--muted); }
.card--feature{ position:relative; }
.card__n{
  position:absolute; top:clamp(1.5rem,3vw,2rem); right:clamp(1.5rem,3vw,2rem);
  font-family:var(--display); font-weight:800; font-size:1.5rem;
  color:var(--line-strong); letter-spacing:-.02em;
}
.card--who h3{ font-size:1.1rem; }
.card--who p{ font-size:.925rem; }

.transition{
  margin-top:clamp(2.5rem,5vw,3.5rem); text-align:center;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,2.8vw,1.65rem); letter-spacing:-.02em;
  color:var(--ink);
}
.transition strong{ color:var(--violet); font-weight:800; }

.microcopy{
  margin-top:clamp(2.25rem,4vw,3rem); text-align:center;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1rem,2vw,1.2rem); color:var(--muted);
}
.microcopy--light{ color:var(--muted-light); }

.closing{ margin-top:clamp(2.25rem,4vw,3rem); text-align:center; }
.closing__line{
  margin-bottom:1.5rem;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.1rem,2.5vw,1.4rem); letter-spacing:-.02em;
}

/* ---------- 11. Equação da solução ---------- */
.equation{
  display:grid; gap:.75rem; align-items:center;
  grid-template-columns:1fr;
}
.equation__part{
  display:flex; align-items:center; gap:1rem;
  padding:1.25rem 1.5rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.equation__ico{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  background:var(--tint); color:var(--violet); border-radius:13px;
}
.equation__ico .ic{ width:24px; height:24px; }
.equation__part h3{ font-size:1.05rem; }
.equation__op{
  justify-self:center;
  font-family:var(--display); font-weight:700; font-size:1.35rem; color:var(--line-strong);
}
.equation__result{
  padding:1.5rem;
  background:var(--violet); color:#fff;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-violet);
  text-align:center;
}
.equation__tag{
  display:block; font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; opacity:.8; margin-bottom:.35rem;
}
.equation__result strong{ font-family:var(--display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em; }
.equation__result em{ font-style:normal; font-weight:600; font-size:.55em; opacity:.75; }

@media (min-width:900px){
  .equation{ grid-template-columns:1fr auto 1fr auto 1fr auto 1.15fr; gap:1rem; }
  .equation__part{ flex-direction:column; text-align:center; gap:.85rem; padding:1.9rem 1.25rem; height:100%; justify-content:center; }
  .equation__op{ font-size:1.5rem; }
  .equation__result{ padding:1.9rem 1.25rem; }
}

/* ---------- 12. Showcase ---------- */
.showcase{ display:grid; gap:clamp(3rem,6vw,4.5rem); }
.showcase__item{ display:grid; gap:clamp(1.75rem,4vw,3rem); align-items:center; }
.showcase__visual{ position:relative; padding-bottom:2.5rem; }
.showcase__visual .mk{
  border-radius:12px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
}
.showcase__phone{
  position:absolute; right:-1%; bottom:0; z-index:2;
  width:23%; max-width:150px;
  padding:.38rem; background:#1B1826;
  border-radius:20px;
  box-shadow:0 22px 44px -20px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.12);
}
.showcase__phone .mk{ border-radius:15px; box-shadow:none; overflow:hidden; }
.showcase__phone .phone__notch--sm{ background:#1B1826; }

.showcase__meta h3{ font-size:clamp(1.3rem,3vw,1.7rem); margin-bottom:.75rem; }
.showcase__meta p{ color:var(--muted-light); font-size:1rem; max-width:34rem; }
.tagline{
  display:inline-block; margin-top:1.15rem;
  padding:.35rem .8rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);
  font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-light);
}
@media (min-width:900px){
  .showcase__item{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:3.5rem; }
  .showcase__item--rev .showcase__visual{ order:2; }
}

/* ---------- 13. Como funciona ---------- */
.steps{ display:grid; gap:1.25rem; counter-reset:s; position:relative; }
.steps__item{
  position:relative;
  padding:clamp(1.6rem,3vw,2rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
}
.steps__n{
  display:grid; place-items:center;
  width:44px; height:44px; margin-bottom:1.15rem;
  background:var(--violet); color:#fff;
  border-radius:13px; box-shadow:var(--sh-violet);
  font-family:var(--display); font-weight:800; font-size:.95rem;
}
.steps__item h3{ font-size:1.15rem; margin-bottom:.55rem; }
.steps__item p{ color:var(--muted); font-size:.975rem; }

@media (min-width:880px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:1.75rem; }
  .steps::before{
    content:""; position:absolute; top:calc(clamp(1.6rem,3vw,2rem) + 22px); left:12%; right:12%;
    border-top:2px dashed var(--line-strong); z-index:0;
  }
  .steps__item{ z-index:1; }
}

.deadline{
  display:flex; align-items:center; gap:.75rem;
  margin-top:1.75rem; padding:1.15rem 1.4rem;
  background:var(--tint); border:1px solid rgba(83,58,253,.22);
  border-radius:var(--r-md);
  font-size:.975rem; color:var(--violet-deep);
}
.deadline .ic{ width:1.35em; height:1.35em; color:var(--violet); }
.deadline strong{ font-weight:700; }

/* ---------- 14. Comparação ---------- */
.compare{ display:grid; gap:1rem; align-items:stretch; }
.compare__col{
  padding:clamp(1.6rem,3.5vw,2.25rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
}
.compare__title{ font-size:1.35rem; margin-bottom:1.25rem; }
.compare__list li{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.7rem 0; font-size:.975rem; color:var(--muted);
  border-top:1px solid var(--line);
}
.compare__list li:first-child{ border-top:0; padding-top:0; }
.compare__list .ic{ width:1.2em; height:1.2em; margin-top:.15em; color:var(--muted-light); }

.compare__vs{
  justify-self:center;
  display:grid; place-items:center; width:48px; height:48px;
  background:#fff; border:1px solid var(--line-strong); border-radius:50%;
  font-family:var(--display); font-weight:800; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  box-shadow:var(--sh-1);
}

.compare__col--hero{
  background:linear-gradient(165deg, var(--violet) 0%, var(--violet-deep) 100%);
  border-color:transparent; color:#fff;
  box-shadow:var(--sh-3);
}
.compare__flag{
  display:inline-block; margin-bottom:.85rem;
  padding:.35rem .85rem;
  background:rgba(255,255,255,.18); border-radius:var(--r-pill);
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.compare__col--hero .compare__title{ font-size:2.15rem; }
.compare__col--hero .compare__title em{ font-style:normal; font-weight:600; font-size:.45em; opacity:.75; }
.compare__list--yes li{ color:#fff; border-top-color:rgba(255,255,255,.16); font-weight:500; }
.compare__list--yes .ic{ color:#fff; }

@media (min-width:900px){
  .compare{ grid-template-columns:1fr auto 1.08fr; gap:1.5rem; align-items:center; }
  .compare__col{ height:100%; }
}

/* ---------- 15. Preço ---------- */
.price{
  max-width:31rem; margin-inline:auto; text-align:center;
  padding:clamp(2rem,5vw,3rem) clamp(1.5rem,4vw,2.75rem);
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--sh-3);
  position:relative; overflow:hidden;
}
.price::before{
  content:""; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg, var(--violet), var(--violet-300), var(--violet));
}
.price__badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem;
  background:var(--tint); color:var(--violet-deep);
  border-radius:var(--r-pill);
  font-size:.775rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.price__badge .ic{ width:1.05em; height:1.05em; color:var(--violet); }

.price__value{
  display:flex; align-items:baseline; justify-content:center; gap:.1rem;
  margin:1.5rem 0 .25rem;
  font-family:var(--display); font-weight:800; color:var(--ink);
  letter-spacing:-.04em; line-height:1;
}
.price__cur{ font-size:clamp(1.5rem,4vw,2rem); margin-right:.25rem; align-self:flex-start; margin-top:.35em; }
.price__num{ font-size:clamp(4rem,13vw,6.25rem); }
.price__cents{ font-size:clamp(1.75rem,5vw,2.5rem); }
.price__per{ font-size:clamp(1rem,2.5vw,1.25rem); font-weight:600; color:var(--muted); margin-left:.35rem; }

.price__list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem .5rem;
  margin:1.75rem 0;
}
.price__list li{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .95rem;
  background:var(--tint); border-radius:var(--r-pill);
  font-size:.9rem; font-weight:600; color:var(--violet-deep);
}
.price__list .ic{ width:1.05em; height:1.05em; color:var(--violet); }

.price__text{ color:var(--muted); font-size:.975rem; margin-bottom:1.75rem; }
.price__wa{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.15rem; font-size:.925rem; font-weight:600; color:var(--muted);
}
.price__wa .ic{ color:var(--wa); width:1.2em; height:1.2em; }
.price__wa:hover{ color:var(--ink); }
.price__foot{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.8125rem; color:var(--muted);
}
.price__foot .ic{ width:1.1em; height:1.1em; }

/* ---------- 16. Credibilidade ---------- */
.about{ display:grid; gap:2rem; align-items:center; }
.about__brand{
  padding:clamp(1.75rem,4vw,2.5rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-1); text-align:center;
}
.about__brand img{ width:min(100%,260px); margin-inline:auto; border-radius:8px; }
.about__cnpj{ margin-top:1.15rem; font-size:.8125rem; color:var(--muted); letter-spacing:.02em; }
.about__copy h2{ font-size:clamp(1.6rem,3.6vw,2.35rem); margin-bottom:1rem; }
.about__copy p{ color:var(--muted); font-size:1.0625rem; max-width:34rem; }
@media (min-width:880px){
  .about{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:3.5rem; }
}

/* ---------- 17. FAQ ---------- */
.faq{ display:grid; gap:.75rem; }
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__item:has(.faq__q[aria-expanded="true"]){ border-color:var(--line-strong); box-shadow:var(--sh-1); }
.faq__item h3{ margin:0; font-size:inherit; font-weight:inherit; letter-spacing:0; }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; padding:1.15rem 1.35rem; min-height:60px;
  text-align:left;
  font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.faq__q:hover{ color:var(--violet); }
.faq__chev{ width:1.2em; height:1.2em; flex:none; color:var(--violet); transition:transform .3s var(--ease); }
.faq__q[aria-expanded="true"] .faq__chev{ transform:rotate(180deg); }
.faq__a{ padding:0 1.35rem 1.3rem; }
.faq__a p{ color:var(--muted); font-size:.9875rem; max-width:52ch; }
.faq__a:not([hidden]){ animation:faqIn .28s var(--ease); }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }

.faq__more{ margin-top:2rem; text-align:center; color:var(--muted); font-size:.975rem; }
.faq__more a{ color:var(--violet); font-weight:700; }
.faq__more a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- 18. CTA final ---------- */
.final{
  position:relative; overflow:hidden;
  padding-block:clamp(4rem,9vw,7rem);
  background:linear-gradient(160deg, var(--violet) 0%, var(--violet-deep) 58%, #2A18A8 100%);
  color:#fff; text-align:center;
}
.final__glow{
  position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:60rem; height:40rem;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 62%);
  pointer-events:none;
}
.final__in{ position:relative; max-width:48rem; }
.final h2{ font-size:clamp(1.75rem,4.6vw,3rem); }
.final__sub{ margin-top:1.15rem; font-size:clamp(1.05rem,2vw,1.25rem); color:rgba(255,255,255,.86); }
.final__price{
  display:flex; align-items:baseline; justify-content:center;
  margin:2rem 0;
  font-family:var(--display); font-weight:800; color:#fff; line-height:1; letter-spacing:-.04em;
}
.final__price .price__per{ color:rgba(255,255,255,.72); }
.final__note{ margin-top:1.35rem; font-weight:600; color:rgba(255,255,255,.9); font-size:.975rem; }
/* .88 mantém 5:1 mesmo no ponto mais claro do gradiente roxo. */
.final__micro{ margin-top:.5rem; font-size:.875rem; color:rgba(255,255,255,.88); }

/* ---------- 19. Footer ---------- */
.ft{ background:var(--dark); color:#fff; padding-top:clamp(3rem,6vw,4.5rem); }
.ft__in{ display:grid; gap:2.5rem; padding-bottom:2.5rem; }
.ft__brand img{ width:min(100%,215px); }
.ft__brand p{ margin-top:1.15rem; color:var(--muted-light); font-size:.9375rem; max-width:24rem; }
.ft__cnpj{ font-size:.8125rem !important; opacity:.75; }
.ft__nav{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.ft__nav h2{
  font-family:var(--sans); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--violet-300);
  margin-bottom:1rem;
}
.ft__nav li + li{ margin-top:.6rem; }
.ft__nav a{ color:rgba(255,255,255,.78); font-size:.9375rem; transition:color .2s var(--ease); }
.ft__nav a:hover{ color:#fff; }
@media (min-width:860px){
  .ft__in{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:4rem; }
  .ft__nav{ gap:3rem; }
}
.ft__bar{
  display:grid; gap:.5rem;
  padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.8125rem; color:rgba(255,255,255,.55);
}
@media (min-width:760px){
  .ft__bar{ grid-template-columns:auto auto; justify-content:space-between; align-items:center; }
  .ft__bar p:last-child{ text-align:right; }
}

/* ---------- 20. Conversão flutuante ---------- */
.wa-fab{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  height:56px; padding:0 1.15rem;
  background:var(--wa); color:#fff;
  border-radius:var(--r-pill);
  box-shadow:0 14px 30px -10px rgba(37,211,102,.6);
  font-family:var(--display); font-weight:700; font-size:.9375rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-fab .ic{ width:26px; height:26px; }
.wa-fab:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -12px rgba(37,211,102,.7); }

.mbar{
  position:fixed; inset:auto 0 0; z-index:95;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 26px -18px rgba(23,32,51,.6);
  transform:translateY(110%);
  transition:transform .32s var(--ease);
}
.mbar.is-on{ transform:translateY(0); }
.mbar__info strong{
  display:block; font-family:var(--display); font-weight:800;
  font-size:1.0625rem; letter-spacing:-.02em; line-height:1.2;
}
.mbar__info em{ font-style:normal; font-weight:600; font-size:.72em; color:var(--muted); }
.mbar__info span{ font-size:.75rem; color:var(--muted); }
.mbar .btn{ flex:none; }
/* Em telas muito estreitas a linha de apoio quebraria em duas: some com ela. */
@media (max-width:409px){
  .mbar__info span{ display:none; }
  .mbar .btn{ font-size:.8125rem; padding:.65rem .95rem; }
}

@media (max-width:759px){
  .wa-fab{ width:52px; height:52px; padding:0; justify-content:center; right:1rem; bottom:5.25rem; }
  .wa-fab__txt{ display:none; }
}
@media (min-width:760px){
  .mbar{ display:none; }
}

/* ---------- 21. Animações de entrada ---------- */
/* O estado inicial escondido só existe quando o JS está ativo (classe .js no <html>).
   Sem JS, ou se o script falhar, todo o conteúdo aparece normalmente. */
.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:calc(var(--d, 0) * 80ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ --d:1 } .reveal[data-d="2"]{ --d:2 }
.reveal[data-d="3"]{ --d:3 } .reveal[data-d="4"]{ --d:4 }
.reveal[data-d="5"]{ --d:5 } .reveal[data-d="6"]{ --d:6 }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .hl__ink{ transform:scaleX(1); }
}

/* ---------- 22. Impressão ---------- */
@media print{
  .hdr,.wa-fab,.mbar,.hero__glow,.final__glow{ display:none !important; }
  body{ color:#000; }
  .js .reveal{ opacity:1; transform:none; }
}