/* Tellus, site dos EUA. Tokens e componentes do DESIGN-TELLUS.md. */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/nunito-variable-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ---------- 12. Variáveis ---------- */
:root {
  --tl-bg: #0a0d14;
  --tl-surface: #141a27;
  --tl-surface-2: #1b2334;
  --tl-title: #ffffff;
  --tl-text: #c7d0e2;
  --tl-muted: #8792ab;
  --tl-line: #28364e;
  --tl-accent: #556ff7;
  --tl-accent-hover: #7a8ff9;
  --tl-accent-deep: #4a63ea;   /* índigo um pouco mais fundo: letra branca em cima dá 4,9:1 (o #556ff7 dá 4,2) */

  --tl-glass-bg: rgba(255,255,255,0.04);
  --tl-glass-border: rgba(255,255,255,0.08);
  --tl-glass-border-hover: rgba(85,111,247,0.5);
  --tl-blob-accent: rgba(85,111,247,0.18);
  --tl-blob-dark: rgba(27,35,52,0.9);
  --tl-glow: rgba(85,111,247,0.16);
  --tl-chip-on: rgba(85,111,247,0.14);

  /* Acabamento do Tellus OS (tema Escuro da "pele", 22 e 23/10/2026), trazido para o site em
     25/10/2026: superfície chapada, relevo só no que se clica. Valores iguais aos do sistema. */
  --tl-aceso: linear-gradient(180deg, #8aa4ff, #5f7dfa);          /* pílula acesa: botão principal */
  --tl-sobre-aceso: #060911;                                      /* letra sobre a pílula acesa */
  --tl-aceso-sombra: 0 10px 22px -8px rgba(95,125,250,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
  --tl-aceso-apertado: 0 4px 10px -8px rgba(0,0,0,0.6), inset 0 2px 5px rgba(0,0,0,0.3);
  --tl-relevo-face: linear-gradient(145deg, #222b45, #171e32);    /* tecla em relevo: botão secundário */
  --tl-relevo: -1px -1px 3px rgba(255,255,255,0.05), 3px 3px 8px rgba(0,0,0,0.55);
  --tl-relevo-hover: -1px -1px 3px rgba(255,255,255,0.07), 4px 5px 12px rgba(0,0,0,0.65);
  --tl-apertado-face: linear-gradient(145deg, #171e32, #1d2540);  /* a tecla afundada (apertada ou "você está aqui") */
  --tl-apertado: inset 2px 2px 5px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.04);
  --tl-campo: #0b101d;                                            /* campo afundado */
  --tl-afundado: inset 3px 3px 7px rgba(0,0,0,0.5), inset -2px -2px 6px rgba(255,255,255,0.03);
  --tl-r-pill: 9999px;

  --tl-success: #5f9e6e;
  --tl-warning: #d1a03f;
  --tl-error: #b85f58;

  --tl-r-card: 24px;
  --tl-r-btn: 14px;
  --tl-r-chip: 12px;
  --tl-r-sm: 8px;

  --tl-font-title: 'Archivo', system-ui, sans-serif;
  --tl-font-body: 'Nunito', system-ui, sans-serif;

  --tl-container: 1200px;
  --tl-measure: 560px;
  --tl-section-y: 88px;
  --tl-gap: 16px;
  --tl-stack: 12px;
  --tl-header-h: 72px;
}
@media (min-width: 1024px) {
  :root { --tl-section-y: 140px; --tl-gap: 24px; --tl-stack: 16px; --tl-header-h: 88px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--tl-header-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tl-bg); color: var(--tl-text);
  font-family: var(--tl-font-body); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, .tl-num {
  font-family: var(--tl-font-title); color: var(--tl-title);
  letter-spacing: -0.03em; line-height: 1.02; margin: 0;
  text-wrap: balance;
}
.tl-num { letter-spacing: -0.04em; }
h1 { font-weight: 800; font-size: clamp(34px, 7vw, 64px); }
h2 { font-weight: 700; font-size: clamp(28px, 5vw, 48px); }
h3 { font-weight: 700; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.1; }
p { margin: 0 0 16px; max-width: var(--tl-measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--tl-accent); text-decoration: none; transition: color 160ms ease; }
a:hover { color: var(--tl-accent-hover); }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--tl-accent-hover); outline-offset: 3px; }
@media (min-width: 1024px) { body { font-size: 18px; } }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--sm { width: 18px; height: 18px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--tl-r-btn);
  background: var(--tl-surface-2); color: var(--tl-title);
}
.skip-link:focus { top: 16px; }

/* ---------- 6. Container e seção ---------- */
.tl-container { width: 100%; max-width: var(--tl-container); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 1024px) { .tl-container { padding-inline: 32px; } }
.tl-section { position: relative; padding-block: var(--tl-section-y); overflow: clip; background: var(--tl-bg); }
.tl-section--alt { background: var(--tl-surface); }
/* Sobre o fundo --tl-surface o índigo dá 4,14:1 em texto pequeno; o tom de hover da paleta dá 5,9:1 (AA) */
.tl-section--alt .tl-label,
.tl-section--alt .case__context,
.tl-section--alt a:not(.tl-btn):not(.text-link) { color: var(--tl-accent-hover); }
.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; }
.tl-section > .tl-container { position: relative; z-index: 1; }

.sec-head { max-width: 760px; }
.sec-head > * + * { margin-top: var(--tl-stack); }
.sec-head p:not(.tl-label) { color: var(--tl-text); }
.sec-body { margin-top: 40px; }
@media (min-width: 1024px) { .sec-body { margin-top: 56px; } }

.grid { display: grid; gap: var(--tl-gap); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 7. Componentes ---------- */
.tl-label {
  font-family: var(--tl-font-title); font-weight: 700; font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--tl-accent);
  margin: 0;
}
@media (min-width: 1024px) { .tl-label { font-size: 14px; } }

.tl-bar { display: block; width: 48px; height: 2px; background: var(--tl-accent); }

.tl-mark { font-family: var(--tl-font-title); font-weight: 700; letter-spacing: -0.03em; color: var(--tl-title); }
.tl-mark span { color: var(--tl-accent); }
.tl-mark:hover { color: var(--tl-title); }

/* Botão principal: o aceso do sistema (índigo em degradê, letra escura, brilho índigo), no formato
   de botão do site (canto de 14px; a pílula foi testada em 25/10/2026 e o Rodrigo preferiu este).
   A letra escura dá 5,4:1 no tom mais escuro do degradê; o branco de antes dava 4,19:1. */
.tl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  background: var(--tl-accent); background-image: var(--tl-aceso); color: var(--tl-sobre-aceso);
  font-family: var(--tl-font-body); font-weight: 700; font-size: 16px; line-height: 1.2;
  text-align: center;
  border: 0; border-radius: var(--tl-r-btn); cursor: pointer;
  box-shadow: var(--tl-aceso-sombra);
  -webkit-tap-highlight-color: transparent;
  transition: filter 140ms ease, box-shadow 140ms ease, transform 90ms ease;
}
/* a:hover pinta link de índigo; no iPhone o toque deixa o botão em hover, então a cor fica presa aqui */
.tl-btn:hover, .tl-btn:focus, .tl-btn:active { color: var(--tl-sobre-aceso); }
@media (hover: hover) { .tl-btn:hover { filter: brightness(1.08); } }
/* O aperto do sistema: escurece, a sombra passa para dentro e desce 1px */
.tl-btn:active { filter: brightness(0.94); box-shadow: var(--tl-aceso-apertado); transform: translateY(1px); }
.tl-btn:focus-visible { outline: 2px solid var(--tl-accent-hover); outline-offset: 3px; }
@media (min-width: 1024px) { .tl-btn { font-size: 17px; } }
@media (max-width: 767px) { .tl-btn { width: 100%; } }
.tl-btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
@media (min-width: 1024px) { .tl-btn--sm { font-size: 15px; } }

.tl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--tl-r-chip);
  background: var(--tl-glass-bg); border: 1px solid var(--tl-glass-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-family: var(--tl-font-body); font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--tl-text);
}
.tl-chip--on { background: var(--tl-chip-on); border-color: var(--tl-accent); color: var(--tl-title); padding: 4px 10px; font-size: 13px; }

.tl-card {
  position: relative;
  background: var(--tl-surface);
  background: var(--tl-glass-bg);
  border: 1px solid var(--tl-glass-border);
  border-radius: var(--tl-r-card);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  padding: 24px;
  transition: border-color 160ms ease;
}
@media (min-width: 1024px) { .tl-card { padding: 32px; } }
.tl-card:hover { border-color: var(--tl-glass-border-hover); }
@supports not ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .tl-card { background: var(--tl-surface); }
}
/* No celular o blur fica só no que aparece na primeira dobra (o chip do topo). */
@media (max-width: 767px) {
  .tl-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.tl-card p { color: var(--tl-text); }

/* Cabeçalho do card: no celular o ícone fica ao lado do título (card mais baixo);
   a partir de 768px volta ao ícone em cima e o título embaixo. */
.card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 16px; }
.card-head h3 { margin: 0; }
.card-head__tag { justify-self: end; }
.tl-card .card-head + p { margin-top: 12px; }
/* Card só com título: ícone sempre ao lado, em qualquer largura */
.tl-card--title .card-head { grid-template-areas: none !important; grid-template-columns: auto 1fr; }
.tl-card--title .card-head > * { grid-area: auto !important; }
@media (min-width: 768px) {
  .card-head { grid-template-areas: "icon . tag" "title title title"; row-gap: 20px; }
  .card-head > :first-child { grid-area: icon; }
  .card-head > h3 { grid-area: title; }
  .card-head__tag { grid-area: tag; }
  .tl-card .card-head + p { margin-top: 8px; }
}

.tl-icon-box {
  width: 44px; height: 44px; border-radius: var(--tl-r-chip);
  display: grid; place-items: center;
  background: var(--tl-glass-bg); border: 1px solid var(--tl-glass-border);
  color: var(--tl-accent);
}

.tl-blob {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tl-blob-accent) 30%, transparent);
  width: clamp(360px, 70vw, 780px); aspect-ratio: 1;
}
.tl-blob--dark { background: radial-gradient(closest-side, var(--tl-blob-dark) 30%, transparent); }
.tl-glow {
  position: absolute; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--tl-glow) 0%, transparent 62%);
  width: clamp(420px, 80vw, 900px); aspect-ratio: 1;
}

/* Link com seta ("Get the guide", "See all services"): a tecla em relevo do sistema */
.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  border-radius: var(--tl-r-btn);
  background: var(--tl-relevo-face); box-shadow: var(--tl-relevo);
  font-weight: 600; font-size: 15px; color: var(--tl-title);
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 140ms ease, transform 90ms ease;
}
.text-link .ico { color: var(--tl-accent-hover); }
.text-link:hover, .text-link:focus, .text-link:active { color: var(--tl-title); }
@media (hover: hover) { .text-link:hover { box-shadow: var(--tl-relevo-hover); } }
.text-link:active { background: var(--tl-apertado-face); box-shadow: var(--tl-apertado); transform: translateY(1px); }

.group-title {
  margin: 56px 0 20px;
  font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.3;
  color: var(--tl-text);
}
@media (min-width: 1024px) { .group-title { margin-top: 72px; font-size: 16px; } }
.sec-head + .group-title { margin-top: 40px; }
@media (min-width: 1024px) { .sec-head + .group-title { margin-top: 56px; } }

.statement { margin-top: 40px; }
@media (min-width: 1024px) { .statement { margin-top: 56px; } }
.statement__text {
  font-family: var(--tl-font-title); font-weight: 700; color: var(--tl-title);
  font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.02em;
  max-width: 760px; margin: 0 0 8px;
  text-wrap: balance;
}
.statement__text--sm { font-size: clamp(19px, 2.2vw, 24px); margin-top: 40px; }
@media (min-width: 1024px) { .statement__text--sm { margin-top: 56px; } }

.caption { font-size: 14px; color: var(--tl-muted); }
@media (min-width: 1024px) { .caption { font-size: 15px; } }
.footnote { margin-top: 24px; font-size: 14px; color: var(--tl-muted); }
@media (min-width: 1024px) { .footnote { font-size: 15px; } }
.sec-link { margin-top: 24px; }

/* ---------- Cabeçalho ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--tl-header-h);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.site-header.is-scrolled {
  background: rgba(10,13,20,0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--tl-line);
}
/* No celular o cabeçalho fixo fica sólido: desfocar o que passa por baixo dele a cada quadro
   da rolagem é o que mais pesa no iPhone */
@media (max-width: 1023px) {
  .site-header.is-scrolled { background: rgba(10,13,20,0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tl-chip:not(.hero__chip) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.site-header__mark { font-size: 22px; margin-right: auto; }
@media (min-width: 1024px) { .site-header__mark { font-size: 24px; } }
.site-nav { display: none; }
.site-header__cta { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: flex; gap: 6px; }
  .site-nav a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    font-weight: 600; font-size: 15px; color: var(--tl-text);
    border-radius: var(--tl-r-chip);
    transition: box-shadow 140ms ease, transform 90ms ease;
  }
  .site-nav a:hover { color: var(--tl-title); }
  /* A página em que a pessoa está: a tecla afundada, como a aba escolhida do sistema */
  .site-nav a[aria-current="page"] { color: var(--tl-title); background: var(--tl-apertado-face); box-shadow: var(--tl-apertado); }
  .site-nav a:active { transform: translateY(1px); }
  .site-header__cta { display: inline-flex; width: auto; }
}
.menu-toggle {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-right: -4px;
  background: var(--tl-relevo-face); border: 0; border-radius: var(--tl-r-btn);
  box-shadow: var(--tl-relevo);
  color: var(--tl-title); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 140ms ease, transform 90ms ease;
}
.menu-toggle:active { background: var(--tl-apertado-face); box-shadow: var(--tl-apertado); transform: translateY(1px); }
.menu-toggle .ico { width: 22px; height: 22px; }
@media (min-width: 1024px) { .site-header .menu-toggle { display: none; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--tl-bg);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__top { height: var(--tl-header-h); display: flex; align-items: center; justify-content: space-between; flex: none; }
.mobile-menu__nav { display: flex; flex-direction: column; padding-top: 24px; padding-bottom: 32px; }
.mobile-menu__nav a:not(.tl-btn) {
  display: flex; align-items: center; min-height: 64px;
  font-family: var(--tl-font-title); font-weight: 700; font-size: 28px; letter-spacing: -0.03em;
  color: var(--tl-title);
  border-bottom: 1px solid var(--tl-line);
}
.mobile-menu__nav .tl-btn { margin-top: 32px; }
body.menu-open { overflow: hidden; }

/* ---------- 8. Hero da página inicial ----------
   Sem foto: o texto abre a página e o visual é um painel de vidro com dado (seção 9). */
.hero {
  position: relative; overflow: clip;
  background: var(--tl-bg);
  padding-top: calc(var(--tl-header-h) + 32px); padding-bottom: 72px;
}
.hero__glow { left: -45%; top: -8%; }
.hero__inner { position: relative; z-index: 1; display: grid; gap: 48px; }
.hero__content { max-width: 640px; }
.hero__chip { margin-bottom: 20px; }
.hero__label { margin-bottom: 12px; }
.hero__sub { margin-top: 16px; font-size: 16px; color: var(--tl-text); }
.hero__btn { margin-top: 24px; }
.hero__micro { margin-top: 12px; font-size: 14px; color: var(--tl-text); }

/* Composição flutuante do topo (referência do Rodrigo): três anúncios de exemplo inclinados
   em perspectiva, sobrepostos, com brilho atrás. Sem sombra (DESIGN-TELLUS.md): a borda separa. */
.hero-visual { position: relative; width: 100%; max-width: 500px; height: 550px; justify-self: center; }
.hero-visual__glow {
  position: absolute; z-index: 0; left: 50%; top: 50%; translate: -50% -50%;
  width: 120%; aspect-ratio: 1; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tl-blob-accent) 35%, transparent);
}
.float { position: absolute; z-index: 1; transform-origin: center; transform: var(--tilt); }
.float--google { top: 0; left: 0; width: 80%; max-width: 340px; --tilt: perspective(1000px) rotateX(10deg) rotateY(-14deg) rotateZ(-5deg); }
.float--ai     { top: 290px; left: 0; width: 56%; max-width: 290px; z-index: 2; --tilt: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(-3deg); }
.float--insta  { top: 140px; right: 0; width: 54%; max-width: 230px; z-index: 3; --tilt: perspective(1000px) rotateX(8deg) rotateY(-18deg) rotateZ(5deg); }
.float--pill   { bottom: 6px; right: 4%; z-index: 4; --tilt: rotate(8deg); }
@media (min-width: 1024px) {
  .hero-visual { height: 540px; justify-self: end; }
  .float--ai { top: 320px; width: 64%; }
  .float--insta { top: 150px; }
  .float--pill { bottom: -28px; right: 18%; }
}

/* Anúncio de texto do Google: branco como a página de resultados */
.ad-google { padding: 16px; border-radius: var(--tl-r-btn); background: #fff; color: #0a0d14; font-size: 13px; line-height: 1.3; }
.ad-google p { margin: 0; }
.ad-google__sponsored { font-weight: 700; }
.ad-google__site { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: #1b2334; }
.ad-google__site b { color: #0a0d14; font-size: 14px; }
.ad-google__fav {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tl-accent-deep); color: #fff; font-family: var(--tl-font-title); font-weight: 700; font-size: 14px;
}
.ad-google .ad-google__title { margin-top: 10px; font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--tl-accent-deep); }
.ad-google .ad-google__desc { margin-top: 4px; font-size: 14px; color: #1b2334; }
.ad-google .ad-google__links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 600; color: var(--tl-accent-deep); }

/* Anúncio do Instagram */
.ad-insta { padding: 12px; border-radius: var(--tl-r-btn); background: var(--tl-surface-2); border: 1px solid var(--tl-glass-border); font-size: 13px; line-height: 1.25; color: var(--tl-muted); }
.ad-insta__head { display: flex; align-items: center; gap: 8px; }
.ad-insta__head b { color: var(--tl-title); }
.ad-insta__avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--tl-accent); background: var(--tl-bg); }
.ad-insta__media { margin-top: 10px; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--tl-r-sm); background: var(--tl-bg); }
.ad-insta__media svg { width: 72%; height: auto; }
.ad-insta__cta {
  margin-top: 10px; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 12px; border-radius: var(--tl-r-sm);
  background: var(--tl-accent-deep); color: #fff; font-weight: 600; font-size: 14px;
}
.ad-insta__actions { margin-top: 10px; display: flex; gap: 12px; color: var(--tl-title); }
.ad-insta__save { margin-left: auto; }

/* Anúncio dentro de uma resposta de IA */
.ad-ai {
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border-radius: var(--tl-r-btn); background: var(--tl-surface); border: 1px solid var(--tl-line);
  font-size: 13px; line-height: 1.3; color: var(--tl-text);
}
.ad-ai p { margin: 0; }
.ad-ai__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tl-muted); }
.ad-ai__label .ico { color: var(--tl-accent); width: 16px; height: 16px; }
.ad-ai__ask { align-self: flex-start; max-width: 78%; padding: 8px 12px; border-radius: var(--tl-r-chip); background: var(--tl-surface-2); font-weight: 600; color: var(--tl-title); }
.ad-ai > .mock__bar { flex: none; width: 100%; }
.ad-ai > .mock__bar--short { width: 60%; }
.ad-ai__sponsor {
  display: grid; grid-template-columns: 1fr; justify-items: start; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--tl-accent); border-radius: var(--tl-r-sm); background: var(--tl-chip-on);
}
.ad-ai__btn {
  margin-top: 6px;
  padding: 4px 10px; border-radius: var(--tl-r-sm); background: var(--tl-accent-deep); color: #fff; font-weight: 600;
}

/* Pílula "New lead" */
.pill-lead {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: var(--tl-r-chip); background: var(--tl-accent); background-image: var(--tl-aceso);
  color: var(--tl-sobre-aceso); font-weight: 700; font-size: 14px; box-shadow: var(--tl-aceso-sombra);
}

@media (min-width: 768px) {
  .hero { padding-top: calc(var(--tl-header-h) + 56px); padding-bottom: 96px; }
}
@media (min-width: 1024px) {
  .hero {
    min-height: min(100vh, 900px); display: flex; align-items: center;
    padding-top: calc(var(--tl-header-h) + 56px); padding-bottom: 120px;
  }
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
  .hero__glow { left: -18%; top: 0; }
  .hero__chip { margin-bottom: 28px; }
  .hero__label { margin-bottom: 16px; }
  .hero__sub { font-size: 20px; margin-top: 20px; }
  .hero__btn { margin-top: 32px; }
  .hero__micro { font-size: 15px; }
}

/* ---------- Faixa de prova ---------- */
.proof { background: var(--tl-surface); }
.proof__list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px; padding-block: 32px;
}
.proof__list li { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--tl-text); }
@media (min-width: 1024px) {
  .proof__list { grid-template-columns: repeat(4, 1fr); gap: 0; padding-block: 40px; }
  .proof__list li { font-size: 16px; padding-inline: 24px; border-left: 1px solid var(--tl-line); }
  .proof__list li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Sistema ---------- */
.blob--services { right: -18%; top: 8%; }
/* Cards dos e-books com a capa real: um embaixo do outro, lado a lado a partir de 1024 px (no
   tablet, metade da largura apertaria o botão ao lado da capa) */
.guides { display: grid; gap: var(--tl-gap); margin-top: var(--tl-gap); }
@media (min-width: 1024px) { .guides { grid-template-columns: 1fr 1fr; } }
.guide { display: grid; grid-template-columns: 88px 1fr; column-gap: 20px; align-items: center; }
.guide__cover { width: 88px; height: auto; border-radius: var(--tl-r-sm); }
.guide__body h3 { margin: 0; }
.tl-card .guide__text { margin: 6px 0 0; }
.guide__link { margin-top: 2px; white-space: nowrap; }
/* Celular estreito (360-389 px): capa menor para "Get the playbook" caber numa linha só */
@media (max-width: 389px) {
  .guide { grid-template-columns: 72px 1fr; column-gap: 16px; }
  .guide__cover { width: 72px; }
}
@media (min-width: 768px) {
  .guide { grid-template-columns: 104px 1fr; column-gap: 28px; }
  .guide__cover { width: 104px; }
}

/* ---------- Imagens desenhadas em código ---------- */
/* Rua de lojas da seção da dor */
.street { margin: 32px -12px 0; }
/* A cena tem a proporção do desenho (1000 x 250) e no máximo 220px de altura (880px de largura);
   os pinos ficam por cima, posicionados em porcentagem da largura */
.street__scene { position: relative; max-width: 880px; margin-inline: auto; }
.street__scene > svg { display: block; width: 100%; height: auto; overflow: visible; }
.street__pin { position: absolute; top: 0; left: var(--x); width: var(--w, 4.8%); aspect-ratio: 1; }
.street__pin svg { display: block; width: 100%; height: 100%; }
.street__ground { stroke: var(--tl-line); stroke-width: 2; }
.st-line { stroke: var(--tl-line); stroke-width: 2; }
.street__lit, .mock__store { --awn-a: #556ff7; --awn-b: #c7d0e2; --win: rgba(85,111,247,0.5); --sign: #556ff7; }
.street__dark { --awn-a: #141a27; --awn-b: #1b2334; --win: #0a0d14; --sign: #28364e; }
.street__pin svg { fill: var(--tl-chip-on); stroke: var(--tl-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.street__pin--you svg { fill: none; stroke: var(--tl-muted); stroke-dasharray: 3 2; }
@media (min-width: 768px) { .street { margin-inline: 0; } }
@media (min-width: 1024px) { .street { margin-top: 48px; } }

/* Miniaturas de tela nos cards de Google, Instagram e ChatGPT */
.svc .mock { margin-bottom: 20px; }
.mock {
  height: 172px; padding: 14px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--tl-bg); border: 1px solid var(--tl-line); border-radius: var(--tl-r-btn);
  font-size: 13px; line-height: 1.3; color: var(--tl-text);
}
.mock__search {
  display: flex; align-items: center; gap: 8px; flex: none; height: 32px; padding: 0 12px;
  background: var(--tl-surface-2); border-radius: var(--tl-r-sm); font-weight: 600;
}
.mock__search .ico { color: var(--tl-muted); width: 16px; height: 16px; }
.mock__result {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex: none;
  padding: 10px 12px; border: 1px solid var(--tl-line); border-radius: var(--tl-r-sm);
}
.mock__you { border-color: var(--tl-accent); background: var(--tl-chip-on); }
.mock__name { font-family: var(--tl-font-title); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--tl-title); }
.mock__tag { font-weight: 600; font-size: 13px; color: var(--tl-muted); }
.mock__head .mock__tag { margin-left: auto; }
.mock__bar { display: block; flex-basis: 100%; height: 6px; border-radius: var(--tl-r-sm); background: var(--tl-line); }
.mock .mock__bar--short { flex-basis: 60%; width: 60%; }
.mock__head { display: flex; align-items: center; gap: 8px; flex: none; }
.mock__avatar { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--tl-accent); background: var(--tl-surface-2); }
.mock__media { flex: 1; min-height: 0; display: grid; place-items: center; background: var(--tl-surface); border-radius: var(--tl-r-sm); }
.mock__media svg { height: 72px; width: auto; }
.mock__cta {
  flex: none; height: 28px; display: grid; place-items: center;
  border-radius: var(--tl-r-sm); background: var(--tl-accent-deep); color: #fff; font-weight: 600;
}
.mock__bubble {
  align-self: flex-end; flex: none; padding: 8px 12px;
  background: var(--tl-surface-2); border-radius: var(--tl-r-chip); font-weight: 600; color: var(--tl-title);
}
.mock > .mock__bar { flex: none; }
.mock__sponsor { margin-top: auto; }

/* Relatório de exemplo na seção da avaliação */
.offer__body { display: grid; gap: var(--tl-gap); }
@media (min-width: 1024px) { .offer__body { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.report { margin: 0; }
.report:hover { border-color: var(--tl-glass-border); }
.report__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report__title { margin: 0; font-family: var(--tl-font-title); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--tl-title); }
.report__tag {
  padding: 4px 10px; border: 1px solid var(--tl-line); border-radius: var(--tl-r-chip);
  font-weight: 600; font-size: 13px; color: var(--tl-muted);
}
.report__rows { margin-top: 16px; }
.report__rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--tl-line);
  font-weight: 600; font-size: 15px; color: var(--tl-text);
}
.report__ok, .report__miss { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.report__ok { color: var(--tl-title); }
.report__ok .ico { color: var(--tl-accent); }
.report__miss { color: var(--tl-muted); }
.tl-card .report__stat { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--tl-line); display: flex; flex-direction: column; gap: 4px; }
.report__stat .tl-num { display: inline-block; font-weight: 700; font-size: clamp(40px, 9vw, 56px); line-height: 1; }
.report__stat span:last-child { font-size: 15px; color: var(--tl-text); }

/* Mini gráficos dos cases (desenham os números reais: 2 a 3 leads por semana, 323 em pontos de 10, antes e depois) */
.mini { margin: 16px 0 0; }
.mini figcaption { margin-top: 8px; font-size: 13px; color: var(--tl-muted); }
.mini__bars { display: flex; align-items: flex-end; gap: 6px; height: 48px; }
.mini__bars span { flex: 1; max-width: 28px; height: var(--h); border-radius: var(--tl-r-sm) var(--tl-r-sm) 0 0; background: var(--tl-accent); transform-origin: bottom; }
.mini__dots { display: grid; grid-template-columns: repeat(16, 10px); gap: 6px; }
.mini__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--tl-text); }
.mini__dots span:last-child { background: var(--tl-muted); }
.mini--compare { display: grid; gap: 8px; }
.mini__row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; }
.mini__label { font-size: 13px; font-weight: 600; color: var(--tl-muted); }
.mini__track { height: 10px; border-radius: var(--tl-r-sm); background: var(--tl-surface-2); overflow: hidden; }
.mini__fill { display: block; height: 100%; border-radius: var(--tl-r-sm); transform-origin: left; }
.mini__fill--before { width: 100%; background: var(--tl-muted); }
.mini__fill--after { width: 100%; background: var(--tl-accent); transform: scaleX(0.353); }
@media (max-width: 380px) {
  .mini__dots { grid-template-columns: repeat(16, 8px); gap: 5px; }
  .mini__dots span { width: 8px; height: 8px; }
}

/* Notificações de lead ao lado do formulário */
.leads-stack { margin: 32px 0 0; display: grid; gap: 10px; max-width: 420px; }
.lead-note {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px;
  padding: 12px 16px 12px 12px;
  background: var(--tl-surface); border: 1px solid var(--tl-glass-border); border-radius: var(--tl-r-btn);
}
.lead-note p { margin: 0; }
.lead-note__title { font-family: var(--tl-font-title); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--tl-title); }
.lead-note__meta { font-size: 13px; color: var(--tl-muted); }
.leads-stack__note { font-size: 13px; color: var(--tl-muted); }

/* ---------- Método ---------- */
.steps { display: grid; gap: 28px; position: relative; }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.step h3 { margin-top: 12px; }
.step p { margin-top: 6px; color: var(--tl-text); }
.step__num {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tl-surface); border: 1px solid var(--tl-glass-border);
  font-family: var(--tl-font-title); font-weight: 700; font-size: 20px; color: var(--tl-accent);
}
/* No método o estado final é "aceso" (borda e fundo de acento); a animação parte do apagado */
.steps .step__num { border-color: var(--tl-accent); background: var(--tl-chip-on); }
/* linha fina que liga os círculos (vertical no celular) e, por cima, a parte que se enche de azul */
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 28px; top: 56px; bottom: -28px;
  width: 1px; background: var(--tl-line);
}
.step:not(:last-child)::after { background: var(--tl-accent); transform-origin: top; }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .step { grid-template-columns: 1fr; gap: 0; }
  .step h3 { margin-top: 24px; }
  .step:not(:last-child)::before,
  .step:not(:last-child)::after { left: 56px; right: -24px; top: 28px; bottom: auto; width: auto; height: 1px; }
  .step:not(:last-child)::after { transform-origin: left; }
}

/* ---------- Resultados ---------- */
.blob--results { left: -20%; bottom: -10%; }
.cases { display: grid; gap: var(--tl-gap); }
@media (min-width: 1024px) {
  .cases { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; }
  .case--main { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
}
.case { overflow: hidden; }
.case__context {
  font-family: var(--tl-font-title); font-weight: 700; font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--tl-accent);
  margin: 0;
}
.case__num { position: relative; margin: 16px 0 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.case__num::before {
  content: ""; position: absolute; z-index: -1; left: -40px; top: 50%;
  width: 260px; aspect-ratio: 1; transform: translateY(-50%);
  background: radial-gradient(circle, var(--tl-glow) 0%, transparent 62%);
  pointer-events: none;
}
.case__num .tl-num { font-weight: 700; font-size: clamp(44px, 9vw, 56px); line-height: 1; }
.case__unit { font-family: var(--tl-font-title); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--tl-title); }
.case__line { color: var(--tl-text); }
.case--main .case__num .tl-num { font-size: clamp(56px, 12vw, 110px); }
.case--main .case__num::before { width: 420px; }
@media (min-width: 1024px) {
  .case__num .tl-num { font-size: 56px; }
  .case--main .case__unit { font-size: 24px; }
}

/* ---------- Para quem é ---------- */
.fit { display: grid; gap: 40px; }
@media (min-width: 768px) { .fit { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 1024px) { .fit { gap: 56px; } }
.fit__list { margin-top: 16px; }
.fit__list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--tl-line);
  color: var(--tl-text);
}
.fit__list li:first-child { border-top: 1px solid var(--tl-line); }
.fit__list .ico { margin-top: 1px; }
.fit__yes { color: var(--tl-accent); }
.fit__no { color: var(--tl-muted); }

/* ---------- Fundador ---------- */
.founder { display: grid; gap: 40px; align-items: center; }
.founder__photo {
  width: 100%; max-width: 460px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  border-radius: 24px 80px 24px 80px;
}
.founder__text > * + * { margin-top: var(--tl-stack); }
.founder__quote {
  font-family: var(--tl-font-title); font-weight: 600; color: var(--tl-title);
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.25; letter-spacing: -0.02em;
  margin-block: 24px !important;
}
@media (min-width: 768px) {
  .founder { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }
}
@media (min-width: 1024px) { .founder { gap: 88px; } }

/* ---------- Oferta ---------- */
.offer__glow { right: -25%; top: -10%; }
.deliverables .step__num { width: 44px; height: 44px; font-size: 17px; background: transparent; }
.offer__close { margin-top: 8px; }
.offer__close .tl-btn { margin-top: 16px; }
.offer__close .caption { margin-top: 12px; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; border-top: 1px solid var(--tl-line); }
.faq details { border-bottom: 1px solid var(--tl-line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding-block: 16px;
  font-family: var(--tl-font-title); font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--tl-title);
}
@media (min-width: 1024px) { .faq summary { font-size: 18px; } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--tl-font-title); font-weight: 600; font-size: 26px; line-height: 1; color: var(--tl-accent);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 24px; color: var(--tl-text); max-width: 720px; }

/* ---------- Formulário ---------- */
.form-wrap { display: grid; gap: 32px; align-items: start; }
.form-wrap__intro > * + * { margin-top: var(--tl-stack); }
.form-wrap__phone { color: var(--tl-text); }
.form-wrap__phone a { white-space: nowrap; }
@media (min-width: 1024px) {
  .form-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 88px; }
  .form-wrap__intro { position: sticky; top: calc(var(--tl-header-h) + 40px); }
}
.lead-form { display: grid; gap: 20px; }
.lead-form:hover { border-color: var(--tl-glass-border); }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend {
  display: block; margin-bottom: 8px; padding: 0;
  font-weight: 600; font-size: 14px; color: var(--tl-text);
}
.field__opt { font-weight: 400; color: var(--tl-muted); }
/* Campos afundados, como no sistema: fundo mais escuro e a sombra para dentro, sem borda */
.tl-field {
  width: 100%; min-height: 52px; padding: 14px 16px;
  background-color: var(--tl-campo); color: var(--tl-title);
  border: 1px solid transparent; border-radius: var(--tl-r-btn);
  box-shadow: var(--tl-afundado);
  font-family: var(--tl-font-body); font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tl-field::placeholder { color: var(--tl-muted); }
.tl-field:focus { outline: none; border-color: rgba(122,143,249,0.45); box-shadow: var(--tl-afundado), 0 0 0 3px rgba(122,143,249,0.14); }
.tl-field:focus-visible { outline: 2px solid var(--tl-accent-hover); outline-offset: 3px; }
.tl-field[aria-invalid="true"] { border-color: var(--tl-error); }
.tl-select {
  appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238792ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 20px;
}
.tl-select:invalid { color: var(--tl-muted); }
.tl-select option { color: var(--tl-title); background: var(--tl-campo); }
.field__error { margin: 8px 0 0; font-size: 13px; color: var(--tl-error); }

.choice-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* Opções do formulário: teclas em relevo; a escolhida acende (o aceso do sistema) */
.choice-chips label.tl-chip {
  display: inline-flex; align-items: center; margin: 0; padding: 8px 16px; min-height: 48px; cursor: pointer;
  font-size: 14px; line-height: 1.3; color: var(--tl-text);
  background: var(--tl-relevo-face); border-color: transparent; border-radius: var(--tl-r-chip);
  box-shadow: var(--tl-relevo);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 140ms ease, transform 90ms ease;
}
@media (hover: hover) { .choice-chips label.tl-chip:hover { color: var(--tl-title); box-shadow: var(--tl-relevo-hover); } }
.choice-chips label.tl-chip:active { background: var(--tl-apertado-face); box-shadow: var(--tl-apertado); transform: translateY(1px); }
.choice-chips input:checked + label.tl-chip { background: var(--tl-aceso); color: var(--tl-sobre-aceso); font-weight: 700; box-shadow: var(--tl-aceso-sombra); }
.choice-chips input:focus-visible + label { outline: 2px solid var(--tl-accent-hover); outline-offset: 3px; }
.lead-form__btn { width: 100%; margin-top: 4px; }
.lead-form__micro { margin: 0; }
.lead-form__status { margin: 0; font-size: 14px; color: var(--tl-text); }
/* Consentimento para ligação e SMS (exigência prática nos EUA para mandar texto ao lead) */
.lead-form__consent { margin: 0; font-size: 13px; line-height: 1.4; color: var(--tl-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
/* .tl-card p pinta todo parágrafo do card com a cor do texto; aqui volta a legenda e o erro */
.lead-form .caption, .lead-form .lead-form__consent { color: var(--tl-muted); }
.lead-form .lead-form__status--erro { color: var(--tl-error); }

/* ---------- Rodapé ---------- */
.site-footer { background: var(--tl-bg); border-top: 1px solid var(--tl-line); padding-top: 72px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
/* No celular: marca e contato na largura toda, Services e Company lado a lado. */
.site-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.site-footer__brand, .site-footer__contact { grid-column: 1 / -1; }
.site-footer__mark { display: inline-block; font-size: 28px; }
.site-footer .site-footer__tagline { margin-top: 8px; font-family: var(--tl-font-title); font-weight: 600; color: var(--tl-title); }
.site-footer p { font-size: 15px; color: var(--tl-muted); }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__col h2 { font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin-bottom: 8px; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 48px; font-size: 15px; line-height: 1.3; color: var(--tl-muted); }
@media (min-width: 1024px) { .site-footer__col a { min-height: 40px; } }
.site-footer__col a:hover, .site-footer__bottom a:hover { color: var(--tl-title); }
.site-footer__bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--tl-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
}
.site-footer__bottom p { margin: 0; font-size: 14px; }
.site-footer__bottom a { color: var(--tl-muted); }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
  .site-footer__brand, .site-footer__contact { grid-column: auto; }
}
@media (min-width: 1024px) { .site-footer { padding-top: 88px; } .site-footer__mark { font-size: 32px; } }

/* ---------- Barra fixa do celular ---------- */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--tl-bg); box-shadow: 0 -1px 0 var(--tl-line);
  transform: translateY(110%); transition: transform 200ms ease;
}
.sticky-cta.is-visible { transform: none; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* =====================================================================
   Páginas internas (Services, About, Assessment, Thank you, legais, 404)
   ===================================================================== */

/* Topo de página interna: sem foto e sem 100svh (seção 8 do DESIGN-TELLUS.md) */
.page-hero { position: relative; overflow: clip; background: var(--tl-bg); padding: calc(var(--tl-header-h) + 48px) 0 72px; }
@media (min-width: 1024px) { .page-hero { padding: calc(var(--tl-header-h) + 96px) 0 120px; } }
.page-hero > .tl-container { position: relative; z-index: 1; }
.page-hero__text { max-width: 760px; }
.page-hero__text > * + * { margin-top: var(--tl-stack); }
.page-hero h1 { font-size: clamp(34px, 6vw, 56px); }
.page-hero__sub { font-size: 17px; color: var(--tl-text); }
@media (min-width: 1024px) { .page-hero__sub { font-size: 20px; } }
.blob--page { right: -30%; top: -20%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding: 0; }
.chips .tl-chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
.chips .tl-chip .ico { width: 16px; height: 16px; color: var(--tl-accent); }

/* Bloco de serviço: texto de um lado, imagem do outro (alterna no desktop) */
.svc-rows { display: grid; gap: 72px; }
@media (min-width: 1024px) { .svc-rows { gap: 120px; } }
.svc-row { display: grid; gap: 32px; align-items: center; scroll-margin-top: calc(var(--tl-header-h) + 24px); }
@media (min-width: 1024px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; }
  .svc-row:nth-child(even) .svc-row__visual { order: -1; }
}
.svc-row__text > * + * { margin-top: var(--tl-stack); }
.svc-row__head { display: flex; align-items: center; gap: 14px; }
.svc-row__head h3 { font-size: clamp(24px, 3vw, 32px); }
.svc-row__lead { font-size: 17px; color: var(--tl-title); }
@media (min-width: 1024px) { .svc-row__lead { font-size: 19px; } }
.check-list { display: grid; gap: 10px; margin-top: 20px !important; }
.check-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--tl-text); }
.check-list .ico { width: 20px; height: 20px; color: var(--tl-accent); margin-top: 2px; }
.svc-row__best { font-size: 15px; color: var(--tl-muted); }
.svc-row__best b { color: var(--tl-text); font-weight: 600; }
.svc-row__visual { display: grid; place-items: center; position: relative; padding: 24px 8px; }
.svc-row__visual::before {
  content: ""; position: absolute; inset: 10% 5%; z-index: 0; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, var(--tl-blob-accent) 30%, transparent);
}
.svc-visual { position: relative; z-index: 1; width: 100%; max-width: 360px; --tilt: perspective(1000px) rotateX(6deg) rotateY(-10deg) rotateZ(-3deg); transform: var(--tilt); }
.svc-row:nth-child(even) .svc-visual { --tilt: perspective(1000px) rotateX(6deg) rotateY(10deg) rotateZ(3deg); }
.svc-visual--narrow { max-width: 280px; }

/* Miniatura de página de site (web design) */
.mock-page { border-radius: var(--tl-r-btn); background: var(--tl-surface); border: 1px solid var(--tl-line); overflow: hidden; font-size: 13px; color: var(--tl-muted); }
.mock-page__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--tl-line); }
.mock-page__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--tl-line); }
.mock-page__url { margin-left: 8px; flex: 1; padding: 4px 10px; border-radius: var(--tl-r-sm); background: var(--tl-surface-2); }
.mock-page__body { padding: 18px; display: grid; gap: 10px; }
.mock-page__title { font-family: var(--tl-font-title); font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: -0.02em; color: var(--tl-title); }
.mock-page__btn { justify-self: start; padding: 8px 14px; border-radius: var(--tl-r-sm); background: var(--tl-accent-deep); color: #fff; font-weight: 600; }
.mock-page__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.mock-page__cols span { height: 44px; border-radius: var(--tl-r-sm); background: var(--tl-surface-2); }

/* Miniatura do mapa do Google (SEO) */
.mock-map { border-radius: var(--tl-r-btn); background: var(--tl-surface); border: 1px solid var(--tl-line); overflow: hidden; font-size: 13px; color: var(--tl-muted); }
.mock-map__area {
  position: relative; height: 120px;
  background-color: var(--tl-surface-2);
  background-image: linear-gradient(var(--tl-line) 1px, transparent 1px), linear-gradient(90deg, var(--tl-line) 1px, transparent 1px);
  background-size: 28px 28px;
}
.mock-map__pin { position: absolute; width: 26px; height: 26px; color: var(--tl-muted); }
.mock-map__pin .ico { width: 26px; height: 26px; }
.mock-map__pin--you { color: var(--tl-accent); }
.mock-map__list li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--tl-line); }
.mock-map__list li:first-child { border-top: 0; background: var(--tl-chip-on); }
.mock-map__list b { color: var(--tl-title); font-weight: 600; }
.mock-map__rating { display: inline-flex; align-items: center; gap: 4px; color: var(--tl-text); }
.mock-map__rating .ico { width: 14px; height: 14px; color: var(--tl-accent); }

/* Outras plataformas de anúncio (Home e Services): a frase e as etiquetas */
.more-channels { margin-top: 24px; }
.more-channels p { color: var(--tl-text); }
.more-channels .chips { margin-top: 14px; }
.channels { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--tl-line); display: grid; gap: 20px; }
.channels h3 { font-size: clamp(22px, 2.6vw, 28px); }
.channels__text p { margin-top: 8px; max-width: 560px; color: var(--tl-text); }
.channels .chips { margin-top: 0; }
@media (min-width: 1024px) { .channels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; margin-top: 96px; } }

/* Tellus x agência comum */
.vs { margin-top: 40px; border-radius: var(--tl-r-card); border: 1px solid var(--tl-glass-border); background: var(--tl-glass-bg); overflow: hidden; }
@media (min-width: 1024px) { .vs { margin-top: 56px; } }
.vs__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 16px 20px; border-top: 1px solid var(--tl-line); }
.vs__row:first-child { border-top: 0; }
.vs__label { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--tl-muted); }
.vs__them, .vs__us { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: 15px; }
.vs__them { color: var(--tl-muted); }
.vs__us { color: var(--tl-title); font-weight: 600; }
.vs__them .ico, .vs__us .ico { width: 18px; height: 18px; margin-top: 2px; }
.vs__us .ico { color: var(--tl-accent); }
.vs__head { background: var(--tl-surface); }
.vs__head .vs__them, .vs__head .vs__us { display: block; font-family: var(--tl-font-title); font-weight: 700; font-size: 15px; }
.vs__head .vs__us { color: var(--tl-title); }
@media (min-width: 768px) {
  .vs__row { grid-template-columns: 200px 1fr 1fr; align-items: center; padding: 18px 28px; gap: 24px; }
  .vs__label { grid-column: auto; font-size: 15px; }
}

/* Os e-books em destaque (página de serviços): capa inclinada ao lado do texto, um embaixo do
   outro no celular e lado a lado no computador */
#resources { scroll-margin-top: calc(var(--tl-header-h) + 24px); }
.resources { display: grid; gap: 48px; }
.resource { display: grid; grid-template-columns: 112px 1fr; gap: 24px; align-items: center; }
.resource__cover { width: 112px; height: auto; border-radius: var(--tl-r-sm); transform: rotate(-4deg); }
.resource__text > * + * { margin-top: 10px; }
.resource__text .text-link { margin-top: 16px; }
@media (min-width: 1024px) {
  .resources { grid-template-columns: 1fr 1fr; gap: 56px; }
  .resource { grid-template-columns: 150px 1fr; gap: 36px; }
  .resource__cover { width: 150px; }
}

/* Faixa de fecho com botão */
.cta-band .sec-head + .tl-btn { margin-top: 28px; }

/* About: números do fundador e painel de exemplo */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px !important; padding-top: 24px; border-top: 1px solid var(--tl-line); }
.facts p { margin: 0; }
.facts__num { font-family: var(--tl-font-title); font-weight: 700; font-size: clamp(22px, 4vw, 30px); letter-spacing: -0.03em; color: var(--tl-title); line-height: 1.1; }
.facts__label { font-size: 13px; color: var(--tl-muted); }
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; } }
.icon-list { display: grid; gap: 20px; margin-top: 32px; }
.icon-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.icon-list h3 { font-size: 19px; }
.icon-list p { margin: 4px 0 0; color: var(--tl-text); }
.dash { margin: 0; width: 100%; max-width: 440px; justify-self: center; }
.dash:hover { border-color: var(--tl-glass-border); }
.dash__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash__title { margin: 0; font-weight: 600; font-size: 14px; color: var(--tl-text); }
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.dash__kpis div { padding: 12px; border-radius: var(--tl-r-chip); background: var(--tl-surface-2); }
.dash__kpis b { display: block; font-family: var(--tl-font-title); font-size: 22px; letter-spacing: -0.03em; color: var(--tl-title); }
.dash__kpis span { font-size: 13px; color: var(--tl-muted); }
.dash__rows { margin-top: 16px; }
.dash__rows li { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--tl-line); font-size: 15px; font-weight: 600; color: var(--tl-text); }
.dash__rows b { font-family: var(--tl-font-title); color: var(--tl-title); }
.dash__bar { grid-column: 1 / -1; height: 8px; border-radius: var(--tl-r-sm); background: var(--tl-surface-2); overflow: hidden; }
.dash__bar span { display: block; height: 100%; width: var(--w); border-radius: var(--tl-r-sm); background: var(--tl-accent); transform-origin: left; }
.dash__note { margin-top: 12px; font-size: 13px; color: var(--tl-muted); }

/* Assessment: formulário ao lado do que a pessoa leva */
.assess { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .assess { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 72px; } }
.assess__form > * + * { margin-top: var(--tl-stack); }
.assess__form .lead-form { margin-top: 24px; }
.assess__aside { display: grid; gap: 24px; }
.mini-list { display: grid; gap: 12px; }
.mini-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
.mini-list .step__num { width: 36px; height: 36px; font-size: 15px; background: transparent; }
.mini-list b { display: block; font-family: var(--tl-font-title); color: var(--tl-title); font-size: 17px; }
.mini-list span { font-size: 15px; color: var(--tl-text); }
.slots { display: flex; gap: 10px; margin-top: 20px; }
.slots span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--tl-r-chip); border: 1px solid var(--tl-accent); background: var(--tl-chip-on); color: var(--tl-accent); }

/* Thank you: três passos */
@media (min-width: 1024px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }
.handy { margin-top: 40px; }
.handy h2 { font-size: clamp(20px, 2.6vw, 26px); }

/* Texto jurídico */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(22px, 3vw, 28px); margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--tl-text); max-width: none; }
.prose p { margin: 12px 0 0; }
.prose ul { margin: 12px 0 0; padding-left: 20px; list-style: disc; }
.prose li + li { margin-top: 6px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* 404: a loja apagada */
.lost { width: 180px; margin-bottom: 8px; }
.lost svg { width: 100%; height: auto; display: block; }

/* Página do e-book (/top-of-the-map) */
.guide-points { margin-top: 20px !important; }
.hero-visual--guide { height: 470px; max-width: 460px; }
.float--cover { top: 0; left: 6%; width: 58%; max-width: 280px; --tilt: perspective(1000px) rotateX(6deg) rotateY(-14deg) rotateZ(-4deg); }
.float--cover img { display: block; width: 100%; height: auto; border-radius: var(--tl-r-sm); border: 1px solid var(--tl-glass-border); }
.float--map { top: 190px; right: 0; width: 56%; max-width: 250px; z-index: 2; --tilt: perspective(1000px) rotateX(8deg) rotateY(-16deg) rotateZ(4deg); }
.hero-visual--guide .float--pill { top: auto; bottom: 8px; left: 4%; right: auto; --tilt: rotate(-6deg); }
@media (min-width: 1024px) {
  .hero-visual--guide { height: 540px; }
  .float--cover { max-width: 300px; }
  .float--map { top: 230px; max-width: 270px; }
  .hero-visual--guide .float--pill { bottom: 20px; left: 2%; }
}
.pillar-tag { padding: 4px 10px; font-size: 13px; color: var(--tl-muted); -webkit-backdrop-filter: none; backdrop-filter: none; }
.parts { display: grid; column-gap: 40px; border-top: 1px solid var(--tl-line); }
@media (min-width: 768px) { .parts { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(6, auto); } }
.parts li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--tl-line); color: var(--tl-title); font-weight: 600; }
.parts__num { font-family: var(--tl-font-title); font-weight: 700; font-size: 15px; color: var(--tl-accent); font-variant-numeric: tabular-nums; }
.pages { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 4px 20px 12px; scrollbar-width: thin; }
.pages__item { flex: 0 0 auto; width: 240px; margin: 0; scroll-snap-align: start; }
.pages__item img { display: block; width: 100%; height: auto; border-radius: var(--tl-r-sm); border: 1px solid var(--tl-glass-border); background: var(--tl-surface-2); }
.pages__item figcaption { margin-top: 12px; font-size: 14px; color: var(--tl-text); }
@media (min-width: 1024px) {
  .pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; overflow: visible; margin-inline: 0; padding: 0; }
  .pages__item { width: auto; }
  .pages__item figcaption { font-size: 15px; }
}
.stat__num { margin: 0; font-family: var(--tl-font-title); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--tl-title); }
@media (min-width: 1024px) { .stat__num { font-size: 56px; } }
.stat p + p { margin-top: 10px; }
.tl-card .stat__source { margin-top: 14px; font-size: 13px; color: var(--tl-muted); }
.buy { display: grid; gap: var(--tl-gap); align-items: start; }
@media (min-width: 1024px) { .buy { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.buy__card:hover, .guarantee:hover { border-color: var(--tl-glass-border); }
.buy__top { display: grid; grid-template-columns: 88px 1fr; gap: 20px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--tl-line); }
.buy__cover { width: 88px; height: auto; border-radius: var(--tl-r-sm); transform: rotate(-4deg); }
.buy__name { margin: 0; font-weight: 600; color: var(--tl-text); }
.buy__price { margin: 4px 0 2px; font-family: var(--tl-font-title); font-weight: 700; font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; color: var(--tl-title); }
.buy__btn { margin-top: 28px; }
.tl-card .buy__note { margin-top: 12px; color: var(--tl-muted); }
.guarantee > * + * { margin-top: var(--tl-stack); }
.guarantee h3 { margin-top: 20px; }
.tl-card .guarantee__line { font-family: var(--tl-font-title); font-weight: 600; color: var(--tl-title); }
.guide-alt { margin-top: 16px; }

/* Página do Persuasion That Sells (/persuasion-that-sells): mesma base da página do guia, com a
   conversa de texto no lugar do mapa e as listas de 9 partes e 7 segmentos */
.mock-sms { border-radius: var(--tl-r-btn); background: var(--tl-surface); border: 1px solid var(--tl-line); overflow: hidden; font-size: 13px; color: var(--tl-text); }
.mock-sms__head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--tl-line); color: var(--tl-title); }
.mock-sms__head b { font-weight: 600; }
.mock-sms__avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tl-surface-2); color: var(--tl-muted); font-size: 12px; font-weight: 700; }
.mock-sms__thread { display: grid; gap: 8px; padding: 14px; }
.mock-sms__msg { justify-self: start; max-width: 86%; margin: 0; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--tl-surface-2); line-height: 1.35; }
.mock-sms__msg--out { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--tl-accent-deep); color: #fff; }
@media (min-width: 768px) {
  .parts--5 { grid-template-rows: repeat(5, auto); }
  .parts--4 { grid-template-rows: repeat(4, auto); }
}
.parts__note { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--tl-muted); }
.nowrap { white-space: nowrap; }

/* ---------- 10. Movimento ----------
   Pequenos efeitos para o site não ficar parado (pedido do Rodrigo, 24/10): entradas curtas, uma
   vez só, e os cartões do topo flutuando. Desliga com "reduzir movimento".
   25/10/2026, revisão de fluidez no iPhone: saiu o quadro a quadro (steps). No Safari do iPhone,
   animação em quadros não vai para a placa de vídeo; roda no processador principal, junto com o
   rastreio e a rolagem, e engasga ou espera para começar. Agora tudo é suave e só mexe em
   transform e opacity, as duas propriedades que o celular anima na placa de vídeo sem redesenhar
   a página. Regras para quem mexer depois: nada de steps(), nada de animar cor, borda, fundo,
   largura, altura, filtro ou sombra, nada de animação dentro de SVG (o elemento animado fica
   fora do desenho, como os pinos da rua) e nada de duas animações mexendo na mesma propriedade
   do mesmo elemento (a inclinação dos cartões fica em --tilt e a flutuação mexe no filho). */
:root {
  --tl-ease: cubic-bezier(0.22, 1, 0.36, 1);      /* sai rápido e assenta devagar: entradas */
  --tl-ease-io: cubic-bezier(0.45, 0, 0.55, 1);   /* ida e volta: flutuação, tremida, piscada */
}
@keyframes tl-pop {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes tl-blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: 0.2; }
}
@keyframes tl-jiggle {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-12deg); }
  45%      { transform: rotate(9deg); }
  70%      { transform: rotate(-4deg); }
}
@keyframes tl-stamp {
  0%   { opacity: 0; transform: scale(1.3); }
  60%  { opacity: 1; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tl-nudge {
  0%, 100% { transform: none; }
  50%      { transform: translate3d(3px, 0, 0); }
}

/* Entrada das seções: sobe 14px e aparece; os cards de uma grade entram um depois do outro */
.js .reveal { opacity: 0; }
.js .reveal.is-visible { opacity: 1; animation: tl-pop 600ms var(--tl-ease) var(--d, 0ms) both; }
.grid > :nth-child(2), .steps > :nth-child(2), .cases > :nth-child(2) { --d: 90ms; }
.grid > :nth-child(3), .steps > :nth-child(3), .cases > :nth-child(3) { --d: 180ms; }
.grid > :nth-child(4), .steps > :nth-child(4) { --d: 270ms; }
.steps > :nth-child(5) { --d: 360ms; }

/* Topo: os cartões entram um por vez, já inclinados (--tilt), e depois flutuam devagar.
   A entrada mexe no cartão; a flutuação mexe no conteúdo dele, para as duas não brigarem. */
@keyframes tl-float-in {
  from { opacity: 0; transform: var(--tilt) translate3d(0, 18px, 0) scale(0.92); }
  to   { opacity: 1; transform: var(--tilt); }
}
@keyframes tl-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -7px, 0); }
}
.hero-visual.is-visible .float { animation: tl-float-in 700ms var(--tl-ease) calc(var(--i) * 200ms + 150ms) both; }
.hero-visual.is-visible .float > * { animation: tl-bob 5.6s var(--tl-ease-io) calc(var(--i) * 450ms + 1.2s) infinite; }

/* Ícones dão uma tremida e os números das entregas carimbam, logo depois do card entrar */
.reveal.is-visible .tl-icon-box .ico { animation: tl-jiggle 640ms var(--tl-ease-io) calc(var(--d, 0ms) + 380ms) both; }
.deliverables .is-visible .step__num { animation: tl-stamp 520ms var(--tl-ease) calc(var(--d, 0ms) + 220ms) both; }

/* Método e passos: os números acendem um depois do outro (crescem e ganham opacidade) e a
   linha até o passo seguinte se enche logo depois */
@keyframes tl-light {
  0%   { opacity: 0.25; transform: scale(0.82); }
  55%  { opacity: 1;    transform: scale(1.12); }
  100% { opacity: 1;    transform: scale(1); }
}
@keyframes tl-fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tl-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.steps > :nth-child(1) { --n: 0; }
.steps > :nth-child(2) { --n: 1; }
.steps > :nth-child(3) { --n: 2; }
.steps > :nth-child(4) { --n: 3; }
.steps > :nth-child(5) { --n: 4; }
.steps.is-visible .step__num { animation: tl-light 620ms var(--tl-ease) calc(var(--n) * 380ms + 250ms) both; }
.steps.is-visible .step:not(:last-child)::after { animation: tl-fill-y 440ms var(--tl-ease) calc(var(--n) * 380ms + 520ms) both; }
@media (min-width: 1024px) {
  .steps.is-visible .step:not(:last-child)::after { animation-name: tl-fill-x; }
}

/* Números dos resultados sobem suavemente (main.js); dígitos de largura fixa para nada pular */
.tl-num[data-count] { display: inline-block; font-variant-numeric: tabular-nums; }

/* Pinos (rua da Home, 404 e mapas): caem um por vez; o "?" da sua loja cai por último e pisca.
   A queda e a piscada são uma animação só, para não brigarem pela opacidade. */
@keyframes tl-drop {
  0%   { opacity: 0; transform: translate3d(0, -18px, 0); }
  70%  { opacity: 1; transform: translate3d(0, 3px, 0); }
  100% { opacity: 1; transform: none; }
}
@keyframes tl-drop-blink {
  0%   { opacity: 0;   transform: translate3d(0, -18px, 0); }
  25%  { opacity: 1;   transform: translate3d(0, 3px, 0); }
  35%  { opacity: 1;   transform: none; }
  52%  { opacity: 0.2; transform: none; }
  68%  { opacity: 1;   transform: none; }
  84%  { opacity: 0.2; transform: none; }
  100% { opacity: 1;   transform: none; }
}
.street.is-visible .street__pin { animation: tl-drop 520ms var(--tl-ease) calc(var(--i) * 220ms + 200ms) both; }
.street.is-visible .street__pin--you { animation: tl-drop-blink 1700ms var(--tl-ease-io) calc(var(--i) * 220ms + 200ms) both; }

/* Miniaturas: o "Your business" entra depois do card; relatório linha por linha */
.svc.is-visible .mock__you { animation: tl-pop 600ms var(--tl-ease) calc(var(--d, 0ms) + 380ms) both; }
.svc.is-visible .mock__cta { animation: tl-blink 1000ms var(--tl-ease-io) calc(var(--d, 0ms) + 900ms); }
.report.is-visible .report__rows li { animation: tl-pop 520ms var(--tl-ease) calc(var(--i) * 180ms + 200ms) both; }

/* Mini gráficos dos cases: barras sobem, pontinhos aparecem em lotes, o "depois" encolhe */
@keyframes tl-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tl-shrink { from { transform: scaleX(1); } to { transform: scaleX(0.353); } }
@keyframes tl-dot {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
.case.is-visible .mini__bars span { animation: tl-grow-y 520ms var(--tl-ease) calc(var(--d, 0ms) + var(--k) * 80ms + 300ms) both; }
.case.is-visible .mini__dots span { animation: tl-dot 360ms var(--tl-ease) calc(var(--d, 0ms) + var(--k) * 30ms + 300ms) both; }
.case.is-visible .mini__fill--after { animation: tl-shrink 900ms var(--tl-ease) calc(var(--d, 0ms) + 500ms) both; }

/* Notificações de lead chegando, uma por vez, e o telefone treme */
.leads-stack.is-visible .lead-note { animation: tl-pop 560ms var(--tl-ease) calc(var(--i) * 320ms + 200ms) both; }
.leads-stack.is-visible .lead-note .ico { animation: none; }
.leads-stack.is-visible .lead-note:first-child .ico { animation: tl-jiggle 640ms var(--tl-ease-io) 700ms 2 both; }

/* Páginas internas: o painel de cada serviço entra já inclinado e flutua pelo conteúdo */
.svc-row.is-visible .svc-visual { animation: tl-float-in 700ms var(--tl-ease) 200ms both; }
.svc-row.is-visible .svc-visual > * { animation: tl-bob 5.6s var(--tl-ease-io) 1.2s infinite; }
.svc-row.is-visible .mock-map__pin { animation: tl-drop 520ms var(--tl-ease) calc(var(--i) * 200ms + 500ms) both; }
.dash.is-visible .dash__bar span { animation: tl-fill-x 640ms var(--tl-ease) calc(var(--k) * 220ms + 300ms) both; }
.facts.is-visible .facts__num { display: inline-block; animation: tl-stamp 520ms var(--tl-ease) calc(var(--k) * 180ms + 200ms) both; }
.slots.is-visible span { animation: tl-dot 420ms var(--tl-ease) calc(var(--k) * 160ms + 200ms) both; }

/* E-book: as páginas de dentro entram uma por vez; o pino do seu negócio cai e pisca no mapa do topo */
.pages.is-visible .pages__item { animation: tl-pop 560ms var(--tl-ease) calc(var(--k) * 110ms + 100ms) both; }
.hero-visual--guide.is-visible .mock-map__pin--you { animation: tl-drop-blink 1700ms var(--tl-ease-io) 1.1s both; }
.parts.is-visible .parts__num { animation: tl-stamp 520ms var(--tl-ease) 200ms both; }
.hero-visual--guide.is-visible .mock-sms__msg { animation: tl-pop 520ms var(--tl-ease) calc(var(--k, 0) * 700ms + 900ms) both; }
.mock-sms__msg + .mock-sms__msg { --k: 1; }

/* Seta dos links anda quando o mouse passa */
@media (hover: hover) { .text-link:hover .ico { animation: tl-nudge 700ms var(--tl-ease-io) infinite; } }

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