/* O hero começa no topo da página (o nav é transparente por cima) */
.hero { position: relative; isolation: isolate; padding: var(--nav-h) 0 92px; overflow: hidden; }

.hero__ribbon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* linha vertical à esquerda que "emoldura" o conteúdo */
.hero__frame { position: absolute; top: var(--nav-h); bottom: 0; left: var(--frame); border-left: 1px solid var(--line); }

.hero__content { padding: 74px var(--frame) 0 var(--content-left); max-width: calc(var(--content-left) + 760px); }

/* etiqueta no padrão das outras seções (quadradinho índigo + mono) */
.hero__eyebrow { display: flex; align-items: center; gap: 10px; font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.hero__eyebrow i { width: 8px; height: 8px; border-radius: 2px; background: var(--brand-500); }
/* palavras do título com máscara (entrada) e palavra que alterna */
.hero__w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.hero__w > span { display: inline-block; }
.hero__rot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; white-space: nowrap; }
.hero__rot-word { display: inline-block; color: var(--brand-500); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hero__title {
  margin-top: 30px;
  font-size: clamp(28px, 3.1vw, 52px); line-height: 1.12; letter-spacing: -.03em; font-weight: 400;
  color: var(--ink-2);
  mix-blend-mode: multiply; /* o texto ganha o tom da fita onde se sobrepõe */
}
.hero__title-strong { color: var(--ink); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

@media (min-width: 1280px) {
  .hero { padding-bottom: 120px; }
  .hero__content { padding-top: 96px; max-width: calc(var(--content-left) + 1000px); }
  .hero__eyebrow { font-size: 13px; }
  .hero__title { margin-top: 40px; }
  .hero__actions { margin-top: 44px; }
}
@media (max-width: 760px) {
  :root { --content-left: 16px; --frame: 16px; }
  .hero { padding-bottom: 56px; }
  .hero__frame { display: none; }
  .hero__content { padding: 56px 16px 0; }
  .hero__title { margin-top: 18px; font-size: 33px; line-height: 1.12; letter-spacing: -.03em; }
  .hero__title-rest { display: none; } /* no celular fica só a frase principal */
  .hero__actions { flex-wrap: nowrap; margin-top: 26px; gap: 8px; }
  .hero__actions .btn { flex: 1 1 0; min-width: 0; height: 48px; padding: 0 12px; gap: 8px; font-size: 15px; }
  .hero__actions .btn__icon { width: 18px; height: 18px; }
  .hero__actions .arrow { display: none; } /* dois botões lado a lado: sem a seta o texto cabe */
  }