/* ===== Databanx — Corporate Tech Premium ===== */

/* troca de idioma por bloco (vale para todas as páginas) */
html[lang="en"] [data-lang-block="pt"] { display: none; }
html[lang="pt-BR"] [data-lang-block="en"] { display: none; }

:root {
  --bg-l: 0;                /* tweak: tom do fundo (0 = preto 100%) */
  --glow: 0.25;             /* tweak: intensidade dos glows */
  --bg: oklch(var(--bg-l) 0 0);
  --bg-deep: oklch(calc(var(--bg-l) - 0.02) 0 0);
  --surface: oklch(calc(var(--bg-l) + 0.032) 0 0);
  --surface-2: oklch(calc(var(--bg-l) + 0.055) 0 0);
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --text: #f2f2f4;
  --muted: rgba(232, 232, 238, 0.64);
  --faint: rgba(232, 232, 238, 0.42);

  /* superfícies de vidro e linhas (tokenizadas p/ tema light por seção) */
  --line-strong: rgba(255, 255, 255, 0.22);
  --glass: rgba(255, 255, 255, 0.035);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --glass-faint: rgba(255, 255, 255, 0.025);
  --grad-top: rgba(255, 255, 255, 0.035);
  --grad-bottom: rgba(255, 255, 255, 0.012);
  --tick: rgba(255, 255, 255, 0.25);
  --ink-invert: #f2f2f4;
  --mix-fg: #fff;                        /* alvo do color-mix p/ clarear texto sobre dark */
  --arrow: rgba(255, 255, 255, 0.5);     /* seta do <select> */
  --cta-grad-bottom: oklch(calc(var(--bg-l) + 0.015) 0 0); /* stop inferior do painel CTA */
  --nav-bg: oklch(calc(var(--bg-l) - 0.01) 0 0 / 0.78);    /* fundo do nav fixo/solid */

  --c-mail: #D61334;     /* localmail — vermelho */
  --c-mob: #FEC42B;      /* localmob — amarelo/ouro */
  --c-med: #3F7E85;      /* localmed — teal */
  --c-erp: #2D82AD;      /* conectdata — azul */
  --c-imobox: #2C8E5B;  /* imobox — verde */
  --c-alfa: #A41034;     /* alfabanx — carmim */
  --c-hub: #7100BD;    /* banxhub — roxo */
  --c-custom: #FBAA1A;  /* banxlab — âmbar */

  --c-studio: #E22D7B;   /* banxstudio — rosa vibrante */
  --c-studio-2: #E22D7B; /* banxstudio — rosa vibrante (mono) */
  --c-host: #137FBF;   /* banxhost — azul */
  --c-host-2: #137FBF; /* banxhost — azul (mono) */

  --accent: oklch(0.74 0.135 240);   /* destaque do hero — azul tech */

  --font-display: "Onest", sans-serif;
  --font-body: "Onest", sans-serif;
  --font-brand: "Comfortaa", sans-serif; /* só para wordmarks provisórios dos produtos */
}

/* ===== Tema claro escopado por seção ===== */
.section--light {
  --bg: #fff;
  --bg-deep: #fff;
  --surface: #fff;
  --surface-2: #f7f7f8;
  --text: #13151a;
  --muted: rgba(20, 20, 26, 0.62);
  --faint: rgba(20, 20, 26, 0.42);
  --line: rgba(20, 20, 26, 0.10);
  --line-soft: rgba(20, 20, 26, 0.08);
  --line-strong: rgba(20, 20, 26, 0.18);
  --glass: rgba(20, 20, 26, 0.04);
  --glass-hover: rgba(20, 20, 26, 0.06);
  --glass-faint: rgba(20, 20, 26, 0.03);
  --grad-top: rgba(20, 20, 26, 0.04);
  --grad-bottom: rgba(20, 20, 26, 0.012);
  --tick: rgba(20, 20, 26, 0.22);
  --ink-invert: #13151a;
  --mix-fg: #13151a;                  /* no claro, color-mix escurece o texto */
  --arrow: rgba(20, 20, 26, 0.5);
  --cta-grad-bottom: #f4f4f6;
  --nav-bg: rgba(255, 255, 255, 0.82);

  /* cores de produto sobre branco: menos lightness, mais croma (senão lavam) */
  --c-mail: #D61334;
  --c-mob: #FEC42B;
  --c-med: #3F7E85;
  --c-erp: #2D82AD;
  --c-imobox: #2C8E5B;
  --c-alfa: #A41034;
  --c-hub: #7100BD;
  --c-custom: #FBAA1A;
  --c-studio: #E22D7B;
  --c-studio-2: #E22D7B;
  --c-host: #137FBF;
  --c-host-2: #137FBF;

  background: var(--bg);
  color: var(--text);
  position: relative;
}

/* transição: o bloco branco "sobe" do dark como papel — fio + sombra no topo */
.section--light::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(20, 20, 26, 0.10);
}
.section--light + .section:not(.section--light),
.section:not(.section--light) + .section--light {
  box-shadow: 0 -1px 24px rgba(0, 0, 0, 0.18);
}

/* botão primário invertido dentro do claro */
.section--light .btn-primary { background: #13151a; color: #f2f2f4; }
.section--light .btn-primary:hover { background: #000; }

/* cards ganham leve elevação no claro (senão "flutuam" sem moldura) */
.section--light .product-card,
.section--light .unit-card,
.section--light .feature-card,
.section--light .svc-card,
.section--light .plan-card,
.section--light .side-card,
.section--light .shot-frame,
.section--light .form-card {
  box-shadow: 0 1px 2px rgba(20, 20, 26, 0.04), 0 10px 28px rgba(20, 20, 26, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; overscroll-behavior-y: none; scrollbar-width: none; -ms-overflow-style: none; }
body { overflow-x: clip; max-width: 100%; overscroll-behavior-y: none; }
/* esconde a barra de rolagem (a rolagem continua funcionando normalmente) */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
img, svg, video { max-width: 100%; }
.nav-logo img, .hero-bg .x-mark { max-width: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(14px, 0.586vw, 15px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }

/* 2560 é a referência: o conteúdo enche a tela até 2560 e, acima disso
   (ultrawide), centraliza mantendo a mesma composição do 2560 */
.container { max-width: 2560px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 72px); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: clamp(14px, 0.586vw, 15px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--tick); }
/* eyebrow menor nos heros de produto (ex.: "Creative Studio da Databanx",
   "Unidade da Databanx", "A infraestrutura digital da Databanx" etc.) */
.unit-hero .eyebrow { font-size: clamp(11px, 0.508vw, 13px); }

.section-head { display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin-bottom: clamp(40px, 2.5vw, 64px); }
.section-head h2 { font-size: clamp(28px, 1.56vw, 40px); line-height: 1.2; }
.section-head p { color: var(--muted); font-size: clamp(14px, 0.586vw, 15px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: clamp(14px, 0.586vw, 15px);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.btn-primary { background: #f2f2f4; color: #13151a; }
.btn-primary:hover { background: var(--ink-invert); filter: brightness(1.06); transform: translateY(-1px); }
.btn-ghost {
  background: var(--glass);
  border-color: var(--line);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--line-strong); background: var(--glass-hover); }
.btn svg { flex: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.nav.scrolled, .nav.solid {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line-soft);
}
/* internas: nav NÃO-fixo — rola junto com a página, transparente sobre o hero
   escuro (elementos claros). Some ao rolar, sem barra de fundo. */
.nav--invert { position: absolute; }
.nav-inner {
  max-width: none;
  padding-left: clamp(16px, 2vw, 36px);
  padding-right: clamp(16px, 2vw, 36px);
  display: flex;
  align-items: center;
  gap: 22px;
  height: 76px;
}
.nav-logo { margin-top: 26px; position: relative; }
.nav-logo img { height: clamp(26px, 1.33vw, 34px); width: auto; }
/* selo ™ removido (mantido o estilo caso queira reativar com display: block) */
.nav-logo::after {
  content: "™";
  display: none;
  position: absolute;
  top: -2px; right: clamp(-28px, -1.094vw, -21px);
  font-size: clamp(17px, 0.86vw, 22px); font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1;
  pointer-events: none;
}
.tm-wrap { position: relative; display: inline-flex; align-self: flex-start; width: fit-content; }
.tm-wrap::after {
  content: "™";
  display: none;
  position: absolute;
  top: -2px; right: clamp(-30px, -1.172vw, -23px);
  font-size: clamp(18px, 0.938vw, 24px); font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1;
  pointer-events: none;
}
.nav-links { display: none; align-items: center; gap: 16px; margin-left: 16px; }
.nav-links a {
  font-size: clamp(14px, 0.586vw, 15px);
  font-weight: 400;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-right::after {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin-top: 12px;
  flex: none;
  border-radius: 50%;
  background-color: var(--ink-invert);
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2317171b' stroke-width='2' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,0.5);
}
.nav-right.has-burger::after,
.nav-right:has(.nav-burger)::after {
  display: none;
}
.nav-units {
  display: flex; align-items: center; gap: 28px;
  margin-top: 12px;
  padding-right: 18px;
  border-right: 1px solid var(--line-soft);
}
.nav-units a { display: inline-flex; align-items: center; opacity: 0.88; transition: opacity 0.35s ease; }
.nav-units a:hover { opacity: 1; }
/* logos de serviço brancos por padrão; cor da marca ao passar o mouse */
.nav-units img { height: clamp(16px, 0.82vw, 21px); width: auto; display: block; filter: brightness(0) invert(1); }
.nav-units a:hover img { filter: none; }
.nav-units a[aria-current="page"] { opacity: 1; }
.nav-units a[aria-current="page"] img { filter: none; }
.nav-right .lang-toggle { margin-top: 12px; }
.nav-right .btn { display: none; }

.lang-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--glass);
}
.lang-toggle button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: clamp(14px, 0.586vw, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: clamp(5px, 0.273vw, 7px) clamp(9px, 0.469vw, 12px);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.lang-toggle button.active { background: var(--glass-hover); color: var(--text); }

.nav .btn { height: 42px; padding: 0 16px; font-size: clamp(14px, 0.586vw, 15px); border-radius: 10px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* altura estável: o hero não "cresce" quando a barra do Safari recolhe ao rolar
                           (a faixa preta antiga não volta — agora há seções roláveis logo abaixo) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 90px 0 28px;
  background: var(--bg-deep);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg .x-mark {
  position: absolute;
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  width: min(62vw, 980px);
  opacity: calc(0.05 + var(--glow) * 0.03);
  -webkit-mask-image: radial-gradient(closest-side, black 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, black 30%, transparent 100%);
}
.hero-bg .glow {
  position: absolute;
  left: 50%; bottom: -45%;
  width: 1400px; height: 800px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(19, 21, 26, calc(var(--glow) * 0.9)) 0%,
    transparent 62%);
}
.hero-bg .hairlines {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 25% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 35%, black 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 35%, black 70%, transparent);
  opacity: 0.5;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 800px;
  padding: 0 0 0 clamp(8px, 3.5vw, 64px);
}
/* conteúdo do hero ocupa o espaço disponível e fica centralizado verticalmente;
   ecossistema e rodapé vêm logo abaixo, no fluxo (sem position:absolute) — evita
   sobreposição em telas baixas e mantém o mesmo layout em todas as resoluções */
.hero-inner { position: relative; z-index: 3; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

.hero-ecosystem {
  position: relative;
  z-index: 3;
  margin-top: 48px;
  padding: 0 clamp(20px, 4vw, 72px);
  /* respiro entre o rótulo "Nosso ecossistema" e os logos (ancorado no 2560) */
  display: flex; flex-direction: column; gap: clamp(24px, 1.5vw, 38px);
}
.hero-ecosystem .eco-label {
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint);
  display: flex; align-items: center; gap: 12px;
}
.hero-ecosystem .eco-label::before { content: ""; width: 26px; height: 1px; background: var(--tick); }
.eco-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 44px; }
.eco-logos a {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--muted);
  transition: color 0.4s ease;
}
.eco-logos a:hover { color: var(--pc, var(--text)); }
.eco-logos a.has-logo { display: flex; align-items: center; }
/* logos brancos por padrão; cor da marca ao passar o mouse */
.eco-logos a.has-logo img {
  /* escala proporcional à largura: ~44px em telas grandes (2560), reduzindo nas
     menores para não ficarem desproporcionais */
  height: clamp(24px, 1.72vw, 44px); width: auto; display: block;
  filter: brightness(0) invert(1);
  opacity: 0.88;
  transition: opacity 0.35s ease;
}
.eco-logos a.has-logo:hover img { filter: none; opacity: 1; }
/* rótulos "Produtos/Serviços" e a faixa de serviços: só no mobile.
   No desktop os serviços ficam no nav-units (que some em ≤900px); então
   aqui eles reaparecem no hero exatamente a partir desse mesmo ponto. */
/* especificidade .hero-ecosystem ... pra vencer a regra base do .eco-label (linha ~384) */
.hero-ecosystem .eco-label--mobile { display: none; }
.eco-logos--svc { display: none; }
@media (max-width: 900px) {
  .hero-ecosystem .eco-label--mobile { display: flex; }
  .eco-logos--svc { display: flex; }
}
.hero-legal {
  position: relative;
  z-index: 3;
  margin-top: 26px;
  padding: 0 clamp(20px, 4vw, 72px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 22px;
  font-size: clamp(14px, 0.586vw, 15px); color: var(--faint);
}
.hero-legal .legal-links { display: flex; gap: 22px; }
.hero-legal a { color: var(--faint); transition: color 0.18s ease; }
.hero-legal a:hover { color: var(--text); }
@media (max-width: 760px) {
  /* hero empilha em coluna; no mobile a home cabe em uma ÚNICA tela (sem scroll):
     escala reduzida e ecossistema em linha (wrap) em vez de coluna alta */
  .hero { flex-direction: column; align-items: stretch; justify-content: center; }
  /* nav da home rola junto e some (igual às internas), em vez de fixo no topo */
  .nav:not(.nav--invert) { position: absolute; }
  /* no mobile, a home esconde o eyebrow e as badges (só na home: #hero) */
  #hero .eyebrow,
  #hero .hero-badges { display: none; }
  .hero-content { gap: clamp(12px, 3.4vw, 20px); }
  .hero-ecosystem { position: static; margin-top: clamp(18px, 5vw, 32px); padding: 0 20px; gap: clamp(12px, 3vw, 20px); }
  .hero-legal { position: static; margin-top: clamp(26px, 7.5vw, 40px); padding: 0 20px; font-size: clamp(9px, 2.5vw, 11px); gap: 4px 16px; }
  #hero .hero-legal .legal-links { font-size: clamp(9px, 2.5vw, 11px); gap: 14px; }
  .hero-inner { display: flex; flex-direction: column; }
  /* logos em grade de 3 colunas alinhadas (produtos 3+3, serviços 3+1) */
  .eco-logos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; justify-items: start; align-items: center; gap: clamp(12px, 3.2vw, 18px) clamp(16px, 5vw, 30px); }
  .eco-logos a.has-logo img { height: clamp(15px, 4.3vw, 20px); }
  /* respiro extra: separa os produtos do título "Serviços" */
  .eco-label--svc { margin-top: clamp(10px, 3vw, 18px); }
  .eyebrow { font-size: 12px; letter-spacing: 0.16em; }
  .hero-ecosystem .eco-label { font-size: 10px; letter-spacing: 0.14em; }
  /* no mobile, desloca o rosto das fotos do hero para a esquerda, mas sem
     escondê-lo atrás do texto: mantém nariz inteiro e parte do olho na área
     aberta (inclui os heros internos por causa da especificidade dos seletores) */
  .hero-photo,
  .page-header .hero-photo,
  .unit-hero .hero-photo { object-position: 64% 38%; }
}

.mini-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 28px;
  padding: 22px clamp(20px, 4vw, 72px);
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
  font-size: clamp(14px, 0.586vw, 15px); color: var(--faint);
}
.mini-footer-links { display: flex; gap: 24px; }
.mini-footer-links a { color: var(--faint); transition: color 0.18s ease; }
.mini-footer-links a:hover { color: var(--text); }
.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg, rgba(8,8,11,0.95) 0%, rgba(8,8,11,0.82) 24%, rgba(8,8,11,0.48) 50%, rgba(8,8,11,0.16) 76%, rgba(8,8,11,0) 100%),
    linear-gradient(180deg, rgba(8,8,11,0.62) 0%, transparent 24%, transparent 56%, var(--bg-deep) 100%);
  pointer-events: none;
}
.hero-floats { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero-floats > * { pointer-events: auto; }

/* ---- foto full-bleed à direita ---- */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* sujeito sempre centralizado nas fotos do hero: 50% mantém o rosto no eixo
     horizontal quando a tela é estreita (corte lateral); 38% preserva o rosto
     no corte vertical das telas largas/baixas */
  object-position: 50% 38%;
}

/* ---- foto aleatória de fundo nos heros internos (page-header e unit-hero) ---- */
.page-header { position: relative; overflow: hidden; }
.page-header .hero-photo,
.unit-hero .hero-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
}
.page-header .hero-scrim,
.unit-hero .hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,11,0.97) 0%, rgba(8,8,11,0.88) 28%, rgba(8,8,11,0.58) 54%, rgba(8,8,11,0.24) 80%, rgba(8,8,11,0.06) 100%),
    linear-gradient(180deg, rgba(8,8,11,0.5) 0%, transparent 32%, transparent 52%, var(--bg-deep) 100%);
  pointer-events: none;
}
.page-header .container,
.unit-hero .container { position: relative; z-index: 2; }
/* o conteúdo branco "sobe" sobre o hero, com cantos de cima arredondados */
.page-header + .section--light,
.page-header + .page-body,
.unit-hero + .section--light:not(.footer) {
  position: relative;
  z-index: 3;
  margin-top: -54px;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -12px 36px rgba(8, 8, 11, 0.30);
}
.page-header + .section--light::before,
.page-header + .page-body::before,
.unit-hero + .section--light:not(.footer)::before { display: none; }
.hero-photo-glow {
  position: absolute;
  top: 6%; right: 2%;
  width: 72%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--c-erp) 55%, transparent), transparent 70%);
  filter: blur(46px);
  opacity: 0.5;
  z-index: -1;
}

/* ---- pontos decorativos ---- */
.deco { position: absolute; z-index: 2; border-radius: 50%; }
.deco-dot { box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.dot-blue { width: 16px; height: 16px; right: 40%; top: 28%; background: var(--c-erp); }
.dot-pink { width: 11px; height: 11px; right: 46%; top: 66%; background: var(--c-studio); }
.dot-sm   { width: 7px;  height: 7px;  right: 34%; top: 13%; background: var(--text); opacity: 0.7; }
.deco-ring { width: 58px; height: 58px; right: 38%; bottom: 18%; border: 2px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .deco-dot { animation: floaty 6s ease-in-out infinite; }
  .dot-pink { animation-delay: -2s; }
  .dot-sm { animation-delay: -4s; }
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---- chips de vidro flutuantes ---- */
.float-chip {
  position: absolute; z-index: 4; pointer-events: auto;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px 11px 11px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--surface-2) 84%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,0.75);
}
.float-chip .chip-txt { display: flex; flex-direction: column; line-height: 1.12; }
.float-chip strong { font-family: var(--font-display); font-size: clamp(14px, 0.742vw, 19px); font-weight: 700; letter-spacing: -0.02em; }
.float-chip small { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); font-weight: 500; }
.chip-ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in oklab, var(--c-erp) 24%, transparent);
  color: oklch(0.84 0.1 240);
}
.chip-pulse {
  width: 10px; height: 10px; flex: none; margin: 0 2px 0 6px; border-radius: 50%;
  background: oklch(0.7 0.16 150);
  box-shadow: 0 0 0 0 oklch(0.7 0.16 150 / 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .chip-pulse { animation: pulse 2s ease-out infinite; }
  .float-chip { animation: floaty 7s ease-in-out infinite; }
  .chip-b { animation-delay: -3.5s; }
}
@keyframes pulse { 100% { box-shadow: 0 0 0 11px oklch(0.7 0.16 150 / 0); } }
.chip-a { top: 23%; right: 29%; }
.chip-b { bottom: 19%; right: 33%; }

/* ---- selo giratório "explorar" ---- */
.spin-badge {
  position: absolute; z-index: 4; pointer-events: auto;
  right: 6%; bottom: 10%;
  width: 92px; height: 92px;
  display: grid; place-items: center;
}
.spin-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--muted);
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .spin-svg { animation: spin 18s linear infinite; transform-origin: 50% 50%; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin-core {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text); color: #13151a;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.7);
  transition: transform 0.25s ease;
}
.spin-badge:hover .spin-core { transform: translateY(3px); }

/* ---- destaque do título + botão play ---- */
.hl-dot { color: var(--text); font-weight: 700; }
.hl {
  color: transparent;
  font-weight: 500;
  -webkit-text-stroke: 1px var(--text);
  text-stroke: 1px var(--text);
  paint-order: stroke fill;
}
.btn-play {
  background: var(--glass);
  border-color: var(--line);
  color: var(--text);
  backdrop-filter: blur(8px);
  padding-left: 10px;
}
.btn-play:hover { border-color: var(--line-strong); background: var(--glass-hover); }
.btn-play .play-ic {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text); color: #13151a;
}
.hero h1 {
  /* ancorado no 2560 (82/25.6≈3.2vw): escala proporcional nos notebooks/FHD */
  font-size: clamp(40px, 3.2vw, 82px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.hero h1 .hl { font-size: 1.12em; line-height: 1; }
.hero .sub {
  font-size: clamp(14px, 0.742vw, 19px);
  color: var(--muted);
  max-width: 560px;
  text-wrap: pretty;
}
.hero-actions { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }

.hero-badges {
  display: flex;
  gap: 28px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.hero-badges span {
  display: flex; align-items: center; gap: 9px;
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 600; color: var(--faint);
}
.hero-badges svg { color: var(--u1, var(--muted)); }
.hero-badges i[class*="fi-rr-"] { color: var(--u1, var(--muted)); font-size: clamp(14px, 0.586vw, 15px); line-height: 1; }

/* ---------- about ---------- */
.section { padding: clamp(72px, 5.08vw, 130px) 0; position: relative; }
.section + .section { border-top: 1px solid var(--line-soft); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 80px;
  align-items: stretch;
}
.about-main { display: flex; flex-direction: column; gap: 40px; }
.about-copy { display: flex; flex-direction: column; gap: 18px; }

.about-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 360px;
}
.about-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}
.about-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19,19,22,0.12), rgba(19,19,22,0.6)),
    linear-gradient(115deg, color-mix(in oklab, var(--c-erp) 26%, transparent), transparent 60%);
  pointer-events: none;
}
.about-media::before {
  content: "";
  position: absolute; top: 0; left: 22px; right: 22px;
  height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--tick), transparent);
}
.about-copy h2 { font-size: clamp(27px, 1.48vw, 38px); line-height: 1.22; }
.about-copy p { color: var(--muted); font-size: clamp(14px, 0.586vw, 15px); text-wrap: pretty; }

.cap-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cap-item {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
  font-size: clamp(14px, 0.586vw, 15px);
  font-weight: 600;
  color: var(--muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cap-item:hover { border-color: var(--line); color: var(--text); }
.cap-item svg { flex: none; color: var(--faint); }

/* ---------- products ---------- */
.products { background: var(--bg-deep); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-grid.svc-two { grid-template-columns: repeat(2, 1fr); }
.product-card {
  --pc: #888;
  grid-column: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.product-card.wide { grid-column: auto; }
.product-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--pc) 35%, var(--line)); }
.product-card::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tick), transparent);
}
.product-card:hover::before { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--pc) 80%, transparent), transparent); }
.product-card::after {
  content: "";
  position: absolute;
  top: -70px; left: 50%;
  width: 300px; height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, color-mix(in oklab, white calc(var(--glow) * 12%), transparent), transparent 70%);
  pointer-events: none;
  transition: background 0.25s ease;
}
.product-card:hover::after { background: radial-gradient(ellipse at center, color-mix(in oklab, var(--pc) calc(var(--glow) * 22%), transparent), transparent 70%); }
.product-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  background: var(--glass-hover);
  border: 1px solid var(--line);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.product-card:hover .product-icon {
  color: color-mix(in oklab, var(--pc) 85%, white);
  background: color-mix(in oklab, var(--pc) 12%, transparent);
  border-color: color-mix(in oklab, var(--pc) 22%, transparent);
}
.product-tag {
  display: none;            /* badges SaaS/ERP/categoria (canto sup. direito) ocultos por padrão */
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  padding: 5px 12px;
}
/* selo reexibido só na listagem de Produtos (/produtos usa .product-grid puro;
   /servicos usa .product-grid.svc-two e segue sem selo) */
.product-grid:not(.svc-two) .product-tag { display: inline-block; }
.wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: clamp(21px, 1.055vw, 27px);
  letter-spacing: -0.01em;
  color: var(--text);
  transform: skewX(-6deg);
  display: inline-block;
  line-height: 1.1;
  transition: color 0.25s ease;
}
.product-card:hover .wordmark { color: color-mix(in oklab, var(--pc) 75%, white); }
.wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(14px, 0.586vw, 15px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--faint);
  margin-top: 5px;
}
.product-card .logo-img { height: clamp(20px, 1.02vw, 26px); width: auto; align-self: center; object-fit: contain; }
.product-card p { color: var(--muted); font-size: clamp(14px, 0.586vw, 15px); flex: 1; text-wrap: pretty; }
.product-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.product-chips > span {
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 600;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--line-soft);
  background: transparent;
}
.product-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 700;
  color: var(--muted);
  margin-top: 4px;
  transition: color 0.25s ease;
}
.product-card:hover .product-link { color: color-mix(in oklab, var(--pc) 70%, white); }
.product-link svg { transition: transform 0.2s ease; }
.product-card:hover .product-link svg { transform: translateX(3px); }

/* ---------- diferenciais ---------- */
.diff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.diff-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.diff-card:hover { border-color: var(--line); transform: translateY(-3px); }
.diff-card svg { color: var(--muted); }
.diff-card h3 { font-size: clamp(14px, 0.586vw, 15px); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.diff-card p { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); line-height: 1.55; }

/* ---------- processo ---------- */
.process { background: var(--bg-deep); }
.timeline { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  top: 21px; left: 40px; right: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.step {
  display: flex; flex-direction: column; gap: 14px;
  padding: 0 14px;
  position: relative;
}
.step .dot {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 800;
  font-family: var(--font-body);
  /* número e borda na cor da marca da página (--u1), com fallback neutro */
  color: var(--u1, var(--muted));
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--u1, var(--text)) 38%, var(--line));
  position: relative; z-index: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.step:hover .dot { border-color: color-mix(in oklab, var(--u1, var(--text)) 62%, var(--line)); color: var(--u1, var(--text)); }
.step h3 { font-size: clamp(14px, 0.586vw, 15px); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.step p { font-size: clamp(14px, 0.586vw, 15px); color: var(--faint); line-height: 1.5; }

/* ---------- CTA ---------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--cta-grad-bottom));
  padding: clamp(56px, 3.52vw, 90px) clamp(28px, 2.34vw, 60px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.cta-panel .x-mark {
  position: absolute;
  left: -120px; top: 50%;
  transform: translateY(-50%);
  width: 460px;
  opacity: 0.05;
  pointer-events: none;
}
/* X branco vira escuro no painel claro (senão some) */
.section--light .cta-panel .x-mark { filter: invert(1); opacity: 0.045; }
.cta-panel::before {
  content: "";
  position: absolute;
  top: -120px; left: 50%;
  width: 700px; height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,255,255, calc(var(--glow) * 0.10)), transparent 70%);
  pointer-events: none;
}
.cta-panel h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; max-width: 720px; text-wrap: pretty; position: relative; }
.cta-panel .cta-sub { color: var(--muted); font-size: clamp(14px, 0.586vw, 15px); max-width: 540px; position: relative; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-deep);
  padding: clamp(56px, 3.12vw, 80px) 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 1.2fr;
  gap: 44px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand img { height: clamp(32px, 1.72vw, 44px); width: auto; align-self: flex-start; object-fit: contain; }
.footer-brand p { font-size: clamp(14px, 0.586vw, 15px); color: var(--faint); max-width: 300px; }
.footer h4 {
  display: none;            /* títulos de coluna (Institucional/Produtos/...) ocultos */
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col li { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); }
.footer-col a { transition: color 0.25s ease; }
.footer-col a:hover { color: var(--text); }
/* hover neon: mesmo matiz da marca, com luminosidade/croma elevados (sem sombra) */
.footer-col a.footer-prod:hover { color: oklch(from var(--pc) 0.78 0.28 h); }
.footer-contact li { display: flex; align-items: center; gap: 10px; }
.footer-contact svg { color: var(--faint); flex: none; }
.footer-contact i[class*="fi-rr-"] { color: var(--faint); flex: none; font-size: clamp(14px, 0.586vw, 15px); line-height: 1; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 32px;
  gap: 20px; flex-wrap: wrap;
}
.footer-bottom span { font-size: clamp(14px, 0.586vw, 15px); color: var(--faint); }
.footer-legal { display: flex; gap: 26px; }
.footer-legal a { font-size: clamp(14px, 0.586vw, 15px); color: var(--faint); transition: color 0.25s ease; }
.footer-legal a:hover { color: var(--text); }

/* ---------- mobile nav ---------- */
.nav-burger {
  display: flex;
  margin-top: 12px;
  width: clamp(46px, 2.19vw, 56px); height: clamp(46px, 2.19vw, 56px);
  align-items: center; justify-content: center;
  background: var(--ink-invert);
  border: none;
  border-radius: 50%;
  color: #13151a;
  cursor: pointer;
  flex: none;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-burger:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -6px rgba(0,0,0,0.55); }
.nav-burger svg { pointer-events: none; width: clamp(17px, 0.781vw, 20px); height: clamp(17px, 0.781vw, 20px); }
.nav-burger .ic-close { display: none; }
body.nav-open .nav-burger .ic-menu { display: none; }
body.nav-open .nav-burger .ic-close { display: block; }
/* ---------- menu pill ---------- */
.nav-mobile {
  position: fixed;
  top: 16px; right: clamp(16px, 2vw, 36px);
  transform: scale(0.97);
  transform-origin: top right;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  /* mesma largura do botão burger (fechado), pra não "pular" ao abrir */
  width: clamp(46px, 2.19vw, 56px);
  padding: 18px 0;
  overflow: visible;
  background: var(--ink-invert);
  border-radius: 999px;
  box-shadow: 0 26px 70px -20px rgba(0,0,0,0.7), 0 6px 18px rgba(0,0,0,0.28);
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.26s ease;
}
body.nav-open .nav-mobile { opacity: 1; visibility: visible; transform: scale(1); }
body.nav-open .nav-burger { opacity: 0; visibility: hidden; pointer-events: none; }
body.nav-open .lang-toggle { position: relative; z-index: 96; }

.nav-overlay {
  position: fixed; inset: 0;
  background: transparent;
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s ease;
  z-index: 90;
}
body.nav-open .nav-overlay { opacity: 1; visibility: visible; }

.nav-pill-close,
.nav-mobile a {
  position: relative;
  width: 40px; height: 40px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #13151a;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.4s ease, transform 0.46s cubic-bezier(0.34, 1.2, 0.4, 1), background 0.18s ease, color 0.18s ease;
}
.nav-pill-close svg, .nav-mobile a svg { width: 24px; height: 24px; flex: none; color: inherit; }
.nav-mobile a .fi { font-size: clamp(18px, 0.938vw, 24px); line-height: 1; color: inherit; display: inline-flex; width: 28px; justify-content: center; }
.nav-mobile a .fi::before { width: 28px; text-align: center; }
/* glifos que renderizam menores — iguala o peso visual aos demais */
.nav-mobile a .fi.fi-rr-bulb,
.nav-mobile a .fi.fi-rr-shield-check { font-size: clamp(21px, 1.094vw, 28px); }
.nav-mobile a.nav-cta .fi { font-size: clamp(17px, 0.898vw, 23px); transform: rotate(-45deg); }
.nav-mobile a:hover { background: #efeff1; }
.nav-pill-close:hover { background: #f3dede; color: #b5302a; }
body.nav-open .nav-pill-close,
body.nav-open .nav-mobile a { opacity: 1; transform: translateY(0); }

.nav-pill-close { transition-delay: 0s; }
.nav-mobile a:nth-of-type(1) { transition-delay: 0.07s; }
.nav-mobile a:nth-of-type(2) { transition-delay: 0.12s; }
.nav-mobile a:nth-of-type(3) { transition-delay: 0.17s; }
.nav-mobile a:nth-of-type(4) { transition-delay: 0.22s; }
.nav-mobile a:nth-of-type(5) { transition-delay: 0.27s; }
.nav-mobile a:nth-of-type(6) { transition-delay: 0.32s; }
.nav-mobile a:nth-of-type(7) { transition-delay: 0.37s; }
.nav-mobile a:nth-of-type(8) { transition-delay: 0.42s; }
.nav-mobile a:nth-of-type(9) { transition-delay: 0.47s; }

.nav-mobile a.nav-cta {
  margin-top: 0;
}

.nav-mobile a .nav-label {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 600; letter-spacing: 0.01em;
  color: #fff;
  background: rgba(20,20,23,0.94);
  padding: 8px 14px;
  border-radius: 9px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.34,1.1,0.4,1), visibility 0.18s ease;
}
.nav-mobile a .nav-label::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: rgba(20,20,23,0.94);
}
.nav-mobile a:hover .nav-label { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .nav-pill-close, .nav-mobile a { transition: opacity 0.2s ease, background 0.18s ease, color 0.18s ease; transform: none; }
  body.nav-open .nav-pill-close, body.nav-open .nav-mobile a { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  .nav-right .btn { display: none; }
}
@media (max-width: 900px) {
  .hero-content { max-width: 560px; }
  .nav-units { display: none; }
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .product-card, .product-card.wide { grid-column: span 1; }
  .diff-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 28px; }
  .timeline::before { top: 0; bottom: 0; left: 21px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--line) 10%, var(--line) 90%, transparent); }
  .step { flex-direction: row; align-items: flex-start; gap: 20px; padding: 0; }
  .step .dot { flex: none; }
  .step > div { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-mobile { right: 20px; }
  .section { padding: 90px 0; }
  .section-head h2 { font-size: 30px; }
  .section-head { margin-bottom: 44px; }
  .section-head p { font-size: 15px; }
  .hero h1 { font-size: clamp(24px, 7vw, 34px); }
  .hero .sub { font-size: 15px; }
  .hero-badges { gap: 16px 22px; }
  .about-copy h2 { font-size: 30px; }
  .btn { height: 50px; padding: 0 22px; }
  .lang-toggle button { padding: 10px 13px; }
  .cap-list { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .product-grid.svc-two { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  /* copyright e links legais menores e centralizados no mobile (igual à home) */
  .footer-bottom { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
  .footer-bottom span, .footer-legal a { font-size: clamp(9px, 2.5vw, 11px); }
  .footer-legal { gap: 16px; justify-content: center; }
  .cta-panel { padding: 64px 28px; }
  .hero { padding-top: clamp(84px, 22vw, 104px); padding-bottom: 22px; }
}
@media (max-width: 480px) {
  /* nav cabe na largura do celular: logo menor, gaps e lang-toggle reduzidos */
  .nav-inner { gap: 12px; padding-left: 16px; padding-right: 16px; justify-content: space-between; }
  .nav-mobile { right: 16px; }
  .nav-logo img { height: 27px; }
  .nav-right { gap: 12px; }
  .lang-toggle button { padding: 6px 9px; font-size: 13px; }
  /* menu hamburger mais fino no mobile (botão e pílula com a mesma largura) */
  .nav-burger { width: 40px; height: 40px; }
  .nav-mobile { width: 40px; gap: 12px; padding: 14px 0; }
  .nav-mobile a, .nav-pill-close { width: 34px; height: 34px; }
  .nav-mobile a svg, .nav-pill-close svg { width: 20px; height: 20px; }
}
@media (max-width: 360px) {
  /* telefones bem estreitos (ex.: 320px): compacta o nav para caber sem overflow */
  .nav-inner { padding-left: 12px; padding-right: 12px; gap: 10px; }
  .nav-logo img { height: 23px; }
  .nav-right { gap: 8px; }
  .lang-toggle button { padding: 7px 9px; font-size: 13px; }
  .nav-burger { width: 46px; height: 46px; }
}

/* botão voltar ao topo */
.to-top {
  position: fixed; right: 18px; bottom: 16px; z-index: 190;
  width: clamp(40px, 1.953vw, 50px); height: clamp(40px, 1.953vw, 50px);
  display: grid; place-items: center;
  background: transparent; border: none;
  color: #13151a;                              /* cor da bolinha — internas (fundo claro): escura */
  cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.to-top--home { color: #fff; }                  /* home (fundo escuro): bolinha branca, seta vazada — como o chat */
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-2px); }
.to-top svg { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) { .to-top { width: 32px; height: 32px; bottom: 26px; } }   /* mobile: igual ao botão do chat, um pouco mais acima */

/* =========================================================
   HOME MOBILE — hero + seções roláveis (só ≤760px).
   No desktop tudo isto fica oculto.
   ========================================================= */
.home-m { display: none; }
.hero-scroll { display: none; }

@media (max-width: 760px) {
  /* a home deixa de ser uma tela única amontoada: o hero fica limpo
     (foto + slogan + CTAs) e o restante vira seções roláveis abaixo. */
  #hero .hero-ecosystem,
  #hero .hero-legal { display: none; }

  /* convite à rolagem no rodapé do hero */
  .hero-scroll {
    position: absolute; left: 50%; bottom: clamp(14px, 4vw, 22px);
    transform: translateX(-50%);
    z-index: 5;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted);
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
  }
  .hero-scroll svg { display: block; }

  /* container das seções */
  .home-m { display: block; background: var(--bg-deep); }
  .home-m-sec { padding: clamp(30px, 9vw, 46px) 20px 0; }
  .home-m-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--faint);
    display: flex; align-items: center; gap: 10px;
  }
  .home-m-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--tick); }
  .home-m-title {
    font-size: clamp(23px, 6.6vw, 32px); font-weight: 800; line-height: 1.08;
    margin: 12px 0 18px; color: var(--text);
  }

  /* marcas soltas, sem caixa — 3 wordmarks por linha, respirando */
  .brand-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 6vw, 30px) clamp(12px, 3.5vw, 20px);
    align-items: center; justify-items: center;
  }
  .brand-card {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 2px 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .brand-card img {
    max-height: clamp(15px, 4.4vw, 19px); max-width: 100%; width: auto; height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1); opacity: 0.9;
    transition: filter 0.3s ease, opacity 0.3s ease;
  }
  .brand-card:active img { filter: none; opacity: 1; }

  /* faixa de destaques */
  .home-m-feats {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px 20px;
    padding: clamp(26px, 8vw, 40px) 24px 0;
  }
  .feat-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--muted);
  }
  .feat-item i[class*="fi-rr-"] { color: #fff; font-size: 15px; line-height: 1; }

  /* CTA final */
  .home-m-cta {
    margin-top: clamp(30px, 9vw, 46px);
    padding: clamp(34px, 10vw, 48px) 24px clamp(28px, 8vw, 36px);
    text-align: center;
    border-top: 1px solid var(--line-soft);
  }
  .home-m-cta h2 {
    font-size: clamp(22px, 6.4vw, 30px); font-weight: 800; line-height: 1.12;
    max-width: 18ch; margin: 0 auto; color: var(--text);
  }
  .home-m-cta-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .home-m-cta-actions .btn { width: 100%; justify-content: center; }
  /* linha de divisão (≈420px) entre os botões e o rodapé legal */
  .home-m-divider {
    position: relative; left: 50%; transform: translateX(-50%);
    width: min(420px, calc(100vw - 20px)); height: 1px;
    background: rgba(255, 255, 255, 0.22);
    border: 0;
    margin: clamp(48px, 12vw, 62px) 0;
  }
  .home-m-legal {
    margin-top: 26px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    font-size: 11px; color: var(--faint);
  }
  .home-m-legal .legal-links { display: flex; gap: 16px; }
  .home-m-legal a { color: var(--faint); }

  /* entrada suave ao rolar (tira a sensação "engessada") */
  .home-m-sec, .home-m-feats, .home-m-cta {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .home-m .in { opacity: 1; transform: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}