/* ==========================================================================
   AnalisaHub — Landing Page
   Design system: #01baef · #212529 · #f8f9fa · #001327 · #051f38 · #def8ff
   Tipografia: Montserrat (Regular / Bold / Italic)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:        #001327;
  --navy:       #051f38;
  --navy-2:     #0a3055;
  --cyan:       #01baef;
  --cyan-600:   #0193bd;
  --cyan-100:   #def8ff;
  --cyan-700:   #007a9e;   /* ciano legivel sobre fundo claro */
  --cyan-800:   #005f7d;
  --graphite:   #212529;
  --off:        #f8f9fa;
  --white:      #ffffff;

  --on-dark:        rgba(255,255,255,.74);
  --on-dark-soft:   rgba(255,255,255,.56);
  --on-light:       #4a5a6b;
  --hairline-dark:  rgba(255,255,255,.12);
  --hairline-light: rgba(0,19,39,.10);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --maxw: 1220px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 9vw, 128px);

  --shadow-card: 0 18px 50px -22px rgba(0,19,39,.45);
  --shadow-form: 0 40px 90px -30px rgba(0,19,39,.65);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:106px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.65; color:var(--white);
  background:var(--ink); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; overflow:hidden; }
.section--light{ background:var(--off); color:var(--graphite); }
.section--dark{ background:var(--ink); }

/* ---------- Tipografia ---------- */
.eyebrow{
  display:inline-block;
  font-size:.845rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:18px;
}
.section--light .eyebrow{ color:var(--cyan-700); }

h1,h2,h3{ line-height:1.16; letter-spacing:-.02em; font-weight:700; }
h1{ font-size:clamp(2.05rem, 1.35rem + 2.6vw, 3.5rem); }
h2{ font-size:clamp(1.7rem, 1.15rem + 2.1vw, 2.75rem); }
h3{ font-size:1.075rem; line-height:1.35; letter-spacing:-.01em; }

.lead{ font-size:clamp(1rem,.95rem + .3vw,1.15rem); color:var(--on-dark); max-width:62ch; }
.section--light .lead,
.features .lead,
.trust .lead{ color:var(--on-light); }
.section-head{ max-width:780px; margin-bottom:clamp(40px,5vw,64px); }
.section-head .lead{ margin-top:18px; }
.center{ text-align:center; margin-inline:auto; }

/* ---------- Botões ---------- */
.btn{
  --btn-bg:var(--cyan); --btn-fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border:0; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:700; font-size:.94rem; letter-spacing:.005em;
  cursor:pointer; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  box-shadow:0 12px 32px -14px rgba(1,186,239,.9);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 20px 42px -16px rgba(1,186,239,.95); }
.btn:focus-visible{ outline:3px solid var(--cyan-100); outline-offset:3px; }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--white);
  border:1.5px solid rgba(255,255,255,.32); box-shadow:none;
}
.btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--cyan); box-shadow:none; }
.btn--dark{ --btn-bg:var(--ink); --btn-fg:var(--white); box-shadow:0 14px 34px -16px rgba(0,19,39,.8); }
.btn--dark:hover{ box-shadow:0 20px 44px -18px rgba(0,19,39,.9); }
.btn--block{ width:100%; }
.btn svg{ flex:none; }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:fixed; inset:0 0 auto; z-index:100;
  padding-block:21.6px;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.header::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(0,19,39,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline-dark);
  opacity:0; transition:opacity .35s var(--ease);
}
/* +25px de respiro acima dos logotipos, só no header expandido */
.header:not(.is-stuck){ padding-top:46.6px; }
.header.is-stuck{ padding-block:13.2px; }
.header.is-stuck::after{ opacity:1; }
.header .wrap{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; }
/* header expandido: logotipos centralizados. O CTA sai do fluxo (está invisível
   nesse estado) para não deslocar o centro. No stick tudo volta ao normal. */
.header:not(.is-stuck) .wrap{ justify-content:center; }
.header__logo{ display:inline-flex; align-items:center; gap:clamp(12px,1.3vw,18px); }
.header__logo img{ width:auto; transition:height .35s var(--ease); }
.header__logo-mark{ height:clamp(36px,3.72vw,45.6px); }
/* header expandido: o selo fica 25% menor que o logotipo */
.header__logo-goon{ height:clamp(27px,2.79vw,34.2px); }
/* header encolhido: some com o selo, fica só o logotipo */
/* +20% só no header expandido; o stick mantém 36px */
.header:not(.is-stuck) .header__logo{ gap:clamp(14.4px,1.56vw,21.6px); }
.header:not(.is-stuck) .header__logo-mark{ height:clamp(43.2px,4.46vw,54.7px); }
.header:not(.is-stuck) .header__logo-goon{ height:clamp(32.4px,3.35vw,41px); }
.header.is-stuck .header__logo-mark{ height:36px; }
.header.is-stuck .header__logo-goon{ display:none; }
.header__cta{
  padding:12px 24px; font-size:.86rem;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
}
.header:not(.is-stuck) .header__cta{
  position:absolute; right:0; top:50%;
  transform:translateY(-50%) translateY(-6px);
}
.header.is-stuck .header__cta{ opacity:1; visibility:visible; transform:none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:calc(100px + clamp(20px,3vw,44px)) clamp(40px,5vw,72px);
  background:var(--ink);
}
@media (min-width:1081px){ .hero{ min-height:100vh; display:flex; align-items:center; } .hero > .wrap{ width:100%; } }
.hero__bg{
  position:absolute; inset:0; z-index:-2;
  background:url('assets/bg-mesh.webp') center bottom / cover no-repeat;
  background-color:var(--ink);
}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(1000px 620px at 78% 18%, rgba(1,186,239,.20), transparent 62%),
    linear-gradient(96deg, rgba(0,19,39,.86) 0%, rgba(0,19,39,.72) 42%, rgba(5,31,56,.78) 100%);
}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px,5vw,72px); align-items:center;
}
.hero__copy{ grid-column:2; }

/* Key visual no lado esquerdo com altura total da hero, esmaecendo para a direita. */
.hero__media{
  position:absolute; left:0; top:0; bottom:0; height:100%; z-index:-1;
  width:auto; margin:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 48%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.22) 89%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0%, #000 48%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.22) 89%, transparent 100%);
}
.hero__media img{
  height:100%; width:auto; max-width:none; object-fit:cover; object-position:left center;
  border:0; border-radius:0; box-shadow:none;
}
/* Overlay que escurece a imagem sob a coluna de texto, preservando a leitura */
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(94deg,
    rgba(0,19,39,0) 0%,
    rgba(0,19,39,.04) 34%,
    rgba(0,19,39,.34) 54%,
    rgba(0,19,39,.62) 74%,
    rgba(0,19,39,.72) 100%);
}
.hero h1{ margin-bottom:20px; }
.hero h1 em{ font-style:normal; color:var(--cyan); }
.hero__sub{ font-size:clamp(1.02rem,.96rem + .35vw,1.2rem); color:rgba(255,255,255,.86); max-width:56ch; }
.hero__note{
  margin-top:16px; padding-left:20px; border-left:2px solid rgba(1,186,239,.55);
  font-size:.97rem; color:var(--on-dark); max-width:54ch;
}
.hero__actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }

.hero__pills{
  margin-top:32px; padding-top:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;
}
.pill{ display:flex; align-items:center; gap:13px; }
.pill__icon{
  flex:none; width:28px; height:28px; margin-top:1px;
  display:grid; place-items:center;
  color:var(--cyan);
}
.pill__icon svg{ width:26px; height:26px; }
.pill strong{
  font-size:1rem; font-weight:500; line-height:1.4;
  color:var(--cyan);
}

/* ---------- Card de formulário ---------- */
.form-card{
  background:var(--white); color:var(--graphite);
  border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px);
  box-shadow:0 30px 70px -34px rgba(0,19,39,.34);
  border:1px solid var(--hairline-light);
  border-top:4px solid var(--cyan);
}
.form-card__head{ margin-bottom:16px; }
.form-card__head h2{ font-size:1.32rem; line-height:1.3; }
.form-card__head p{ margin-top:9px; font-size:.9rem; color:var(--on-light); }
.form-grid{ display:grid; gap:11px; }
.form-grid--2{ grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field > label{ font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#5a6875; }
.field input,.field select{
  width:100%; padding:11px 14px;
  border:1.5px solid #dde5ec; border-radius:var(--r-sm);
  background:#fbfcfd; font-size:.94rem; color:var(--graphite);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field select{
  appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236b7b8b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.field input:focus,.field select:focus{
  outline:none; background:var(--white);
  border-color:var(--cyan); box-shadow:0 0 0 4px rgba(1,186,239,.16);
}
.field input::placeholder{ color:#7c8a97; }

/* Grupo de múltipla escolha em formato de chips */
.field--choices{ border:0; padding:0; margin:0; min-width:0; }
.field--choices legend{
  padding:0; margin-bottom:7px;
  font-size:.76rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#5a6875;
}
.choices{ display:flex; flex-wrap:wrap; gap:6px; }
.choices label{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; cursor:pointer;
  border:1.5px solid #dde5ec; border-radius:999px;
  background:#fbfcfd; font-size:.78rem; line-height:1.25; color:var(--on-light);
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.choices label:hover{ border-color:#b9c9d6; }
.choices label:has(input:checked){
  border-color:var(--cyan); background:var(--cyan-100);
  color:var(--ink); font-weight:600;
}
.choices label:has(input:focus-visible){ outline:3px solid rgba(1,186,239,.35); outline-offset:2px; }
.choices input{
  appearance:none; -webkit-appearance:none;
  flex:none; width:15px; height:15px; margin:0;
  border:1.5px solid #c3d0db; border-radius:5px; background:var(--white);
  display:grid; place-items:center; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.choices input:checked{ background:var(--cyan); border-color:var(--cyan); }
.choices input:checked::after{
  content:''; width:8px; height:4px;
  border-left:2px solid var(--white); border-bottom:2px solid var(--white);
  transform:rotate(-45deg) translate(1px,-2px);
}
.form-card .btn{ margin-top:6px; }
.form-legal{ margin-top:11px; font-size:.735rem; line-height:1.55; color:#5f6d79; }
.form-legal a{ color:var(--cyan-700); text-decoration:underline; text-underline-offset:2px; }
.form-success{
  display:none; padding:18px 20px; border-radius:var(--r-sm);
  background:var(--cyan-100); border:1px solid rgba(1,186,239,.4);
  font-size:.9rem; color:var(--ink); font-weight:600;
}
.form-success.is-visible{ display:block; }

/* ==========================================================================
   Faixa de KPIs
   ========================================================================== */
/* Fundo branco com uma luz azul suave só no lado esquerdo */
.kpis{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(680px 620px at -8% 46%, rgba(1,186,239,.24), transparent 68%),
    radial-gradient(420px 380px at 6% 92%, rgba(1,186,239,.12), transparent 70%),
    var(--white);
  color:var(--graphite);
  padding-block:clamp(56px,6.5vw,88px);
}

/* Imagem encostada à direita, alinhada pela base, dissolvendo para a esquerda */
.kpis__media{
  position:absolute; right:0; bottom:0; top:auto; z-index:-1;
  width:min(46%, 700px); margin:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(270deg, #000 0%, #000 38%, rgba(0,0,0,.6) 64%, rgba(0,0,0,.2) 85%, transparent 100%);
          mask-image:linear-gradient(270deg, #000 0%, #000 38%, rgba(0,0,0,.6) 64%, rgba(0,0,0,.2) 85%, transparent 100%);
}
.kpis__media img{
  width:100%; height:auto; display:block;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 42%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 42%);
}
.kpis .wrap{ position:relative; }
.kpis__copy{ max-width:min(100%, 790px); }
.kpis__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.kpi{ position:relative; padding-inline:clamp(18px,2.2vw,30px); }
.kpi:first-child{ padding-left:0; }
.kpi:last-child{ padding-right:0; }
/* fio vertical sutil apenas ENTRE as colunas, esmaecendo nas pontas */
.kpi + .kpi::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px;
  background:linear-gradient(180deg,
    transparent 0%, rgba(0,19,39,.16) 18%, rgba(0,19,39,.16) 82%, transparent 100%);
}
.kpi__tag{
  display:block; min-height:1.2em; margin-bottom:6px;
  font-size:.825rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cyan-700);
}
.kpi__num{ font-size:clamp(2.1rem,1.5rem + 2vw,3rem); font-weight:700; line-height:1.05; letter-spacing:-.03em; color:var(--ink); }
.kpi__num small{ font-size:.45em; font-weight:700; letter-spacing:0; margin-left:2px; }
.kpi__label{ margin-top:8px; font-size:.88rem; line-height:1.5; color:var(--on-light); max-width:26ch; }
.kpis__foot{ margin-top:32px; font-size:.75rem; color:#5f6d79; max-width:62ch; }

/* ==========================================================================
   Desafios
   ========================================================================== */
.challenges{
  position:relative; isolation:isolate;
  background:
    radial-gradient(900px 520px at 82% 6%, rgba(1,186,239,.13), transparent 64%),
    linear-gradient(180deg,var(--ink) 0%, var(--navy) 58%, var(--ink) 100%);
}

/* Imagem de fundo no canto superior direito, esmaecendo para a esquerda e para
   baixo. O fade vertical vale para a imagem E para o overlay: só na <img>, o
   ::after viraria um retângulo cortando reto na base. */
.challenges__bg{
  position:absolute; top:0; right:0; z-index:-1;
  width:min(52%, 800px); margin:0; pointer-events:none;
  --vfade:linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.16) 86%, transparent 100%);
  -webkit-mask-image:linear-gradient(270deg, #000 0%, #000 42%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.2) 88%, transparent 100%);
          mask-image:linear-gradient(270deg, #000 0%, #000 42%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.2) 88%, transparent 100%);
}
.challenges__bg img,
.challenges__bg::after{
  -webkit-mask-image:var(--vfade);
          mask-image:var(--vfade);
}
.challenges__bg img{ width:100%; height:auto; display:block; }
.challenges__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(270deg, rgba(0,19,39,.30) 0%, rgba(0,19,39,.46) 60%, rgba(0,19,39,.6) 100%);
}
.challenges__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.challenge{
  padding:26px 26px 28px;
  gap:16px;
  border:1px solid var(--hairline-dark); border-radius:var(--r-md);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  display:flex; gap:16px; align-items:flex-start;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.challenge:hover{ border-color:rgba(1,186,239,.42); transform:translateY(-3px); background:linear-gradient(160deg, rgba(1,186,239,.10), rgba(255,255,255,.02)); }
/* Ícones de lista (Desafios e Benefícios): mesmo tamanho, mesma animação.
   Definidos juntos de propósito, para não divergirem com o tempo. */
.challenge__icon,
.benefit__icon{
  flex:none; width:36px; height:36px; margin-top:1px;
  display:grid; place-items:center;
  color:var(--cyan);
  /* easing com leve overshoot: o ícone "salta" ao entrar o hover */
  transition:transform .42s cubic-bezier(.34,1.46,.56,1), color .3s var(--ease);
}
.challenge__icon svg,
.benefit__icon svg{ width:34px; height:34px; }
.challenge:hover .challenge__icon,
.challenge:focus-within .challenge__icon,
.benefit:hover .benefit__icon,
.benefit:focus-within .benefit__icon{ transform:scale(1.2); color:var(--cyan-100); }

@media (prefers-reduced-motion:reduce){
  .challenge:hover .challenge__icon,
  .challenge:focus-within .challenge__icon,
  .benefit:hover .benefit__icon,
  .benefit:focus-within .benefit__icon{ transform:none; }
}
.challenge p{ font-size:.96rem; line-height:1.6; color:rgba(255,255,255,.82); }

/* ==========================================================================
   Entregas (features)
   ========================================================================== */
.features{
  position:relative; isolation:isolate;
  /* ponto único: mancha e símbolo compartilham a mesma âncora, então não
     têm como sair de sincronia se um deles for reposicionado depois */
  --glow-x:82%;
  --glow-y:10%;
  background:
    radial-gradient(620px 560px at var(--glow-x) var(--glow-y), rgba(1,186,239,.24), transparent 66%),
    linear-gradient(178deg,var(--white) 0%, var(--off) 42%, var(--cyan-100) 100%);
  color:var(--graphite);
}

/* Símbolo da marca de volta a 92%, esmaecendo para baixo.
   A mancha ficou em --glow-x (82%), então os dois não estão mais no mesmo ponto. */
.features__glyph{
  position:absolute; top:var(--glow-y); left:92%; z-index:-1;
  width:min(26%, 300px); margin:0; pointer-events:none;
  transform:translate(-50%,-50%); opacity:.55;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.14) 86%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.14) 86%, transparent 100%);
}
.features__glyph img{ width:100%; height:auto; display:block; }
.features .eyebrow,.trust .eyebrow{ color:var(--cyan-700); }
/* Demonstração animada à esquerda, bloco do título à direita */
.features__layout{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,4vw,64px); align-items:center;
  margin-bottom:clamp(44px,5vw,68px);
}
.features__head{ margin-bottom:0; max-width:none; }
/* Sangra para fora do .wrap até encostar na borda esquerda da tela.
   O deslocamento é a distância da viewport até o conteúdo do wrap:
   metade da sobra de largura + o gutter. */
.features__demo{
  position:relative; isolation:isolate;
  margin:0 0 0 calc(-1 * ((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)));
}
.features__demo::before{
  content:''; position:absolute; inset:4% 2%; z-index:-1;
  transform:translateX(-17%);
  background:radial-gradient(circle at 50% 58%, rgba(1,186,239,.24), transparent 66%);
  filter:blur(30px);
}
/* O WebP tem ~17% de área vazia à esquerda no estado estável da animação
   (os primeiros frames são a entrada, mais espalhada — por isso o recorte do
   arquivo não pode ser mais apertado). O deslocamento vai na <img>, não no
   <figure>: o figure é .reveal, e ".reveal.is-in" zera o transform dele. */
.features__demo img{ width:100%; transform:translateX(-17%); }

/* Carrossel de recursos */
.carousel{ position:relative; }
.carousel__track{
  display:flex; gap:20px; margin:0; padding:6px 2px 10px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track:focus-visible{ outline:3px solid var(--cyan); outline-offset:4px; border-radius:var(--r-md); }
.carousel__slide{
  flex:0 0 calc((100% - 40px) / 3);
  scroll-snap-align:start; display:flex;
}
.carousel__slide .feature{ width:100%; }

.carousel__nav{
  margin-top:clamp(24px,3vw,32px);
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.carousel__count{
  font-size:.86rem; font-weight:700; letter-spacing:.06em;
  color:var(--on-light); font-variant-numeric:tabular-nums;
}
.carousel__count[hidden]{ display:none; }
.carousel__btn{
  width:46px; height:46px; flex:none; border-radius:50%; padding:0;
  display:grid; place-items:center; cursor:pointer;
  background:var(--white); color:var(--ink);
  border:1.5px solid rgba(0,19,39,.16);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.carousel__btn:hover:not(:disabled){ background:var(--ink); color:var(--white); border-color:var(--ink); }
.carousel__btn:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
.carousel__btn:disabled{ opacity:.3; cursor:default; }
.carousel__dots{ display:flex; align-items:center; gap:8px; }
.carousel__dot{
  width:9px; height:9px; padding:0; border:0; border-radius:99px; cursor:pointer;
  background:rgba(0,19,39,.22);
  transition:width .3s var(--ease), background .3s var(--ease);
}
.carousel__dot:hover{ background:rgba(0,19,39,.42); }
.carousel__dot.is-active{ width:28px; background:var(--cyan-700); }
.carousel__dot:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

.features__cta{ margin-top:clamp(40px,4.5vw,60px); }
.feature{
  background:var(--white); border:1px solid var(--hairline-light); border-radius:var(--r-md);
  padding:28px 26px 30px; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature::after{
  content:''; position:absolute; inset:auto 0 0 0; height:3px; border-radius:0 0 var(--r-md) var(--r-md);
  background:linear-gradient(90deg,var(--cyan),var(--navy-2));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:transparent; }
.feature:hover::after{ transform:scaleX(1); }
.feature__icon{
  width:48px; height:48px; margin-bottom:18px;
  display:grid; place-items:center;
  color:var(--cyan-600);
}
.feature__icon svg{ width:46px; height:46px; stroke-width:1.5; }
.feature h3{ margin-bottom:10px; color:var(--ink); }
.feature p{ font-size:.925rem; line-height:1.62; color:var(--on-light); }
.features__cta{ display:flex; justify-content:center; }
.features__cta.reveal{ margin-top:clamp(40px,4.5vw,60px); }

/* CTA de fechamento de seção */
.section-cta{
  margin-top:clamp(40px,4.5vw,60px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:16px 22px; text-align:center;
}
.section-cta--start{ justify-content:flex-start; text-align:left; }
.section-cta__note{ font-size:.9rem; color:var(--on-dark); }
.section--light .section-cta__note,
.features .section-cta__note,
.trust .section-cta__note{ color:var(--on-light); }

/* ==========================================================================
   Benefícios (split com KV)
   ========================================================================== */
/* =======================================================================
   Faixa contínua: Benefícios + Human in the loop
   Um fundo só para as duas seções, e as imagens vivem no wrapper para
   poderem atravessar a fronteira entre elas.
   ======================================================================= */
.flowband{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(720px 520px at 4% 14%, rgba(1,186,239,.14), transparent 66%),
    radial-gradient(820px 600px at 96% 88%, rgba(1,186,239,.16), transparent 68%),
    linear-gradient(168deg,
      var(--navy) 0%,
      var(--ink) 30%,
      #00203f 56%,
      var(--navy-2) 82%,
      #0a3f6b 100%);
}
.flowband__img{ position:absolute; z-index:-1; margin:0; pointer-events:none; }
.flowband__img img{ width:100%; height:auto; display:block; }

/* A — beneficios2: colada no topo à direita, desce invadindo a seção de baixo
   e esmaece do primeiro terço para o rodapé. */
.flowband__img--a{
  top:0; right:0; width:min(50%, 780px);
  /* o fade vertical fica numa variável porque precisa valer para a imagem E para
     o overlay de escurecimento. Se só a <img> for mascarada, o ::after continua
     um retângulo cheio e corta reto na base. */
  --vfade:linear-gradient(180deg,
    #000 0%, #000 46%, rgba(0,0,0,.82) 61%, rgba(0,0,0,.44) 74%,
    rgba(0,0,0,.14) 83%, transparent 90%);
  -webkit-mask-image:linear-gradient(270deg, #000 0%, #000 44%, rgba(0,0,0,.66) 70%, rgba(0,0,0,.24) 88%, transparent 100%);
          mask-image:linear-gradient(270deg, #000 0%, #000 44%, rgba(0,0,0,.66) 70%, rgba(0,0,0,.24) 88%, transparent 100%);
}
.flowband__img--a img,
.flowband__img--a::after{
  -webkit-mask-image:var(--vfade);
          mask-image:var(--vfade);
}
.flowband__img--a::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(270deg, rgba(0,19,39,.16) 0%, rgba(0,19,39,.34) 60%, rgba(0,19,39,.5) 100%);
}

/* as duas seções ficam transparentes: quem pinta agora é a faixa */
.benefits,
.hitl{ position:relative; background:none; overflow:visible; }
.benefits__grid{ display:grid; grid-template-columns:minmax(0,1fr); }
.benefits__copy{ max-width:560px; }
.benefits__list{ display:grid; gap:4px; }
.benefit{
  display:flex; align-items:center; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--hairline-dark);
}
.benefit:last-child{ border-bottom:0; }

.benefit p{ font-size:1rem; line-height:1.55; color:rgba(255,255,255,.88); }

/* ==========================================================================
   IA + decisão humana
   ========================================================================== */

.hitl .wrap{ position:relative; }
/* bloco de título centralizado */
.hitl .section-head{ margin-inline:auto; text-align:center; }
.hitl__statement{
  font-size:clamp(1.1rem,1rem + .5vw,1.4rem); font-weight:600; line-height:1.5;
  color:var(--cyan-100); max-width:52ch; margin-top:18px;
  margin-inline:auto;
}
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px; margin-block:clamp(44px,5vw,60px);
}
.step{
  position:relative; padding:58px 26px 32px;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md);
  background:linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  backdrop-filter:blur(6px);
}
/* Numeral grande atrás do conteúdo do card, sem caixa.
   O gradiente é aplicado ao texto via background-clip, então ele mesmo
   desaparece da metade para baixo. .step já é contexto de empilhamento
   (tem backdrop-filter), então z-index:-1 fica acima do fundo do card
   e abaixo do título e do parágrafo. */
.step__num{
  position:absolute; top:2px; left:20px; z-index:-1;
  font-size:clamp(4.6rem,6.4vw,6.4rem); line-height:.9;
  font-weight:700; letter-spacing:-.05em;
  pointer-events:none; user-select:none;
  background:linear-gradient(180deg,
    rgba(222,248,255,.60) 0%,
    rgba(222,248,255,.46) 38%,
    rgba(222,248,255,.14) 72%,
    rgba(222,248,255,0) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.step h3{ margin-bottom:9px; }
.step p{ font-size:.93rem; line-height:1.6; color:rgba(255,255,255,.8); }
.step__arrow{
  position:absolute; right:-24px; top:52px; z-index:2;
  color:rgba(1,186,239,.7);
}
.step:last-child .step__arrow{ display:none; }

/* ==========================================================================
   Confiança + prova social
   ========================================================================== */
.trust{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,var(--off) 0%, var(--white) 60%);
  color:var(--graphite);
}

/* Mesmo tratamento do fundo de Benefícios, espelhado: encostada à esquerda,
   alinhada pela base da seção, em tamanho natural, dissolvendo para a direita.
   Aqui a imagem já é clara, então ela se funde no fundo branco da seção. */
.trust__bg{
  position:absolute; top:auto; bottom:0; left:0; z-index:-1;
  width:min(56%, 840px); margin:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.2) 82%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.2) 82%, transparent 100%);
}
.trust__bg img{
  width:100%; height:auto; display:block;
  /* diferente de Benefícios, esta imagem é mais baixa que a seção: precisa de
     fade no topo, senão a borda superior corta reto no meio da seção */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 42%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 42%);
}
.trust__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-bottom:clamp(48px,5vw,68px); }
.trust-item{
  padding:24px 22px; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--hairline-light);
  box-shadow:0 10px 30px -22px rgba(0,19,39,.5);
}
.trust-item__icon{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px;
  background:var(--cyan-100); color:var(--cyan-600); }
.trust-item h3{ font-size:.99rem; margin-bottom:7px; color:var(--ink); }
.trust-item p{ font-size:.875rem; line-height:1.55; color:var(--on-light); }

.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; }
.quote{
  padding:28px 26px; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--hairline-light);
  display:flex; flex-direction:column; gap:18px;
  box-shadow:0 12px 34px -24px rgba(0,19,39,.5);
}
.quote__stars{ display:flex; gap:3px; color:var(--cyan-600); font-size:1.05rem; letter-spacing:2px; }
.quote p{ font-size:.955rem; line-height:1.65; color:var(--graphite); flex:1; }
.quote figcaption{ font-size:.83rem; line-height:1.5; color:var(--on-light); border-top:1px solid var(--hairline-light); padding-top:16px; }
.quote figcaption strong{ display:block; color:var(--ink); font-size:.9rem; }

/* Marcação honesta de conteúdo ainda não validado pelo cliente */
.is-placeholder{ border-style:dashed; border-color:rgba(1,186,239,.5); background:#fcfeff; }
.ph-tag{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px;
  background:var(--cyan-100); color:var(--cyan-800);
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.logos{
  margin-top:clamp(40px,4vw,56px); padding-top:34px; border-top:1px solid var(--hairline-light);
}
.logos__title{ font-size:.74rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#626f7c; text-align:center; margin-bottom:22px; }
.logos__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.logo-slot{
  height:76px; border-radius:var(--r-sm); display:grid; place-items:center;
  border:1.5px dashed #cfdae4; background:#fbfcfd;
  font-size:.75rem; font-weight:600; color:#6d7a87; text-align:center; padding:8px;
}

/* ==========================================================================
   Seção final — demonstração
   ========================================================================== */
.demo{
  position:relative; isolation:isolate;
  background:
        radial-gradient(620px 560px at 92% 20%, rgba(1,186,239,.24), transparent 66%),
    linear-gradient(180deg, var(--white) 0%, var(--off) 100%);
  color:var(--graphite);
}

/* Imagem de fundo encostada à esquerda, alinhada pelo TOPO da seção */
.demo__bg{
  position:absolute; left:0; top:0; bottom:auto; z-index:-1;
  width:min(42%, 640px); margin:0; pointer-events:none; opacity:.6;
  /* sem opacity: o miolo fica 100%. Só as bordas livres (direita e base)
     esmaecem, porque esquerda e topo já encostam nos limites da seção. */
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.26) 91%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.26) 91%, transparent 100%);
}
.demo__bg img{
  width:100%; height:auto; display:block;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.7) 80%, rgba(0,0,0,.2) 93%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.7) 80%, rgba(0,0,0,.2) 93%, transparent 100%);
}
.demo .wrap{ position:relative; }
.demo__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(40px,5vw,72px); align-items:start;
}
.demo .eyebrow{ color:var(--cyan-700); }
.demo h2{ color:var(--ink); }
/* bloco eyebrow + título centralizado na coluna.
   Escopado em .demo__copy: ".demo h2" pegaria também o título do card. */
.demo__copy > .eyebrow{ display:block; text-align:center; }
.demo__copy h2{ max-width:16ch; margin-inline:auto; text-align:center; }
.demo__lead{ margin-top:18px; font-size:clamp(1rem,.95rem + .3vw,1.15rem); color:var(--on-light); max-width:48ch; }
.demo__points{ margin-top:30px; display:grid; gap:14px; }
.demo__points li{ display:flex; align-items:flex-start; gap:12px; font-size:.96rem; color:var(--on-light); }
.demo__points svg{ flex:none; margin-top:3px; color:var(--cyan-700); }

/* No layout de duas colunas o texto de apoio desce 150px, aproximando-o do
   miolo do formulário. Só vale no desktop: empilhado viraria um buraco. */
@media (min-width:1081px){
  .demo__copy{ margin-top:30px; }   /* desce o eyebrow e o título */
  .demo__lead{ margin-top:138px; }  /* 18px originais + 150px, menos 30px */
}

/* Selo Go On ao final do bloco de texto */
.demo__goon{
  margin-top:clamp(30px,3.4vw,42px); padding-top:26px;
  border-top:1px solid var(--hairline-light);
}
.demo__goon img{ height:34px; width:auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  position:relative;
  /* malha de pontos no fundo todo, com scrim escuro por cima para o texto */
  background:
    linear-gradient(180deg, rgba(0,19,39,.93) 0%, rgba(0,19,39,.84) 42%, rgba(0,19,39,.90) 100%),
    url('assets/bg-mesh.webp') center bottom / cover no-repeat;
  background-color:var(--ink);
  padding-block:clamp(52px,6vw,72px) 32px;
  border-top:1px solid var(--hairline-dark);
}
.footer__top{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(30px,4vw,56px); padding-bottom:38px; border-bottom:1px solid var(--hairline-dark);
}
.footer__logo img{ width:auto; display:block; }
.footer__logo-mark{ height:74px; }
.footer__logo-goon{ height:26px; margin-top:16px; margin-bottom:20px; }
.footer__tagline{ font-style:italic; font-size:1.02rem; color:var(--cyan-100); margin-bottom:14px; }
.footer p{ font-size:.9rem; line-height:1.65; color:var(--on-dark-soft); max-width:44ch; }
.footer h4{ font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--white); margin-bottom:16px; }
.footer li{ margin-bottom:10px; }
.footer li a{ font-size:.9rem; color:var(--on-dark); transition:color .2s var(--ease); }
.footer li a:hover{ color:var(--cyan); }
.footer__bottom{
  padding-top:26px; display:flex; flex-wrap:wrap; gap:14px 26px;
  align-items:flex-start; justify-content:space-between;
  font-size:.8rem; color:rgba(255,255,255,.55);
}
.footer__legal{ display:grid; gap:5px; }
.footer__bottom a{ color:rgba(255,255,255,.62); }
.footer__bottom a:hover{ color:var(--cyan); }

/* Assinatura da agência */
.footer__signature{
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--hairline-dark);
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  font-size:.78rem; color:rgba(255,255,255,.5);
  transition:color .25s var(--ease);
}
.footer__signature img{
  height:19px; width:auto;
  opacity:.72; transition:opacity .25s var(--ease);
}
.footer__signature:hover{ color:rgba(255,255,255,.8); }
.footer__signature:hover img{ opacity:1; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:1024px){
  .carousel__slide{ flex-basis:calc((100% - 20px) / 2); }
}
@media (max-width:900px){
  .features__layout{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px); }
  .features__demo{ order:2; }
  .features__head{ order:1; }
}
@media (max-width:640px){
  .carousel__slide{ flex-basis:100%; }
}

@media (max-width:1080px){
  .challenges__bg{ width:88%; opacity:.5; }
  .features__glyph{ width:38%; opacity:.2; }
  .flowband__img--a{ width:76%; opacity:.5; }
  .trust__bg{ width:100%; opacity:.4; }
  .demo__bg{ width:100%; opacity:.5; }
  .kpis__media{ width:72%; opacity:.55; }
  .kpis__copy{ max-width:none; }
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .hero__copy{ grid-column:1; }
  .hero__media{
    top:auto; bottom:0; width:100%; opacity:.6;
    -webkit-mask-image:none; mask-image:none;
  }
  .hero__media::after{
    background:linear-gradient(180deg, rgba(0,19,39,.35) 0%, rgba(0,19,39,.1) 40%, rgba(0,19,39,.7) 100%);
  }
  .demo__grid{ grid-template-columns:1fr; }
  .form-card{ max-width:620px; }
  .step__arrow{ display:none; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__logo{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .kpis__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
}
@media (max-width:640px){
  :root{ --section-y:64px; }
  /* logo + selo lado a lado precisam caber na largura do celular */
  .header__logo,
  .header:not(.is-stuck) .header__logo{ gap:10px; }
  .header__logo-mark,
  .header:not(.is-stuck) .header__logo-mark,
  .header.is-stuck .header__logo-mark{ height:31.2px; }
  .header__logo-goon,
  .header:not(.is-stuck) .header__logo-goon{ height:23.4px; }
  /* empilhado: o fio passa a ser horizontal */
  .kpis__grid{ grid-template-columns:1fr; }
  .kpi{ padding-inline:0; padding-block:20px 0; }
  .kpi + .kpi::before{
    left:0; right:0; top:0; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg,
      rgba(0,19,39,.16) 0%, rgba(0,19,39,.16) 62%, transparent 100%);
  }
  .header__cta,
  .header.is-stuck .header__cta{ display:none; }
  .form-grid--2{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__signature{ justify-content:center; }

  /* ---------- Blocos de título e CTAs centralizados ---------- */
  .section-head,
  .features__head,
  .demo__copy{ text-align:center; margin-inline:auto; }
  .section-head .lead,
  .demo__lead,
  .hero__sub{ margin-inline:auto; }
  .hero__copy,
  .benefits__copy{ text-align:center; }

  .hero__actions,
  .section-cta,
  .section-cta--start,
  .features__cta{ justify-content:center; text-align:center; }
  /* a citação perde a barra lateral: borda à esquerda com texto centrado fica torta */
  .hero__note{
    padding-left:0; border-left:0; margin-inline:auto;
    padding-top:14px; border-top:1px solid rgba(1,186,239,.4);
  }
  /* listas seguem alinhadas à esquerda: texto corrido centralizado atrapalha a leitura */
  .benefits__list,
  .demo__points{ text-align:left; }
  .demo__points{ display:inline-grid; }

  /* ---------- KPIs centralizados ---------- */
  .kpi{ text-align:center; }
  .kpi__label{ margin-inline:auto; }
  .kpi + .kpi::before{
    background:linear-gradient(90deg,
      transparent 0%, rgba(0,19,39,.16) 22%, rgba(0,19,39,.16) 78%, transparent 100%);
  }
  .kpis__foot{ text-align:center; margin-inline:auto; }

  /* ---------- Desligados no mobile ---------- */
  .hero__media,
  .flowband__img--a,
  .demo__bg,
  .hero__pills,
  .demo__lead{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}