.hero-produtos { display:grid; grid-template-columns:1fr minmax(390px,.9fr); align-items:center; gap:6vw; overflow:hidden; background:radial-gradient(circle at 75% 46%,rgba(255,196,0,.13),transparent 24%),linear-gradient(120deg,rgba(8,10,9,.96),rgba(8,10,9,.56)),url("../img/fundos/solucoes.png") center/cover }
.mockup-produto { position:relative; width:min(43vw,570px); height:440px }
.browser-mock { position:absolute; inset:18px 20px 0 0; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:18px; background:#121611; box-shadow:0 30px 80px rgba(0,0,0,.45); transform:perspective(1200px) rotateY(-6deg) rotateX(3deg); animation:flutuar-browser 6s ease-in-out infinite }
.browser-mock>header { display:flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.1) }.browser-mock>header i { width:7px; height:7px; border-radius:50%; background:#596056 }.browser-mock>header span { margin-left:10px; color:#757b74; font:500 .55rem DM Mono,monospace }
.tela-mock { display:grid; grid-template-columns:62px 1fr; height:calc(100% - 40px) }.tela-mock aside { display:grid; align-content:start; gap:15px; padding:25px 18px; border-right:1px solid rgba(255,255,255,.08) }.tela-mock aside b { height:5px; border-radius:3px; background:#3f453e }.tela-mock aside b:first-child { background:#ffc400 }.tela-mock main { padding:38px }.tela-mock main small { color:#8d938b; font:500 .55rem DM Mono,monospace; letter-spacing:.09em }.tela-mock h3 { margin:12px 0 30px; font-size:clamp(1.4rem,3vw,2.4rem); letter-spacing:-.06em; line-height:.95 }.tela-mock h3 em { color:#ffc400; font-style:normal }.mini-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }.mini-cards i { height:74px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:linear-gradient(135deg,rgba(255,196,0,.18),transparent) }.linha-mock { height:100px; margin-top:22px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:linear-gradient(150deg,transparent 40%,rgba(255,196,0,.7) 41% 43%,transparent 44%),linear-gradient(25deg,transparent 40%,rgba(255,255,255,.15) 41% 43%,transparent 44%) }
.celular-mock { position:absolute; z-index:2; right:0; bottom:14px; width:160px; padding:25px 18px; border:1px solid rgba(255,196,0,.5); border-radius:22px; background:#0d100d; box-shadow:0 25px 45px rgba(0,0,0,.45); animation:flutuar-produto 6s -2.5s ease-in-out infinite }.celular-mock small,.celular-mock span { display:block; color:#8b9189; font:500 .5rem DM Mono,monospace }.celular-mock b { display:block; margin:18px 0 3px; color:#ffc400; font-size:3rem; letter-spacing:-.08em }.celular-mock i { display:block; width:100%; height:6px; margin-top:20px; border-radius:5px; background:linear-gradient(90deg,#ffc400 72%,#30362f 72%) }
.introducao-servico strong { color:#ffc400 }.cabecalho-produto { display:grid; grid-template-columns:1fr minmax(260px,.45fr); gap:5vw; align-items:end }.cabecalho-produto .rotulo { grid-column:1/-1 }.cabecalho-produto h2 { margin-bottom:0 }.cabecalho-produto>p:last-child { padding-bottom:10px; color:#aab0a8; line-height:1.7 }.secao-produtos { border-top:1px solid rgba(255,255,255,.15) }
.grade-produtos { display:grid; grid-template-columns:repeat(4,1fr); margin-top:55px }.grade-produtos article { position:relative; min-height:265px; padding:26px; border:1px solid rgba(255,255,255,.12); margin:-1px 0 0 -1px; background:#0c0f0d; transition:transform .3s,border-color .3s,background .3s }.grade-produtos article:hover { z-index:1; transform:translateY(-8px); border-color:rgba(255,196,0,.6); background:#131711 }.grade-produtos span { color:#ffc400; font:500 .62rem DM Mono,monospace }.grade-produtos h3 { margin:55px 0 13px; font-size:1.1rem }.grade-produtos p { color:#9fa59e; font-size:.86rem; line-height:1.6 }.grade-produtos i { position:absolute; right:22px; bottom:20px; color:#ffc400; font-style:normal; font-size:1.6rem }
.arquitetura-produto { background:#efeee7; color:#080a09 }.arquitetura-produto .rotulo { color:#806200 }.arquitetura-produto .cabecalho-produto>p:last-child { color:#555a53 }.mapa-arquitetura { position:relative; min-height:490px; margin-top:55px; overflow:hidden; border:1px solid rgba(8,10,9,.16); border-radius:20px; background:radial-gradient(circle at center,rgba(255,196,0,.25),transparent 20%),repeating-linear-gradient(0deg,transparent 0 55px,rgba(8,10,9,.05) 56px),repeating-linear-gradient(90deg,transparent 0 55px,rgba(8,10,9,.05) 56px) }.nucleo-arq { position:absolute; z-index:3; left:50%; top:50%; display:grid; place-items:center; width:150px; height:150px; border-radius:50%; background:#080a09; color:#f3f3ee; transform:translate(-50%,-50%); text-align:center; box-shadow:0 0 0 15px rgba(8,10,9,.06) }.nucleo-arq small { color:#ffc400; font:500 .52rem DM Mono,monospace }.nucleo-arq b { font-size:1.2rem; line-height:.9; letter-spacing:-.06em }
.ponto-arq { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:13px; border:1px solid rgba(8,10,9,.18); border-radius:12px; background:#fbfaf5; box-shadow:0 12px 30px rgba(8,10,9,.09); animation:flutuar-produto 5s ease-in-out infinite }.ponto-arq span { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#ffc400; font-weight:800 }.ponto-arq strong,.ponto-arq small { display:block }.ponto-arq strong { font-size:.74rem }.ponto-arq small { margin-top:3px; color:#666b64; font-size:.55rem }.ponto-web { left:8%; top:15% }.ponto-api { right:8%; top:16%; animation-delay:-1.2s }.ponto-crm { right:8%; bottom:15%; animation-delay:-2.4s }.ponto-dados { left:8%; bottom:15%; animation-delay:-3.6s }.linha-arq { position:absolute; z-index:1; left:50%; top:50%; width:32%; height:1px; background:linear-gradient(90deg,#080a09,transparent); transform-origin:left }.linha-1 { transform:rotate(-145deg) }.linha-2 { transform:rotate(-35deg) }.linha-3 { transform:rotate(35deg) }.linha-4 { transform:rotate(145deg) }.pacote { position:absolute; z-index:2; width:9px; height:9px; border-radius:50%; background:#ffc400; box-shadow:0 0 0 6px rgba(255,196,0,.17); animation:viajar-pacote 4.5s linear infinite }.pacote-1 { left:30%; top:29% }.pacote-2 { right:28%; top:32%; animation-delay:-1.5s }.pacote-3 { right:31%; bottom:29%; animation-delay:-3s }
.secao-crm-produto { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(45px,8vw,130px); align-items:center; border-top:1px solid rgba(255,255,255,.15) }.texto-crm-produto>p:not(.rotulo) { color:#aab0a8; line-height:1.7 }.kanban-mock { overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:#10130f; box-shadow:0 25px 60px rgba(0,0,0,.32) }.kanban-mock header { display:flex; justify-content:space-between; padding:17px 20px; border-bottom:1px solid rgba(255,255,255,.1); font-size:.72rem }.kanban-mock header span { display:flex; align-items:center; gap:8px }.kanban-mock header span i { width:7px; height:7px; border-radius:50%; background:#76d694 }.kanban-mock header small { color:#7c827a; font-size:.57rem }.colunas-kanban { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px }.colunas-kanban section { min-height:235px; padding:10px; background:#0b0e0b }.colunas-kanban section>p { display:flex; justify-content:space-between; margin-bottom:12px; color:#8a9088; font:500 .55rem DM Mono,monospace; text-transform:uppercase }.colunas-kanban section>p b { color:#ffc400 }.colunas-kanban article { position:relative; margin-bottom:9px; padding:13px; border:1px solid rgba(255,255,255,.1); border-radius:7px; background:#151915; animation:subir-card 5s ease-in-out infinite }.colunas-kanban article:nth-child(3) { animation-delay:-2s }.colunas-kanban strong,.colunas-kanban small { display:block }.colunas-kanban strong { font-size:.66rem }.colunas-kanban small { margin-top:4px; color:#858b84; font-size:.53rem }.colunas-kanban article>i { position:absolute; right:10px; bottom:9px; width:25px; height:3px; border-radius:2px; background:#ffc400 }.colunas-kanban .fechado { border-color:rgba(118,214,148,.4) }.colunas-kanban .fechado>i { display:grid; place-items:center; width:17px; height:17px; background:#76d694; color:#080a09; font-size:.6rem }
.metodo-produto>div { grid-template-columns:repeat(4,1fr) }.metodo-produto article p { font-size:.96rem }.entrada-produto { opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1) }.entrada-produto.visivel { opacity:1; transform:none }
@keyframes flutuar-browser { 50% { transform:perspective(1200px) translateY(-9px) rotateY(-6deg) rotateX(3deg) } } @keyframes flutuar-produto { 50% { transform:translateY(-9px) } } @keyframes viajar-pacote { 50% { transform:translate(55px,55px); opacity:1 } 100% { transform:translate(110px,110px); opacity:0 } } @keyframes subir-card { 50% { transform:translateY(-4px) } }
@media(max-width:1000px) { .hero-produtos { grid-template-columns:1fr }.mockup-produto { width:min(100%,620px) }.cabecalho-produto,.secao-crm-produto { grid-template-columns:1fr }.grade-produtos,.metodo-produto>div { grid-template-columns:1fr 1fr } }
@media(max-width:650px) { .mockup-produto { height:300px }.browser-mock { right:0 }.tela-mock main { padding:25px }.celular-mock { width:120px; padding:17px }.celular-mock b { font-size:2.2rem }.grade-produtos,.metodo-produto>div { grid-template-columns:1fr }.mapa-arquitetura { min-height:570px }.ponto-arq { max-width:145px }.ponto-arq small { display:none }.ponto-web { left:4%; top:12% }.ponto-api { right:4%; top:12% }.ponto-crm { right:4%; bottom:12% }.ponto-dados { left:4%; bottom:12% }.linha-arq { width:36% }.colunas-kanban { overflow:auto }.colunas-kanban section { min-width:145px }.nucleo-arq { width:118px; height:118px } }
@media(prefers-reduced-motion:reduce) { .mockup-produto *,.mapa-arquitetura *,.kanban-mock * { animation:none }.entrada-produto { opacity:1; transform:none } }