/* LP: convite para a demonstração em /experimente. Seção cheia, com a Ora como protagonista. */
.demo-teaser{--demo-blue:#0869f5;--demo-ink:#0d1729;--demo-ease:cubic-bezier(.16,1,.3,1);position:relative;display:flex;flex-direction:column;align-items:center;padding:130px 5% 120px;overflow:clip;isolation:isolate;text-align:center;
  background:radial-gradient(60% 55% at 50% 52%,#e1edff 0%,#f3f8ff 45%,#fff 75%)}
.demo-atmos{position:absolute;inset:0;z-index:-1;pointer-events:none}
.demo-atmos span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6;animation:demo-drift 16s ease-in-out infinite alternate}
.demo-atmos span:nth-child(1){width:40vw;height:40vw;left:-8vw;top:10%;background:#dbeaff}
.demo-atmos span:nth-child(2){width:34vw;height:34vw;right:-6vw;top:35%;background:#e4eeff;animation-delay:-5s;animation-duration:20s}
.demo-atmos span:nth-child(3){width:30vw;height:24vw;left:35%;bottom:-6vw;background:#eef5ff;animation-delay:-9s}
@keyframes demo-drift{to{transform:translate(6vw,-4vw) scale(1.12)}}

.demo-kicker{display:inline-flex;align-items:center;margin:0 0 20px;color:#3574da;font-size:11px;font-weight:700;letter-spacing:4px}
.demo-kicker::after{content:'';display:inline-block;width:15px;height:15px;margin-left:8px;background:url('../../assets/brand/ora-mark.svg') center/contain no-repeat}
.demo-head h2{max-width:980px;margin:0 auto 20px;color:var(--demo-ink);font-size:clamp(44px,6.4vw,104px);font-weight:700;line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.demo-head h2 em{font-style:normal;color:var(--demo-blue)}
.demo-lead{max-width:560px;margin:0 auto;color:#606e85;font-size:19px;line-height:1.6;text-wrap:balance}

/* A Ora grande, com a fala da cena embaixo. */
.demo-stage{display:flex;flex-direction:column;align-items:center;margin:34px 0 38px}
.demo-orb{position:relative;display:grid;place-items:center;width:clamp(240px,30vw,420px);aspect-ratio:1}
.demo-orb canvas,.demo-orb img{position:relative;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;animation:demo-float 7s ease-in-out infinite}
.demo-glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,#9cc6ff 0%,#d8e9ff55 45%,transparent 70%);filter:blur(34px);opacity:.45;transition:opacity .3s,transform .3s}
.demo-teaser.is-talking .demo-glow{opacity:.95;transform:scale(1.18)}
@keyframes demo-float{50%{transform:translateY(-14px) rotate(5deg)}}
.demo-talk{display:flex;flex-direction:column;align-items:center;max-width:820px;margin-top:-6px}
.demo-speaker{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:5px 13px 5px 9px;border-radius:999px;background:var(--demo-blue);color:#fff;font-size:10px;font-weight:700;letter-spacing:2.5px}
.demo-speaker em{font-style:normal;opacity:.75}
.demo-speaker b{display:flex;align-items:center;gap:2px;height:11px}
.demo-speaker i{display:block;width:2px;height:100%;border-radius:2px;background:currentColor;transform:scaleY(.3)}
.demo-teaser.is-talking .demo-speaker i{animation:demo-eq .6s ease-in-out infinite}
.demo-speaker i:nth-child(2){animation-delay:-.2s!important}.demo-speaker i:nth-child(3){animation-delay:-.4s!important}.demo-speaker i:nth-child(4){animation-delay:-.1s!important}
@keyframes demo-eq{50%{transform:scaleY(1)}}
.demo-line{min-height:2.5em;margin:0;color:var(--demo-ink);font-size:clamp(28px,3.4vw,48px);font-weight:700;line-height:1.18;letter-spacing:-.04em;text-wrap:balance}
.demo-line i{display:inline-block;white-space:pre;font-style:normal;animation:demo-word .6s var(--demo-ease) both}
@keyframes demo-word{from{opacity:0;transform:translateY(.4em);filter:blur(8px)}}
.demo-listen{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 16px 9px 12px;border:1px solid #dfe9f8;border-radius:999px;background:#fff;color:var(--demo-blue);font-size:14px;font-weight:700;box-shadow:0 10px 24px #2461b812;transition:transform .3s var(--demo-ease),box-shadow .3s}
.demo-listen:hover{transform:translateY(-2px);box-shadow:0 14px 28px #2461b81f}
.demo-listen svg{width:16px;height:16px}
.demo-listen[aria-pressed=false] svg:nth-of-type(2),.demo-listen[aria-pressed=true] svg:nth-of-type(1){display:none}

/* Situações: cada uma abre a demonstração já escolhida. */
.demo-picks{display:grid;grid-template-columns:repeat(4,minmax(0,230px));gap:14px;margin-bottom:40px}
.demo-picks a{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:18px;border:1px solid #fff;border-radius:20px;background:#ffffffdf;backdrop-filter:blur(14px);box-shadow:0 14px 40px #2461b812;color:var(--demo-ink);text-align:left;transition:transform .45s var(--demo-ease),box-shadow .3s,border-color .3s}
.demo-picks a:hover,.demo-picks a.is-on{transform:translateY(-6px);border-color:#cfe0ff;box-shadow:0 22px 46px #2461b826}
.demo-picks a.is-on{box-shadow:0 0 0 4px #0869f514,0 22px 46px #2461b826}
.demo-pick-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:50%;color:#397cfa;background:linear-gradient(140deg,#f3f9ff,#e1eeff);transition:transform .45s var(--demo-ease)}
.demo-picks a:hover .demo-pick-icon{transform:rotate(-8deg) scale(1.08)}
.demo-pick-icon svg{width:20px;height:20px}
.demo-picks strong{font-size:16px;letter-spacing:-.3px}
.demo-picks small{font-size:13px;color:#7d8da6}

.demo-foot{display:flex;flex-direction:column;align-items:center;gap:14px}
.demo-cta{display:inline-flex;gap:12px}
.demo-cta span{margin:0;transition:transform .25s}
.demo-cta:hover span{transform:translateX(4px)}
.demo-note{margin:0;color:#8f9db3;font-size:12px}

/* Entrada ao rolar até a seção. */
.demo-teaser [data-reveal]{opacity:0;transform:translateY(40px);filter:blur(10px);transition:opacity 1s,transform 1.2s var(--demo-ease),filter 1s;transition-delay:var(--delay,0s)}
.demo-teaser.is-visible [data-reveal]{opacity:1;transform:none;filter:none}

@media(max-width:1000px){.demo-picks{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:520px}}
@media(max-width:760px){
  .demo-teaser{padding:90px 5% 80px}
  .demo-kicker{margin-bottom:14px;font-size:9px;letter-spacing:3px}
  .demo-head h2{font-size:clamp(40px,11vw,56px)}
  .demo-lead{font-size:16px}
  .demo-stage{margin:20px 0 26px}
  .demo-orb{width:min(72vw,300px)}
  .demo-line{font-size:24px}
  .demo-picks{gap:10px;margin-bottom:28px}
  .demo-picks a{padding:14px}
  .demo-pick-icon{width:34px;height:34px;margin-bottom:6px}
  .demo-picks strong{font-size:15px}.demo-picks small{font-size:12px}
  .demo-cta{width:100%;max-width:520px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .demo-atmos span,.demo-orb canvas,.demo-orb img,.demo-speaker i,.demo-line i{animation:none!important}
  .demo-teaser [data-reveal]{transition:none;opacity:1;transform:none;filter:none}
}

/* Desktop: tudo numa tela só. Texto e situações à esquerda, a Ora falando à direita. */
@media(min-width:1001px){
  .demo-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head stage" "picks stage" "foot stage";align-content:center;column-gap:4vw;min-height:100svh;padding:90px max(5%,calc((100% - 1280px) / 2)) 70px;text-align:left}
  .demo-head{grid-area:head;align-self:end}
  .demo-head h2{margin-left:0;font-size:clamp(44px,4.8vw,80px)}
  .demo-lead{margin:0 0 28px}
  .demo-stage{grid-area:stage;align-self:center;margin:0;text-align:center}
  .demo-orb{width:clamp(260px,min(30vw,46vh),460px)}
  .demo-line{font-size:clamp(26px,2.4vw,38px)}
  .demo-picks{grid-area:picks;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:28px}
  .demo-picks a{padding:14px 16px}
  .demo-pick-icon{width:34px;height:34px;margin-bottom:6px}
  .demo-foot{grid-area:foot;align-self:start;align-items:flex-start}
}