/* ═══════════════════════════════════════════════ apresentação · tokens A paleta é a do produto (estilo.py §1), copiada e não importada: esta página é servida antes de qualquer sessão e não deve arrastar a folha de 85 KB do aplicativo só para pintar um fundo. */ :root{ --bg:#0B0D11; --bg-2:#0E1015; --surface:#12151C; --elevated:#191E28; --borda:#222835; --borda-sutil:#191D26; --tx1:#E9EDF4; --tx2:#9AA4B4; --tx3:#848E9E; --azul:#4D9BFF; --azul-claro:#6FADFF; --azul-fraco:rgba(77,155,255,.12); --azul-borda:rgba(77,155,255,.35); --sobre-acento:#04101F; --ok:#3ECF8E; --alerta:#F2B457; --erro:#FF7B72; --r-md:10px; --r-lg:16px; --r-xl:22px; --r-pill:999px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto, "Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace; /* A curva de todo movimento desta página. É a mesma sensação de "chega e assenta" das telas do sistema operacional: sai rápido, encosta devagar, nunca volta. */ --curva:cubic-bezier(.16,1,.3,1); --sombra-alta:0 30px 80px rgba(0,0,0,.55); --largura:1120px; } /* ══════════════════════════════════════════════════════════════ base */ *{box-sizing:border-box} /* O fundo no , e não só no body: entre a navegação e a primeira pintura o navegador mostra o fundo da RAIZ, e branco ali é o flash que o commit f9f4cc1 já teve de corrigir uma vez no aplicativo. */ html{background:#0B0D11;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--tx1); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; /* O fundo do pintado evita o flash branco entre telas — o mesmo defeito que o commit f9f4cc1 corrigiu no aplicativo. */ overflow-x:hidden; } h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.028em;line-height:1.08} p{margin:0} a{color:var(--azul);text-decoration:none} a:hover{color:var(--azul-claro)} :focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:4px} svg{display:block} ::selection{background:rgba(77,155,255,.28);color:#fff} .ap-pular{ position:absolute;left:-9999px;top:0;z-index:60; background:var(--azul);color:var(--sobre-acento); padding:10px 16px;border-radius:0 0 var(--r-md) 0;font-weight:600; } .ap-pular:focus{left:0} .ap-larg{width:min(100% - 44px,var(--largura));margin-inline:auto} @media (max-width:640px){.ap-larg{width:calc(100% - 32px)}} /* ═════════════════════════════════════════════════════════════ topo Sticky com desfoque. A borda e o fundo só nascem depois do primeiro scroll (classe `.rolou` posta pelo script): parado no topo, a barra é invisível e o título é quem manda. */ .ap-topo{ position:sticky;top:0;z-index:50; display:flex;align-items:center;gap:20px; height:60px; background:transparent;border-bottom:1px solid transparent; transition:background var(--t,.35s) var(--curva), border-color .35s var(--curva), backdrop-filter .35s var(--curva); } .ap-topo.rolou{ background:rgba(11,13,17,.72); border-bottom-color:var(--borda-sutil); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); } .ap-topo-in{display:flex;align-items:center;gap:20px;width:100%} .ap-marca{display:flex;align-items:center;gap:10px;color:var(--tx1)} .ap-marca:hover{color:var(--tx1)} /* O emblema é o ÍCONE DO PRODUTO — o mesmo arquivo que pinta a aba do navegador em todas as telas internas (/estatico/favicon.png). Marca de página pública precisa ser a marca que a pessoa já viu; um segundo símbolo, desenhado só aqui, seria um segundo produto. */ .ap-logo{ width:32px;height:32px;flex:none;border-radius:9px;overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.07),0 4px 14px rgba(0,0,0,.45); transition:transform .3s var(--curva),box-shadow .3s var(--curva); } .ap-logo img{width:100%;height:100%;display:block} .ap-marca:hover .ap-logo{ transform:translateY(-1px) scale(1.04); box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.5); } /* Classes próprias, e não `.ap-marca span`: aquele seletor pegava TAMBÉM o span do emblema e o que envolve o texto, e a regra de tela estreita escondia a marca inteira em vez de só o subtítulo — sobrava um canto esquerdo vazio no celular. */ .ap-marca-txt{display:block;line-height:1.2} .ap-marca b{display:block;font-size:15px;letter-spacing:-.01em} .ap-marca-sub{ display:block;font-size:11px;color:var(--tx3);letter-spacing:.02em; margin-top:-1px; } .ap-nav{display:flex;gap:4px;margin-left:8px} .ap-nav a{ color:var(--tx2);font-size:13.5px;padding:7px 12px;border-radius:var(--r-pill); transition:color .18s ease-out,background .18s ease-out; } .ap-nav a:hover{color:var(--tx1);background:rgba(255,255,255,.05)} .ap-espaco{flex:1} /* O botão do canto superior direito: a única porta da página. */ .ap-entrar{ display:inline-flex;align-items:center;gap:8px; height:36px;padding:0 18px;border-radius:var(--r-pill); background:var(--azul);color:var(--sobre-acento); font-size:14px;font-weight:640;letter-spacing:-.01em; border:1px solid var(--azul); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 20px rgba(77,155,255,.28); transition:transform .18s var(--curva),box-shadow .18s var(--curva), background .18s ease-out; } .ap-entrar:hover{ color:var(--sobre-acento);background:var(--azul-claro); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 28px rgba(77,155,255,.38); } .ap-entrar:active{transform:translateY(0)} .ap-entrar svg{width:14px;height:14px} @media (max-width:860px){.ap-nav{display:none}} @media (max-width:420px){.ap-marca-sub{display:none}} /* ════════════════════════════════════════════════════════════ hero */ .ap-hero{position:relative;padding:112px 0 96px;overflow:hidden} /* A aurora: três manchas de luz que respiram. É o único ornamento da página, e some inteiro com `prefers-reduced-motion`. */ .ap-aurora{position:absolute;inset:-25% -10% auto;height:820px; pointer-events:none;z-index:0;filter:blur(90px);opacity:.55} .ap-aurora i{position:absolute;display:block;border-radius:50%} .ap-aurora i:nth-child(1){ width:620px;height:520px;left:6%;top:4%; background:radial-gradient(circle,rgba(77,155,255,.5),transparent 68%); animation:ap-deriva-a 19s ease-in-out infinite alternate; } .ap-aurora i:nth-child(2){ width:520px;height:480px;right:4%;top:0; background:radial-gradient(circle,rgba(62,207,142,.26),transparent 66%); animation:ap-deriva-b 23s ease-in-out infinite alternate; } .ap-aurora i:nth-child(3){ width:560px;height:420px;left:38%;top:32%; background:radial-gradient(circle,rgba(140,110,255,.3),transparent 70%); animation:ap-deriva-c 27s ease-in-out infinite alternate; } @keyframes ap-deriva-a{to{transform:translate3d(90px,50px,0) scale(1.12)}} @keyframes ap-deriva-b{to{transform:translate3d(-70px,70px,0) scale(1.08)}} @keyframes ap-deriva-c{to{transform:translate3d(40px,-60px,0) scale(1.15)}} /* A grade técnica por trás da luz: dá profundidade sem pesar um byte de imagem. Esmaece nas bordas com máscara. */ .ap-grade{ position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--borda-sutil) 1px,transparent 1px), linear-gradient(90deg,var(--borda-sutil) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 30%,transparent 78%); mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 30%,transparent 78%); } .ap-hero .ap-larg{position:relative;z-index:1} .ap-selo{ display:inline-flex;align-items:center;gap:9px; height:30px;padding:0 14px 0 10px;border-radius:var(--r-pill); background:rgba(255,255,255,.04);border:1px solid var(--borda); color:var(--tx2);font-size:12.5px;letter-spacing:.01em; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } .ap-selo b{color:var(--tx1);font-weight:600} .ap-ponto{ width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none; box-shadow:0 0 0 4px rgba(62,207,142,.16); animation:ap-pulso 2.6s ease-in-out infinite; } @keyframes ap-pulso{50%{box-shadow:0 0 0 8px rgba(62,207,142,0)}} .ap-h1{ margin:26px 0 0; font-size:clamp(40px,6.4vw,74px); letter-spacing:-.04em;line-height:1.02;max-width:16ch; } .ap-h1 .ap-brilho{ background:linear-gradient(96deg,var(--tx1) 12%,var(--azul-claro) 52%,#B79CFF 92%); -webkit-background-clip:text;background-clip:text;color:transparent; } .ap-sub{ margin-top:24px;max-width:60ch; font-size:clamp(17px,2.1vw,20px);line-height:1.55;color:var(--tx2); } .ap-sub b{color:var(--tx1);font-weight:560} .ap-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px} .ap-btn{ display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 24px; border-radius:var(--r-pill);font-size:15px;font-weight:600; letter-spacing:-.01em; transition:transform .2s var(--curva),background .2s ease-out, box-shadow .2s var(--curva),border-color .2s ease-out; } .ap-btn svg{width:15px;height:15px} .ap-btn-1{ background:var(--azul);color:var(--sobre-acento);border:1px solid var(--azul); box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 30px rgba(77,155,255,.3); } .ap-btn-1:hover{background:var(--azul-claro);color:var(--sobre-acento); transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 16px 40px rgba(77,155,255,.4)} .ap-btn-2{ background:rgba(255,255,255,.045);color:var(--tx1);border:1px solid var(--borda); } .ap-btn-2:hover{background:rgba(255,255,255,.08);color:var(--tx1); border-color:var(--borda-forte,#2E3746);transform:translateY(-2px)} /* ═════════════════════════════════════════════ o terminal do hero A prova visual do que o produto faz: um comando saindo para a frota inteira e voltando host a host. O texto é datilografado pelo script; sem script, aparece pronto. */ .ap-janela{ position:relative;margin-top:64px;border-radius:var(--r-xl); background:linear-gradient(180deg,rgba(25,30,40,.92),rgba(15,18,24,.92)); border:1px solid var(--borda);box-shadow:var(--sombra-alta); overflow:hidden; -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); transform:perspective(1600px) rotateX(var(--ap-inclina,7deg)); transform-origin:50% 0; will-change:transform; } .ap-janela-topo{ display:flex;align-items:center;gap:9px;height:42px;padding:0 16px; border-bottom:1px solid var(--borda-sutil);background:rgba(255,255,255,.02); } .ap-bolha{width:11px;height:11px;border-radius:50%;background:#39404E} .ap-bolha:nth-child(1){background:#FF5F57} .ap-bolha:nth-child(2){background:#FEBC2E} .ap-bolha:nth-child(3){background:#28C840} .ap-janela-nome{ margin-left:8px;font:500 12px/1 var(--mono);color:var(--tx3); letter-spacing:.02em; } .ap-term{ padding:22px 22px 26px;font:13px/1.75 var(--mono); min-height:236px;white-space:pre-wrap;word-break:break-word; } .ap-term .l{display:block} .ap-term .pr{color:var(--azul)} .ap-term .ok{color:var(--ok)} .ap-term .al{color:var(--alerta)} .ap-term .er{color:var(--erro)} .ap-term .cz{color:var(--tx3)} .ap-cursor{ display:inline-block;width:8px;height:15px;vertical-align:-2px; background:var(--azul);margin-left:2px;animation:ap-pisca 1.05s steps(2) infinite; } @keyframes ap-pisca{50%{opacity:0}} /* ═══════════════════════════════════════════════════════════ números */ .ap-numeros{ display:grid;grid-template-columns:repeat(4,1fr);gap:2px; margin-top:22px;border:1px solid var(--borda-sutil);border-radius:var(--r-lg); background:var(--borda-sutil);overflow:hidden; } .ap-num{background:var(--bg-2);padding:22px 20px} .ap-num b{ display:block;font-size:30px;font-weight:640;letter-spacing:-.03em; font-variant-numeric:tabular-nums;color:var(--tx1); } .ap-num span{display:block;margin-top:4px;font-size:13px;color:var(--tx3)} @media (max-width:760px){.ap-numeros{grid-template-columns:repeat(2,1fr)}} /* ══════════════════════════════════════════════════════════ seções */ .ap-secao{padding:104px 0;position:relative} .ap-secao + .ap-secao{border-top:1px solid var(--borda-sutil)} .ap-rotulo{ font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--azul);margin-bottom:16px; } .ap-h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.035em;max-width:20ch} .ap-lead{margin-top:20px;max-width:66ch;font-size:18px;color:var(--tx2);line-height:1.6} .ap-lead + .ap-lead{margin-top:16px} .ap-lead b{color:var(--tx1);font-weight:560} /* O manifesto: duas colunas, texto grande à esquerda, cartões à direita. */ .ap-duas{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} @media (max-width:940px){.ap-duas{grid-template-columns:1fr;gap:40px}} .ap-frase{ font-size:clamp(22px,2.6vw,30px);line-height:1.35;letter-spacing:-.02em; color:var(--tx1);font-weight:560; } .ap-frase em{font-style:normal;color:var(--tx3)} .ap-obj{display:grid;gap:14px} .ap-obj-item{ display:flex;gap:14px;padding:18px 20px;border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--borda-sutil); transition:border-color .25s ease-out,transform .25s var(--curva), background .25s ease-out; } .ap-obj-item:hover{border-color:var(--borda);transform:translateX(3px); background:var(--elevated)} .ap-obj-ico{ flex:none;width:32px;height:32px;border-radius:9px;display:grid; place-items:center;background:var(--azul-fraco);color:var(--azul); border:1px solid var(--azul-borda); } .ap-obj-ico svg{width:16px;height:16px} .ap-obj-item h3{font-size:15px;letter-spacing:-.01em} .ap-obj-item p{margin-top:5px;font-size:14px;color:var(--tx2);line-height:1.55} /* ═════════════════════════════════════════════════════ capacidades O brilho segue o ponteiro: `--mx/--my` são escritos pelo script. Sem script o cartão continua um cartão — o brilho é a camada de cima. */ .ap-grade-cap{ display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:16px;margin-top:52px; } .ap-cap{ position:relative;padding:26px 24px 28px;border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--borda-sutil); overflow:hidden;isolation:isolate; transition:transform .3s var(--curva),border-color .3s ease-out, box-shadow .3s var(--curva); } .ap-cap::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(77,155,255,.13),transparent 62%); transition:opacity .35s ease-out; } .ap-cap:hover{ transform:translateY(-4px);border-color:var(--azul-borda); box-shadow:0 20px 46px rgba(0,0,0,.42); } .ap-cap:hover::before{opacity:1} .ap-cap-ico{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center; color:var(--azul);background:var(--azul-fraco);border:1px solid var(--azul-borda); margin-bottom:18px; } .ap-cap-ico svg{width:19px;height:19px} .ap-cap h3{font-size:16.5px;letter-spacing:-.015em} .ap-cap p{margin-top:9px;font-size:14.5px;color:var(--tx2);line-height:1.6} .ap-cap ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px} .ap-cap li{ position:relative;padding-left:17px;font-size:13.5px;color:var(--tx3); line-height:1.5; } .ap-cap li::before{ content:"";position:absolute;left:2px;top:8px;width:5px;height:5px; border-radius:50%;background:var(--azul);opacity:.7; } /* ══════════════════════════════════════════════════════ o caminho Os cinco passos de uma execução (MOTOR.md). A coluna da esquerda gruda e a lista da direita acende conforme rola. */ .ap-fluxo{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start} @media (max-width:940px){.ap-fluxo{grid-template-columns:1fr;gap:36px}} .ap-fluxo-fixo{position:sticky;top:112px} @media (max-width:940px){.ap-fluxo-fixo{position:static}} .ap-passos{display:grid;gap:0;counter-reset:passo} .ap-passo{ display:grid;grid-template-columns:44px 1fr;gap:20px; padding:22px 0;border-bottom:1px solid var(--borda-sutil); } .ap-passo:last-child{border-bottom:0} .ap-passo-n{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center; font:600 13px/1 var(--mono);color:var(--tx3); background:var(--bg-2);border:1px solid var(--borda); transition:color .35s ease-out,background .35s ease-out, border-color .35s ease-out,box-shadow .35s var(--curva); } .ap-passo h3{font-size:17px;letter-spacing:-.015em;color:var(--tx2); transition:color .35s ease-out} .ap-passo p{margin-top:7px;font-size:14.5px;color:var(--tx3);line-height:1.6} .ap-passo.on .ap-passo-n{ color:var(--sobre-acento);background:var(--azul);border-color:var(--azul); box-shadow:0 0 0 5px rgba(77,155,255,.14); } .ap-passo.on h3{color:var(--tx1)} /* ════════════════════════════════════════════════════════ vitrine Os fabricantes desfilam. Duas faixas idênticas em sequência: quando a primeira termina o percurso, a segunda já está no lugar dela — é o que faz o laço não ter emenda. Para no hover e some com reduced-motion. */ .ap-desfile{ position:relative;overflow:hidden;margin-top:44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .ap-faixa{display:flex;width:max-content;animation:ap-desliza 34s linear infinite} .ap-desfile:hover .ap-faixa{animation-play-state:paused} .ap-faixa div{display:flex;gap:14px;padding-right:14px} @keyframes ap-desliza{to{transform:translateX(-50%)}} .ap-vendor{ display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px; border-radius:var(--r-pill);white-space:nowrap; background:var(--surface);border:1px solid var(--borda-sutil); color:var(--tx2);font-size:15px;font-weight:560;letter-spacing:-.01em; } .ap-vendor i{ width:6px;height:6px;border-radius:50%;background:var(--azul);opacity:.65; } /* ═══════════════════════════════════════════════════════ princípios */ .ap-princ{ display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:2px;margin-top:52px;background:var(--borda-sutil); border:1px solid var(--borda-sutil);border-radius:var(--r-lg);overflow:hidden; } .ap-princ > div{ background:var(--bg-2);padding:28px 26px; transition:background .3s ease-out; } .ap-princ > div:hover{background:var(--surface)} .ap-princ h3{font-size:15.5px;letter-spacing:-.015em} .ap-princ p{margin-top:9px;font-size:14px;color:var(--tx2);line-height:1.6} .ap-princ .ap-chave{ display:block;margin-bottom:12px;font:500 11.5px/1 var(--mono); color:var(--azul);letter-spacing:.06em;text-transform:uppercase; } /* ════════════════════════════════════════════════════════════ fecho */ .ap-fecho{position:relative;padding:120px 0;text-align:center;overflow:hidden} .ap-fecho::after{ content:"";position:absolute;left:50%;top:-40%;width:900px;height:620px; transform:translateX(-50%);pointer-events:none;z-index:0;filter:blur(100px); background:radial-gradient(circle,rgba(77,155,255,.2),transparent 66%); } .ap-fecho .ap-larg{position:relative;z-index:1} .ap-fecho .ap-h2{margin-inline:auto;text-align:center} .ap-fecho .ap-lead{margin-inline:auto;text-align:center} .ap-fecho .ap-acoes{justify-content:center} .ap-rodape{ border-top:1px solid var(--borda-sutil);padding:34px 0 44px; color:var(--tx3);font-size:13.5px; } .ap-rodape-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center} .ap-rodape .ap-espaco{flex:1} .ap-rodape a{color:var(--tx2)} .ap-rodape a:hover{color:var(--tx1)} /* ═════════════════════════════════════════════════════ movimento TUDO o que segue só existe quando o script decidiu animar (`.anim` no ). Sem JavaScript, ou com "reduzir movimento" ligado no sistema, nada aqui vale — e a página aparece inteira, de uma vez. */ .anim [data-rv]{ opacity:0;transform:translateY(22px); transition:opacity .82s var(--curva),transform .82s var(--curva); transition-delay:var(--atraso,0ms); } .anim [data-rv].vis{opacity:1;transform:none} .anim .ap-janela{opacity:0;transform:perspective(1600px) rotateX(11deg) translateY(34px) scale(.97); transition:opacity 1s var(--curva),transform 1.1s var(--curva)} .anim .ap-janela.vis{opacity:1} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .ap-aurora i,.ap-faixa,.ap-ponto,.ap-cursor{animation:none} .ap-janela{transform:none} *{transition-duration:.01ms !important} }