/* Hero pôster. Tipografia é o herói: "Contabilidade" (a palavra mais longa, ~6,2em) ocupa quase toda a largura.
   Celular: 16vw (limitado pela altura em celulares baixos). ≥768: até 14,4vw / 12,5rem, limitado pela altura da tela. */

/* O Hero ocupa a primeira tela em todos os tamanhos. Abaixo de 1024, o conteúdo centraliza no espaço entre o header e a faixa. */
.ns-hp {
  --ns-hp-ribbon-h: clamp(8.5rem, 37.5vw, 15rem);
  position: relative; isolation: isolate; overflow: clip;
  min-block-size: 100vh; min-block-size: 100svh;
  display: grid; align-items: center;
  padding-block: calc(var(--ns-header-h) + clamp(1.5rem, 4vw, 3rem)) calc(var(--ns-hp-ribbon-h) + 1rem);
}
@media (min-width: 1024px) {
  .ns-hp { align-items: end; padding-block-end: clamp(3rem, 6vh, 4.5rem); }
}

.ns-hp__inner { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }

.ns-hp__title {
  display: grid; margin: 0;
  font-family: var(--ns-font-display); font-weight: 500; color: var(--ns-text);
  font-size: clamp(2.75rem, 16vw, 6.5rem); line-height: 0.92; letter-spacing: -0.055em;
  text-wrap: balance;
}
@media (min-width: 768px) {
  /* Limitado pela largura (16vw) E pela altura que sobra para o título: 100svh menos header, eyebrow,
     texto, CTA e respiros (~23,5rem), dividido pelas 2 linhas (~1,95em). Assim o Hero inteiro cabe na tela. */
  .ns-hp__title { font-size: max(3.25rem, min(14.4vw, 12.5rem, calc((100svh - 23.5rem) / 1.95))); }
  .ns-hp__line { white-space: nowrap; }
}
/* Telas baixas (notebook pequeno, janela reduzida): texto em 2 linhas e respiros menores. */
@media (min-width: 768px) and (max-height: 880px) {
  .ns-hp { padding-block-start: calc(var(--ns-header-h) + 0.5rem); }
  .ns-hp__inner { gap: 0.75rem; }
  .ns-hp__foot { max-inline-size: 46rem; gap: 1rem; margin-block-start: 0.5rem; }
  .ns-hp__lead { font-size: 1.0625rem; max-inline-size: 54ch; }
  .ns-hp__btn { min-block-size: 3.25rem; }
}
.ns-hp__mask { display: block; overflow: clip; padding-block-end: 0.1em; margin-block-end: -0.1em; }
.ns-hp__line { display: block; }
.ns-hp__line--mark { color: var(--ns-blue); }

.ns-hp__foot { display: grid; gap: var(--ns-s-6); margin-block-start: clamp(0.75rem, 2vw, 1.5rem); max-inline-size: 36rem; }
.ns-hp__lead { font-size: var(--ns-fs-lead); line-height: 1.6; color: var(--ns-text-2); max-inline-size: 38ch; }
.ns-hp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-s-4) var(--ns-s-8); }
.ns-hp__btn { min-block-size: 3.5rem; padding-inline: 1.75rem; font-size: 1.0625rem; }
@media (max-width: 767px) { .ns-hp__btn { inline-size: 100%; } }

/* Faixa: nunca atrás de texto. Celular: faixa baixa, abaixo dos CTAs. Desktop: sobe pela direita. */
.ns-hp__ribbon { position: absolute; inset-block-end: 0; z-index: -1; }
.ns-hp__ribbon path { fill: none; stroke-linecap: butt; }
.ns-hp__ribbon--m { inset-inline: 0; inline-size: 100%; block-size: var(--ns-hp-ribbon-h); }
.ns-hp__ribbon--m .ns-hp__ribbon-green { stroke: var(--ns-green); stroke-width: 38; }
.ns-hp__ribbon--m .ns-hp__ribbon-blue { stroke: var(--ns-blue); stroke-width: 26; opacity: 0.09; }
.ns-hp__ribbon--d { display: none; inset-inline-end: 0; inline-size: 54%; block-size: min(66svh, 42rem); }
.ns-hp__ribbon--d .ns-hp__ribbon-green { stroke: var(--ns-green); stroke-width: 120; }
.ns-hp__ribbon--d .ns-hp__ribbon-blue { stroke: var(--ns-blue); stroke-width: 80; opacity: 0.08; }
@media (min-width: 1024px) {
  .ns-hp__ribbon--m { display: none; }
  .ns-hp__ribbon--d { display: block; }
}

/* Celulares baixos (ex.: 320×568, 375×667): título e texto acompanham a altura para o CTA caber na primeira tela. */
@media (max-width: 767px) and (max-height: 700px) {
  .ns-hp { padding-block: calc(var(--ns-header-h) + 0.75rem) calc(var(--ns-hp-ribbon-h) + 0.5rem); }
  .ns-hp__inner { gap: 0.75rem; }
  .ns-hp__title { font-size: max(2.5rem, min(16vw, 11svh)); }
  .ns-hp__foot { gap: 1rem; margin-block-start: 0.25rem; }
  .ns-hp__lead { font-size: 0.9688rem; line-height: 1.5; }
  .ns-hp__btn { min-block-size: 3.25rem; }
}

/* Celulares muito baixos (320×568): a faixa encolhe para o Hero inteiro caber na primeira tela. */
@media (max-width: 767px) and (max-height: 600px) {
  .ns-hp { --ns-hp-ribbon-h: 4.5rem; }
}