/* ==========================================================================
   i-Ganhei · Landing page · v1
   Direção: referência "Linear" na versão clara — fundo branco, tipografia
   média e apertada, linhas finas no lugar de cartões, uma imagem protagonista.
   Para editar: cores, fontes e medidas ficam nas variáveis abaixo.
   ========================================================================== */

:root {
  /* Cores */
  --bg:        #FFFFFF;
  --bg-raised: #F7F8FA;   /* superfícies elevadas (quadros), quase branco */
  --line:      rgba(11, 13, 18, .09);
  --line-strong: rgba(11, 13, 18, .16);
  --text:      #0B0D12;
  --text-2:    #3E4451;   /* texto de apoio */
  --text-3:    #6B7280;   /* rótulos e detalhes */
  /* Paleta oficial do i-Ganhei (extraída do logotipo) */
  --brand:       #5267FF;   /* azul i-Ganhei: botões e destaques principais */
  --brand-hover: #6B7CFF;
  --accent:      #3F54F0;   /* azul um pouco mais fechado, para texto e detalhes sobre branco */
  --signal:      #00C96A;   /* verde i-Ganhei: pontos de status, usado com parcimônia */

  /* Tipografia */
  --f-sans: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Medidas */
  --page: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(56px, 7vw, 104px);
  --radius: 6px;           /* cantos discretos, nada de formas "fofas" */

  --esteira-bg: #F7F8FA;
  --header-bg: rgba(255, 255, 255, .85);
  --planet: #DDE1EA; --dotw: #FFFFFF; --dotw-stroke: rgba(11,13,18,.22);
  --brand-soft: rgba(82,103,255,.10); --signal-soft: rgba(0,201,106,.12); --warn: #E5484D;

  color-scheme: light;
}

/* Modo escuro (escolhido na aba lateral) */
:root[data-theme="dark"] {
  --bg:        #08090A;
  --bg-raised: #0D0F13;
  --line:      rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --text:      #F4F5F6;
  --text-2:    #C3C8D0;
  --text-3:    #8A8F98;
  --accent:    #9AA7FF;
  --signal:    #00DE71;
  --esteira-bg: #0D0F13;
  --header-bg: rgba(8, 9, 10, .8);
  --planet: #1B1F27; --dotw: #FFFFFF; --dotw-stroke: rgba(255,255,255,0);
  --brand-soft: rgba(82,103,255,.16); --signal-soft: rgba(0,222,113,.14); --warn: #FF6369;
  color-scheme: dark;
}
body { transition: background-color .3s, color .3s; }
.lg-dark { display: none !important; }
:root[data-theme="dark"] .lg-light { display: none !important; }
:root[data-theme="dark"] .lg-dark { display: block !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }

/* ---------- Tipografia ---------- */
.eyebrow {
  font: 500 12.5px/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
h1, h2 { font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.4vw, 5.2rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.08; }
h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* ---------- Botão ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  background: var(--brand); color: #fff;
  font: 500 15.5px/1 var(--f-sans);
  border-radius: var(--radius);
  text-decoration: none; border: 0; cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--brand-hover); }
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; white-space: nowrap; }

/* ---------- Cabeçalho ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.top img { height: 26px; width: auto; }
.top nav { display: flex; gap: 30px; margin-left: auto; margin-right: 8px; }
.top nav a { white-space: nowrap; font-size: 14px; color: var(--text-3); text-decoration: none; transition: color .2s; }
.top nav a:hover { color: var(--text); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(56px, 7vw, 96px); text-align: center; overflow: clip; }
.hero .eyebrow { margin-bottom: 28px; display: inline-flex; align-items: center; gap: 10px; }
.hero h1 .eyebrow { display: flex; justify-content: center; width: fit-content; margin-inline: auto; }
.hero .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.hero h1 { font-weight: 800; max-width: 34ch; margin-inline: auto; font-size: clamp(2.1rem, 4.1vw, 3.6rem); line-height: 1.06; }
.hero h1 .eyebrow { max-width: none; }
.hero .lead { max-width: 54ch; margin: 24px auto 0; }
.hero .cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero .cta small { font-size: 14px; color: var(--text-3); }

/* Espaço da imagem hero — proporção 16:10, largura total do conteúdo.
   Para inserir a imagem definitiva: coloque <img src="..." alt="..."> dentro
   de .hero-media. O bloco CSS abaixo some sozinho e nada muda no layout. */
.hero-media {
  position: relative;
  margin-top: clamp(56px, 8vw, 104px);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #F2F4F7 0%, #F7F8FA 70%, var(--bg) 100%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; position: absolute; inset: 0; }
.hero-media .placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 56px 100%;
  font: 500 12.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.hero-media img ~ .placeholder { display: none; }

/* ---------- Seções ---------- */
section { padding-block: var(--section); }
.head { display: grid; gap: 22px; max-width: 760px; }
.head .eyebrow { display: block; }
/* Sem linhas entre as seções: o título de cada uma já marca a troca */

/* Desafio: linhas, não cartões */
.rows { margin-top: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 12px 48px;
  padding: 30px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.row p { color: var(--text-3); font-size: 16px; }
.row .need { color: var(--text-2); }
.row .need::before { content: "→  "; color: var(--accent); }

/* Esteira */
.flow { margin-top: clamp(48px, 7vw, 88px); border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); }
.flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.step { padding: 28px 26px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step:nth-child(3n) { border-right: 0; }
.step .n { font: 500 12px var(--f-mono); color: var(--text-3); letter-spacing: .06em; }
.step h3 { margin-top: 22px; }
.step ul { margin-top: 16px; display: grid; gap: 7px; }
.step li { font-size: 14.5px; line-height: 1.45; color: var(--text-3); display: flex; gap: 10px; }
.step li::before { content: ""; flex: none; width: 4px; height: 4px; margin-top: .65em; border-radius: 50%; background: var(--accent); }
.flow-layers {  padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.flow-layers .tag { font: 500 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.flow-layers span.i { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--text-2); }
.flow-layers span.i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.final .meta { margin-top: 20px; font: 400 13px var(--f-mono); letter-spacing: .04em; color: var(--text-3); }
.note { margin-top: 18px; font: 400 12.5px var(--f-mono); color: var(--text-3); letter-spacing: .02em; }

/* Personalização */
.p-head { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px clamp(40px, 7vw, 112px); align-items: end; }
.p-head .head { max-width: none; }
.esteira {
  margin-top: clamp(40px, 6vw, 72px);
  aspect-ratio: 2 / 1;                 /* mesma proporção do vídeo (1920×960) */
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--esteira-bg);       /* mesmo fundo do vídeo: as bordas não aparecem */
}
.esteira video { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-feats { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); counter-reset: pf; }
.p-feats li { padding: 26px 28px 4px 0; counter-increment: pf; }
.p-feats li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.p-feats li::before { content: "0" counter(pf); display: block; font: 500 12px var(--f-mono); letter-spacing: .06em; color: var(--accent); margin-bottom: 16px; }
.p-feats h3 { font-size: 1.05rem; }
.p-feats p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--text-3); }

/* IA e dados */
.pair { margin-top: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); }
.pair > div { padding: clamp(28px, 4vw, 52px); }
.pair > div + div { border-left: 1px solid var(--line); }
.pair .eyebrow { display: block; margin-bottom: 22px; }
.pair h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -.025em; line-height: 1.18; }
.pair p { margin-top: 14px; color: var(--text-3); font-size: 16px; }
.pair ul { margin-top: 28px; display: grid; gap: 12px; }
.pair li { display: flex; gap: 12px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.pair li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; border-radius: 50%; background: var(--signal); }
.pair-foot { margin-top: 24px; color: var(--text-3); font-size: 15px; text-align: center; }

/* Ganhos */
.gains { margin-top: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line); counter-reset: g; }
.gain { display: grid; grid-template-columns: 72px 1fr 1.3fr; gap: 12px 40px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: baseline; counter-increment: g; }
.gain::before { content: "0" counter(g); font: 500 12.5px var(--f-mono); color: var(--text-3); letter-spacing: .06em; }
.gain h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -.025em; }
.gain p { color: var(--text-3); font-size: 16px; }

/* Conversão final */
.final { text-align: center; position: relative; overflow: clip; }
.final::before { content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 100%); height: 1px; transform: translateX(-50%); background: var(--brand); opacity: .7; }
.final h2 { max-width: 18ch; margin-inline: auto; }
.final .lead { max-width: 54ch; margin: 24px auto 0; }
.final .cta { margin-top: 40px; }

footer { border-top: 1px solid var(--line); padding-block: 36px 48px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--text-3); }
footer .wrap { align-items: center; gap: 24px 40px; }
.f-brand { display: grid; gap: 8px; justify-items: start; }
.f-brand img { height: 34px; width: auto; display: block; }
.f-sol { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
footer .f-about { flex: 1 1 320px; max-width: 52ch; }
.f-side { display: grid; gap: 10px; justify-items: end; }
.f-social { list-style: none; display: flex; gap: 10px; padding: 0; margin: 0; }
.f-social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); transition: color .2s, border-color .2s; }
.f-social a:hover { color: var(--accent); border-color: var(--accent); }
.f-social svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 760px) { .f-side { justify-items: start; } }

/* Desafio: frase de fechamento */
.fecho { margin-top: 36px; font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 500; letter-spacing: -.015em; max-width: 46ch; }

/* A esteira: quatro momentos em abas */
.et { margin-top: clamp(40px, 6vw, 72px); }
.et-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.et-tab { appearance: none; background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px; padding: 18px 16px 18px 0; text-align: left; cursor: pointer; color: var(--text-3); font: inherit; display: grid; gap: 6px; transition: color .2s, border-color .2s; }
.et-tab + .et-tab { padding-left: 16px; }
.et-tab:hover { color: var(--text-2); }
.et-tab.on { color: var(--text); border-top-color: var(--brand); }
.et-n { font: 500 12px var(--f-mono); letter-spacing: .06em; }
.et-tab.on .et-n { color: var(--accent); }
.et-t { font-size: 1.05rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
.et-t em { font-style: normal; color: var(--text-3); }
.et-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 32px; animation: etIn .35s ease; }
.et-panel[hidden] { display: none; }
@keyframes etIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.et-copy h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -.025em; line-height: 1.15; }
.et-frase { margin-top: 14px; color: var(--text-2); font-size: 16.5px; line-height: 1.6; }
.et-ad { margin: 22px 0 0; display: grid; gap: 10px; }
.et-ad div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.et-ad div + div { border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: color-mix(in srgb, var(--brand) 6%, transparent); }
.et-ad dt { font: 500 11.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.et-ad div + div dt { color: var(--accent); }
.et-ad dd { margin: 4px 0 0; font-size: 15px; color: var(--text); }
.et-rec { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.et-rec li { font-size: 13px; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-2); }
.et-link { display: inline-flex; gap: 8px; margin-top: 24px; font-weight: 500; color: var(--accent); text-decoration: none; }
.et-link:hover span { transform: translateX(3px); }
.et-link span { transition: transform .2s; }
.et-shot { border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(15, 23, 42, .3); background: var(--bg-raised); }
.et-shot img { width: 100%; height: auto; }
.mid-cta { margin-top: 22px; }

/* Faixa de clientes */
.clientes { padding-block: clamp(56px, 7vw, 88px) clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); overflow: hidden; }
.clientes h2.eyebrow { display: block; text-align: center; font-size: 12.5px; letter-spacing: .08em; }
.marquee { display: flex; margin-top: 34px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); padding-right: clamp(40px, 5vw, 72px); flex: none; animation: rolar 60s linear infinite; }
.marquee:hover .logos { animation-play-state: paused; }
.logos li { flex: none; }
.logos img { display: block; height: 40px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.logos li:hover img, .logos img.on { filter: none; opacity: 1; }
:root[data-theme="dark"] .logos img { filter: grayscale(1) brightness(0) invert(1); opacity: .55; }
:root[data-theme="dark"] .logos li { border-radius: 8px; padding: 6px 10px; transition: background .3s; }
:root[data-theme="dark"] .logos li:hover, :root[data-theme="dark"] .logos li:has(img.on) { background: #fff; }
:root[data-theme="dark"] .logos li:hover img, :root[data-theme="dark"] .logos img.on { filter: none; opacity: 1; }
.clientes-txt { margin-top: 30px; text-align: center; font-size: 13.5px; color: var(--text-3); max-width: 80ch; margin-inline: auto; }
@keyframes rolar { to { transform: translateX(-100%); } }

/* Aba lateral dia/noite */
.tema-tab {
  position: fixed; right: 0; top: 58%; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 16px 0 12px; gap: 14px; border: 1px solid var(--line-strong); border-right: 0;
  border-radius: 10px 0 0 10px; background: var(--bg-raised); color: var(--text);
  font: 500 13.5px var(--f-sans); cursor: pointer;
  box-shadow: -6px 6px 22px -10px rgba(0, 0, 0, .3);
  transform: translateX(calc(100% - 44px)); transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s;
}
.tema-tab:hover, .tema-tab:focus-visible { transform: none; }
.tema-tab svg { width: 19px; height: 19px; flex: none; fill: currentColor; }
.tema-tab .sol { display: none; }
:root[data-theme="dark"] .tema-tab .sol { display: block; }
:root[data-theme="dark"] .tema-tab .lua { display: none; }
.tema-txt { white-space: nowrap; }

/* Perguntas frequentes */
.faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px clamp(40px, 7vw, 112px); align-items: stretch; }
.faq-side { display: flex; flex-direction: column; min-height: 0; }
.faq-fig { flex: 1 1 0; min-height: 0; margin: 28px 0 0; display: flex; align-items: flex-end; justify-content: flex-start; }   /* a imagem ocupa o espaço até a base das perguntas */
.faq-frame { position: relative; height: 100%; display: flex; align-items: flex-end; }
.faq-frame img { position: relative; z-index: 1; display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; }
/* moldura em "L": linha no corte da cintura e linha vertical à esquerda; a mão apontando passa por cima e dá o efeito 3D */
@media (max-width: 900px) { .faq-fig { flex: none; height: 300px; } }
.qas { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font: 400 22px/1 var(--f-mono); color: var(--accent); flex: none; transition: transform .2s; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary h3 { font-size: 1.1rem; }
.qa p { padding: 0 48px 26px 0; color: var(--text-2); font-size: 16px; line-height: 1.6; max-width: 68ch; }

/* Rodapé */
.f-about { flex: 1 1 320px; }
.f-date { font: 400 13px var(--f-mono); letter-spacing: .02em; }

/* Texto só para leitores de tela e robôs (descrição da animação) */
.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; }

/* Rótulo dentro do H1 */
h1 .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; letter-spacing: .08em; }

/* ==========================================================================
   Seções novas (IA no centro)
   ========================================================================== */
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
.head--center .lead { max-width: 62ch; }

/* 2. O que muda: texto + inversão de papéis */
.bn-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.inv { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); padding: clamp(20px, 3vw, 32px); }
.inv-tabs { display: flex; gap: 6px; margin-bottom: 22px; }
.inv-t { font: 500 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; color: var(--text-3); border: 1px solid var(--line); transition: all .4s; }
.inv:not(.com) .inv-t--hoje, .inv.com .inv-t--com { color: #fff; background: var(--brand); border-color: var(--brand); }
.inv-stack { display: grid; gap: 7px; justify-items: center; }
.inv-row { position: relative; width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; white-space: nowrap; color: var(--text-2); transition: color .6s; }
.inv-row::before { content: ""; position: absolute; inset: 0; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg); transform: scaleX(var(--w, 1)); transition: transform .9s cubic-bezier(.6,0,.2,1), background .6s, border-color .6s; }
.inv-row > * { position: relative; }
.inv-row.s { color: var(--text); font-weight: 500; }
.inv-row.s::before { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }

.inv-row i { font: 600 10px var(--f-mono); font-style: normal; letter-spacing: .06em; color: #fff; background: var(--signal); border-radius: 4px; padding: 2px 5px; opacity: 0; transform: scale(.6); transition: opacity .4s .5s, transform .4s .5s; }
.inv .s1 { --w: .36; } .inv .s2 { --w: .5; }
.inv .o1 { --w: .64; } .inv .o2 { --w: .76; } .inv .o3 { --w: .88; } .inv .o4 { --w: 1; }
.inv.com .s1 { --w: 1; } .inv.com .s2 { --w: .9; }
.inv.com .o1 { --w: .52; } .inv.com .o2 { --w: .46; } .inv.com .o3 { --w: .4; } .inv.com .o4 { --w: .34; }
.inv.com .inv-row.o { color: var(--text-3); }
.inv.com .inv-row.o::before { background: var(--signal-soft); border-color: color-mix(in srgb, var(--signal) 40%, transparent); }
.inv.com .inv-row i { opacity: 1; transform: none; }
.inv-legend { display: flex; justify-content: center; gap: 20px; margin-top: 18px; font-size: 12.5px; color: var(--text-3); }
.inv-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.lg-s::before { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.lg-o::before { background: var(--bg); border: 1px solid var(--line-strong); }
.bn-eff { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px clamp(20px, 3vw, 32px); align-items: center; padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px); border-radius: 12px; background: var(--brand-soft); border-left: 3px solid var(--brand); }
.bn-eff svg { width: 44px; height: 44px; fill: var(--accent); }
.bn-eff h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.025em; color: var(--accent); }
.bn-eff p { margin-top: 6px; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.5; color: var(--text); max-width: 72ch; }
.bn-cards3 { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bn-cards3 li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.bn-cards3 li:hover { transform: translateY(-4px); border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 12px 28px -14px var(--brand); }
.bn-cards3 svg { transition: transform .25s ease; }
.bn-cards3 li:hover svg { transform: scale(1.12) rotate(-6deg); }
.bn-cards3 svg { grid-row: 1 / 3; align-self: center; width: 36px; height: 36px; padding: 14px; box-sizing: content-box; border-radius: 14px; background: var(--brand-soft); fill: var(--accent); }
.bn-cards3 h3 { align-self: end; font-size: 1.05rem; }
.bn-cards3 p { align-self: start; margin-top: 6px; font-size: 15px; line-height: 1.5; min-height: 4.5em; color: var(--text-3); }
.bn-fecho { margin-top: 16px; padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px); border-radius: 12px; background: var(--brand-soft); border-left: 3px solid var(--brand); font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: -.015em; line-height: 1.45; color: var(--text); }
.bn-fecho strong { font-weight: 600; color: var(--accent); }

/* Ilustração: esforço x facilidade (linhas tingidas pela cor do texto, funcionam no claro e no escuro) */
.esf { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: clamp(48px, 7vw, 96px); margin-bottom: clamp(48px, 6vw, 80px); }
.esf-row { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.esf-row--inv { grid-template-columns: 1fr 1.25fr; }
.esf-row--inv .esf-img { order: 2; }
.esf-img { display: block; width: 100%; height: auto; }
:root[data-theme="dark"] .esf-img { filter: invert(1); opacity: .92; }   /* linhas pretas viram claras no modo escuro */
.esf-txt { min-width: 0; max-width: 46ch; }
.esf-head { max-width: none; }
.esf-h { text-align: center; margin-inline: auto; font-size: clamp(2.2rem, 4.9vw, 4.4rem); line-height: .98; letter-spacing: -.035em; text-wrap: balance; max-width: none; }
.esf-h em { font-style: italic; font-weight: 400; }
.esf-h strong { font-weight: 800; }
@media (min-width: 761px) { .esf-h { white-space: nowrap; } }
@media (max-width: 760px) { .esf-h em, .esf-h strong { display: block; } }
.esf-txt h3 { font-size: clamp(1.8rem, 3.3vw, 2.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; margin: 0 0 18px; color: var(--text); }
.esf-k { display: block; font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.esf-k--ia { color: var(--accent); }
.esf-txt p { font-size: 17.5px; line-height: 1.65; color: var(--text-2); margin: 0; }

/* 3. A IA no centro: órbita */
.t-ia { font-weight: 800; max-width: 22ch; }
.t-ia span { color: var(--brand); }
.t-plat { max-width: 24ch; font-weight: 800; }
/* Celular: a explicação da etapa aparece num quadro fixo abaixo da órbita, legível, em vez do balão sobre a imagem */
@media (max-width: 760px) {
}

/* 4. Etapas em zigue-zague */
.zz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.zz + .zz { margin-top: clamp(80px, 10vw, 140px); }
.zz--rev .zz-art { order: -1; }
.zz-copy .eyebrow { display: block; }
.zz-h { margin-top: 0; font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.zz-copy .lead { margin-top: 18px; }
.zz-pair { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zz-pair > div { padding: 18px 18px 20px; border: 1px solid var(--line); border-radius: 10px; }
.zz-pair p, .b-small p, .zz-steps p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--text-3); }
.zz-bento { margin-top: 28px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.b-big { padding: 20px 20px 22px; border-radius: 10px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.b-big ul { margin-top: 12px; display: grid; gap: 8px; }
.b-big li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--text-2); }
.b-big li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5em; border-radius: 50%; background: var(--signal); }
.b-small { padding: 20px; border-radius: 10px; border: 1px dashed var(--line-strong); }
.zz-steps { margin-top: 28px; counter-reset: zs; border-top: 1px solid var(--line); }
.zz-steps li { counter-increment: zs; display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); }
.zz-steps li::before { content: "0" counter(zs); grid-row: span 2; font: 500 12.5px var(--f-mono); color: var(--accent); letter-spacing: .06em; padding-top: 3px; }
.zz-steps h3 { font-size: 1.05rem; }
.zz-art { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); padding: clamp(22px, 3vw, 36px); min-height: 340px; position: relative; overflow: hidden; }
.zz-tease { margin-top: clamp(64px, 8vw, 104px); text-align: center; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-2); }
.zz-tease .et-link { margin: 0 0 0 10px; }

/* Ilustração A: edital lido pela IA */
.ed { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 10px; }
.ed-doc { position: relative; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px; padding: 16px 16px 20px; display: grid; gap: 9px; overflow: hidden; box-shadow: 0 16px 40px -28px rgba(15,23,42,.35); }
.ed-hd { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2); margin-bottom: 6px; }
.ed-hd span { width: 18px; height: 22px; border-radius: 3px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.ed-hd b { font-weight: 600; }
.ed-doc i { display: block; height: 7px; border-radius: 4px; background: var(--line-strong); }
.ed-doc i.w { width: 70%; }
.ed-doc i.hl { animation: edHl 4.8s infinite; }
.ed-doc i.h2 { animation-delay: .6s; } .ed-doc i.h3 { animation-delay: 1.2s; }
@keyframes edHl { 0%, 18% { background: var(--line-strong); } 26%, 70% { background: var(--brand); } 80%, 100% { background: var(--line-strong); } }
.ed-scan { position: absolute; left: 0; right: 0; height: 36px; top: -40px; background: linear-gradient(180deg, transparent, var(--brand-soft) 60%, color-mix(in srgb, var(--brand) 55%, transparent)); border-bottom: 2px solid var(--brand); animation: edScan 4.8s infinite cubic-bezier(.5,0,.5,1); }
@keyframes edScan { 0% { top: -40px; } 45% { top: 100%; } 100% { top: 100%; } }
.ed-arrow { height: 2px; background: var(--line-strong); position: relative; }
.ed-arrow span { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: edArr 4.8s infinite; }
@keyframes edArr { 0%, 40% { left: 0; opacity: 0; } 48% { opacity: 1; } 62% { left: calc(100% - 8px); opacity: 1; } 66%, 100% { left: calc(100% - 8px); opacity: 0; } }
.ed-out { display: grid; gap: 10px; }
.ed-rule { font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--brand) 50%, transparent); border-radius: 8px; text-align: center; }
.ed-chip { font-size: 13px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateX(-8px); animation: edChip 4.8s infinite; }
.ed-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ed-chip.ok::before { background: var(--signal); }
.ed-chip.no { color: var(--text-3); text-decoration: line-through; }
.ed-chip.no::before { background: var(--text-3); }
.ed-chip.c2 { animation-delay: .25s; } .ed-chip.c3 { animation-delay: .5s; }
@keyframes edChip { 0%, 60% { opacity: 0; transform: translateX(-8px); } 68%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Ilustração B: exigido x sua base */
.mp { display: grid; gap: 10px; align-content: center; }
.mp-h, .mp-r { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; gap: 8px; }
.mp-h span { font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.mp-h span:last-child { text-align: right; }
.mp-r > span:first-child { font-size: 13.5px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px; }
.mp-r i { height: 2px; background: linear-gradient(90deg, var(--brand) 50%, transparent 50%) 0 0 / 200% 100% no-repeat; position: relative; animation: mpLine 6s infinite; }
.mp-r .st { justify-self: end; width: max-content; white-space: nowrap; font-size: 13px; padding: 9px 12px; border-radius: 8px; display: flex; flex-direction: row; align-items: center; gap: 8px; opacity: 0; animation: mpSt 6s infinite; }
.mp-r .st::before { content: ""; flex: none; display: block; width: 8px; height: 8px; border-radius: 50%; }
.st.ok { background: var(--signal-soft); color: var(--text); } .st.ok::before { background: var(--signal); }
.st.no { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); font-weight: 500; } .st.no::before { background: var(--warn); }
.mp .r2 i, .mp .r2 .st { animation-delay: .5s; } .mp .r3 i, .mp .r3 .st { animation-delay: 1s; } .mp .r4 i, .mp .r4 .st { animation-delay: 1.5s; }
.mp .r4 i { background-image: linear-gradient(90deg, var(--warn) 50%, transparent 50%); }
@keyframes mpLine { 0% { background-position: 100% 0; } 12%, 88% { background-position: 0 0; } 100% { background-position: 0 0; opacity: 0; } }
@keyframes mpSt { 0%, 10% { opacity: 0; transform: scale(.9); } 16%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mp-alert { margin-top: 8px; justify-self: end; font-size: 12.5px; color: var(--text-2); padding: 8px 12px 8px 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); position: relative; opacity: 0; animation: mpAlert 6s infinite; }
.mp-alert::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 20%, transparent); }
@keyframes mpAlert { 0%, 38% { opacity: 0; transform: translateY(6px); } 46%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Ilustração C: da proposta ao caixa */
.tl { display: grid; align-items: center; }
.tl-in { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-line { position: absolute; left: 12.5%; right: 12.5%; top: 50%; height: 2px; background: var(--line-strong); }
.tl-run { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 6px var(--signal-soft); animation: tlRun 6s infinite linear; }
@keyframes tlRun { 0% { left: 0; } 100% { left: calc(100% - 10px); } }
.tl-n { position: relative; display: grid; justify-items: center; gap: 0; text-align: center; height: 220px; grid-template-rows: 1fr auto 1fr; }
.tl-n b { grid-row: 2; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand); position: relative; z-index: 1; animation: tlNode 6s infinite; }
.tl-n span { grid-row: 3; align-self: start; margin-top: 14px; font-size: 14px; font-weight: 500; }
.tl-n em { grid-row: 1; align-self: end; margin-bottom: 14px; font-style: normal; font-size: 12px; line-height: 1.3; color: var(--text-2); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; max-width: 96%; text-align: center; opacity: 0; animation: tlTag 6s infinite; }
.tl .n2 b, .tl .n2 em { animation-delay: 2s; } .tl .n3 b, .tl .n3 em { animation-delay: 4s; } .tl .n4 b, .tl .n4 em { animation-delay: 5.9s; }
.tl .n1 b, .tl .n1 em { animation-delay: .05s; }
@keyframes tlNode { 0% { background: var(--brand); box-shadow: 0 0 0 6px var(--brand-soft); } 25%, 100% { background: var(--bg); box-shadow: none; } }
@keyframes tlTag { 0% { opacity: 0; transform: translateY(4px); } 4%, 30% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; } }

.pos-demo { margin-top: 28px; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text-2); }
.pos-demo .et-link { margin: 0 0 0 8px; }
@media (max-width: 760px) { .pos-demo .et-link { display: flex; justify-content: center; margin: 10px 0 0; } }

/* Menu no celular/tablet */
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; }
.menu-btn span { display: block; width: 16px; height: 1.5px; background: var(--text); transition: transform .25s; }
.top.menu-on .menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg); }
.top.menu-on .menu-btn span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .top nav { display: none; }
  .menu-btn { display: inline-flex; }
  .top .wrap { gap: 12px; }
  .top .btn--sm { margin-left: auto; }
  .top.menu-on nav { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 64px; margin: 0; padding: 8px var(--gutter) 16px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px -20px rgba(0,0,0,.25); }
  .top.menu-on nav a { padding: 14px 0; font-size: 16px; color: var(--text); border-bottom: 1px solid var(--line); }
  .top.menu-on nav a:last-child { border-bottom: 0; }
}
@media (max-width: 1024px) {
  .bn-top, .zz { grid-template-columns: 1fr; }
  .zz--rev .zz-art { order: 0; }
  .bn-cards3 { grid-template-columns: 1fr; }
  .et-panel { grid-template-columns: 1fr; }
  .et-shot { order: -1; }
  .flow-steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(3n) { border-right: 1px solid var(--line); }
  .step:nth-child(2n) { border-right: 0; }
  .p-head { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .p-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-feats li:nth-child(3) { padding-left: 0; border-left: 0; }
  .p-feats li:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 22px; }
  .row { grid-template-columns: 1fr 1.4fr; }
  .row .need { grid-column: 2; }
}
@media (max-width: 760px) {
  .esf-row, .esf-row--inv { grid-template-columns: 1fr; }
  .esf-row--inv .esf-img { order: 0; }
  .bn-eff { grid-template-columns: 1fr; }
  .top .btn--sm { padding: 0 12px; font-size: 13px; }
  .zz-pair, .zz-bento { grid-template-columns: 1fr; }
  .inv-row { font-size: 12.5px; gap: 6px; }
  .inv .s1 { --w: .56; } .inv .s2 { --w: .66; }
  .inv .o1 { --w: .76; } .inv .o2 { --w: .84; } .inv .o3 { --w: .92; }
  .inv.com .o1 { --w: .66; } .inv.com .o2 { --w: .63; } .inv.com .o3 { --w: .6; } .inv.com .o4 { --w: .57; }
  .ed { grid-template-columns: 1fr; }
  .ed-arrow { display: none; }
  .tl-n em { font-size: 11px; }
  .zz-art { min-height: 0; }
  .zz-tease .et-link { display: flex; justify-content: center; margin: 12px 0 0; }
  .et-tabs { grid-template-columns: 1fr 1fr; }
  .et-tab, .et-tab + .et-tab { padding: 14px 10px 14px 0; }
  .mid-cta { width: 100%; justify-content: center; }
  .logos img { height: 30px; max-width: 110px; }
  .tema-tab { top: auto; bottom: 88px; height: 42px; }
  .p-feats { grid-template-columns: 1fr; }
  .p-feats li, .p-feats li + li { padding: 22px 0 0; border-left: 0; }
  .p-feats li + li { border-top: 1px solid var(--line); margin-top: 22px; }
  .esteira { border-radius: 8px; }
  body { font-size: 16.5px; }
  .top nav { display: none; }
  .row { grid-template-columns: 1fr; padding: 24px 0; gap: 8px; }
  .row .need { grid-column: auto; }
  .flow-steps { grid-template-columns: 1fr; }
  .step { border-right: 0 !important; }
  .pair { grid-template-columns: 1fr; }
  .pair > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .gain { grid-template-columns: 1fr; padding: 24px 0; gap: 8px; }
  .hero .cta .btn { width: 100%; justify-content: center; }
  .final .cta .btn { width: 100%; justify-content: center; }
  .hero-media { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .logos { animation: none; }
  .marquee { flex-wrap: wrap; }
  .logos[aria-hidden] { display: none; }
  .logos { flex-wrap: wrap; justify-content: center; }
  html { scroll-behavior: auto; }
  .btn, .btn .arr { transition: none; }
}

/* Seção etapas: 3 cards verticais */
.ec-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ec { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.ec-ico { position: absolute; top: -70px; left: 22px; width: 148px; height: 148px; filter: drop-shadow(0 18px 22px rgba(0,0,0,.28)); transition: transform .35s ease; pointer-events: none; }
.ec:hover .ec-ico { transform: translateY(-8px) rotate(-4deg) scale(1.04); }
.ec:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 16px 34px -18px var(--brand); }
.ec-tag span { display: inline-block; font: 500 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; color: var(--accent); background: var(--brand-soft); }
.ec h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ec-txt { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.ec-list { list-style: none; padding: 14px 0 0; margin: 4px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.ec-list li { font-size: 14.5px; line-height: 1.5; color: var(--text-3); padding-left: 16px; position: relative; }
.ec-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.ec-list b { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .ec-grid { grid-template-columns: 1fr; } }

.ec-art { height: 190px; margin-bottom: 6px; display: grid; align-items: center; }
.ea svg { fill: currentColor; }
/* Card 1: leitura do edital -> aderente */
.a1 { display: grid; grid-template-columns: 1.05fr 30px 1fr; grid-template-areas: "doc arr rule" "doc . down" "doc . out"; align-items: center; column-gap: 6px; }
.a1-doc { grid-area: doc; } .a1-arr { grid-area: arr; } .a1-rule { grid-area: rule; animation: a1rule 5s infinite; } .a1-out { grid-area: out; }
.a1-down { grid-area: down; justify-self: center; width: 2px; height: 26px; background: var(--line-strong); position: relative; }
.a1-down span { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); opacity: 0; animation: a1down 5s infinite; }
@keyframes a1down { 0%,56% { top: 0; opacity: 0; } 58% { opacity: 1; } 66% { top: calc(100% - 8px); opacity: 1; } 69%,100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes a1rule { 0%,48% { background: transparent; } 52%,58% { background: var(--brand-soft); } 64%,100% { background: transparent; } }
.a1-doc { position: relative; border: 1px solid var(--line-strong); border-radius: 8px; padding: 12px 12px 14px; display: grid; gap: 7px; overflow: hidden; background: var(--bg); }
.a1-hd { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; white-space: nowrap; }
.a1-hd span { width: 13px; height: 16px; border-radius: 3px; background: var(--brand-soft); border: 1px solid var(--brand); flex: none; }
.a1-doc i { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); }
.a1-doc i.w { width: 65%; }
.a1-doc i.hl { animation: a1hl 5s infinite; } .a1-doc i.d2 { animation-delay: .5s; }
@keyframes a1hl { 0%,20% { background: var(--line-strong); } 35%,85% { background: var(--brand); } 100% { background: var(--line-strong); } }
.a1-scan { position: absolute; left: 0; right: 0; height: 26px; top: -30px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 35%, transparent)); border-bottom: 2px solid var(--brand); animation: a1scan 5s infinite cubic-bezier(.5,0,.5,1); }
@keyframes a1scan { 0% { top: -30px; } 45% { top: 100%; } 100% { top: 100%; } }
.a1-arr { height: 2px; background: var(--line-strong); position: relative; }
.a1-arr span { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); opacity: 0; animation: a1arr 5s infinite; }
@keyframes a1arr { 0%,38% { left: 0; opacity: 0; } 41% { opacity: 1; } 50% { left: calc(100% - 8px); opacity: 1; } 53%,100% { opacity: 0; left: calc(100% - 8px); } }
.a1-out { display: grid; gap: 10px; }
.a1-rule { font: 500 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding: 9px 8px; border: 1px dashed var(--brand); border-radius: 8px; text-align: center; }
.a1-ok { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--signal); padding: 9px 8px; border-radius: 8px; border: 1px solid var(--signal); background: color-mix(in srgb, var(--signal) 12%, transparent); opacity: 0; transform: scale(.9); animation: a1ok 5s infinite; }
.a1-ok svg { width: 18px; height: 18px; }
@keyframes a1ok { 0%,66% { opacity: 0; transform: scale(.9); } 71% { opacity: 1; transform: scale(1.06); } 75%,93% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
/* Card 2: exigido x base, certidão pendente com sininho */
.a2 { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto 22px; column-gap: 8px; row-gap: 9px; align-items: center; }
.a2-h { display: contents; font: 500 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.a2-r { display: contents; }
.a2-h span { font: 500 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.a2-h span:nth-child(3) { justify-self: center; }
.a2-st { justify-self: center; }
.a2-n { font-size: 12.5px; color: var(--text); border: 1px solid var(--line-strong); border-radius: 7px; padding: 7px 10px; background: var(--bg); white-space: nowrap; }
.a2-r i { height: 1px; background: var(--line-strong); }
.a2-st { font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; opacity: 0; white-space: nowrap; }
.a2-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.a2-st.ok { color: var(--signal); background: color-mix(in srgb, var(--signal) 13%, transparent); }
.a2-st.no { color: #F04444; background: color-mix(in srgb, #F04444 14%, transparent); }
.a2-bell { width: 20px; height: 20px; color: #F04444; opacity: 0; transform-origin: 50% 10%; animation: a2bell 6s infinite; }
@keyframes a2bell { 0%,39% { opacity: 0; transform: rotate(0); } 41% { opacity: 1; transform: rotate(18deg); } 43% { transform: rotate(-16deg); } 45% { transform: rotate(14deg); } 47% { transform: rotate(-12deg); } 49% { transform: rotate(8deg); } 51% { transform: rotate(-6deg); } 53% { transform: rotate(0); } 62% { transform: rotate(16deg); } 64% { transform: rotate(-14deg); } 66% { transform: rotate(10deg); } 68% { transform: rotate(-6deg); } 70%,90% { opacity: 1; transform: rotate(0); } 96%,100% { opacity: 0; } }
/* Card 3: resultado -> contrato -> empenho -> caixa */
.a3 { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 4px; }
.a3-line { position: absolute; left: 12.5%; right: 12.5%; top: 75px; height: 2px; background: var(--line-strong); }
.a3-run { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 25%, transparent); animation: a3run 6s infinite linear; }
@keyframes a3run { 0% { left: 0; opacity: 0; } 5% { opacity: 1; } 80% { left: calc(100% - 10px); opacity: 1; } 88%,100% { left: calc(100% - 10px); opacity: 0; } }
.a3-n { display: grid; justify-items: center; gap: 10px; position: relative; z-index: 1; }
.a3-ic { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; color: var(--text-3); border: 1px solid var(--line); background: var(--bg); position: relative;  }
.a3-ic svg { width: 30px; height: 30px; }
.a3-res .a3-m { position: absolute; width: 17px; height: 17px; right: 3px; bottom: 3px; background: var(--bg); border-radius: 50%; }
.a3-n b { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg);  }
.a3-n em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
@media (max-width: 900px) { .ec-art { height: auto; min-height: 170px; } }
.a3-n.n1 .a3-ic { animation: a3i1 6s infinite; } .a3-n.n1 b { animation: a3d1 6s infinite; }
@keyframes a3i1 { 0%,4% { color: var(--text-3); border-color: var(--line); background: var(--bg); transform: none; } 7% { color: var(--accent); border-color: var(--brand); background: var(--brand-soft); transform: translateY(-5px) scale(1.1); } 12%,92% { color: var(--accent); border-color: var(--brand); background: var(--brand-soft); transform: none; } 97%,100% { color: var(--text-3); border-color: var(--line); background: var(--bg); } }
@keyframes a3d1 { 0%,4% { border-color: var(--line-strong); background: var(--bg); } 6%,92% { border-color: var(--signal); background: var(--signal); } 97%,100% { border-color: var(--line-strong); background: var(--bg); } }
.a3-n.n2 .a3-ic { animation: a3i2 6s infinite; } .a3-n.n2 b { animation: a3d2 6s infinite; }
@keyframes a3i2 { 0%,29% { color: var(--text-3); border-color: var(--line); background: var(--bg); transform: none; } 32% { color: var(--accent); border-color: var(--brand); background: var(--brand-soft); transform: translateY(-5px) scale(1.1); } 37%,92% { color: var(--accent); border-color: var(--brand); background: var(--brand-soft); transform: none; } 97%,100% { color: var(--text-3); border-color: var(--line); background: var(--bg); } }
@keyframes a3d2 { 0%,29% { border-color: var(--line-strong); background: var(--bg); } 31%,92% { border-color: var(--signal); background: var(--signal); } 97%,100% { border-color: var(--line-strong); background: var(--bg); } }
.a3-n.n3 .a3-ic { animation: a3i3 6s infinite; } .a3-n.n3 b { animation: a3d3 6s infinite; }
@keyframes a3i3 { 0%,54% { color: var(--text-3); border-color: var(--line); background: var(--bg); transform: none; } 57% { color: var(--accent); border-color: var(--brand); background: var(--brand-soft); transform: translateY(-5px) scale(1.1); } 62%,92% { color: var(--accent); border-color: var(--brand); background: var(--brand-soft); transform: none; } 97%,100% { color: var(--text-3); border-color: var(--line); background: var(--bg); } }
@keyframes a3d3 { 0%,54% { border-color: var(--line-strong); background: var(--bg); } 56%,92% { border-color: var(--signal); background: var(--signal); } 97%,100% { border-color: var(--line-strong); background: var(--bg); } }
.a3-n.n4 .a3-ic { animation: a3i4 6s infinite; } .a3-n.n4 b { animation: a3d4 6s infinite; }
@keyframes a3i4 { 0%,79% { color: var(--text-3); border-color: var(--line); background: var(--bg); transform: none; } 82% { color: var(--accent); border-color: var(--brand); background: var(--brand-soft); transform: translateY(-5px) scale(1.1); } 87%,92% { color: var(--accent); border-color: var(--brand); background: var(--brand-soft); transform: none; } 97%,100% { color: var(--text-3); border-color: var(--line); background: var(--bg); } }
@keyframes a3d4 { 0%,79% { border-color: var(--line-strong); background: var(--bg); } 81%,92% { border-color: var(--signal); background: var(--signal); } 97%,100% { border-color: var(--line-strong); background: var(--bg); } }
.a2-r.r1 .a2-st { animation: a2s1 6s infinite; }
@keyframes a2s1 { 0%,10% { opacity: 0; transform: translateX(-6px); } 15%,90% { opacity: 1; transform: none; } 96%,100% { opacity: 0; } }
.a2-r.r2 .a2-st { animation: a2s2 6s infinite; }
@keyframes a2s2 { 0%,22% { opacity: 0; transform: translateX(-6px); } 27%,90% { opacity: 1; transform: none; } 96%,100% { opacity: 0; } }
.a2-r.r3 .a2-st { animation: a2s3 6s infinite; }
@keyframes a2s3 { 0%,34% { opacity: 0; transform: translateX(-6px); } 39%,90% { opacity: 1; transform: none; } 96%,100% { opacity: 0; } }

/* Alinhamento horizontal das partes dos 3 cards (computador) */
@media (min-width: 901px) {
  .ec-grid { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .ec { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 0; }
  .ec > * + * { margin-top: 12px; }
  .ec > .ec-txt { align-self: start; }
  .ec > .ec-list { align-self: start; }
}

/* Seção "Personalizado": desenho técnico guiado pela rolagem */
:root{--rg-line:#5267FF;--rg-guide:rgba(82,103,255,.28);--rg-grid:rgba(82,103,255,.07);--rg-ruler:rgba(160,200,255,.38);--rg-ruler-b:rgba(70,110,200,.45);--rg-tick:rgba(20,40,90,.75);--rg-top:#3A4BE0}
:root[data-theme="dark"]{--rg-line:#8f9cff;--rg-guide:rgba(143,156,255,.30);--rg-grid:rgba(143,156,255,.06);--rg-ruler:rgba(120,160,255,.20);--rg-ruler-b:rgba(150,180,255,.45);--rg-tick:rgba(210,222,255,.8);--rg-top:#C9D0FF}
.rg-sec{padding-top:0}
.rg{height:300vh;position:relative}                      /* pista de ~2 telas no computador */
.rg .stage{position:sticky;top:0;height:100vh;overflow:hidden}
.rg .stage svg{position:absolute;inset:0;width:100%;height:100%}
.rg-lbl{font:500 13px var(--f-mono);letter-spacing:.06em;fill:var(--rg-line);text-transform:uppercase}
.rg-top{font-size:17px;font-weight:600;letter-spacing:.03em;fill:var(--rg-top)}
.rg-num{font-family:var(--f-mono);font-weight:500;fill:var(--rg-tick)}
.rg-hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);transition:opacity .3s}
.rg-copy{position:relative;z-index:2;margin:calc(-54vh + 24px) auto clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}   /* sobe para logo abaixo do desenho */
.rg-text{text-align:left;max-width:62ch;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}   /* título no topo do 1º card, último parágrafo no fim do 4º */
.rg-text h2{margin:0}
.rg-text p+p{margin-top:0}
.rg-text .ig{color:var(--brand);font-weight:600}
.rg-cards.p-feats{margin:0;border:0;display:grid;grid-template-columns:1fr;gap:12px}
.rg-cards.p-feats li,.rg-cards.p-feats li+li{padding:16px 20px 18px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:12px;background:var(--bg);transition:transform .25s ease,border-color .25s ease,background-color .25s ease}
.rg-cards.p-feats li:hover{transform:translateX(-4px);border-color:var(--brand);background:var(--brand-soft)}
.rg-cards.p-feats li::before{margin-bottom:8px}
.rg-cards.p-feats li:nth-child(n){margin-top:0;padding:16px 20px 18px;border:1px solid var(--line)}
.rg-cards.p-feats li:hover{border-color:var(--brand)}
.rg-copy .rg-cards p{margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--text-3);max-width:46ch}
.rg-copy .rg-cards p+p{margin-top:0}
.rg-cards h3{font-size:1rem}
@media (max-width:900px){.rg-copy{grid-template-columns:1fr}.rg-text{display:block}.rg-text h2{margin:0 0 .8em}.rg-text p+p{margin-top:1em}}
.rg-copy h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--text);margin:0 0 .8em;text-wrap:balance}
.rg-text p{color:var(--text-2);font-size:clamp(16px,1.3vw,18px);line-height:1.65;margin:0}
.rg-text p+p{margin-top:1em}
.rg-copy strong{color:var(--text);font-weight:600}
.rg-copy.rg-in-ready{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rg-copy.rg-in-ready.rg-in{opacity:1;transform:none}

@media (max-width:700px){
  .rg{height:250vh}                                           /* pista de ~1,5 tela no celular */
  .rg-top{font-size:11px;letter-spacing:.02em}
}
/* "Reduzir movimento" ativado: seção completa e parada, sem tela fixa */
.rg-static .rg{height:auto}
.rg-static .rg .stage{position:relative;height:min(80vh,640px)}
.rg-static .rg-hint{display:none}
.rg-static .rg-copy{margin-top:24px}

/* ---------- Seção final: formulário de demonstração ---------- */
.fn-head { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.fn-pill { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--brand-soft); border: 1px solid rgba(82,103,255,.3); font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.final h2.fn-h { font-weight: 800; letter-spacing: -.03em; max-width: 18ch; margin: 0; text-wrap: balance; }
.fn-h em { font-style: italic; font-weight: 500; }
.final .fn-head .lead { margin: 0; max-width: 56ch; }
.final .ig { color: var(--brand); font-weight: 600; white-space: nowrap; }
.fn-steps { list-style: none; padding: 0; margin: clamp(48px, 6vw, 72px) auto 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.fn-steps::before { content: ""; position: absolute; top: 22px; left: calc(16.66% + 30px); right: calc(16.66% + 30px); height: 1px; background: repeating-linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 12px); }
.fn-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; position: relative; }
.fn-steps .n { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--bg); font: 500 14px var(--f-mono); color: var(--accent); transition: border-color .2s, background .2s; }
.fn-steps li:hover .n { border-color: var(--brand); background: var(--brand-soft); }
.fn-steps b { display: block; font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--text); }
.fn-steps span { color: var(--text-3); font-size: 15px; }

.fn-form { text-align: left; width: 100%; max-width: 820px; margin: clamp(36px, 5vw, 56px) auto 0; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.fn-form .fh { grid-column: 1 / -1; }
.fn-form .fh h3 { margin: 0; font-size: 18px; font-weight: 700; }
.fn-form .fh p { margin: 2px 0 0; color: var(--text-3); font-size: 14.5px; }
.fn-form .dots { grid-column: 1 / -1; height: 4px; background-image: radial-gradient(circle, var(--line-strong) .9px, transparent .9px); background-size: 6px 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.fn-form .f { display: grid; gap: 7px; min-width: 0; }
.fn-form .f.full { grid-column: 1 / -1; }
.fn-form label, .fn-form .lbl { font-size: 14px; font-weight: 500; color: var(--text-2); }
.fn-form input:not([type="radio"]) { width: 100%; font: 400 15px var(--f-sans); color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px; padding: 12px 13px; transition: border-color .2s, box-shadow .2s; }
.fn-form input::placeholder { color: var(--text-3); }
.fn-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.fn-form .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fn-form .chips label { display: flex; cursor: pointer; position: relative; }
.fn-form .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fn-form .chips span { flex: 1; text-align: center; font: 500 14px var(--f-sans); padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-2); background: var(--bg); transition: all .2s; }
.fn-form .chips input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--text); }
.fn-form .chips input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-soft); }
.fn-form .err { color: var(--warn); font-size: 13px; display: none; }
.fn-form .f.bad .err { display: block; }
.fn-form .f.bad input:not([type="radio"]), .fn-form .f.bad .chips span { border-color: var(--warn); }
.fn-btn { grid-column: 1 / -1; justify-content: center; min-height: 52px; font-size: 16px; font-weight: 600; border-radius: 8px; }
.fn-btn:disabled { opacity: .6; cursor: wait; }
.fn-form .legal { grid-column: 1 / -1; margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--text-3); }
.fn-form .legal a { color: var(--accent); }
.fn-form .ok { grid-column: 1 / -1; text-align: center; padding: 48px 10px; }
.fn-form .ok .ck { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; margin: 0 auto 18px; }
.fn-form .ok h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.fn-form .ok p { margin: 0; color: var(--text-2); }
@media (max-width: 760px) {
  .fn-steps { grid-template-columns: 1fr; gap: 18px; max-width: 420px; }
  .fn-steps::before { display: none; }
  .fn-steps li { flex-direction: row; text-align: left; }
}
@media (max-width: 560px) {
  .fn-form { grid-template-columns: 1fr; }
  .fn-form .chips { grid-template-columns: 1fr 1fr; }
}

/* ---------- Gi: apresentação na seção da IA ---------- */

/* ---------- Seção da IA: a Gi levitando, ligada às etapas ---------- */
.gi-stage { position: relative; max-width: 1060px; margin: clamp(32px, 4vw, 56px) auto 0; display: grid; grid-template-columns: 1fr 380px 1fr; gap: 16px; align-items: center; }
.gi-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; z-index: 2; }
.gi-chip { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease, border-color .2s; }
.gi-chip.in { opacity: 1; transform: none; }
.gi-chip:hover { border-color: var(--brand); }
.gi-chip h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.gi-chip h3 i { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.gi-chip p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-3); line-height: 1.45; }
.gi-col--l .gi-chip { text-align: right; }
.gi-col--l .gi-chip h3 { justify-content: flex-end; }
.gi-center { position: relative; z-index: 1; text-align: center; padding-bottom: 34px; }
.gi-center::before { content: ""; position: absolute; left: 50%; top: 44%; width: 440px; height: 440px; max-width: 120%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(82,103,255,.30), rgba(82,103,255,.08) 45%, transparent 70%); z-index: -1; animation: gi-glow 4.8s ease-in-out infinite; }
@keyframes gi-glow { 50% { transform: translate(-50%, -50%) scale(1.06); opacity: .8; } }
.gi-lift { position: relative; width: min(360px, 100%); margin: 0 auto; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.gi-center:hover .gi-lift { transform: translateY(-34px); }
.gi-float { position: relative; animation: gi-float 4.8s ease-in-out infinite; }
@keyframes gi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.gi-float img { display: block; width: 100%; height: auto; }
.gi-base { filter: drop-shadow(0 10px 22px rgba(11,13,18,.16)); }
:root[data-theme="dark"] .gi-base { filter: drop-shadow(0 0 26px rgba(154,167,255,.30)); }
.gi-wink { position: absolute; left: 37.54%; top: 12.89%; width: 14.58% !important; opacity: 0; animation: gi-wink 5s infinite; }
@keyframes gi-wink { 0%, 62%, 70%, 100% { opacity: 0; } 63%, 69% { opacity: 1; } }
.gi-shadow { width: 52%; height: 16px; margin: 4px auto 0; transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .7s; }
.gi-shadow i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,13,18,.22), transparent); animation: gi-shadow 4.8s ease-in-out infinite; }
:root[data-theme="dark"] .gi-shadow i { background: radial-gradient(closest-side, rgba(82,103,255,.35), transparent); }
@keyframes gi-shadow { 50% { transform: scaleX(.78); opacity: .55; } }
.gi-center:hover .gi-shadow { transform: scaleX(.6); opacity: .45; }
.gi-name { display: inline-block; margin-top: -6px; font: 700 15px var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--accent); background: var(--bg); border: 1px solid var(--line); padding: 3px 12px; border-radius: 999px; }
.gi-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.gi-links path { fill: none; stroke: var(--brand); stroke-width: 1; opacity: .26; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.1s ease; }
:root[data-theme="dark"] .gi-links path { opacity: .32; }
.gi-links path.in { stroke-dashoffset: 0; }
.gi-social { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; font-size: 15.5px; color: var(--text-2); }
.gi-social a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px; transition: border-color .2s, background .2s, color .2s; }
.gi-social a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--accent); }
.gi-social svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 860px) {
  .gi-stage { grid-template-columns: 1fr; max-width: 520px; }
  .gi-center { order: -1; }
  .gi-lift { width: min(300px, 86%); }
  .gi-col--l .gi-chip { text-align: left; }
  .gi-col--l .gi-chip h3 { justify-content: flex-start; }
  .gi-links { display: none; }
}

/* CTA logo após a demonstração do sistema: botão igual aos demais */
.pos-cta { margin-top: 20px; display: flex; justify-content: center; }
@media (max-width: 560px) { .pos-cta .btn { width: 100%; justify-content: center; } }

/* ---------- CTA das etapas: botão com a Gi deitada em cima ---------- */
.gi-cta { position: relative; max-width: 980px; margin: clamp(136px, 13vw, 180px) auto 0; }
.gi-cta-img { position: absolute; right: 50%; transform: translateX(50%); bottom: calc(100% - 10px); width: clamp(240px, 32vw, 360px); height: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 8px 12px rgba(11,13,18,.18)); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.gi-cta-btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 26px 32px; border-radius: 14px; background: var(--brand); color: #fff; text-decoration: none; text-align: center; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.4; box-shadow: 0 14px 34px -14px rgba(82,103,255,.65); transition: background .2s, transform .2s, box-shadow .2s; }
.gi-cta-btn > span { color: rgba(255,255,255,.88); }
.gi-cta-btn b { font-weight: 700; }
.gi-cta-btn .arr { display: inline-block; transition: transform .2s; }
.gi-cta-btn:hover { background: var(--brand-hover); transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(82,103,255,.75); }
.gi-cta-btn:hover .arr { transform: translateX(4px); }
.gi-cta:hover .gi-cta-img { transform: translateX(50%) translateY(-4px); }
@media (max-width: 640px) {
  .gi-cta { margin-top: 92px; }
  .gi-cta-img { right: 50%; transform: translateX(50%); width: 210px; }
  .gi-cta:hover .gi-cta-img { transform: translateX(50%) translateY(-4px); }
  .gi-cta-btn { padding: 26px 20px 20px; }
}

/* Âncoras do menu param logo abaixo do cabeçalho fixo; campo-armadilha anti-spam escondido */
html { scroll-padding-top: 76px; }
.fn-form .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Menos espaço entre o botão da Gi (fim das etapas) e a animação do PERSONALIZADO */
#etapas { padding-bottom: clamp(32px, 4vw, 48px); }
footer .f-pol { margin: 0; font-size: 13px; }
footer .f-pol a { color: var(--text-3); }
footer .f-pol a:hover { color: var(--accent); }

/* ---------- Fontes hospedadas no próprio site (antes vinham do Google Fonts) ---------- */
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Rodapé: linha legal discreta ocupando a largura toda */
footer .f-legal { flex: 1 1 100%; margin: 4px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font: 400 12px var(--f-mono); letter-spacing: .02em; color: var(--text-3); }
.f-sol > span, footer .f-legal > span { white-space: nowrap; }
footer .f-legal { text-align: center; }

/* ---------- Rodapé em três colunas: i-Ganhei · StartGi · redes ---------- */
footer .f-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
footer .f-col { display: grid; gap: 8px; }
footer .f-col--l { justify-items: start; }
footer .f-col--c { justify-items: center; text-align: center; }
footer .f-col--r { justify-items: end; }
footer .f-col img { display: block; width: auto; }
footer .f-col--l img { height: 28px; }
footer .f-col--c img { height: 32px; }
footer .f-cap { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
footer .f-bottom { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; display: grid; gap: 6px; justify-items: center; text-align: center; }
footer .f-bottom .f-legal { flex: none; border: 0; padding: 0; margin: 0; }
footer .f-links { margin: 0; font-size: 11px; color: var(--text-3); }
footer .f-links a { color: var(--text-3); text-decoration: none; }
footer .f-links a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 640px) {
  footer .f-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  footer .f-col--l, footer .f-col--r { justify-items: center; }
}