/* =========================================================================
   Fiivi — landing page
   Fontes servidas localmente (fonts/). Zero dependências externas.
   ========================================================================= */

@font-face{
  font-family:"Relidux";
  src:url("../fonts/Relidux.otf") format("opentype");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root{
  /* --- Barra de anúncio: sempre escura, independente do tema ----------- */
  --bar-bg:#0D0C0B;
  --bar-text:#EFEEEC;

  /* --- Superfícies e texto --------------------------------------------- */
  --bg:#ffffff;
  --bg-subtle:#F8F7F6;
  --bg-raised:#ffffff;
  --text:#161513;
  --text-muted:#585551;
  --text-faint:#77746F;
  --border:#EDEBE8;         /* linha fina e clara — hairline */
  --border-strong:#DEDBD7;

  /* --- PALETA DE MARCA -------------------------------------------------
     Uma rampa só, derivada do laranja base. Nada de laranja avulso no CSS:
     todo uso passa por um dos aliases semânticos abaixo. */
  --brand-50:#FFF4EF;          /* fundo suave                        */
  --brand-100:#FFDFCE;         /* borda suave                        */
  --brand-500:#FF4D00;         /* BASE — botão, ênfase, marca        */
  --brand-600:#DB4200;         /* hover                              */
  --brand-700:#B33600;         /* texto sobre fundo claro (5.9:1)    */

  /* Aliases semânticos — use SEMPRE estes, nunca a rampa direto */
  --accent:var(--brand-500);        /* preenchimento de ação          */
  --accent-hover:var(--brand-600);
  --accent-on:#ffffff;              /* texto sobre o acento (≥17px/700) */
  --accent-text:var(--brand-700);   /* acento como texto pequeno      */
  --accent-display:var(--brand-500);/* ênfase em texto grande (≥24px) */
  --accent-soft:var(--brand-50);
  --accent-soft-border:var(--brand-100);

  /* --- Semânticos: status de pagamento --------------------------------- */
  --pos:#0E7A4B;   --pos-soft:#E8F6EF;  --pos-border:#B6E0CB;   /* pago / aprovado */
  --neg:#C0271B;   --neg-soft:#FDEDEB;  --neg-border:#F3C6C1;   /* recusado */

  --focus:#1D4ED8;

  /* --- Tipografia ------------------------------------------------------- */
  --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo:"Relidux", "Inter", system-ui, sans-serif;

  --fs-2xs:0.6875rem;  /* 11 */
  --fs-xs:0.75rem;     /* 12 */
  --fs-sm:0.8125rem;   /* 13 */
  --fs-base:0.875rem;  /* 14 */
  --fs-md:0.9375rem;   /* 15 */
  --fs-lg:1.0625rem;   /* 17 */
  --fs-xl:1.25rem;     /* 20 */
  --fs-2xl:1.5rem;     /* 24 */
  --fs-3xl:clamp(1.6rem, 1.2rem + 1.9vw, 2.25rem);   /* 26 → 36 */
  --fs-4xl:clamp(1.9rem, 1.3rem + 2.8vw, 2.75rem);   /* 30 → 44 */
  --fs-5xl:clamp(2.25rem, 1.3rem + 4.2vw, 3.75rem);  /* 36 → 60 */

  --lh-tight:1.08;
  --lh-snug:1.25;
  --lh-normal:1.55;
  --lh-relaxed:1.65;

  --measure:34em;      /* medida de leitura confortável */

  /* --- Ritmo vertical (base 4px) --------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --section-y:clamp(56px, 7vw, 104px);

  /* --- RAIO: três papéis, não uma escala solta -------------------------
     control = tudo que se clica ou digita | card = todo contêiner
     pill    = badge, tag, chip, status */
  --r-control:8px;
  --r-card:12px;
  --r-pill:999px;

  /* --- PADDING DE CONTÊINER: três tamanhos, com regra ------------------
     tight = card pequeno dentro de outro | card = card em grid
     panel = painel grande de seção */
  --pad-tight:var(--sp-4);   /* 16 */
  --pad-card:var(--sp-5);    /* 20 */
  --pad-panel:var(--sp-6);   /* 24 */

  /* Malha de pontos — fundo do hero */
  --dot:#DCD9D5;
  --dot-size:22px;

  --maxw:1160px;
}

/* Painéis escuros: redefinem os mesmos tokens semânticos,
   então os componentes internos funcionam sem variantes extras. */
.panel-dark{
  --bg:#0D0C0B;
  --bg-subtle:#171512;
  --bg-raised:#1C1A17;
  --text:#F5F3F0;
  --text-muted:#B3AEA7;
  --text-faint:#94908A;
  --border:#2C2926;
  --border-strong:#413D39;
  --brand-50:#2B1610;   --brand-100:#4C2619;
  --brand-500:#FF6A45;  --brand-600:#FF8163;  --brand-700:#FF9D7E;
  --accent-on:#1C0A05;         /* sobre o coral claro, texto escuro (6.6:1) */
  --pos:#4FDE9B; --pos-soft:#0F2A1E; --pos-border:#1E5540;
  --neg:#FF8E7E; --neg-soft:#2C1512; --neg-border:#5A2822;
  --focus:#8FBAFF;
  background:var(--bg);
  color:var(--text);
}

/* =========================================================================
   2. Reset e base
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  line-height:var(--lh-normal);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:650; line-height:var(--lh-snug); letter-spacing:-0.015em; }
p{ margin:0; }
ul{ margin:0; padding:0; }

/* Inter tem eixo óptico (opsz): usamos o corte "display" nos títulos grandes
   e o corte "text" no corpo. É o motivo principal para manter a família. */
h1,.display{ font-variation-settings:"opsz" 32; letter-spacing:-0.03em; line-height:var(--lh-tight); }
h2{ font-variation-settings:"opsz" 28; letter-spacing:-0.022em; }

::selection{ background:var(--accent); color:var(--accent-on); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

@keyframes pulseNum{ 0%{ opacity:0.45; } 100%{ opacity:1; } }
@keyframes fadeSlide{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* =========================================================================
   3. Utilitários de layout
   ========================================================================= */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-6); }
.section{ padding-block:var(--section-y); }
.section-band{ background:var(--bg-subtle); border-block:1px solid var(--border); }
.tabular{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.muted{ color:var(--text-muted); }
.faint{ color:var(--text-faint); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Link "pular para o conteúdo": invisível até receber foco */
a.sr-only:focus{
  position:fixed; top:12px; left:12px; z-index:100;
  width:auto; height:auto; margin:0; clip:auto; overflow:visible;
  padding:10px 16px; border-radius:var(--r-control);
  background:var(--accent); color:var(--accent-on); font-weight:600;
}

.eyebrow{
  display:inline-block; font-size:var(--fs-2xs); font-weight:600;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--accent-text);
  margin-bottom:var(--sp-3);
}
.eyebrow-badge{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--accent-soft); border:1px solid var(--accent-soft-border);
  color:var(--accent-text); font-size:var(--fs-2xs); font-weight:600;
  letter-spacing:0.07em; text-transform:uppercase; margin-bottom:var(--sp-5);
}

.section-head{ max-width:40rem; margin:0 auto var(--sp-12); text-align:center; }
.section-head h2{ font-size:var(--fs-3xl); margin-block:var(--sp-2) var(--sp-3); text-wrap:balance; }
.section-head p{ font-size:var(--fs-lg); color:var(--text-muted); line-height:var(--lh-relaxed); text-wrap:pretty; }
.section-head em{ font-style:normal; color:var(--accent-display); }

/* =========================================================================
   4. Botões — uma forma, três hierarquias, três tamanhos
   ========================================================================= */
.btn{
  --btn-h:44px; --btn-px:var(--sp-5); --btn-fs:var(--fs-md);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--btn-h); padding-inline:var(--btn-px);
  /* peso 700 em todo botão: branco sobre o coral só é confortável em bold */
  font-family:var(--font-sans); font-size:var(--btn-fs); font-weight:700;
  letter-spacing:-0.005em; line-height:1.1; text-align:center;
  border:1px solid transparent; border-radius:var(--r-control);
  cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--accent); border-color:var(--accent); color:var(--accent-on);
}
.btn-primary:hover{
  background:var(--accent-hover); border-color:var(--accent-hover);
}

.btn-secondary{ background:var(--bg-raised); border-color:var(--border-strong); color:var(--text); }
.btn-secondary:hover{ background:var(--bg-subtle); border-color:var(--text-faint); }

.btn-ghost{ background:transparent; border-color:transparent; color:var(--text-muted); padding-inline:var(--sp-3); }
.btn-ghost:hover{ color:var(--text); background:var(--bg-subtle); }

.btn-sm{ --btn-h:36px; --btn-px:var(--sp-4); --btn-fs:var(--fs-base); }
.btn-lg{ --btn-h:52px; --btn-px:var(--sp-6); --btn-fs:1.125rem; }
.btn-block{ width:100%; }

.cta-group{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.cta-note{ font-size:var(--fs-sm); color:var(--text-faint); }

.link-plain{ font-size:var(--fs-base); color:var(--text-muted); transition:color .15s ease; }
.link-plain:hover{ color:var(--text); }

/* =========================================================================
   5. Barra de anúncio + cabeçalho
   ========================================================================= */
.announce{
  background:var(--bar-bg); color:var(--bar-text);
  text-align:center; padding:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm); line-height:1.4;
}
.announce a{
  color:var(--brand-500); font-weight:600; margin-left:var(--sp-2);
  text-decoration:underline; text-underline-offset:3px;
}
.announce a:hover{ color:#fff; }

.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; gap:var(--sp-6);
  padding-block:var(--sp-3);
}
.logo{
  font-family:var(--font-logo); font-weight:700; font-size:1.4rem;
  letter-spacing:-0.01em; white-space:nowrap; color:var(--text);
}
.site-nav{ display:flex; gap:var(--sp-6); margin-left:var(--sp-4); flex:1; }
.header-actions{ display:flex; align-items:center; gap:var(--sp-3); }
.nav-cta{ display:none; }
@media (min-width:900px){ .nav-cta{ display:inline-flex; } }

/* =========================================================================
   6. Hero
   ========================================================================= */
.hero{
  position:relative; isolation:isolate;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(40px, 6vw, 88px) var(--sp-6) clamp(48px, 6vw, 80px);
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px, 5vw, 72px);
  align-items:center;
}
/* Malha de pontos sangrando de borda a borda, desvanecendo para baixo
   e para as laterais — dá textura sem competir com o texto. */
.hero::before{
  content:""; position:absolute; z-index:-1; top:0; bottom:0;
  left:50%; width:100vw; transform:translateX(-50%);
  background-image:radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size:var(--dot-size) var(--dot-size);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  pointer-events:none;
}
.hero h1{ font-size:var(--fs-5xl); margin-bottom:var(--sp-5); text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--accent-display); }
.hero .lede{
  font-size:var(--fs-xl); line-height:var(--lh-relaxed); color:var(--text-muted);
  max-width:var(--measure); margin-bottom:var(--sp-6); text-wrap:pretty;
}
.hero-form{
  display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center;
  margin-bottom:var(--sp-4);
}
.text-input{
  flex:1 1 240px; min-width:220px; min-height:52px;
  padding:0 var(--sp-4); font:inherit; font-size:var(--fs-md);
  color:var(--text); background:var(--bg-raised);
  border:1px solid var(--border-strong); border-radius:var(--r-control);
}
.text-input::placeholder{ color:var(--text-faint); }
.text-input:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); }

.hero-reassure{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--sp-6);
}
.hero-reassure li{ display:flex; align-items:center; gap:var(--sp-2); list-style:none; }
.tick{ color:var(--pos); font-weight:700; flex:none; }

/* min-width:0 é obrigatório: sem ele o item de grid assume a largura
   intrínseca da imagem (520px) e estoura o layout no mobile. */
.hero-art{ position:relative; min-width:0; }
/* Sem moldura: a ilustração é traço sobre transparente e respira solta
   no branco da página. Só os cartões flutuantes têm superfície própria. */
.plate{
  display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:320px;
}
.plate img{ width:100%; max-width:100%; height:auto; max-height:400px; object-fit:contain; }

/* Em telas largas a arte sangra um pouco para fora da coluna — reforça
   a sensação de "fora do quadro" sem empurrar o texto. */
@media (min-width:1100px){
  .plate{ margin-right:calc(var(--sp-10) * -1); }
  .plate img{ max-height:440px; }
}
.float-card{
  position:absolute; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-card); padding:var(--pad-tight);
}
.float-card--balance{ left:-20px; bottom:-24px; width:212px; }
.float-card--nfse{ right:-16px; top:16px; width:206px; padding:var(--sp-3) var(--sp-4); animation:fadeSlide .6s ease; }
.float-label{
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-faint); margin-bottom:2px;
}
.float-value{ font-size:var(--fs-2xl); font-weight:650; letter-spacing:-0.02em; }
.float-sub{ font-size:var(--fs-2xs); color:var(--text-muted); margin-top:4px; }
.float-value--pulse{ font-size:var(--fs-xl); color:var(--pos); animation:pulseNum 1.4s ease infinite alternate; }

/* =========================================================================
   8. Como funciona
   ========================================================================= */
.how{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--sp-8); align-items:start; }
.step-list{ display:flex; flex-direction:column; gap:var(--sp-2); }
.step-tab{
  width:100%; text-align:left; background:transparent;
  border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-card); cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.step-tab:hover{ border-color:var(--border-strong); }
.step-tab.is-active{ border-color:var(--accent); background:var(--accent-soft); }
.step-title{ display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-md); font-weight:650; }
.step-title span{ font-variant-numeric:tabular-nums; color:var(--text-faint); font-weight:600; }
.step-tab.is-active .step-title{ color:var(--accent-text); }
.step-tab.is-active .step-title span{ color:var(--accent-text); }
.step-desc{ display:block; font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--sp-1); line-height:var(--lh-normal); }
.step-tab.is-active .step-desc{ color:var(--accent-text); opacity:.85; }

.how-panel{
  border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-panel); background:var(--bg-subtle); min-height:330px;
}
.step-pane{ display:none; animation:fadeSlide .35s ease; }
.step-pane.is-active{ display:block; }
.chip-row{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.chip{
  font-size:var(--fs-2xs); font-weight:500; color:var(--text-muted);
  border:1px solid var(--border-strong); border-radius:var(--r-pill); padding:3px 10px;
  background:var(--bg-raised);
}

.mock-card{
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-card); padding:var(--pad-card); max-width:360px;
}
.mock-card h3{ font-size:var(--fs-lg); margin-bottom:var(--sp-4); }
.field-label{ display:block; font-size:var(--fs-xs); font-weight:500; color:var(--text-muted); margin-bottom:5px; }
.mock-input{
  width:100%; min-height:40px; padding:8px 12px; font:inherit; font-size:var(--fs-base);
  color:var(--text); background:var(--bg); border:1px solid var(--border-strong);
  border-radius:var(--r-control); margin-bottom:var(--sp-4);
}
.mock-input::placeholder{ color:var(--text-faint); }
.mock-input:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); }

.gateway-hint{ font-size:var(--fs-base); color:var(--text-muted); margin-bottom:var(--sp-3); }
.gateway-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); max-width:400px; }
.gateway{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-control);
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-base); font-weight:600;
}
.gateway.is-connected{
  border-color:var(--pos-border); background:var(--pos-soft);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
}
.gateway.is-connected .check{ color:var(--pos); font-size:var(--fs-xs); font-weight:600; }

.mini-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-tight); max-width:400px;
}
.mini-card + .mini-card{ margin-top:var(--sp-3); }
.tiny{ font-size:var(--fs-xs); color:var(--text-faint); }
.big{ font-size:var(--fs-2xl); font-weight:650; letter-spacing:-0.02em; }
.big.pos{ color:var(--pos); }
.big.accent{ color:var(--accent-text); }
.link-card .url{ font-size:var(--fs-md); font-weight:600; word-break:break-all; margin-top:2px; }
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); max-width:420px; }
.stat-box{
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-card); padding:var(--pad-tight);
}
.stat-box .big{ font-size:var(--fs-xl); }
.step4-note{ font-size:var(--fs-xs); color:var(--text-faint); margin-top:var(--sp-4); }

/* =========================================================================
   9. Recursos
   ========================================================================= */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.feature-card{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--pad-card); border-radius:var(--r-card);
  border:1px solid var(--border); background:var(--bg-raised);
  transition:border-color .2s ease, background-color .2s ease;
}
.feature-card:hover{ border-color:var(--border-strong); background:var(--bg-subtle); }
.feature-card.is-highlight{ border-color:var(--accent-soft-border); background:var(--accent-soft); }
.feature-icon{ width:40px; height:40px; object-fit:contain; margin-bottom:var(--sp-2); }
.feature-card h3{ font-size:var(--fs-lg); }
.feature-card p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }
.feature-card.is-highlight h3{ color:var(--accent-text); }
.feature-card.is-highlight p{ color:var(--accent-text); opacity:.9; }
.tag-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:var(--sp-3); }
.tag{
  font-size:var(--fs-2xs); color:var(--text-muted);
  border:1px solid var(--border-strong); border-radius:var(--r-pill); padding:2px 9px;
}

/* Faixa de segurança do checkout — fecha a seção de recursos */
.security{
  margin-top:var(--sp-4); padding:var(--pad-panel);
  border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--bg-subtle);
}
.security-title{ font-size:var(--fs-lg); margin-bottom:var(--sp-5); }
.security-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.security-list li{ display:flex; gap:var(--sp-3); align-items:flex-start; list-style:none; }
.security-icon{ width:22px; height:22px; flex:none; margin-top:1px; color:var(--accent); }
.security-list strong{ display:block; font-size:var(--fs-md); font-weight:650; margin-bottom:2px; }
.security-list p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }

/* =========================================================================
   10. Retentativa inteligente (painel escuro)
   ========================================================================= */
.retry{
  padding-block:clamp(56px, 6vw, 88px); position:relative; overflow:hidden;
  border-block:1px solid var(--border);
}
.retry .wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12);
  align-items:center; position:relative; z-index:1;
}
.retry h2{ font-size:var(--fs-4xl); margin-block:var(--sp-2) var(--sp-4); text-wrap:balance; }
.retry h2 em{ font-style:normal; color:var(--accent-display); }
.retry p{ font-size:var(--fs-lg); line-height:var(--lh-relaxed); color:var(--text-muted); max-width:var(--measure); }
.retry .eyebrow{ color:var(--accent-text); }
.retry-deco{
  position:absolute; right:-40px; bottom:-40px; width:280px;
  opacity:.06; filter:invert(1); pointer-events:none;
}
.retry-panel{
  border:1px solid var(--border-strong); border-radius:var(--r-card);
  padding:var(--pad-panel); background:var(--bg-raised);
}
.retry-flow{ display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.retry-box{
  flex:1; padding:var(--pad-tight); border-radius:var(--r-control); text-align:center;
  border:1px solid var(--border-strong); color:var(--text-muted);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.retry-box.is-declined{ border-color:var(--neg-border); background:var(--neg-soft); color:var(--neg); }
.retry-box.is-approved{ border-color:var(--pos-border); background:var(--pos-soft); color:var(--pos); }
.retry-box .name{ font-size:var(--fs-base); font-weight:650; color:var(--text); margin-bottom:2px; }
.retry-box .status{ font-size:var(--fs-xs); font-weight:600; }
.retry-arrow{ color:var(--text-faint); font-size:var(--fs-xl); }
.retry-panel p{ font-size:var(--fs-base); color:var(--text-muted); max-width:none; }
.retry-panel p strong{ color:var(--pos); }

/* =========================================================================
   11. Ferramentas + dashboard
   ========================================================================= */
.tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-bottom:var(--sp-10); }
.tool-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-card); display:flex; gap:var(--sp-4); align-items:flex-start;
}
.tool-icon{ width:36px; height:36px; object-fit:contain; flex:none; margin-top:2px; }
.tool-card h3{ font-size:var(--fs-lg); margin-bottom:2px; }
.tool-card p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }

.dashboard-mock{
  border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--bg-raised); overflow:hidden;
}
.dashboard-mock-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border);
}
.dashboard-mock-head .title{ font-size:var(--fs-base); font-weight:650; }
.dashboard-mock-head .sub{ font-size:var(--fs-xs); color:var(--text-faint); }
.dashboard-mock-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
  padding:var(--sp-5); border-bottom:1px solid var(--border);
}
.dashboard-mock-stats .big{ font-size:var(--fs-xl); }
.table-scroll{ overflow-x:auto; }
.dashboard-table{ width:100%; border-collapse:collapse; font-size:var(--fs-base); min-width:460px; }
.dashboard-table th{
  text-align:left; font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--text-faint);
  padding:var(--sp-3) var(--sp-5); border-bottom:1px solid var(--border);
}
.dashboard-table td{ padding:var(--sp-3) var(--sp-5); border-bottom:1px solid var(--border); }
.dashboard-table tr:last-child td{ border-bottom:none; }
.dashboard-table .client-meta{ font-size:var(--fs-xs); color:var(--text-faint); }
.status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:600; padding:3px 10px; border-radius:var(--r-pill);
}
.status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-paid{ color:var(--pos); background:var(--pos-soft); }
.status-pending{ color:var(--text-muted); background:var(--bg-subtle); }
.tools-cta{ text-align:center; margin-top:var(--sp-10); }
.tools-cta .cta-note{ display:block; margin-top:var(--sp-3); }

/* =========================================================================
   12. Preço / transparência
   ========================================================================= */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-bottom:var(--sp-12); }
.price-card{
  border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-panel); background:var(--bg-raised); display:flex; flex-direction:column;
}
.price-card.is-highlight{ border-color:var(--accent); }
.price-card h3{ font-size:var(--fs-lg); margin-bottom:var(--sp-4); }
.price-card .price{
  font-size:var(--fs-3xl); font-weight:650; letter-spacing:-0.03em;
  line-height:1.1; margin-bottom:var(--sp-3);
}
.price-card .price small{ font-size:var(--fs-xl); font-weight:600; color:var(--text-muted); }
.price-card .price--plain{ font-size:var(--fs-2xl); }
.price-card.is-highlight .price{ color:var(--accent-display); }
.price-card.is-highlight .price small{ color:var(--accent-text); }
.price-card p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }
.price-card p strong{ color:var(--text); }
.price-badge{
  align-self:flex-start; margin-bottom:var(--sp-3); padding:3px 10px;
  border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-text);
  border:1px solid var(--accent-soft-border);
  font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
}

.budget-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:start; }
.budget-grid h3{ font-size:var(--fs-2xl); margin-bottom:var(--sp-5); text-wrap:balance; }
.budget-list{ display:flex; flex-direction:column; gap:var(--sp-4); }
.budget-list li{ display:flex; gap:var(--sp-3); list-style:none; font-size:var(--fs-md); line-height:var(--lh-relaxed); }
.budget-list li strong{ font-weight:650; }
.budget-list .tick{ margin-top:1px; }

.sim-card{
  border:1px solid var(--border-strong); border-radius:var(--r-card);
  padding:var(--pad-panel); background:var(--bg-subtle);
}
.sim-card h3{ font-size:var(--fs-xl); margin-bottom:var(--sp-1); }
.sim-sub{ font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--sp-5); }
.sim-inputs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.sim-field .mock-input{ margin-bottom:0; }
.sim-row{
  display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-base);
  padding-top:var(--sp-3); border-top:1px solid var(--border); margin-bottom:var(--sp-4);
  color:var(--text-muted);
}
.sim-row strong{ color:var(--text); font-weight:650; }
.sim-results{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.sim-result{ background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--pad-tight); }
.sim-result .big{ font-size:var(--fs-xl); }
.sim-result .note{ font-size:var(--fs-2xs); color:var(--text-faint); margin-top:2px; }
.sim-savings{
  border-top:1px solid var(--border); padding-top:var(--sp-4);
  font-size:var(--fs-md); color:var(--text);
}
.sim-savings strong{ color:var(--pos); font-weight:650; }
.sim-disclaimer{ font-size:var(--fs-2xs); color:var(--text-faint); margin-top:var(--sp-3); line-height:var(--lh-normal); }

.deposit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-top:var(--sp-12); }
.deposit-card{ border:1px solid var(--border); border-radius:var(--r-card); padding:var(--pad-card); background:var(--bg-raised); }
.deposit-card .num{
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.08em;
  color:var(--accent-text); margin-bottom:var(--sp-2);
}
.deposit-card h3{ font-size:var(--fs-md); margin-bottom:var(--sp-1); }
.deposit-card p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }

/* =========================================================================
   13. FAQ
   ========================================================================= */
/* Acordeão e respostas ocupam a largura padrão de conteúdo, sem medida
   de leitura própria — alinham com o resto da página. */
.faq{ max-width:none; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item:first-child{ border-top:1px solid var(--border); }
.faq-item summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5) 0; cursor:pointer; list-style:none;
  font-size:var(--fs-lg); font-weight:650; letter-spacing:-0.012em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:none; font-size:var(--fs-xl); font-weight:400; line-height:1;
  color:var(--accent-text); transition:transform .2s ease;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--accent-text); }
.faq-answer{
  padding-bottom:var(--sp-5); font-size:var(--fs-md);
  color:var(--text-muted); line-height:var(--lh-relaxed);
}
.faq-answer p + p{ margin-top:var(--sp-3); }
.faq-foot{ text-align:center; margin-top:var(--sp-8); font-size:var(--fs-md); color:var(--text-muted); }
.faq-foot a{ color:var(--accent-text); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* =========================================================================
   14. CTA final
   ========================================================================= */
.final-cta{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(64px, 8vw, 112px);
  background:radial-gradient(120% 140% at 15% 0%, #2E1710 0%, var(--bg) 60%);
}
.final-cta-deco{
  position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:440px; opacity:.10; filter:invert(1); pointer-events:none;
}
.final-cta-inner{ position:relative; z-index:1; max-width:40rem; margin-inline:auto; padding-inline:var(--sp-6); }
.final-cta h2{ font-size:var(--fs-4xl); margin-block:var(--sp-2) var(--sp-4); text-wrap:balance; }
.final-cta h2 em{ font-style:normal; color:var(--accent-display); }
.final-cta p{ font-size:var(--fs-lg); color:var(--text-muted); margin-bottom:var(--sp-6); text-wrap:pretty; }
.final-cta .cta-group{ justify-content:center; }
.final-cta .cta-note{ display:block; margin-top:var(--sp-5); }

/* =========================================================================
   15. Rodapé
   ========================================================================= */
.site-footer{ border-top:1px solid var(--border); padding-block:var(--sp-16) var(--sp-10); }
.footer-grid{
  display:grid; grid-template-columns:1.9fr 1fr 1fr 1fr 1fr;
  gap:var(--sp-6); margin-bottom:var(--sp-10);
}
.footer-brand{ font-family:var(--font-logo); font-weight:700; font-size:1.2rem; margin-bottom:var(--sp-3); }
.footer-desc{ font-size:var(--fs-base); color:var(--text-muted); max-width:34ch; line-height:var(--lh-relaxed); }
.footer-col-title{
  display:flex; align-items:center; gap:6px;
  font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:var(--sp-4);
}
/* Ícone de integração (plugue) no laranja da marca, antes de cada nome.
   Máscara em vez de <img>: a cor vem do token, então segue o tema. */
.footer-list li::before{
  content:""; width:14px; height:14px; flex:none;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 2.5v5M15.5 2.5v5'/><rect x='5.5' y='7.5' width='13' height='6.5' rx='2.2'/><path d='M12 14v3.4a4 4 0 0 0 4 4h2'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 2.5v5M15.5 2.5v5'/><rect x='5.5' y='7.5' width='13' height='6.5' rx='2.2'/><path d='M12 14v3.4a4 4 0 0 0 4 4h2'/></svg>") center/contain no-repeat;
}
.footer-links{ display:flex; flex-direction:column; gap:var(--sp-3); font-size:var(--fs-base); }
.footer-links a{ color:var(--text-muted); }
.footer-links a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
/* Coluna de integrações: nomes, não links — não há página de destino. */
.footer-list li{ display:flex; align-items:center; gap:8px; list-style:none; color:var(--text-muted); }
.footer-rule{ height:1px; background:var(--border); margin-block:var(--sp-8); }
/* Sem limite de medida: o texto legal acompanha a largura do conteúdo
   da página, alinhado com as colunas do rodapé acima. */
.footer-legal{ font-size:var(--fs-xs); color:var(--text-faint); line-height:var(--lh-relaxed); }
.footer-legal + .footer-legal{ margin-top:var(--sp-4); }

/* =========================================================================
   16. CTA fixo no mobile
   ========================================================================= */
.sticky-cta{
  display:none;
  position:fixed; inset-inline:0; bottom:0; z-index:50;
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
}
.sticky-cta .cta-note{ display:block; text-align:center; margin-top:6px; }
@media (max-width:899px){
  .sticky-cta{ display:block; }
  body{ padding-bottom:96px; }
}

/* =========================================================================
   17. Responsivo
   ========================================================================= */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:520px; }
  .float-card{ display:none; }
  .how{ grid-template-columns:1fr; }
  .feature-grid,.tools-grid{ grid-template-columns:repeat(2,1fr); }
  .retry .wrap{ grid-template-columns:1fr; gap:var(--sp-8); }
  .retry p{ max-width:none; }
  .budget-grid{ grid-template-columns:1fr; }
  .deposit-grid{ grid-template-columns:repeat(2,1fr); }
  .dashboard-mock-stats{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .security-list{ grid-template-columns:1fr 1fr; }
  .site-nav{ display:none; }
}
@media (max-width:600px){
  .feature-grid,.tools-grid,.deposit-grid,.security-list{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .sim-inputs,.sim-results,.stat-grid,.gateway-grid{ grid-template-columns:1fr; }
  .hero-form .btn{ width:100%; }
  .final-cta-deco{ width:260px; }
  .retry-flow{ flex-direction:column; align-items:stretch; }
  .retry-arrow{ transform:rotate(90deg); text-align:center; }
}

/* =========================================================================
   18. Tema escuro
   ========================================================================= */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0D0C0B;
    --bg-subtle:#171512;
    --bg-raised:#1B1916;
    --text:#F5F3F0;
    --text-muted:#B3AEA7;
    --text-faint:#94908A;
    --border:#2A2724;
    --border-strong:#403C38;

    --dot:#2A2724;

    --brand-50:#2B1610;   --brand-100:#4C2619;
    --brand-500:#FF6A45;  --brand-600:#FF8163;  --brand-700:#FF9D7E;
    --accent-on:#1C0A05;       /* texto escuro sobre o acento — 6.6:1 */

    --pos:#4FDE9B; --pos-soft:#10291E; --pos-border:#1E5540;
    --neg:#FF8E7E; --neg-soft:#2C1512; --neg-border:#5A2822;

    --focus:#8FBAFF;

  }
  .announce{ background:#080706; }
  /* A ilustração do hero é traço escuro sobre transparente: sem placa
     por baixo, ela precisa ser clareada para não sumir no fundo escuro. */
  .plate img{ filter:invert(.92) hue-rotate(180deg); }
  /* Ícones PNG monocromáticos escuros → clareados no tema escuro */
  .feature-icon,.tool-icon{ filter:invert(.92) hue-rotate(180deg); }
  .feature-card.is-highlight .feature-icon{ filter:none; }
}