/* Base geométrica da /scale (extraída do <style> que morava dentro do
   src/content/scale.html, sem alterar uma regra).
   Ela sai do markup pra poder ser carregada ANTES da camada institucional
   (/site/institucional/scale.css), que reescreve só cor e tipografia por cima.
   Aqui fica o desenho: escada, fluxo, cartões, fila de experts, tabela
   comparativa e formulário. */
    /* ===== específico do Scale AI ===== */
    /* ícones das perguntas ("Do lead ao lucro"): roxo vibrante em repouso, desktop e mobile */
    .q-item .qic{color:var(--app);background:color-mix(in srgb,var(--app) 8%,transparent);border-color:color-mix(in srgb,var(--app) 26%,var(--line-2))}
    .q-item:hover .qic{color:var(--app)}
    /* ritmo entre seções: no mobile (<821px) zera o bottom, então o gap = só o top da próxima seção. desktop ajusta abaixo. */
    .pad{padding-bottom:0}
    /* mobile: 72px de gap padrão é grande demais no celular; reduz só os 72 p/ 48 (preserva os tights intencionais 0/24/36) */
    @media(max-width:820px){.pad[style*="padding-top:72px"]{padding-top:48px !important}}
    /* números do "Somos o nosso próprio case": sem box, bem grandes, com count-up */
    .scale-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,48px);max-width:1120px;margin:56px auto 0;text-align:center}
    .scale-stats .s{border:none;background:none;padding:0;position:relative}
    /* traço separando cada número: barra curta centralizada, igual ao divisor do Hub (.stat+.stat::before): tamanho, espessura e cor.
       desktop: barra vertical 2×58px, azul .28, centrada no gap entre colunas */
    .scale-stats .s+.s::before{content:"";position:absolute;top:50%;left:calc(clamp(20px,4vw,48px) * -0.5);transform:translateY(-50%);width:2px;height:58px;border-radius:2px;background:rgba(57,114,253,.28)}
    .scale-stats .n{font-family:var(--font);font-size:clamp(50px,6.6vw,90px);font-weight:700;color:#fff;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
    .scale-stats .n .u{font-size:.55em;font-weight:600;color:var(--app);letter-spacing:0;margin:0 .03em}
    /* gambiarra: o glifo "%" desenha maior que o "+" no mesmo tamanho — reduz só ele p/ ficarem parecidos */
    .scale-stats .n .u.pct{font-size:.46em}
    .scale-stats .l{font-size:13.5px;color:var(--muted);margin-top:16px;line-height:1.45}
    /* grids de 3 colunas no desktop (substitui o style inline que travava o mobile) */
    .cols-3{grid-template-columns:repeat(3,1fr)}

    /* ===== "O ponto cego": texto à esquerda + 4 cards 2×2 (ícone glassy roxo) à direita ===== */
    .pcego-layout{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(36px,5vw,72px);align-items:center;text-align:left}
    .pcego-text .h2{text-align:left;max-width:none;margin-left:0;margin-right:0}
    .pcego-text .lede{text-align:left;max-width:none;margin-left:0;margin-right:0}
    @media(max-width:980px){.pcego-layout{grid-template-columns:1fr;gap:30px;text-align:center}
      .pcego-text{text-align:center}
      .pcego-text .h2,.pcego-text .lede{text-align:center;margin-left:auto;margin-right:auto}}
    .pcego{grid-template-columns:repeat(2,1fr);gap:20px}
    .pcego .pain{border-radius:22px;padding:34px 32px;text-align:left;transition:transform .25s ease,border-color .25s ease}
    .pcego .pain:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--app) 34%,var(--line))}
    /* efeitos de card da Imersão: a pele de VIDRO do bento de lá (gradiente
       branco translúcido com a luz vindo do alto à esquerda, fio claro, blur
       de fundo, brilho interno em cima e sombra funda), mais o glow que sobe
       do pé no hover e a barra que cresce ao lado do título (o conteúdo fica
       acima do glow) */
    .app-pain{position:relative;overflow:hidden;
      background:linear-gradient(142deg,rgba(255,255,255,.135) 0%,rgba(255,255,255,.055) 46%,rgba(255,255,255,.085) 100%);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28),0 20px 44px -30px rgba(0,0,0,.85);
    }
    .app-pain::before{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--app) 14%,transparent),transparent);opacity:0;transition:opacity .3s var(--ease-soft)}
    .app-pain:hover::before{opacity:1}
    .app-pain>*{position:relative;z-index:1}
    /* ícone no relevo da Imersão (o quadrado dos ícones do bento/experiência):
       a cor da área sobre vidro, fio claro e brilho interno no topo */
    .app-pain .ic{
      width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;flex:none;
      color:var(--app);
      background:linear-gradient(180deg,color-mix(in srgb,var(--app) 22%,transparent),color-mix(in srgb,var(--app) 7%,transparent));
      border:1px solid rgba(255,255,255,.12);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 16px -8px rgba(0,0,0,.8);
    }
    .app-pain .ic svg{width:24px;height:24px}
    .app-pain h3{position:relative;padding-left:14px;transition:transform .28s var(--ease-soft)}
    .app-pain h3::before{content:"";position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;transform:translateY(-50%);background:var(--line-2);transition:height .28s var(--ease-soft),background .28s var(--ease-soft)}
    .app-pain:hover h3{transform:translateX(6px)}
    .app-pain:hover h3::before{height:78%;background:var(--app)}
    .pcego .pain h3{font-size:19px;font-weight:600;margin-bottom:10px;color:#fff;letter-spacing:-.02em;line-height:1.2}
    .pcego .pain p{font-size:14px;color:var(--muted);line-height:1.6}
    @media(max-width:820px){.pcego{grid-template-columns:1fr;max-width:100%}}

    /* ===== "O que é a Scale" / "Gestão do projeto": texto fixo + passos que empilham no scroll (estilo aim-cube) ===== */
    .aimi{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(36px,5vw,76px);align-items:start;text-align:left}
    .aimi-text{position:sticky;top:96px}
    .aimi-text .h2{text-align:left;max-width:none;margin-left:0;margin-right:0}
    .aimi-text .lede{text-align:left;max-width:none;margin-left:0;margin-right:0}
    .aimi-steps{display:flex;flex-direction:column;gap:22px}
    /* a pele de vidro da Imersão; empilhados no scroll, o de cima desfoca o
       de baixo, e é isso que segura a leitura do sticky */
    .aimi-step{position:sticky;min-height:220px;display:flex;flex-direction:column;
      background:linear-gradient(142deg,rgba(255,255,255,.135) 0%,rgba(255,255,255,.055) 46%,rgba(255,255,255,.085) 100%);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
      border-radius:20px;padding:clamp(28px,2.6vw,40px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28),0 20px 44px -30px rgba(0,0,0,.85)}
    .aimi-step:nth-child(1){top:96px}
    .aimi-step:nth-child(2){top:120px}
    .aimi-step:nth-child(3){top:144px}
    .aimi-step .sn{font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--app)}
    /* ícone representativo no topo do card (substitui o número na seção "Gestão do projeto") */
    .aimi-step .aimi-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;flex:none;color:var(--app);background:linear-gradient(135deg,color-mix(in srgb,var(--app) 26%,transparent),rgba(255,255,255,.03));border:1px solid color-mix(in srgb,var(--app) 32%,var(--line))}
    .aimi-step .aimi-ic svg{width:27px;height:27px}
    /* desktop: título à direita do ícone (otimiza altura do card); no mobile fica empilhado */
    @media(min-width:881px){
      .aimi-step .aimi-head{display:flex;align-items:center;gap:16px}
      .aimi-step .aimi-head h3{margin:0}
      .aimi-step .aimi-head+p{margin-top:18px}
    }
    .aimi-step h3{font-family:var(--font);font-size:clamp(20px,2vw,25px);font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.18;margin:14px 0 0}
    .aimi-step p{font-size:14.5px;color:var(--muted);line-height:1.64;margin:12px 0 0;text-wrap:pretty}
    @media(max-width:880px){
      .aimi{grid-template-columns:1fr;gap:26px}
      .aimi-text{position:static;text-align:center}
      .aimi-text .h2,.aimi-text .lede{text-align:center;margin-left:auto;margin-right:auto}
      .aimi-steps{gap:16px}
      .aimi-step{min-height:0}
      .aimi-step:nth-child(1){top:72px}
      .aimi-step:nth-child(2){top:84px}
      .aimi-step:nth-child(3){top:96px}
    }


    /* A hero agora é o painel com a barra-ilha da Imersão: mora em
       /site/scale/lp.css (.sc-hero, .sc-panel, .sc-island). */

    /* ===== diagramação desktop: títulos equilibrados (sem quebras curtas) + mais respiro ===== */
    .h2{text-wrap:balance}
    /* equilibra as linhas de TODO texto corrido — nunca deixa linha final curta/órfã ("viúva") */
    .lede,.app-sub,.pain p,.dcard p,.usecase p,.fit2 li,.mt-text p,.rung .rt p,.ex .bio,.q-item p,.dfeat .tx p{text-wrap:balance}
    @media(min-width:821px){
      /* cabeçalho de seção com bastante ar: badge → título → parágrafo bem espaçados, entrelinha solta */
      .center .h2{max-width:1000px;margin-left:auto;margin-right:auto}
      .h2{line-height:1.3;margin-top:34px}
      /* parágrafo de apoio bem largo = expande lateralmente e cai em menos linhas */
      .lede{margin-top:38px;line-height:1.78;max-width:1080px}
      .badge-pill{margin-bottom:8px}
      .pad{padding-bottom:40px}         /* respiro entre seções (desktop): 40 + 72 do topo = ~112px, proporcional */
      .grid4{gap:24px}
      .cols-3{gap:28px}
      .incl{gap:26px}
      .pain{padding:30px 28px}
      .pain p{line-height:1.7}
      .usecase{padding:34px 32px}
    }

    /* ===== "Como funciona": bolinhas numeradas FORA dos cards, conectadas, acendendo em roxo ===== */
    .cases-grid.steps{position:relative}
    .cases-grid.steps::before{
      content:"";position:absolute;top:23px;left:16.6%;right:16.6%;height:2px;z-index:0;
      background:linear-gradient(90deg,color-mix(in srgb,var(--app) 55%,transparent),color-mix(in srgb,var(--app) 32%,transparent));
    }
    .step-col{display:flex;flex-direction:column;position:relative;z-index:1}
    .step-col .usecase{flex:1}
    .step-head{display:flex;justify-content:center;align-items:center;margin-bottom:18px}
    .step-label{display:none}
    .step-col .step-dot{
      width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;
      font-family:var(--font);font-weight:700;font-size:19px;color:var(--app);
      background:#0d1330;border:2px solid color-mix(in srgb,var(--app) 55%,var(--line));
      box-shadow:0 0 0 5px color-mix(in srgb,var(--app) 9%,transparent);
      font-variant-numeric:tabular-nums;
      transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
    }
    .step-col:hover .step-dot{
      background:linear-gradient(135deg,var(--app),#6a2fd0);color:#fff;border-color:transparent;
      box-shadow:0 8px 26px -6px color-mix(in srgb,var(--app) 75%,transparent);
    }
    @media(max-width:820px){
      .cases-grid.steps::before{display:none}
      /* bolinha + "Passo N" à esquerda */
      .step-head{justify-content:flex-start;gap:12px;margin-bottom:14px}
      .step-col .step-dot{width:42px;height:42px;font-size:17px}
      .step-label{display:inline;font-family:var(--font);font-weight:700;font-size:15px;color:var(--app);letter-spacing:.04em;text-transform:uppercase}
    }

    /* ===== "Falar com especialista": texto à esquerda, formulário à direita (desktop) ===== */
    .falar-grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(32px,5vw,56px);align-items:start;text-align:left;margin-top:8px}
    .falar-grid .falar-text{position:sticky;top:96px}
    .falar-grid .falar-text .lede{margin-left:0;margin-right:0;max-width:520px}
    .falar-grid .falar-form-col{width:100%;max-width:560px;justify-self:end}
    .falar-grid .applyform{margin:0}
    @media(max-width:820px){
      .falar-grid{grid-template-columns:1fr;gap:28px;text-align:center}
      .falar-grid .falar-text{position:static}
      .falar-grid .falar-text .lede{margin-left:auto;margin-right:auto}
      .falar-grid .falar-form-col{margin:0 auto;justify-self:center;text-align:left}
    }

    /* ===== formulário Scale: seções, áreas (checkboxes), sucesso e erro ===== */
    .applyform .req{color:var(--app)}
    .applyform .fsec{display:flex;align-items:center;gap:10px;font-family:var(--font);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--app);margin:0 0 14px}
    .applyform .fsec:not(:first-child){margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
    .applyform .fsec-n{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 18%,transparent);border:1px solid color-mix(in srgb,var(--app) 30%,transparent);color:var(--app);font-size:12px;font-weight:700;flex:none}
    .applyform .fhint{font-size:12px;color:var(--muted);margin:-2px 0 9px}
    .applyform .checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .applyform .check{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;font-size:13.5px;color:#cfd3e6;transition:border-color .15s,background .15s}
    .applyform .check:hover{border-color:color-mix(in srgb,var(--app) 32%,var(--line))}
    .applyform .check input{width:auto;accent-color:var(--app);flex:none}
    .applyform .check.on{border-color:color-mix(in srgb,var(--app) 48%,var(--line));background:color-mix(in srgb,var(--app) 9%,transparent)}
    .applyform .feedback{display:none;border-radius:12px;padding:13px 15px;margin-top:16px;font-size:13.5px;font-weight:500}
    .applyform .feedback.err{display:block;background:rgba(225,90,90,.1);border:1px solid rgba(225,90,90,.42);color:#ffb1b1}
    .scale-done{display:none;text-align:center;padding:48px 26px;border-radius:22px;
      background:linear-gradient(142deg,rgba(255,255,255,.135) 0%,rgba(255,255,255,.055) 46%,rgba(255,255,255,.085) 100%);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28),0 20px 44px -30px rgba(0,0,0,.85)}
    .scale-done .ic{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:color-mix(in srgb,var(--app) 14%,transparent);display:grid;place-items:center}
    .scale-done h3{font-family:var(--font);font-size:22px;font-weight:600;color:#fff;margin-bottom:8px}
    .scale-done p{color:var(--muted);max-width:44ch;margin:0 auto;font-size:14.5px;line-height:1.6}
    @media(max-width:600px){.applyform .checks{grid-template-columns:1fr}}

    /* ===== "Quem conduz" — carrossel full-bleed com fade escuro nas bordas + card que revela o bio ===== */
    .experts-rail{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:52px}
    .experts-rail::before,.experts-rail::after{content:"";position:absolute;top:0;bottom:0;width:clamp(48px,10vw,170px);z-index:3;pointer-events:none}
    .experts-rail::before{left:0;background:linear-gradient(to right,var(--bg) 14%,transparent)}
    .experts-rail::after{right:0;background:linear-gradient(to left,var(--bg) 14%,transparent)}
    /* carrossel: scroll nativo (arrasta no mobile e no desktop) + auto-deslize lento via JS */
    .experts{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:12px 0;text-align:left;cursor:grab}
    .experts::-webkit-scrollbar{display:none}
    .experts.drag{cursor:grabbing}
    .experts-track{display:flex;width:max-content}
    .ex{position:relative;flex:0 0 290px;margin-right:20px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0d1330;aspect-ratio:3/4;cursor:pointer;transition:border-color .25s ease}
    .ex:hover{border-color:color-mix(in srgb,var(--app) 45%,var(--line))}
    .ex .ph{position:absolute;inset:0}
    .ex .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
    .ex:hover .ph img,.ex.show .ph img{transform:scale(1.05)}
    .ex .ph .ph-ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--font);font-weight:700;font-size:30px;color:#fff;background:linear-gradient(135deg,var(--app),#6a2fd0)}
    /* véu escuro: leve no repouso (legibilidade do nome), forte ao revelar o bio */
    .ex::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,11,30,0) 40%,rgba(7,11,30,.92) 100%);transition:background .35s ease}
    .ex:hover::after,.ex.show::after{background:linear-gradient(180deg,rgba(7,11,30,.5) 0%,rgba(7,11,30,.94) 64%)}
    .ex .info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px 20px}
    .ex b{display:block;color:#fff;font-size:18px;font-weight:600;font-family:var(--font);letter-spacing:-.02em;line-height:1.18}
    .ex .role{font-size:12.5px;color:var(--app);font-weight:600;margin-top:4px}
    .ex .bio{font-size:13px;color:#cfd3e6;line-height:1.6;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .3s ease,margin-top .35s ease;text-wrap:pretty}
    .ex:hover .bio,.ex.show .bio{max-height:260px;opacity:1;margin-top:11px}

    .fit2{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px;margin:52px auto 0;text-align:left}
    .fit2 .b{border-radius:20px;padding:30px 28px;border:1px solid var(--line);background:var(--card)}
    .fit2 .b.yes{border-color:color-mix(in srgb,var(--app) 20%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--app) 4%,transparent),rgba(255,255,255,.008));box-shadow:0 0 32px -10px color-mix(in srgb,var(--app) 42%,transparent)}
    /* coluna "não é pra você": tratamento em vermelho suave (estilo "us vs others") */
    .fit2 .b.no{border-color:color-mix(in srgb,#e2585e 26%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,#e2585e 5%,transparent),rgba(255,255,255,.006));box-shadow:0 0 32px -10px color-mix(in srgb,#e2585e 42%,transparent)}
    .fit2 .b.no h3{color:#ef8088}
    .fit2 h3{font-size:18px;font-weight:600;margin-bottom:14px}
    .fit2 ul{list-style:none;display:grid;gap:11px}
    .fit2 li{display:flex;gap:11px;font-size:14.5px;color:#cfd3e6;line-height:1.5}
    .fit2 .yes li:before{content:"✓";color:var(--app);font-weight:800;flex:none}
    .fit2 .no li{color:var(--muted)}
    .fit2 .no li:before{content:"✕";color:#e2585e;font-weight:800;flex:none}
    @media(max-width:820px){.fit2{grid-template-columns:1fr}}

    .applyform{max-width:560px;margin:40px auto 0;border-radius:22px;padding:34px;
      background:linear-gradient(142deg,rgba(255,255,255,.135) 0%,rgba(255,255,255,.055) 46%,rgba(255,255,255,.085) 100%);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28),0 20px 44px -30px rgba(0,0,0,.85)}
    .applyform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .applyform label{display:block;font-family:var(--font);font-size:12.5px;color:#cfd3e6;margin-bottom:6px;font-weight:500}
    .applyform input,.applyform select,.applyform textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font-family:var(--font);font-size:14.5px}
    /* Fundo/texto explícitos nas opções: sem isso o Windows renderiza texto branco em fundo branco (opções invisíveis) */
    .applyform select option{background:#0A0F26;color:#fff}
    .applyform select option[disabled]{color:#6b7193}
    .applyform input::placeholder,.applyform textarea::placeholder{color:#6b7193}
    .applyform .btn{width:100%;margin-top:4px}
    .applyform .mini{text-align:center;font-size:12px;color:var(--muted);margin-top:13px}
    @media(max-width:600px){.applyform .two{grid-template-columns:1fr}}

    /* ===== ENTREGÁVEIS — cards parrudos ===== */
    .incl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
    /* feixe que varre na horizontal (animação "move" do snippet do Aceternity) */
    @keyframes move{0%{transform:translateX(-200px)}100%{transform:translateX(200px)}}

    /* ===== "O que está incluso": 4 feature cards (fundo escuro + animação por entregável, estilo Nexaro) ===== */
    /* bento dinâmico: 1 card grande (entrada/Diagnóstico) + 3 menores */
    .feat-incl{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(244px,auto);gap:18px;margin-top:52px}
    .fcard{position:relative;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.16);border-radius:22px;overflow:hidden;
      background:linear-gradient(142deg,rgba(255,255,255,.135) 0%,rgba(255,255,255,.055) 46%,rgba(255,255,255,.085) 100%);
      backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28),0 20px 44px -30px rgba(0,0,0,.85);
      transition:transform .28s ease,border-color .28s ease}
    .fcard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--app) 32%,var(--line))}
    /* o glow da Imersão subindo do pé do card no hover */
    .fcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--app) 12%,transparent),transparent);opacity:0;transition:opacity .3s var(--ease-soft)}
    .fcard:hover::after{opacity:1}
    .fcard:nth-child(1){grid-column:1/3;grid-row:1/3}                 /* grande: 2×2 à esquerda */
    .fcard:nth-child(2){grid-column:3/5;grid-row:1;flex-direction:row} /* largo no topo-direita (horizontal) */
    .fcard:nth-child(2) .viz{width:48%;flex:none;height:auto;border-bottom:none;border-right:1px solid var(--line)}
    .fcard:nth-child(2) .body{flex:1;display:flex;flex-direction:column;justify-content:center}
    .fcard:nth-child(3){grid-column:3/4;grid-row:2}                   /* menor */
    .fcard:nth-child(4){grid-column:4/5;grid-row:2}                   /* menor */
    /* texto do card grande ancorado embaixo, na mesma linha de base dos cards menores */
    .fcard:nth-child(1) .body,.fcard:nth-child(3) .body,.fcard:nth-child(4) .body{margin-top:auto}
    .fcard .viz{position:relative;flex:1;min-height:96px;overflow:hidden;display:grid;place-items:center;place-content:center;border-bottom:1px solid var(--line);background:radial-gradient(120% 92% at 50% 0%,color-mix(in srgb,var(--app) 13%,transparent),transparent 62%),#080a18}
    .fcard .body{padding:22px 26px 26px;text-align:left}
    .fcard .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--app);margin-bottom:10px}
    .fcard .tag svg{width:13px;height:13px}
    .fcard h3{font-family:var(--font);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#fff;margin-bottom:9px}
    .fcard p{font-size:14px;color:var(--muted);line-height:1.6}
    @media(max-width:980px){.feat-incl{grid-template-columns:1fr;grid-auto-rows:auto}.fcard:nth-child(1),.fcard:nth-child(2),.fcard:nth-child(3),.fcard:nth-child(4){grid-column:auto;grid-row:auto}.fcard:nth-child(2){flex-direction:column}.fcard:nth-child(2) .viz{width:auto;border-right:none;border-bottom:1px solid var(--line)}.fcard .viz{min-height:200px}}

    /* viz 1 — radar de ferramentas (apps do Hub pulsando em sequência + feixe varrendo) */
    .viz-radar{-webkit-mask:radial-gradient(72% 82% at 50% 50%,#000,transparent);mask:radial-gradient(72% 82% at 50% 50%,#000,transparent)}
    .viz-radar .skel-row{display:flex;align-items:center;gap:13px}
    .viz-radar .skel-c{flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(248,248,248,.02);box-shadow:inset 0 0 8px 0 rgba(248,248,248,.22),0 24px 22px -16px rgba(0,0,0,.5)}
    .viz-radar .skel-c img{display:block}
    .viz-radar .c1,.viz-radar .c5{width:40px;height:40px}.viz-radar .c1 img,.viz-radar .c5 img{width:19px;height:19px}
    .viz-radar .c2,.viz-radar .c4{width:56px;height:56px}.viz-radar .c2 img,.viz-radar .c4 img{width:27px;height:27px}
    .viz-radar .c3{width:78px;height:78px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--app) 34%,#0b1030),#0b1030)}.viz-radar .c3 img{width:54px;height:auto;object-fit:contain}
    .viz-radar .c1{animation-delay:0s}.viz-radar .c2{animation-delay:.8s}.viz-radar .c3{animation-delay:1.6s}.viz-radar .c4{animation-delay:2.4s}.viz-radar .c5{animation-delay:3.2s}
    .viz-radar .skel-beam{position:absolute;top:50%;left:50%;width:1px;height:150px;margin-top:-75px;background:linear-gradient(to bottom,transparent,#5BC0BE,transparent);box-shadow:0 0 8px #5BC0BE;animation:move 5s linear infinite}
    .viz-radar .skel-beam i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:skelSpark 3.6s linear infinite}

    /* viz 2 — aulas gravadas (lista de vídeos surgindo em sequência) */
    .fcard .viz-list{display:flex;align-items:center;justify-content:center;padding:16px 18px}
    .viz-list .vlist{display:flex;flex-direction:column;gap:9px;width:100%}
    .viz-list .vrow{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
    .viz-list .vthumb{position:relative;flex:none;width:52px;height:33px;border-radius:7px;background:linear-gradient(135deg,#1a2150,#0e1330);display:grid;place-items:center;overflow:hidden}
    /* boxes estáticos; só o play do 1º box pulsa, em roxo com brilho leve */
    .viz-list .vthumb svg{width:14px;height:14px;fill:#fff;opacity:.9}
    /* 1º box em destaque: maior, com botão de play roxo pulsando de leve; os de baixo esmaecem */
    .viz-list .vrow.feat{padding:11px;border-color:color-mix(in srgb,var(--app) 38%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--app) 14%,transparent),rgba(255,255,255,.02))}
    .viz-list .vrow.feat .vthumb{width:60px;height:40px}
    .viz-list .pbtn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#b98cff,#6a2fd0);animation:playPulse 2s ease-in-out infinite}
    .viz-list .pbtn svg{width:12px;height:12px;fill:#fff;opacity:1;margin-left:2px}
    .viz-list .vrow:nth-child(2){opacity:.7}
    .viz-list .vrow:nth-child(3){opacity:.42}
    @keyframes playPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--app) 45%,transparent)}50%{transform:scale(1.07);box-shadow:0 0 0 7px transparent}}
    .viz-list .vmeta{flex:1;min-width:0}
    .viz-list .vmeta b{display:block;font-family:var(--font);font-size:12.5px;font-weight:600;color:#e9eaf5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .viz-list .vmeta span{font-size:11px;color:var(--muted)}
    .viz-list .vdur{flex:none;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
    @keyframes vrowCycle{0%{opacity:0;transform:translateY(10px)}11%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}

    /* viz 3 — Head de Projetos (o PM em destaque com glow pulsante + colaboradores esmaecidos + arcos) */
    .viz-team{overflow:hidden}
    .viz-team .arc{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--app) 20%,transparent);border-radius:50%}
    .viz-team .arc.a1{width:230px;height:230px}
    .viz-team .arc.a2{width:330px;height:330px;border-color:color-mix(in srgb,var(--app) 11%,transparent)}
    .viz-team .trow{display:flex;align-items:center;justify-content:center;gap:12px;z-index:2}
    .viz-team .tc{flex:none;border-radius:50%;overflow:hidden;border:1px solid color-mix(in srgb,#fff 7%,transparent)}
    .viz-team .tc img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.72);opacity:.5}
    .viz-team .tc.sm{width:42px;height:42px}
    .viz-team .tc.md{width:50px;height:50px}
    .viz-team .lead{position:relative;width:84px;height:84px;flex:none;z-index:3;border-radius:50%}
    .viz-team .lead::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--app) 55%,transparent),transparent 70%);z-index:-1;animation:leadPulse 2.6s ease-in-out infinite}
    .viz-team .lead img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid color-mix(in srgb,var(--app) 65%,transparent);box-shadow:0 0 24px -4px color-mix(in srgb,var(--app) 80%,transparent)}
    @keyframes leadPulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.14);opacity:1}}

    /* viz 4 — gráfico de resultado: principal curva em destaque (roxo + brilho) e duas retas caindo de tom (última esmaecida), com legendas e desenho animado */
    .fcard .viz-roi{display:flex;align-items:center;justify-content:center;padding:12px 14px}
    .viz-roi .rchart{position:relative;width:100%}
    .viz-roi svg{display:block;width:100%;height:auto;overflow:visible}
    .viz-roi .rg-axis{stroke:rgba(255,255,255,.10);stroke-width:1}
    .viz-roi .rg-lab{fill:var(--muted);font-family:var(--font);font-size:9px;font-weight:600}
    .viz-roi .rg-l3{fill:none;stroke:color-mix(in srgb,var(--app) 24%,var(--muted));stroke-width:1.6;opacity:.32;stroke-dasharray:1;stroke-dashoffset:1;animation:rgDraw 1.1s ease .8s forwards}
    .viz-roi .rg-l2{fill:none;stroke:color-mix(in srgb,var(--app) 56%,var(--muted));stroke-width:2;opacity:.6;stroke-dasharray:1;stroke-dashoffset:1;animation:rgDraw 1.1s ease .5s forwards}
    .viz-roi .rg-area{fill:url(#rgArea)}
    .viz-roi .rg-main{fill:none;stroke:var(--app);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--app) 75%,transparent));stroke-dasharray:1;stroke-dashoffset:1;animation:rgDraw 1.6s ease forwards,rgGlow 3s ease-in-out 1.6s infinite}
    .viz-roi .rg-dot{fill:#fff;stroke:var(--app);stroke-width:2.5;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--app) 90%,transparent));opacity:0;animation:rgDot 2.4s ease-in-out 1.5s infinite}
    .viz-roi .rg-cap{font-family:var(--font);font-weight:600;opacity:0;animation:rgFade .6s ease forwards}
    .viz-roi .cap-2{animation-delay:1s}
    .viz-roi .cap-2 text{fill:var(--muted);font-size:9px;fill-opacity:.8}
    .viz-roi .cap-3{animation-delay:1.2s}
    .viz-roi .cap-3 text{fill:var(--muted);font-size:9px;fill-opacity:.5}
    .viz-roi .cap-box{opacity:0;animation:rgFade .6s ease 1.4s forwards}
    .viz-roi .cap-box rect{fill:color-mix(in srgb,var(--app) 18%,transparent);stroke:color-mix(in srgb,var(--app) 50%,transparent);stroke-width:1.2;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--app) 32%,transparent))}
    .viz-roi .cap-box text{fill:#fff;font-family:var(--font);font-size:11px;font-weight:700}
    @keyframes rgDraw{to{stroke-dashoffset:0}}
    @keyframes rgGlow{0%,100%{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--app) 55%,transparent))}50%{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--app) 95%,transparent))}}
    @keyframes rgDot{0%,100%{opacity:1;r:4}50%{opacity:.75;r:5}}
    @keyframes rgFade{to{opacity:1}}

    /* viz 1 — heatmap de oportunidades (hotspots onde a IA gera retorno + varredura) */
    .viz-heat{overflow:hidden}
    /* grade fixa 7×6 configurada no Figma; dois tons acesos (médio + cheio) brilhando de leve, varredura por cima */
    .viz-heat .hgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:11px;width:521px;max-width:100%;padding:0 18px}
    .viz-heat .hgrid span{aspect-ratio:1;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
    .viz-heat .hgrid .hm{background:#422e6f;border-color:transparent;animation:heatPulse 3.6s ease-in-out infinite}
    .viz-heat .hgrid .hf{background:#a364ff;border-color:transparent;box-shadow:0 0 12px -2px color-mix(in srgb,var(--app) 65%,transparent);animation:heatPulse 3.6s ease-in-out infinite}
    @keyframes heatPulse{0%,100%{opacity:.74}50%{opacity:1}}
    .viz-heat .hscan{position:absolute;top:6%;bottom:6%;left:50%;width:2px;background:linear-gradient(to bottom,transparent,var(--teal),transparent);box-shadow:0 0 8px var(--teal);animation:hscan 3.8s linear infinite}
    @keyframes hscan{0%{transform:translateX(-230px)}100%{transform:translateX(230px)}}
    @media(prefers-reduced-motion:reduce){.viz-team .lead::before,.viz-heat .hscan,.viz-heat .hgrid span,.viz-list .pbtn,.viz-roi .rg-main,.viz-roi .rg-l2,.viz-roi .rg-l3,.viz-roi .rg-dot,.viz-roi .rg-cap{animation:none}.viz-roi .rg-main,.viz-roi .rg-l2,.viz-roi .rg-l3{stroke-dashoffset:0}.viz-roi .rg-dot,.viz-roi .rg-cap{opacity:1}.viz-heat .hgrid span,.viz-list .pbtn,.viz-team .lead::before{opacity:1;transform:none}}
    @media(max-width:600px){
      .fcard .viz{height:188px}
      .glow-hz{height:140px}
      .glow-hz::before{top:48%}
      .glow-hz::after{top:48%}
      .gh-line{top:48%}
      .fcard .viz-heat{display:flex;align-items:center;justify-content:center}
      .viz-heat .hgrid{width:340px;max-width:calc(100vw - 60px);gap:5px;padding:0}
      .viz-heat .hgrid span{border-radius:6px}
      .viz-heat .hgrid span:nth-child(n+29){display:none}
      .viz-heat .hscan{animation-name:hscanMob}
      @keyframes hscanMob{0%{transform:translateX(-150px)}100%{transform:translateX(150px)}}
      .viz-radar .skel-row{gap:9px}
      .viz-radar .c1,.viz-radar .c5{width:34px;height:34px}.viz-radar .c1 img,.viz-radar .c5 img{width:16px;height:16px}
      .viz-radar .c2,.viz-radar .c4{width:48px;height:48px}.viz-radar .c2 img,.viz-radar .c4 img{width:23px;height:23px}
      .viz-radar .c3{width:66px;height:66px}.viz-radar .c3 img{width:46px}
      .viz-team .tc.md{width:50px;height:50px}.viz-team .tc.sm{width:38px;height:38px}.viz-team .lead{width:80px;height:80px}
    }
    .dcard{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));border:1px solid var(--line-2);border-radius:20px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:13px;text-align:left;transition:transform .28s ease,border-color .28s ease;overflow:hidden}
    .dcard::before{content:"";position:absolute;inset:0 0 auto 0;height:2.5px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--app) 70%,transparent),transparent);opacity:0;transition:opacity .3s ease}
    .dcard:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--app) 34%,var(--line-2))}
    .dcard:hover::before{opacity:1}
    .dcard .dh{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .dcard .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--app) 26%,transparent),rgba(255,255,255,.03));border:1px solid color-mix(in srgb,var(--app) 32%,var(--line));color:var(--app);flex:none;transition:transform .28s ease}
    .dcard:hover .ic{transform:scale(1.07) rotate(-3deg)}
    .dcard .ic svg{width:24px;height:24px}
    .dcard .tag{font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--app);background:color-mix(in srgb,var(--app) 13%,transparent);border:1px solid color-mix(in srgb,var(--app) 28%,transparent);padding:5px 10px;border-radius:64px;white-space:nowrap}
    .dcard h3{font-family:var(--font);font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#fff}
    .dcard p{font-size:13.5px;color:var(--muted);line-height:1.6;flex:1}
    .dcard .metric{display:flex;align-items:center;gap:9px;margin-top:2px;font-family:var(--font);font-weight:600;font-size:12.5px;color:#aeb4cc;border-top:1px solid var(--line-2);padding-top:14px}
    .dcard .metric b{color:#fff;font-family:var(--font);font-weight:600;font-size:15.5px}
    .dcard .metric svg{width:15px;height:15px;color:var(--app);flex:none}
    /* card destaque — diagnóstico com o fundador */
    .dfeat{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;background:linear-gradient(110deg,color-mix(in srgb,var(--app) 16%,transparent),rgba(255,255,255,.015) 62%);border:1px solid color-mix(in srgb,var(--app) 30%,var(--line));border-radius:24px;padding:26px 32px;position:relative;min-height:290px;margin-bottom:4px}
    .dfeat .ph{width:104px;height:104px;border-radius:22px;object-fit:cover;flex:none;border:2px solid color-mix(in srgb,var(--app) 40%,transparent);box-shadow:0 16px 40px -16px color-mix(in srgb,var(--app) 70%,transparent)}
    .dfeat .tx .tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--app);margin-bottom:9px}
    .dfeat .tx h3{font-family:var(--font);font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.16;color:#fff;margin-bottom:9px}
    .dfeat .tx p{font-size:14.5px;color:var(--muted);line-height:1.58;max-width:560px}
    .dfeat .seal{text-align:center;flex:none}
    .dfeat .seal .big{font-family:var(--font);font-size:40px;font-weight:600;line-height:1;color:#fff}
    .dfeat .seal .cap{font-size:11.5px;color:var(--muted);margin-top:7px;max-width:120px;line-height:1.35}
    /* "skeleton" estilo Aceternity Cards Demo 3: apps do Hub em círculos que pulsam em sequência + feixe varrendo + sparkles */
    .dfeat .tx{position:relative;z-index:2;max-width:50%}
    .dfeat .skel{position:absolute;right:0;top:0;bottom:0;width:47%;display:grid;place-items:center;overflow:hidden;z-index:1;pointer-events:none;-webkit-mask:radial-gradient(60% 60% at 50% 50%,#000,transparent 100%);mask:radial-gradient(60% 60% at 50% 50%,#000,transparent 100%)}
    .dfeat .skel-row{display:flex;align-items:center;justify-content:center;gap:16px}
    .dfeat .skel-c{flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(248,248,248,.02);box-shadow:inset 0 0 8px 0 rgba(248,248,248,.22),0 32px 24px -16px rgba(0,0,0,.5);animation:skelPop 5s ease-in-out infinite}
    .dfeat .skel-c img{display:block}
    .dfeat .c1,.dfeat .c5{width:46px;height:46px}
    .dfeat .c1 img,.dfeat .c5 img{width:22px;height:22px}
    .dfeat .c2,.dfeat .c4{width:66px;height:66px}
    .dfeat .c2 img,.dfeat .c4 img{width:32px;height:32px}
    .dfeat .c3{width:94px;height:94px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--app) 34%,#0b1030),#0b1030)}
    .dfeat .c3 img{width:68px;height:auto;object-fit:contain}
    .dfeat .c1{animation-delay:0s}.dfeat .c2{animation-delay:.8s}.dfeat .c3{animation-delay:1.6s}.dfeat .c4{animation-delay:2.4s}.dfeat .c5{animation-delay:3.2s}
    @keyframes skelPop{0%,16%,100%{transform:scale(1) translateY(0)}8%{transform:scale(1.12) translateY(-4px)}}
    .dfeat .skel-beam{position:absolute;top:50%;left:50%;width:1px;height:164px;margin-top:-82px;background:linear-gradient(to bottom,transparent,#5BC0BE,transparent);box-shadow:0 0 8px #5BC0BE;animation:move 5s linear infinite;z-index:2}
    .dfeat .skel-beam i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:skelSpark 3.6s linear infinite}
    @keyframes skelSpark{0%{opacity:0;transform:scale(0)}40%{opacity:.9;transform:scale(1.4)}100%{opacity:0;transform:scale(0)}}
    @media(prefers-reduced-motion:reduce){.dfeat .skel-c,.dfeat .skel-beam,.dfeat .skel-beam i{animation:none}}
    /* mobile: card 1 empilha — animação (skeleton) em cima, texto embaixo */
    @media(max-width:980px){.incl{grid-template-columns:repeat(2,1fr)}.dfeat{display:flex;flex-direction:column;align-items:stretch;min-height:auto}.dfeat .tx{max-width:none}.dfeat .skel{position:relative;order:-1;inset:auto;width:100%;height:200px;margin-bottom:6px}}
    @media(max-width:600px){.dfeat .skel{height:172px}.dfeat .skel-row{gap:10px}.dfeat .c1,.dfeat .c5{width:34px;height:34px}.dfeat .c1 img,.dfeat .c5 img{width:16px;height:16px}.dfeat .c2,.dfeat .c4{width:48px;height:48px}.dfeat .c2 img,.dfeat .c4 img{width:24px;height:24px}.dfeat .c3{width:66px;height:66px}.dfeat .c3 img{width:46px}.dfeat .skel-beam{height:130px;margin-top:-65px}}
    @media(max-width:760px){.incl{grid-template-columns:1fr}.dfeat{grid-template-columns:auto 1fr;gap:20px;padding:22px}.dfeat .seal{display:none}}
    @media(max-width:480px){.dfeat{grid-template-columns:1fr;text-align:center;justify-items:center}}


    /* ===== MOBILE (Scale AI) — cards sempre em coluna única, alinhados à esquerda ===== */
    @media(max-width:820px){
      /* a barra e a hero mobile moram no /site/scale/lp.css (barra-ilha) */

      /* no card centrado do mobile a barra do título não tem borda pra nascer */
      .app-pain h3{padding-left:0}
      .app-pain h3::before{display:none}
      .app-pain:hover h3{transform:none}

      /* todos os grids de cards: uma coluna, um embaixo do outro, à esquerda */
      .scale-stats,.grid4,.cols-3,.incl{grid-template-columns:1fr;gap:14px;text-align:left}
      /* estatísticas: sem box, números enormes e centralizados no mobile */
      .scale-stats{margin-top:36px;max-width:100%;text-align:center;gap:30px}
      .scale-stats .s{padding:0}
      /* empilhado: barra horizontal 72×2px, azul .35, centrada no gap (igual ao Hub no mobile) */
      .scale-stats .s+.s::before{top:-15px;left:50%;transform:translateX(-50%);width:72px;height:2px;background:rgba(57,114,253,.35)}
      .scale-stats .n{text-align:center;font-size:clamp(58px,18vw,86px)}
      .scale-stats .l{text-align:center;max-width:300px;margin-left:auto;margin-right:auto}

      /* card destaque (o diagnóstico que abre o programa): empilha à esquerda */
      .dfeat{grid-template-columns:1fr;justify-items:start;text-align:left;gap:16px;padding:22px}
      .dfeat .seal{display:none}
      .dfeat .ph{width:84px;height:84px}

      /* mentores: mesmo marquee, card um pouco menor no mobile */
      .experts-rail{margin-top:34px}
      .experts{padding:10px 0}
      .experts .ex{flex:0 0 250px;margin-right:14px}

      /* legibilidade: corpo um pouco maior (sem exagero) */
      .scale-stats .l{font-size:13.5px}
      .pain p{font-size:15px;line-height:1.6}
      .pain h3{font-size:17px}
      .dcard p{font-size:14.5px}
      .dcard h3{font-size:18px}
      .ex .bio{font-size:14px}
      .fit2 li{font-size:15px}
      .showcase .feat li{font-size:15px}
      .usecase p{font-size:15px}
    }

    /* ===== O método — timeline vertical (linha central que preenche no scroll) ===== */
    .method-timeline{position:relative;max-width:940px;margin:36px auto 0;padding:6px 0}
    /* trilho central + preenchimento que sobe conforme o scroll */
    .mt-line{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--line);border-radius:2px;overflow:hidden;z-index:1}
    .mt-fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,#c9a3ff,var(--app) 55%,#6a2fd0);box-shadow:0 0 14px color-mix(in srgb,var(--app) 70%,transparent);transition:height .15s linear}
    /* nós das pontas (igual à referência: círculo vazado no topo) */
    .mt-cap{position:absolute;left:50%;width:14px;height:14px;border-radius:50%;transform:translateX(-50%);background:var(--card-2);border:2px solid var(--line);z-index:2}
    .mt-cap.top{top:-7px}
    .mt-cap.bot{bottom:-7px}

    .mt-item{position:relative;min-height:172px}
    .mt-item:last-child{min-height:150px}
    /* ponto na linha central (alinhado ao ícone), acende quando o preenchimento chega */
    .mt-dot{position:absolute;left:50%;top:26px;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);background:var(--card-2);border:2px solid color-mix(in srgb,var(--app) 38%,var(--line));z-index:3;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
    .mt-item.lit .mt-dot{background:var(--app);border-color:var(--app);box-shadow:0 0 0 5px color-mix(in srgb,var(--app) 17%,transparent),0 0 16px color-mix(in srgb,var(--app) 80%,transparent)}

    /* lado do conteúdo: metade da largura, alternando esquerda/direita */
    .mt-side{width:50%;display:flex;flex-direction:column;gap:14px}
    .mt-item.left .mt-side{margin-right:auto;align-items:flex-start;text-align:left}
    .mt-item.right .mt-side{margin-left:auto;align-items:flex-end;text-align:right}

    /* cabeçalho: ícone na ponta externa + traço pontilhado até o centro */
    .mt-head{display:flex;align-items:center;gap:14px;width:100%}
    .mt-item.right .mt-head{flex-direction:row-reverse}
    .mt-icon{width:62px;height:62px;border-radius:17px;flex:none;display:grid;place-items:center;color:var(--muted);background:var(--card);border:1px solid var(--line);transition:color .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s ease}
    .mt-icon svg{width:24px;height:24px}
    /* ícones reais dos apps do Hub: dessaturados no repouso, cor cheia quando o passo acende */
    .mt-icon img{width:30px;height:30px;object-fit:contain;display:block;filter:grayscale(1);opacity:.5;transition:filter .35s ease,opacity .35s ease}
    .mt-item.lit .mt-icon img{filter:none;opacity:1}
    /* box do Marvin (Automação): gradiente canônico só no traçado (borda); fundo escuro e
       brilho roxo iguais aos demais. gradiente em borda de ícone é permitido (nunca no ícone/texto/logo).
       O traçado ANDA pelas cores (pedido da autora em 01/09): a mesma receita do
       .btn-grad do site.css, fundo de 300% deslizando com o gradSlide; a primeira e a
       última cor são iguais, então a volta fecha sem salto. */
    .mt-icon.grad,.mt-item.lit .mt-icon.grad{
      background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(92deg,#3972FD,#A364FF,#FA9800,#34D399,#5BC0BE,#3972FD) border-box;
      background-size:100% 100%,300% 100%;
      border:1.5px solid transparent;
      animation:gradSlide 5s linear infinite;
    }
    @media(prefers-reduced-motion:reduce){.mt-icon.grad,.mt-item.lit .mt-icon.grad{animation:none}}
    .mt-icon.grad img{width:38px;height:38px}
    .mt-item.lit .mt-icon{color:var(--app);border-color:color-mix(in srgb,var(--app) 45%,var(--line));background:color-mix(in srgb,var(--app) 12%,transparent);box-shadow:0 8px 26px -10px color-mix(in srgb,var(--app) 75%,transparent);transform:translateY(-2px)}
    .mt-dash{flex:1;height:0;border-top:2px dashed var(--line);transition:border-color .35s ease}
    .mt-item.lit .mt-dash{border-color:color-mix(in srgb,var(--app) 42%,var(--line))}

    .mt-text .mt-n{font-family:var(--font);font-weight:700;font-size:12.5px;color:var(--app);letter-spacing:.12em;font-variant-numeric:tabular-nums}
    .mt-text h3{font-family:var(--font);font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.18;margin:6px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .mt-item.right .mt-text h3{justify-content:flex-end}
    .mt-text .pos{font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--app);background:color-mix(in srgb,var(--app) 13%,transparent);border:1px solid color-mix(in srgb,var(--app) 28%,transparent);padding:3px 9px;border-radius:64px}
    .mt-text p{font-size:14.5px;color:var(--muted);line-height:1.62;margin:10px 0 0;max-width:300px;text-wrap:pretty}
    .mt-item.right .mt-text p{margin-left:auto}

    /* mobile: timeline de um lado só (linha à esquerda, conteúdo à direita) */
    @media(max-width:820px){
      .method-timeline{margin-top:26px;padding:2px 0}
      .mt-line,.mt-cap,.mt-dot{left:23px}
      .mt-item{min-height:0;padding-bottom:34px}
      .mt-item:last-child{padding-bottom:0;min-height:0}
      .mt-dot{top:24px}
      .mt-side,.mt-item.left .mt-side,.mt-item.right .mt-side{width:auto;margin:0 0 0 56px;align-items:flex-start;text-align:left;padding:0}
      .mt-item.right .mt-head{flex-direction:row}
      .mt-head{gap:12px}
      .mt-icon{width:54px;height:54px}
      .mt-dash{display:none}
      .mt-text h3,.mt-item.right .mt-text h3{justify-content:flex-start}
      .mt-text p,.mt-item.right .mt-text p{margin-left:0;max-width:none}
    }

    /* O dock de CTA saiu: quem faz esse papel agora é a barra flutuante da
       Imersão (.fx no /site/scale/lp.css, ligada pelas dobras com data-fx). */

    /* ===== cabeçalho do formulário ("Receba mais informações") ===== */
    .applyform-head{margin-bottom:18px}
    .applyform-head h3{font-family:var(--font);font-size:23px;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.18}
    .applyform-head p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.55}

    /* ===== A cadência do ano: cards + seta acendem em sequência (loop, igual ao "Do lead ao lucro") ===== */
    .scale-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:clamp(40px,5vw,60px);text-align:left;align-items:stretch}
    .flow-step{position:relative;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:18px 16px;
      background:linear-gradient(142deg,rgba(255,255,255,.135) 0%,rgba(255,255,255,.055) 46%,rgba(255,255,255,.085) 100%);
      backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28),0 20px 44px -30px rgba(0,0,0,.85);
      display:flex;flex-direction:column;gap:7px;transition:transform .25s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease}
    .flow-step:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--app) 32%,var(--line))}
    /* card aceso: a pele não muda (quem acende é a seta); repete o vidro pra
       transição não trocar de roupa */
    .flow-step.lit{border-color:rgba(255,255,255,.16);
      background:linear-gradient(142deg,rgba(255,255,255,.135) 0%,rgba(255,255,255,.055) 46%,rgba(255,255,255,.085) 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28),0 20px 44px -30px rgba(0,0,0,.85)}
    .flow-step h3{font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:-.02em;color:#fff;margin:0;line-height:1.22}
    .flow-step p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
    /* seta conectora: cinza no repouso, acende em roxo (com um pop) junto do card */
    .flow-step:not(:last-child)::after{content:"";position:absolute;right:-18px;top:50%;width:12px;height:12px;transform:translateY(-50%) rotate(45deg);border-top:2px solid color-mix(in srgb,var(--app) 30%,var(--line));border-right:2px solid color-mix(in srgb,var(--app) 30%,var(--line));z-index:2;transition:border-color .35s ease,box-shadow .35s ease}
    .flow-step.lit:not(:last-child)::after{border-top-color:var(--app);border-right-color:var(--app);box-shadow:none;animation:cfArrowPop .55s ease}
    @keyframes cfArrowPop{0%{transform:translateY(-50%) rotate(45deg) scale(.55)}55%{transform:translateY(-50%) rotate(45deg) scale(1.18)}100%{transform:translateY(-50%) rotate(45deg) scale(1)}}
    @media(prefers-reduced-motion:reduce){.flow-step.lit:not(:last-child)::after{animation:none}}
    /* mobile: vira stepper vertical (1 coluna) com a seta apontando pra baixo entre os cards */
    @media(max-width:980px){
      .scale-flow{grid-template-columns:1fr;gap:40px;max-width:290px;margin-left:auto;margin-right:auto}
      .flow-step{padding:26px 24px}
      .flow-step:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-29px;width:16px;height:16px;transform:translateX(-50%) rotate(135deg)}
      .flow-step.lit:not(:last-child)::after{animation:cfArrowPopDown .55s ease}
    }
    @keyframes cfArrowPopDown{0%{transform:translateX(-50%) rotate(135deg) scale(.55)}55%{transform:translateX(-50%) rotate(135deg) scale(1.18)}100%{transform:translateX(-50%) rotate(135deg) scale(1)}}

    /* ===== Quadro comparativo (mesmo da apresentação comercial) ===== */
    /* tabela contida (card): superfície + borda + cantos, header em faixa, zebra sutil e coluna Scale como pilar */
    .cmp-wrap{overflow-x:auto;max-width:900px;margin:28px auto 0;border:1px solid rgba(255,255,255,.16);border-radius:18px;
      background:linear-gradient(142deg,rgba(255,255,255,.135) 0%,rgba(255,255,255,.055) 46%,rgba(255,255,255,.085) 100%);
      backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28),0 20px 44px -30px rgba(0,0,0,.85)}
    .cmp{width:100%;min-width:620px;border-collapse:collapse;text-align:center}
    .cmp th,.cmp td{padding:13px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:14.5px}
    .cmp tbody tr:last-child td{border-bottom:none}
    /* separadores verticais entre colunas, bem sutis (mais leves que as linhas horizontais) */
    .cmp th:not(:last-child),.cmp td:not(:last-child){border-right:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
    .cmp th:first-child,.cmp td:first-child{padding-left:22px}
    .cmp thead th{font-family:var(--font);font-weight:700;color:#cfd3e6;vertical-align:bottom;font-size:14px;background:color-mix(in srgb,#fff 4%,transparent);padding-top:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
    .cmp tbody td:first-child,.cmp thead th:first-child{text-align:left;color:#dde3f7;font-weight:500;white-space:nowrap}
    .cmp tbody tr:nth-child(even) td:not(.me){background:rgba(255,255,255,.018)}
    /* coluna Marvee Scale: pilar roxo contínuo do topo à base */
    .cmp thead .me{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--app) 30%,transparent),color-mix(in srgb,var(--app) 14%,transparent));box-shadow:inset 0 2px 0 var(--app)}
    .cmp tbody td.me{background:color-mix(in srgb,var(--app) 10%,transparent);color:#fff;font-weight:700;font-size:17px}
    .cmp .yes{color:var(--app);font-weight:800;font-size:17px}
    .cmp .no{color:#555a72;font-weight:800;font-size:17px}
    .cmp .partial{color:#fff;font-weight:600}
    .cmp-note{font-size:13.5px;color:var(--muted);max-width:72ch;margin:18px auto 0}

    /* ===== Case band (ancoragem) ===== */
    .casecard{max-width:820px;margin:34px auto 0;border:1px solid color-mix(in srgb,var(--app) 30%,var(--line));border-radius:18px;padding:22px 28px;background:linear-gradient(160deg,color-mix(in srgb,var(--app) 10%,transparent),rgba(255,255,255,.012));text-align:left}
    .casecard .tag{font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--app)}
    .casecard p{font-size:15.5px;color:#cfd3e6;line-height:1.6;margin:8px 0 0}
    .casecard p b{color:#fff}

    /* footer centralizado */
    .foot-in{flex-direction:column;justify-content:center;text-align:center}

    /* ===== Glow Horizon: aurora invertida (pra baixo) entre hero e conteúdo ===== */
    .glow-hz{position:relative;width:100%;height:clamp(160px,22vw,280px);margin-top:-1px;overflow:hidden;pointer-events:none;z-index:1}
    .glow-hz::before{content:"";position:absolute;top:36%;left:50%;width:140%;transform:translateX(-50%);height:64%;background:radial-gradient(ellipse 55% 85% at 50% 0%,color-mix(in srgb,var(--app) 30%,transparent),color-mix(in srgb,var(--app) 8%,transparent) 48%,transparent 74%);animation:ghBreathe 6s ease-in-out infinite}
    .glow-hz::after{content:"";position:absolute;top:36%;left:50%;width:70%;transform:translateX(-50%);height:50%;background:radial-gradient(ellipse 40% 80% at 50% 0%,color-mix(in srgb,var(--app) 50%,transparent),transparent 68%);animation:ghBreathe 6s ease-in-out infinite 1.5s}
    .gh-line{position:absolute;top:36%;left:6%;right:6%;height:1.5px;background:linear-gradient(90deg,transparent 4%,color-mix(in srgb,var(--app) 70%,transparent) 30%,var(--app) 50%,color-mix(in srgb,var(--app) 70%,transparent) 70%,transparent 96%);box-shadow:0 0 14px 2px color-mix(in srgb,var(--app) 50%,transparent),0 0 40px 6px color-mix(in srgb,var(--app) 18%,transparent)}
    @keyframes ghBreathe{0%,100%{opacity:.6;transform:translateX(-50%) scaleX(.96)}50%{opacity:1;transform:translateX(-50%) scaleX(1.04)}}
    @media(prefers-reduced-motion:reduce){.glow-hz::before,.glow-hz::after{animation:none;opacity:.8;transform:translateX(-50%)}}

    /* ===== mobile: centraliza os textos diagramados dos cards de conteúdo (form, FAQ e tabela ficam como estão).
       fica no fim do <style> de propósito, pra sobrescrever as regras-base text-align:left de cada card. ===== */
    @media(max-width:820px){
      .pcego .pain,.app-pain{text-align:center}
      .app-pain .ic{margin-left:auto;margin-right:auto}
      .aimi-step{text-align:center}
      .aimi-step .aimi-ic{margin-left:auto;margin-right:auto}
      .flow-step{text-align:center}
      .q-item{flex-direction:column;align-items:center;text-align:center}
      .fcard .body{text-align:center}
      .dfeat .tx{text-align:center}
      .fit2,.fit2 .b{text-align:center}
      .fit2 li{justify-content:center}
      .ex .info{text-align:center}
    }