/* ============================================================
   CONVERTZ — Design System (tema Amarelo Âmbar sobre preto)
   ============================================================ */

:root {
  /* Cores base */
  --bg: #050505;
  --bg-soft: #0d0d0d;
  --card-dark: #141414;
  --line-dark: #232323;
  --white: #ffffff;
  --ink: #111111;
  --text: #ededed;
  --muted: #a3a3a3;
  --muted-2: #7c7c7c;

  /* Âmbar (marca) */
  --amber: #ffb300;
  --amber-2: #ff9500;
  --amber-soft: #ffc94d;
  --amber-ink: #c97500;          /* âmbar legível sobre branco (texto grande) */
  --amber-ink-strong: #9a5b00;   /* âmbar para texto pequeno sobre branco */
  --amber-glow: rgba(255, 165, 0, 0.16);

  /* Verde (conversão) */
  /* Verde dos CTAs — tom "folha" (menos azul, mais fechado) pedido pelo usuário.
     Era #2fca4e/#1fae42, um verde esmeralda mais claro e puxado pro azul. */
  --green: #3fb62f;
  --green-2: #2f9522;
  --green-3: #4ec93b;                       /* topo do gradiente */
  --green-glow: rgba(63, 182, 47, 0.42);

  /* Tipografia — Proxima Nova (Adobe Fonts) em TODO o texto. É a fonte real da referência,
     confirmada lendo o CSS do site de origem. Reserva: pilha do sistema. */
  --font: 'proxima-nova', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'proxima-nova', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Space Mono', ui-monospace, 'Cascadia Mono', monospace;

  --radius: 20px;
  --container: 1160px;
  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambiente contínuo: luz ambiente FIXA no viewport — o fundo é uma superfície única,
   sem gradientes que morrem na borda de cada seção */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58vw 44vh at 86% -6%, rgba(255, 150, 0, .10), transparent 62%),
    radial-gradient(50vw 40vh at -8% 40%, rgba(255, 150, 0, .055), transparent 60%),
    radial-gradient(62vw 52vh at 110% 86%, rgba(255, 140, 0, .07), transparent 62%);
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
[hidden] { display: none !important; }

::selection { background: var(--amber); color: #000; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.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;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 28px;
}

/* Destaques de cor */
.hl { color: var(--amber-ink); }
.hl-strong { color: var(--amber); }

/* Tipografia de display (títulos): Inter Tight bold, como a referência */
.hero h1,
.stats h2, .services h2, .ai h2, .faq h2, .testimonials h2,
.quote blockquote p,
.accel__intro h2,
.media-card__title,
.panel__foot h3 {
  font-family: var(--font-display);
}
.hero h1, .stats h2, .services h2, .ai h2 { font-weight: 700; }

/* ---------- Animação de entrada (só quando o JS carrega) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15.5px;
  color: #fff;
  background: linear-gradient(180deg, var(--green-3), var(--green-2));
  border-radius: 12px;
  padding: 16px 26px;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
  will-change: transform;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Botão do formulário: mesma pílula com brilho dos demais CTAs (só que largura total) */
.btn--block {
  width: 100%;
  border-radius: 999px;
  padding: 17px 24px;
  box-shadow: 0 0 44px 6px var(--green-glow);
}
.btn--block:hover { box-shadow: 0 0 58px 10px var(--green-glow); }

.btn--glow {
  border-radius: 999px;
  padding: 17px 30px;
  box-shadow: 0 0 44px 6px var(--green-glow);
}
.btn--glow:hover { box-shadow: 0 0 58px 10px var(--green-glow); }

/* Círculo da seta: branco translúcido (era preto .25, que escurecia o botão) */
.btn__arrow {
  display: inline-grid;
  place-items: center;
  width: 27px; height: 27px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.btn__arrow svg { width: 14px; height: 14px; color: #fff; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav--solid {
  background: rgba(5, 5, 5, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: #1a1a1a;
}
.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; }
/* Lockup oficial "CONVER + TZ" — o "CONVER" herda a cor via currentColor */
.brand__lockup {
  width: 146px;                /* 701:130 do recorte → 27px de altura */
  height: 27px;
  flex: 0 0 auto;
}
.brand--big .brand__lockup { width: 189px; height: 35px; }

.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: #cfcfcf;
  transition: color .2s ease;
}
.nav__links a:hover { color: #fff; }

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span {
  width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + 56px) 0 72px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 64px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: #fff;
  /* 19ch (era 15ch): no mobile, 15ch prendia a headline em ~276px de um container de
     335px, quebrando linhas à toa. No desktop quem manda é a coluna do grid (~540px),
     então aqui o valor só destrava o mobile. */
  max-width: 19ch;
  margin-bottom: 24px;
}

.hero__sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 40ch;
  margin-bottom: 30px;
}

/* Lista de checks */
.checks { display: grid; gap: 14px; margin-bottom: 34px; }
.checks li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 500;
  color: #e8e8e8;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb300' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.checks--tight { gap: 16px; margin-bottom: 38px; }
.checks--tight li { font-size: 14.5px; font-weight: 400; color: #d6d6d6; max-width: 52ch; }

.certified { font-size: 12.5px; color: var(--muted-2); margin-bottom: 16px; }
.certified strong { color: #cfcfcf; font-weight: 700; }

/* Selos de parceiros */
.partners { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.partner { display: flex; align-items: center; gap: 10px; opacity: .92; }
.partner__g { width: 30px; height: 30px; }
.partner__meta { width: 30px; height: 30px; object-fit: contain; }
.partner__txt { display: grid; line-height: 1.2; }
.partner__txt span { font-size: 15px; font-weight: 600; color: #e3e3e3; }
.partner__txt small { font-size: 11.5px; color: var(--muted-2); }
.tray-word { font-size: 21px !important; font-weight: 800 !important; font-style: italic; color: #6ea8ff !important; letter-spacing: -0.03em; }
.tray-word i { font-style: normal; font-size: 13px; vertical-align: super; }

/* Card do formulário */
.lead-card {
  background: #ececec;
  border-radius: 26px;
  padding: 48px 32px 34px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lead-card form { display: grid; gap: 13px; }

.field { position: relative; }
.field input,
.field select {
  width: 100%;
  height: 54px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  background: #fff;
  padding: 0 16px;
  font-family: var(--font);
  font-size: 14.5px;
  color: #2c2c2c;
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.field input::placeholder { color: #9a9a9a; }
.field select { color: #9a9a9a; cursor: pointer; }
.field select.filled { color: #2c2c2c; }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(255, 179, 0, .22);
}
.field.error input,
.field.error select { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); }

.field--select::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 11px; height: 11px;
  transform: translateY(-58%) rotate(45deg);
  border-right: 2px solid #9a9a9a;
  border-bottom: 2px solid #9a9a9a;
  pointer-events: none;
}

.field--phone .flag {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 24px;
  pointer-events: none;
}
.field--phone input { padding-left: 50px; }

.form-alert {
  background: rgba(229, 72, 77, .1);
  border: 1px solid rgba(229, 72, 77, .4);
  color: #b3261e;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
}

/* Estado de sucesso */
.lead-card__success { text-align: center; padding: 46px 12px; }
.success__badge {
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(47, 202, 78, .14);
  color: var(--green-2);
  margin-bottom: 18px;
}
.success__badge svg { width: 30px; height: 30px; }
.lead-card__success h3 { color: #191919; font-size: 21px; letter-spacing: -0.01em; margin-bottom: 8px; }
.lead-card__success h3:focus { outline: none; }
.success__wa {
  margin-top: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3ddb70, #1caf52);
  box-shadow: 0 8px 26px rgba(37, 211, 102, .35);
}
.success__wa img { flex: 0 0 auto; }
.lead-card__success p { color: #6d6d6d; font-size: 14.5px; max-width: 34ch; margin-inline: auto; }

/* ============================================================
   CLIENTES — faixa fina de logos em marquee
   ============================================================ */
.clients { padding: 8px 0 44px; }
.clients__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 28px;
  padding-inline: 24px;
  text-align: center;
}
.clients__label::before,
.clients__label::after {
  content: "";
  height: 1px;
  width: 64px;
  flex: 0 0 auto;
}
.clients__label::before { background: linear-gradient(90deg, transparent, #2e2e2e); }
.clients__label::after  { background: linear-gradient(90deg, #2e2e2e, transparent); }

.marquee--clients { margin-bottom: 0; }
.marquee--clients .marquee__track { gap: 58px; animation-duration: 32s; }
.marquee--clients .marquee__group { gap: 58px; align-items: center; }
.marquee--clients:hover .marquee__track { animation-play-state: paused; }

.clogo-sep { font-style: normal; font-size: 11px; color: rgba(255, 179, 0, .38); }

/* Logos reais dos clientes. `brightness(0) invert(1)` força QUALQUER logo a virar silhueta
   branca preservando o alfa — resolve de uma vez o logo claro (Sonho de Criança), o escuro
   (Bulwark, que sumiria no fundo preto) e os coloridos, deixando a faixa uniforme. */
.clogo-img {
  height: 26px;
  width: auto;
  flex: 0 0 auto;
  opacity: .55;
  filter: brightness(0) invert(1);
  transition: opacity .25s ease;
}
/* Logos em formato de selo/emblema (quase quadrados) precisam de mais altura que os
   wordmarks horizontais para ficarem com o mesmo peso óptico na faixa. */
.clogo-img--selo { height: 38px; }
.marquee--clients:hover .clogo-img { opacity: .85; }

/* ============================================================
   FOLHA BRANCA (citação + depoimentos)
   ============================================================ */
.sheet {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-radius: 46px;
  margin: 0 26px;
  overflow: hidden;
}

/* ---------- Citação do conselheiro ---------- */
.quote {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 48px;
}
.quote blockquote p {
  font-size: clamp(1.7rem, 2.9vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: var(--ink);
  max-width: 18ch;
  margin-bottom: 38px;
}
.quote .hl { font-weight: 700; }

/* Cartão do mentor */
.mentor { position: relative; justify-self: end; padding-left: 34px; }
.mentor__side {
  position: absolute;
  left: 4px; bottom: 14px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .42em;
  color: #9a9a9a;
}
.mentor-card {
  position: relative;
  /* medidas espelhadas da referência: 415x590 (proporção 0.70, bem vertical).
     Antes era 392x520 (0.75) e o cartão ficava pequeno ao lado da citação. */
  width: min(415px, calc(100vw - 130px));
  height: 590px;
}
/* O degrau (clip-path) fica no __shape; o selo, irmão dele, ocupa o vão sem ser cortado */
.mentor-card__shape {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;              /* arredonda também os filhos (foto full-bleed) */
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255, 255, 255, .28), transparent 46%),
    linear-gradient(168deg, #ffc554 0%, #f59300 52%, #a35d00 100%);
  /* degrau do canto superior direito — o vão abriga o selo */
  clip-path: polygon(0 0, 87% 0, 87% 28%, 100% 38%, 100% 100%, 0 100%);
}
.mentor-card__badge {
  position: absolute;
  top: 9px; right: 4%;
  width: min(27px, 8%);
  aspect-ratio: 1;
  z-index: 2;
}
.mentor-card__badge svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 8px rgba(0,0,0,.25)); }
.mentor-card__info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 26px 24px;
  background: linear-gradient(transparent, rgba(70, 36, 0, .62));
  border-radius: 0 0 16px 16px;
}
.mentor-card__rule { display: block; height: 1px; background: rgba(255, 255, 255, .45); margin-bottom: 10px; }
.mentor-card__info span:not(.mentor-card__rule) { display: block; font-size: 13px; color: rgba(255, 255, 255, .88); }

/* Placeholder de foto (cartão do mentor) — ocupa o cartão inteiro, como a foto final */
.ph-photo {
  position: absolute;
  inset: 0;
  border: 1.5px dashed rgba(255, 255, 255, .45);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 26px 90px;
  text-align: center;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
}
.ph-photo__icon { width: 54px; height: 54px; opacity: .75; }

/* Ao trocar o placeholder pela foto real, basta usar <img class="mentor-card__photo"> */
.mentor-card__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* ---------- Depoimentos ---------- */
.testimonials { padding-top: 32px; padding-bottom: 76px; }
.testimonials h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 36px;
}

/* ---------- Depoimento em vídeo (1 vídeo, peça principal) ----------
   A seção inteira é este bloco: os depoimentos escritos saíram na v82.
   Linguagem da marca trazida pro painel branco: luz âmbar de palco atrás do
   player, aspas gigantes de marca d'água e o fio-assinatura âmbar do rodapé
   do gráfico, que é o motivo gráfico recorrente do site. */
.vcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 60px;
  align-items: center;
  margin: 8px 0 4px;
}
/* palco: mancha âmbar difusa atrás do vídeo, a mesma luz da órbita e do gráfico.
   Estática (sem animação) — é fundo, não pode competir com o play. */
.vcase::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -6%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 0, .17), rgba(255, 140, 0, .05) 45%, transparent 70%);
  pointer-events: none;
}

/* 9:16 sem hack de padding: aspect-ratio segura a caixa antes do vídeo carregar,
   então não há salto de layout quando o arquivo entra. */
.vcase__player {
  position: relative;
  z-index: 1;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: #0d0d0d;
  box-shadow:
    0 36px 80px rgba(0, 0, 0, .28),
    0 8px 24px rgba(0, 0, 0, .12),
    0 0 0 1px rgba(0, 0, 0, .05);
}
.vcase__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0d0d0d;
}

/* Capa: some ao dar play (classe .is-playing no player).
   O véu era quase opaco porque atrás só havia preto. Agora existe a arte de capa
   embaixo, então ele só escurece o suficiente para o botão âmbar ter contraste —
   e clareia no centro, onde fica o rosto. Sem isso a capa some atrás do véu. */
.vcase__cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 45% at 50% 44%, rgba(0, 0, 0, .10), rgba(0, 0, 0, .34) 75%),
    linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .10) 45%, rgba(0, 0, 0, .40) 100%);
  cursor: pointer;
  transition: opacity .45s ease, visibility .45s;
}
.vcase__player.is-playing .vcase__cover {
  opacity: 0;
  visibility: hidden;
}

.vcase__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #1a1200;
  background: linear-gradient(160deg, var(--amber-soft), var(--amber) 55%, var(--amber-2));
  box-shadow: 0 16px 40px rgba(255, 165, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .5);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.vcase__play svg { width: 32px; height: 32px; margin-left: 5px; }  /* óptica: triângulo pede deslocamento */
.vcase__play:hover, .vcase__play:focus-visible { transform: scale(1.08); }
/* anel que pulsa chamando o clique */
.vcase__ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 179, 0, .5);
  animation: vcaseRing 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes vcaseRing {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}

.vcase__side { position: relative; z-index: 1; }
/* aspas de marca d'água: sinaliza citação sem gastar uma linha de texto */
.vcase__side::before {
  content: "\201C";
  position: absolute;
  left: -8px; top: -64px;
  font-family: var(--font-display);
  font-size: 190px;
  line-height: 1;
  color: var(--amber);
  opacity: .13;
  pointer-events: none;
}
.vcase__quote { margin: 0 0 26px; }
.vcase__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

/* assinatura: foto + nome + credenciais. O fio âmbar é o mesmo motivo do
   rodapé do gráfico — cabeça âmbar curta emendando um hairline neutro. */
.vcase__by {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding-top: 22px;
  border-top: 1px solid #e6e6e6;
  position: relative;
}
.vcase__by::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 46px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
}
.vcase__by img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(255, 179, 0, .45);
}
.vcase__by > div { display: grid; gap: 2px; min-width: 0; }
.vcase__by strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.vcase__role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-ink-strong);
}
/* ⚠️ NÃO usar font-weight 500/600 aqui: o kit Typekit só carrega 400/700, então
   qualquer peso intermediário vira faux-bold sintetizado e o texto sai borrado.
   O reforço pedido veio de corpo maior (13.5 → 15px) e cinza bem mais escuro
   (#767676 → #4d4d4d), que é o caminho honesto de dar peso com 2 pesos só. */
.vcase__creds {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: #4d4d4d;
  max-width: 50ch;
}

@media (prefers-reduced-motion: reduce) {
  .vcase__ring { animation: none; }
}

@media (max-width: 860px) {
  /* empilha: vídeo primeiro (é a prova), fala embaixo. Largura travada senão
     um 9:16 ocupando a tela inteira empurra o resto da página pra fora da dobra. */
  .vcase {
    grid-template-columns: minmax(0, 300px);
    justify-content: center;
    gap: 30px;
  }
  .vcase::before { display: none; }         /* o palco só faz sentido ao lado do vídeo */
  .vcase__side::before { display: none; }   /* aspas gigantes atrapalham em coluna estreita */
  .vcase__play { width: 68px; height: 68px; }
  .vcase__play svg { width: 26px; height: 26px; }
  .vcase__by { gap: 13px; }
  .vcase__by img { width: 48px; height: 48px; }
}


/* ============================================================
   ACELERADORA (MANIFESTO)
   ============================================================ */
.accel {
  position: relative;
  padding: 84px 0;
}
.accel::before {          /* brilho de cena com sangria: atravessa as seções vizinhas */
  content: "";
  position: absolute;
  inset: -220px 0;         /* sangria só vertical — horizontal criaria área rolável */
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(46% 42% at 10% 32%, rgba(255, 150, 0, .09), transparent 62%);
}

/* Declaração da seção — mesmo padrão das demais: eyebrow → h2 com destaque âmbar → sub */
.accel__intro h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: #fff;
  margin-bottom: 14px;
}
.accel__sub { font-size: 15.5px; line-height: 1.7; color: var(--muted); max-width: 56ch; }
.accel__sub strong { color: #fff; font-weight: 600; }
/* "o que uma aceleradora faz" — reusa o componente .checks (mesmo tique âmbar do hero) */
.accel__does { margin: 24px 0 0; max-width: 64ch; }

.accel__cta { margin-top: 30px; }
.accel .chart-card--wide { margin-top: 38px; }   /* o bloco @760 reduz para 30px */

/* Painel "Receita × Tempo" */
.chart-card {
  background: #0e0e0e;
  border: 1px solid #232323;
  border-radius: 20px;
  padding: 22px 24px 20px;
  box-shadow: 0 0 70px rgba(255, 165, 0, .07);
}
.chart-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.chart-card__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.chart-scroll { overflow-x: auto; scrollbar-width: none; }
.chart-scroll::-webkit-scrollbar { display: none; }
.chart-svg { width: 100%; min-width: 760px; height: auto; }

/* Um dos dois gráficos aparece por vez. O escondido continua no DOM de propósito:
   getTotalLength() é geometria pura e funciona mesmo com display:none, então o JS
   anima os dois em sincronia e girar o aparelho não quebra nada. */
.chart-figure--m { display: none; }
.chart-svg--m { width: 100%; min-width: 0; height: auto; display: block; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.chart-legend li { display: flex; align-items: center; gap: 8px; }
.chart-legend__mark { width: 16px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.chart-legend__mark--on {
  background: linear-gradient(90deg, #d98e00, #ffcf4d);
  box-shadow: 0 0 8px rgba(255, 179, 0, .5);
}
.chart-legend__mark--off {
  height: 0;
  border-top: 2px dashed #6e6e6e;
  border-radius: 0;
}

/* Curva desenha ao entrar em cena (com fallback sem JS) */
.js .chart-curve,
.js .chart-halo {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.7s cubic-bezier(.3, .6, .2, 1) .3s;
}
.js .reveal.in .chart-curve,
.js .reveal.in .chart-halo { stroke-dashoffset: 0; }
.js .chart-area { opacity: 0; transition: opacity 1.1s ease .9s; }
.js .reveal.in .chart-area { opacity: 1; }
.js .chart-dot-end { opacity: 0; transition: opacity .45s ease 1.8s; }
.js .reveal.in .chart-dot-end { opacity: 1; }
/* .chart-kpi: opacity/pop ficam na regra única lá embaixo (classe .lit) */

/* Aviso de rolagem: no mobile o gráfico é mais largo que a tela. Antes o JS empurrava
   scrollLeft a cada frame p/ "seguir" o cometa — era o que mais travava no celular e
   ainda brigava com o dedo do usuário. Agora quem rola é o usuário, e a borda avisa. */
.chart-scroll {
  -webkit-mask-image: linear-gradient(90deg, #000 0 92%, transparent);
  mask-image: linear-gradient(90deg, #000 0 92%, transparent);
}
.chart-scroll.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------- Rodapé do painel: só o medidor. Sem chips, sem frase de efeito ---------- */
.chart-card__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 0;
  /* fio-assinatura da seção: cabeça âmbar de 46px + hairline neutro.
     background-image em vez de ::before porque o ::before viraria item deste grid. */
  background-image: linear-gradient(90deg, var(--amber) 0 46px, #1c1c1c 46px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}

.chart-card__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 14px 0;
}

.chart-card__rlabel {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a8a8a;              /* mesmo cinza do .chart-card__title e dos eixos do SVG */
}

/* Medidor RPM horizontal (substitui o número estático; JS anima com mola) */
.gauge { display: flex; align-items: center; gap: 18px; }

.gauge__col {
  width: clamp(150px, 22vw, 300px);   /* célula do grid é auto: a barra precisa de largura própria */
  display: grid;
  gap: 7px;
}

.gauge__bar { position: relative; display: block; height: 6px; }
.gauge__glow {
  position: absolute;
  inset: -16px -12px;
  background: radial-gradient(72% 60% at 30% 50%, rgba(255, 193, 7, .40), transparent 72%);
  opacity: .18;                     /* JS sobe conforme o ponteiro avança */
  pointer-events: none;
}
.gauge__track {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #161616;
  box-shadow: inset 0 0 0 1px #232323;
  overflow: hidden;                 /* só o trecho percorrido acende */
}
.gauge__fill {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #ff9500, var(--amber) 55%, #ffcf4d);
  box-shadow: 0 0 10px rgba(255, 193, 7, .55);
}
.gauge__needle {
  position: absolute;
  left: -1px; top: -5px;
  width: 2px; height: 16px;
  border-radius: 1px;
  background: #ffe4a8;
  box-shadow: 0 0 9px rgba(255, 193, 7, .9);
}

.gauge__ticks {
  display: flex;
  justify-content: space-between;   /* 1º filho = tick do 0, à esquerda */
}
.gauge__ticks i {
  width: 1px; height: 7px;
  background: #2c2c2c;
  transition: background .25s ease, box-shadow .25s ease;
}
.gauge__ticks i:nth-child(1),
.gauge__ticks i:nth-child(6),
.gauge__ticks i:nth-child(11) { height: 11px; }  /* marcas maiores: 0 / 5 / 10 */
.gauge__ticks i.lit { background: var(--amber); box-shadow: 0 0 6px rgba(255, 193, 7, .7); }

.gauge__read { display: grid; gap: 4px; flex: 0 0 auto; }
.gauge__num {
  display: inline-block;
  min-width: 6ch;                   /* reserva "10,00%": o contador não desloca nada */
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber);
  text-shadow: 0 0 26px rgba(255, 193, 7, .35);
}
.gauge__scale {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6f6f6f;
}

/* pulse ao cravar o valor final (só no número — o ponteiro tem transform inline do JS) */
.gauge--done .gauge__num { animation: gaugePulse .55s cubic-bezier(.2, .6, .3, 1) 1; }
.gauge--done .gauge__glow { animation: glowPulse .6s ease-out 1; }
@keyframes gaugePulse { 35% { transform: scale(1.08); } }
@keyframes glowPulse  { 30% { opacity: 1; } }

@media (max-width: 760px) {
  .chart-card__foot { margin-top: 14px; padding-top: 18px; }
  .chart-card__cell { padding: 14px 0; gap: 10px; }
  .chart-card__rlabel { letter-spacing: .14em; }

  /* No celular a aurora e a varredura são decoração pura que roda em loop infinito,
     compondo camadas grandes por cima do painel enquanto a curva desenha. Somem: o
     orçamento de GPU do aparelho vai inteiro para a animação que importa. */
  .chart-card__aurora,
  .chart-card__scan::before { display: none; }
  /* o ::after do scan é o glare estático da cabeceira; esse é de graça e fica */

  /* troca de gráfico: some o largo com rolagem, entra a composição que cabe na tela */
  .chart-scroll { display: none; }
  .chart-figure--m { display: block; }
}

@media (max-width: 420px) {
  .gauge { gap: 11px; }
  .gauge__num { font-size: 1.55rem; }
  .gauge__col { width: 100%; max-width: 340px; }
}

/* Versão "vidro" do painel largo: glassmorphism real (blur + anel de gradiente),
   aurora interna, brilho especular e tilt 3D (JS) */
.chart-card--wide {
  position: relative;
  overflow: hidden;
  /* ⚠️ NÃO recolocar backdrop-filter aqui. Tinha blur(16px) saturate(1.35), que obriga o
     navegador a reprocessar tudo que está ATRÁS do card a cada frame em que qualquer coisa
     dentro dele muda — ou seja, durante o desenho inteiro da curva e durante o tilt. Era o
     custo de rasterização mais caro da página. Sobre um fundo quase preto o blur não
     acrescentava quase nada visualmente; o gradiente empilhado abaixo entrega o mesmo vidro
     com custo zero. */
  background:
    radial-gradient(120% 90% at 8% -10%, rgba(255, 255, 255, .085), transparent 52%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015) 30%, rgba(10, 10, 10, .6) 68%, rgba(22, 15, 4, .62));
  border-color: rgba(255, 255, 255, .08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 30px 80px rgba(0, 0, 0, .5),
    0 0 90px rgba(255, 165, 0, .08);
}
/* will-change só enquanto realmente anima (JS liga/desliga); manter fixo mantém uma
   camada extra na GPU o tempo todo à toa */
.chart-card--wide.is-tilting { will-change: transform; }
.chart-card--wide::before {       /* anel de vidro: borda em gradiente de 1px */
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 28%,
    rgba(255, 179, 0, .30) 58%, rgba(255, 255, 255, .06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.chart-card--wide::after {        /* brilho especular que segue o mouse (--mx/--my via JS) */
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 195, 70, .10), transparent 48%);
  opacity: 0;
  transition: opacity .4s ease;
}
.chart-card--wide:hover::after { opacity: 1; }

.chart-card__aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.chart-card__aurora i {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 160, 0, .12), transparent 62%);
  animation: aurora 18s ease-in-out infinite alternate;
}
/* Fora da viewport, congela aurora e scan (mesma economia da cena 3D da órbita).
   Antes rodavam para sempre, inclusive com o card fora da tela. */
.chart-card--wide:not(.is-live) .chart-card__aurora i,
.chart-card--wide:not(.is-live) .chart-card__scan::before { animation-play-state: paused; }
.chart-card__aurora i:nth-child(1) { left: -14%; top: -36%; }
.chart-card__aurora i:nth-child(2) {
  right: -12%; bottom: -46%;
  background: radial-gradient(circle, rgba(255, 110, 0, .10), transparent 60%);
  animation-duration: 24s;
  animation-delay: -9s;
}
@keyframes aurora {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to   { transform: translate3d(8%, 6%, 0) scale(1.3) rotate(10deg); }
}

/* Clímax: quando a curva completa, o anel do ponto final pulsa uma vez */
.chart-endring { transform-box: fill-box; transform-origin: center; }
.chart-done .chart-endring { animation: endPulse 1.15s cubic-bezier(.2, .6, .3, 1) .08s 1; }
@keyframes endPulse {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(2.4); opacity: 0; }
}
.chart-card--wide .chart-card__head,
.chart-card--wide .chart-scroll,
.chart-card--wide .chart-card__foot { position: relative; z-index: 1; }

/* Varredura de scan (leitura de radar) por cima do painel */
.chart-card__scan {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.chart-card__scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -18%;
  height: 16%;
  background: linear-gradient(180deg, transparent, rgba(255, 179, 0, .05), transparent);
  animation: scanMove 6.5s linear infinite;
}
.chart-card__scan::after {        /* glare estático de vidro na cabeceira do painel */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), transparent);
}
@keyframes scanMove { to { transform: translateY(760%); } }

/* Marco aceso: o próprio ponto pulsa via classe, sem criar/destruir <circle> por marco.
   Antes cada marco instanciava um anel no DOM e o removia com setTimeout. */
.chart-kpi {
  transform-box: fill-box;
  transform-origin: center;
}
/* opacity gated no .js: sem JS ninguém adiciona .lit e os marcos sumiriam */
.js .chart-kpi { opacity: 0; }
.js .chart-kpi.lit {
  opacity: 1;
  animation: kpiPop .5s cubic-bezier(.2, .7, .3, 1) 1;
}
@keyframes kpiPop {
  0%   { transform: scale(.2); }
  55%  { transform: scale(1.85); }
  100% { transform: scale(1); }
}

/* ============================================================
   ESTATÍSTICAS
   ============================================================ */
.stats {
  padding: 84px 0 72px;
}
.stats h2 {
  font-size: clamp(1.85rem, 2.9vw, 2.6rem);
  /* NÃO subir para 800: o kit Typekit só tem 400/700 carregados, então 800 vira
     faux-bold sintetizado pelo navegador e o texto sai borrado. A presença vem do
     corpo maior + tracking mais fechado. */
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 16px;
}
/* Cada parte é bloco e se equilibra sozinha (ver comentário no index.html) */
.stats__title-lead,
.stats__title-hl { display: block; text-wrap: balance; }
.stats__title-hl { text-shadow: 0 0 34px rgba(255, 179, 0, .26); }

/* Alinhado ao .accel__sub, que é o subtítulo de seção equivalente. Antes estava em
   14px/--muted-2: menor e mais escuro que o padrão do próprio site. */
.stats__sub {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  /* 52ch deixava "método e tecnologia." órfã no desktop (485px x 144px); 46ch + balance
     fecham a coluna e igualam as linhas */
  max-width: 46ch;
  text-wrap: balance;
  margin-bottom: 36px;
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Desktop: sombra profunda nas extremidades dos números (como o modelo) —
   os cards mergulham no escuro ao longo de uma zona larga, não só na beirada */
@media (min-width: 761px) {
  .stats .marquee {
    -webkit-mask-image: linear-gradient(90deg,
      transparent, rgba(0, 0, 0, .35) 9%, #000 22%,
      #000 78%, rgba(0, 0, 0, .35) 91%, transparent);
    mask-image: linear-gradient(90deg,
      transparent, rgba(0, 0, 0, .35) 9%, #000 22%,
      #000 78%, rgba(0, 0, 0, .35) 91%, transparent);
  }
}
.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: 24px; }

@keyframes marquee {
  to { transform: translateX(calc(-50% - 12px)); }
}

.stat-card {
  width: 302px;
  padding: 40px 30px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid #262626;
  border-radius: 18px;
  text-align: center;
  transition: border-color .25s ease;
}
.stat-card:hover { border-color: #3d3d3d; }
.stat-card strong {
  display: block;
  font-family: var(--mono);
  font-size: clamp(2.4rem, 3.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--amber);
  white-space: nowrap;
  margin-bottom: 14px;
}
.stat-card span { font-size: 13.5px; line-height: 1.55; color: var(--muted); display: block; max-width: 24ch; margin-inline: auto; }

/* ============================================================
   POSICIONAMENTO (frase-manifesto entre Estatísticas e Serviços)
   ============================================================ */
/* Respiro simetrico: o padding das vizinhas (stats 72 / services 72) define o
   ritmo dos dois lados, entao a frase fica centrada no proprio vao (80/80).
   Antes tinha 56px embaixo, o que somava 128px de vazio contra 80px em cima. */
.creed { padding: 8px 0; }
.creed__text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: #fff;
  max-width: 22ch;
}

/* ============================================================
   SERVIÇOS
   ============================================================ */
.services {
  position: relative;
  padding: 72px 0 56px;   /* era 84: junto com o padding da .ai abria 200px de vao ate o h2 */
}
.services::before {       /* sangria para cima (estatísticas) e para baixo (IA) */
  content: "";
  position: absolute;
  inset: -200px 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(44% 38% at 94% 16%, rgba(255, 150, 0, .08), transparent 60%);
}
.services h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.16;
  color: #fff;
  margin-bottom: 14px;
}
.services__sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; }

/* Abas */
.tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: #161616;
  border: 1px solid #2c2c2c;
  color: #cfcfcf;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s ease, background .25s ease, color .2s ease, gap .25s ease;
}
.tab::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  transform: scale(0);
  transition: transform .25s ease;
}
.tab:hover { border-color: #4a4a4a; color: #fff; }
.tab[aria-selected="true"] {
  background: #3a2506;
  border-color: #8a5a00;
  color: #fff;
  font-weight: 700;
  gap: 9px;
}
.tab[aria-selected="true"]::before { transform: scale(1); box-shadow: 0 0 8px var(--amber); }

/* Painéis */
.panel { animation: panelIn .45s ease; }
.panel[hidden] { display: none; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.media-card {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  height: clamp(280px, 30vw, 330px);
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 34px;
}
.media-card__title {
  padding-left: 54px;
  font-size: clamp(2rem, 3.8vw, 3.3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ink);
}
.media-card__title span { color: var(--amber-ink); }
.media-card__art { position: relative; height: 100%; }

/* Arte: Tráfego Pago (bolhas flutuantes) */
.art-traffic .bub {
  position: absolute;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
  display: grid;
  place-items: center;
  animation: bob 4.5s ease-in-out var(--d) infinite alternate;
}
.art-traffic .bub svg { width: 52%; height: 52%; }

@keyframes bob {
  from { transform: translateY(-5px); }
  to   { transform: translateY(6px); }
}

/* Arte: Dashboards e E-commerce (mesmo enquadramento).
   O SVG é absoluto de propósito: em fluxo, a altura intrínseca dele (largura 88% × proporção
   do viewBox) inflava a linha do grid para além da altura fixa do .media-card, e o
   overflow:hidden do card decepava ~19% da arte por baixo. Fora do fluxo, a linha respeita
   o card e o preserveAspectRatio encaixa a arte inteira. */
.art-dash, .art-shop, .art-growth, .art-sales { display: block; }
/* width/height explícitos: com height:auto o SVG (elemento substituído) deixa a proporção
   vencer o offset de baixo e volta a estourar. Com a caixa definida, o preserveAspectRatio
   encaixa a arte dentro dela. */
.dash-svg, .shop-svg, .growth-svg, .sales-svg {
  position: absolute; top: 5%; left: 6%; width: 88%; height: 90%;
}

/* Arte: Criativos e LPs */
.art-creative { overflow: hidden; }
.mock-browser {
  position: absolute;
  right: 6%; top: 9%;
  width: 58%;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.mock-browser__bar {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 12px;
  border-bottom: 1px solid #efefef;
  background: #fafafa;
}
.mock-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #e3e3e3; }
.mock-browser__bar i:nth-child(1) { background: #ff5f57; }
.mock-browser__bar i:nth-child(2) { background: #febc2e; }
.mock-browser__bar i:nth-child(3) { background: #28c840; }
.mock-browser__bar em { flex: 1; height: 10px; margin-left: 8px; border-radius: 5px; background: #efefef; }
.mock-browser__body { padding: 16px; display: grid; gap: 9px; }

.mock-line { height: 8px; border-radius: 4px; background: #ececec; }
.mock-line.w50 { width: 50%; } .mock-line.w60 { width: 60%; }
.mock-line.w70 { width: 70%; } .mock-line.w80 { width: 80%; }
.mock-line.w90 { width: 90%; }

/* Miniaturas de criativo — são PEÇAS PRONTAS, não placeholders.
   (Antes eram caixas tracejadas com ícone de imagem e pareciam espaço vazio.) */
.mock-img {
  position: relative;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(140deg, #2f2f34, #17171a 70%);
}
.mock-img::before {              /* foco de luz âmbar, como um hero de campanha */
  content: "";
  position: absolute;
  left: -8%; top: -55%;
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 179, 0, .9), rgba(255, 179, 0, 0) 68%);
}
.mock-img::after {               /* reflexo diagonal */
  content: "";
  position: absolute;
  right: -25%; bottom: -70%;
  width: 85%; height: 150%;
  transform: rotate(-20deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
}
.mock-img--sm { height: 74px; background: linear-gradient(140deg, #3a3a40, #1d1d21 72%); }
.mock-img--sm::before { left: auto; right: -10%; top: -45%; width: 70%; }

.mock-cta { height: 20px; border-radius: 10px; background: var(--amber); width: 58%; }

.mock-ad {
  position: absolute;
  right: 2%; bottom: 6%;
  width: 26%;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  padding: 10px;
  display: grid;
  gap: 8px;
  transform: rotate(3deg);
}
/* Criativo do anúncio: peça âmbar, o oposto do hero escuro do navegador */
.mock-ad__img {
  position: relative;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(150deg, #ffc554, #f59300 58%, #cf7a00);
}
.mock-ad__img::before {          /* forma de produto */
  content: "";
  position: absolute;
  right: -14%; top: -22%;
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .24);
}
.mock-ad__img::after {           /* linha de titulo sobre a peça */
  content: "";
  position: absolute;
  left: 12%; bottom: 16%;
  width: 52%; height: 7px;
  border-radius: 4px;
  background: rgba(20, 12, 0, .35);
}
.mock-ad .mock-cta { height: 16px; width: 70%; }

.mock-phone {
  position: absolute;
  left: 7%; bottom: -6%;
  width: 25%;
  min-width: 108px;
  background: #fff;
  border: 5px solid #f0f0f0;
  border-radius: 20px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .16);
  padding: 22px 12px 16px;
  display: grid;
  gap: 9px;
  transform: rotate(-4deg);
}
.mock-phone__notch {
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 5px;
  border-radius: 3px;
  background: #e8e8e8;
}

/* Rodapé do painel */
.panel__foot {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  align-items: start;
  margin-bottom: 34px;
}
.panel__foot h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fff;
  max-width: 24ch;
}
.panel__foot p { font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 62ch; }

/* ============================================================
   IA & TECNOLOGIA
   ============================================================ */
.ai {
  position: relative;
  /* topo menor que a base de proposito: o grid centraliza a copy contra a cena de 560px,
     o que ja soma 46px acima do h2, e a orbit-zone entra outros 26px. Com 84px em cima
     o h2 caia 200px depois do painel de servicos. */
  padding: 44px 0 84px;
}
.ai::before {             /* palco da órbita: a luz vaza para as seções vizinhas */
  content: "";
  position: absolute;
  inset: -260px 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(48% 44% at 76% 52%, rgba(255, 140, 0, .14), transparent 64%);
}
.ai__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
/* impede a cena de 560px de inflar a coluna do grid no mobile (texto vazava da tela) */
.ai__grid > * { min-width: 0; }
.ai h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: #fff;
  margin-bottom: 16px;
}
.ai__sub { font-size: 15.5px; color: #cfcfcf; max-width: 40ch; margin-bottom: 26px; }

/* Cena 3D orbital das IAs (posições calculadas por JS a 60fps) */
.orbit-zone { display: flex; justify-content: center; max-width: 100%; }
.scene3d {
  --r: 205;     /* raio da órbita (lido pelo JS) */
  --vf: .34;    /* achatamento vertical (lido pelo JS) */
  position: relative;
  width: 560px;
  height: 560px;
  flex: 0 0 auto;
  transform-origin: top center;
}

/* Luz volumétrica: feixes cônicos varrendo atrás da cena */
.scene3d__beams { position: absolute; inset: -30px; pointer-events: none; }
.scene3d__beams i {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg,
    transparent 0 38deg, rgba(255, 170, 0, .10) 55deg, transparent 74deg 158deg,
    rgba(255, 170, 0, .07) 176deg, transparent 196deg);
  -webkit-mask-image: radial-gradient(circle, #000 16%, transparent 64%);
  mask-image: radial-gradient(circle, #000 16%, transparent 64%);
  animation: beamSpin 44s linear infinite;
}
.scene3d__beams i:nth-child(2) { animation-duration: 61s; animation-direction: reverse; opacity: .75; }
@keyframes beamSpin { to { transform: rotate(1turn); } }

/* Poeira de luz */
.scene3d__dust { position: absolute; inset: 6%; pointer-events: none; }
.scene3d__dust i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 190, 80, .55);
  box-shadow: 0 0 6px rgba(255, 170, 0, .8);
  animation: dustFloat 7s ease-in-out infinite alternate;
}
.scene3d__dust i:nth-child(1)  { left: 7%;  top: 31%; }
.scene3d__dust i:nth-child(2)  { left: 15%; top: 70%; animation-delay: -2.1s; }
.scene3d__dust i:nth-child(3)  { left: 27%; top: 12%; animation-delay: -4.4s; width: 2px; height: 2px; }
.scene3d__dust i:nth-child(4)  { left: 41%; top: 88%; animation-delay: -1.2s; }
.scene3d__dust i:nth-child(5)  { left: 55%; top: 5%;  animation-delay: -5.6s; width: 4px; height: 4px; }
.scene3d__dust i:nth-child(6)  { left: 66%; top: 78%; animation-delay: -3.3s; }
.scene3d__dust i:nth-child(7)  { left: 80%; top: 24%; animation-delay: -6.2s; width: 2px; height: 2px; }
.scene3d__dust i:nth-child(8)  { left: 90%; top: 58%; animation-delay: -0.7s; }
.scene3d__dust i:nth-child(9)  { left: 4%;  top: 50%; animation-delay: -4.9s; width: 2px; height: 2px; }
.scene3d__dust i:nth-child(10) { left: 72%; top: 92%; animation-delay: -2.8s; }
.scene3d__dust i:nth-child(11) { left: 94%; top: 38%; animation-delay: -5.1s; width: 4px; height: 4px; }
.scene3d__dust i:nth-child(12) { left: 33%; top: 44%; animation-delay: -1.9s; width: 2px; height: 2px; }
@keyframes dustFloat {
  from { transform: translate3d(0, 10px, 0); opacity: .15; }
  50%  { opacity: .7; }
  to   { transform: translate3d(6px, -12px, 0); opacity: .2; }
}

/* Orbe central de vidro */
.orb3d {
  position: absolute;
  left: 50%; top: 50%;
  width: 236px; height: 236px;
  margin: -118px 0 0 -118px;
  z-index: 50;                    /* satélites cruzam na frente (z>50) e por trás (z<50) */
}
.orb3d__halo {
  position: absolute; inset: -46%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 0, .30), rgba(255, 140, 0, .08) 46%, transparent 68%);
  animation: haloPulse 5.5s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.07); }
}
.orb3d__ring { position: absolute; inset: -13%; transform: rotateX(72deg); pointer-events: none; }
.orb3d__ring i {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 190, 70, .38);
  animation: ringSpin 30s linear infinite;
}
.orb3d__ring--b { inset: -22%; transform: rotate(56deg) rotateX(74deg); }
.orb3d__ring--b i { border-color: rgba(255, 190, 70, .20); animation-duration: 46s; animation-direction: reverse; }
@keyframes ringSpin { to { transform: rotate(1turn); } }

.orb3d__core {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(115% 115% at 32% 22%, #ffffff 0%, #f7f4ee 38%, #e9e2d4 66%, #d9cdb6 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12),
    0 34px 70px rgba(0, 0, 0, .55),
    0 0 110px rgba(255, 165, 0, .30),
    inset 0 -20px 44px rgba(150, 110, 30, .20),
    inset 0 3px 10px rgba(255, 255, 255, .95);
}
.orb3d__core::after {             /* reflexo especular varrendo a borda do vidro */
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(transparent 0 68%, rgba(255, 255, 255, .75) 76%, transparent 84%);
  -webkit-mask-image: radial-gradient(circle, transparent 84%, #000 87%, #000 97%, transparent 99%);
  mask-image: radial-gradient(circle, transparent 84%, #000 87%, #000 97%, transparent 99%);
  animation: ringSpin 13s linear infinite;
  opacity: .8;
}
/* drop-shadow (não box-shadow): a marca é um paralelogramo, a sombra segue o recorte real */
.orb3d__logo { width: 104px; height: 104px; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .35)); }

/* Satélites (discos de vidro) — transform/opacity/z-index vêm do JS */
.sat3d {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--s); height: var(--s);
  opacity: 0;
  will-change: transform, opacity;
}
.sat3d__disc {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(130% 130% at 30% 22%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 40%, rgba(22, 15, 4, .92) 74%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 0 26px rgba(255, 170, 0, .10);
}
.sat3d__disc::before {            /* brilho de vidro no topo */
  content: "";
  position: absolute;
  left: 14%; top: 8%;
  width: 46%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%);
}
.sat3d__disc img, .sat3d__gicon { width: 46%; height: 46%; object-fit: contain; }
.sat3d__disc img.inv { filter: invert(1); }
.sat3d__disc b { font-size: calc(var(--s) * .28); font-weight: 800; color: #e2e2e2; }

/* Fora da viewport, pausa as animações decorativas (economia de GPU) */
.scene3d:not(.is-live) .scene3d__beams i,
.scene3d:not(.is-live) .scene3d__dust i,
.scene3d:not(.is-live) .orb3d__ring i,
.scene3d:not(.is-live) .orb3d__halo,
.scene3d:not(.is-live) .orb3d__core::after { animation-play-state: paused; }

/* Sem JS: órbita estática legível */
html:not(.js) .sat3d { opacity: 1; }
html:not(.js) .sat3d:nth-child(1) { transform: translate(-50%,-50%) translate(0px,70px)     scale(1.08); z-index: 90; }
html:not(.js) .sat3d:nth-child(2) { transform: translate(-50%,-50%) translate(132px,54px)   scale(1.02); z-index: 81; opacity: .93; }
html:not(.js) .sat3d:nth-child(3) { transform: translate(-50%,-50%) translate(202px,12px)   scale(.87);  z-index: 57; opacity: .75; }
html:not(.js) .sat3d:nth-child(4) { transform: translate(-50%,-50%) translate(178px,-35px)  scale(.71);  z-index: 30; opacity: .55; }
html:not(.js) .sat3d:nth-child(5) { transform: translate(-50%,-50%) translate(70px,-66px)   scale(.60);  z-index: 12; opacity: .42; }
html:not(.js) .sat3d:nth-child(6) { transform: translate(-50%,-50%) translate(-70px,-66px)  scale(.60);  z-index: 12; opacity: .42; }
html:not(.js) .sat3d:nth-child(7) { transform: translate(-50%,-50%) translate(-178px,-35px) scale(.71);  z-index: 30; opacity: .55; }
html:not(.js) .sat3d:nth-child(8) { transform: translate(-50%,-50%) translate(-202px,12px)  scale(.87);  z-index: 57; opacity: .75; }
html:not(.js) .sat3d:nth-child(9) { transform: translate(-50%,-50%) translate(-132px,54px)  scale(1.02); z-index: 81; opacity: .93; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: 72px 0 96px; }
.faq__inner { max-width: 760px; }
.faq h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 40px;
}
.faq__list { display: grid; gap: 14px; }

.faq-item {
  background: #131313;
  border: 1px solid #222;
  border-radius: 14px;
  transition: border-color .25s ease;
}
.faq-item.open { border-color: #3a2f14; }

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  padding: 21px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #f2f2f2;
}
.faq-item__icon {
  position: relative;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  transition: transform .3s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: #8a8a8a;
  border-radius: 1px;
  transition: background .25s ease;
}
.faq-item__icon::before { left: 50%; top: 0; width: 1.8px; height: 100%; transform: translateX(-50%); }
.faq-item__icon::after  { top: 50%; left: 0; height: 1.8px; width: 100%; transform: translateY(-50%); }
.faq-item.open .faq-item__icon { transform: rotate(45deg); }
.faq-item.open .faq-item__icon::before,
.faq-item.open .faq-item__icon::after { background: var(--amber); }

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .38s cubic-bezier(.22,.61,.36,1), visibility 0s .38s;
}
.faq-item__a > div { overflow: hidden; }
.faq-item__a p {
  padding: 0 24px 22px 58px;
  font-size: 14px;
  line-height: 1.7;
  color: #a7a7a7;
}
.faq-item.open .faq-item__a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .38s cubic-bezier(.22,.61,.36,1), visibility 0s 0s;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: 52px 0 32px; }   /* sem border-top: nada de linha separando seções */
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #eee;
  transition: color .2s ease;
}
.footer__top:hover { color: var(--amber); }
.footer__chev { width: 16px; height: 16px; color: var(--amber); }

/* NAP do rodapé: endereço, telefone e Instagram visíveis (ver comentário no HTML) */
.footer__nap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 30px;
  margin-top: 40px;
  font-style: normal;              /* <address> vem em itálico por padrão */
  font-size: 13px;
  color: #8f8f8f;
}
.footer__nap-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  transition: color .2s ease;
}
.footer__nap-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--amber); }
a.footer__nap-item:hover { color: #fff; }

/* No toque, telefone e Instagram tinham só 20px de altura — abaixo do mínimo de 44px
   recomendado para alvo de dedo. O padding vertical resolve sem mudar o visual. */
@media (hover: none) {
  a.footer__nap-item { padding: 12px 0; }
}

.footer__legal {
  margin-top: 22px;                /* era 46: o bloco NAP entrou entre os dois */
  padding-top: 24px;
  border-top: 1px solid #161616;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__legal p { font-size: 12.5px; color: #6f6f6f; }
.footer__links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.footer__links a {
  font-size: 12.5px;
  color: #9a9a9a;
  transition: color .2s ease;
}
.footer__links a:hover { color: var(--amber); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1100px) {
  .hero__grid { gap: 44px; }
  .quote { gap: 44px; }
  .ai__grid { grid-template-columns: 1fr; }
  .scene3d { transform: scale(.86); }
  .orbit-zone { height: calc(560px * .86); align-items: flex-start; }
}

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 16ch; }
  .lead-card { max-width: 560px; margin-inline: auto; width: 100%; }

  .quote { grid-template-columns: 1fr; padding-top: 70px; }
  .mentor { justify-self: start; order: -1; }   /* no empilhado, o cartão vem antes da citação (ref. mobile) */

  .panel__foot { grid-template-columns: 1fr; gap: 16px; }
  .media-card { grid-template-columns: 1fr; height: auto; }
  .media-card__title { padding: 34px 0 8px 34px; }
  .media-card__art { height: 300px; }
}

@media (max-width: 760px) {
  :root { --nav-h: 66px; }

  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(5, 5, 5, .97);
    border-bottom: 1px solid #1c1c1c;
    padding: 8px 28px 18px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease, visibility 0s .3s;
  }
  .nav--open .nav__links {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .3s ease, opacity .3s ease, visibility 0s 0s;
  }
  .nav__links a { padding: 13px 0; width: 100%; font-size: 15px; }
  .nav__burger { display: flex; }

  .sheet { margin: 0 12px; border-radius: 30px; }
  .quote { padding-inline: 26px; }
  .testimonials { padding-inline: 26px; }

  /* Cartão do conselheiro vira paisagem full-width (referência mobile):
     nome horizontal no topo, info à direita, CONSELHEIRO horizontal abaixo */
  .mentor { padding-left: 0; padding-bottom: 34px; width: 100%; }
  .mentor__side {
    writing-mode: horizontal-tb;
    transform: none;
    left: 2px; bottom: 0;
    letter-spacing: .4em;
  }
  .mentor-card {
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 7;
    min-height: 240px;
  }
  /* a caixa fica larga/baixa (10:7) mas a foto é alta (retrato) — object-position:top já
     evita cortar a cabeça, mas sobrava parede vazia acima dela; 20% aproxima o enquadramento
     das cabeças sem arriscar cortar o topo do cabelo */
  .mentor-card__photo { object-position: center 20%; }
  /* nome/cargo flutuavam soltos (sem fundo) direto sobre a foto — removidos no mobile;
     o rótulo "FUNDADORES" abaixo do cartão já dá o contexto. Desktop mantém (tem scrim). */
  .mentor-card__info { display: none; }
  /* placeholder ocupa a metade esquerda — a info mora na direita (sem sobreposição) */
  .ph-photo { padding: 56px 48% 0 0; font-size: 12px; }
  .ph-photo__icon { width: 40px; height: 40px; }

  .stat-card { width: 260px; padding: 32px 24px; }

  /* Órbita mobile = CINTURÃO de largura total (v67). O scale(.62) antigo encolhia os
     discos a miniaturas amontoadas sob o orbe, com margens mortas dos lados. Aqui nada
     é escalado: a cena vira uma faixa 100vw baixa, a elipse achata (--vf .30) e alarga
     (--r 150) e os discos mantêm o tamanho do desktop, varrendo a tela de ponta a ponta
     por trás e pela frente do orbe. Mesmo motor JS; só a geometria muda por breakpoint. */
  /* transform:none anula o scale(.86) herdado do breakpoint 1100 */
  .scene3d { width: 100%; height: 300px; --r: 150; --vf: .30; transform: none; }
  .orbit-zone {
    width: 100vw;                          /* full-bleed: o cinturão usa a tela inteira */
    max-width: none;                       /* a base tem max-width:100%, que travaria o bleed */
    margin-inline: calc(50% - 50vw);
    height: auto;                          /* anula o height fixo do breakpoint 1100 */
    align-items: center;
    /* clipa os discos nas bordas da tela (o overflow da .ai foi liberado p/ o brilho) */
    overflow: hidden;
    overflow: clip;
  }
  .orb3d { transform: scale(.62); }        /* orbe recua e vira o "sol" do cinturão */
  /* sem JS os satélites usam posições fixas de ±202px: só os das pontas clipam um pouco */

  /* Sistema de espaçamento compacto: fluxo contínuo entre seções (ref. mobile) */
  .hero { padding: calc(var(--nav-h) + 40px) 0 52px; }
  .clients { padding: 4px 0 34px; }
  .quote { padding-top: 52px; padding-bottom: 32px; }
  .testimonials { padding-bottom: 52px; }
  .accel, .ai { padding: 60px 0; }
  .stats { padding: 60px 0 52px; }
  .creed { padding: 4px 0; }           /* simetrico tambem no mobile: 56/56 */
  .services { padding: 52px 0 60px; }
  .faq { padding: 52px 0 72px; }
  .footer { padding: 40px 0 26px; }
  .stats__sub { margin-bottom: 28px; }
  .accel .chart-card--wide { margin-top: 30px; }

  .media-card__title { padding-left: 26px; font-size: 2.1rem; }
  .faq-item__a p { padding-left: 24px; }

  /* Hero: selos de parceiros centralizados, ícone acima do texto (ref. mobile) */
  .certified { text-align: center; }
  .partners { justify-content: center; gap: 26px; }
  .partner { flex-direction: column; text-align: center; gap: 8px; }
  .partner__txt { justify-items: center; }

  /* Depoimentos: seta desabilitada some, como na referência */

  /* Faixa de clientes: rótulo em 1 linha, banda mais fina */
  .clients__label { font-size: 10px; letter-spacing: .26em; margin-bottom: 22px; }
  .clients__label::before, .clients__label::after { display: none; }
  .clogo-img { height: 22px; }
  .clogo-img--selo { height: 32px; }

  /* Serviços: abas em linha única com rolagem horizontal (ref. mobile) */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 420px) {
  .container { padding-inline: 20px; }
  .hero h1 { font-size: 2.3rem; }
  /* O clamp base trava em 29.6px de 320 a ~900px, e a 320 isso jogava o título p/ 4 linhas.
     7.9vw dá exatamente 29.6px a 375px, então de 375 p/ cima nada muda: só encolhe abaixo. */
  .stats h2 { font-size: clamp(1.5rem, 7.9vw, 1.85rem); }
  .lead-card { padding: 36px 20px 26px; }
  /* cinturão em telas estreitas: raio menor p/ os discos das pontas não sumirem no clip */
  .scene3d { height: 280px; --r: 126; }
  .orb3d { transform: scale(.56); }
  .btn--glow { padding: 15px 24px; font-size: 14.5px; }
}