/* Hero: palavra falada pela Ora dentro do título. */
.hero-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1 b,h1 em,h1 i{font:inherit;font-style:normal;letter-spacing:inherit}
.hero-lead{display:block;white-space:nowrap}
.hero-break{display:none}
/* Só o chip leva azul; o resto do título fica na cor do texto. */
h1 .hero-tail{background:none;color:inherit;-webkit-text-fill-color:currentColor}

/* Mesmo vidro dos cards da cena: fundo branco translúcido, borda branca e sombra azul suave. */
.hero-chip{position:relative;display:inline-flex;align-items:baseline;gap:.16em;padding:.05em .3em .07em .1em;margin-left:.04em;vertical-align:baseline;border:1px solid #fff;border-radius:999px;color:#0869f5;line-height:1;isolation:isolate;
  background:#ffffffdf;backdrop-filter:blur(12px);box-shadow:0 .2em .6em #2461b814,0 0 0 1px #e3edfb}
/* Brilho que atravessa o chip a cada palavra. */
.hero-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 35%,#d9e9ff99 50%,transparent 65%) 160% 0/260% 100% no-repeat;opacity:0}
/* Onda de voz que se expande para fora. */
.hero-chip::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;box-shadow:0 0 0 0 #3b7dff00}
.hero-chip.is-speaking::after{animation:hero-chip-sweep .95s cubic-bezier(.3,.7,.2,1)}
.hero-chip.is-speaking::before{animation:hero-chip-ring 1.1s cubic-bezier(.2,.7,.2,1)}

/* Indicador de voz no mesmo círculo dos ícones dos cards (Pitch). */
.hero-chip__voice{align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:.04em;width:.86em;height:.86em;flex:none;border-radius:50%;color:#397cfa;background:linear-gradient(140deg,#f3f9ff,#e1eeff)}
.hero-chip__voice i{display:block;width:.045em;height:.4em;border-radius:1em;background:currentColor;transform:scaleY(var(--rest,.5))}
.hero-chip__voice i:nth-child(1),.hero-chip__voice i:nth-child(5){--rest:.35}
.hero-chip__voice i:nth-child(2),.hero-chip__voice i:nth-child(4){--rest:.7}
.hero-chip__voice i:nth-child(3){--rest:1}

.hero-chip__word{display:inline-block;line-height:1;white-space:pre;transition:width .55s cubic-bezier(.7,0,.2,1)}
.hero-chip__word i{display:inline-block;white-space:pre;transform-origin:50% 85%}
.hero-chip__probe{position:absolute;left:0;top:0;visibility:hidden;white-space:pre;pointer-events:none}
.hero-chip__probe i{display:inline-block;white-space:pre}

.hero-demo{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:19px 24px;border:1px solid #d9e5f7;border-radius:20px;background:#fff;color:#14213a;font-size:17px;font-weight:600;box-shadow:0 8px 22px #2461b80f;transition:border-color .2s,transform .2s}
.hero-demo:hover{border-color:#adcaff;transform:translateY(-2px)}
.hero-demo__icon{width:26px;height:26px;flex:none;overflow:visible}

@keyframes hero-chip-sweep{0%{opacity:1;background-position:160% 0}100%{opacity:1;background-position:-60% 0}}
@keyframes hero-chip-ring{0%{box-shadow:0 0 0 0 #3b7dff33}100%{box-shadow:0 0 0 .3em #3b7dff00}}

/* Desktop estreito: a maior palavra não cabe ao lado de "Não perca", então o chip ganha linha própria. */
@media(min-width:901px){
  .copy{container-type:inline-size}
  @container (max-width:600px){.hero-chip{display:flex;width:fit-content;margin:.06em 0 .1em}}
}

/* Mobile: copy centralizada e chip em linha própria para o título não pular. */
@media(max-width:900px){
  .eyebrow,h1,.intro{align-self:center;text-align:center}
  h1{width:100%}
  .intro{margin-inline:auto;text-wrap:balance}
  /* "Não perca [chip]" numa linha; o resto quebra em "por não conseguir / se expressar." */
  .hero-chip{margin-left:.12em}
  .hero-tail{display:block}
  .hero-break{display:inline}
}
@media(max-width:760px){
  /* Título cresce com a tela até "Não perca [a promoção]", a linha mais longa, ocupar a largura útil. */
  h1{font-size:clamp(28px,7.8vw,52px)}
  /* Subheadline em cinza (não disputa com o título), em três linhas curtas e equilibradas. */
  .intro{font-size:clamp(16px,4.5vw,19px);line-height:1.5;color:#5b6b84;max-width:none}
  /* Começar e Ver a demo lado a lado, abaixo da cena. */
  .actions{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important}
  .actions .primary,.hero-demo{padding:17px 8px!important;font-size:clamp(13px,3.75vw,15px)!important;border-radius:17px;white-space:nowrap}
  .actions .primary span{margin-left:8px}
  .hero-demo{gap:8px}
  /* Crédito: marca e texto centralizados como um bloco só. */
  .credit{display:block!important;text-align:center}
  .credit .credit-orinha{display:inline-block;vertical-align:-2px;margin:0 6px 0 0!important}
  .credit .credit-copy{display:inline}
  @media(max-width:400px){.actions .primary span{display:none}}
  .hero-demo__icon{width:22px;height:22px}
  h1,.intro{text-align:center}
  .credit{justify-content:center;align-items:center;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .hero-chip::before,.hero-chip::after{animation:none!important}
  .hero-chip__word{transition:none}
}