/* Estilo das páginas internas. Copiado do <style> do index.html (a página inicial continua
   com o CSS inline); ao mudar o visual de uma seção, mudar nos dois. */
:root{
  /* Surfaces */
  --bg-0:#06141C;
  --bg-1:#0A1E2A;
  --bg-2:#0F2838;
  --surface:rgba(20,52,72,.55);
  --surface-strong:rgba(28,68,92,.75);
  --line:rgba(150,200,220,.10);
  --line-2:rgba(150,200,220,.18);

  /* Brand */
  --teal-deep:#0A1F2E;
  --teal:#0E2C3D;
  --teal-2:#143F57;
  --ink:#072430;

  /* Accent gradient (y2) */
  --lime:#9FE34A;
  --lime-2:#C6E84A;
  --yellow:#F5D416;
  --accent-grad:linear-gradient(135deg,#9FE34A 0%, #D7E63A 45%, #F5D416 100%);
  --accent-grad-soft:linear-gradient(135deg,rgba(159,227,74,.18), rgba(245,212,22,.18));

  /* Text */
  --t-1:#EAF4F8;
  --t-2:#B6CCD6;
  --t-3:#7A95A3;
  --t-4:#4F6B78;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;

  /* Vertical rhythm */
  --section-gap:clamp(24px, 3vw, 40px);
}

html{scroll-behavior:smooth}
/* Blocos e links desligados pela Configuração do Site (data-bloco) ficam fora da página */
[hidden]{display:none !important}
html,body{margin:0;padding:0;background:var(--bg-0);color:var(--t-1);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden;font-size:16px}
@media (max-width:480px){body{font-size:15px}}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ——————— Backdrop ambient ——————— */
.page{
  position:relative;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(159,227,74,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(20,90,120,.35), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(245,212,22,.06), transparent 60%),
    linear-gradient(180deg,#06141C 0%, #08202C 60%, #06141C 100%);
  min-height:100vh;
  /* clip (e não hidden): corta o que vaza para os lados sem virar contêiner de rolagem,
     senão o menu com position:sticky deixa de acompanhar a página */
  overflow:hidden;overflow:clip;
}
@media (max-width:640px){.page{min-height:0}}
.grid-noise::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(150,200,220,.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(150,200,220,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}

/* ——————— Container ——————— */
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px, 4vw, 32px);position:relative;z-index:2}

/* ——————— Nav ——————— */
.nav{
  position:sticky;top:calc(12px + env(safe-area-inset-top, 0px));z-index:50;
  margin:calc(12px + env(safe-area-inset-top, 0px)) auto 0;max-width:1280px;padding:0 clamp(16px, 4vw, 32px);
}
.nav-burger{
  display:none;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  align-items:center;justify-content:center;color:var(--t-1);cursor:pointer;
  flex-shrink:0;padding:0;line-height:0;
  align-items:center;justify-content:center;color:var(--t-1);cursor:pointer;
}
.nav-burger svg{width:20px;height:20px}
.mobile-drawer{
  position:fixed;inset:0;z-index:60;background:rgba(6,20,28,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:none;flex-direction:column;padding:16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y:auto;overscroll-behavior:contain;
}
.mobile-drawer.open{display:flex}
.mobile-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mobile-drawer .close{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--t-1);cursor:pointer;
}
.mobile-drawer nav{display:flex;flex-direction:column;margin-bottom:18px}
.mobile-drawer nav a{
  font-size:16px;font-weight:500;
  padding:10px 4px;border-bottom:1px solid var(--line);color:var(--t-1);
  min-height:44px;display:flex;align-items:center;
}
.mobile-drawer nav a:last-child,.mobile-drawer nav span > a:last-child{border-bottom:0}
.mobile-drawer-cta{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.mobile-drawer-cta .btn{justify-content:center;padding:12px 18px;font-size:15px;min-height:46px}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:nowrap;min-height:56px;overflow:visible;
  padding:6px 10px 6px 20px;
  background:rgba(10,30,42,.55);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line-2);
  border-radius:999px;
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  transition:background .25s, border-color .25s, box-shadow .25s;
}
/* No topo da página o menu fica sem destaque; ao rolar (classe .rolada, via JS) ganha fundo, borda e sombra */
.nav:not(.rolada) .nav-inner{
  background:transparent;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;line-height:1;padding:2px 0}
.brand .y2-mark{width:28px;height:28px;border-radius:8px;background:#0A1E2A;display:grid;place-items:center;border:1px solid var(--line-2)}
/* Logo em imagem (a imagem já traz o símbolo, então o ícone separado não aparece) */
.brand-logo{display:block;height:30px;width:auto}
.brand .y2-mark img{width:22px;height:22px}
.brand-name{font-size:18px;font-weight:700;line-height:1;padding:1px 0}
.brand-name .two{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.nav-links{display:flex;gap:6px}
.nav-links a{padding:8px 14px;border-radius:999px;font-size:14px;color:var(--t-2);transition:.2s}
.nav-links a:hover{color:var(--t-1);background:rgba(255,255,255,.04)}

.nav-cta{display:flex;gap:8px;align-items:center;flex-shrink:0}
.nav-cta .btn-primary{flex-shrink:0;min-width:fit-content;white-space:nowrap}
.brand{flex-shrink:0;min-width:fit-content}
.brand-name{white-space:nowrap;overflow:visible;flex-shrink:0}

/* ——————— Buttons ——————— */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:14.5px;letter-spacing:-.005em;
  padding:12px 20px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease, box-shadow .25s ease, background .2s;
  white-space:nowrap;min-height:44px;
  box-sizing:border-box; /* min-height é a altura final, sem somar padding/borda */
}
.btn-primary{
  color:#062014;
  background:var(--accent-grad);
  box-shadow:0 6px 22px rgba(159,227,74,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(159,227,74,.40), inset 0 1px 0 rgba(255,255,255,.55)}
.btn-outline{
  color:var(--t-1);
  background:rgba(255,255,255,.03);
  border-color:var(--line-2);
}
.btn-outline:hover{background:rgba(255,255,255,.06);border-color:rgba(159,227,74,.4)}
.btn-ghost{
  color:var(--t-2);background:transparent;
}
.btn-lg{padding:13px 24px;font-size:15px;min-height:48px}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* ——————— Hero ——————— */
.hero{padding:20px 0 var(--section-gap) !important;position:relative;height:auto !important;min-height:0 !important}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px, 6vw, 60px);align-items:center}

h1.hero-title{
  font-size:clamp(34px, 5.6vw, 64px);line-height:1.04;letter-spacing:-.03em;font-weight:700;
  margin:6px 0 0 !important;color:var(--t-1);
  text-wrap:balance;
}
h1.hero-title .accent{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  font-size:clamp(15.5px, 1.6vw, 19px);line-height:1.5;color:var(--t-2);max-width:560px;margin:10px 0 14px !important;font-weight:400;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-cta .btn{flex:0 1 auto}

.hero-meta{display:flex;gap:clamp(20px, 3vw, 32px);margin:14px 0 0 !important;flex-wrap:wrap}
.hero-meta .stat .n{font-size:clamp(22px, 2.4vw, 28px);font-weight:700;letter-spacing:-.02em;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-meta .stat .l{font-size:13px;color:var(--t-3);margin-top:4px}

/* Hero visual: dashboard composition */
.hero-visual{position:relative;height:500px;width:100%;max-width:580px;margin-left:auto;align-self:start;margin-top:16px}
/* Luz clara atrás dos cards do hero (substitui o brilho que vinha do desenho removido) */
.y2-glow{
  position:absolute;inset:-110px -120px -90px -90px;
  background:
    radial-gradient(40% 42% at 80% 20%, rgba(159,227,74,.42), transparent 70%),
    radial-gradient(38% 40% at 86% 78%, rgba(245,212,22,.22), transparent 70%),
    radial-gradient(62% 60% at 50% 48%, rgba(36,140,175,.42), transparent 72%);
  filter:blur(34px);z-index:0;pointer-events:none;
}
/* Brilho animado: cada mancha de cor se move no seu ritmo (verde, amarelo e azul) */
.y2-glow::before,.y2-glow::after{content:"";position:absolute;inset:0;pointer-events:none}
.y2-glow::before{
  background:radial-gradient(34% 36% at 30% 70%, rgba(159,227,74,.30), transparent 70%);
  animation:glow-a 9s ease-in-out infinite alternate;
}
.y2-glow::after{
  background:radial-gradient(30% 32% at 70% 40%, rgba(245,212,22,.20), transparent 70%);
  animation:glow-b 11s ease-in-out infinite alternate;
}
.y2-glow{animation:glow-base 14s ease-in-out infinite alternate}
@keyframes glow-a{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(18%,-22%) scale(1.15)}
  100%{transform:translate(-10%,-6%) scale(.92)}
}
@keyframes glow-b{
  0%{transform:translate(0,0) scale(1);opacity:.7}
  50%{transform:translate(-20%,18%) scale(1.2);opacity:1}
  100%{transform:translate(8%,26%) scale(.95);opacity:.8}
}
@keyframes glow-base{
  0%{transform:rotate(0deg) scale(1);opacity:.9}
  100%{transform:rotate(14deg) scale(1.08);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .y2-glow,.y2-glow::before,.y2-glow::after{animation:none}
}

/* Topo ocupa a primeira tela sozinho (desktop): conteúdo centralizado na altura visível e a faixa
   de recursos na base, sem mostrar o bloco seguinte. Em telas muito altas o conteúdo cresce junto. */
@media (min-width:1025px) and (min-height:640px){
  .hero{
    box-sizing:border-box;min-height:calc(100vh - 70px) !important;min-height:calc(100svh - 70px) !important;
    display:flex;flex-direction:column;padding:12px 0 28px !important;
  }
  .hero > .wrap{width:100%;box-sizing:border-box}
  .hero > .wrap:first-child{flex:1;display:flex;align-items:center}
  .hero > .wrap:first-child > .hero-grid{width:100%}
  .hero .hero-faixa-wrap{display:block;margin-top:24px}
  .hero-visual{align-self:center;margin-top:0}
}
.hero-faixa-wrap{display:none}
.hero-faixa{
  list-style:none;margin:0;padding:10px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;
  border:1px solid var(--line-2);border-radius:18px;background:rgba(8,24,34,.55);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.hero-faixa a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;transition:background .2s}
.hero-faixa a:hover{background:rgba(159,227,74,.06)}
.hero-faixa .hf-ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#9FE34A;background:rgba(159,227,74,.10);border:1px solid rgba(159,227,74,.22)}
.hero-faixa b{display:block;font-size:14px;font-weight:600;color:var(--t-1);line-height:1.2}
.hero-faixa small{display:block;font-size:12px;color:var(--t-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-faixa span:last-child{min-width:0}
/* Telas estreitas de desktop: faixa só com os nomes e card do Pix menor, sem cobrir o valor do painel */
@media (min-width:1025px) and (max-width:1300px){
  .hero-faixa small{display:none}
  .hero-faixa a{gap:10px;padding:8px 10px}
}
@media (min-width:1025px) and (max-width:1200px){
  .hero-visual .pix-card{width:250px;top:-28px}
}
/* Notebooks baixos: aperta as margens para o topo caber inteiro na tela */
@media (min-width:1025px) and (min-height:640px) and (max-height:760px){
  .hero{padding-bottom:12px !important}
  .hero .hero-faixa-wrap{margin-top:12px}
}
/* Monitores altos (Full HD+): o topo cresce um pouco para ocupar a tela sem sobrar área vazia */
@media (min-width:1500px) and (min-height:1000px){
  .hero > .wrap{zoom:1.15}
}

/* Dashboard card */
.dash{
  position:absolute;left:0;top:48px;width:min(440px, 80%);
  background:linear-gradient(180deg, rgba(20,55,75,.85), rgba(10,30,42,.92));
  border:1px solid var(--line-2);
  border-radius:20px;
  padding:22px;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  z-index:2;
}
.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dash-head h4{margin:0;font-size:14px;color:var(--t-2);font-weight:500}
.dash-head h4 strong{color:var(--t-1);font-weight:600}
.tabs{display:flex;gap:4px;background:rgba(0,0,0,.35);padding:3px;border-radius:8px;font-size:11.5px;color:var(--t-3)}
.tabs span{padding:5px 10px;border-radius:6px}
.tabs span.on{background:rgba(159,227,74,.15);color:#C5E88A}

.dash .big{font-size:34px;font-weight:700;letter-spacing:-.02em;color:#fff;margin-top:2px}
.dash .big .cur{color:var(--t-3);font-size:16px;font-weight:500;margin-right:6px}
.dash .delta{display:inline-flex;align-items:center;gap:6px;color:#9FE34A;font-size:12.5px;font-weight:500;background:rgba(159,227,74,.12);padding:4px 9px;border-radius:999px;margin-left:8px}

.chart{margin-top:16px;height:100px;position:relative}
.chart-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:100% 32px}
.chart svg{position:relative;width:100%;height:100%}

.dash-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.kpi .lab{font-size:11px;color:var(--t-3);text-transform:uppercase;letter-spacing:.08em}
.kpi .val{font-size:15px;color:var(--t-1);font-weight:600;margin-top:4px}
.kpi .val .dot-g{color:#9FE34A;margin-right:4px}

/* Pix notification card */
.pix-card{
  position:absolute;right:0;top:0;width:300px;
  background:linear-gradient(180deg, rgba(28,68,92,.9), rgba(15,40,55,.95));
  border:1px solid var(--line-2);
  border-radius:18px;padding:16px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  z-index:3;
}
.pix-row{display:flex;align-items:center;gap:12px}
.pix-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--accent-grad);
  display:grid;place-items:center;color:#062014;font-weight:700;font-size:14px;
  box-shadow:0 6px 18px rgba(159,227,74,.35);
}
.pix-row .who{font-size:13px;color:var(--t-1);font-weight:600;line-height:1.2}
.pix-row .who span{color:var(--t-3);font-weight:400;font-size:11.5px;display:block;margin-top:2px}
.pix-amt{margin-left:auto;white-space:nowrap;font-size:15px;color:#9FE34A;font-weight:700;font-variant-numeric:tabular-nums}
.pix-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--t-3);margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.pix-meta .ok{color:#9FE34A;font-weight:500}

/* Segundo card do hero (Pix enviado), no canto inferior */
.wa-card{
  position:absolute;right:0;bottom:0;width:300px;
  background:linear-gradient(180deg, rgba(20,55,75,.92), rgba(10,30,42,.92));
  border:1px solid var(--line-2);
  border-radius:18px;padding:16px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  z-index:3;
}
.pix-amt--out{color:var(--t-1)}

/* ——————— Section ——————— */
/* Âncoras: o título do bloco para 90px abaixo do topo (menu fixo ~70px + folga), descontando o padding da seção */
.section{padding:var(--section-gap) 0;position:relative;scroll-margin-top:calc(90px - var(--section-gap))}
.ancora{display:block;scroll-margin-top:90px}
.section-head{text-align:center;max-width:760px;margin:0 auto clamp(28px, 3.5vw, 44px)}
.section-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:#9FE34A;font-weight:600;margin-bottom:18px;
}
.section-tag::before,.section-tag::after{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--lime))}
.section-tag::after{background:linear-gradient(90deg,var(--lime),transparent)}
.section h2,.section h1{
  font-size:clamp(28px, 4.4vw, 48px);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:0 0 5px;text-wrap:balance;
}
.section h2 .accent,.section h1 .accent{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-sub{margin:0;font-size:clamp(15px, 1.5vw, 18px);color:var(--t-2);line-height:1.55;text-wrap:pretty}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar details{margin:0}
.pillar details > summary{display:none}
.pillar details > .pillar-body{display:block}
/* Ícone ao lado do título em todas as telas; o resto do card usa a largura toda */
.pillar{
  position:relative;padding:32px 28px 28px;
  display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;align-content:start;
  background:linear-gradient(180deg, rgba(20,55,75,.55), rgba(10,30,42,.65));
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.pillar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 0% 0%, rgba(159,227,74,.08), transparent 50%);
  opacity:.6;
}
.pillar:hover{transform:translateY(-4px);border-color:rgba(159,227,74,.35);box-shadow:0 20px 40px rgba(0,0,0,.4)}

.pillar-num{
  position:absolute;top:24px;right:28px;font-size:13px;font-weight:600;color:var(--t-3);
  font-feature-settings:"tnum";letter-spacing:.05em;
}
.pillar-icon{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(180deg,#0F2A3A,#091F2C);
  border:1px solid var(--line-2);
  display:grid;place-items:center;
  position:relative;
}
.pillar > *{grid-column:1 / -1}
.pillar > .pillar-icon{grid-column:1}
.pillar-icon::after{
  content:"";position:absolute;inset:-1px;border-radius:16px;
  padding:1px;background:linear-gradient(135deg, rgba(159,227,74,.5), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.pillar > h3{grid-column:2;font-size:22px;font-weight:600;margin:0;padding-right:56px;letter-spacing:-.015em}
.pillar p{color:var(--t-2);font-size:14.5px;line-height:1.55;margin:18px 0 22px}
.pillar ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.pillar li{font-size:13.5px;color:var(--t-2);display:flex;align-items:center;gap:10px}
.pillar li svg{flex-shrink:0;color:#9FE34A}
.pillar-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#C5E88A;font-weight:500;border-top:1px solid var(--line);padding-top:18px;min-height:44px}

/* Serviços (Serasa + Fiscal): título padrão centralizado; os cards viram linhas de um painel único
   (ícone | texto | recursos | seta), diferente dos cards verticais de Soluções.
   Linhas desligadas saem; o painel se ajusta às que sobram. */
.serv-lista{
  border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;
  background:rgba(8,24,34,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.serv{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(18px,2.4vw,32px);align-items:center;
  padding:24px 28px;border-bottom:1px solid var(--line);margin-bottom:-1px;transition:background .2s;
}
.serv::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:var(--accent-grad);opacity:0;transition:opacity .2s}
.serv:hover{background:rgba(159,227,74,.04)}
.serv:hover::before{opacity:1}
.serv-ic{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#9FE34A;
  background:rgba(159,227,74,.10);border:1px solid rgba(159,227,74,.25);
}
.serv-tag{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-3);font-weight:600;margin-bottom:4px}
.serv h3{font-size:18px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.serv p{color:var(--t-2);font-size:14px;line-height:1.55;margin:0}
.serv-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.serv-chips li{font-size:12px;color:var(--t-2);padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.serv-link{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--t-2);border:1px solid var(--line-2);transition:.2s;
}
.serv-link:hover,.serv:hover .serv-link{color:#062014;background:var(--accent-grad);border-color:transparent}
@media (max-width:900px){
  .serv{grid-template-columns:auto 1fr auto;align-items:start}
  .serv-chips{grid-column:2 / 3}
  .serv-link{grid-row:1;grid-column:3;align-self:center}
}
@media (max-width:560px){
  /* Ícone + rótulo + título em cima; descrição e recursos descem e usam a largura toda */
  .serv{grid-template-columns:auto 1fr;padding:18px 16px;gap:0 12px;align-items:center}
  .serv-ic{width:40px;height:40px;border-radius:11px;grid-column:1;grid-row:1 / span 2}
  .serv-txt{display:contents}
  .serv-tag{grid-column:2;grid-row:1;align-self:end;margin-bottom:2px}
  .serv h3{grid-column:2;grid-row:2;align-self:start;margin:0}
  .serv p{grid-column:1 / -1;margin:10px 0 0}
  .serv .serv-chips{grid-column:1 / -1;margin-top:10px}
  .serv-link{display:none}
}

/* Infraestrutura: fluxo da operação em 4 etapas ligadas por uma linha (sem cards) */
.fluxo{
  list-style:none;margin:0;padding:28px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.fluxo::before{
  content:"";position:absolute;left:calc(12.5% + 4px);right:calc(12.5% + 4px);top:52px;height:2px;
  background:linear-gradient(90deg, rgba(159,227,74,.15), rgba(159,227,74,.6), rgba(245,212,22,.4), rgba(159,227,74,.15));
}
.fluxo-passo{text-align:center;position:relative}
.fluxo-no{
  width:48px;height:48px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  color:#9FE34A;background:#0A1E2A;border:1px solid rgba(159,227,74,.4);
  box-shadow:0 0 24px rgba(159,227,74,.18);transition:.25s;
}
.fluxo-passo:hover .fluxo-no{color:#062014;background:var(--accent-grad);border-color:transparent}
.fluxo h4{margin:0 0 6px;font-size:15.5px;font-weight:600}
.fluxo p{margin:0 auto;font-size:13px;color:var(--t-3);line-height:1.5;max-width:240px}
@media (max-width:760px){
  .fluxo{grid-template-columns:1fr;gap:20px;padding:24px 4px}
  .fluxo::before{left:27px;right:auto;top:48px;bottom:48px;width:2px;height:auto;
    background:linear-gradient(180deg, rgba(159,227,74,.15), rgba(159,227,74,.6), rgba(245,212,22,.4), rgba(159,227,74,.15))}
  .fluxo-passo{display:flex;gap:16px;align-items:flex-start;text-align:left}
  .fluxo-no{flex-shrink:0;margin:0}
  .fluxo p{margin:0;max-width:none}
}

/* ——————— Security ——————— */
.sec-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  position:relative;
}
.sec-grid::before{
  content:"";position:absolute;left:8%;right:8%;top:54px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(159,227,74,.3) 20%,rgba(245,212,22,.3) 50%,rgba(159,227,74,.3) 80%,transparent);
  z-index:0;pointer-events:none;
}
.sec-card{
  position:relative;z-index:1;
  background:linear-gradient(180deg, rgba(20,55,75,.5), rgba(10,30,42,.65));
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line-2);
  border-radius:20px;padding:28px 22px;
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;align-content:start;
  transition:.25s;
}
.sec-card:hover{
  transform:translateY(-3px);
  border-color:rgba(159,227,74,.35);
  box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 30px rgba(159,227,74,.06);
}
.sec-icn{
  width:54px;height:54px;border-radius:14px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 30% 30%, rgba(159,227,74,.18), rgba(245,212,22,.06));
  border:1px solid rgba(159,227,74,.3);
  color:#9FE34A;
  box-shadow:0 0 24px rgba(159,227,74,.15), inset 0 1px 0 rgba(255,255,255,.05);
}
.sec-icn svg{width:24px;height:24px}
.sec-card h4{
  font-size:16px;font-weight:600;margin:0;padding-right:22px;line-height:1.25;text-wrap:balance;letter-spacing:-.01em;
  color:var(--t-1);
}
.sec-card p{font-size:13.5px;line-height:1.55;color:var(--t-3);margin:16px 0 0;grid-column:1 / -1}
.sec-step{
  position:absolute;top:18px;right:18px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  color:var(--t-4);letter-spacing:.08em;
}

.sec-seal{
  margin:32px auto 0;display:flex;justify-content:center;
}
.sec-seal-pill{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 22px;border-radius:999px;
  background:linear-gradient(180deg, rgba(159,227,74,.08), rgba(245,212,22,.04));
  border:1px solid rgba(159,227,74,.3);
  font-size:13.5px;color:var(--t-1);font-weight:500;
  box-shadow:0 0 30px rgba(159,227,74,.1);
}
.sec-seal-pill .pulse{
  width:8px;height:8px;border-radius:50%;background:#9FE34A;
  box-shadow:0 0 0 4px rgba(159,227,74,.2);
  animation:secPulse 2s ease-in-out infinite;
}
@keyframes secPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(159,227,74,.2)}
  50%{box-shadow:0 0 0 8px rgba(159,227,74,.05)}
}
.sec-seal-pill svg{width:14px;height:14px;color:#9FE34A}

@media (max-width:1024px){
  .sec-grid{grid-template-columns:repeat(2,1fr)}
  .sec-grid::before{display:none}
}
/* Celular: ícone + título na mesma linha, descrição embaixo na largura toda (mesmo padrão dos outros cards) */
@media (max-width:640px){
  .sec-card{
    padding:16px;border-radius:18px;
    display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;
  }
  .sec-icn{width:42px;height:42px;border-radius:12px;margin:0}
  .sec-icn svg{width:20px;height:20px}
  .sec-card h4{margin:0;padding-right:28px}
  .sec-card p{grid-column:1 / -1;margin-top:10px}
  .sec-step{top:16px;right:16px}
}
@media (max-width:540px){
  .sec-grid{grid-template-columns:1fr;gap:12px}
  .sec-seal-pill{padding:10px 16px;font-size:12.5px;text-align:left;line-height:1.4}
}

/* Tolerância 0 a fraudes: faixa de destaque (escudo com bloqueio + texto) */
.fraude-zero{
  display:grid;grid-template-columns:auto auto;justify-content:center;gap:clamp(20px,4vw,48px);align-items:center;
  padding:clamp(24px,3.5vw,40px) clamp(22px,4vw,48px);
  border-radius:var(--r-xl);position:relative;overflow:hidden;
  background:linear-gradient(135deg, rgba(159,227,74,.12), rgba(245,212,22,.06) 60%, rgba(10,30,42,.6));
  border:1px solid rgba(159,227,74,.4);
  box-shadow:0 0 60px rgba(159,227,74,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Ícone: escudo escuro sobre o gradiente da marca, com duas ondas de alerta pulsando em volta */
.fraude-zero-ic{
  position:relative;width:clamp(84px,9vw,112px);aspect-ratio:1;border-radius:28px;display:grid;place-items:center;
  color:#062014;background:var(--accent-grad);
  box-shadow:0 14px 40px rgba(159,227,74,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.fraude-zero-ic svg{width:58%;height:58%}
.fraude-zero-ic::before,.fraude-zero-ic::after{
  content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(159,227,74,.55);
  animation:fz-onda 2.4s ease-out infinite;pointer-events:none;
}
.fraude-zero-ic::after{animation-delay:1.2s}
@keyframes fz-onda{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(1.45);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .fraude-zero-ic::before,.fraude-zero-ic::after{animation:none;opacity:0}
}
.fraude-zero-tag{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#9FE34A;font-weight:700;margin-bottom:10px}
.fraude-zero h3{font-size:clamp(24px,3.4vw,40px);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:0 0 10px;text-wrap:balance}
.fraude-zero p{margin:0;color:var(--t-2);font-size:clamp(14px,1.4vw,16.5px);line-height:1.55;max-width:620px}
/* Antifraude + Cobrança ética lado a lado; empilha abaixo de 900px */
.fraude-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fraude-duo .fraude-zero{justify-content:start}
.fraude-duo .fraude-zero h3{font-size:clamp(22px,2.2vw,30px)}
@media (max-width:900px){ .fraude-duo{grid-template-columns:1fr} }
@media (max-width:640px){
  .fraude-zero{grid-template-columns:1fr;text-align:center;gap:8px}
  .fraude-zero p{margin:0 auto}
  .fraude-zero-ic{margin:0 auto 14px}
}

/* ——————— Recuperação de crédito: título gigante + 3 canais de cobrança ——————— */
.recup-head{text-align:center;max-width:900px;margin:0 auto clamp(28px,3.5vw,44px)}
.section .recup-head h2,.section .recup-head h1{font-size:clamp(36px,6.4vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:0 0 14px}
.recup-head .section-sub{font-size:clamp(16px,1.8vw,20px)}
.recup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Card: ícone e título na mesma linha, descrição embaixo na largura toda */
.recup-card{
  position:relative;padding:26px;border-radius:var(--r-lg);
  display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;align-content:start;
  background:linear-gradient(180deg, rgba(20,55,75,.5), rgba(10,30,42,.65));
  border:1px solid var(--line-2);transition:.25s;
}
.recup-card:hover{transform:translateY(-3px);border-color:rgba(159,227,74,.4);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.recup-ic{
  width:56px;height:56px;border-radius:15px;display:grid;place-items:center;color:#062014;
  background:var(--accent-grad);box-shadow:0 10px 30px rgba(159,227,74,.25);
}
.recup-card h3{font-size:20px;font-weight:700;line-height:1.2;margin:0;letter-spacing:-.01em;text-wrap:balance}
.recup-card p{grid-column:1 / -1;margin:16px 0 0;color:var(--t-2);font-size:14.5px;line-height:1.55}
.recup-cta{display:flex;justify-content:center;margin-top:clamp(24px,3vw,36px)}
/* Destaque: cobrança com IA ocupa a coluna da esquerda inteira; ligações e presencial empilham à direita */
.recup-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.recup-ia{
  grid-row:1 / span 2;padding:clamp(26px,3vw,40px);column-gap:20px;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(159,227,74,.16), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(245,212,22,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,55,75,.6), rgba(10,30,42,.75));
  border-color:rgba(159,227,74,.45);
  box-shadow:0 0 60px rgba(159,227,74,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.recup-selo{
  grid-column:1 / -1;justify-self:start;margin-bottom:20px;padding:6px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#062014;background:var(--accent-grad);
}
.recup-ia .recup-ic{width:72px;height:72px;border-radius:20px}
.recup-ia .recup-ic svg{width:36px;height:36px}
/* Ícone da IA: alterna entre os 4 casos da lista (conversa, desconto, QR Code do acordo, equipe humana),
   2,5s cada; o item correspondente da lista acende junto. No 1º caso o balão "digita" e a faísca pisca. */
.ia-anim .ia-caso{transform-box:view-box;transform-origin:center;opacity:0;animation:ia-troca 10s ease-in-out infinite both}
.ia-anim .ia-caso2,.recup-lista li:nth-child(2){animation-delay:2.5s}
.ia-anim .ia-caso3,.recup-lista li:nth-child(3){animation-delay:5s}
.ia-anim .ia-caso4,.recup-lista li:nth-child(4){animation-delay:7.5s}
@keyframes ia-troca{
  0%{opacity:0;transform:scale(.5) rotate(-12deg)}
  4%,22%{opacity:1;transform:none}
  26%,100%{opacity:0;transform:scale(.5) rotate(12deg)}
}
@keyframes ia-item{
  0%,26%,100%{background-color:transparent;color:var(--t-2)}
  4%,22%{background-color:rgba(159,227,74,.12);color:var(--t-1)}
}
.ia-anim .ia-ponto,.ia-anim .ia-faisca{transform-box:fill-box;transform-origin:center}
.ia-anim .ia-ponto{animation:ia-digita 1.4s ease-in-out infinite}
.ia-anim .ia-ponto:nth-of-type(2){animation-delay:.18s}
.ia-anim .ia-ponto:nth-of-type(3){animation-delay:.36s}
.ia-anim .ia-faisca{animation:ia-brilha 2.2s ease-in-out infinite}
@keyframes ia-digita{
  0%,60%,100%{transform:translateY(0);opacity:.55}
  30%{transform:translateY(-2px);opacity:1}
}
@keyframes ia-brilha{
  0%,100%{transform:scale(.7) rotate(0deg);opacity:.6}
  50%{transform:scale(1.15) rotate(45deg);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .ia-anim .ia-ponto,.ia-anim .ia-faisca,.ia-anim .ia-caso,.recup-lista li{animation:none}
  .ia-anim .ia-caso1{opacity:1}
}
.recup-card.recup-ia h3{font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-.02em;font-weight:800}
.recup-ia h3 .accent{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.recup-card.recup-ia p{font-size:clamp(15px,1.4vw,17px);margin-top:20px}
.recup-chips{grid-column:1 / -1;list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.recup-chips li{font-size:12.5px;color:var(--t-2);padding:6px 12px;border-radius:999px;background:rgba(159,227,74,.06);border:1px solid rgba(159,227,74,.22)}
.recup-lista{grid-column:1 / -1;list-style:none;margin:16px -10px 0;padding:0;display:grid;gap:4px}
.recup-lista li{
  position:relative;padding:7px 10px 7px 38px;border-radius:10px;font-size:14.5px;color:var(--t-2);line-height:1.45;
  animation:ia-item 10s ease-in-out infinite both;
}
.recup-lista li::before{
  content:"";position:absolute;left:10px;top:9px;width:18px;height:18px;border-radius:6px;
  background:rgba(159,227,74,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FE34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border:1px solid rgba(159,227,74,.35);
}
@media (max-width:900px){
  .recup-grid{grid-template-columns:1fr;gap:12px}
  .recup-ia{grid-row:auto}
  .recup-card{padding:18px;column-gap:14px}
  .recup-ic{width:46px;height:46px;border-radius:12px}
  .recup-card h3{font-size:18px}
  .recup-card p{margin-top:10px}
  .recup-ia .recup-ic{width:56px;height:56px;border-radius:15px}
  .recup-ia .recup-ic svg{width:28px;height:28px}
  .recup-card.recup-ia h3{font-size:22px}
  .recup-selo{margin-bottom:14px}
}

/* ——————— Blog ——————— */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.blog-card{
  position:relative;border-radius:20px;padding:1.5px;
  background-image:linear-gradient(140deg, rgba(159,227,74,.18), rgba(245,212,22,.1) 40%, rgba(150,200,220,.06) 100%);
  transition:.3s;cursor:pointer;
}
.blog-card:hover{
  transform:translateY(-4px);
  background-image:linear-gradient(140deg, rgba(159,227,74,.55), rgba(245,212,22,.4) 50%, rgba(159,227,74,.2) 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 50px rgba(159,227,74,.12);
}
.blog-card-inner{
  position:relative;border-radius:18.5px;overflow:hidden;
  background:linear-gradient(180deg, rgba(15,40,55,.92), rgba(8,22,30,.96));
  display:flex;flex-direction:column;height:100%;
}
.blog-cover{
  height:170px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 30% 30%, rgba(159,227,74,.18), rgba(20,55,75,.5) 60%, rgba(8,22,30,1));
  border-bottom:1px solid var(--line);
}
.blog-cover svg{position:absolute;inset:0;width:100%;height:100%}
.blog-cat{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.04em;
  background:rgba(6,20,28,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(159,227,74,.3);color:#9FE34A;
}
.blog-body{padding:22px;display:flex;flex-direction:column;flex:1;gap:10px}
.blog-card h4{
  font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  margin:0;color:var(--t-1);text-wrap:balance;
}
.blog-card p.excerpt{
  font-size:13.5px;line-height:1.55;color:var(--t-3);margin:0;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--t-4);
}
.blog-read{display:inline-flex;align-items:center;gap:6px;font-feature-settings:"tnum"}
.blog-read svg{width:12px;height:12px;opacity:.7}
.blog-arrow{
  display:inline-flex;align-items:center;gap:4px;
  color:#9FE34A;font-weight:500;font-family:'Inter',sans-serif;
  transition:.2s;
}
.blog-card:hover .blog-arrow{gap:7px;color:#F5D416}
.blog-arrow svg{width:13px;height:13px}

@media (max-width:900px){
  .blog-grid{grid-template-columns:1fr;gap:16px}
  .blog-cover{height:150px}
  .blog-card h4{font-size:16px}
}
@media (max-width:480px){
  .blog-cover{height:130px}
  .blog-body{padding:18px}
  .blog-card h4{font-size:15.5px}
  .blog-card p.excerpt{font-size:13px}
}

/* O link do título cobre o card inteiro: clique em qualquer ponto abre o artigo */
.blog-link{color:inherit}
.blog-link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:20px}
.blog-link:focus-visible{outline:none}
.blog-card:has(.blog-link:focus-visible){outline:2px solid #9FE34A;outline-offset:3px}

.leitor-corpo{padding:28px clamp(20px,5vw,48px) 40px}
.leitor-corpo h1{font-size:clamp(24px,3.4vw,34px);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.leitor-autor{font-size:13px;color:var(--t-3);margin:0 0 26px}
.leitor-texto{font-size:16px;line-height:1.75;color:var(--t-2)}
.leitor-texto p{margin:0 0 18px}
.leitor-texto h2{font-size:20px;line-height:1.3;color:var(--t-1);margin:30px 0 12px;letter-spacing:-.01em}
.leitor-texto ul{margin:0 0 18px;padding-left:20px}
.leitor-texto li{margin-bottom:8px}
.leitor-texto strong{color:var(--t-1)}
.leitor-cta{
  margin-top:30px;padding:20px 22px;border-radius:16px;
  background:rgba(159,227,74,.06);border:1px solid rgba(159,227,74,.2);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.leitor-cta p{margin:0;font-size:14.5px;color:var(--t-2);flex:1 1 280px}
.leitor-outros{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.leitor-outros h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-3);margin:0 0 12px;font-weight:600}
.leitor-outros a{display:block;padding:12px 0;color:var(--t-1);font-weight:600;font-size:15px;border-bottom:1px solid var(--line)}
.leitor-outros a:hover{color:#9FE34A}

/* CTA banner */
.cta-banner{
  position:relative;padding:64px 56px;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(159,227,74,.15), transparent 70%),
    radial-gradient(60% 100% at 0% 100%, rgba(245,212,22,.10), transparent 70%),
    linear-gradient(180deg, rgba(20,55,75,.7), rgba(10,30,42,.85));
  border:1px solid var(--line-2);
  border-radius:28px;overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
}
.cta-banner h3{font-size:clamp(24px, 3.4vw, 36px);font-weight:700;letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance;max-width:600px}
.cta-banner h3 .accent{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-banner p{margin:0;font-size:16px;color:var(--t-2);max-width:560px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Footer */
.footer{
  padding:52px 0 32px;border-top:1px solid var(--line);margin-top:40px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.3));
}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px}
.foot-brand{max-width:320px}
.foot-brand p{font-size:13.5px;color:var(--t-3);line-height:1.6;margin:18px 0 24px}
.foot-social{display:flex;gap:8px}
.foot-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--t-2);transition:.2s}
.foot-social a:hover{color:#9FE34A;border-color:rgba(159,227,74,.4)}
.foot-col h5{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-1);margin:0 0 18px;font-weight:600}
.foot-col a{display:block;font-size:13.5px;color:var(--t-3);margin-bottom:10px;transition:.15s}
.foot-col a:hover{color:#9FE34A}
.foot-bot{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding-top:28px;border-top:1px solid var(--line);font-size:12.5px;color:var(--t-4);
}
.foot-disclaimer{
  margin:0 0 28px;display:flex;gap:11px;align-items:flex-start;
  background:rgba(159,227,74,.05);border:1px solid rgba(159,227,74,.18);
  border-radius:14px;padding:14px 18px;
}
.foot-disclaimer svg{width:18px;height:18px;color:#9FE34A;flex-shrink:0;margin-top:1px}
.foot-disclaimer p{margin:0;font-size:12.5px;color:var(--t-3);line-height:1.55}
.foot-disclaimer strong{color:var(--t-2);font-weight:600}
.foot-legal{font-size:12.5px;color:var(--t-4);line-height:1.7;margin:0 0 4px}
.foot-legal .sep{opacity:.4;margin:0 8px}

/* ——————— App / Conta digital ——————— */
.app-shell{
  position:relative;border-radius:var(--r-xl);overflow:hidden;padding:1.5px;
  background-image:linear-gradient(135deg, rgba(159,227,74,.45), rgba(245,212,22,.45) 50%, rgba(159,227,74,.12) 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 60px rgba(159,227,74,.07);
}
.app-inner{
  background:linear-gradient(180deg, rgba(15,40,55,.92), rgba(8,22,30,.96));
  border-radius:calc(var(--r-xl) - 2px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,56px);
  padding:clamp(32px,4vw,56px);align-items:center;
}
.app-copy .section-tag{margin-bottom:12px}
.app-copy h2,.app-copy h1{font-size:clamp(26px,3.6vw,40px);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin:0 0 16px;text-wrap:balance}
.app-copy h2 .accent,.app-copy h1 .accent{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.app-copy > p{font-size:15.5px;color:var(--t-2);line-height:1.6;margin:0 0 26px;max-width:460px}
.app-feats{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:14px}
.app-feats li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--t-2);line-height:1.45}
.app-feats .chk{flex-shrink:0;width:24px;height:24px;border-radius:7px;background:rgba(159,227,74,.12);border:1px solid rgba(159,227,74,.3);display:grid;place-items:center;color:var(--lime);margin-top:1px}
.app-feats .chk svg{width:14px;height:14px}
.app-feats li strong{color:var(--t-1);font-weight:600}
.store-btns{display:flex;gap:12px;flex-wrap:wrap}
.store-btn{
  display:inline-flex;align-items:center;gap:11px;padding:11px 20px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--t-1);transition:.2s;
}
.store-btn:hover{border-color:rgba(159,227,74,.4);background:rgba(255,255,255,.07);transform:translateY(-1px)}
.store-btn svg{width:26px;height:26px;flex-shrink:0}
.store-btn .st{display:flex;flex-direction:column;line-height:1.15}
.store-btn .st small{font-size:10.5px;color:var(--t-3);letter-spacing:.02em}
.store-btn .st b{font-size:15px;font-weight:600;letter-spacing:-.01em}

/* Phone mock */
.app-visual{position:relative;display:grid;place-items:center;min-height:300px}
.phone{
  position:relative;width:230px;aspect-ratio:9/18.5;border-radius:34px;
  background:linear-gradient(170deg,#0F2C3D,#081820);
  border:1px solid var(--line-2);
  box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  padding:12px;
}
.phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:64px;height:5px;border-radius:99px;background:rgba(255,255,255,.12);z-index:2}
/* Variante com screenshot real do app */
.phone-shot{padding:8px}
.phone-shot::before{display:none}
.phone-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:27px;display:block}
.phone-screen{height:100%;border-radius:24px;background:radial-gradient(120% 80% at 50% 0%, rgba(159,227,74,.10), transparent 55%), #0A1E2A;border:1px solid var(--line);padding:26px 18px 18px;display:flex;flex-direction:column}
.phone-bal-label{font-size:10.5px;color:var(--t-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.phone-bal{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:600;letter-spacing:-.02em;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.phone-row{display:flex;gap:8px;margin-top:18px}
.phone-chip{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:11px 10px;text-align:center}
.phone-chip svg{width:18px;height:18px;color:#9FE34A;margin-bottom:5px}
.phone-chip span{display:block;font-size:9.5px;color:var(--t-2)}
.phone-list{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.phone-item{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.phone-item .ic{width:26px;height:26px;border-radius:8px;background:rgba(159,227,74,.12);display:grid;place-items:center;color:#9FE34A;flex-shrink:0}
.phone-item .ic svg{width:14px;height:14px}
.phone-item .tx{flex:1}
.phone-item .tx b{display:block;font-size:11px;color:var(--t-1);font-weight:600}
.phone-item .tx small{font-size:9.5px;color:var(--t-3)}
.phone-item .val{font-size:11px;font-weight:600;color:#9FE34A;font-family:'JetBrains Mono',monospace}
.app-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(159,227,74,.18),transparent 65%);filter:blur(20px);z-index:0}
.app-visual .phone{position:relative;z-index:1}

/* ——————— FAQ ——————— */
.faq-wrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  border:1px solid var(--line-2);border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(20,55,75,.35), rgba(10,30,42,.5));
  overflow:hidden;transition:border-color .2s;
}
.faq-item[open]{border-color:rgba(159,227,74,.35)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:16px;font-weight:600;color:var(--t-1);letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:#fff}
.faq-q-ic{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:#9FE34A;transition:.25s}
.faq-item[open] .faq-q-ic{transform:rotate(45deg);background:rgba(159,227,74,.12);border-color:rgba(159,227,74,.4)}
.faq-q-ic svg{width:15px;height:15px}
.faq-a{padding:0 22px 22px;font-size:14.5px;color:var(--t-2);line-height:1.65;max-width:680px}
.faq-cta{text-align:center;margin-top:34px;font-size:14.5px;color:var(--t-3)}
.faq-cta a{color:#9FE34A;font-weight:600}
.faq-cta a:hover{text-decoration:underline}
.faq-cta:has(a[hidden]){display:none}

@media (max-width:860px){
  .app-inner{grid-template-columns:1fr;gap:38px}
  .app-visual{min-height:0;order:-1}
  .phone{width:200px}
}

/* ——————— Responsive ——————— */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero > .wrap > .hero-grid > div:first-child{text-align:left;max-width:680px}
  .hero-visual{
    height:580px;min-height:520px;
    margin:0 auto;max-width:580px;width:100%;
  }
  .hero-meta{justify-content:flex-start}
  .pillars{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr}
}
@media (max-width: 900px){
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .nav-burger{display:inline-flex}
  .hero-visual{height:600px;min-height:0;max-width:540px}
  .dash{width:min(420px,82%)}
  .pix-card,.wa-card{width:280px}
  .hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .hero-meta .stat{min-width:0}
  .pillars{grid-template-columns:1fr}
  .pillar details > summary{
    display:flex;align-items:center;justify-content:space-between;
    list-style:none;cursor:pointer;padding:14px 0;margin:0;
    font-size:13px;font-weight:600;color:#C5E88A;letter-spacing:.02em;
    border-top:1px solid var(--line);min-height:44px;
  }
  .pillar details > summary::-webkit-details-marker{display:none}
  .pillar details > summary .chev{
    width:24px;height:24px;border-radius:50%;background:rgba(159,227,74,.12);
    display:grid;place-items:center;color:#9FE34A;transition:transform .25s;
  }
  .pillar details[open] > summary .chev{transform:rotate(180deg)}
  .pillar details > .pillar-body{display:none;padding-bottom:6px}
  .pillar details[open] > .pillar-body{display:block}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .cta-banner{flex-direction:column;align-items:flex-start}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1;min-width:0}
}
@media (max-width: 640px){
  .nav{top:8px;margin-top:8px;padding:0 12px}
  .nav-inner{padding:6px 6px 6px 14px;gap:10px;align-items:center;min-height:54px}
  .brand-logo{height:26px}
  .nav-burger{width:40px;height:40px}
  .nav-burger svg{width:18px;height:18px}
  .nav{top:12px;margin-top:12px}
  .nav-inner{padding:6px 6px 6px 14px;gap:10px;align-items:center;min-height:54px;overflow:visible}
  .nav-cta .btn-primary{padding:9px 14px;font-size:13px;min-height:40px}
  .hero{padding-top:6px !important;padding-bottom:20px !important;min-height:0 !important}
  .hero > .wrap > .hero-grid{display:flex !important;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0 !important}
  .hero-grid > div:first-child{display:flex;flex-direction:column;justify-content:flex-start}
  h1.hero-title{margin:0 0 4px !important;line-height:1.08;padding:0}
  .hero-sub{margin:0 0 8px !important;line-height:1.4;font-size:15px;padding:0}
  .hero-cta{flex-direction:column;align-items:stretch;gap:6px !important;margin:0 !important;padding:0}
  .hero-meta{margin:10px 0 0 !important;padding:0}
  .hero-sub{margin:0 0 10px !important;line-height:1.4;font-size:15px;padding:0}
  .hero-cta{flex-direction:column;align-items:stretch;gap:6px !important;margin:0 !important;padding:0}
  .hero-meta{margin:14px 0 0 !important;padding:0}
  .hero-visual{margin-top:18px !important}
  .hero-cta .btn{width:100%;flex:1 1 auto}
  .hero-meta{grid-template-columns:repeat(2,1fr);gap:20px 16px;width:100%}
  .hero-meta .stat{flex:initial;min-width:0}
  .hero-visual{min-height:0;height:auto;max-width:100%}
  /* Stack hero composition vertically on small screens */
  .dash, .pix-card, .wa-card{
    position:static;width:100%;max-width:100%;box-sizing:border-box;
  }
  .dash{margin-bottom:14px}
  .pix-card{margin-bottom:14px}
  .y2-glow{inset:-20px}

  /* Footer */
  .foot-grid{grid-template-columns:1fr;gap:36px;margin-bottom:40px}
  .foot-bot{flex-direction:column;align-items:flex-start;text-align:left}

  /* CTA */
  .cta-actions{flex-direction:column}
  .cta-actions .btn{width:100%}

  /* Section spacing */
  .section{padding:30px 0}

  /* Cards compactos: ícone ao lado do título, respiros menores */
  .pillars{gap:12px}
  .pillar{
    padding:16px 16px 6px;border-radius:18px;
    display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;
  }
  .pillar > *{grid-column:1 / -1}
  .pillar > .pillar-icon{grid-column:1;width:42px;height:42px;border-radius:12px;margin:0}
  .pillar > .pillar-icon::after{border-radius:12px}
  .pillar > .pillar-icon svg{width:22px;height:22px}
  .pillar > h3{grid-column:2;font-size:18px;margin:0;padding-right:44px}
  .pillar-num{top:16px;right:16px;font-size:11.5px}
  .pillar p{font-size:14px;line-height:1.5;margin:10px 0 4px}
  .pillar ul{gap:7px;margin:4px 0 12px}
  .pillar li{font-size:13px}
  .pillar-link{padding-top:10px;min-height:40px}
  .pillar details > summary{padding:8px 0;min-height:40px}

  /* App: moldura com menos respiro */
  .app-inner{padding:20px 18px 22px;gap:22px}
  .phone{width:180px}
  .app-copy h2,.app-copy h1{font-size:26px;margin-bottom:12px}
  .app-copy > p{font-size:14.5px;margin-bottom:18px}
  .app-feats{gap:10px;margin-bottom:20px}
  .app-feats li{font-size:13.5px}
  .store-btns{flex-wrap:nowrap;gap:8px}
  .store-btn{flex:1;min-width:0;padding:9px 12px;gap:9px}

  /* FAQ mais baixo */
  .faq-wrap{gap:8px}
  .faq-item summary{padding:14px 16px;font-size:15px}
  .faq-a{padding:0 16px 16px;font-size:14px}

  /* Rodapé: marca na largura toda, colunas de links lado a lado */
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 16px;margin-bottom:26px}
  .foot-grid > .foot-brand{grid-column:1 / -1;max-width:none}
  .foot-brand p{margin:14px 0 14px}

  /* CTA final: padding bem menor e botões na largura toda */
  .cta-banner{padding:24px 18px;gap:18px;border-radius:20px}
  .cta-banner h3{font-size:23px;margin-bottom:8px}
  .cta-banner p{font-size:14.5px}
  .cta-actions{width:100%;gap:8px}
}

@media (max-width: 380px){
  .hero-meta{grid-template-columns:1fr;gap:18px}
}

@media (max-width: 400px){
  .nav{padding:0 10px}
  .nav-inner{padding:5px 5px 5px 10px;gap:8px;align-items:center;min-height:50px}
  .brand-logo{height:24px}
  .nav-cta{gap:6px}
  .nav-cta .btn-primary{padding:8px 14px;font-size:12.5px;min-height:38px;gap:0;flex-shrink:0}
  .nav-cta .btn-primary .arrow{display:none}
  .nav-burger{width:38px;height:38px;flex-shrink:0}
  .nav-burger svg{width:16px;height:16px}
}

@media (max-width: 375px){
  .nav-cta .btn-primary .demo-full{display:none}
  .nav-cta .btn-primary .demo-short{display:inline !important}
  .nav-cta .btn-primary{padding:8px 13px;font-size:12.5px}
}

@media (max-width: 360px){
  .nav{padding:0 8px;top:calc(10px + env(safe-area-inset-top, 0px));margin-top:calc(10px + env(safe-area-inset-top, 0px))}
  .nav-inner{padding:5px 5px 5px 8px;gap:6px;align-items:center;min-height:48px}
  .brand-logo{height:22px}
  .nav-cta{gap:6px}
  .nav-cta .btn-primary{padding:8px 12px;font-size:12px;min-height:36px;border-radius:999px}
  .nav-burger{width:36px;height:36px}
  .nav-burger svg{width:15px;height:15px}
}

  .nav-cta .btn-primary{padding:10px 16px;font-size:13.5px}
}

/* Touch targets — make every link in lists/footers comfortable */
@media (hover:none){
  .foot-col a, .nav-links a{padding-top:10px;padding-bottom:10px;min-height:44px;display:flex;align-items:center}
}

/* ——————— Download do app ——————— */
.app-copy .app-feats:last-child{margin-bottom:0}
.down{
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(24px,3.5vw,44px);border-radius:var(--r-xl);border:1px solid var(--line-2);
  background:radial-gradient(70% 120% at 100% 50%, rgba(159,227,74,.10), transparent 60%), rgba(8,24,34,.55);
}
.down-copy .section-tag{margin-bottom:12px}
.down-copy h2{font-size:clamp(24px,3vw,34px);line-height:1.12;margin:0 0 18px;text-align:left}
.down-copy h2 .accent{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.down-passos{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.down-passos li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--t-2);line-height:1.5}
.down-n{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:700;color:#062014;background:var(--accent-grad);
}
.down-lojas{display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:280px;width:100%;justify-self:end}
.down-lojas .store-btn{justify-content:flex-start}
.down-nota{margin:2px 0 0;font-size:12.5px;color:var(--t-3);text-align:center}
/* Celulares do app (imagem do site original) à direita das lojas, saindo um pouco do card */
.down{grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr)}
.down-cel{position:relative;align-self:stretch;min-height:240px}
.down-cel img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:clamp(260px,26vw,360px);max-width:none;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));
}
@media (max-width:1024px){
  .down{grid-template-columns:1fr 1fr}
  .down-cel{grid-column:1 / -1;min-height:0}
  .down-cel img{position:static;transform:none;margin:0 auto;height:auto;width:min(300px,80%)}
}
@media (max-width:760px){
  .down{grid-template-columns:1fr;padding:20px 18px;gap:20px;border-radius:20px}
  .down-lojas{flex-direction:row;flex-wrap:wrap;max-width:none;justify-self:stretch}
  .down-lojas .store-btn{flex:1;min-width:0;padding:9px 12px;gap:9px}
  .down-nota{flex-basis:100%}
  .down-passos li{font-size:14px}
}

/* ——————— Menu no desktop: barra de ponta a ponta, conteúdo alinhado ao .wrap;
   ao rolar ganha fundo e só a borda inferior (sem bordas laterais/superior, sem arredondar) ——————— */
@media (min-width:901px){
  .page{padding-top:0 !important}
  .nav{top:0;margin:0;padding:0;max-width:none}
  .nav-inner{
    border-radius:0;border-width:0 0 1px;box-shadow:none;box-sizing:border-box;min-height:70px;
    padding:12px max(clamp(20px, 4vw, 32px), calc((100% - 1280px) / 2));
  }
  .nav.rolada .nav-inner{background:rgba(6,20,28,.86);box-shadow:none}
}
/* Monitores altos: o conteúdo do topo cresce 15% (zoom); o menu acompanha o alinhamento */
@media (min-width:1500px) and (min-height:1000px){
  .nav-inner{padding-left:max(37px, calc((100% - 1472px) / 2 + 37px));padding-right:max(37px, calc((100% - 1472px) / 2 + 37px))}
}
/* ——————— Topo no celular/tablet: barra de menu de ponta a ponta sempre que o menu vira botão (≤900 px);
   respiro entre os itens do hero no celular (≤640 px) ———————
   Fica no fim do CSS para prevalecer sobre os ajustes antigos por largura. */
@media (max-width:900px){
  .page{padding-top:0 !important}
  .nav{top:0;margin:0;padding:0;max-width:none}
  .nav-inner{
    border-radius:0;border-width:0 0 1px;min-height:0;gap:10px;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 20px 10px;
    background:rgba(6,20,28,.86);box-shadow:none;
  }
  .brand-logo{height:26px}
  .nav-cta{gap:10px}
  .nav-cta .btn-primary{min-height:38px;padding:0 16px;font-size:13.5px}
  .nav-burger{width:40px;height:40px}
  .nav-burger svg{width:18px;height:18px}
  /* Menu aberto: cabeçalho idêntico à barra (mesmo padding e alturas), logo e botão não pulam */
  .mobile-drawer{padding:0 20px calc(20px + env(safe-area-inset-bottom, 0px))}
  .mobile-drawer-head{padding:calc(10px + env(safe-area-inset-top, 0px)) 0 10px;margin:0 0 8px;min-height:0}
  .mobile-drawer .close{width:40px;height:40px}

}
@media (max-width:640px){
  .hero{padding-top:22px !important;padding-bottom:28px !important}
  h1.hero-title{font-size:clamp(30px, 9vw, 38px);line-height:1.1;margin:0 0 12px !important}
  .hero-sub{font-size:15px;line-height:1.5;margin:0 0 22px !important}
  .hero-cta{gap:10px !important}
  .hero-cta .btn{min-height:50px}
  .hero-visual{margin-top:30px !important}
  .kpi .lab{font-size:10px;letter-spacing:.04em;white-space:nowrap}
}
@media (max-width:360px){
  .brand-logo{height:24px}
  .nav-cta{gap:8px}
}

/* ——————— Celular: composição própria em vez de empilhar tudo em 100% ———————
   Carrosséis com deslize (o próximo card aparece na borda), cards que se sobrepõem
   e grades de 2 colunas. Só abaixo de 640 px; desktop e tablet não mudam. */
@media (max-width:640px){
  /* Carrossel: sai até a borda da tela, encaixa card a card, sem barra de rolagem */
  .fluxo, .serv-lista, .pillars, .blog-grid{
    display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 20px;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:6px 20px 18px;scrollbar-width:none;
  }
  .fluxo::-webkit-scrollbar, .serv-lista::-webkit-scrollbar, .pillars::-webkit-scrollbar, .blog-grid::-webkit-scrollbar{display:none}
  .fluxo > *, .serv-lista > *, .pillars > *, .blog-grid > *{flex:0 0 84%;scroll-snap-align:start;min-width:0}

  /* Topo: composição em camadas. A notificação do Pix "cai" sobre o canto do painel,
     o painel fica recuado à esquerda e o acordo da IA encaixa na base, saindo pela direita. */
  .hero-visual{padding:52px 0 4px}
  .hero .dash{width:93%;margin:0;padding:14px 16px 52px;border-radius:18px;transform:rotate(-1deg);transform-origin:left top}
  /* Painel compacto: cabeçalho, valor e gráfico mais baixos; indicadores numa linha só */
  .hero .dash-head{margin-bottom:6px}
  .hero .dash-head h4{font-size:12.5px;white-space:nowrap}
  .hero .tabs{font-size:10.5px;padding:2px}
  .hero .tabs span{padding:3px 7px}
  .hero .dash .big{font-size:26px}
  .hero .dash .big .cur{font-size:13px;margin-right:4px}
  .hero .dash .delta{font-size:11px;padding:3px 7px;margin-left:6px}
  .hero .chart{height:54px;margin-top:8px}
  .hero .dash-foot{margin-top:10px;padding-top:10px;gap:6px}
  .hero .kpi .lab{font-size:9px}
  .hero .kpi .val{font-size:14px;margin-top:2px}
  .hero .pix-card, .hero .wa-card{padding:11px 13px;border-radius:16px;box-shadow:0 22px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(159,227,74,.18)}
  .hero .pix-card{position:absolute;top:0;right:-4px;width:88%;z-index:3;transform:rotate(2deg)}
  .hero .pix-card .pix-meta{display:none}
  .hero .wa-card{position:relative;width:84%;margin:-50px -4px 0 auto;z-index:4;transform:rotate(-1.5deg)}
  .hero .wa-card .pix-meta{margin-top:10px;padding-top:9px}
  .hero .pix-row{gap:10px}
  .hero .pix-icon{width:34px;height:34px;flex-shrink:0;font-size:12px}
  .hero .pix-row .who{min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero .pix-row .who span{font-size:11px;overflow:hidden;text-overflow:ellipsis}
  .hero .pix-amt{font-size:14px}

  /* Recuperação: a IA em destaque e os outros dois canais lado a lado, encaixados na base dela */
  .recup-grid{grid-template-columns:1fr 1fr;gap:10px}
  .recup-ia{grid-column:1 / -1;padding-bottom:52px}
  .recup-card:not(.recup-ia){
    margin-top:-40px;position:relative;z-index:2;padding:14px;
    grid-template-columns:1fr;row-gap:10px;align-items:start;
    background:linear-gradient(180deg, rgba(24,62,84,.96), rgba(10,30,42,.98));
    box-shadow:0 -10px 30px rgba(0,0,0,.35);
  }
  .recup-card:not(.recup-ia) .recup-ic{width:40px;height:40px;border-radius:11px}
  .recup-card:not(.recup-ia) .recup-ic svg{width:22px;height:22px}
  .recup-card:not(.recup-ia) h3{font-size:15.5px}
  .recup-card:not(.recup-ia) p{margin:0;font-size:13px;line-height:1.45}
  .recup-card:not(.recup-ia) .recup-chips{margin:2px 0 0;gap:5px}
  .recup-card:not(.recup-ia) .recup-chips li{font-size:11px;padding:4px 9px;line-height:1.3;border-radius:10px;max-width:100%}

  /* Como funciona: as 4 etapas viram uma trilha horizontal, linha passando pelos ícones */
  .fluxo{border:0;position:relative}
  .fluxo::before{display:none}
  .fluxo > .fluxo-passo{
    flex-basis:62%;display:block;text-align:left;padding:18px 16px;border-radius:18px;
    background:linear-gradient(180deg, rgba(20,55,75,.5), rgba(10,30,42,.65));border:1px solid var(--line-2);
  }
  .fluxo-passo .fluxo-no{margin:0 0 14px}
  .fluxo-passo:not(:last-child) .fluxo-no::after{
    content:"";position:absolute;left:100%;top:50%;width:200px;height:2px;margin-left:8px;
    background:linear-gradient(90deg, rgba(159,227,74,.6), rgba(159,227,74,0));pointer-events:none;
  }
  .fluxo-passo{overflow:hidden}

  /* Serviços: os dois painéis lado a lado no deslize */
  .serv-lista{border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow-x:auto}
  .serv-lista > .serv{border-radius:18px;border:1px solid var(--line-2);margin:0;align-content:start;background:linear-gradient(180deg, rgba(20,55,75,.5), rgba(10,30,42,.65))}

  /* Antifraude: ícone ao lado do texto, os dois cards se encaixando */
  .fraude-duo{gap:0}
  .fraude-zero{grid-template-columns:auto 1fr;text-align:left;gap:16px;align-items:start;padding:20px 18px}
  .fraude-zero-ic{width:58px;margin:4px 0 0;border-radius:17px}
  .fraude-zero p{margin:0;font-size:13.5px}
  .fraude-duo .fraude-zero h3{font-size:20px;margin-bottom:6px}
  .fraude-zero-tag{font-size:10.5px;margin-bottom:6px}
  .fraude-duo .fraude-zero + .fraude-zero{margin:-14px 0 0 22px;position:relative;z-index:2;background:linear-gradient(135deg, rgba(30,70,60,.97), rgba(12,34,44,.98));box-shadow:0 -12px 30px rgba(0,0,0,.4)}
  .fraude-duo .fraude-zero:first-child{margin-right:22px;padding-bottom:34px}

  /* Pilares: no carrossel os recursos ficam sempre abertos */
  .pillar details > summary{display:none}
  .pillar details > .pillar-body{display:block;padding-top:10px;border-top:1px solid var(--line);margin-top:10px}

  /* Segurança: grade 2×2 compacta, ícone em cima */
  .sec-grid{grid-template-columns:1fr 1fr;gap:10px}
  .sec-card{grid-template-columns:1fr;row-gap:10px;padding:14px;align-items:start}
  .sec-card h4{font-size:14.5px;padding-right:18px}
  .sec-card p{margin:0;font-size:12.5px;line-height:1.45}
  .sec-step{top:14px;right:14px}

  /* App: o celular fica inclinado no canto do card, cortado pela borda */
  .app-inner{display:block;position:relative;padding:22px 18px}
  .app-visual{position:absolute;top:26px;right:-38px;min-height:0;z-index:0;pointer-events:none}
  .app-visual .phone{width:150px;transform:rotate(9deg);box-shadow:0 20px 50px rgba(0,0,0,.6)}
  .app-glow{width:200px;height:200px}
  .app-copy{position:relative;z-index:1}
  .app-copy .section-tag, .app-copy h2, .app-copy h1, .app-copy > p{max-width:64%}
  .app-copy h2,.app-copy h1{font-size:24px}
  .app-copy > p{font-size:14px}
  .app-feats{margin-top:22px;position:relative;padding:14px;border-radius:14px;background:rgba(8,22,30,.88);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

  /* Download: os celulares sobem para o lado do título */
  .down{position:relative;overflow:hidden}
  .down-copy h2{max-width:62%}
  .down-cel{position:absolute;top:-22px;right:-40px;width:142px;pointer-events:none}
  .down-cel img{width:100%;transform:rotate(6deg)}
  .down-passos{position:relative;z-index:1}

  /* Blog: capa um pouco mais baixa no carrossel */
  .blog-cover{height:120px}
}

/* ---------- Páginas internas ---------- */
.interna > .section:first-child{padding-top:clamp(36px,5vw,64px)}
.nav-links a[aria-current="page"]{color:var(--t-1);background:rgba(159,227,74,.08)}
.mobile-drawer nav a[aria-current="page"]{color:#9FE34A}

/* Artigo do blog em página própria */
.artigo{max-width:760px;margin:0 auto;background:linear-gradient(180deg,#0F2837,#08161E);border:1px solid var(--line-2);border-radius:24px;overflow:hidden}
.artigo-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.artigo-voltar{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--t-1);font:600 13.5px 'Inter',sans-serif}
.artigo-voltar:hover{border-color:rgba(159,227,74,.4)}
.artigo-voltar svg{width:16px;height:16px}
.artigo-meta{font-size:12px;color:var(--t-3);display:flex;gap:10px;align-items:center}
.artigo .blog-cover{height:220px}
@media (max-width:640px){
  .artigo{border-radius:18px}
  .artigo .blog-cover{height:160px}
  .artigo-meta{display:none}
}