.section--tight{padding:90px 0}
/* pequeno rótulo azul acima do título de seção — genérico, reaproveitável
   em qualquer .section__head (estreado na seção de valores do sobre.html,
   "Nossos valores" acima de "No que a Transoft acredita"). .section__title
   já tem margin-top:18px, que cuida sozinho do espaçamento abaixo deste
   rótulo sem precisar de margin extra aqui. */
.section__eyebrow{
  display:block;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);font-weight:700;
}
/* imagem do celular do Super App */
.app-visual{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  padding:30px 0;
}
/* glow reduzido — pedido explícito do usuário ("reduza um pouco o
   tamanho dessa sombra... para que não pegue nos cards abaixo dela"):
   `inset:-10%` (glow 10% maior que a própria imagem em cada lado) somado
   ao `blur(30px)` vazava até os `.feat-item` logo abaixo, na única
   página que usa `.app-visual` hoje. Reduzido pra `inset:6%` (agora
   menor que a imagem, não maior) + `blur(22px)`, mais contido. */
.app-visual::before{
  content:"";
  position:absolute;inset:6%;
  background:radial-gradient(closest-side, rgba(13,110,233,.32), transparent 70%);
  filter:blur(22px);
  z-index:0;
}
.app-visual__img{
  position:relative;z-index:1;
  width:100%;max-width:320px;height:auto;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));
}
@media (max-width:980px){
  .app-visual{padding:10px 0}
  .app-visual__img{max-width:240px}
}
/* ========================================================
   CABEÇALHO DE PÁGINA (páginas internas)
   ======================================================== */
.page-header{
  padding:200px 0 100px;
  text-align:center;
  position:relative;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(13,110,233,.25), transparent 60%);
}
.page-header h1{
  font-size:clamp(40px,5vw,70px);
  color:#fff;letter-spacing:-.028em;
}
.page-header h1 span{
  color:var(--primary-2);
}
.page-header p{margin-top:22px;color:var(--text-dim);font-size:18px;max-width:680px;margin-left:auto;margin-right:auto}
/* variante "split" — só em transnet-ia.html (.page-header--split), pedido
   explícito do usuário pra essa página ser "um pouco diferente das
   outras": sem imagem de banner, texto alinhado à esquerda (não
   centralizado como o .page-header genérico) e uma logo ao lado, em vez
   de balões ou fundo com foto. Reaproveita `.hero__grid`/`.hero__left`/
   `.hero__right` (o grid de 2 colunas texto/visual que já existe pro
   hero da home) em vez de criar um grid novo — texto na coluna esquerda,
   logo na direita; no mobile, `.hero__right{display:none}` (regra já
   existente, ver `@media(max-width:980px)` acima) esconde a logo e o
   grid vira coluna única, sem precisar de nenhuma regra nova aqui.
   `text-align:left` sobrescreve o `text-align:center` do `.page-header`
   base — como é herdado, basta essa única declaração pro h1/p (que não
   têm `text-align` próprio) alinharem à esquerda também. */
.page-header--split{text-align:left;min-height:95vh;display:flex;align-items:center;overflow:hidden}
/* pontos de luz desfocados no hero das 3 páginas de Gestão — pedido explícito
   do usuário ("coloque pontos de luz desfocados que se movimentam pela seção,
   eles não devem se sobrepor aos elementos da seção, ele irá se sobrepor
   apenas ao plano de fundo delas"). Reaproveita o canvas [data-ambient-lights]
   genérico (initAmbientLights(), main.js) sem nenhuma mudança de JS — mesmo
   efeito já usado em #sobre-resumo e na galeria do Power BI. Diferente
   dessas outras instâncias (onde o wrapper fica sempre em z-index:0, abaixo
   do .container por ter um número menor), aqui a seção já tem
   .page-header__bg (imagem, z:0) e .page-header__scrim (véu escuro, z:1) por
   baixo — sem subir esse z-index, os focos ficariam escondidos atrás do véu
   escuro. z-index:1 empata com o véu e com o .container; o empate é
   resolvido pela ordem no DOM (este wrapper vem depois do véu e antes do
   .container no HTML), mesma técnica de empate proposital já usada entre
   .page-header__scrim e .container — resultado: os focos pintam por cima do
   véu/imagem de fundo, mas o conteúdo real (texto, botão, notebook) ainda
   pinta por cima deles, já que vem depois no DOM. */
.page-header--split .particles-bg{z-index:1}
/* suaviza a costura entre o hero e a seção seguinte — pedido explícito do
   usuário ("deixe a transição entre a seção inicial e a segunda mais
   suave"). Sem isso, a rede de partículas (`.particle-canvas`) do fundo
   terminava seca bem na borda inferior da seção, criando um corte visível
   contra a seção 2. Mesma técnica de degradê já usada em `.modules::after`
   (`#modulos`) — aqui só o rodapé precisa (o topo já fica atrás da nav). */
.page-header--split::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;
  background:linear-gradient(0deg, var(--bg-0), transparent);
  pointer-events:none;
}
.feat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:680px){.feat-list{grid-template-columns:1fr}}
/* variante de largura cheia — pedido explícito do usuário ("essa seção
   está muito longa, conserte isso"): os 18 cards (super-app.html) viviam
   dentro da coluna de texto do `.showcase` (metade da largura do
   container), forçando 9 linhas de 2 colunas — bem mais alto que a
   imagem ao lado. Movida pra fora do `.showcase` (agora irmã dele,
   largura cheia do `.container`) e com mais colunas (`repeat(4,1fr)`),
   os mesmos 18 cards fecham em só 5 linhas. */
.feat-list--wide{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.feat-list--wide{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.feat-list--wide{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.feat-list--wide{grid-template-columns:1fr}}
.feat-item{
  display:flex;gap:14px;
  padding:22px;border-radius:14px;
  background:rgba(15,20,35,.45);border:1px solid rgba(255,255,255,.06);
  transition:all .25s;
}
.feat-item:hover{border-color:rgba(13,110,233,.3)}
/* .feat-item .ic continua em uso — não é mais referenciado pelas 3 páginas
   de Gestão (ver .feat-item__num abaixo), mas o mesmo componente .feat-item
   também é usado em super-app.html (seção "Completo para motoristas e
   colaboradores"), que continua com o selo de ícone SVG de sempre; por
   isso essa regra não podia ser removida. */
.feat-item .ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:linear-gradient(135deg,rgba(13,110,233,.22),rgba(58,141,255,.06));border:1px solid rgba(13,110,233,.3);color:var(--primary-2);display:grid;place-items:center}
.feat-item .ic svg{width:18px;height:18px}
.feat-item h4{font-size:15px;color:#fff;margin-bottom:4px;font-weight:600}
.feat-item p{font-size:13.5px;color:var(--text-dim);line-height:1.55}
/* "Completo para motoristas e colaboradores" (super-app.html) — "seção
   branca", mesma receita padrão de sempre (ver "Convenções gerais" no
   CLAUDE.md), pedido explícito do usuário junto com a reconstrução dos
   18 `.feat-item`. Modificador `.completo-section` na `<section>` — não
   editei `.feat-item`/`.ic` direto porque são compartilhados com as 3
   páginas de Gestão (o container `.feat-item` ainda é comum às duas
   variantes, ícone SVG ou `__num`; só a variante com ícone, exclusiva
   desta página, muda de cor aqui). */
.completo-section{position:relative;z-index:1;background:#e2e7f0}
.completo-section .section__title{color:#0b0f1a}
.completo-section .section__title span{color:var(--primary)}
.completo-section .section__lead{color:var(--text-mute)}
.completo-section .feat-item{background:#e9edf5;border-color:rgba(11,15,26,.08)}
.completo-section .feat-item h4{color:#0b0f1a}
.completo-section .feat-item p{color:var(--text-mute)}
.completo-section .feat-item .ic{background:rgba(11,15,26,.05);border-color:rgba(11,15,26,.09);color:var(--primary)}
/* layout "pill" de linha única — pedido explícito do usuário, com
   imagem de referência (cards curtos, ícone circular + título numa
   linha só), "mantenha a paleta de cores atual e mude apenas o layout".
   Escopado em `.completo-section` (não editando `.feat-item`/`.ic` base)
   porque as 3 páginas de Gestão continuam com `.feat-item__num` +
   título + descrição empilhados, que precisam da altura/padding maior
   do componente original — só esta página, sem descrição nos cards (ver
   "Descrições removidas dos 18 cards" acima), cabe no formato de linha
   única. */
.completo-section .feat-item{align-items:center;border-radius:18px;padding:16px 22px}
.completo-section .feat-item h4{margin-bottom:0}
.completo-section .feat-item .ic{border-radius:50%}
/* hover sutil — pedido explícito do usuário ("crie uma interação sutil
   para o hover dos cards dessa seção"): só um leve levantamento + sombra
   suave, sem trocar de cor (a receita "vira azul-escuro sólido" de
   outras seções claras foi deliberadamente deixada de fora aqui, pra
   manter discreto). */
.completo-section .feat-item:hover{transform:translateY(-3px);box-shadow:0 14px 26px -16px rgba(13,110,233,.35)}
.mt-48{margin-top:48px}
/* ========================================================
   PILARES DE VALOR — .pillars/.pillar (componente genérico)
   ======================================================== */
/* 3 (ou mais) cartões de valor com ícone no topo centralizado — nasceu
   em transnet/power-bi.html (".bi-pillars"/".bi-pillar", ver CLAUDE.md),
   generalizado (renomeado, sem duplicar CSS) quando transnet-ia.html
   precisou do mesmo componente. Mesma técnica de anel-de-gradiente-só-
   no-hover já usada em .integ-card/.social-card, só que em formato de
   pilar (ícone no topo) em vez do selo lateral que .feat-item usa.
   `.pillars-section--light` (bloco logo abaixo) é um modificador à parte —
   a variante de tema claro da seção que contém `.pillar`s, reaproveitada
   depois em `super-app.html` também (nasceu como `.bi-pillars-section`,
   nome específico do Power BI, renomeado quando deixou de ser exclusiva
   de uma página só). */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:56px;
}
/* instância de "3 pilares" ao lado de uma imagem (`.showcase`, ver
   `super-app.html` — pedido explícito do usuário pra encaixar
   `tela_home_superapp.webp` na seção) — coluna única empilhada em vez de
   3 lado a lado (não cabe numa metade de `.showcase`), texto alinhado à
   esquerda pra acompanhar o título/lead acima, que também são left por
   padrão nesse contexto (sem `.section__head`, ver HTML). Escopado por
   `.showcase .pillars`, não precisa de um novo modificador de seção —
   só bate quando `.pillars` vive dentro de um `.showcase` mesmo. */
.showcase .pillars{grid-template-columns:1fr;gap:16px;margin-top:40px}
.showcase .pillar{text-align:left;padding:20px 24px}
/* pedido explícito do usuário, em seguida ("não coloque ícones, conecte
   os cards por meio de linhas") — `.pillar__icon` (selo com SVG) saiu,
   trocado por `.pillar__node` (um ponto sólido) + uma linha vertical
   única atrás de todo o `.pillars--connected` (`::before`, `top:0;
   bottom:0`, com degradê que esvanece nas duas pontas em vez de cortar
   seco — perdoa qualquer imprecisão de alinhamento com o nó do 1º/último
   card). A linha só fica visível nos vãos entre os cards: dentro de cada
   `.pillar` ela some atrás do fundo opaco do próprio card (`.pillar` tem
   z-index:1 > a linha, que fica no z-index padrão/auto do `::before`),
   então o efeito final é "nó marcando o topo de cada card + segmento de
   linha conectando um card ao próximo" — não precisa calcular a posição
   exata da linha por card, só alinhar a coordenada X com o centro do nó
   (`left:28px`, nó com `width:10px` a partir do `padding-left:24px` do
   card = centro em 29px). */
.pillars--connected{position:relative}
.pillars--connected::before{
  content:"";position:absolute;left:28px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(13,110,233,.35) 12%,
    rgba(13,110,233,.35) 88%,
    transparent 100%);
  z-index:0;
}
.pillars--connected .pillar{position:relative;z-index:1}
.pillars--connected .pillar__node{
  display:block;width:10px;height:10px;border-radius:50%;
  margin:2px 0 16px;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(13,110,233,.15);
}
/* glow atrás da screenshot, mesma receita do `.app-visual::before` (seção
   "Completo para..." desta mesma página) — reaproveitado pra manter a
   mesma linguagem visual entre as 2 imagens de celular da página.
   Nasceu com a imagem dentro de um `.phone-frame` (moldura própria,
   border+notch) — removido a pedido do usuário ("não coloque um mockup
   de celular, pode deixar só a imagem"): `tela_home_superapp.webp` já é
   uma composição pronta com o aparelho "assado" na própria imagem (mesmo
   padrão de `telas_superapp.webp`/`telas-transnet-*.webp` usados em
   outras páginas), então a moldura de CSS por cima duplicava o aparelho
   (um celular desenhado dentro de outro). `.pillars-section__img` é só
   a imagem crua, mesmo tratamento de `.app-visual__img` (sizing +
   drop-shadow, sem borda/recorte). */
.pillars-section__visual{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:20px 0;
}
.pillars-section__visual::before{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(closest-side, rgba(13,110,233,.28), transparent 70%);
  filter:blur(30px);z-index:0;
}
.pillars-section__img{
  position:relative;z-index:1;
  width:100%;max-width:280px;height:auto;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.35));
}
/* botão "Explorar funcionalidades" abaixo da imagem — pedido explícito
   do usuário. Passou por `.btn--ghost` (translúcido escuro, depois
   branco sólido) até o usuário pedir "troque esse botão pelo botão de
   CTA" — virou `.btn--primary` puro (mesmo gradiente `--primary`→
   `--primary-2` do resto dos CTAs primários do site). Não usa
   `.btn--solucoes` porque o texto não é "Conhecer Soluções" — essa
   classe é reservada só pro texto exato (ver "Convenções gerais" no
   CLAUDE.md). Já funciona sobre o fundo claro da seção sem nenhum
   override de cor (`.btn--primary` é uma pill sólida com cor própria,
   não depende do fundo por trás) — só precisou do posicionamento. */
.pillars-section__btn{position:relative;z-index:1;margin-top:24px}
/* seção "Personalização" (super-app.html). Chegou a ter `background:
   var(--bg-2)` (um tom mais claro que o preto padrão, pra suavizar a
   transição vindo da seção clara anterior) e depois uma versão branca —
   ambas revertidas. Fundo customizado removido de vez a pedido do
   usuário ("deixe o background da mesma forma que da seção de
   feedbacks") — `#depoimentos` (home) não define nenhum `background`
   próprio (`.testimonials{position:relative}`, sem cor), só herda o
   preto padrão do site (`--bg-0`, do `body`); pra bater exatamente igual,
   `.brand-section` também deixou de fixar uma cor própria, só
   `position:relative;z-index:1` (continua necessário pelo motivo de
   sempre: ancorar o `.particles-bg`/canvas e proteger contra a grade
   ambiente global). */
/* redesenho "escuro e premium" — pedido explícito do usuário ("Refaça
   essa seção, quero que ela seja uma seção escura e premium"). Fundo
   deixou de ser só `--bg-0` plano e ganhou um brilho radial azul bem
   sutil no topo (`radial-gradient`, ~900px de raio, esmaece antes de
   30% da altura) — mesma ideia de "spotlight" usada em vários produtos
   SaaS premium: dá profundidade sem competir com a rede de partículas
   (`data-subtle`) nem com o texto por cima. */
.brand-section{
  position:relative;z-index:1;
  background:radial-gradient(ellipse 900px 460px at 50% -8%, rgba(13,110,233,.16), transparent 70%), var(--bg-0);
}
/* botão "Conhecer soluções" abaixo dos 2 `.brand-feature` — pedido
   explícito do usuário, markup canônico de sempre (ver "Convenções
   gerais" no CLAUDE.md). */
.brand-section__cta{display:flex;justify-content:center;margin-top:56px}
/* "Feature spotlight" — pedido explícito do usuário ("não gostei muito
   do design dessa nova seção, melhore ele"), depois da 1ª versão (grid
   de `.pillar` — o mesmo componente de card já usado na seção "3
   pilares" logo acima) ter ficado repetitiva/genérica. 2 painéis
   horizontais largos (ícone maior + texto), não mais caixas quadradas
   lado a lado — mais editorial, e não duplica o vocabulário visual da
   seção anterior na mesma página. Numeral grande "vazado" ao fundo
   (`.brand-feature__num`, mesma técnica de `.value__num`/`.pillar__num`
   já usada em outras páginas) dá um toque de riqueza visual sem repetir
   o selo de ícone genérico como único elemento decorativo.
   Cards elevados a "vidro premium" na mesma rodada do fundo com glow:
   `backdrop-filter:blur` (o card agora deixa passar/desfoca a luz do
   fundo atrás dele, em vez de só um tom quase-sólido), fundo em degradê
   sutil (não mais cor chapada), borda com leve tom azul (não mais cinza
   neutro) e sombra própria mais profunda — cada card lê como um painel
   de vidro flutuando sobre o glow, não uma caixa lisa. Uma linha de
   brilho fina no topo (`::after`, gradiente que esvanece nas pontas)
   simula o reflexo de uma borda de vidro biselada, reforçando a leitura
   "premium" sem precisar de mais nenhum elemento novo. */
.brand-features{
  display:flex;flex-direction:column;gap:22px;
  max-width:820px;margin:52px auto 0;
}
.brand-feature{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:28px;
  padding:36px 40px;border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(90,150,255,.16);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.6);
  transition:transform .35s var(--ease-out), border-color .35s, box-shadow .35s, background .3s;
}
.brand-feature::after{
  content:"";position:absolute;top:0;left:32px;right:32px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
.brand-feature:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:0 34px 70px -30px rgba(13,110,233,.4);
}
.brand-feature::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.brand-feature:hover::before{opacity:1}
.brand-feature__body{position:relative;z-index:1}
.brand-feature__body h3{font-size:22px;font-weight:700;color:#fff;margin-bottom:8px;letter-spacing:-.01em}
.brand-feature__body p{font-size:15px;color:var(--text-dim);line-height:1.6;max-width:480px}
.brand-feature__num{
  position:absolute;right:28px;top:50%;transform:translateY(-50%);
  z-index:0;font-family:var(--font-display);font-weight:800;
  font-size:96px;line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.1);
  pointer-events:none;
}
@media (max-width:640px){
  .brand-feature{flex-wrap:wrap;padding:30px 26px;gap:18px}
  .brand-feature__num{display:none}
}
.pillar{
  position:relative;
  padding:32px 28px;border-radius:20px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.07);
  text-align:center;
  transition:transform .35s var(--ease-out), box-shadow .35s, background-color .15s, border-color .15s;
}
.pillar::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.pillar:hover{transform:translateY(-6px);box-shadow:0 24px 60px -24px rgba(13,110,233,.4)}
.pillar:hover::before{opacity:1}
.pillar h3{font-size:19px;font-weight:700;color:#fff;margin-bottom:10px;transition:color .15s}
.pillar p{font-size:15px;color:var(--text-dim);line-height:1.6;transition:color .15s}
@media (max-width:820px){
  .pillars{grid-template-columns:1fr;gap:18px}
}
/* Fundo claro sólido — pedido explícito do usuário, mesma receita exata
   da seção "Redes sociais" (.social-section, sobre.html): fundo cinza-
   azulado (#e2e7f0), cards num tom levemente mais claro (#e9edf5), ícone
   com selo neutro (sem tint azul), textos reescritos pro contraste certo
   sobre claro (--text-mute em vez de --text-dim, que só dá ~2.5:1 sobre
   fundo claro), e no hover o card "vira" azul-escuro (#0d1f3d) em vez do
   anel de gradiente — mesmo motivo: o anel (::before) foi desenhado pra
   contrastar com um fundo escuro, ficaria fraco/estranho aqui. */
.pillars-section--light{position:relative;z-index:1;background:#e2e7f0}
.pillars-section--light .section__eyebrow{color:var(--text-mute)}
.pillars-section--light .section__title{color:#0b0f1a}
.pillars-section--light .section__lead{color:var(--text-mute)}
.pillars-section--light .pillar{background:#e9edf5;border-color:rgba(11,15,26,.08)}
.pillars-section--light .pillar h3{color:#0b0f1a}
.pillars-section--light .pillar p{color:var(--text-mute)}
.pillars-section--light .pillar:hover{
  background:#0d1f3d;
  border-color:transparent;
  box-shadow:0 24px 48px -20px rgba(5,7,13,.45);
}
.pillars-section--light .pillar:hover::before{opacity:0}
.pillars-section--light .pillar:hover h3{color:#fff}
.pillars-section--light .pillar:hover p{color:var(--text-dim)}
/* ========================================================
   SUPER APP — moldura de celular (componente genérico)
   ======================================================== */
/* emoldura os vídeos reais do Super App (assets/video/superApp-*.webm,
   720×1080, gravações verticais de tela) como se fossem a tela de um
   celular — os dois vídeos já são "screen recordings" no formato 9:16,
   então um frame de telefone é o encaixe mais direto, sem crop nem
   distorção de aspect-ratio. Genérico o bastante (não tem nada de
   "hero" nem "demo" no nome) pra reaproveitar nas duas seções que usam
   vídeo nesta página. */
.phone-frame{
  position:relative;
  width:100%;max-width:280px;margin:0 auto;
  aspect-ratio:9/16;
  border-radius:38px;
  background:#000;
  border:6px solid #161b26;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
}
.phone-frame::before{
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:34%;height:16px;border-radius:10px;
  background:#161b26;z-index:2;
}
.phone-frame video,.phone-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.phone-frame--lg{max-width:320px}
/* seção "Veja em ação" — texto de um lado, celular com o vídeo
   instrucional do outro. Reaproveita o mesmo grid 2 colunas do hero
   (`.hero__grid`/`.hero__left`/`.hero__right` já existem), mas essa
   seção não é um `.page-header`, então precisa do próprio wrapper de
   grid — `.app-demo__grid` copia só o `display:grid` necessário, sem
   herdar nada específico de hero. */
.app-demo__grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;
}
@media (max-width:900px){
  .app-demo__grid{grid-template-columns:1fr;gap:40px}
}