/* boraADS home v2 — Linear craft, Figtree, #0C0C0E
Each section has its own topology. Tokens stay one world. */
/* Fontes auto-hospedadas (subconjunto latino do Google Fonts, licença OFL). A Figtree de pé vai com
preload no ; a itálica e a mono chegam quando o texto aparece. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/lp/fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/lp/fonts/figtree-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/lp/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
--fuse-noise: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjAwIDIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSdub2lzZUZpbHRlcic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAuOCcgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNub2lzZUZpbHRlciknLz48L3N2Zz4=");
--bg: #0c0c0e;
--bg-1: #121316;
--bg-2: #17191e;
--bg-3: #1e2128;
--line: rgba(255, 255, 255, 0.075);
--line-2: rgba(255, 255, 255, 0.14);
--fg: #edeff4;
--muted: #a8b0c2;
--dim: #8b93a7;
--blue: #0060fd;
--meta: #0866ff;
--acc: oklch(0.72 0.155 255);
--acc-ink: #061018;
--acc-glow: color-mix(in oklab, var(--acc) 55%, transparent);
--info: oklch(0.78 0.12 200);
--pos: oklch(0.78 0.14 152);
--warn: oklch(0.82 0.14 75);
--font: "Figtree", ui-sans-serif, system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--r: 12px;
--r-sm: 8px;
--pill: 999px;
--max: 1120px;
--measure: 62ch;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--tap: 44px;
}
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 88px }
html, body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font);
font-size: 16px;
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100% }
a { color: inherit }
button, .btn { font: inherit }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px }
/* Cursor da página: seta de cristal renderizada no Blender (design/3d-cursor), com ponta no pixel
(4, 3). Só com mouse; no toque fica o cursor do sistema. Sem image-set() usa o PNG de 1x. A
versão acesa vale para tudo que é clicável; campos de texto mantêm o I de digitação. */
:root { --cur: auto; --cur-a: pointer }
@media (hover: hover) and (pointer: fine) {
:root {
--cur: url("/lp/assets/cursor/cursor-32.png") 4 3, auto;
--cur-a: url("/lp/assets/cursor/cursor-hover-32.png") 4 3, pointer;
}
@supports (cursor: image-set(url("/lp/assets/cursor/cursor-32.png") 1x) 4 3, auto) {
:root {
--cur: image-set(url("/lp/assets/cursor/cursor-32.png") 1x, url("/lp/assets/cursor/cursor-64.png") 2x, url("/lp/assets/cursor/cursor-96.png") 3x) 4 3, auto;
--cur-a: image-set(url("/lp/assets/cursor/cursor-hover-32.png") 1x, url("/lp/assets/cursor/cursor-hover-64.png") 2x, url("/lp/assets/cursor/cursor-hover-96.png") 3x) 4 3, pointer;
}
}
}
html { cursor: var(--cur) }
:is(a[href], button, summary, select, label[for], [role="button"], [role="tab"], input:is([type="range"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])) { cursor: var(--cur-a) }
:is(input:not([type="range"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, [contenteditable="true"]) { cursor: text }
.skip {
position: absolute; left: 12px; top: -48px; z-index: 80;
background: var(--meta); color: #fff;
padding: 8px 12px; font-weight: 600;
}
.skip:focus { top: 12px }
.vh {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: min(var(--max), calc(100% - 64px)); margin-inline: auto }
.wide { width: min(1280px, calc(100% - 48px)); margin-inline: auto }
h1, h2, h3, p { margin: 0 }
.h1 {
font-size: clamp(2.15rem, 3.8vw, 3.15rem);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1.1;
}
.h1 em, .h2 em {
font-style: italic;
font-weight: 500;
color: inherit;
}
.aurora {
display: inline-block;
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: aurora-text 10s ease-in-out infinite alternate;
}
.aurora-gads,
.aurora-meta {
background-image: linear-gradient(135deg, #00c6ff, #0866ff, #0064e0, #7b61ff, #00c6ff);
}
@keyframes aurora-text {
0% { background-position: 0% 50% }
100% { background-position: 100% 50% }
}
.h2 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 520;
letter-spacing: -0.032em;
line-height: 1.12;
}
.h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3 }
.lead {
font-size: 1.125rem;
color: var(--muted);
max-width: var(--measure);
font-weight: 400;
line-height: 1.55;
}
.hero-in .lead-block {
display: grid;
gap: 10px;
max-width: none;
width: 100%;
text-align: center;
}
/* Sombra escura desfocada presa ao texto de apoio: garante contraste AA sobre o degradê da hero
em qualquer largura (a coluna de texto chega perto das bordas coloridas no tablet). */
.hero-in .lead-block { position: relative }
.hero-in .lead-block::before {
content: ""; position: absolute; inset: -10px -44px; z-index: -1; pointer-events: none;
border-radius: 56px; background: rgba(6, 7, 11, .7); filter: blur(30px);
}
.hero-in .lead {
margin-top: 0;
max-width: none;
font-size: clamp(1.125rem, 1.35vw, 1.28rem);
font-weight: 450;
line-height: 1.6;
letter-spacing: -0.014em;
color: #d5dae6;
}
.fine { font-size: 0.875rem; color: var(--muted) }
.trust {
display: flex; flex-wrap: wrap; align-items: center;
gap: 8px 20px; margin: 4px 0 0; padding: 0;
list-style: none; font-size: 13px; color: var(--muted);
}
.trust li { display: inline-flex; align-items: center; gap: 7px; line-height: 1.3 }
.trust svg { width: 15px; height: 15px; color: var(--meta); flex: none }
.center .trust { justify-content: center }
.news {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 14px 0 12px; margin-bottom: var(--s-5);
border-radius: var(--pill);
color: #c8ccd6;
font-size: 13px; font-weight: 500;
text-decoration: none;
background: #171717;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
transition: background 200ms var(--ease), color 200ms var(--ease);
}
.news:hover { background: #262626; color: #d4d4d4 }
.news .shiny-text { --shiny-base: #c8ccd6 }
.news-arrow {
width: 12px; height: 12px; flex: none;
transition: transform 300ms var(--ease);
}
.news:hover .news-arrow { transform: translateX(2px) }
.shiny-text {
--shiny-width: 100px;
--shiny-base: currentColor;
display: inline-block;
color: var(--shiny-base);
background-image:
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82) 50%, transparent),
linear-gradient(90deg, var(--shiny-base), var(--shiny-base));
background-size: var(--shiny-width) 100%, 100% 100%;
background-repeat: no-repeat, no-repeat;
background-position: calc(-100% - var(--shiny-width)) 0, 0 0;
background-clip: text, text;
-webkit-background-clip: text, text;
-webkit-text-fill-color: transparent;
animation: shiny-text 8s infinite;
}
@keyframes shiny-text {
0%, 90%, 100% { background-position: calc(-100% - var(--shiny-width)) 0, 0 0 }
30%, 60% { background-position: calc(100% + var(--shiny-width)) 0, 0 0 }
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 40px; padding: 0 16px; border-radius: var(--pill);
border: 1px solid transparent; text-decoration: none;
font-weight: 550; font-size: 14px; letter-spacing: -0.012em;
cursor: var(--cur-a); transition: transform 140ms var(--ease), background 140ms var(--ease);
}
.btn:active { transform: translateY(1px) }
.btn-p {
background: var(--meta); color: #fff;
box-shadow: 0 10px 28px -14px color-mix(in oklab, var(--meta) 70%, transparent);
}
.btn-p:hover { background: #1a75ff }
.btn-g {
background: #14161b;
color: var(--fg);
border-color: var(--line-2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.btn-g:hover { background: #1a1d24 }
.btn-lg { min-height: 44px; padding: 0 20px; font-size: 15px }
.btn-block { width: 100% }
.cta-row { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin: 22px 0 12px }
a.shimmer-btn, a.shimmer-btn:hover, a.shimmer-btn:focus { color: #fff; text-decoration: none }
.shimmer-btn {
--spread: 90deg; --shimmer-color: #fff; --radius: 999px; --speed: 3s; --cut: .05em; --bg: var(--meta);
position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center;
overflow: hidden; isolation: isolate; cursor: var(--cur-a); border: 1px solid rgba(255,255,255,.12);
border-radius: var(--radius); padding: 0 20px; min-height: 44px; white-space: nowrap;
color: #fff; background: var(--bg); font: inherit; font-size: 14px; font-weight: 550;
letter-spacing: -.01em; transform: translateZ(0);
transition: transform .2s var(--ease), background .15s var(--ease);
}
.shimmer-btn-lg { min-height: 44px; padding: 0 22px; font-size: 15px }
.shimmer-btn-md { min-height: 36px; padding: 0 16px; font-size: 13px }
.shimmer-btn-block { width: 100% }
.shimmer-btn:active { transform: translateY(1px) }
.shimmer-btn-content { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px }
.shimmer-btn-spark { position: absolute; inset: 0; z-index: -30; overflow: visible; filter: blur(2px); container-type: size }
.shimmer-btn-slide { position: absolute; inset: 0; aspect-ratio: 1; height: 100cqh; animation: shimmer-slide var(--speed) ease-in-out infinite alternate }
.shimmer-btn-spin {
position: absolute; inset: -100%; width: auto;
background: conic-gradient(from calc(270deg - (var(--spread) * .5)), transparent 0, var(--shimmer-color) var(--spread), transparent var(--spread));
animation: spin-around calc(var(--speed) * 2) linear infinite;
}
.shimmer-btn-highlight {
position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 -8px 10px #ffffff1f; transition: box-shadow .3s var(--ease);
}
.shimmer-btn:hover .shimmer-btn-highlight { box-shadow: inset 0 -6px 10px #ffffff3f }
.shimmer-btn-backdrop { position: absolute; inset: var(--cut); z-index: -20; border-radius: var(--radius); background: var(--bg) }
@keyframes shimmer-slide { to { transform: translate(calc(100cqw - 100%), 0) } }
@keyframes spin-around {
0% { transform: translateZ(0) rotate(0) }
15%, 35% { transform: translateZ(0) rotate(90deg) }
65%, 85% { transform: translateZ(0) rotate(270deg) }
100% { transform: translateZ(0) rotate(360deg) }
}
/* —— Header: cápsula de vidro flutuante com a marca 3D do boraADS (design/3d-ai-clients) ——
Fica fixa por cima da hero (a hero compensa no padding-top). A .nav-pill desliza até o link sob o
mouse e, parada, marca a seção em que a pessoa está (runNav no home-v2.js). */
.nav {
position: fixed; top: 14px; left: 0; right: 0; z-index: 40;
pointer-events: none;
transition: top .35s var(--ease);
}
.nav-in {
position: relative; pointer-events: auto;
width: min(1180px, calc(100% - 32px)); margin-inline: auto;
display: flex; align-items: center; gap: 10px;
min-height: 60px; padding: 0 10px 0 12px;
border-radius: 999px;
background: rgba(10, 12, 19, .56);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 18px 50px -26px rgba(0, 0, 0, .9);
transition: min-height .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-in::before {
content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
background: linear-gradient(120deg, rgba(255, 255, 255, .2), rgba(92, 166, 255, .38) 30%, rgba(255, 255, 255, .05) 58%, rgba(92, 166, 255, .22));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.nav.scrolled { top: 10px }
.nav.scrolled .nav-in { min-height: 54px; background: rgba(10, 12, 19, .8); box-shadow: 0 22px 50px -24px rgba(0, 0, 0, .95) }
.brand {
position: relative; z-index: 1; flex-shrink: 0;
display: inline-flex; align-items: center; gap: 9px;
padding: 4px 8px 4px 2px; border-radius: 999px;
text-decoration: none; line-height: 0;
}
.brand-mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px }
.brand-mark::before {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(closest-side, rgba(47, 107, 255, .65), transparent);
filter: blur(8px); opacity: .55;
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.brand-mark img {
position: relative; display: block; width: 36px; height: 36px;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
transition: transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.brand-word { display: block; width: auto; height: 17px }
.nav-links {
position: absolute; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 2px;
}
.nav-links a {
position: relative; z-index: 1;
display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
border-radius: 999px; text-decoration: none;
font-size: 14px; font-weight: 500; letter-spacing: -.011em; color: #a3acbe;
transition: color .25s var(--ease);
}
.nav-links a:hover, .nav-links a.is-active { color: #fff }
.nav-links a.nav-login-m { display: none }
.nav-pill {
position: absolute; left: 0; top: 50%; z-index: 0;
width: var(--pw, 0px); height: 38px; margin-top: -19px;
border-radius: 999px; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .08);
transform: translateX(var(--px, 0px));
opacity: 0;
transition: transform .45s cubic-bezier(.3, .7, .2, 1), width .45s cubic-bezier(.3, .7, .2, 1), opacity .3s var(--ease);
}
.nav-links.has-pill .nav-pill { opacity: 1 }
.nav-links.no-anim .nav-pill { transition: opacity .3s var(--ease) }
.nav-cta { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0 }
.nav-login {
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 0 16px 0 14px;
border-radius: 999px; text-decoration: none;
font-size: 13.5px; font-weight: 550; letter-spacing: -.01em; color: #e7ecf6;
background: rgba(255, 255, 255, .05);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
transition: background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.nav-cta { gap: 8px }
.nav-cta .shimmer-btn-md { min-height: 40px; padding: 0 15px 0 18px; font-size: 13.5px }
.nav-ico { width: 16px; height: 16px; flex: none }
.nav-ico-arrow { transition: transform .3s var(--ease) }
.nav-ico-go { transition: transform .3s var(--ease) }
.nav-links a.nav-go-m { display: none }
.nav-links a.nav-login-m .nav-ico { margin-right: 10px }
.burger {
display: none; width: 40px; height: 40px; padding: 0; flex: none;
border: 0; border-radius: 50%; cursor: var(--cur-a); color: var(--fg);
background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.burger svg { grid-area: 1 / 1 }
.burger .i-x, .nav.open .burger .i-menu { display: none }
.nav.open .burger .i-x { display: block }
@media (hover: hover) {
.brand:hover .brand-mark img { transform: rotate(-12deg) scale(1.08) }
.brand:hover .brand-mark::before { opacity: 1; transform: scale(1.35) }
.nav-login:hover { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .08) }
.nav-login:hover .nav-ico-arrow { transform: translateX(2px) }
.nav-cta .shimmer-btn:hover .nav-ico-go { transform: translateX(3px) }
.burger:hover { background: rgba(255, 255, 255, .09) }
}
@media (max-width: 640px) {
.nav-cta .shimmer-btn { display: none }
.nav.open .nav-links a.nav-go-m {
display: flex; justify-content: center; gap: 8px;
min-height: 52px; margin-top: 6px; border-radius: 16px;
font-size: 16px; font-weight: 600; color: #fff;
background: linear-gradient(180deg, #2c7bff, var(--meta));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 30px -14px color-mix(in oklab, var(--meta) 85%, transparent);
}
}
@keyframes nav-drop { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.hero {
position: relative;
min-height: 100svh;
padding: 108px 0 72px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.hero-in {
position: relative; z-index: 1;
width: min(960px, calc(100% - 48px));
margin-inline: auto;
display: flex; flex-direction: column; align-items: center;
gap: 12px;
text-align: center;
}
.hero-in .h1 {
width: 100%;
font-size: clamp(2.05rem, 3.6vw, 3rem);
line-height: 1.12;
}
@media (max-width: 380px) {
.hero-in .h1 { font-size: 1.9rem }
}
.hero-in .cta-row { margin: 0 }
.hero-in .news { margin-bottom: 0 }
.hero-in .hvd { width: min(640px, 100%); margin-top: 8px }
/* —— Hero: marquee abaixo do vídeo (marca + assinatura, plataformas e IAs em 3D, de design/3d-ai-clients) ——
Dois conjuntos iguais com padding-right = gap: o −50% cai no início da cópia e o loop não tem emenda.
No celular fica escondido (as ![]()
lazy dentro de display:none nem baixam). */
.hx {
width: min(640px, 100%); overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.hx-track { display: flex; width: max-content; animation: hx-marq 34s linear infinite }
.hx-set { display: flex; flex: none; align-items: center; gap: 18px; padding-right: 18px }
.hx-i {
display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
font-size: 14px; font-weight: 500; letter-spacing: -.005em; color: #9aa6bd;
}
.hx-i img { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)) }
.hx-i.is-say { font-style: italic; color: #e4ebf7 }
.hx-sep { flex: none; width: 4px; height: 4px; border-radius: 50%; background: rgba(150, 175, 255, .35) }
@keyframes hx-marq { to { transform: translate3d(-50%, 0, 0) } }
@media (hover: hover) { .hx:hover .hx-track { animation-play-state: paused } }
@media (max-width: 640px) { .hx { display: none } }
@media (prefers-reduced-motion: reduce) {
.hx { -webkit-mask-image: none; mask-image: none }
.hx-track { animation: none; width: auto; justify-content: center }
.hx-set { flex-wrap: wrap; justify-content: center; row-gap: 8px; padding-right: 0 }
.hx-set + .hx-set { display: none }
}
.hero-bg {
pointer-events: none; position: absolute; inset: 0; z-index: 0;
overflow: hidden;
}
/* —— Hero: fundo em degradê granulado com revelação em blocos (estilo "Swiss Pixel Reveal") ——
.fuse-art é o degradê nas cores do boraADS: escuro em cima e no centro (onde fica o texto),
azul da marca varrendo por baixo e o ponto mais claro no canto inferior direito. .fuse-grain
é o grão por cima. O canvas .fuse-px nasce como uma tampa sólida (cor do fundo); o runHeroReveal
do home-v2.js desenha os blocos e os desfaz do centro pra fora. Sem JS a tampa só esmaece
(fallback em CSS); com movimento reduzido ela nem aparece. */
.fuse {
--fuse-dark: #06070b;
position: absolute;
inset: 0;
overflow: hidden;
background: var(--fuse-dark);
}
.fuse-art, .fuse-grain, .fuse-px { position: absolute; inset: 0; pointer-events: none }
.fuse-art {
background:
radial-gradient(40% 26% at 50% 88%, rgba(6, 7, 11, .62) 0%, rgba(6, 7, 11, .34) 55%, transparent 100%),
radial-gradient(30% 28% at 96% 100%, rgba(236, 244, 255, .95) 0%, rgba(160, 205, 255, .65) 38%, transparent 72%),
radial-gradient(34% 44% at 99% 70%, rgba(59, 155, 255, .72) 0%, rgba(20, 110, 255, .32) 46%, transparent 74%),
radial-gradient(56% 40% at 52% 114%, rgba(0, 96, 253, .88) 0%, rgba(0, 80, 230, .42) 42%, transparent 74%),
radial-gradient(44% 50% at 3% 106%, rgba(92, 64, 246, .88) 0%, rgba(58, 40, 190, .42) 42%, transparent 74%),
radial-gradient(40% 36% at 98% 16%, rgba(32, 92, 214, .42) 0%, transparent 72%),
linear-gradient(162deg, var(--fuse-dark) 0%, var(--fuse-dark) 38%, #071031 64%, #0b2a86 100%);
}
@media (max-width: 640px) {
/* coluna de texto ocupa a largura toda: cor só no pé e nos cantos, sombra larga atrás do texto */
.fuse-art {
background:
radial-gradient(95% 34% at 50% 64%, rgba(6, 7, 11, .72) 0%, rgba(6, 7, 11, .4) 60%, transparent 100%),
radial-gradient(62% 20% at 100% 100%, rgba(236, 244, 255, .9) 0%, rgba(160, 205, 255, .55) 40%, transparent 75%),
radial-gradient(60% 26% at 104% 86%, rgba(59, 155, 255, .62) 0%, transparent 75%),
radial-gradient(95% 24% at 50% 110%, rgba(0, 96, 253, .88) 0%, transparent 76%),
radial-gradient(70% 28% at -4% 102%, rgba(92, 64, 246, .82) 0%, transparent 76%),
radial-gradient(60% 22% at 104% 10%, rgba(32, 92, 214, .4) 0%, transparent 72%),
linear-gradient(172deg, var(--fuse-dark) 0%, var(--fuse-dark) 48%, #071031 74%, #0b2a86 100%);
}
}
.fuse-art::after {
content: ""; position: absolute; inset: 0;
background-image: var(--fuse-noise);
background-size: 180px 180px;
mix-blend-mode: screen;
opacity: .07;
}
.fuse-grain {
background-image: var(--fuse-noise);
background-size: 180px 180px;
opacity: .26;
mix-blend-mode: overlay;
}
.fuse-px {
width: 100%; height: 100%;
background: var(--fuse-dark);
animation: fuse-px-out .7s ease 2.4s forwards;
}
@keyframes fuse-px-out { to { opacity: 0; visibility: hidden } }
@keyframes rise {
from { opacity: 0; transform: translateY(10px) }
to { opacity: 1; transform: none }
}
.queue-wrap {
position: relative;
width: min(660px, 100%);
margin-inline: auto;
animation: rise .85s var(--ease) .08s both;
}
.queue {
--q-loop: 9s;
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 560px;
padding: 22px 22px 20px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.07);
background: #0b0b0e;
overflow: hidden;
}
.queue-glow {
position: absolute;
top: -140px; right: -80px;
width: 520px; height: 420px;
background: radial-gradient(ellipse at center, rgba(8,102,255,.16), transparent 68%);
pointer-events: none;
}
.queue-bar {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 15px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.07);
background: #101116;
}
.queue-dots { display: flex; gap: 8px; flex: none }
.queue-dots i {
width: 9px; height: 9px; border-radius: 50%;
background: rgba(255,255,255,.16);
}
.queue-title {
flex: 1;
font-size: 14px; font-weight: 650; letter-spacing: -.01em;
text-align: center;
}
.queue-live {
display: inline-flex; align-items: center; gap: 7px; flex: none;
font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
color: #68e096;
}
.queue-live i {
width: 6px; height: 6px; border-radius: 50%; background: #68e096;
animation: q-blink 1.6s ease-in-out infinite;
}
.queue-list {
position: relative;
height: 368px;
}
.queue-row {
position: absolute; left: 0; right: 0;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
height: 112px;
padding: 16px 18px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.015);
animation:
q-row var(--q-loop) cubic-bezier(.22,1,.36,1) var(--q, 0s) infinite,
q-sel var(--q-loop) linear var(--q, 0s) infinite;
}
.queue-row:nth-child(1) { top: 0 }
.queue-row:nth-child(2) { top: 128px }
.queue-row:nth-child(3) { top: 256px }
.queue-copy { display: flex; flex-direction: column; gap: 7px; min-width: 0 }
.queue-src {
display: flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
color: rgba(237,239,244,.55);
}
.queue-src i {
width: 6px; height: 6px; border-radius: 50%; flex: none;
}
.queue-src i.gads { background: #4285f4 }
.queue-src i.meta { background: #8b7cf8 }
.queue-copy h3 {
margin: 0;
font-size: 18px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2;
}
.queue-why { font-size: 13px; color: rgba(237,239,244,.5) }
.queue-act {
display: flex; align-items: center; gap: 14px; flex: none;
}
.queue-val {
font-family: var(--mono); font-size: 13px; color: #8ab4ff;
}
.queue-ok { position: relative }
.queue-btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
min-height: 40px; padding: 0 20px; border-radius: var(--pill);
background: var(--meta); color: #fff;
font-size: 14px; font-weight: 700;
}
.queue-press {
position: absolute; inset: -4px; border-radius: var(--pill);
border: 1px solid rgba(8,102,255,.7);
animation: q-press var(--q-loop) ease-out var(--q, 0s) infinite;
}
.queue-cursor {
position: absolute; top: 24px; left: 34px;
width: 18px; height: 18px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
animation: q-cursor var(--q-loop) cubic-bezier(.22,1,.36,1) var(--q, 0s) infinite;
pointer-events: none;
}
.queue-done {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
display: flex; align-items: center;
padding: 9px 14px; border-radius: var(--pill);
background: #0f1a12;
border: 1px solid rgba(104,224,150,.45);
color: #68e096;
font-family: var(--mono); font-size: 12px; white-space: nowrap;
animation: q-done var(--q-loop) cubic-bezier(.22,1,.36,1) var(--q, 0s) infinite;
}
.queue-foot {
position: relative;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
color: rgba(237,239,244,.5);
}
.queue-sum { display: flex; align-items: baseline; gap: 8px }
.queue-slot { height: 30px; overflow: hidden }
.queue-slot-track { animation: q-slot var(--q-loop) cubic-bezier(.22,1,.36,1) infinite }
.queue-slot-track span {
display: flex; align-items: center; height: 30px;
font-family: var(--font);
font-size: 22px; font-weight: 700; letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: #8ab4ff;
}
.queue-sum small { font-size: 11px; letter-spacing: .04em }
@keyframes q-blink { 0%, 45% { opacity: 1 } 55%, 100% { opacity: .18 } }
@keyframes q-row {
0% { opacity: 0; transform: translateY(44px) scale(.975) }
7% { opacity: 1; transform: none }
60% { opacity: 1; transform: none }
64% { opacity: 1; transform: translateX(-5px) }
72%, 76% { opacity: 1; transform: none }
82% { opacity: 0; transform: translateX(104px) scale(.98) }
100% { opacity: 0; transform: translateY(44px) scale(.975) }
}
@keyframes q-sel {
0%, 54% { background-color: rgba(255,255,255,.015); border-color: rgba(255,255,255,.07) }
60%, 70% { background-color: rgba(8,102,255,.1); border-color: rgba(8,102,255,.42) }
76%, 100% { background-color: rgba(74,222,128,.09); border-color: rgba(74,222,128,.34) }
}
@keyframes q-cursor {
0%, 56% { opacity: 0; transform: translate(22px, 18px) scale(1) }
63% { opacity: 1; transform: translate(0, 0) scale(1) }
67% { opacity: 1; transform: translate(0, 0) scale(.78) }
72% { opacity: 1; transform: translate(0, 0) scale(1) }
80%, 100% { opacity: 0; transform: translate(0, 0) scale(1) }
}
@keyframes q-press {
0%, 62% { transform: scale(.45); opacity: 0 }
68% { opacity: .5 }
84%, 100% { transform: scale(2); opacity: 0 }
}
@keyframes q-done {
0%, 72% { opacity: 0; transform: translate(-50%, -50%) scale(.5) }
78%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1) }
96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) }
}
@keyframes q-slot {
0%, 26% { transform: translateY(0) }
32%, 59% { transform: translateY(-30px) }
65%, 92% { transform: translateY(-60px) }
98%, 100% { transform: translateY(-90px) }
}
.sec { padding: var(--s-10) 0; border-top: 1px solid var(--line) }
.sec-head { max-width: 40rem; margin-bottom: var(--s-7) }
.sec-head .h2 { margin: 0 0 14px }
.center { text-align: center }
.center .sec-head, .center .lead { margin-inline: auto }
.center .cta-row { justify-content: center }
/* —— Apresentação: palco cinematográfico —— */
.sec-show { padding-top: var(--s-9) }
.stage {
display: block; width: 100%; max-width: 920px; margin-inline: auto;
position: relative; border-radius: 16px; overflow: hidden;
border: 1px solid var(--line-2); background: #101113;
aspect-ratio: 16/9; cursor: var(--cur-a); padding: 0;
}
.stage-ui {
position: absolute; inset: 0; display: grid; place-items: center;
background:
radial-gradient(70% 50% at 50% 40%, color-mix(in oklab, var(--acc) 16%, transparent), transparent 70%),
linear-gradient(180deg, #12141a, #0d0e12);
}
.stage-fake {
position: absolute; inset: 28px 40px auto;
display: flex; flex-direction: column; gap: 8px;
opacity: .38; filter: blur(.2px);
}
.sf-bar { font-size: 12px; color: var(--muted); margin-bottom: 6px }
.sf-row {
display: flex; justify-content: space-between; gap: 16px;
padding: 10px 12px; border-radius: 8px;
background: #16181d; border: 1px solid var(--line); font-size: 13px;
}
.sf-row.on {
border-color: color-mix(in oklab, var(--acc) 40%, transparent);
background: color-mix(in oklab, var(--acc) 12%, transparent);
}
.sf-row i { font-style: normal; color: var(--acc); font-weight: 620; font-size: 12px }
.play {
width: 68px; height: 68px; border-radius: 50%; border: 0;
background: var(--acc); color: var(--acc-ink);
display: grid; place-items: center; position: relative; z-index: 1;
box-shadow: 0 12px 32px -12px color-mix(in oklab, var(--acc) 70%, transparent);
}
.play-pulse { animation: playPulse 2.4s var(--ease) infinite }
@keyframes playPulse {
0% { box-shadow: 0 0 0 0 var(--acc-glow), 0 12px 32px -12px color-mix(in oklab, var(--acc) 70%, transparent) }
70% { box-shadow: 0 0 0 28px transparent, 0 12px 32px -12px color-mix(in oklab, var(--acc) 40%, transparent) }
100% { box-shadow: 0 0 0 0 transparent, 0 12px 32px -12px color-mix(in oklab, var(--acc) 70%, transparent) }
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px }
.chip {
font-size: 12px; padding: 6px 12px; border-radius: var(--pill);
color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2);
}
.chip .shiny-text { --shiny-base: var(--muted) }
/* —— Processo: Fluxo 2a —— */
.sec-process { position: relative; overflow: hidden }
.sec-process::before {
content: "";
position: absolute; top: -160px; left: 50%;
width: 980px; max-width: 120%; height: 460px;
transform: translateX(-50%);
background:
radial-gradient(ellipse at center, color-mix(in oklab, var(--meta) 18%, transparent), transparent 68%),
radial-gradient(ellipse at 70% 30%, rgba(8,102,255,.08), transparent 52%);
pointer-events: none;
}
.process-head {
position: relative;
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 32px; margin-bottom: 58px;
}
.process-head .h2 { max-width: 800px; margin: 0 }
.process-head .lead { max-width: 320px; margin: 0 }
/* —— Como funciona: a jornada de uma proposta ——
Quatro etapas num painel só: ícone animado, título curto, uma linha e o chip da proposta.
Sem JS (ou com movimento reduzido) fica tudo aceso e com os conectores cheios. Com .is-anim o
runJourney do home-v2.js acende uma etapa por vez (is-on), marca as anteriores (is-done, o conector
enche) e na etapa 03 um cursor clica em "Aprovar". */
.pj {
--ico: 88px; --gap: 28px;
position: relative; list-style: none; margin: 0; padding: 34px 30px 30px;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
border-radius: 24px;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), rgba(8, 8, 10, .5);
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.1), 0 40px 80px -50px rgba(0,0,0,.9);
}
.pj-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0 }
/* ícones 3D (design/3d-journey-icons): cada um é uma pilha de camadas do mesmo tamanho que, paradas,
formam o render inteiro; a animação só move as camadas */
.pj-ico {
position: relative; z-index: 1; flex: none; display: block;
width: var(--ico); height: var(--ico);
transition: transform .6s var(--ease), filter .6s var(--ease), opacity .6s var(--ease);
}
.pj-ico::before {
content: ""; position: absolute; inset: 4%; z-index: -1; border-radius: 50%;
background: radial-gradient(closest-side, rgba(0, 96, 253, .5), rgba(0, 96, 253, 0));
opacity: 0; transform: scale(.7);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.pj-ico img { position: absolute; inset: 0; display: block; width: 100%; height: 100% }
.pj-b-lens, .pj-c-mark { filter: drop-shadow(0 5px 6px rgba(0, 18, 80, .5)) }
.pj-c-mark { transform-origin: 44% 54% }
.pj-link {
position: absolute; top: calc(var(--ico) / 2 - 1px); left: calc(var(--ico) + 12px);
width: calc(100% + var(--gap) - var(--ico) - 24px); height: 2px;
border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden;
}
.pj-link i {
display: block; width: 100%; height: 100%;
background: linear-gradient(90deg, var(--meta), #5ca6ff);
transform-origin: left center;
transition: transform .9s var(--ease);
}
.pj-k {
display: flex; align-items: center; gap: 8px; margin: 22px 0 0;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta);
}
.pj-human {
padding: 2px 6px; border-radius: 5px; letter-spacing: .1em; font-size: 9.5px; color: #d7e4ff;
background: color-mix(in oklab, var(--meta) 16%, rgba(0,0,0,.4));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--meta) 42%, transparent);
}
.pj-t { margin: 10px 0 0; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--fg) }
.pj-d { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted) }
.pj-t, .pj-d, .pj-k { transition: opacity .5s var(--ease) }
.pj-chip {
position: relative; margin: 20px 0 0; width: 100%;
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 14px;
background: rgba(4, 8, 18, .55);
box-shadow: inset 0 0 0 1px rgba(150,175,255,.14);
transition: opacity .45s var(--ease), transform .55s var(--ease), box-shadow .45s var(--ease);
}
.pj-chip-ico {
flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
font-family: var(--mono); font-size: 10px; font-weight: 600; color: #8fc0ff;
background: color-mix(in oklab, var(--meta) 20%, transparent);
}
.pj-chip-ico.is-logos { width: auto; padding: 0 5px; gap: 2px; display: flex; background: rgba(255,255,255,.05) }
.pj-chip-ico.is-logos img { width: 18px; height: 18px }
.pj-chip-ico.is-done { color: #6fd39a; background: rgba(111,211,154,.14); font-size: 14px }
.pj-chip-t { min-width: 0; display: flex; flex-direction: column; gap: 1px }
.pj-chip-t b { font-size: 13.5px; font-weight: 600; color: #f1f5fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pj-chip-t small { font-family: var(--mono); font-size: 11px; color: #8c95a9; white-space: nowrap }
.pj-chip-ok { flex: none; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #6fd39a; box-shadow: 0 0 10px rgba(111,211,154,.8) }
.pj-btn { margin-left: auto; flex: none; display: grid; justify-items: end }
.pj-sw { display: grid }
.pj-sw > span { grid-area: 1 / 1; transition: opacity .2s var(--ease) }
.pj-sw .is-ok, .pj.is-ok .pj-sw .is-wait { opacity: 0 }
.pj.is-ok .pj-sw .is-ok { opacity: 1; transition-delay: .15s }
.pj:not(.is-anim) .pj-sw .is-wait { opacity: 0 }
.pj:not(.is-anim) .pj-sw .is-ok { opacity: 1 }
.pj-btn > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .2s var(--ease), transform .2s var(--ease) }
.pj-btn .is-wait { padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #0b1020; background: #f1f5fd }
.pj-btn .is-ok { opacity: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6fd39a }
.pj-cursor {
position: absolute; right: 18px; bottom: -14px; z-index: 2;
width: 17px; height: 21px; pointer-events: none; opacity: 0;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.55));
}
.pj-cursor svg { display: block; width: 100%; height: 100% }
.pj-step.is-human .pj-chip { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--meta) 38%, transparent) }
/* estados da animação */
.pj.is-anim .pj-step:not(.is-on):not(.is-done) .pj-ico { opacity: .55; filter: grayscale(.9) brightness(.7); transform: scale(.9) }
.pj.is-anim .pj-link i { transform: scaleX(0) }
.pj.is-anim .pj-step:not(.is-on):not(.is-done) :is(.pj-t, .pj-d, .pj-k) { opacity: .5 }
.pj.is-anim .pj-chip { opacity: 0; transform: translateY(10px) scale(.97) }
.pj.is-anim .pj-step.is-done .pj-link i { transform: none }
.pj.is-anim .pj-step.is-done .pj-chip { opacity: .6; transform: none }
.pj.is-anim .pj-step.is-on .pj-ico { transform: translateY(-4px) }
.pj.is-anim .pj-step.is-on .pj-ico::before { opacity: 1; transform: none }
.pj.is-anim .pj-step.is-on .pj-chip { opacity: 1; transform: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--meta) 55%, transparent), 0 16px 34px -20px rgba(8,102,255,.8) }
/* 01: os elos chegam separados e se encaixam */
.pj.is-anim .pj-step.is-on :is(.pj-l-w, .pj-l-f) { animation: pj-link-w .9s cubic-bezier(.3, 1.35, .5, 1) .15s both }
.pj.is-anim .pj-step.is-on .pj-l-b { animation: pj-link-b .9s cubic-bezier(.3, 1.35, .5, 1) .15s both }
/* 02: a lupa varre as barras e volta */
.pj.is-anim .pj-step.is-on .pj-b-lens { animation: pj-lens 1.9s var(--ease) .1s both }
/* 03: o anel espera e o check só aparece quando você aprova */
.pj.is-anim:not(.is-ok) .pj-c-mark { opacity: 0; transform: scale(.3) rotate(-20deg) }
.pj.is-anim:not(.is-ok) .pj-step.is-on .pj-c-ring { animation: pj-wait 1.3s ease-in-out infinite }
.pj.is-anim.is-ok .pj-c-mark { animation: pj-mark .7s cubic-bezier(.34, 1.56, .64, 1) both }
/* 04: o avião sai pela direita e volta pela esquerda */
.pj.is-anim .pj-step.is-on .pj-p { animation: pj-fly 1.7s var(--ease) .2s both }
.pj.is-anim .pj-step.is-on .pj-cursor { animation: pj-cursor 1.3s var(--ease) both }
.pj.is-press .pj-btn .is-wait { transform: scale(.9) }
.pj.is-ok .pj-btn .is-wait { opacity: 0 }
.pj.is-ok .pj-btn .is-ok { opacity: 1; transition-delay: .15s }
.pj.is-ok .pj-step.is-human .pj-chip { box-shadow: inset 0 0 0 1px rgba(111,211,154,.5), 0 0 0 4px rgba(111,211,154,.08) }
.pj.is-ok .pj-cursor { opacity: 0 !important; transition: opacity .3s }
.pj:not(.is-anim) .pj-btn .is-wait { opacity: 0 }
.pj:not(.is-anim) .pj-btn .is-ok { opacity: 1 }
/* o eixo da corrente sobe ~36° para a direita: o branco chega de cima/direita, o azul de baixo/esquerda */
@keyframes pj-link-w { from { transform: translate(12%, -9%) } to { transform: none } }
@keyframes pj-link-b { from { transform: translate(-7%, 5%) } to { transform: none } }
@keyframes pj-lens { 0% { transform: none } 32% { transform: translate(-44%, -8%) rotate(-10deg) } 58% { transform: translate(-22%, -16%) rotate(-5deg) } 82% { transform: translate(-3%, 1%) } 100% { transform: none } }
@keyframes pj-wait { 50% { transform: scale(1.04) } }
@keyframes pj-mark { from { opacity: 0; transform: scale(.3) rotate(-20deg) } 60% { opacity: 1 } to { opacity: 1; transform: none } }
@keyframes pj-fly { 0% { transform: none; opacity: 1 } 34% { transform: translate(40%, -36%) scale(.55) rotate(4deg); opacity: 0 } 35% { transform: translate(-38%, 32%) scale(.6); opacity: 0 } 78% { transform: translate(2%, -1.5%) scale(1.02); opacity: 1 } 100% { transform: none; opacity: 1 } }
@keyframes pj-cursor { 0% { opacity: 0; transform: translate(26px, 26px) } 30% { opacity: 1 } 75% { opacity: 1; transform: none } 85% { transform: scale(.85) } 100% { opacity: 1; transform: none } }
@media (max-width: 980px) {
.pj { --ico: 64px; --gap: 26px; grid-template-columns: 1fr; padding: 24px 20px }
.pj-step { display: grid; grid-template-columns: var(--ico) minmax(0, 1fr); column-gap: 16px; align-items: start }
.pj-step > :not(.pj-ico):not(.pj-link) { grid-column: 2 }
.pj-ico { grid-row: 1 / span 4 }
.pj-k { margin-top: 4px }
.pj-link {
top: calc(var(--ico) + 10px); left: calc(var(--ico) / 2 - 1px);
width: 2px; height: calc(100% + var(--gap) - var(--ico) - 20px);
}
.pj-link i { background: linear-gradient(180deg, var(--meta), #5ca6ff); transform-origin: center top }
.pj.is-anim .pj-link i { transform: scaleY(0) }
.pj-chip { margin-top: 14px }
}
.flow-foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 16px 24px; margin-top: 28px; padding: 16px 22px;
font-family: var(--mono); font-size: 12.5px; color: var(--muted);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
rgba(8, 8, 10, .45);
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.1),
inset 0 1px 0 rgba(255,255,255,.1);
}
.flow-status { display: flex; align-items: center; gap: 10px; margin: 0 }
.flow-status b { color: var(--meta); font-weight: 600 }
.flow-blink {
width: 6px; height: 6px; border-radius: 50%; background: var(--meta);
box-shadow: 0 0 10px color-mix(in oklab, var(--meta) 70%, transparent);
animation: bx-blink 1.6s steps(1) infinite;
}
.flow-pledge { margin: 0 }
100% { left: 100%; opacity: 0 }
}
@keyframes bx-blink { 0%, 48% { opacity: 1 } 52%, 100% { opacity: .12 } }
/* —— Jeitos: 1B, três trilhas na mesma fila —— */
.sec-ways { position: relative; overflow: hidden }
.sec-ways::before {
content: "";
position: absolute; bottom: -80px; left: 50%;
width: 980px; max-width: 120%; height: 420px;
transform: translateX(-50%);
background:
radial-gradient(ellipse at center, color-mix(in oklab, var(--acc) 16%, transparent), transparent 68%),
radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.04), transparent 55%);
pointer-events: none;
}
.ways-head {
position: relative;
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 32px; margin-bottom: 48px;
}
.ways-head .h2 { max-width: 660px; margin: 0 }
.ways-head .lead { max-width: 300px; margin: 0; text-align: right }
.ways-tracks {
position: relative;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px; align-items: stretch;
}
.ways-card {
display: flex; flex-direction: column;
padding: 28px;
border-radius: 18px;
border: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
rgba(8, 8, 10, .48);
backdrop-filter: blur(28px) saturate(150%);
-webkit-backdrop-filter: blur(28px) saturate(150%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.1),
inset 0 1px 0 rgba(255,255,255,.12),
0 28px 56px -36px rgba(0,0,0,.85);
transition: transform 220ms var(--ease), background 220ms var(--ease), box-shadow 220ms var(--ease);
}
@media (hover: hover) {
.ways-card:hover {
transform: translateY(-4px);
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
rgba(10, 10, 12, .58);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.16),
inset 0 1px 0 rgba(255,255,255,.16),
0 32px 60px -32px rgba(0,0,0,.9);
}
}
.ways-kicker {
margin: 0;
font-family: var(--mono); font-size: 10.5px;
letter-spacing: .18em; text-transform: uppercase;
color: var(--acc);
}
.ways-card .h3 { margin: 16px 0 0; font-size: 1.375rem; line-height: 1.24 }
.ways-card > p { margin: 12px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6 }
.ways-demo { margin-top: 24px }
.ways-go {
margin-top: auto; padding-top: 22px;
color: var(--acc); font-weight: 600; font-size: 14.5px;
text-decoration: none;
}
.ways-go:hover { color: #dbe9ff }
.ways-demo-scan {
position: relative; overflow: hidden;
padding: 16px; border-radius: 12px;
background: rgba(0, 0, 0, .38);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.ways-scan {
position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--acc), transparent);
animation: ways-scan 5.8s ease-in-out infinite;
}
/* Marquee dos 9 agentes: três trilhos em sentidos alternados, com fade nas laterais.
Cada trilho leva o conjunto duas vezes. O padding-right do conjunto é igual ao gap,
então -50% cai exatamente no início da cópia e o loop não tem emenda. */
.ways-demo-marq { padding: 14px 0 }
.ways-demo-marq .ways-scan { z-index: 2 }
.ways-marq {
display: flex; flex-direction: column; gap: 9px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.ways-marq-track {
display: flex; width: max-content;
animation: ways-marq var(--dur, 40s) linear infinite;
}
.ways-marq-track.is-rev { animation-direction: reverse }
@media (hover: hover) {
.ways-demo-marq:hover .ways-marq-track { animation-play-state: paused }
}
.ways-marq-set { display: flex; flex: none; gap: 8px; padding-right: 8px }
.ways-chip {
display: inline-flex; align-items: center; gap: 8px;
height: 32px; padding: 0 12px 0 5px;
border-radius: 999px; white-space: nowrap;
background: color-mix(in oklab, var(--agent) 8%, rgba(255,255,255,.025));
box-shadow:
inset 0 0 0 1px color-mix(in oklab, var(--agent) 24%, rgba(255,255,255,.05)),
inset 0 1px 0 rgba(255,255,255,.06);
}
.ways-chip i {
display: grid; place-items: center; flex: none;
width: 22px; height: 22px; border-radius: 50%;
color: var(--agent);
background: color-mix(in oklab, var(--agent) 18%, transparent);
}
.ways-chip svg {
width: 12px; height: 12px;
fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ways-chip b { font-size: 12.5px; font-weight: 600; color: #e9edf5 }
.ways-chip em {
font-style: normal; font-family: var(--mono); font-size: 11px;
color: color-mix(in oklab, var(--agent) 55%, #e9edf5);
}
/* Card 02 · chat em miniatura: pergunta → análise → resposta com o número → proposta na fila.
Sem JS (ou com movimento reduzido) mostra o estado final. O home-v2.js põe .is-anim e avança
.s-u → .s-think → .s-a → .s-p → .s-q → .s-out em loop enquanto o card está visível. Tudo já
ocupa o espaço final, então a altura do card não muda. */
.ways-demo-chat {
overflow: hidden;
padding: 14px; border-radius: 12px;
background: rgba(0, 0, 0, .38);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.wc { display: flex; flex-direction: column; gap: 10px }
.wc-u {
align-self: flex-end; max-width: 85%;
padding: 8px 12px; border-radius: 12px 12px 4px 12px;
background: linear-gradient(180deg, #2c7bff, var(--meta));
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -12px color-mix(in oklab, var(--meta) 80%, transparent);
color: #fff; font-size: 13px; font-weight: 500; line-height: 1.35;
}
.wc-ai { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start }
.wc-ava {
width: 22px; height: 22px; border-radius: 50%;
display: grid; place-items: center;
color: var(--acc);
background: color-mix(in oklab, var(--acc) 14%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 30%, transparent);
}
.wc-ava svg { width: 11px; height: 11px }
.wc-body { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px }
.wc-think {
position: absolute; left: 0; top: 0; opacity: 0;
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 10px 5px 9px; border-radius: 999px;
background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
color: #9aa3b5; font-size: 11.5px; white-space: nowrap;
}
.wc-think span { display: inline-flex; gap: 3px }
.wc-think b { width: 4px; height: 4px; border-radius: 50%; background: var(--acc); animation: cx-dot 1.2s var(--ease) infinite }
.wc-think b:nth-child(2) { animation-delay: .15s }
.wc-think b:nth-child(3) { animation-delay: .3s }
.wc-a {
padding: 9px 12px 10px; border-radius: 12px 12px 12px 4px;
background: rgba(255,255,255,.035);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.wc-kpi {
display: flex; align-items: center; gap: 6px; margin: 0;
font-size: 13px; color: #9aa3b5; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wc-k { margin-right: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #8b93a7 }
.wc-kpi b { font-weight: 600; color: var(--fg) }
.wc-kpi i { font-style: normal }
.wc-kpi em {
padding: 1px 6px; border-radius: 999px;
font-style: normal; font-family: var(--mono); font-size: 10.5px;
color: #ffb3a3; background: rgba(255, 110, 84, .14);
box-shadow: inset 0 0 0 1px rgba(255, 110, 84, .3);
}
.wc-spark {
width: 48px; height: 16px; margin-left: auto; flex: none;
fill: none; stroke: #ff8a73; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.wc-line { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: #9aa3b5 }
.wc-line b { font-weight: 600; color: var(--fg) }
.wc-line span { white-space: nowrap }
.wc-prop {
display: flex; align-items: center; gap: 8px;
padding: 5px 10px 5px 5px; border-radius: 10px;
border: 1px solid color-mix(in oklab, var(--acc) 50%, transparent);
background: color-mix(in oklab, var(--acc) 9%, transparent);
font-size: 12.5px; font-weight: 500; color: var(--fg);
}
.wc-prop-ico {
width: 22px; height: 22px; flex: none; border-radius: 6px;
display: grid; place-items: center;
font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--acc);
background: color-mix(in oklab, var(--acc) 16%, transparent);
}
.wc-prop-s {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: #aab3c5;
}
.wc-prop-s i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: ways-pulse 2.2s ease-in-out infinite }
/* animação em etapas */
.wc.is-anim :is(.wc-u, .wc-ai, .wc-a, .wc-prop) {
opacity: 0; transform: translateY(6px);
transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.wc.is-anim .wc-u { transform: translateY(8px) scale(.96); transform-origin: 100% 100% }
.wc.is-anim .wc-think { transform: translateY(4px); transition: opacity .25s var(--ease), transform .35s var(--ease) }
.wc.is-anim .wc-kpi em { opacity: 0; transform: scale(.6); transition: opacity .25s var(--ease) .7s, transform .4s cubic-bezier(.3, 1.6, .5, 1) .7s }
.wc.is-anim .wc-spark path { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .9s var(--ease) .2s }
.wc.is-anim .wc-line { clip-path: inset(0 100% 0 0); transition: clip-path .9s linear .45s }
.wc.is-anim .wc-prop {
border-style: dashed; border-color: color-mix(in oklab, var(--acc) 40%, transparent);
background: transparent; transform: translateX(-6px);
transition: opacity .35s var(--ease), transform .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.wc.is-anim.s-u .wc-u,
.wc.is-anim.s-think .wc-ai,
.wc.is-anim.s-a .wc-a,
.wc.is-anim.s-p .wc-prop { opacity: 1; transform: none }
.wc.is-anim.s-think .wc-think { opacity: 1; transform: none }
.wc.is-anim.s-a .wc-think { opacity: 0; transform: translateY(-4px) }
.wc.is-anim.s-a .wc-kpi em { opacity: 1; transform: none }
.wc.is-anim.s-a .wc-spark path { stroke-dashoffset: 0 }
.wc.is-anim.s-a .wc-line { clip-path: inset(0) }
.wc.is-anim.s-q .wc-prop {
border-style: solid; border-color: color-mix(in oklab, var(--acc) 55%, transparent);
background: color-mix(in oklab, var(--acc) 10%, transparent);
animation: wc-land .8s var(--ease);
}
.wc.is-anim.s-out :is(.wc-u, .wc-ai) { opacity: 0; transform: translateY(-8px); transition-duration: .45s }
@keyframes wc-land {
from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--acc) 45%, transparent) }
to { box-shadow: 0 0 0 8px transparent }
}
@media (max-width: 640px) {
.wc-kpi { gap: 5px }
.wc-spark { width: 36px }
}
.ways-demo-mcp { display: flex; flex-direction: column }
.ways-node {
padding: 12px 14px; border-radius: 11px;
background: rgba(0, 0, 0, .38);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
font-size: 13.5px; font-weight: 600;
}
.ways-node small {
font-family: var(--mono); font-size: 11px; font-weight: 400; color: #7e879a;
}
.ways-node-hot {
background: color-mix(in oklab, var(--acc) 12%, rgba(0,0,0,.4));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 40%, rgba(255,255,255,.1));
}
/* Claude, Cursor e Codex em 3D (Blender, design/3d-ai-clients). A margem negativa
deixa os ícones de 40px dentro do nó sem mudar a altura dele. */
.ways-node-ai { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.ways-ai { display: flex; flex: none; margin-block: -10px; margin-right: -6px }
.ways-ai img {
display: block; width: 40px; height: 40px;
filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55));
transition: transform 320ms var(--ease);
}
.ways-ai img + img { margin-left: -6px }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.ways-card:hover .ways-ai img:nth-child(1) { transform: translate(-2px, -3px) rotate(-6deg) }
.ways-card:hover .ways-ai img:nth-child(2) { transform: translateY(-4px); transition-delay: 40ms }
.ways-card:hover .ways-ai img:nth-child(3) { transform: translate(2px, -3px) rotate(6deg); transition-delay: 80ms }
}
.ways-wire {
position: relative; height: 26px; width: 1px; margin-left: 20px;
background: #2a3247;
}
.ways-wire i, .ways-drops i {
position: absolute; left: -2.5px; top: 1px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--acc);
box-shadow: 0 0 10px color-mix(in oklab, var(--acc) 90%, transparent);
animation: ways-drop 2.4s linear var(--d, 0s) infinite;
}
.ways-drops {
position: relative;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px; height: 40px;
}
.ways-drops span { position: relative; display: flex; justify-content: center }
.ways-drops span::before {
content: "";
width: 1px; height: 100%;
background: linear-gradient(180deg, #2a3247, color-mix(in oklab, var(--acc) 50%, transparent));
}
.ways-drops i {
top: 0; left: 50%; margin-left: -3px;
--dy: 36px;
animation-duration: 3s;
}
.ways-queue {
position: relative;
display: flex; align-items: center; justify-content: space-between;
gap: 32px; padding: 24px 28px;
border-radius: 18px;
border: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
rgba(8, 8, 10, .5);
backdrop-filter: blur(28px) saturate(150%);
-webkit-backdrop-filter: blur(28px) saturate(150%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.12),
inset 0 1px 0 rgba(255,255,255,.14),
0 28px 56px -36px rgba(0,0,0,.85);
}
.ways-queue p {
display: flex; align-items: center; gap: 16px; margin: 0;
font-size: 19px; font-weight: 600; letter-spacing: -.012em;
}
.ways-queue i {
width: 9px; height: 9px; border-radius: 50%; flex: none;
background: var(--acc);
animation: ways-pulse 2.2s ease-in-out infinite;
}
.ways-queue span {
font-family: var(--mono); font-size: 12.5px; color: var(--muted); flex: none;
}
@keyframes ways-scan {
0% { top: 1%; opacity: 0 }
12%, 88% { opacity: .85 }
100% { top: 99%; opacity: 0 }
}
@keyframes ways-drop {
0% { transform: translateY(0); opacity: 0 }
15%, 85% { opacity: 1 }
100% { transform: translateY(var(--dy, 22px)); opacity: 0 }
}
@keyframes ways-pulse {
0%, 100% { opacity: .3 }
50% { opacity: 1 }
}
@keyframes ways-marq { to { transform: translate3d(-50%, 0, 0) } }
/* —— Agentes: glass preto + azul escuro (design Glass) —— */
.sec-agents {
--ga: #1d4ed8;
--ga-t: color-mix(in oklab, var(--ga) 42%, #e3ecff);
--gf: .055;
--gb: 26px;
position: relative;
overflow: clip;
}
.agents-atm { position: absolute; inset: 0; pointer-events: none }
.agents-atm-glow {
position: absolute; inset: 0;
background:
radial-gradient(980px 520px at 80% -14%, color-mix(in oklab, var(--ga) 34%, transparent), transparent 70%),
radial-gradient(720px 420px at 2% 112%, color-mix(in oklab, var(--ga) 20%, transparent), transparent 72%);
}
.agents-atm-grid {
position: absolute; inset: 0;
opacity: .55;
background-image:
linear-gradient(rgba(150,180,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(150,180,255,.05) 1px, transparent 1px);
background-size: 68px 68px;
-webkit-mask-image: radial-gradient(1000px 640px at 50% -6%, #000, transparent 76%);
mask-image: radial-gradient(1000px 640px at 50% -6%, #000, transparent 76%);
}
.agents-atm-orb {
position: absolute; top: -80px; right: 10%;
width: min(520px, 70vw); height: 340px; border-radius: 50%;
background: color-mix(in oklab, var(--ga) 26%, transparent);
filter: blur(90px);
animation: ga-drift 16s ease-in-out infinite;
}
@keyframes ga-drift {
0%, 100% { transform: translate3d(0, 0, 0) }
50% { transform: translate3d(0, -20px, 0) }
}
@keyframes ga-pulse {
0%, 100% { opacity: .4 }
50% { opacity: 1 }
}
@keyframes ga-sheen {
0% { transform: translateX(-150%) skewX(-16deg); opacity: 0 }
12%, 88% { opacity: .7 }
100% { transform: translateX(560%) skewX(-16deg); opacity: 0 }
}
.agents-head {
position: relative;
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 56px; margin-bottom: 46px;
}
.agents-head-copy { max-width: 700px; display: flex; flex-direction: column; gap: 18px }
.sec-agents .h2 {
margin: 0;
font-size: clamp(1.9rem, 3.4vw, 3rem);
font-weight: 600;
letter-spacing: -.026em;
line-height: 1.06;
}
.agents-head .lead {
max-width: 318px; margin: 0 0 8px;
text-align: right; font-size: 16.5px; line-height: 1.6; color: #a2abc0;
}
.agents-kicker {
display: flex; align-items: center; gap: 10px; margin: 0;
font-family: var(--mono); font-size: 12px;
letter-spacing: .16em; text-transform: uppercase;
color: var(--ga-t);
}
.agents-kicker i {
width: 6px; height: 6px; border-radius: 50%; flex: none;
background: var(--ga-t);
box-shadow: 0 0 12px 2px color-mix(in oklab, var(--ga) 70%, transparent);
animation: ga-pulse 3.2s ease-in-out infinite;
}
.agents-shell {
position: relative;
display: grid;
grid-template-columns: 322px minmax(0, 1fr);
gap: 26px;
align-items: start;
}
.agents-nav,
.agents-pane {
border: 1px solid rgba(150,175,255,.12);
border-radius: 22px;
background: linear-gradient(158deg, rgba(255,255,255,var(--gf)), rgba(255,255,255,.015));
backdrop-filter: blur(var(--gb)) saturate(160%);
-webkit-backdrop-filter: blur(var(--gb)) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px -60px #000;
}
.agents-nav {
display: flex; flex-direction: column; gap: 3px;
padding: 10px;
position: sticky; top: 88px;
}
.agents-nav button {
--agent: var(--ga-t);
position: relative;
display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center;
gap: 8px; width: 100%;
height: 52px; min-height: 52px;
padding: 0 12px;
text-align: left; cursor: var(--cur-a);
font-size: 15px; font-weight: 500; letter-spacing: -.008em;
color: #aeb7ca;
background: rgba(255,255,255,.012);
border: 1px solid rgba(150,175,255,.06);
border-radius: 15px;
transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.agents-nav button::before {
content: "";
position: absolute; left: -1px; top: 50%;
width: 3px; height: 22px; margin-top: -11px;
border-radius: 0 3px 3px 0;
background: var(--agent);
opacity: 0;
transition: opacity .35s var(--ease);
}
.agents-nav-ico {
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 8px;
color: color-mix(in oklab, var(--agent) 72%, #8b93a7);
background: color-mix(in oklab, var(--agent) 12%, transparent);
}
.agents-nav-ico svg { width: 15px; height: 15px }
.agents-nav button .agents-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.agents-nav button .agents-short { display: none }
.agents-nav button[aria-selected="true"] {
color: #f6f9ff;
background: color-mix(in oklab, var(--agent) 18%, rgba(255,255,255,.04));
border-color: color-mix(in oklab, var(--agent) 46%, transparent);
box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 36px -20px color-mix(in oklab, var(--agent) 70%, transparent);
}
.agents-nav button[aria-selected="true"]::before { opacity: 1 }
.agents-nav button[aria-selected="true"] .agents-nav-ico {
color: var(--agent);
background: color-mix(in oklab, var(--agent) 22%, transparent);
}
@media (hover: hover) {
.agents-nav button:hover { border-color: color-mix(in oklab, var(--agent) 40%, transparent) }
}
.agents-pane {
--agent: #f5b942;
position: relative;
display: flex; flex-direction: column; gap: 18px;
min-width: 0;
padding: 26px;
overflow: hidden;
}
.agents-pane::before {
content: "";
position: absolute; inset: -40px auto auto -40px;
width: 280px; height: 200px; border-radius: 50%;
background: color-mix(in oklab, var(--agent) 22%, transparent);
filter: blur(48px);
pointer-events: none;
}
.agents-copy { position: relative; display: flex; flex-direction: column; gap: 16px; z-index: 1 }
.agents-id { display: flex; align-items: flex-start; gap: 16px }
.agents-ico {
width: 54px; height: 54px; flex: none;
display: grid; place-items: center;
border-radius: 16px;
color: var(--agent);
background: color-mix(in oklab, var(--agent) 16%, rgba(255,255,255,.03));
border: 1px solid color-mix(in oklab, var(--agent) 40%, transparent);
box-shadow: 0 14px 32px -18px color-mix(in oklab, var(--agent) 85%, transparent);
}
.agents-ico svg { width: 24px; height: 24px }
.agents-id-copy { min-width: 0; display: flex; flex-direction: column; gap: 8px }
.agents-meta, .agents-foot {
margin: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
color: #6a7386;
}
.agents-badge {
padding: 3px 9px; border-radius: 999px;
color: var(--agent);
background: color-mix(in oklab, var(--agent) 14%, transparent);
border: 1px solid color-mix(in oklab, var(--agent) 32%, transparent);
}
.agents-foot {
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #5c6478;
}
.agents-copy .h3 {
margin: 0; font-size: 31px; line-height: 1.1; font-weight: 600; letter-spacing: -.022em;
}
.agents-one {
margin: 0;
width: fit-content;
padding: 4px 10px;
border-radius: 999px;
font-family: var(--mono); font-size: 12.5px; font-weight: 400;
letter-spacing: -.005em;
color: var(--agent);
background: color-mix(in oklab, var(--agent) 12%, transparent);
border: 1px solid color-mix(in oklab, var(--agent) 28%, transparent);
}
.agents-desc { margin: 0; max-width: 660px; font-size: 16.5px; line-height: 1.62; color: #a2abc0; text-wrap: pretty }
.agents-stats { display: flex; gap: 10px; flex-wrap: wrap }
.agents-stat {
--st: var(--agent);
flex: 1 1 168px;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 10px;
align-items: center;
padding: 13px 14px 14px;
border: 1px solid color-mix(in oklab, var(--st) 22%, rgba(150,175,255,.08));
border-radius: 15px;
background:
linear-gradient(180deg, color-mix(in oklab, var(--st) 10%, transparent), transparent 70%),
rgba(255,255,255,.028);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.agents-stat.tone-heat { --st: var(--warn) }
.agents-stat.tone-ok { --st: var(--pos) }
.agents-stat.tone-info { --st: var(--acc) }
.agents-stat.tone-mute { --st: #8b9bb8 }
.agents-stat i {
grid-row: 1 / span 2;
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: 9px;
color: var(--st);
background: color-mix(in oklab, var(--st) 16%, transparent);
}
.agents-stat i svg { width: 16px; height: 16px }
.agents-stat b {
grid-column: 2;
font-size: 22px; font-weight: 600; letter-spacing: -.018em;
color: var(--st);
}
.agents-stat span {
grid-column: 2;
margin-top: 2px;
font-family: var(--mono); font-size: 11.5px; color: #7c859a;
}
.agents-pledge { display: none }
.agents-mock {
position: relative;
margin: 4px 0 0;
border: 0;
background: transparent;
box-shadow: none;
aspect-ratio: 1.72;
min-height: 280px;
}
.agents-mock::after {
content: "";
position: absolute;
z-index: 0;
left: 10%; right: 10%; bottom: 4%;
height: 22%;
background: radial-gradient(ellipse at center, color-mix(in oklab, var(--agent) 32%, transparent), transparent 72%);
filter: blur(12px);
pointer-events: none;
}
.agents-mv-fallback {
position: absolute;
z-index: 1;
inset: 10% 4% 8%;
width: auto; height: auto;
object-fit: cover;
object-position: top center;
border-radius: 14px;
background: #0c0c0e;
box-shadow: 0 24px 60px -32px rgba(0,0,0,.7);
transition: opacity .35s var(--ease);
}
.agents-stage.is-ready .agents-mv-fallback {
opacity: 0;
pointer-events: none;
}
.agents-mv {
position: absolute;
z-index: 2;
inset: 0;
width: 100%;
height: 100%;
background: transparent;
--poster-color: transparent;
}
.agents-pane .am { animation: agentsIn .42s var(--ease) }
@keyframes agentsIn {
from { opacity: 0; transform: translateY(8px) }
to { opacity: 1; transform: none }
}
.am { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 100% }
.am-h {
display: flex; justify-content: space-between; gap: 12px;
font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.am-table { display: grid; gap: 2px }
.am-th, .am-tr {
display: grid; grid-template-columns: minmax(0, 1.4fr) 88px 56px;
gap: 12px; align-items: center;
padding: 10px 12px; font-size: 13px;
}
.am-th {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--dim);
}
.am-tr {
border-radius: 10px;
background: rgba(255,255,255,.03);
color: var(--fg);
}
.am-tr span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.am-tr b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums }
.am-tr.on {
background: color-mix(in oklab, var(--acc) 9%, rgba(255,255,255,.03));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 22%, transparent);
}
.am-sum {
margin-top: auto;
padding: 12px 14px; border-radius: 12px;
font-size: 13px; color: var(--muted);
background: rgba(255,255,255,.03);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.am-sum em { color: var(--acc); font-style: normal; font-weight: 650 }
.am-auditor-top { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center }
.am-ring {
width: 96px; height: 96px; border-radius: 50%;
background: conic-gradient(var(--acc) 62%, #1c1f27 0);
display: grid; place-items: center; flex: none;
}
.am-ring i {
width: 74px; height: 74px; border-radius: 50%;
background: #090a0d;
display: grid; place-items: center; text-align: center;
}
.am-ring strong { display: block; font-size: 22px; letter-spacing: -.03em; line-height: 1 }
.am-ring span { font-family: var(--mono); font-size: 10px; color: var(--dim) }
.am-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.am-stats div {
padding: 12px; border-radius: 12px;
background: rgba(255,255,255,.03);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.am-stats b { display: block; font-size: 18px; letter-spacing: -.02em }
.am-stats span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--dim); line-height: 1.35 }
.am-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.am-list li {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px;
background: rgba(255,255,255,.03); font-size: 13.5px;
}
.am-list i {
width: 7px; height: 7px; border-radius: 50%; flex: none;
background: var(--warn);
}
.am-rsa { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; flex: 1 }
.am-rsa-card, .am-side {
padding: 14px; border-radius: 12px;
background: rgba(255,255,255,.03);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.am-rsa-card strong { display: block; font-size: 14.5px; margin-bottom: 10px }
.am-lines { display: grid; gap: 6px }
.am-lines span {
display: block; padding: 8px 10px; border-radius: 8px;
background: #12141a; font-size: 13px;
}
.am-lines span.bad { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 45%, transparent); color: #f3d9a2 }
.am-force { margin-top: 12px; font-family: var(--mono); font-size: 11px; color: var(--dim) }
.am-bar { height: 6px; border-radius: 99px; background: #1c1e24; overflow: hidden; margin-top: 6px }
.am-bar i { display: block; height: 100%; border-radius: inherit; background: var(--acc) }
.am-side p { margin: 0 0 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim) }
.am-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px }
.am-side li { font-size: 13px; color: var(--fg); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05) }
.am-kw { display: grid; gap: 6px }
.am-kw-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
gap: 10px; align-items: center;
padding: 10px 12px; border-radius: 10px;
background: rgba(255,255,255,.03); font-size: 13.5px;
}
.am-chip {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
padding: 3px 7px; border-radius: 999px;
color: var(--acc);
background: color-mix(in oklab, var(--acc) 12%, transparent);
}
.am-land { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; flex: 1 }
.am-page {
border-radius: 12px; overflow: hidden;
background: #101218;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.am-page-bar { height: 22px; background: #161920; border-bottom: 1px solid rgba(255,255,255,.06) }
.am-page-body { padding: 14px; display: grid; gap: 8px }
.am-page-body i { display: block; height: 8px; border-radius: 99px; background: #2a2e38 }
.am-page-body i.w2 { width: 62% }
.am-page-body i.cta { width: 38%; height: 18px; background: color-mix(in oklab, var(--acc) 45%, #2a2e38) }
.am-page-body i.form { height: 46px; width: 100%; border-radius: 8px; opacity: .45 }
.am-bars { display: grid; gap: 12px }
.am-bars > div { display: grid; gap: 6px }
.am-bars span { display: flex; justify-content: space-between; font-size: 13px }
.am-bars b { font-weight: 600; font-variant-numeric: tabular-nums }
.am-pmax { display: grid; gap: 10px }
.am-pmax-row {
display: grid; grid-template-columns: 92px minmax(0, 1fr) 86px;
gap: 10px; align-items: center; font-size: 13px;
}
.am-pmax-row em { font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums }
.am-sku {
display: grid; grid-template-columns: 36px minmax(0, 1fr) 72px 64px;
gap: 10px; align-items: center;
padding: 9px 10px; border-radius: 10px;
background: rgba(255,255,255,.03); font-size: 13px;
}
.am-sku i {
width: 36px; height: 36px; border-radius: 8px;
background: linear-gradient(135deg, #1a2233, #0e1118);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.am-sku .bad { color: #f3d9a2 }
.am-sku .ok { color: var(--pos) }
.am-pdf {
flex: 1;
padding: 18px 20px;
border-radius: 12px;
background: linear-gradient(180deg, #12141a, #0c0d11);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.am-pdf h4 { margin: 0 0 4px; font-size: 16px }
.am-pdf .am-h { margin-bottom: 16px }
.am-pdf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.am-pdf-grid div {
padding: 12px; border-radius: 10px;
background: rgba(255,255,255,.03);
}
.am-pdf-grid b { display: block; font-size: 18px; letter-spacing: -.02em }
.am-pdf-grid span { font-size: 11.5px; color: var(--dim) }
.agent-table { width: 100%; border-collapse: collapse; margin-top: 36px; font-size: 13px }
.agent-table th, .agent-table td {
border-top: 1px solid var(--line); padding: 14px 10px;
text-align: left; vertical-align: top;
}
.agent-table th { color: var(--muted); font-weight: 500; font-size: 12px }
.agent-table td:first-child { color: var(--acc); width: 40px; font-weight: 620; font-family: var(--mono) }
/* —— Splits de produto —— */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start }
.split ul { margin: 16px 0 0; padding-left: 18px; color: var(--muted) }
.split li { margin: 8px 0 }
.sec-chat {
--cx-line: #1f2638;
--cx-line-2: #2a3247;
--cx-panel: #0d1119;
--cx-card: #121723;
--cx-ink: #f2f5fb;
--cx-mid: #c6ccda;
--cx-dim: #8089a0;
--cx-mute: #9ca4b5;
--cx-ok: #5ad9a0;
--cx-warn: #f0b24b;
}
.cx-shell {
display: grid;
grid-template-columns: minmax(0, 680px) minmax(260px, 1fr);
gap: 64px;
align-items: center;
}
.cx-app {
height: 520px;
display: flex; flex-direction: column;
border: 1px solid var(--cx-line);
border-radius: 18px;
background: var(--cx-panel);
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 60px 120px -70px #000;
}
.cx-app [hidden] { display: none !important }
.cx-top {
flex: none;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
height: 48px; padding: 0 16px;
border-bottom: 1px solid var(--cx-line);
}
.cx-crumb {
display: flex; align-items: center; gap: 8px; margin: 0;
font-size: 12.5px; color: var(--cx-dim);
}
.cx-crumb i { font-style: normal; color: #485066 }
.cx-crumb b { font-weight: 500; color: var(--cx-ink) }
.cx-top-actions { display: flex; align-items: center; gap: 8px }
.cx-account {
display: inline-flex; align-items: center; gap: 8px;
height: 28px; padding: 0 10px;
border: 1px solid var(--cx-line-2); border-radius: 8px;
background: var(--cx-card); white-space: nowrap;
}
.cx-account i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); flex: none }
.cx-account span { font-size: 12px; font-weight: 500; color: var(--cx-ink) }
.cx-account em {
font-style: normal; font-family: var(--mono); font-size: 11px;
color: var(--cx-dim); font-variant-numeric: tabular-nums;
}
.cx-new {
display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
border-radius: 8px; background: var(--acc); color: var(--acc-ink);
font-size: 12px; font-weight: 500; white-space: nowrap;
}
.cx-thread {
position: relative; flex: 1; min-height: 0;
overflow-x: hidden; overflow-y: auto;
display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
padding: 22px 22px 10px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 10px), transparent);
mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 10px), transparent);
}
.cx-thread::-webkit-scrollbar { display: none }
.cx-starters {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px; min-height: 100%;
padding: 6px 0 10px;
animation: cx-in .3s var(--ease) both;
}
.cx-mark-lg, .cx-ava {
display: grid; place-items: center; flex: none;
color: var(--acc);
background: color-mix(in oklab, var(--acc) 14%, transparent);
border: 1px solid color-mix(in oklab, var(--acc) 30%, transparent);
}
.cx-mark-lg { width: 40px; height: 40px; border-radius: 50% }
.cx-mark-lg svg { width: 24px; height: 24px }
.cx-ava { width: 28px; height: 28px; border-radius: 50% }
.cx-ava svg { width: 14px; height: 14px }
.cx-starters-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.012em }
.cx-starters-lead {
margin: 0; max-width: 420px; text-align: center;
font-size: 13px; line-height: 1.6; color: var(--cx-mute);
}
.cx-prompts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 4px }
.cx-prompts div {
padding: 11px 13px;
border: 1px solid var(--cx-line); border-radius: 10px; background: var(--cx-card);
}
.cx-prompts b { display: block; font-size: 12.5px; font-weight: 500 }
.cx-prompts span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--cx-dim) }
.cx-user {
align-self: flex-end; max-width: 78%;
padding: 10px 14px;
border-radius: 12px 12px 6px 12px;
background: color-mix(in oklab, var(--acc) 16%, #1a2030);
border: 1px solid color-mix(in oklab, var(--acc) 26%, var(--cx-line-2));
color: var(--cx-ink); font-size: 13.5px; line-height: 1.6;
animation: cx-in .28s var(--ease) both;
}
.cx-ai {
display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start;
animation: cx-in .28s var(--ease) both;
}
.cx-ai-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px }
.cx-tools { display: flex; flex-wrap: wrap; gap: 6px }
.cx-chip {
--ink: var(--acc);
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 6px;
height: 24px; padding: 0 9px 0 5px; border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--ink) 34%, transparent);
background: color-mix(in oklab, var(--ink) 14%, transparent);
color: var(--ink); font-size: 11.5px;
animation: cx-in .28s var(--ease) both;
}
.cx-chip.ink-warn { --ink: var(--cx-warn) }
.cx-chip.ink-ok { --ink: var(--cx-ok) }
.cx-chip i {
width: 16px; height: 16px; display: grid; place-items: center;
border-radius: 5px; background: color-mix(in oklab, var(--ink) 16%, transparent);
}
.cx-chip i::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
border: 1.5px solid currentColor; border-top-color: transparent;
}
.cx-chip.is-run i::before { animation: cx-spin 1s linear infinite }
.cx-chip.is-run::after {
content: ""; position: absolute; inset: 0; width: 34%;
background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ink) 26%, transparent), transparent);
animation: cx-sheen 1.35s var(--ease) infinite;
}
.cx-think {
display: inline-flex; align-self: flex-start; align-items: center; gap: 9px;
padding: 7px 12px 7px 11px; border-radius: 999px;
background: var(--cx-card); border: 1px solid var(--cx-line-2);
color: var(--cx-mute); font-size: 12px;
animation: cx-in .28s var(--ease) both;
}
.cx-think span { display: inline-flex; gap: 3px }
.cx-think b {
width: 5px; height: 5px; border-radius: 50%; background: var(--acc);
animation: cx-dot 1.2s var(--ease) infinite;
}
.cx-think b:nth-child(2) { animation-delay: .15s }
.cx-think b:nth-child(3) { animation-delay: .3s }
.cx-answer { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; line-height: 1.62; color: var(--cx-mid) }
.cx-answer p { margin: 0; animation: cx-in .26s var(--ease) both }
.cx-answer b { font-weight: 600; color: var(--cx-ink); font-variant-numeric: tabular-nums }
.cx-caret {
display: inline-block; width: 7px; height: 14px; margin-left: 3px; vertical-align: -2px;
background: var(--acc); animation: cx-caret 1s steps(1) infinite;
}
.cx-prop {
position: relative;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start;
padding: 16px 18px 14px;
border: 1px solid var(--cx-line-2); border-radius: 12px; background: var(--cx-card);
animation: cx-card .34s var(--ease) both;
}
.cx-prop-main { min-width: 0 }
.cx-prop-ico {
width: 30px; height: 30px; margin-bottom: 9px;
display: grid; place-items: center; border-radius: 8px;
background: color-mix(in oklab, var(--acc) 14%, transparent);
border: 1px solid color-mix(in oklab, var(--acc) 30%, transparent);
font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--acc);
}
.cx-prop h4 {
margin: 9px 0 0; font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em;
}
.cx-prop-meta { margin: 8px 0 0; font-size: 12px; color: var(--cx-dim) }
.cx-prop-meta b {
display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px;
border-radius: 2px; background: var(--acc);
}
.cx-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px }
.cx-terms span, .cx-terms em {
font-family: var(--mono); font-size: 11.5px; color: var(--cx-mute);
background: #1a2030; border: 1px solid var(--cx-line); border-radius: 6px; padding: 4px 7px;
}
.cx-terms em { font-style: normal; font-family: var(--font); color: #485066; border: 0; background: none; padding: 0 0 0 3px }
.cx-prop-note { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--cx-mute) }
.cx-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px }
.cx-metrics div {
padding: 9px 11px; border: 1px solid var(--cx-line); border-radius: 8px; background: var(--cx-panel);
}
.cx-metrics span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-dim) }
.cx-metrics b { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums }
.cx-metrics .pos { color: var(--cx-ok) }
.cx-prop-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px }
.cx-approve {
display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
border-radius: 8px; background: var(--acc); color: #fff; font-size: 12.5px; font-weight: 500;
}
.cx-reject { color: var(--cx-mute); font-size: 12.5px; font-weight: 500; padding: 0 10px }
.cx-safe { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--cx-dim) }
.cx-safe i { width: 9px; height: 9px; border-radius: 2px; background: var(--cx-ok) }
.cx-safe b { font-weight: 600; color: var(--cx-mute) }
.cx-status {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 8px; border-radius: 999px;
font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em;
color: var(--cx-warn);
background: color-mix(in oklab, var(--cx-warn) 14%, transparent);
border: 1px solid color-mix(in oklab, var(--cx-warn) 26%, transparent);
white-space: nowrap;
}
.cx-status i {
width: 5px; height: 5px; border-radius: 50%; background: currentColor;
box-shadow: 0 0 6px currentColor; animation: cx-pip 1.6s ease-in-out infinite;
}
.cx-composer { flex: none; padding: 12px 22px 16px; border-top: 1px solid var(--cx-line) }
.cx-box {
display: flex; align-items: flex-end; gap: 6px;
padding: 6px 8px 6px 6px; border-radius: 16px;
border: 1px solid var(--cx-line-2); background: var(--cx-card);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cx-box.is-focus {
border-color: color-mix(in oklab, var(--acc) 30%, transparent);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--acc) 30%, transparent), 0 8px 32px -8px color-mix(in oklab, var(--acc) 60%, transparent);
}
.cx-plus, .cx-send {
width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px;
}
.cx-plus { color: var(--cx-dim); font-size: 17px }
.cx-send { background: #1a2030; color: #485066; font-size: 15px }
.cx-box.is-ready .cx-send { background: var(--acc); color: #fff }
.cx-input {
flex: 1; min-width: 0; min-height: 34px;
display: flex; align-items: center; flex-wrap: wrap;
padding: 8px 6px; font-size: 14px; line-height: 1.5; color: var(--cx-ink);
}
.cx-input i {
display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; background: var(--acc);
animation: cx-caret 1s steps(1) infinite;
}
.cx-ph { color: #8089a0 }
.cx-hint {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 8px 0 0; font-size: 11.5px; color: var(--cx-dim);
}
.cx-hint kbd {
font-family: var(--mono); font-size: 10.5px; font-weight: 400;
padding: 2px 5px; border: 1px solid var(--cx-line); border-radius: 4px; background: var(--cx-card);
}
.cx-copy { display: flex; flex-direction: column; gap: 22px; max-width: 520px }
.cx-copy .h2 { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.75rem); letter-spacing: -.024em }
.cx-copy .lead { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--cx-mute) }
.cx-points { margin: 0; padding: 4px 0 0; list-style: none }
.cx-points li {
position: relative; padding-left: 17px; margin: 0 0 12px;
font-size: 15.5px; line-height: 1.5; color: var(--cx-mid);
}
.cx-points li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 5px; height: 5px; border-radius: 50%; background: var(--acc);
}
.cx-cta { display: flex; align-items: center; gap: 16px; padding-top: 6px }
.cx-go {
display: inline-flex; align-items: center; height: 48px; padding: 0 24px;
border-radius: 999px; border: 1px solid var(--cx-line-2); background: var(--cx-card);
color: var(--cx-ink); font-size: 15.5px; font-weight: 500; text-decoration: none;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cx-go:hover { border-color: color-mix(in oklab, var(--acc) 45%, transparent); background: #1a2030 }
.cx-cta span {
font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #8089a0;
}
@keyframes cx-in { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } }
@keyframes cx-card { from { opacity: 0; transform: translateY(12px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes cx-caret { 0%, 45% { opacity: 1 } 50%, 95% { opacity: 0 } }
@keyframes cx-dot { 0%, 100% { opacity: .25; transform: none } 45% { opacity: 1; transform: translateY(-2px) } }
@keyframes cx-pip { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes cx-sheen { from { transform: translateX(-120%) } to { transform: translateX(320%) } }
@keyframes cx-spin { to { transform: rotate(360deg) } }
.sec-mcp {
--mx: #1d4ed8;
--mx-t: color-mix(in oklab, var(--mx) 44%, #e6edff);
--mx-gb: 26px;
padding: var(--s-8) 0;
}
.mx-frame {
position: relative;
overflow: hidden;
padding: 56px 52px 48px;
border: 1px solid rgba(150,175,255,.10);
border-radius: 30px;
background: #04060b;
box-shadow: 0 60px 120px -70px #000;
}
.mx-atm { position: absolute; inset: 0; pointer-events: none }
.mx-atm-glow {
position: absolute; inset: 0;
background:
radial-gradient(900px 520px at 84% -16%, color-mix(in oklab, var(--mx) 32%, transparent), transparent 70%),
radial-gradient(760px 440px at -4% 108%, color-mix(in oklab, var(--mx) 18%, transparent), transparent 72%);
}
.mx-atm-grid {
position: absolute; inset: 0; opacity: .5;
background-image:
linear-gradient(rgba(150,180,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(150,180,255,.05) 1px, transparent 1px);
background-size: 68px 68px;
-webkit-mask-image: radial-gradient(1000px 620px at 60% -8%, #000, transparent 78%);
mask-image: radial-gradient(1000px 620px at 60% -8%, #000, transparent 78%);
}
.mx-atm-orb {
position: absolute; top: -140px; right: 180px;
width: 520px; height: 340px; border-radius: 50%;
background: color-mix(in oklab, var(--mx) 24%, transparent);
filter: blur(100px);
animation: mx-drift 18s ease-in-out infinite;
}
.mx-shell {
position: relative;
display: grid;
grid-template-columns: minmax(0, 592px) minmax(0, 1fr);
gap: 72px;
align-items: start;
}
.mx-copy { display: flex; flex-direction: column; gap: 26px }
.mx-kicker {
display: flex; align-items: center; gap: 10px; margin: 0;
font-family: var(--mono); font-size: 12px;
letter-spacing: .16em; text-transform: uppercase;
color: var(--mx-t);
}
.mx-kicker i {
width: 6px; height: 6px; border-radius: 50%; flex: none;
background: var(--mx-t);
box-shadow: 0 0 12px 2px color-mix(in oklab, var(--mx) 70%, transparent);
animation: mx-pulse 3.2s ease-in-out infinite;
}
.sec-mcp .h2 {
margin: 0;
font-size: clamp(1.9rem, 3.6vw, 3.1rem);
font-weight: 600;
letter-spacing: -.028em;
line-height: 1.05;
}
.sec-mcp .lead {
margin: 0; max-width: 520px;
font-size: 17px; line-height: 1.62; color: #a2abc0;
}
.mx-feats {
display: flex; flex-direction: column; gap: 2px;
padding: 10px;
border: 1px solid rgba(150,175,255,.10);
border-radius: 20px;
background: linear-gradient(158deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
backdrop-filter: blur(var(--mx-gb)) saturate(160%);
-webkit-backdrop-filter: blur(var(--mx-gb)) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 90px -60px #000;
}
.mx-feat {
display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center;
padding: 14px; border-radius: 14px;
}
.mx-feat + .mx-feat { box-shadow: 0 -1px 0 rgba(150,175,255,.08) }
.mx-ico {
display: grid; place-items: center; width: 44px; height: 44px; flex: none;
border: 1px solid rgba(150,175,255,.14); border-radius: 13px;
background: rgba(255,255,255,.035);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
color: var(--mx-t);
}
.mx-feat b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em }
.mx-feat span span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: #8c95a9 }
.mx-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 4px }
.mx-go {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 10px;
height: 54px; padding: 0 26px;
border: 1px solid rgba(150,175,255,.22); border-radius: 999px;
background: linear-gradient(158deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 50px -30px color-mix(in oklab, var(--mx) 80%, #000);
color: #f4f8ff; font-size: 16px; font-weight: 600; letter-spacing: -.008em; text-decoration: none;
transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.mx-go i {
position: absolute; top: 0; bottom: 0; left: 0; width: 44px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
animation: mx-sheen 5.5s ease-in-out infinite; pointer-events: none;
}
.mx-go svg { position: relative }
.mx-more {
font-family: var(--mono); font-size: 13px;
letter-spacing: .06em; text-transform: uppercase;
color: #8c95a9; text-decoration: none;
transition: color .2s var(--ease);
}
@media (hover: hover) {
.mx-feat:hover { background: rgba(255,255,255,.028) }
.mx-go:hover { border-color: color-mix(in oklab, var(--mx) 55%, transparent); transform: translateY(-1px) }
.mx-more:hover { color: #d8e2f7 }
}
/* —— MCP: fluxo animado (sua IA → servidor MCP do boraADS → fila de aprovação → Google Ads e Meta) ——
Ícones 3D do design/3d-ai-clients. O home-v2.js desenha os fios no