/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — hero, about-grid, stat-card, solutions, cases,
               cta-block, section--about/solutions/cases/cta
   ═══════════════════════════════════════════════════════════════ */


/* ─── HERO ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100svh;                /* 100% da altura do viewport com suporte a barras de browser mobile */
  min-height: 600px;             /* garante altura mínima em viewports muito pequenos */
  display: flex;
  align-items: center;
  overflow: hidden;              /* corta o vídeo e os overlays nas bordas */
  background: var(--color-dark);
}

/* vídeo de fundo — centrado e escalado para cobrir todo o hero */
.hero__video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* centrado com o truque 50%/-50% */
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
  z-index: 0;
}

/* fundo escuro de fallback quando o vídeo ainda não carregou */
.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  z-index: 0;
}

/* overlay gradiente que escurece o vídeo para garantir legibilidade */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.72) 0%,    /* canto superior esquerdo muito escuro */
    rgba(80,30,0,0.35) 50%,  /* centro com tom laranja-escuro subtil */
    rgba(0,0,0,0.6) 100%     /* canto inferior direito escuro */
  );
  z-index: 1;
}

/* contentor interior: flex entre conteúdo (esquerda) e slideshow (direita) */
.hero__inner {
  position: relative;
  z-index: 2;                    /* acima do vídeo e overlay */
  display: flex;
  align-items: center;           /* centrado verticalmente em todos os tamanhos */
  justify-content: space-between;
  width: 100%;
  min-height: 100svh;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  padding-block: var(--nav-height) 4rem; /* topo = altura da nav; fundo = 4rem */
}

.hero__content { max-width: 680px; } /* limita largura do bloco de texto */

/* rótulo laranja acima do título principal */
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 1.25rem;
}

/* título principal do hero */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem); /* fluido entre 48px e 104px */
  font-weight: 700;
  color: var(--color-white);
  line-height: 0.95;              /* muito apertado — estilo display */
  letter-spacing: -0.04em;
  max-width: 900px;
  margin-bottom: 1.5rem;
}

/* subtítulo descritivo */
.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.7);
  max-width: 520px;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* linha de botões CTA */
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }


/* cada indicador textual */
.hero__slide {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  transition: color var(--transition);
  cursor: pointer;
}
.hero__slide.is-active { color: var(--color-accent); } /* slide activo em laranja */



/* mobile: coluna única, esconde navegação lateral */
@media (max-width: 768px) {
  .hero__inner          { flex-direction: column; justify-content: center; }
  .hero__solutions-nav  { display: none; }
}
@media (max-width: 640px) {
  .hero__slides { display: none; } /* esconde indicadores em mobile pequeno */
}


/* ─── HERO SLIDESHOW (painel direito) ───────────────────────── */
/* Card de vidro com casos/clientes que muda automaticamente */
.hero__slideshow {
  flex-shrink: 0;                /* não comprime dentro do flex do hero__inner */
  width: 400px;
  align-self:center;            /* centrado verticalmente */
  background: rgba(13,13,13,0.3); /* semi-transparente para ver o vídeo atrás */
  backdrop-filter: blur(16px);   /* glassmorphism */
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  position: relative;
  min-height: 200px;
}

.hero__slideshow-track { position: relative; flex: 1; } /* contentor que ocupa o espaço sobrante */

/* cada item do slideshow — todos sobrepostos; só o activo é visível */
.hero__slideshow-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: absolute;            /* sobrepostos uns aos outros */
  inset: 0;
  opacity: 0;                    /* invisível por defeito */
  transform: translateY(12px);   /* ligeiramente abaixo */
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;          /* não interactivo quando invisível */
}
/* item activo: visível na posição correcta */
.hero__slideshow-item.is-active {
  opacity: 1;
  transform: translateY(0);
  position: relative;            /* volta ao fluxo para definir a altura do contentor */
  pointer-events: auto;
}

/* Ajuste logo do cliente dentro do hero slide*/
.hero__slideshow-logo {
  max-height: 52px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  margin-bottom: 0.25rem;
}

/* título do caso/cliente */
.hero__slideshow-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* breve descrição do caso */
.hero__slideshow-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-top: 0.25rem;
}

/* dots de paginação do slideshow */
.hero__slideshow-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.hero__slideshow-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), width var(--transition);
}
.hero__slideshow-dot.is-active {
  background: var(--color-accent);
  width: 24px;                   /* pill quando activo */
}

@media (max-width: 1280px) { .hero__slideshow { width: 340px; } } /* transição suave */
@media (max-width: 1024px) { .hero__slideshow { width: 280px; } }
@media (max-width: 768px)  { .hero__slideshow { display: none; } } /* esconde em mobile */


/* ─── ABOUT GRID (homepage) ──────────────────────────────────────── */
/* Grelha de 2 colunas: texto à esquerda, estatísticas à direita */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }


/* grelha 2×2 de estatísticas com separadores finos */
.about-grid__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;                      /* os 1px formam as linhas divisórias */
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  overflow: hidden;              /* corta os cantos do último card */
}

/* ─── STAT CARD ──────────────────────────────────────────────────── */
/* Cada célula da grelha de estatísticas na secção About da homepage */
.stat-card {
  background: #1a1a1a;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background var(--transition);
}
.stat-card:hover { background: #222; } /* escurece ligeiramente ao hover */

/* número da estatística em laranja grande */
.stat-card__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-card__label { color: rgba(255,255,255,0.45); font-size: 0.88rem; } /* rótulo discreto */


/* ─── SOLUTIONS GRID (homepage) ──────────────────────────────────── */
/* Grelha de 4 cards de soluções na homepage */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .solutions-grid { grid-template-columns: 1fr; } }

/* card de solução — link clicável com hover elevation */
.solution-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-decoration: none;
  color: var(--color-text);
}
.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent); /* borda laranja ao hover */
}
/* variante grande com imagem */
.solution-card--large { padding: 2.5rem; }
.solution-card--large .solution-card__img { height: 180px; background-size: cover; background-position: center; border-radius: var(--radius-lg); margin-bottom: 0.5rem; }

/* ícone envolto em fundo laranja claro */
.solution-card__icon-wrap {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #fff7ed, #fed7aa); /* gradiente laranja muito suave */
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.solution-card__icon   { font-size: 2rem; }                          /* emoji grande */
.solution-card__body h3,
.solution-card__title  { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.solution-card__body p,
.solution-card__desc   { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; }
/* seta que desliza para a direita ao hover */
.solution-card__arrow  {
  color: var(--color-accent);
  margin-top: auto;               /* empurra para o fundo do card */
  align-self: flex-end;
  transition: transform var(--transition);
}
.solution-card:hover .solution-card__arrow { transform: translateX(4px); }

/* ─── ABOUT COUNTRYS SPLIT ────────────────────────────────────────────────── */
/* Layout split da homepage: nome grande à esquerda, stats à direita */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr; /* coluna direita ligeiramente mais larga */
  gap: 5rem;
  align-items: center;
}
@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; gap: 3rem; }
}

/* logótipo de imagem */
.about-split__logo {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0.75rem 0 1.5rem;
  filter: brightness(0) invert(1); /* converte para branco */
}

.about-split__desc {
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 460px;
}

/* coluna direita: posicionamento relativo para os anéis decorativos */
.about-split__right { position: relative; }

/* anéis concêntricos animados centrados na coluna direita */
.about-split__ring {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(232,119,34,0.08); /* muito subtil */
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: aboutRingPulse 5s ease-in-out infinite;
}
/* dois anéis adicionais gerados com pseudo-elementos */
.about-split__ring::before,
.about-split__ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: aboutRingPulse 5s ease-in-out infinite reverse; /* sentido inverso */
}
.about-split__ring::before {
  inset: 55px;                      /* anel interior menor */
  border: 1px solid rgba(0,110,255,0.07); /* azul muito subtil */
}
.about-split__ring::after {
  inset: 115px;                     /* anel interior mais pequeno */
  border: 1px solid rgba(232,119,34,0.05);
}
/* keyframe local — os anéis pulsam em escala */
@keyframes aboutRingPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.8; }
  50%       { transform: translate(-50%, -50%) scale(1.05); opacity: 0.35; }
}

/* grelha 2×2 de estatísticas sobre os anéis */
.about-stats {
  position: relative;
  z-index: 1;                       /* acima dos anéis */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 2.5rem;
}
.about-stat { display: flex; flex-direction: column; gap: 0.4rem; }
/* número grande da estatística */
.about-stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.04em;
  line-height: 1;
}
/* rótulo discreto em maiúsculas */
.about-stat__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}


/* ─── SOLUTIONS EDITORIAL LIST ───────────────────────────────────── */
/* Lista editorial de soluções com números, nomes e setas */
.sol-header {
  display: flex;
  align-items: baseline;           /* alinha pelo baseline do texto */
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 0.5rem;
}
/* subtítulo à direita do cabeçalho */
.sol-header__sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: 360px;
  text-align: right;
  line-height: 1.55;
}

/* linha separadora acima da lista */
.sol-list { border-top: 1px solid rgba(0,0,0,0.1); margin-top: 1.5rem; }

/* cada item da lista: link full-width com grid de 4 colunas */
.sol-list__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto 2.5rem; /* número | nome | desc | seta */
  align-items: center;
  gap: 2.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  color: var(--color-text);
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease;
}
/* sublinhado laranja→azul que cresce da esquerda ao hover */
.sol-list__item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--color-accent) 0%, #006EFF 100%);
  transition: width 0.45s var(--ease); /* animação mais lenta para efeito dramático */
}
.sol-list__item:hover::after { width: 100%; }
.sol-list__item:hover { color: var(--color-dark); }

/* número sequencial em laranja */
.sol-list__num {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  flex-shrink: 0;
}
/* nome da solução em tipografia display grande */
.sol-list__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: letter-spacing 0.3s ease;
}
/* hover: letter-spacing abre ligeiramente — efeito de expansão */
.sol-list__item:hover .sol-list__name { letter-spacing: -0.01em; }
/* descrição curta à direita do nome */
.sol-list__desc {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  max-width: 280px;
  line-height: 1.55;
}
/* seta que aparece ao hover */
.sol-list__arrow {
  font-size: 1.4rem;
  color: var(--color-accent);
  text-align: right;
  opacity: 0;                      /* invisível por defeito */
  transform: translateX(-6px);     /* deslocada para a esquerda */
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
}
.sol-list__item:hover .sol-list__arrow { opacity: 1; transform: translateX(0); }

/* tablet: esconde a descrição, ajusta grid */
@media (max-width: 900px) {
  .sol-list__desc  { display: none; }
  .sol-list__item  { grid-template-columns: 3rem 1fr auto; gap: 1.5rem; }
}
/* mobile: grelha simplificada de 2 colunas */
@media (max-width: 560px) {
  .sol-list__item  { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .sol-list__arrow { display: none; }
  .sol-header      { flex-direction: column; }
  .sol-header__sub { text-align: left; }
}


/* ─── CASES — dark section with themed cards ─────────────────────── */
/* Secção escura da homepage com cards de casos coloridos */
.section--cases {
  background: #111111;
  color: #111111;
}

/* cabeçalho da secção de casos: título à esquerda, subtítulo à direita */
.cases-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: var(--space-xl);
}
.cases-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 0.5rem;
}
.cases-header__sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.38);
  max-width: 320px;
  text-align: right;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .cases-header { flex-direction: column; align-items: flex-start; }
  .cases-header__sub { text-align: left; }
}

/* override da cases-grid para a versão escura: sem gap, grelha densa */
.section--cases .cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;                        /* os 2px formam separadores finos */
  background: #0a0a0a00;             /* a cor de fundo torna-se os separadores */
  border-radius: 0;
}
@media (max-width: 900px) { .section--cases .cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .section--cases .cases-grid { grid-template-columns: 1fr; } }

/* card de caso reestilizado para a secção escura */
.case-card {
  position: relative;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;       /* conteúdo alinhado ao fundo */
  min-height: 220px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  z-index: 1;
}
.case-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.4); z-index: 2; }

/* temas de cor dos cards */
.case-card--dark  { background: #1c1c1c; color: #ffffff; }
.case-card--dark2 { background: #1c1c1c; color: #ffffff; }
.case-card--navy  { background: #0A2557; color: #ffffff; }
.case-card--blue  { background: #006EFF; color: #ffffff; }
.case-card--beige { background: #F5F4F0; color: #1c1c1c; }
.case-card--cream { background: #ECEAE4; color: #1c1c1c; }
.case-card--warm  { background: #FFF3E8; color: #1c1c1c; }

/* código do país em tamanho enorme no fundo — ex: "PT", "HU" */
.case-card__ghost {
  position: absolute;
  right: -0.05em; bottom: -0.08em;
  font-family: var(--font-display);
  font-size: clamp(6rem, 12vw, 10rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  opacity: 0.05;                   /* quase invisível */
  pointer-events: none;
  user-select: none;
  transition: opacity 0.4s ease;
}
/* cor do ghost adaptada ao tema */
.case-card--dark  .case-card__ghost,
.case-card--dark2 .case-card__ghost,
.case-card--navy  .case-card__ghost,
.case-card--blue  .case-card__ghost { color: #ffffff; }
.case-card--beige .case-card__ghost,
.case-card--cream .case-card__ghost,
.case-card--warm  .case-card__ghost { color: #000000; }
.case-card:hover  .case-card__ghost { opacity: 0.12; } /* mais visível ao hover */

.case-card__body { position: relative; z-index: 1; } /* acima do ghost */

/* código do país em letras pequenas (ex: "PT · PORTUGAL") */
.case-card__code {
  display: block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.45;
  margin-bottom: 0.5rem;
}
/* cor do código adaptada ao tema */
.case-card--dark  .case-card__code,
.case-card--dark2 .case-card__code,
.case-card--navy  .case-card__code  { color: #006EFF; }
.case-card--blue  .case-card__code  { color: rgba(255,255,255,0.7); }
.case-card--beige .case-card__code,
.case-card--cream .case-card__code,
.case-card--warm  .case-card__code  { color: var(--color-accent); }

/* título do caso */
.case-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.case-card--dark  .case-card__title,
.case-card--dark2 .case-card__title,
.case-card--navy  .case-card__title,
.case-card--blue  .case-card__title { color: #ffffff; }
.case-card--beige .case-card__title,
.case-card--cream .case-card__title,
.case-card--warm  .case-card__title { color: #0D0D0D; }

/* resumo — escondido com clip-path, revelado ao hover */
.case-card__summary {
  font-size: 0.82rem;
  line-height: 1.55;
  opacity: 0.6;
  margin-bottom: 0.75rem;
  clip-path: inset(100% 0 0 0);    /* recorta para zero de altura — animável */
  transform: translateY(6px);
  transition: clip-path 0.35s var(--ease), transform 0.35s var(--ease);
}
.case-card:hover .case-card__summary { clip-path: inset(0% 0 0 0); transform: translateY(0); }

/* link "Ver caso" com cor adaptada ao tema */
.case-card__link {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.case-card--dark  .case-card__link,
.case-card--dark2 .case-card__link,
.case-card--navy  .case-card__link  { color: #006EFF; }
.case-card--blue  .case-card__link  { color: rgba(255,255,255,0.8); }
.case-card--beige .case-card__link,
.case-card--cream .case-card__link,
.case-card--warm  .case-card__link  { color: var(--color-accent); }

/* botão CTA "Ver todos os casos" centrado */
.section--cases .section__cta { padding-top: var(--space-xl); text-align: center; }


/* ─── CTA FINAL — dark with animated radial glow ─────────────────── */
/* Última secção da homepage: fundo quase preto com glows laranja e azul */
.section--home-cta {
  background: #0A0A0A;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* esfera decorativa laranja animada */
.home-cta__glow {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* centrado */
  background: radial-gradient(circle, rgba(232,119,34,0.15) 0%, transparent 65%);
  pointer-events: none;
  animation: ctaGlowPulse 5s ease-in-out infinite;
}
/* segunda esfera azul (mais pequena) com atraso */
.home-cta__glow--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,110,255,0.1) 0%, transparent 65%);
  animation: ctaGlowPulse 5s ease-in-out infinite 2.5s; /* atraso de metade do ciclo */
}
/* keyframe local: as esferas pulsam em escala e opacidade */
@keyframes ctaGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.7; }
  50%       { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* conteúdo do CTA — centrado e acima das esferas */
.home-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-inline: auto;
}
/* título principal do CTA */
.home-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0.75rem 0 1.25rem;
}
/* subtítulo discreto */
.home-cta__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.42);
  max-width: 500px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}