/* ==========================================================================
   Scale Force — Design System
   ========================================================================== */

/* Anton hospedada localmente (não via Google Fonts): fica disponível
   assim que o CSS carrega, sem round-trip extra a fonts.gstatic.com —
   elimina o "flash" de fonte errada no título em vez de só o mascarar. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../assets/fonts/Anton-Regular.woff2") format("woff2");
}

:root {
  --bg: #000000;
  --bg-alt: #000000;
  --bg-card: rgba(0, 0, 0, 0.72);
  --headline: #ffffff;
  --accent: #00c853;
  --accent-dim: #00c85326;
  --accent-glow: #00c85355;
  --text-muted: #a3a3a3;
  --text-faint: #a3a3a3;
  --border: rgba(255, 255, 255, 0.25);
  --border-strong: rgba(255, 255, 255, 0.4);

  /* Acento de canto: cor usada no ::after com mask (ver secção
     "Acento de canto"). Tem de usar border-width (não padding) para definir
     o anel — só assim o browser reduz corretamente o raio do canto interior,
     senão o canto inferior direito fica visivelmente mais fino que o superior
     esquerdo. */
  --corner-border: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 65%);
  --corner-border-hover: linear-gradient(160deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.14) 65%);

  --font-display: "Anton", sans-serif;
  --font-body: "Poppins", sans-serif;

  --container: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Reserva sempre o espaço da scrollbar, mesmo quando body fica com
     overflow:hidden (popup aberto) — sem isto, a scrollbar desaparece,
     a página fica mais larga e todo o conteúdo dá um "passo" para o lado. */
  scrollbar-gutter: stable;
  /* Mesmo estilo da scrollbar das dropdown lists, aplicado ao scroll de
     toda a página. */
  scrollbar-width: thin;
  scrollbar-color: #ffffff #000000;
}

html::-webkit-scrollbar {
  width: 8px;
}

html::-webkit-scrollbar-track {
  background: #000000;
  border: 1px solid var(--border);
}

html::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 4px;
}

body {
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -400px;
  background-image:
    radial-gradient(1.4px 1.4px at 18px 26px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 84px 112px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.6px 1.6px at 142px 54px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 208px 188px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.8px 1.8px at 266px 38px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 322px 152px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.4px 1.4px at 46px 210px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 116px 266px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.6px 1.6px at 190px 306px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 300px 8px, rgba(255, 255, 255, 0.65), transparent);
  background-repeat: repeat;
  background-size: 340px 340px;
  animation: star-drift 95s linear infinite;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}

@keyframes star-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(340px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Esconde visualmente mas mantem acessivel a leitores de ecra e a
   motores de busca/LLMs que leem o DOM (nao usar display:none, que
   remove o conteudo da arvore de acessibilidade). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--headline);
  font-weight: 400;
  letter-spacing: 0.3px;
  line-height: 1.35;
  text-transform: uppercase;
  /* Evita "orfaos" (uma palavra sozinha na ultima linha) em qualquer
     titulo, a qualquer largura de ecra — o browser distribui o texto
     por linhas mais equilibradas em vez de deixar sobrar uma palavra. */
  text-wrap: balance;
}

::selection {
  background: var(--accent);
  color: #052012;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  /* Espaçamento uniforme entre TODAS as secções do site — antes havia
     vários ritmos diferentes (110px aqui, 64/72 no stats-showcase,
     32/70 no --tight); agora é sempre o mesmo valor, com --tight e o
     stats-showcase alinhados a ele (ver abaixo). */
  padding: 72px 0;
  position: relative;
}

.section--alt {
  background: transparent;
}

.section--tight {
  padding: 72px 0;
}

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
  margin-inline: auto;
  text-align: center;
}

/* Quando o section-head só tem o eyebrow (sem título/subtítulo dentro,
   como acontece antes do .central-message), o próprio eyebrow já tem
   margin-bottom de 18px — a margin-bottom do section-head não colapsa
   com a dele aqui, por isso soma por cima e duplica o gap. Zerando esta,
   fica só o gap do eyebrow, igual ao "eyebrow → título" usado em todo
   o lado. */
.section-head:has(+ .central-message) {
  margin-bottom: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  text-shadow: 0 0 16px rgba(0, 200, 83, 0.55);
}

.section-title {
  font-size: clamp(32px, 4.2vw, 52px);
  margin-bottom: 18px;
}

.section-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 560px;
  margin-inline: auto;
  /* Mesma lógica dos títulos: evita 1-2 palavras "abandonadas" sozinhas
     na última linha de subtítulos/parágrafos curtos. */
  text-wrap: balance;
}

/* Quando uma secção tem varios paragrafos de corpo (ex.: "O Problema"),
   dao-se um respiro entre eles em vez de ficarem colados. */
.section-sub + .section-sub {
  margin-top: 14px;
}

.section-sub--punch {
  color: var(--headline);
  font-style: italic;
  font-weight: 500;
}

.text-accent {
  color: var(--accent);
}

.text-outline {
  -webkit-text-stroke: 1px var(--border-strong);
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}

.btn--primary {
  position: relative;
  isolation: isolate;
  background: var(--accent);
  color: #000000;
  box-shadow: 0 8px 24px -6px var(--accent-glow);
  /* Pulsar sempre, não só ao passar o rato — o hover só acrescenta a
     mudança de cor/sombra por cima do batimento que já está a correr. */
  animation: btn-pulse 1.1s ease-in-out infinite;
}

/* Traço de luz que percorre a borda do botão: em vez de um elemento reto
   a rodar (que não se curva nos cantos), usamos um anel via mask (a
   mesma técnica dos widgets) com um conic-gradient a girar por trás —
   assim o brilho acompanha sempre a curva real da borda, cantos incluídos. */
@property --spin-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background: conic-gradient(from var(--spin-angle), transparent 0deg, transparent 270deg, rgba(255, 255, 255, 0.35) 300deg, rgba(255, 255, 255, 0.85) 335deg, #ffffff 350deg, rgba(255, 255, 255, 0.85) 360deg) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 26px rgba(255, 255, 255, 0.3));
  animation: btn-trace-spin 3.2s linear infinite;
  pointer-events: none;
}

@keyframes btn-trace-spin {
  to { --spin-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::before {
    animation: none;
    opacity: 0;
  }
}

.btn--primary:hover {
  /* O batimento já corre sempre (ver .btn--primary); o hover só muda a
     cor do texto (de preto para branco) e intensifica a sombra. */
  box-shadow: 0 14px 32px -6px var(--accent-glow);
  color: #ffffff;
}

@keyframes btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary,
  .btn--ghost {
    animation: none;
  }
}

.btn--ghost {
  position: relative;
  background: transparent;
  color: var(--headline);
  border: 1px solid var(--border-strong);
  /* Pulsar sempre, tal como o .btn--primary — ver comentário lá. */
  will-change: transform;
  animation: btn-pulse 1.1s ease-in-out infinite;
}

.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid transparent;
  background: conic-gradient(from var(--spin-angle), transparent 0deg, transparent 270deg, rgba(255, 255, 255, 0.3) 300deg, rgba(255, 255, 255, 0.75) 335deg, #ffffff 350deg, rgba(255, 255, 255, 0.75) 360deg) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.25));
  animation: btn-trace-spin 3.2s linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn--ghost::before {
    animation: none;
    opacity: 0;
  }
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 9px 18px;
  font-size: 13px;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  transition: background 0.3s var(--ease), padding 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-scrolled {
  padding: 11px 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(14px);
  border-color: var(--border);
}

/* Com o menu mobile aberto, header e dropdown ficam sólidos (sem nada de
   "transparente"/blur a deixar transparecer o conteúdo por trás) e sem
   nenhuma linha a separar os dois — devem parecer uma única superfície.
   Duas coisas garantem isso:
   1) border-color:transparent aqui, sobrepondo-se ao border-color de
      .is-scrolled sempre que as duas classes coexistem (menu aberto
      depois de já ter feito scroll) — sem isto, a borda do header
      "scrolled" continuava visível por cima do dropdown.
   2) Mesmo fundo opaco do dropdown (0.98, ver .header.is-open .nav mais
      abaixo) em vez do 0.85 "scrolled" — mais sólido, sem qualquer
      sensação de transparência enquanto o menu está aberto. */
.header.is-open {
  background: rgba(0, 0, 0, 0.98);
  backdrop-filter: blur(14px);
  border-color: transparent;
}

.header__inner {
  /* Flex + justify-content:center (em vez de grid 1fr/auto/1fr): o
     conjunto logo+nav+actions fica centrado como um bloco só, com a
     mesma margem à esquerda e à direita. O espaço logo↔nav e o espaço
     nav↔actions ficam iguais entre si (ver margin-right abaixo); o CTA
     "Agendar Reunião" e o seletor de idioma, dentro de .header__actions,
     ficam com um respiro mais apertado, como um par visual único. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__inner .logo {
  /* Ligeiramente menor que o margin-right do .nav a seguir — a logo,
     por ser um traço fino sobre fundo preto (ao contrário do botão
     verde sólido do outro lado), "lê" visualmente como mais distante
     mesmo com o espaço fisicamente igual. Margin em vez do gap do flex
     container (que somaria aos dois lados ao mesmo tempo, em vez de só
     controlar este). */
  margin-right: 44px;
}

.header__inner .nav {
  margin-right: 56px;
}

.logo {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--headline);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.logo__mark {
  height: 68px;
  width: auto;
  display: block;
}

.header .logo__mark {
  /* 68px (tamanho do "Website - backup") ficou grande demais com o
     header atual, mais compacto — meio-termo entre esse valor e o
     tamanho anterior (45px). Reduzido ligeiramente de 54px para 46px
     (2026-09-21) para não puxar a altura do header para cima. */
  height: 46px;
  filter: drop-shadow(0 0 14px rgba(0, 200, 83, 0.28));
  /* Nudge fino para cima: o header centra tudo verticalmente (align-items:
     center), mas a seta do logo tem mais "peso" visual em baixo, por
     isso perfeitamente centrado ainda parecia ligeiramente baixo. */
  transform: translateY(-4px);
}

.footer__brand .logo__mark {
  height: 68px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  transition: color 0.2s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s var(--ease);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--headline);
}

/* CTA "Agendar Reunião" dentro do próprio menu — só existe visualmente
   dentro do dropdown mobile (ver @media max-width:900px); no nav
   horizontal do desktop este botão já vive à parte, em .header__actions,
   por isso aqui fica sempre escondido por omissão. */
.nav__cta-mobile {
  display: none;
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

.header__actions {
  /* CTA + seletor de idioma ficam juntos, como um par — o respiro maior
     e simétrico está entre logo↔nav e nav↔actions (ver .header__inner). */
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--headline);
}

/* ---------- Seletor de idioma (header) ---------- */
.lang-switch {
  position: relative;
}

.lang-switch__trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--headline);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.lang-switch__trigger:hover,
.lang-switch__trigger:focus-visible,
.lang-switch.is-open .lang-switch__trigger {
  outline: none;
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.lang-switch__globe {
  flex-shrink: 0;
  color: var(--headline);
}

.lang-switch__code {
  letter-spacing: 0.3px;
}

.lang-switch__arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
}

.lang-switch.is-open .lang-switch__arrow {
  transform: rotate(180deg);
}

.lang-switch__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  min-width: 172px;
  list-style: none;
  background: #0a0a0a;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}

.lang-switch.is-open .lang-switch__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.lang-switch__option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  padding: 9px 10px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.lang-switch__option:hover,
.lang-switch__option.is-active {
  background: var(--accent);
  color: #052012;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 178px 0 118px;
}

/* Heros sem fotos de fundadores nem stats por baixo (ex.: Reunião
   Estratégica) não precisam do mesmo respiro em baixo — sem isto, sobra
   um vazio grande antes da secção seguinte. */
.hero--tight {
  padding-bottom: 64px;
}

@media (max-width: 760px) {
  .hero--tight {
    padding-bottom: 48px;
  }
}

@keyframes glow-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
  50% { transform: translateX(-50%) scale(1.18); opacity: 1; }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 1020px;
  margin-inline: auto;
  text-align: center;
}

.hero__title {
  font-size: clamp(40px, 5.8vw, 76px);
  margin-bottom: 24px;
}

/* H1 do hero: visualmente é a logo "SCALE FORCE" (impacto de marca),
   mas o H1 continua a conter texto real (ver .visually-hidden) para o
   SEO/GEO nao perder a frase-chave que descreve a empresa.

   --hero-logo-w e --hero-person-w ficam disponiveis em .hero para que
   a posicao das fotos dos fundadores (mais abaixo) se calcule sempre a
   partir do tamanho REAL da logo, em vez de valores fixos adivinhados —
   assim os dois nunca se sobrepoem, seja qual for a largura do ecra ou
   o zoom do browser (ver .hero__person--daniel/--martim). */
.hero {
  --hero-logo-ar: 15.3707;
  /* Logo maior do que a original (780px), mas ligeiramente recuada do
     pico de 850px testado antes — 820px é o teto real em ecrãs largos. */
  --hero-logo-h: clamp(44px, 5.8vw, 90px);
  --hero-person-gap: 36px;
  /* margem minima em relacao ao bordo REAL do ecra — nunca ultrapassada,
     nem quando a logo grande + a foto no tamanho ideal nao cabem as
     duas ao mesmo tempo (ecrãs entre ~1150-1600px). */
  --hero-person-edge: 16px;
  /* largura minima legivel da foto — usada tambem para limitar a logo
     (ver --hero-logo-w) e nao so o inverso, senao entre ~1150-1300px
     a logo ficava sempre no maximo (agora 820px) e nao sobrava espaco
     nem para a foto no seu minimo, causando sobreposicao. */
  --hero-person-w-min: 200px;
  --hero-logo-w: min(
    100%,
    calc(var(--hero-logo-h) * var(--hero-logo-ar)),
    820px,
    calc(100vw - 2 * (var(--hero-person-w-min) + var(--hero-person-gap) + var(--hero-person-edge)))
  );
  /* a largura da foto adapta-se ao espaco que sobra depois da logo e do
     respiro — cresce ate 350px quando ha espaco de sobra (igual ao
     tamanho máximo dos fundadores em Sobre Nós, .team-card--photo, para
     ficarem do mesmo tamanho nas duas páginas), encolhe ate 200px
     (ainda legivel) quando a logo grande deixa pouco espaco. Isto e o
     que garante zero sobreposicao em qualquer largura/zoom, em vez de
     um valor de largura fixo que podia nao caber. */
  --hero-person-w: clamp(var(--hero-person-w-min), calc(50vw - var(--hero-logo-w) / 2 - var(--hero-person-gap) - var(--hero-person-edge)), 350px);
}

.hero__logo {
  display: block;
  aspect-ratio: 5492.10 / 357.31;
  height: var(--hero-logo-h);
  width: var(--hero-logo-w);
  margin-inline: auto;
  filter: drop-shadow(0 0 28px rgba(0, 200, 83, 0.22));
}


/* "SCALE" (do método) escrito com o lettering exato da Logo.
   Máscara vetorial + currentColor: acompanha sempre a cor do texto onde
   está inserido (nav, botões, links, headings, corpo) e nunca perde
   qualidade em zoom nenhum. */
.sf-scale {
  display: inline-block;
  width: 5.3em;
  height: 0.7em;
  max-width: 100%;
  vertical-align: baseline;
  transform: translateY(0.04em) translateZ(0);
  /* Isola a mascara vetorial na sua propria camada de composicao: sem
     isto, o backdrop-filter do header (.header.is-scrolled) forca uma
     nova rasterizacao da mascara a cada frame de scroll, e o
     arredondamento de subpixel faz as letras "tremerem" visivelmente. */
  will-change: transform;
  backface-visibility: hidden;
  margin: 0 0.05em;
  background-color: currentColor;
  /* Wordmark "SCALE" embutido como data URI: funciona na mesma quando o
     index.html e aberto diretamente do disco (file://) ou servido noutro
     alojamento que nao devolva o SVG com o MIME certo. */
  --sf-scale-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2211.40%2014.74%202653.20%20352.78%22%20fill%3D%22%23ffffff%22%20fill-rule%3D%22evenodd%22%20role%3D%22img%22%20aria-label%3D%22SCALE%22%3E%3Cpath%20d%3D%22M299.750%20366.510C249.975%20366.300%20187.088%20366.209%20160.000%20366.306C108.450%20366.491%2014.367%20365.801%2012.870%20365.227C12.392%20365.043%2012.000%20364.619%2012.000%20364.284C12.000%20363.641%2020.916%20353.733%2032.596%20341.394C36.426%20337.348%2041.515%20331.915%2043.905%20329.320C46.295%20326.725%2051.962%20320.634%2056.500%20315.783C61.038%20310.933%2067.338%20304.172%2070.500%20300.759C87.352%20282.575%2091.674%20278.081%2092.812%20277.563C95.451%20276.360%20111.110%20275.919%20140.000%20276.233C189.506%20276.771%20418.948%20276.980%20423.500%20276.491C434.634%20275.295%20443.255%20270.780%20447.656%20263.840C449.845%20260.390%20450.372%20258.872%20450.749%20254.937C451.543%20246.646%20447.961%20239.361%20442.139%20237.427C439.610%20236.587%20404.947%20236.109%20373.000%20236.473C359.663%20236.625%20337.613%20236.637%20324.000%20236.500C290.809%20236.165%20284.067%20236.178%20223.750%20236.699L171.750%20237.149%20165.500%20236.309C162.062%20235.847%20157.450%20235.235%20155.250%20234.951C151.238%20234.431%20145.967%20232.952%20140.115%20230.704C138.391%20230.042%20136.566%20229.500%20136.060%20229.500C135.555%20229.500%20133.928%20228.856%20132.445%20228.068C130.963%20227.280%20129.192%20226.461%20128.510%20226.248C127.827%20226.034%20126.702%20225.473%20126.010%20225.000C125.317%20224.527%20123.104%20223.047%20121.093%20221.710C111.532%20215.356%20103.649%20205.016%2099.013%20192.750C96.375%20185.768%2095.392%20179.486%2095.133%20167.939L94.901%20157.629%2095.921%20152.189C96.482%20149.198%2097.088%20145.625%2097.266%20144.250C97.445%20142.875%2098.227%20139.387%2099.004%20136.500C99.782%20133.613%20101.012%20129.000%20101.737%20126.250C106.558%20107.976%20110.203%2099.949%20120.735%2084.415C131.203%2068.974%20145.922%2054.179%20158.677%2046.276C159.542%2045.740%20162.154%2044.069%20164.482%2042.564C172.185%2037.581%20179.402%2034.177%20191.000%2030.057C204.453%2025.278%20213.701%2023.266%20230.310%2021.502C236.370%2020.858%20637.388%2020.516%20638.373%2021.153C639.584%2021.937%20637.170%2024.975%20618.250%2046.486C615.775%2049.300%20612.737%2052.783%20611.500%2054.227C610.263%2055.671%20606.888%2059.501%20604.000%2062.737C601.112%2065.973%20596.275%2071.477%20593.250%2074.968C576.593%2094.189%20563.835%20108.185%20562.228%20109.000L560.750%20109.750%20396.250%20109.788C305.775%20109.809%20230.968%20110.007%20230.013%20110.227C229.058%20110.448%20227.483%20111.106%20226.513%20111.689C225.543%20112.273%20223.891%20113.187%20222.842%20113.722C218.943%20115.707%20214.661%20120.272%20212.379%20124.878L210.250%20129.175%20210.250%20134.505L210.250%20139.835%20211.711%20141.944C213.510%20144.539%20216.431%20146.906%20218.611%20147.534C223.249%20148.869%20244.319%20149.107%20335.750%20148.858C437.416%20148.581%20491.836%20149.013%20500.500%20150.164C520.255%20152.790%20537.015%20159.966%20546.782%20169.981C553.592%20176.963%20562.005%20190.518%20563.919%20197.591C566.337%20206.523%20567.007%20220.706%20565.580%20232.750C564.193%20244.455%20558.981%20262.713%20553.232%20276.000C552.578%20277.512%20551.345%20280.438%20550.493%20282.500C549.077%20285.927%20546.325%20291.565%20543.726%20296.361C541.973%20299.595%20536.886%20307.111%20534.325%20310.250C527.487%20318.631%20513.016%20332.830%20507.000%20337.063C490.185%20348.893%20477.968%20355.040%20462.500%20359.454C460.712%20359.964%20458.575%20360.664%20457.750%20361.010C454.532%20362.360%20442.354%20364.544%20431.500%20365.720C421.175%20366.838%20403.254%20366.945%20299.750%20366.510ZM1119.750%20366.424C1066.489%20366.024%201061.500%20365.852%201061.500%20364.424C1061.500%20364.130%201063.181%20362.058%201065.236%20359.819C1067.291%20357.581%201072.632%20351.700%201077.105%20346.750C1081.578%20341.800%201086.273%20336.738%201087.537%20335.500C1088.801%20334.262%201091.413%20331.450%201093.341%20329.250C1095.269%20327.050%201099.992%20322.100%201103.836%20318.250C1107.680%20314.400%201113.620%20308.107%201117.037%20304.266C1124.219%20296.193%201138.431%20281.061%201148.986%20270.250C1153.013%20266.125%201158.798%20259.825%201161.841%20256.250C1164.884%20252.675%201168.948%20248.353%201170.872%20246.645C1172.796%20244.937%201176.818%20240.787%201179.810%20237.423C1182.802%20234.058%201187.050%20229.377%201189.250%20227.019C1203.032%20212.251%201207.624%20207.402%201215.000%20199.828C1219.537%20195.169%201224.487%20190.067%201226.000%20188.491C1227.513%20186.914%201230.670%20183.628%201233.016%20181.187C1235.362%20178.747%201238.154%20175.738%201239.220%20174.500C1242.045%20171.220%201259.083%20153.447%201271.571%20140.751C1286.107%20125.975%201287.791%20124.212%201294.750%20116.494C1298.050%20112.835%201305.605%20104.870%201311.539%2098.795C1317.473%2092.720%201324.335%2085.645%201326.789%2083.071C1329.243%2080.498%201333.838%2075.766%201337.000%2072.556C1340.162%2069.345%201344.634%2064.701%201346.937%2062.234C1355.601%2052.956%201371.294%2037.178%201376.217%2032.796C1383.477%2026.334%201392.127%2021.956%201402.000%2019.746L1405.750%2018.907%201429.500%2018.668L1453.250%2018.428%201458.885%2019.413C1469.375%2021.247%201475.416%2025.443%201479.442%2033.694C1483.495%2041.998%201486.727%2049.009%201490.762%2058.250C1493.043%2063.475%201495.741%2069.550%201496.758%2071.750C1497.775%2073.950%201499.601%2078.112%201500.816%2081.000C1503.137%2086.517%201503.626%2087.642%201508.427%2098.500C1510.068%20102.213%201512.789%20108.513%201514.472%20112.500C1516.156%20116.487%201518.076%20120.987%201518.740%20122.500C1519.403%20124.013%201520.783%20127.162%201521.806%20129.500C1522.828%20131.838%201525.315%20137.071%201527.332%20141.129C1529.350%20145.187%201531.000%20148.646%201531.000%20148.814C1531.000%20148.983%201533.044%20153.650%201535.543%20159.186C1538.042%20164.721%201541.336%20172.062%201542.863%20175.500C1544.391%20178.938%201546.153%20182.875%201546.779%20184.250C1547.405%20185.625%201548.301%20187.650%201548.770%20188.750C1549.239%20189.850%201550.400%20192.550%201551.351%20194.750C1552.302%20196.950%201553.510%20199.963%201554.037%20201.446C1554.564%20202.928%201555.192%20204.391%201555.432%20204.696C1555.673%20205.001%201556.149%20206.150%201556.491%20207.250C1556.832%20208.350%201557.439%20209.772%201557.840%20210.410C1558.241%20211.048%201558.876%20212.440%201559.251%20213.504C1560.548%20217.180%201565.683%20227.889%201570.158%20236.250C1571.208%20238.212%201574.000%20244.420%201574.000%20244.793C1574.000%20245.079%201575.901%20249.647%201578.248%20255.000C1578.911%20256.512%201580.834%20260.900%201582.520%20264.750C1584.207%20268.600%201586.009%20272.650%201586.525%20273.750C1588.828%20278.661%201593.473%20289.751%201595.829%20295.963C1596.499%20297.730%201597.370%20299.755%201597.765%20300.463C1598.425%20301.647%201599.512%20304.313%201601.305%20309.142C1602.023%20311.077%201604.543%20316.316%201607.971%20323.000C1610.861%20328.637%201613.500%20334.266%201613.500%20334.795C1613.500%20335.053%201613.978%20336.157%201614.563%20337.248C1615.148%20338.339%201615.908%20340.023%201616.253%20340.991C1616.598%20341.958%201618.032%20345.108%201619.440%20347.990C1620.848%20350.873%201622.000%20353.514%201622.000%20353.861C1622.000%20354.207%201623.120%20356.645%201624.490%20359.279L1626.979%20364.066%201625.762%20365.283L1624.545%20366.500%201567.148%20366.476C1507.011%20366.450%201500.703%20366.291%201499.008%20364.757C1497.726%20363.597%201493.981%20355.514%201486.496%20337.750C1485.453%20335.275%201482.076%20327.738%201478.993%20321.000C1475.909%20314.262%201472.949%20307.625%201472.414%20306.250C1471.880%20304.875%201470.002%20300.712%201468.241%20297.000C1466.481%20293.288%201463.556%20286.650%201461.743%20282.250C1457.014%20270.777%201453.820%20263.274%201450.142%20255.000C1446.501%20246.811%201444.942%20243.215%201442.229%20236.750C1441.191%20234.275%201440.160%20231.912%201439.938%20231.500C1439.363%20230.429%201433.350%20216.916%201428.369%20205.500C1423.950%20195.374%201416.000%20176.228%201416.000%20175.714C1416.000%20174.501%201408.181%20157.295%201402.564%20146.150C1400.814%20142.675%201399.557%20141.500%201397.594%20141.500C1396.779%20141.500%201386.566%20151.481%201383.014%20155.750C1382.098%20156.850%201377.922%20161.350%201373.733%20165.750C1369.544%20170.150%201365.160%20174.875%201363.991%20176.250C1362.822%20177.625%201357.443%20183.137%201352.038%20188.500C1346.633%20193.863%201341.014%20199.600%201339.552%20201.250C1328.692%20213.507%201317.465%20225.240%201307.974%20234.250C1305.367%20236.725%201301.325%20240.884%201298.992%20243.492C1296.659%20246.100%201292.024%20251.050%201288.693%20254.492C1285.361%20257.934%201280.748%20262.767%201278.443%20265.232C1276.137%20267.698%201271.888%20272.085%201269.000%20274.982C1266.112%20277.880%201261.725%20282.407%201259.250%20285.043C1246.082%20299.070%201240.017%20305.461%201232.982%20312.727C1228.710%20317.140%201222.600%20323.450%201219.405%20326.750C1216.210%20330.050%201212.056%20334.421%201210.173%20336.462C1207.304%20339.574%201192.208%20355.208%201188.698%20358.703C1188.119%20359.279%201186.685%20360.875%201185.510%20362.250C1182.650%20365.598%201179.977%20367.023%201176.758%20366.917C1175.378%20366.872%201149.725%20366.650%201119.750%20366.424ZM1687.500%20366.508C1679.938%20366.302%201671.331%20366.104%201668.375%20366.067L1663.000%20366.000%201663.000%20365.234C1663.000%20364.813%201663.697%20362.169%201664.550%20359.359C1665.402%20356.549%201666.622%20352.450%201667.259%20350.250C1667.897%20348.050%201668.748%20345.238%201669.151%20344.000C1669.553%20342.762%201670.170%20340.738%201670.522%20339.500C1670.874%20338.262%201671.780%20335.337%201672.537%20333.000C1674.708%20326.297%201681.226%20305.824%201683.203%20299.500C1684.192%20296.337%201685.001%20293.466%201685.000%20293.118C1685.000%20292.771%201685.215%20292.096%201685.477%20291.618C1685.739%20291.141%201686.437%20289.062%201687.028%20287.000C1687.618%20284.938%201688.288%20282.800%201688.516%20282.250C1688.743%20281.700%201689.866%20278.212%201691.011%20274.500C1692.156%20270.788%201693.501%20266.512%201694.000%20265.000C1694.499%20263.488%201695.849%20259.212%201697.000%20255.500C1698.151%20251.787%201699.501%20247.512%201700.000%20246.000C1700.499%20244.488%201701.849%20240.213%201703.000%20236.500C1704.151%20232.787%201705.491%20228.512%201705.977%20227.000C1706.463%20225.488%201707.598%20221.887%201708.500%20219.000C1709.402%20216.113%201710.537%20212.512%201711.023%20211.000C1711.509%20209.488%201712.849%20205.213%201714.000%20201.500C1715.151%20197.787%201716.501%20193.512%201717.000%20192.000C1717.499%20190.488%201718.849%20186.213%201720.000%20182.500C1721.151%20178.787%201722.491%20174.512%201722.977%20173.000C1723.463%20171.488%201724.600%20167.887%201725.504%20165.000C1726.408%20162.113%201727.756%20157.838%201728.500%20155.500C1729.244%20153.162%201730.594%20148.887%201731.500%20146.000C1732.406%20143.113%201733.760%20138.838%201734.508%20136.500C1735.256%20134.162%201736.597%20129.887%201737.488%20127.000C1738.378%20124.112%201739.725%20119.838%201740.480%20117.500C1741.235%20115.162%201742.371%20111.562%201743.003%20109.500C1745.088%20102.703%201747.121%2096.266%201747.504%2095.250C1747.711%2094.700%201748.391%2092.562%201749.014%2090.500C1749.637%2088.438%201750.756%2084.838%201751.500%2082.500C1752.244%2080.162%201753.595%2075.888%201754.503%2073.000C1756.565%2066.443%201758.752%2059.519%201760.504%2054.000C1761.246%2051.663%201762.363%2048.062%201762.986%2046.000C1763.609%2043.938%201764.302%2041.800%201764.526%2041.250C1764.751%2040.700%201765.171%2039.462%201765.461%2038.500C1765.752%2037.538%201766.635%2034.725%201767.424%2032.250C1768.212%2029.775%201769.141%2026.738%201769.486%2025.500C1770.935%2020.309%201771.998%2018.389%201773.669%2017.942C1775.600%2017.426%201868.510%2017.218%201872.154%2017.721C1874.366%2018.027%201875.237%2018.396%201875.811%2019.274L1876.566%2020.425%201875.013%2026.087C1870.959%2040.870%201867.017%2054.320%201863.756%2064.500C1863.095%2066.562%201862.397%2069.150%201862.204%2070.250C1862.012%2071.350%201861.523%2073.150%201861.118%2074.250C1860.714%2075.350%201859.971%2077.825%201859.468%2079.750C1858.965%2081.675%201857.735%2085.500%201856.735%2088.250C1855.736%2091.000%201854.473%2094.600%201853.930%2096.250C1853.387%2097.900%201852.624%2099.976%201852.235%20100.863C1851.846%20101.751%201851.185%20103.953%201850.766%20105.758C1850.348%20107.563%201849.692%20109.649%201849.310%20110.395C1848.927%20111.140%201848.338%20113.100%201848.000%20114.750C1847.662%20116.400%201847.089%20118.329%201846.726%20119.037C1846.363%20119.745%201845.630%20121.995%201845.097%20124.037C1844.565%20126.079%201842.877%20131.238%201841.347%20135.500C1839.817%20139.762%201838.203%20144.262%201837.761%20145.500C1836.732%20148.379%201832.174%20162.474%201829.758%20170.250C1828.732%20173.550%201827.487%20177.262%201826.991%20178.500C1826.494%20179.738%201825.747%20181.988%201825.330%20183.500C1824.913%20185.012%201824.129%20187.488%201823.588%20189.000C1823.046%20190.512%201821.883%20194.113%201821.001%20197.000C1820.120%20199.887%201818.876%20203.713%201818.237%20205.500C1817.597%20207.287%201816.702%20209.875%201816.246%20211.250C1815.440%20213.681%201814.982%20215.059%201813.247%20220.250C1812.788%20221.625%201812.004%20224.266%201811.506%20226.120C1811.008%20227.973%201810.144%20230.673%201809.587%20232.120C1808.223%20235.664%201806.595%20240.677%201805.765%20243.890C1805.390%20245.342%201804.644%20247.704%201804.108%20249.140C1803.572%20250.575%201802.442%20254.000%201801.597%20256.750C1800.752%20259.500%201799.238%20264.369%201798.233%20267.570C1796.322%20273.657%201796.328%20274.405%201798.300%20276.041L1799.154%20276.750%201943.452%20276.772C2053.320%20276.788%202088.078%20276.934%202089.125%20277.384C2090.790%20278.100%202090.869%20279.175%202089.558%20283.292C2089.040%20284.919%202087.667%20289.400%202086.506%20293.250C2085.345%20297.100%202083.995%20301.488%202083.506%20303.000C2075.518%20327.698%202073.319%20334.574%202071.998%20339.000C2069.402%20347.694%202064.461%20363.180%202063.933%20364.274C2063.662%20364.837%202062.973%20365.588%202062.403%20365.945L2061.367%20366.592%201954.558%20366.588C1895.814%20366.586%201820.975%20366.552%201788.250%20366.511C1755.525%20366.471%201722.562%20366.538%201715.000%20366.660C1707.438%20366.783%201695.062%20366.714%201687.500%20366.508ZM2155.201%20366.500L2116.153%20366.250%202115.284%20365.528C2114.192%20364.622%202114.258%20364.263%202117.398%20354.000C2121.956%20339.100%202124.815%20330.135%202127.124%20323.500C2130.482%20313.847%202133.047%20305.976%202134.291%20301.500C2135.018%20298.887%202136.255%20294.613%202137.040%20292.000C2141.032%20278.717%202142.189%20274.958%202143.270%20271.750C2143.918%20269.825%202145.154%20265.887%202146.015%20263.000C2146.876%20260.113%202148.262%20255.613%202149.095%20253.000C2149.928%20250.387%202151.282%20246.113%202152.104%20243.500C2152.925%20240.887%202154.688%20235.375%202156.021%20231.250C2157.353%20227.125%202159.157%20221.500%202160.028%20218.750C2160.899%20216.000%202162.019%20212.512%202162.516%20211.000C2163.014%20209.488%202164.367%20205.100%202165.523%20201.250C2166.679%20197.400%202168.622%20191.213%202169.839%20187.500C2171.057%20183.787%202172.480%20179.287%202173.000%20177.500C2173.521%20175.713%202174.649%20172.000%202175.508%20169.250C2176.366%20166.500%202177.601%20162.450%202178.251%20160.250C2179.969%20154.438%202181.516%20150.357%202182.327%20149.500L2183.036%20148.750%202256.393%20148.933C2367.224%20149.210%202387.785%20149.224%202477.685%20149.083C2523.299%20149.011%202560.749%20149.083%202560.908%20149.242C2561.393%20149.726%202559.591%20152.375%202552.743%20161.250C2549.136%20165.925%202543.492%20173.238%202540.201%20177.500C2536.911%20181.762%202529.963%20190.762%202524.762%20197.500C2519.561%20204.238%202514.056%20211.357%202512.528%20213.321C2511.000%20215.286%202506.970%20220.500%202503.573%20224.908C2500.175%20229.317%202496.839%20233.447%202496.158%20234.087L2494.920%20235.250%202438.585%20235.360C2407.601%20235.421%202356.262%20235.545%202324.500%20235.635L2266.750%20235.800%202264.902%20236.613C2262.569%20237.640%202261.385%20239.941%202258.531%20249.000C2257.361%20252.713%202256.003%20256.762%202255.513%20258.000C2255.023%20259.238%202254.471%20261.150%202254.286%20262.250C2254.102%20263.350%202253.290%20266.192%202252.481%20268.565L2251.010%20272.880%202251.540%20274.400C2251.831%20275.236%202252.448%20276.098%202252.910%20276.315C2253.372%20276.532%202327.926%20276.792%202418.586%20276.893L2583.422%20277.076%202583.698%20277.794C2583.849%20278.189%202583.779%20279.015%202583.541%20279.631C2583.303%20280.246%202582.603%20282.438%202581.985%20284.500C2581.367%20286.562%202580.474%20289.488%202580.000%20291.000C2579.526%20292.512%202578.631%20295.438%202578.010%20297.500C2577.389%20299.562%202576.710%20301.700%202576.500%20302.250C2576.290%20302.800%202575.609%20304.938%202574.985%20307.000C2572.599%20314.892%202571.857%20317.283%202571.494%20318.250C2571.288%20318.800%202570.609%20320.938%202569.985%20323.000C2567.635%20330.772%202566.858%20333.279%202566.500%20334.250C2566.142%20335.221%202565.365%20337.728%202563.015%20345.500C2562.391%20347.562%202561.710%20349.700%202561.500%20350.250C2561.290%20350.800%202560.615%20352.938%202560.000%20355.000C2559.385%20357.062%202558.708%20359.200%202558.497%20359.750C2558.287%20360.300%202557.817%20361.736%202557.455%20362.941C2557.093%20364.146%202556.489%20365.440%202556.112%20365.816L2555.429%20366.500%202527.339%20366.559C2435.453%20366.750%202188.196%20366.711%202155.201%20366.500ZM693.000%20366.162C685.326%20365.918%20674.311%20364.958%20671.000%20364.243C658.679%20361.584%20653.244%20359.829%20645.000%20355.845C639.680%20353.275%20637.535%20352.036%20632.080%20348.380C628.744%20346.144%20620.132%20337.587%20617.084%20333.479C612.454%20327.238%20606.790%20315.218%20605.314%20308.500C604.921%20306.712%20604.258%20304.059%20603.839%20302.603C601.756%20295.353%20601.691%20272.594%20603.734%20265.708C604.135%20264.356%20604.813%20261.562%20605.242%20259.500C605.670%20257.438%20607.126%20252.262%20608.475%20248.000C609.825%20243.738%20611.647%20237.775%20612.524%20234.750C615.414%20224.778%20617.087%20219.274%20617.769%20217.500C618.139%20216.537%20619.384%20212.600%20620.536%20208.750C623.645%20198.365%20628.453%20183.987%20629.740%20181.227C630.130%20180.390%20630.692%20178.623%20630.989%20177.301C631.285%20175.979%20631.839%20174.295%20632.220%20173.558C632.601%20172.822%20633.375%20170.426%20633.939%20168.234C636.513%20158.251%20637.483%20154.793%20638.394%20152.362C638.933%20150.925%20639.992%20147.725%20640.749%20145.250C641.505%20142.775%20642.563%20139.512%20643.099%20138.000C643.635%20136.488%20644.499%20133.675%20645.019%20131.750C645.539%20129.826%20646.196%20127.801%20646.480%20127.250C646.763%20126.700%20647.536%20124.675%20648.196%20122.750C650.814%20115.121%20651.507%20113.427%20654.053%20108.434C658.685%2099.347%20665.686%2089.836%20677.190%2077.000C677.559%2076.588%20680.199%2073.548%20683.056%2070.245C691.457%2060.531%20696.094%2056.439%20706.250%2049.776C711.685%2046.210%20714.747%2044.470%20725.000%2039.121C727.888%2037.614%20730.475%2036.209%20730.750%2035.997C731.258%2035.606%20739.899%2031.700%20744.000%2030.007C751.043%2027.100%20761.538%2024.412%20774.750%2022.131L782.750%2020.750%20937.500%2020.681C1022.612%2020.643%201102.938%2020.578%201116.000%2020.536C1129.062%2020.495%201143.285%2020.613%201147.606%2020.799L1155.462%2021.137%201154.951%2022.092C1154.322%2023.267%201150.343%2027.623%201139.000%2039.555C1127.748%2051.392%201086.828%2094.523%201080.050%20101.692C1077.189%20104.717%201074.169%20107.764%201073.337%20108.464L1071.825%20109.737%20931.016%20109.811C779.687%20109.892%20787.677%20109.747%20780.905%20112.539C765.674%20118.820%20752.818%20132.901%20748.266%20148.290C745.219%20158.590%20744.002%20162.835%20743.690%20164.250C743.508%20165.075%20743.039%20166.385%20742.648%20167.162C742.256%20167.939%20741.527%20170.076%20741.028%20171.912C740.202%20174.946%20738.810%20179.313%20737.415%20183.250C736.408%20186.090%20733.902%20194.255%20733.194%20197.000C732.804%20198.512%20731.942%20201.550%20731.278%20203.750C730.614%20205.950%20729.728%20209.100%20729.310%20210.750C727.218%20219.005%20726.031%20223.110%20725.576%20223.658C725.300%20223.991%20724.799%20225.385%20724.463%20226.757C724.126%20228.128%20723.353%20230.262%20722.744%20231.500C718.009%20241.124%20716.052%20257.235%20718.856%20263.523C721.607%20269.694%20727.575%20273.772%20736.500%20275.582L742.250%20276.748%20769.250%20276.749C784.100%20276.749%20858.631%20276.656%20934.875%20276.541C1011.118%20276.427%201073.610%20276.443%201073.744%20276.577C1074.292%20277.126%201065.987%20286.332%201046.751%20306.500C1043.997%20309.387%201033.420%20320.632%201023.247%20331.487C997.430%20359.034%20992.651%20364.032%20990.866%20365.349L989.306%20366.500%20843.278%20366.398C762.963%20366.342%20695.337%20366.236%20693.000%20366.162ZM2203.759%20103.655C2200.189%20103.552%202197.090%20103.290%202196.873%20103.073C2196.656%20102.856%202196.946%20101.119%202197.518%2099.214C2198.889%2094.648%202201.879%2084.955%202202.983%2081.500C2203.466%2079.987%202204.598%2076.388%202205.500%2073.500C2206.402%2070.612%202207.536%2067.013%202208.020%2065.500C2208.505%2063.987%202209.628%2060.388%202210.516%2057.500C2211.405%2054.612%202212.754%2050.337%202213.515%2048.000C2214.276%2045.663%202215.843%2040.712%202216.996%2037.000C2218.149%2033.288%202219.492%2029.012%202219.979%2027.500C2220.467%2025.988%202221.162%2023.738%202221.523%2022.500C2222.471%2019.252%202223.831%2016.672%202224.790%2016.304C2225.248%2016.128%202314.758%2015.998%202423.700%2016.014C2532.643%2016.031%202631.278%2015.886%202642.889%2015.693L2664.000%2015.341%202664.000%2016.192C2664.000%2017.252%202664.191%2016.996%202640.814%2047.250C2630.189%2061.000%202617.616%2077.280%202612.873%2083.428C2600.166%2099.899%202598.581%20101.858%202597.622%20102.273C2597.142%20102.480%202533.750%20102.703%202456.750%20102.767C2321.892%20102.880%202232.712%20103.203%202217.500%20103.636C2213.512%20103.749%202207.329%20103.758%202203.759%20103.655Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask: var(--sf-scale-mask) left bottom / contain no-repeat;
  mask: var(--sf-scale-mask) left bottom / contain no-repeat;
}
/* Em corpo de texto (parágrafos, muitas vezes cinza) o "SCALE" fica branco. */
p .sf-scale {
  background-color: #ffffff;
}
/* Em headings grandes (.section-title), o nudge de 0.04em pensado para
   texto pequeno (nav, corpo) fica visivelmente baixo demais — a mesma
   correção de alinhamento que fizemos na checkbox do formulário, só que
   aqui a peça a subir é a própria palavra "SCALE". */
.section-title .sf-scale {
  /* Anton tem cap-height real de ~0.865em (medido via canvas), bem maior
     que o 0.7em pensado para texto pequeno — sem isto, o "SCALE" ficava
     visivelmente mais baixo/fino do que as letras à volta em títulos
     grandes. Aqui o topo e a base ficam alinhados com os de "MÉTODO". */
  width: 6.55em;
  height: 0.865em;
  transform: translateY(-0.1em) translateZ(0);
}
/* Nos botões (.btn é flex: come o espaço a seguir a "Método" e centra
   verticalmente). Repõe-se o espaçamento e o alinhamento pela base para
   ficar exatamente como no header. */
.btn .sf-scale {
  margin-left: -0.4em;
  transform: translateY(0) translateZ(0);
}

/* No eyebrow (maiúsculas, bold, letter-spacing largo — métricas bem
   diferentes do nav de onde o nudge de 0.04em veio), o "SCALE" ficava
   visivelmente mais baixo do que "MÉTODO" ao lado. Sobe para alinhar
   com o resto do texto, como no header/botão. */
.eyebrow .sf-scale {
  transform: translateY(-0.02em) translateZ(0);
  /* Verde igual ao resto do texto do eyebrow (.eyebrow define
     color:var(--accent), mas currentColor só chega aqui se nada mais
     no caminho fixar uma cor branca — reforçado explicitamente). */
  background-color: var(--accent);
}

.hero__subtitle {
  font-size: 18px;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 36px;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* Badge de avaliação agregada, estilo "Google reviews": mesma cor/peso
   dourado das estrelas dos testemunhos individuais (.testimonial__stars),
   para ler como parte do mesmo sistema, não um elemento à parte. */
.testimonials-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  color: var(--text-muted);
  font-size: 15px;
}

.testimonials-rating__stars {
  position: relative;
  display: inline-block;
  letter-spacing: 2px;
  font-size: 17px;
  line-height: 1;
}

/* Preenchimento parcial da 5ª estrela: duas camadas de "★★★★★"
   sobrepostas — a de baixo em cinzento (o "vazio"), a de cima dourada e
   cortada a --rating de largura (98% = 4,9/5), em vez das 5 estrelas
   inteiras a fingir uma nota que não é exatamente 5. */
.testimonials-rating__stars-empty {
  color: rgba(255, 255, 255, 0.25);
}

.testimonials-rating__stars-filled {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rating, 100%);
  overflow: hidden;
  white-space: nowrap;
  color: #ffb400;
}

/* Linha de servicos/canais por baixo dos CTAs do hero: reforca em texto
   simples (bom p/ SEO/GEO) o que a agencia faz, sem repetir a eyebrow. */
.hero__services {
  color: var(--text-faint);
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ---------- Hero: fundadores ---------- */
.hero__people {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__person {
  position: absolute;
  bottom: 0;
  width: var(--hero-person-w);
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 1;
  animation: heroPersonIn 0.9s var(--ease) both;
}

/* Posição calculada a partir do tamanho REAL da logo (--hero-logo-w,
   definida em .hero): a distancia minima ao centro e sempre a largura
   da logo/2 + a foto + um respiro (--hero-person-gap), por isso nunca
   ha sobreposicao com a logo, seja qual for a largura do ecra ou o
   zoom do browser. O min() com a formula antiga mantém o comportamento
   de "afastar-se mais em ecrãs muito largos"; o max(90px, ...) por fora
   garante que nunca encosta demasiado à borda em ecrãs mais estreitos. */
.hero__person--daniel {
  left: max(var(--hero-person-edge), calc(50vw - var(--hero-logo-w) / 2 - var(--hero-person-w) - var(--hero-person-gap)));
  animation-delay: 0.15s;
}

.hero__person--martim {
  right: max(var(--hero-person-edge), calc(50vw - var(--hero-logo-w) / 2 - var(--hero-person-w) - var(--hero-person-gap)));
  animation-delay: 0.35s;
}

.hero__person img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  animation: heroPersonFloat 7s ease-in-out infinite;
}

.hero__person--martim img {
  animation-duration: 8s;
  animation-delay: -2.5s;
}

/* Suaviza apenas a aresta superior do retrato contra o fundo estrelado */
.hero__person::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 7%);
}

/* Funde apenas a base do retrato no fundo da página (transição para a secção
   de números). Fotos a 100% de qualidade e brilho, sem escurecer. */
.hero__person::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 74%, rgba(4, 8, 6, 0.5) 92%, var(--bg) 100%);
}

@keyframes heroPersonIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroPersonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 1150px) {
  .hero { padding: 150px 0 80px; }

  /* Fundadores passam a bloco por baixo do conteúdo do hero, sempre a 100%
     de qualidade e brilho (deixam de estar por trás do texto). */
  .hero__people {
    position: static;
    display: flex;
    justify-content: center;
    gap: 18px;
    overflow: visible;
    max-width: 460px;
    margin: 34px auto 0;
    padding-inline: 24px;
  }
  .hero__person,
  .hero__person--daniel,
  .hero__person--martim {
    position: relative;
    left: auto;
    right: auto;
    width: 48%;
    max-width: 200px;
    opacity: 1;
    border-radius: 16px;
    animation: none;
  }
  .hero__person img {
    animation: none;
    opacity: 1;
  }
  .hero__person::after {
    background: linear-gradient(to bottom, transparent 68%, rgba(4, 8, 6, 0.55) 88%, var(--bg) 100%);
  }

  /* Nesta largura os fundadores ja passaram a cartoes pequenos por baixo
     do conteudo; sem isto a logo (que escala por vw ate 76px) fica
     desproporcionalmente grande ao lado deles. */
  .hero {
    --hero-logo-h: clamp(34px, 5vw, 56px);
    /* Os fundadores deixaram de estar ao lado da logo (ver .hero__people
       acima), por isso a largura da logo ja nao pode depender do espaco
       que eles ocupavam — essa conta dava um valor negativo em ecras
       estreitos e tornava a logo invisivel. */
    --hero-logo-w: min(100%, calc(var(--hero-logo-h) * var(--hero-logo-ar)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__person,
  .hero__person img {
    animation: none;
    opacity: 1;
  }
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--accent);
  display: block;
}

.stat__label {
  font-size: 13px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
}

/* ---------- Números em destaque (secção própria, inspirada na Get Digital) ---------- */
.stats-showcase {
  padding: 72px 0;
}

.stats-showcase__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
/* flex (não grid) para que a última linha, quando os cartões quebram,
   fique centrada em vez de encostada à esquerda. min-width força a quebra
   (impede que os 5 encolham para uma linha só). */
.stats-showcase__item {
  flex: 1 1 200px;
  min-width: 190px;
  max-width: 292px;
}

.stats-showcase__item {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 42px 24px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition: transform 0.3s var(--ease);
}

.stats-showcase__item:hover {
  transform: translateY(-4px) scale(1.02);
}

.stats-showcase__value {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 56px);
  color: var(--accent);
  display: block;
  text-shadow: 0 0 26px rgba(0, 200, 83, 0.65);
}

.stats-showcase__item--chart .stats-showcase__value {
  text-shadow: none;
}

.stats-showcase__label {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Usado onde só há 2-3 cartões (ex.: Sobre Nós) e há espaço de sobra
   para os tornar o destaque principal da secção, não um extra pequeno. */
.stats-showcase__grid--large .stats-showcase__item {
  flex: 1 1 240px;
  max-width: 340px;
  padding: 56px 32px;
}

.stats-showcase__grid--large .stats-showcase__value {
  font-size: clamp(46px, 5.5vw, 68px);
}

.stats-showcase__grid--large .stats-showcase__label {
  font-size: 16px;
}

/* Névoa verde: o centro do gradiente fica fora do widget (overflow:
   hidden corta-o), por isso só a franja mais suave e desfocada chega
   a aparecer, nunca o blob definido. */
.stats-showcase__item--chart::before {
  content: "";
  position: absolute;
  top: -480px;
  right: -460px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(0, 200, 83, 0.45) 0%, rgba(0, 200, 83, 0.14) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.stats-showcase__chart-overlay {
  position: absolute;
  left: 0;
  width: calc(100% + 24px);
  max-width: none;
  bottom: 12px;
  /* 125px (era 90px): a caixa do gráfico sobe mais dentro do cartão,
     para a linha terminar mais perto do número "+€500K" em vez de
     deixar tanto espaço morto entre os dois. */
  height: 125px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.hero__chart-line {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  filter: drop-shadow(0 0 5px rgba(0, 200, 83, 0.85));
}

.hero__chart-tip {
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(141, 255, 184, 0.95)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.hero__chart-tip.is-visible {
  opacity: 1;
}

.hero__chart-line-muted {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: chart-draw 2.4s ease-out 0.4s forwards;
}

@keyframes chart-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__chart-line-muted {
    animation: none;
    stroke-dashoffset: 0;
  }
  .hero__chart-tip {
    opacity: 1;
  }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 124px 0 90px;
  text-align: center;
  position: relative;
}

.page-hero .eyebrow {
  justify-content: center;
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: var(--radius-md);
  padding: 36px;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-6px) scale(1.035);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}

.card__icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.card__title {
  position: relative;
  font-size: clamp(17px, 4.5vw, 20px);
  margin-bottom: 12px;
  text-transform: none;
}

.card__text {
  position: relative;
  font-size: 15px;
}

/* Frase de accao a negrito entre o titulo e o corpo (ex.: cartoes dos
   "Pilares"), o mesmo papel do h3 nas paginas do Metodo SCALE. */
.card__subtitle {
  position: relative;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--headline);
  margin-bottom: 10px;
}

.card__text + .card__text {
  margin-top: 10px;
}

/* ---------- Grids ---------- */
.grid {
  display: grid;
  gap: 28px;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Grid do formulário na Reunião Estratégica: rácio próprio (texto mais
   estreito, formulário mais largo). Estava como estilo inline no HTML,
   que tinha mais prioridade do que a regra do .grid--2 que empilha em
   coluna única no mobile (ver @media max-width:760px) — nunca empilhava,
   por isso o formulário ficava sempre espremido ao lado do texto. Como
   classe normal, a regra do mobile (definida mais abaixo no ficheiro)
   volta a ganhar, tal como acontece com qualquer outro .grid--2. */
.reuniao-form-grid {
  gap: 56px;
  align-items: start;
  grid-template-columns: 0.82fr 1.18fr;
}

/* ---------- Stats band ---------- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 48px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stats-band .stat__value {
  font-size: clamp(30px, 3.6vw, 46px);
}

/* ---------- Process steps ---------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 20px;
}

.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}

.step:last-child {
  border-bottom: 1px solid var(--border);
}

.step__number {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--accent);
}

/* ---------- Método SCALE (destaque) ---------- */
.steps--method {
  position: relative;
  padding: 40px 40px 40px 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--bg-card) 0%, rgba(0, 0, 0, 0.75) 100%);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 0 60px -20px var(--accent-glow);
  overflow: hidden;
}

.steps--method .step {
  position: relative;
  grid-template-columns: 56px 1fr;
  padding: 22px 20px 22px 16px;
  margin-bottom: 6px;
  border-top: none;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.steps--method .step:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid transparent;
}

.steps--method .step.is-active {
  background: linear-gradient(135deg, rgba(0, 200, 83, 0.2) 0%, rgba(0, 200, 83, 0.05) 100%);
  border-color: rgba(0, 200, 83, 0.65);
  box-shadow: 0 16px 36px -18px var(--accent-glow), inset 0 0 0 1px rgba(0, 200, 83, 0.15);
}

.steps--method .step__number {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  box-shadow: none;
  font-size: 24px;
  color: var(--text-faint);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.steps--method .step.is-active .step__number {
  background: var(--accent);
  color: #052012;
  border-color: var(--accent);
  box-shadow: 0 0 28px -2px var(--accent-glow);
}

.step__title {
  font-size: clamp(16px, 4.5vw, 19px);
  margin-bottom: 8px;
  text-transform: none;
}

.step__text {
  font-size: 15px;
  max-width: 560px;
}

/* ---------- Método SCALE (Homepage) — Trajetória de Crescimento ----------
   Uma linha ascendente (estilo gráfico de bolsa) atravessa a secção; um ponto
   luminoso "viaja" ao longo dela conforme o scroll, acendendo cada estação
   S-C-A-L-E ao passar, em sincronia com o cartão da fase e a letra gigante
   correspondente no wordmark de fundo. Ver initMethodTrack() em main.js. */
.method-track {
  display: grid;
  gap: 28px;
}

.method-track__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

.method-track__path-bg {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 2;
  stroke-linecap: round;
}

.method-track__path-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.method-track__dot {
  position: absolute;
  left: 6%;
  top: 80%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #8dffb8 45%, var(--accent) 75%, transparent 100%);
  box-shadow: 0 0 24px 8px var(--accent-glow), 0 0 8px 2px rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Abaixo dos nós (z-index 2): a luz viaja "por baixo" das letras S/C/A/L,
     como parte da própria linha, em vez de flutuar por cima delas. */
  z-index: 1;
  transition: opacity 0.4s var(--ease);
}

.method-track__nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.method-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 6vw, 44px);
  height: clamp(30px, 6vw, 44px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  border: 2px solid var(--border-strong);
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: clamp(13px, 2vw, 17px);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.method-node.is-active {
  background: var(--accent);
  color: #052012;
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.15);
}

@keyframes method-node-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 28px -2px var(--accent-glow), 0 0 0 6px var(--accent-dim);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.32);
    box-shadow: 0 0 46px 10px var(--accent-glow), 0 0 0 10px var(--accent-dim);
  }
}

.method-node[data-index="4"].is-active {
  animation: method-node-pulse 1.8s ease-in-out infinite;
}

.method-track {
  /* Alarga a fila de 5 cartões para além do .container (que o envolve),
     aproveitando a margem lateral que já sobra no ecrã a esta largura,
     para cada cartão ganhar espaço extra sem estreitar o texto. Reposto
     a 0 no breakpoint em que os cartões empilham (abaixo). */
  margin-inline: -50px;
}

.method-track__cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.method-card {
  position: relative;
  overflow: hidden;
  /* Padding lateral reduzido (era 20px): aproveita melhor as laterais do
     cartão para o texto cinza, em vez de estreitar a letra gigante. */
  padding: 28px 16px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.method-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 200, 83, 0.6);
  box-shadow: 0 22px 44px -22px var(--accent-glow);
}

.method-card__bg {
  position: absolute;
  right: -6px;
  bottom: -12px;
  font-family: var(--font-display);
  /* De volta ao tamanho original — o cartão é que agora tem mais
     espaço (.method-track mais largo + menos padding lateral), em vez
     de encolher a letra. */
  font-size: 130px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--border-strong);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  transition: -webkit-text-stroke-color 0.4s var(--ease), opacity 0.4s var(--ease), text-shadow 0.4s var(--ease);
}

.method-card .step__text {
  /* Reserva a zona onde a letra gigante do fundo (.method-card__bg) fica,
     para o texto nunca lhe passar por cima (o "A" é a letra mais larga,
     começa aos 176px num cartão de 234px — 50px de padding fica sempre
     à esquerda dela). O título não precisa: nunca desce o suficiente
     para chegar à letra. */
  padding-right: 50px;
}

.method-card__letter,
.method-card .step__title,
.method-card .step__text {
  position: relative;
  z-index: 1;
}

.method-card__letter {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--text-faint);
  margin-bottom: 10px;
  transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease);
}

.method-card.is-active,
.method-track.is-playing .method-track__cards .method-card {
  background: rgba(0, 200, 83, 0.1);
  border-color: rgba(0, 200, 83, 0.55);
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px var(--accent-glow);
}

.method-card.is-active .method-card__bg,
.method-track.is-playing .method-track__cards .method-card .method-card__bg {
  -webkit-text-stroke-color: var(--accent);
  opacity: 1;
  text-shadow: 0 0 30px var(--accent-glow);
}

/* mesmo escalonamento harmonioso das letras (o --d é herdado pelos filhos
   .method-card__letter / .method-card__bg, que acendem em sincronia). */
.method-track.is-playing .method-track__cards .method-card:nth-child(1) { --d: 0.1s; }
.method-track.is-playing .method-track__cards .method-card:nth-child(2) { --d: 0.55s; }
.method-track.is-playing .method-track__cards .method-card:nth-child(3) { --d: 1s; }
.method-track.is-playing .method-track__cards .method-card:nth-child(4) { --d: 1.45s; }
.method-track.is-playing .method-track__cards .method-card:nth-child(5) { --d: 1.9s; }
.method-track.is-playing .method-track__cards .method-card,
.method-track.is-playing .method-track__cards .method-card .method-card__letter,
.method-track.is-playing .method-track__cards .method-card .method-card__bg {
  transition-delay: var(--d, 0s);
}

/* ---------- Método SCALE — página dedicada (capítulos + calha fixa) ---------- */
.method-chapters {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 56px;
  align-items: start;
  /* Só respiro visual antes da secção seguinte ("E o Ciclo Repete-se").
     A calha (.method-rail) sticky fica confinada à área da grid (altura
     de .method-chapters__list — o item mais alto da linha), que este
     padding do CONTENTOR não estica; não tem qualquer efeito no alcance
     do sticky nem no cálculo de centragem em initMethodRail() (main.js).
     Por isso pode ficar pequeno sem qualquer risco de "cortar" a calha.
     Reduzido de 96px: somado ao padding do fim desta secção + o início
     da seguinte (72px + 72px, já uniformizados no site todo), ficava um
     vazio de 240px — espaço a mais entre o Método e o "Ciclo Repete-se".
     Um bocadinho a mais (24px) para a calha respirar melhor no fundo. */
  padding-bottom: 40px;
}

.method-rail {
  position: sticky;
  /* Tem de ser igual à altura real do header (mesmo valor de
     RAIL_HEADER_OFFSET em initMethodRail(), main.js, e do
     scroll-margin-top de .method-chapter, acima) — senão a calha fica
     "pendurada" mais abaixo do que devia, e cada letra deixa de
     corresponder visualmente ao conteúdo ao lado enquanto se faz scroll. */
  top: 87px;
}

.method-rail__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.method-rail__list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--border-strong);
  transform: translateX(-50%);
  z-index: 0;
}

.method-rail__item {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.method-rail__item:hover {
  color: var(--headline);
  border-color: var(--accent);
  box-shadow: 0 0 16px -6px var(--accent-glow);
}

.method-rail__item.is-active {
  background: var(--accent);
  color: #052012;
  border-color: var(--accent);
  animation: method-rail-pulse 1.8s ease-in-out infinite;
}

@keyframes method-rail-pulse {
  0%, 100% {
    transform: scale(1.15);
    box-shadow: 0 0 24px -4px var(--accent-glow), 0 0 0 5px var(--accent-dim);
  }
  50% {
    transform: scale(1.24);
    box-shadow: 0 0 36px 2px var(--accent-glow), 0 0 0 8px var(--accent-dim);
  }
}

.method-chapter {
  position: relative;
  padding: 56px 0;
  /* Cobre a altura real do header em repouso (maior que o estado
     "is-scrolled"), para qualquer scroll nativo do browser até este
     elemento (ex.: navegação por Tab) não o deixar escondido atrás do
     header fixo. Mantido em sincronia com RAIL_HEADER_OFFSET em
     initMethodRail() (main.js). */
  scroll-margin-top: 87px;
}

.method-chapter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.12) 80%,
    transparent
  );
  filter: blur(0.4px);
}

.method-chapter__bg {
  position: absolute;
  top: 56px;
  right: -0.06em;
  font-family: var(--font-display);
  font-size: clamp(130px, 17vw, 230px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  -webkit-text-stroke: 2px var(--border-strong);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  transform: scale(0.97);
  transform-origin: right top;
  transition: color 0.8s var(--ease), -webkit-text-stroke-color 0.8s var(--ease), text-shadow 0.8s var(--ease), transform 0.8s var(--ease);
}

.method-chapter__bg.is-lit {
  /* Interior transparente (só o contorno brilha), igual à letra da
     Homepage (.method-card.is-active .method-card__bg) — um
     preenchimento verde por trás do contorno tornava o brilho mais
     apagado/baço em comparação. */
  color: transparent;
  -webkit-text-stroke-color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow), 0 0 70px var(--accent-glow);
  transform: scale(1);
}

.method-chapter__title {
  position: relative;
  font-size: clamp(32px, 5vw, 50px);
  letter-spacing: 1px;
  margin-bottom: 14px;
  z-index: 1;
}
.method-chapter__title .text-accent {
  color: var(--accent);
  text-shadow: 0 0 26px var(--accent-glow), 0 0 8px var(--accent-glow);
}

/* Sub-título da etapa (o "###" da copy): mais pequeno que o "##" mas ainda
   com presença — branco, semibold, não em caixa alta. */
.method-chapter__subtitle {
  position: relative;
  max-width: 620px;
  font-size: clamp(19px, 2.6vw, 27px);
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0.2px;
  color: var(--headline);
  margin: 0 0 22px;
  z-index: 1;
}

.method-chapter__lead {
  position: relative;
  max-width: 620px;
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 20px;
  z-index: 1;
}

.method-chapter__body {
  position: relative;
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 16px;
  z-index: 1;
}

.method-chapter__punch {
  position: relative;
  max-width: 620px;
  margin: 24px 0 34px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--headline);
  z-index: 1;
}

/* Capítulos pares (C, L): letra de fundo do outro lado e cartões trocados,
   para quebrar a repetição de 5 capítulos com a mesma estrutura. */
.grid--reverse .qualify-card--no {
  order: 2;
}

.grid--reverse .qualify-card--yes {
  order: 1;
}

/* Mecanismo "correção" — em vez de dois cartões iguais, o erro comum
   aparece riscado (como uma correção de texto) e a frase certa surge a
   seguir, a bold e a verde. Usa a tipografia da própria marca. */
.method-correction {
  position: relative;
  z-index: 1;
  max-width: 620px;
  display: grid;
  gap: 16px;
}

.method-correction__wrong,
.method-correction__right {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16.5px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(8px);
}

.reveal.is-visible .method-correction__wrong,
.reveal.is-visible .method-correction__right {
  opacity: 1;
  transform: translateY(0);
}

.method-correction__mark {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* 1) A frase do erro aparece primeiro, com aspeto de afirmação normal
   (ainda sem estar riscada) — para dar tempo a ler antes de ser corrigida. */
.method-correction__wrong {
  color: var(--text-muted);
  transition: opacity 0.5s var(--ease) 0.1s, transform 0.5s var(--ease) 0.1s, color 0.5s var(--ease) 0.7s;
}

.reveal.is-visible .method-correction__wrong {
  color: var(--text-faint);
}

.method-correction__wrong .method-correction__mark {
  border: 1.5px solid var(--border-strong);
  color: var(--text-faint);
}

/* 2) O traço "desenha-se" por cima da frase pouco depois — a cor do risco
   passa de transparente a visível, como se estivesse a ser riscada ao vivo. */
.method-correction__strike {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.5s var(--ease) 0.7s;
}

.reveal.is-visible .method-correction__wrong .method-correction__strike {
  text-decoration-color: var(--text-faint);
}

/* 3) Só depois do traço terminar é que a frase certa surge, a bold e a verde. */
.method-correction__right {
  color: var(--headline);
  font-weight: 600;
  transition: opacity 0.5s var(--ease) 1.2s, transform 0.5s var(--ease) 1.2s;
}

.method-correction__right .method-correction__mark {
  background: var(--accent);
  color: #052012;
  box-shadow: 0 0 16px -2px var(--accent-glow);
}

@media (max-width: 760px) {
  .method-chapters {
    grid-template-columns: 1fr;
    /* Sem calha sticky no mobile (ver .method-rail abaixo), não há
       transição nenhuma para dar espaço a descolar — o padding gigante
       do desktop não faz sentido aqui e só criava um vazio enorme. */
    padding-bottom: 0;
  }
  .method-rail {
    display: none;
  }
  .method-chapter__bg {
    font-size: 110px;
    opacity: 0.6;
  }
  /* No mobile a grid de 2 colunas colapsa para 1 (ver .method-chapters
     acima) e o título passa a começar à mesma altura da letra gigante
     (ambos com top efetivo ~56px), sem a coluna lateral que no desktop
     os mantinha afastados — reserva-se aqui o mesmo tipo de espaço que
     .method-card .step__text já reserva na Homepage. */
  .method-chapter__title,
  .method-chapter__subtitle {
    padding-right: 70px;
  }
}

.method-card.is-active .method-card__letter,
.method-track.is-playing .method-track__cards .method-card .method-card__letter {
  color: var(--accent);
  text-shadow: 0 0 26px var(--accent-glow), 0 0 8px var(--accent-glow);
}

/* ---------- Niches marquee ---------- */
.niches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Fila de tags reutilizada dentro da secção "Resultados que falam por nós"
   (canais/nichos onde já trabalhámos), por cima da grelha de testemunhos. */
.niches--tags {
  margin-bottom: 48px;
}

/* Sem estado de hover de propósito — não são clicáveis (sem href/onclick),
   e qualquer realce (mesmo neutro) sugeria interatividade que não existe. */
.niche-pill {
  padding: 12px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ---------- Team ---------- */
.team-card {
  text-align: center;
}

.team-card:hover {
  border-color: var(--accent);
}

.team-card .avatar {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}

.team-card:hover .avatar {
  transform: scale(1.12) rotate(-6deg);
  background: var(--accent);
  color: #052012;
  box-shadow: 0 0 0 6px var(--accent-dim), 0 16px 32px -10px var(--accent-glow);
}

.team-card__role {
  transition: color 0.3s var(--ease);
}

.avatar {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--border-strong);
  overflow: hidden;
}

.avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Sobre — "A Nossa História": a origem e a forma de pensar da Scale Force.
   Ensaio editorial com pormenores visuais: headline equilibrada, três
   princípios de origem, nuvem de widgets (o ruído antes de qualquer
   decisão), fluxo de uma estratégia sólida, bloco de contraste (o que não
   fazemos / o que fazemos) e um fecho. Verde (#00c853) só como acento.
   Reveal pelo mecanismo do site (.reveal + .is-visible), sem JS novo.
   ========================================================================== */
.origin-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.origin-headline {
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.14;
  margin: 0;
  /* Duas linhas equilibradas em vez de uma palavra sozinha na segunda. */
  text-wrap: balance;
}

.origin-narrative {
  max-width: 660px;
  margin: 52px auto 0;
  display: grid;
  gap: 26px;
}

.origin-narrative__p {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--text-muted);
}

/* Capitular só na primeira frase do ensaio. */
.origin-narrative--lead .origin-narrative__p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.2em;
  line-height: 0.78;
  padding: 6px 12px 0 0;
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent-glow);
}

/* ---- Três princípios de origem: declarações curtas em escada ---- */
.origin-values {
  max-width: 660px;
  margin: 40px auto;
  display: grid;
  border-top: 1px solid var(--border);
}

.origin-values__item {
  position: relative;
  padding: 16px 0 16px 24px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.95vw, 21px);
  line-height: 1.35;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.origin-values__item::before {
  content: "";
  position: absolute;
  left: 0;
  /* top:50%+translateY(-50%) em vez de um valor fixo em px: centra
     sempre a meio da frase, em qualquer tamanho de letra (o clamp()
     acima varia com o ecrã), em vez de só acertar num ponto. */
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.origin-values__item b {
  color: var(--headline);
  font-weight: inherit;
}

.reveal.is-visible .origin-values__item { opacity: 1; transform: translateY(0); }
.reveal.is-visible .origin-values__item:nth-child(1) { transition-delay: 0.04s; }
.reveal.is-visible .origin-values__item:nth-child(2) { transition-delay: 0.16s; }
.reveal.is-visible .origin-values__item:nth-child(3) { transition-delay: 0.28s; }

/* ---- Bloco de contraste: o que não fazemos / o que fazemos ---- */
.origin-principles {
  max-width: 640px;
  margin: 44px auto 0;
  display: grid;
}

.origin-principles__pair {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

.origin-principles__pair:first-child {
  border-top: 1px solid var(--border);
}

.origin-principles__no {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.5;
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.28);
}

.origin-principles__yes {
  display: block;
  position: relative;
  padding-left: 22px;
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.35;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--headline);
}

.origin-principles__yes::before {
  content: "";
  position: absolute;
  left: 0;
  /* top:50%+translateY(-50%) em vez de um valor fixo em em: centra
     sempre a meio da frase, em qualquer tamanho de letra. */
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.reveal.is-visible .origin-principles__pair { opacity: 1; transform: translateY(0); }
.reveal.is-visible .origin-principles__pair:nth-child(1) { transition-delay: 0.05s; }
.reveal.is-visible .origin-principles__pair:nth-child(2) { transition-delay: 0.22s; }
.reveal.is-visible .origin-principles__pair:nth-child(3) { transition-delay: 0.39s; }

/* ---- Widgets ambiente: o ruído de um mercado já preenchido ---- */
.origin-chaos {
  max-width: 880px;
  margin: 34px auto;
}

.origin-chaos__caption {
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 24px;
}

.origin-chaos__field {
  position: relative;
  height: 240px;
}

.origin-chaos__chip {
  position: absolute;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text-faint);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px) scale(0.9) rotate(var(--r, 0deg));
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  animation: origin-chip-float 7s ease-in-out infinite;
  animation-play-state: paused;
}

.reveal.is-visible .origin-chaos__chip {
  opacity: 0.7;
  transform: translateY(0) scale(1) rotate(var(--r, 0deg));
  animation-play-state: running;
}

.origin-chaos__chip:nth-of-type(1) { transition-delay: 0s;    animation-delay: 0s; }
.origin-chaos__chip:nth-of-type(2) { transition-delay: 0.06s; animation-delay: -1.4s; }
.origin-chaos__chip:nth-of-type(3) { transition-delay: 0.12s; animation-delay: -2.8s; }
.origin-chaos__chip:nth-of-type(4) { transition-delay: 0.18s; animation-delay: -0.7s; }
.origin-chaos__chip:nth-of-type(5) { transition-delay: 0.24s; animation-delay: -3.5s; }
.origin-chaos__chip:nth-of-type(6) { transition-delay: 0.3s;  animation-delay: -1.9s; }
.origin-chaos__chip:nth-of-type(7) { transition-delay: 0.36s; animation-delay: -4.2s; }
.origin-chaos__chip:nth-of-type(8) { transition-delay: 0.42s; animation-delay: -0.3s; }
.origin-chaos__chip:nth-of-type(9) { transition-delay: 0.48s; animation-delay: -2.3s; }
.origin-chaos__chip:nth-of-type(10) { transition-delay: 0.54s; animation-delay: -3.1s; }
.origin-chaos__chip:nth-of-type(11) { transition-delay: 0.6s;  animation-delay: -1.1s; }

@keyframes origin-chip-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}

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

/* ---- Fluxo: o caminho de cinco fases (dá a entender o Método SCALE) ---- */
.origin-flow {
  max-width: 760px;
  margin: 44px auto;
  text-align: center;
}

.origin-flow__caption {
  max-width: 440px;
  margin: 0 auto 40px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.9vw, 18px);
  color: var(--headline);
  text-transform: uppercase;
  line-height: 1.4;
}

.origin-flow__track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}

/* A linha vai só do 1.º ao 5.º badge (centros a 10% e 90% do track). */
.origin-flow__track::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: var(--border-strong);
}

.origin-flow__fill {
  position: absolute;
  top: 13px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transform-origin: left center;
  transform: scaleX(0);
  /* Linear: a posição da barra é proporcional ao tempo, para as letras
     acenderem exatamente quando a barra passa por cada badge. */
  transition: transform 2.2s linear 0.1s;
}

.reveal.is-visible .origin-flow__fill { transform: scaleX(1); }

.origin-flow__node {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.origin-flow__letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  color: var(--text-faint);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}

.origin-flow__node span:last-child {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.3s var(--ease);
}

/* Delays alinhados com a barra linear (2.2s + 0.1s): a barra chega a cada
   badge (a 10/30/50/70/90% do track) nestes instantes. */
.origin-flow__track .origin-flow__node:nth-of-type(1) .origin-flow__letter,
.origin-flow__track .origin-flow__node:nth-of-type(1) span:last-child { transition-delay: 0.15s; }
.origin-flow__track .origin-flow__node:nth-of-type(2) .origin-flow__letter,
.origin-flow__track .origin-flow__node:nth-of-type(2) span:last-child { transition-delay: 0.65s; }
.origin-flow__track .origin-flow__node:nth-of-type(3) .origin-flow__letter,
.origin-flow__track .origin-flow__node:nth-of-type(3) span:last-child { transition-delay: 1.2s; }
.origin-flow__track .origin-flow__node:nth-of-type(4) .origin-flow__letter,
.origin-flow__track .origin-flow__node:nth-of-type(4) span:last-child { transition-delay: 1.75s; }
.origin-flow__track .origin-flow__node:nth-of-type(5) .origin-flow__letter,
.origin-flow__track .origin-flow__node:nth-of-type(5) span:last-child { transition-delay: 2.3s; }

.reveal.is-visible .origin-flow__letter {
  background: var(--accent);
  border-color: var(--accent);
  color: #052012;
  box-shadow: 0 0 16px -2px var(--accent-glow);
  transform: scale(1.1);
}

.reveal.is-visible .origin-flow__node span:last-child { color: var(--headline); }

.origin-flow__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 34px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap 0.25s var(--ease), opacity 0.25s var(--ease);
}

.origin-flow__link::after {
  content: "\2192";
  font-size: 14px;
}

.origin-flow__link:hover {
  gap: 11px;
  opacity: 0.85;
}

/* ---- Fecho: da convicção à forma de pensar ---- */
.origin-close {
  position: relative;
  max-width: 760px;
  margin: 80px auto 0;
  text-align: center;
}

.origin-close__intro {
  max-width: 520px;
  margin: 0 auto 24px;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: var(--text-faint);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease) 0.1s, transform 0.7s var(--ease) 0.1s;
}

.reveal.is-visible .origin-close__intro { opacity: 1; transform: translateY(0); }

.origin-close__line {
  font-family: var(--font-display);
  font-size: clamp(23px, 3.6vw, 40px);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--headline);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease) 0.35s, transform 0.7s var(--ease) 0.35s;
}

.reveal.is-visible .origin-close__line { opacity: 1; transform: translateY(0); }

/* ---------- Equipa — foto grande (inspirado na Get Digital) ---------- */
.team-card--photo {
  position: relative;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  background: var(--bg-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.team-card--photo.reveal:hover {
  transform: scale(1.035);
  z-index: 1;
}

.team-card__photo {
  position: absolute;
  inset: 0;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.team-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.72) 60%, #000 84%);
}

/* "Meet the team": mantém as duas fotos lado a lado a partir de tablet
   (só empilha em telemóvel), para não ficarem enormes. */
@media (min-width: 560px) {
  .grid--2.team-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.team-card__info {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 28px 20px;
  text-align: center;
}

.team-card__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.05;
  color: var(--headline);
  text-transform: uppercase;
}

.team-card__role-pill {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #052012;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.team-card__name {
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--headline);
  font-size: 16px;
  text-transform: none;
}

.team-card__role {
  position: relative;
  font-size: 13px;
  color: var(--accent);
  margin-top: 4px;
  margin-bottom: 12px;
}

.team-card__text {
  position: relative;
  font-size: 14px;
}

/* ---------- Testimonials ---------- */
/* Formato "review" (à la Google): identidade primeiro, depois estrelas,
   só depois o texto — a ordem em que se lê uma avaliação real, o que
   passa mais confiança do que uma citação solta sem quem a disse. */
.testimonial {
  padding: 32px;
  text-align: left;
}

.testimonial__author {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.testimonial__name {
  color: var(--headline);
  font-size: 15px;
  font-weight: 600;
}

.testimonial__role {
  font-size: 13px;
  color: var(--text-faint);
}

/* Estrelas só decorativas (não uma média extraída de uma plataforma real),
   por isso o aria-label fica no próprio elemento em vez de reivindicar
   uma fonte externa. Dourado de propósito — é a cor universal de
   avaliação, lê-se instantaneamente mesmo dentro da paleta verde/preto. */
.testimonial__stars {
  position: relative;
  color: #ffb400;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.testimonial__quote {
  position: relative;
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* ---------- Páginas legais (Privacidade, Termos) ---------- */
.legal-content {
  margin-top: 24px;
  padding-bottom: 40px;
}

.legal-content h2 {
  font-size: 20px;
  margin: 36px 0 12px;
  color: var(--headline);
}

.legal-content p {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 4px;
}

.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 780px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
}

.faq-item {
  /* Minimalista em repouso: só um hairline neutro, sem cor nem barra
     lateral grossa a competir pela atenção numa lista inteira. O verde
     fica reservado para o momento de interação (hover/aberto), abaixo. */
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.faq-item:hover,
.faq-item.is-open {
  border-color: var(--accent);
}

.faq-item:hover:not(.is-open) {
  /* Offset negativo em Y concentra o brilho no topo do cartão (onde a
     pergunta está), em vez de um halo parado igual à volta de tudo. */
  box-shadow: 0 -4px 22px -10px var(--accent-glow), 0 0 12px -12px var(--accent-glow);
}

.faq-item.is-open {
  background: linear-gradient(160deg, var(--accent-dim) 0%, var(--bg-card) 55%);
  /* Aberta = glow para dentro do cartão, só no topo (onde está a
     pergunta), não à volta de tudo. Offset em Y positivo num inset
     shadow concentra-o na aresta de cima. */
  box-shadow: inset 0 26px 34px -26px var(--accent-glow);
}

.faq-item__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  width: 100%;
  text-align: left;
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-dim);
  border: 1px solid var(--border-strong);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.faq-item__icon::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.faq-item:hover .faq-item__icon,
.faq-item.is-open .faq-item__icon {
  background: var(--accent);
  border-color: var(--accent);
}

.faq-item:hover .faq-item__icon::before,
.faq-item:hover .faq-item__icon::after,
.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after {
  background: #052012;
}

.faq-item.is-open .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__q > span:first-of-type {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--headline);
  padding-top: 5px;
  transition: color 0.3s var(--ease);
}

.faq-item__a {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}

.faq-item__a p {
  padding: 0 20px 18px 40px;
  font-size: 14px;
}

@media (max-width: 760px) {
  .faq {
    grid-template-columns: 1fr;
  }
}

/* ---------- CTA banner ---------- */
.cta-banner-wrap {
  position: relative;
}

.cta-banner {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 72px 48px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-alt) 100%);
  /* Luz por trás do cartão como box-shadow: o navegador nunca pinta a shadow
     por cima da própria caixa (mesmo sendo semi-transparente/com blur), por
     isso a luz fica sempre presa a "por trás" do widget e só é visível a
     sair dos lados — nunca dentro dele. Sem offset, para os 4 cantos ficarem
     iguais. */
  box-shadow: 0 0 70px -5px rgba(0, 200, 83, 0.48);
}

/* ---------- Acento de canto (inspirado na Get Digital) ---------- */
.card,
.faq-item,
.qualify-card,
.case-study {
  position: relative;
}

/* Vidro preto fosco: um grão finíssimo (ruído SVG) quebra o brilho liso
   do glassmorphism e lê como material fosco/texturado em vez de vidro
   polido, e uma luz muito suave a descer do topo sugere profundidade
   sem parecer um reflexo. Ambos muito discretos de propósito. */
.card::before,
.faq-item::before,
.qualify-card::before,
.case-study::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover, 90px 90px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Anel via mask (não background em camadas): assim a cor do gradiente só
   existe fisicamente no anel, nunca "sangra" para dentro do widget mesmo
   este tendo um fundo translúcido (vidro). Usa border-width (não padding)
   para definir o anel — só border-width faz o browser reduzir corretamente
   o raio do canto interior, garantindo espessura igual em todos os cantos. */
.cta-banner::after,
.card::after,
.qualify-card::after,
.case-study::after,
.stats-showcase__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: var(--corner-border) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.3s var(--ease), filter 0.3s var(--ease);
}

/* Nos CTAs-Finais e nos cartões de formulário, a borda fica verde à
   volta de toda a caixa — são os elementos mais importantes da página,
   os restantes usam a cor neutra definida acima em --corner-border. Um
   gradiente diagonal (em vez de verde plano) e 2px em vez de 1px dão-lhes
   mais peso visual, reforçando que são os elementos de maior hierarquia. */
.cta-banner::after,
.card:has(.qualify-form-js)::after {
  border-width: 2px;
  background: linear-gradient(160deg, rgba(0, 200, 83, 1) 0%, rgba(0, 200, 83, 0.55) 55%, rgba(0, 200, 83, 0.95) 100%) border-box;
  filter: drop-shadow(0 0 5px rgba(0, 200, 83, 0.5));
}

/* Ao passar o rato, o anel neutro acende ligeiramente (mais claro, sem
   mudar de cor) para reforçar a interação sem competir com os cantos
   verdes acima, que já têm o seu próprio hover implícito. */
.card:hover:not(:has(.qualify-form-js))::after,
.case-study:hover::after {
  background: var(--corner-border-hover) border-box;
}

/* Na box "É para ti se...", só os cantos brilham a verde (gradiente que
   desvanece para a cor neutra a meio), em vez da borda toda verde. */
/* Tal como no "Website Futuro"/backup: só os cantos brilham a verde,
   desvanecendo para a cor neutra a meio (não a borda toda). */
.qualify-card--yes::after {
  background: linear-gradient(135deg, rgba(0, 200, 83, 0.9) 0%, var(--border-strong) 24%, var(--border-strong) 76%, rgba(0, 200, 83, 0.9) 100%) border-box;
  filter: drop-shadow(0 0 5px rgba(0, 200, 83, 0.5));
}

/* No caso de estudo, só o canto superior direito fica verde. */
.case-study::after {
  background: linear-gradient(to bottom left, rgba(0, 200, 83, 0.9) 0%, var(--border-strong) 30%, var(--border-strong) 100%) border-box;
}

.cta-banner__glow {
  position: absolute;
  bottom: -320px;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(circle closest-side, rgba(0, 200, 83, 0.4) 0%, rgba(0, 200, 83, 0.14) 40%, transparent 70%);
  pointer-events: none;
  animation: glow-pulse 7s ease-in-out infinite 1s;
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner__glow {
    animation: none;
    transform: translateX(-50%);
  }
}

.cta-banner__title {
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 18px;
  position: relative;
}

.cta-banner__text {
  max-width: 480px;
  margin: 0 auto 32px;
  position: relative;
}

.cta-banner__actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Form ---------- */
.form {
  display: grid;
  gap: 20px;
}

/* Honeypot anti-spam: campo real no DOM (não display:none, que bots mais
   cuidadosos evitam), mas invisível e fora da navegação por teclado —
   uma pessoa nunca o vê nem o preenche; um bot que preenche tudo cega-
   mente, sim. Ver api/lead.js para a verificação do lado do servidor. */
.field-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field {
  display: grid;
  align-content: start;
  gap: 8px;
  /* Sem isto, um item de grid nunca encolhe abaixo do tamanho mínimo do
     seu próprio conteúdo (min-width:auto implícito) — é isso que fazia
     o formulário exigir scroll horizontal dentro do popup em ecrãs mais
     estreitos, mesmo havendo espaço de sobra na coluna ao lado. */
  min-width: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--headline);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Se uma label mais comprida (ex.: "Investem em publicidade paga?")
     não couber numa linha, que quebre de forma equilibrada em vez de
     deixar uma palavra sozinha na 2ª linha. */
  text-wrap: balance;
}

.field input,
.field select,
.field textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--headline);
  font-family: var(--font-body);
  /* 16px minimo: abaixo disso o Safari do iOS da zoom automatico ao
     focar o campo (comportamento nativo do browser, nao controlavel
     por CSS de outra forma) — critico no formulario principal. */
  font-size: 16px;
  /* line-height explícito: o <select> nativo resolve "normal" de forma
     diferente do <input>, o que fazia o campo do telefone ficar mais
     alto — com o mesmo valor nos dois, a altura fica igual sem precisar
     de forçar um height fixo. */
  line-height: 1.4;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* O browser força um fundo claro + texto preto nos campos preenchidos
   por autofill (guardados no dispositivo), ignorando o CSS normal —
   só este truque (sombra interior enorme a fingir ser o fundo, mais
   -webkit-text-fill-color) consegue substituir isso. O delay gigante
   na transição do background-color evita o Chrome voltar a pintar de
   amarelo/branco num instante antes deste estilo "pegar". Cobre as
   duas variantes do pseudo-elemento (:-webkit-autofill prefixado E
   :autofill sem prefixo — Chrome recentes expõem os dois, e sem o
   segundo alguns campos, ex. Empresa, escapavam à regra). NOTA: o
   texto pequeno que aparece no campo ao passar o rato (antes de
   clicar) na sugestão da dropdown do próprio browser é 100% nativo do
   Chrome — não há CSS/JS que o controle. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active,
.field input:autofill,
.field textarea:-webkit-autofill,
.field textarea:-webkit-autofill:hover,
.field textarea:-webkit-autofill:focus,
.field textarea:-webkit-autofill:active,
.field textarea:autofill {
  -webkit-text-fill-color: var(--headline) !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  caret-color: var(--headline);
  transition: background-color 5000s ease-in-out 0s;
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}


/* ---------- Dropdown customizado ----------
   O Chrome não permite estilizar o :hover das <option> nativas (fica
   sempre a azul do sistema), por isso o <select> passa a ficar
   visualmente escondido (mas continua a ser o valor real do formulário)
   e é "desenhado por cima" por este componente em JS (ver
   initCustomSelects em main.js). */
.custom-select {
  position: relative;
}

.custom-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--headline);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.custom-select__trigger:focus-visible,
.custom-select.is-open .custom-select__trigger {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.custom-select__trigger-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-select__trigger-label.is-placeholder {
  color: var(--text-muted);
}

.custom-select__arrow {
  flex-shrink: 0;
  color: #ffffff;
  transition: transform 0.2s var(--ease);
}

.custom-select.is-open .custom-select__arrow {
  transform: rotate(180deg);
}

.custom-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #0a0a0a;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 260px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}

.custom-select.is-open .custom-select__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.custom-select__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.custom-select__option:hover,
.custom-select__option.is-active {
  background: var(--accent);
  color: #052012;
}

.custom-select__box {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.custom-select__option[aria-selected="true"] .custom-select__box {
  background: var(--accent);
  border-color: var(--accent);
  color: #052012;
}

/* Ao passar o rato na opção já selecionada, o fundo da linha e a caixa
   ficam ambos verdes e a caixa "desaparece" nesse verde — um contorno
   escuro devolve-lhe contraste. */
.custom-select__option:hover[aria-selected="true"] .custom-select__box,
.custom-select__option.is-active[aria-selected="true"] .custom-select__box {
  border-color: #052012;
}

.custom-select__list::-webkit-scrollbar {
  width: 8px;
}

.custom-select__list::-webkit-scrollbar-track {
  background: #000000;
  border: 1px solid var(--border);
}

.custom-select__list::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 4px;
}

/* Reduzido ao mínimo real (testado): com o indicativo mais comprido
   ("🇲🇦 +212") a caixa só precisa de ~76px sem padding nenhum — 92px já
   dá folga confortável sem sobrar espaço a mais. O número de telemóvel
   (o campo que as pessoas realmente preenchem) fica com bem mais
   espaço do que antes. */
.phone-input .custom-select {
  min-width: 92px;
}

.phone-input .custom-select__trigger {
  padding-left: 8px;
  padding-right: 8px;
  min-width: 92px;
  gap: 6px;
}

.phone-input .custom-select__list {
  right: auto;
  min-width: 170px;
}

/* Campo de telefone com seletor de bandeira/indicativo */
.phone-input {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.phone-input input {
  min-width: 0;
}

.phone-input select {
  /* Padding reduzido (era 15/32): só há uma opção (+351) por agora, não
     precisa da mesma largura generosa de uma lista de países cheia — e
     assim o número de telemóvel (o campo que as pessoas realmente
     preenchem) fica com bem mais espaço, em vez de ficarem quase do
     mesmo tamanho. O box-sizing é o que faz este padding realmente
     encolher a largura total (ver regra global de box-sizing:border-box). */
  padding-left: 9px;
  padding-right: 20px;
  background-position: right 8px center;
  background-size: 9px 7px;
}

/* Linhas dinâmicas de "Redes sociais" (plataforma + link/handle) — ver
   initSocialRows em main.js. Cada linha segue o mesmo padrão em grid do
   .phone-input (select + input lado a lado), com um "x" a seguir só nas
   linhas adicionadas (a primeira nunca tem, é fixa). */
.social-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-fields__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.social-fields__row:has(.social-fields__remove) {
  grid-template-columns: 140px 1fr auto;
}

.social-fields__value {
  min-width: 0;
}

.social-fields__remove {
  flex: 0 0 auto;
  width: 44px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--headline);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.social-fields__remove:hover {
  border-color: #ff4d4d;
  color: #ff4d4d;
}

.social-fields__add {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
}

.social-fields__add:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .social-fields__row,
  .social-fields__row:has(.social-fields__remove) {
    grid-template-columns: 1fr;
  }

  .social-fields__remove {
    width: 100%;
    height: 40px;
  }
}

/* Cartões com formulário: mesma luz por trás usada nos CTA-Finais */
.card:has(.qualify-form-js) {
  box-shadow: 0 0 70px -5px rgba(0, 200, 83, 0.48);
  text-align: left;
}

.card:has(.qualify-form-js) .card__title {
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(21px, 5.5vw, 26px);
}

/* Aviso de erro por campo: contorna a própria caixa a vermelho e mostra
   a mensagem específica por baixo dela (em vez de uma caixa genérica
   única no fim do formulário). */
.field input.has-error,
.field textarea.has-error,
.field .custom-select.has-error .custom-select__trigger {
  border-color: #ff4d4d;
}

.field input.has-error:focus,
.field textarea.has-error:focus,
.field .custom-select.has-error .custom-select__trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.18);
}

.field-error {
  display: none;
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 2px;
}

.field-error.is-visible {
  display: block;
}

/* ---------- Checkbox RGPD ---------- */
.field-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.field-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: -2px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-card);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.field-checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.field-checkbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.field-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid #052012;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.field-checkbox input[type="checkbox"].has-error {
  border-color: #ff4d4d;
}

.field-checkbox label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  cursor: pointer;
}

.field-checkbox label a {
  color: var(--headline);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}

.field-checkbox label a:hover {
  color: var(--accent);
}

/* ---------- Qualify Flow (formulário de qualificação + Calendly) ---------- */
.qualify-flow__intro {
  color: var(--text-muted);
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.6;
}

.qualify-flow__step {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

.qualify-flow__step.is-active {
  display: block;
  animation: qualify-step-in 0.35s var(--ease) forwards;
}

@keyframes qualify-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .qualify-flow__step.is-active {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.qualify-flow__error {
  display: none;
  color: #ff6b6b;
  font-size: 12.5px;
  margin: -6px 0 0;
  text-align: center;
}

.qualify-flow__error.is-visible {
  display: block;
}

.qualify-flow__step--success {
  text-align: center;
  padding: 8px 0 4px;
}

.qualify-flow__success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
}

.qualify-flow__step--success .qualify-flow__intro {
  max-width: 420px;
  margin: 0 auto 28px;
}

.qualify-flow__calendly {
  margin-top: 28px;
  width: 100%;
  text-align: left;
  /* O painel do Google Calendar (nome do evento, duração, descrição) usa
     texto cinzento pensado para fundo claro — sobre o preto do pop-up
     ficava quase ilegível. Fundo próprio claro, como um cartão dentro
     do pop-up escuro, em vez de herdar o fundo à volta. Borda + sombra
     para não ser uma transição a direito preto→branco, meio chocante. */
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 4px;
  /* Sem borda (a do Google, junto às caixas de horário, é um cinza
     neutro muito específico — sem replicar isso à letra, uma borda
     nossa a acompanhar ficava sempre a destoar). Só o glow verde da
     marca a dar profundidade, mais visível do que uma sombra preta
     sobre um pop-up já quase preto. */
  box-shadow: 0 0 40px -6px rgba(0, 200, 83, 0.4);
}

.qualify-flow__calendar-close {
  margin-top: 20px;
}

.qualify-flow__calendly:empty {
  margin-top: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}

.qualify-flow__calendly-inline {
  /* Voltou ao scroll interno normal do iframe (altura fixa e mais baixa):
     tentámos altura generosa + scroll desativado para não termos dois
     scrolls, mas isso arriscava cortar horários em dias com mais
     disponibilidade, sem forma de lá chegar. Dois scrollbars é um
     detalhe estético menor comparado com esconder horários reais de um
     lead — ver conversa em PROXIMOS-PASSOS.md se quiseres retomar isto. */
  width: 100%;
  height: 600px;
  border-radius: calc(var(--radius-sm) - 2px);
  display: block;
  /* Explícito no próprio iframe (não só no contentor à volta): evita
     qualquer instante em que o fundo escuro do pop-up apareça por trás
     enquanto a página do Google ainda está a carregar. */
  background: #ffffff;
}

@media (max-width: 480px) {
  .qualify-flow__calendly-inline {
    height: 480px;
  }
}

/* Estado de loading do botão "Continuar" enquanto o lead é submetido */
.btn.is-loading {
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(5, 32, 18, 0.35);
  border-top-color: #052012;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after {
    animation: none;
  }
}

/* Lista mais larga do que o padrão de .qualify-list (320px) — usada
   quando os itens são frases completas em vez de rótulos curtos (ex:
   secção "Esta reunião é para ti se..." da página Agendar Reunião).
   Especificidade dupla (não só a ordem no ficheiro) para garantir que
   ganha sempre a .qualify-list base, esteja definida antes ou depois. */
.qualify-list.qualify-list--wide {
  max-width: 560px;
}

/* Indicador de scroll do Hero — traço fino com um ponto a "cair" até ao
   fim, convidando a continuar para o formulário. */
.scroll-cue {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.scroll-cue__track {
  position: relative;
  display: block;
  width: 1px;
  height: 42px;
  background: var(--border-strong);
  overflow: hidden;
}

.scroll-cue__dot {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: scroll-cue-fall 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-fall {
  0% { transform: translateY(-6px); opacity: 0; }
  25% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(42px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__dot {
    animation: none;
    top: 50%;
    opacity: 1;
  }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 80px 0 32px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 56px;
}

.footer__brand .logo {
  margin-bottom: 18px;
}

.footer__brand p {
  font-size: 14px;
  max-width: 280px;
  margin-bottom: 24px;
}

.social-row {
  display: flex;
  gap: 12px;
}

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.social-row a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.footer__heading {
  color: var(--headline);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 600;
}

.footer__links {
  display: grid;
  gap: 12px;
}

.footer__links a {
  font-size: 14px;
  transition: color 0.2s var(--ease);
}

.footer__links a:hover {
  color: var(--accent);
}

.footer__bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--text-faint);
}

.footer__bottom-links {
  display: flex;
  gap: 20px;
}

.footer__bottom-links a:hover {
  color: var(--accent);
}

/* ---------- Logo bar ---------- */
.logo-bar {
  position: relative;
  padding: 34px 0;
  background: rgba(0, 0, 0, 0.35);
}

.logo-bar::before,
.logo-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.12) 80%,
    transparent
  );
  filter: blur(0.4px);
}

/* Evita uma 2ª linha sobreposta exatamente na mesma costura: a secção
   que vem logo a seguir à faixa de clientes não precisa da sua própria
   linha de topo, já que a .logo-bar::after já a faz ali. */
.logo-bar + .section--phase::before {
  display: none;
}

.logo-bar::before {
  top: 0;
}

.logo-bar::after {
  bottom: 0;
}

.logo-marquee {
  overflow: hidden;
  width: 100%;
}

.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 36px;
  will-change: transform;
  backface-visibility: hidden;
}

/* A animação só arranca depois do JS definir --set-width (ver
   initLogoMarquee em main.js) — assim nunca há um salto inicial a meio
   da primeira volta por a variável ainda não existir. */
.logo-track.is-ready {
  animation: logo-scroll 42s linear infinite;
}

.logo-track span {
  position: relative;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.logo-track span:hover {
  color: var(--headline);
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--set-width, 50%))); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
  }
  .logo-marquee {
    overflow-x: auto;
  }
}

/* ---------- Agitação / stats percentuais ---------- */
.agit-stat {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.agit-source {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
}

/* ---------- Mensagem central / contraste ---------- */
.central-message {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  text-align: center;
  max-width: 900px;
  margin: 0 auto 48px;
  line-height: 1.3;
  color: var(--headline);
}

.central-message .is-muted {
  color: var(--text-faint);
  text-decoration: line-through;
}

.vs-table {
  max-width: 760px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-strong);
}

.vs-table__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.vs-table__head-col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
}

.vs-table__head-col svg {
  flex-shrink: 0;
}

.vs-table__head-col--bad {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-faint);
  border-right: 1px solid var(--border);
}

.vs-table__head-col--good {
  background: var(--accent-dim);
  color: var(--accent);
}

.vs-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}

.vs-table__cell {
  padding: 16px 20px;
  font-size: 14px;
}

.vs-table__cell--bad {
  color: var(--text-faint);
  text-decoration: line-through;
  border-right: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}

.vs-table__cell--good {
  color: var(--headline);
  font-weight: 600;
  background: rgba(0, 200, 83, 0.04);
}

/* ---------- Qualificação ---------- */
.qualify-card {
  position: relative;
  padding: 40px 36px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.qualify-card:hover {
  transform: translateY(-6px);
}

.qualify-card--yes {
  /* Sem box-shadow para fora, nem em repouso nem no hover — esse
     brilho fica só reservado para botões/CTAs. Aqui o glow é só o
     círculo por dentro do cartão (.qualify-card--yes::before, abaixo). */
  box-shadow: 0 0 0 1px var(--accent-dim) inset;
}

.qualify-card--yes:hover {
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* Holofote verde no canto inferior direito: o cartão ficou mais baixo
   (texto a usar melhor o espaço), por isso o centro do gradiente foi
   puxado mais para dentro do que no "Website Futuro" original — senão
   ficava quase todo fora e o glow desaparecia. */
.qualify-card--yes::before {
  content: "";
  position: absolute;
  /* .qualify-card::before (regra partilhada, acima) põe inset:0, ou seja
     top:0/left:0 — sem os anular aqui explicitamente, ficam a competir
     com bottom/right (mesma especificidade) e o browser resolve o
     conflito ignorando o bottom/right, prendendo o círculo ao canto
     ERRADO (topo-esquerda) em vez de baixo-direita. */
  top: auto;
  left: auto;
  bottom: -280px;
  right: -280px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(0, 200, 83, 0.4) 0%, rgba(0, 200, 83, 0.13) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.qualify-card--no {
  opacity: 0.8;
  filter: saturate(0.8);
}

.qualify-card--no:hover {
  opacity: 0.95;
}

.qualify-card__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin: 0 auto 20px;
}

.qualify-card--yes .qualify-card__badge {
  background: var(--accent);
  color: #052012;
}

.qualify-card--no .qualify-card__badge {
  background: var(--bg-alt);
  color: var(--text-faint);
  border: 1px solid var(--border-strong);
}

.qualify-card__title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.7vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}

.qualify-card--yes .qualify-card__title {
  color: var(--accent);
}

.qualify-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
  margin-inline: auto;
  text-align: left;
}

.qualify-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--text-muted);
}

.qualify-list li .li-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}

.qualify-list--yes li .li-icon {
  background: var(--accent-dim);
  color: var(--accent);
}

.qualify-list--no li .li-icon {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-faint);
}

/* ---------- Caso de Estudo ---------- */
.case-study {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* Névoa verde: o centro do gradiente fica fora do widget (overflow:
   hidden corta-o), por isso só a franja mais suave e desfocada chega
   a aparecer, nunca o blob definido. */
.case-study::before {
  content: "";
  position: absolute;
  top: -570px;
  right: -550px;
  width: 1160px;
  height: 1160px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(0, 200, 83, 0.4) 0%, rgba(0, 200, 83, 0.13) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.case-study__metrics {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  padding: 40px;
  justify-content: center;
  text-align: center;
}

.case-metric {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.case-metric:last-child {
  border-bottom: none;
}

.case-metric__value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  color: var(--accent);
  display: block;
}

.case-metric__label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.case-study__body {
  position: relative;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  justify-content: center;
  text-align: center;
}

.case-study__text {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.case-study__quote {
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  font-style: italic;
  color: var(--headline);
  font-size: 15px;
}

.case-study__quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  color: var(--text-faint);
}

.case-study__body .btn {
  align-self: center;
}

/* ---------- Case study chart ---------- */
.case-chart {
  margin-top: 32px;
}

.case-chart__title {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.case-chart__bars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.case-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.case-chart__val {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-muted);
}

.case-chart__col--final .case-chart__val {
  color: var(--accent);
}

.case-chart__bar {
  width: 32px;
  border-radius: 6px 6px 0 0;
  background: var(--text-faint);
  opacity: 0.4;
  transform: scaleY(0);
  transform-origin: bottom;
}

.case-chart__col--final .case-chart__bar {
  background: var(--accent);
  opacity: 1;
  box-shadow: 0 0 24px -6px var(--accent-glow);
}

.case-chart__month {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
}

.reveal.is-visible .case-chart__col:nth-child(1) .case-chart__bar {
  animation: bar-grow 0.6s var(--ease) 0.15s forwards;
}
.reveal.is-visible .case-chart__col:nth-child(2) .case-chart__bar {
  animation: bar-grow 0.6s var(--ease) 0.3s forwards;
}
.reveal.is-visible .case-chart__col:nth-child(3) .case-chart__bar {
  animation: bar-grow 0.6s var(--ease) 0.45s forwards;
}
.reveal.is-visible .case-chart__col:nth-child(4) .case-chart__bar {
  animation: bar-grow 0.6s var(--ease) 0.6s forwards;
}
.reveal.is-visible .case-chart__col:nth-child(5) .case-chart__bar {
  animation: bar-grow 0.6s var(--ease) 0.75s forwards;
}
.reveal.is-visible .case-chart__col:nth-child(6) .case-chart__bar {
  animation: bar-grow 0.7s var(--ease) 0.9s forwards;
}

@keyframes bar-grow {
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .case-chart__bar {
    transform: scaleY(1);
    animation: none;
  }
}

/* ---------- Separadores de fase ---------- */
.section--phase {
  position: relative;
}

.section--phase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.12) 80%,
    transparent
  );
  filter: blur(0.4px);
}

/* A secção dos capítulos já tem uma linha equivalente no topo do primeiro
   capítulo (ver .method-chapter::before) — evita duplicar a linha logo
   a seguir ao subheadline do hero. */
#metodo.section--phase::before {
  display: none;
}

/* Menos espaço vazio entre o subheadline do hero e o início dos capítulos —
   o hero já usa .hero--tight (menos padding-bottom), e este ainda soma
   por cima. */
#metodo {
  padding-top: 0;
}

/* ---------- Texto com gradiente dinâmico ---------- */
.text-shimmer {
  background-image: linear-gradient(90deg, #027a3f 0%, var(--accent) 22%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Estrela cadente ---------- */
.meteor-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.meteor {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: meteor-fly linear infinite;
}

.meteor::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), transparent);
  transform-origin: left center;
  transform: translateY(-50%) rotate(207deg);
}

.meteor--1 { top: 10%; left: 6%; animation-duration: 22s; animation-delay: 0s; }
.meteor--2 { top: 65%; left: 55%; animation-duration: 26s; animation-delay: 4s; }
.meteor--3 { top: 30%; left: 80%; animation-duration: 24s; animation-delay: 9s; }
.meteor--4 { top: 80%; left: 20%; animation-duration: 28s; animation-delay: 13s; }
.meteor--5 { top: 45%; left: 35%; animation-duration: 25s; animation-delay: 18s; }
.meteor--6 { top: 5%; left: 65%; animation-duration: 27s; animation-delay: 22s; }

@keyframes meteor-fly {
  0%, 89% { transform: translate(0, 0); opacity: 0; }
  91% { opacity: 1; }
  97% { transform: translate(300px, 150px); opacity: 0; }
  100% { transform: translate(300px, 150px); opacity: 0; }
}

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

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -6px var(--accent-glow);
  z-index: 200;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 32px -6px var(--accent-glow);
}

.whatsapp-float__tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--headline);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.whatsapp-float:hover .whatsapp-float__tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
  animation: whatsapp-pulse 2.4s ease-out infinite;
  z-index: -1;
}

@keyframes whatsapp-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Banner de cookies ---------- */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 250;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: 920px;
  margin-inline: auto;
  padding: 20px 24px;
  background: var(--bg-card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner__text {
  flex: 1 1 360px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.cookie-banner__text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px;
  }
  .cookie-banner__actions {
    width: 100%;
  }
  .cookie-banner__actions .btn {
    flex: 1;
  }
}

/* Alternativa ao iframe do Google quando os cookies ainda não foram
   aceites — mesmo cartão claro do calendário, mas só com uma frase, um
   botão para aceitar os cookies ali mesmo (sem precisar de ir à procura
   do banner, que só aparece uma vez) e um link direto de reserva, para
   ninguém ficar sem forma nenhuma de agendar. */
.qualify-flow__calendar-blocked {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  text-align: center;
  color: #3c4043;
}

.qualify-flow__calendar-blocked p {
  margin-bottom: 20px;
  font-size: 14px;
  max-width: 380px;
}

.qualify-flow__calendar-accept {
  /* .btn--primary tem um glow verde pensado para fundo escuro — aqui,
     sobre o branco do cartão, ficava um halo esverdeado a mais. */
  box-shadow: none;
}

.qualify-flow__calendar-accept:hover {
  box-shadow: 0 6px 16px rgba(0, 200, 83, 0.25);
}

/* Ação secundária (já há calendário marcado sem aceitar cookies) — preto
   sólido em vez do verde da marca, para não competir com o "Aceitar" e
   para ler como um gesto mais discreto/premium sobre o branco do cartão,
   com uma margem a separar visualmente das duas ações de cima. */
.btn--calendar-blocked {
  margin-top: 14px;
  background: #111111;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.btn--calendar-blocked:hover {
  background: #000000;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

/* ---------- Modal (popup do formulário de contacto) ---------- */
body.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* visibility (não opacity): o modal em si nunca "esbate" — quem
     desaparece com fade é só o cartão (ver .modal__dialog). Assim o
     overlay/blur aparece já no 1º frame, sem parecer atrasado. */
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0s;
}

.modal.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  /* Sem transition: este blur aparece logo no 1º frame, não entra a
     crescer aos poucos como o do cartão. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal__dialog {
  position: relative;
  width: 100%;
  /* 640: proporção mais compacta preferida. O text-wrap:balance no
     .field label (ver abaixo) já evita palavras órfãs como "PAGA?" nas
     labels mais compridas, mesmo a esta largura mais estreita. */
  max-width: 640px;
  max-height: 90vh;
  /* Sem overflow/clip aqui — é só quem tem a borda (::after, ver "Acento
     de canto") e o glow. Quem corta e faz scroll é o .modal__body lá
     dentro, para o corte por sub-pixel do overflow:hidden nunca comer a
     borda (sobretudo notório no fundo). Flex (em vez de height:100% no
     filho) é o que garante que o .modal__body recebe mesmo a altura já
     limitada pelo max-height, e não o conteúdo todo por esticar. */
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  /* Um único nível de blur (o do próprio card de vidro), a entrar
     suavemente do zero até ao valor final — sem salto entre dois blurs
     diferentes. */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 0s, transform 0s, backdrop-filter 0s, -webkit-backdrop-filter 0s, max-width 0.25s var(--ease);
}

.modal__dialog--wide {
  max-width: 760px;
}

.modal.is-open .modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), backdrop-filter 0.22s var(--ease), -webkit-backdrop-filter 0.22s var(--ease), max-width 0.25s var(--ease);
}

.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  /* Pequena folga entre a borda exterior e o conteúdo/scrollbar lá
     dentro, para a scrollbar não ficar colada ao anel verde. */
  padding: 5px;
}

.modal__scroll {
  overflow-y: auto;
  padding: 31px;
  flex: 1 1 auto;
  min-height: 0;
  /* O formulário é mais alto do que cabe no ecrã na maioria dos casos —
     a barra fica visível de propósito, para ficar claro que há mais
     conteúdo a seguir. Escondê-la fazia sentido só se o conteúdo
     coubesse sempre por inteiro, o que não é o caso aqui. */
  scrollbar-width: thin;
  scrollbar-color: #ffffff #000000;
}

.modal__scroll::-webkit-scrollbar {
  width: 8px;
}

.modal__scroll::-webkit-scrollbar-track {
  background: #000000;
  border: 1px solid var(--border);
}

.modal__scroll::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 4px;
}

.modal__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  /* Mais afastado da borda direita do que o normal 14px: aqui vive
     também a scrollbar interna (ver .modal__body/.modal__scroll) — sem
     esta folga extra, o círculo ficava colado/sobreposto a ela. */
  right: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--headline);
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.modal__close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.grid > .reveal:nth-child(1) { transition-delay: 0s; }
.grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
.grid > .reveal:nth-child(3) { transition-delay: 0.16s; }
.grid > .reveal:nth-child(4) { transition-delay: 0.24s; }
.grid > .reveal:nth-child(5) { transition-delay: 0.32s; }
.grid > .reveal:nth-child(6) { transition-delay: 0.4s; }
.grid > .reveal:nth-child(7) { transition-delay: 0.48s; }
.grid > .reveal:nth-child(8) { transition-delay: 0.56s; }

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* grid--3 sempre tem 3 itens: a 2 colunas sobra sempre 1 numa
     linha própria. Em flex (em vez de grid) essa linha incompleta
     fica centrada em vez de encostada à esquerda. */
  .grid--3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .grid--3 > * {
    flex: 0 1 calc(50% - 14px);
  }
  .stats-band {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  /* Cartões do método: ou os 5 lado a lado (desktop), ou 1 por linha.
     Nada de 3+2 ou 2+2+1 (fica desorganizado). Abaixo de 980px empilham. */
  .method-track {
    /* O alargamento para além do .container é só para a fila de 5 em
       desktop — em pilha de 1 coluna não faz sentido e sairia da tela. */
    margin-inline: 0;
  }
  .method-track__cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .method-track__cards > * {
    width: 100%;
    max-width: 460px;
  }

  /* Seguranca extra em tablet: titulos com nowrap fixo (para uma frase
     especifica caber numa linha em desktop) podem nao caber a esta
     largura — quebrar antes de causar scroll horizontal na pagina. */
  [style*="nowrap"].hero__title,
  [style*="nowrap"].section-title,
  [style*="nowrap"].section-sub--punch,
  [style*="nowrap"].cta-banner__text,
  h1[style*="nowrap"],
  h2[style*="nowrap"] { white-space: normal !important; }
}

/* Menu hambúrguer já a partir de tablet — a nav horizontal não cabe abaixo de ~900px */
@media (max-width: 900px) {
  .hero {
    padding: 120px 0 64px;
  }
  /* Layouts de 2 colunas (ex.: título + formulário) empilham já em tablet-retrato */
  .grid--2 {
    grid-template-columns: 1fr;
  }
  .nav,
  .header__actions .btn {
    display: none;
  }
  /* Sem nav a meio, o logo pode encolher para dar mais espaco ao
     hamburguer e ao seletor de idioma. Tamanho final definido mais
     abaixo (`.header .logo__mark`), que tem prioridade no cascade. */
  .header__inner .logo {
    margin-right: 0;
  }
  /* Header simétrico: logo à esquerda, cluster de utilidade à direita */
  .header__inner {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .header__actions {
    gap: 9px;
  }
  .lang-switch__trigger {
    padding: 0;
    width: 34px;
    height: 34px;
    justify-content: center;
    border-radius: 9px;
  }
  .lang-switch__globe {
    width: 16px;
    height: 16px;
  }
  .lang-switch__code,
  .lang-switch__arrow {
    display: none;
  }
  .lang-switch__list {
    right: 0;
    left: auto;
    transform: translateY(-6px);
  }
  .lang-switch.is-open .lang-switch__list {
    transform: translateY(0);
  }
  .nav-toggle {
    display: flex;
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  .nav-toggle svg {
    width: 16px;
    height: 12px;
  }
  .logo__mark {
    height: 46px;
  }
  .header .logo__mark {
    height: 32px;
  }
  .header.is-open .nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* .header__inner .nav tem margin-right:56px para dar respiro ao CTA
       no desktop — sem anular aqui, essa margem encolhe o dropdown mobile
       56px a menos do que a largura do ecrã, e o que estiver por trás
       (o eyebrow do hero) fica visível nesse espaço vazio à direita. */
    margin-right: 0;
    /* Mesmo tom do header quando o menu está aberto (.header.is-open) —
       para o dropdown parecer a mesma superfície a continuar, não um
       painel à parte. */
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 24px;
    gap: 20px;
  }
  .nav__cta-mobile {
    display: inline-flex;
    align-self: stretch;
    justify-content: center;
    margin-top: 4px;
  }
}

@media (max-width: 760px) {
  .hero {
    padding: 110px 0 72px;
  }
  .page-hero {
    padding: 104px 0 64px;
  }
  .grid--3,
  .grid--4,
  .grid--2 {
    grid-template-columns: 1fr;
  }

  /* Secção do formulário na Reunião Estratégica: no desktop o texto
     ("Antes de Falarmos de Soluções" + título + subheadline) fica ao
     lado do formulário; no mobile o .grid--2 já empilha em coluna única
     (ver regra acima) — o texto completo (incluindo o subheadline) fica
     por cima do formulário, ordem natural do HTML. */

  .form__row {
    grid-template-columns: 1fr;
  }
  .footer__top {
    grid-template-columns: 1fr;
  }
  .step {
    grid-template-columns: 48px 1fr;
  }
  .cta-banner {
    padding: 48px 24px;
  }
  .vs-table__head-col {
    font-size: 11px;
    padding: 12px 8px;
    gap: 5px;
  }
  .vs-table__head-col svg {
    width: 14px;
    height: 14px;
  }
  .vs-table__cell {
    padding: 12px 10px;
    font-size: 12px;
  }
  .logo-track {
    gap: 32px;
  }
  .whatsapp-float {
    right: 22px;
    bottom: 10px;
    width: 52px;
    height: 52px;
  }
  .case-study {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Mobile — experiência de telemóvel afinada
   ============================================================ */
@media (max-width: 760px) {
  /* Ritmo vertical: 110px por secção é demasiado num telemóvel — e
     igual em todas (--tight incluído), tal como no desktop. O
     stats-showcase tem o seu próprio ajuste mais abaixo, também a 68px. */
  .section { padding: 68px 0; }
  .section--tight { padding: 68px 0; }
  .section--phase::before,
  .method-chapter::before,
  .logo-bar::before,
  .logo-bar::after { left: 6%; right: 6%; }

  /* Hero mais compacto e legível */
  .hero { padding: 104px 0 54px; }
  .hero__title { font-size: clamp(30px, 6.4vw, 52px); }
  .hero { --hero-logo-h: clamp(30px, 6.4vw, 52px); }
  .hero__subtitle { font-size: 16px; margin-bottom: 28px; }
  .hero__actions {
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 24px;
  }
  /* Lado a lado tambem no mobile (em vez de empilhados) — cada botao
     encolhe (flex:1 1 0, padding/letra menores) para os dois caberem
     confortavelmente lado a lado mesmo em ecras estreitos. */
  .hero__actions .btn {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    padding: 14px 14px;
    font-size: 13.5px;
  }
  .hero__trust { font-size: 13px; }

  /* Títulos que tinham nowrap fixo passam a quebrar linha no telemóvel */
  [style*="nowrap"].hero__title,
  [style*="nowrap"].section-title,
  [style*="nowrap"].section-sub--punch,
  [style*="nowrap"].cta-banner__text,
  h1[style*="nowrap"],
  h2[style*="nowrap"] { white-space: normal !important; }

  /* Fotos dos fundadores por baixo do conteúdo do hero */
  .hero__people { margin-top: 26px; gap: 12px; max-width: 360px; }

  /* Números em destaque */
  .stats-showcase { padding: 68px 0; }
  .stats-showcase__grid { gap: 14px; }
  .stats-showcase__item { flex-basis: 160px; max-width: 232px; padding: 30px 16px; }
  .stats-showcase__value { font-size: 34px; }

  /* Cartões e blocos */
  .card { padding: 24px; }
  .testimonial { padding: 24px; }
  /* .qualify-card nao herda de .card (classe propria) e ficava com os
     40px/36px do desktop tambem no telemovel, apertando demasiado as
     frases da lista "E para ti se..." */
  .qualify-card { padding: 28px 22px; }
  .cta-banner { padding: 44px 22px; }
  .cta-banner__title { font-size: clamp(24px, 6.5vw, 32px); }
  .cta-banner__text { font-size: 15px; }
  .section-sub { font-size: 15px; }

  /* Nichos */
  .niche-pill { padding: 9px 15px; font-size: 13px; }

  /* Modal / formulário */
  .modal { padding: 12px; }
  .modal__dialog { max-height: 92vh; }
  .modal__scroll { padding: 24px 20px; }
  /* right herda o valor do desktop (22px): é a folga mínima para a cruz
     não ficar em cima da scrollbar interna do formulário (ver comentário
     em .modal__close) — reduzir isto no mobile foi o que causava a
     sobreposição. */
  .modal__close { top: 12px; }

  /* "A Nossa História": tipografia e ritmo recalibrados para ecrã estreito;
     o fluxo de valores passa a linha vertical. */
  .origin-headline { font-size: clamp(26px, 8vw, 40px); }
  .origin-narrative { margin-top: 40px; gap: 22px; }
  .origin-narrative__p { font-size: 15.5px; line-height: 1.8; }
  .origin-narrative--lead .origin-narrative__p:first-of-type::first-letter { font-size: 2.6em; }
  .origin-values { margin: 30px auto; }
  .origin-values__item { font-size: clamp(14px, 4.4vw, 17px); padding: 14px 0 14px 20px; }
  .origin-chaos__field { height: 178px; }
  .origin-chaos__chip:nth-of-type(n+9) { display: none; }

  .origin-flow__track {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 0;
  }
  /* Linha vertical só entre o 1.º e o 5.º badge (centros a 14px do topo/base). */
  .origin-flow__track::before,
  .origin-flow__fill {
    top: 14px;
    left: 13px;
    width: 2px;
    height: calc(100% - 28px);
  }
  .origin-flow__fill { transform-origin: top center; transform: scaleY(0); }
  .reveal.is-visible .origin-flow__fill { transform: scaleY(1); }
  .origin-flow__node { flex-direction: row; align-items: center; gap: 14px; width: 100%; }

  .origin-principles { margin-top: 34px; }
  .origin-principles__pair { padding: 16px 0; }
  .origin-principles__yes { font-size: clamp(15px, 4.6vw, 19px); }

  .origin-close { margin-top: 58px; padding-top: 40px; }
  .origin-close__line { font-size: clamp(19px, 6vw, 27px); }

  /* Rodapé */
  .footer { padding: 56px 0 28px; text-align: center; }
  .footer__top { gap: 30px; }
  .footer__brand p { margin-inline: auto; }
  .social-row { justify-content: center; }
  .footer__links { align-items: center; }
  .footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 480px) {
  .container { padding-inline: 18px; }
  .section,
  .section--tight,
  .stats-showcase { padding: 52px 0; }
  .hero { padding: 92px 0 44px; }
  .hero__title { font-size: clamp(28px, 8.8vw, 38px); }
  .hero { --hero-logo-h: clamp(28px, 8.8vw, 38px); }
  h1[style*="nowrap"] { font-size: clamp(28px, 8.8vw, 38px) !important; }
  .section-title { font-size: clamp(24px, 7.6vw, 33px); }
  .stats-showcase__grid { gap: 12px; }
  .stats-showcase__item { padding: 24px 14px; }
  .card,
  .testimonial { padding: 22px 20px; }
  .cta-banner { padding: 38px 18px; }
  .origin-chaos__field { height: 156px; }
  .origin-chaos__chip:nth-of-type(n+8) { display: none; }
}