/* Hubyn Soft | vitrine: introdução, telas reais da Área do Cliente (dados de demonstração) e cartões flutuantes */
.header-login{min-height:46px;font-size:14.5px;padding:0 20px}
.header-login svg{width:18px;height:18px}

/* Card de login no hero (no lugar do "Veja a plataforma") */
.hero{padding-bottom:110px}
.hero-card.login{display:flex;flex-direction:column;gap:14px;bottom:104px}
.hero-card.login span:not(.hc-ico){letter-spacing:0;text-transform:none;font-size:17px;font-weight:700;line-height:1.25}
.hc-ico{position:relative;z-index:1;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#1f9f79,#0a5a44);box-shadow:0 10px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.hc-ico svg{width:22px;height:22px;color:#fff}
.hc-btn{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-style:normal;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;background:linear-gradient(180deg,#ff9d24,#ff7700);box-shadow:0 8px 18px rgba(255,119,0,.45);transition:transform .25s}
.hc-btn svg{width:16px;height:16px}
.hero-card.login:hover .hc-btn{transform:translateX(4px)}

/* Introdução: cartão branco com borda laranja discreta, na passagem do hero para o conteúdo */
.intro{position:relative;z-index:3;margin-top:-56px;padding:0 0 72px}
.intro-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding:56px;background:#fff;border:1px solid rgba(255,138,0,.28);border-top:3px solid var(--or);border-radius:28px;box-shadow:0 40px 70px -40px rgba(4,38,31,.45)}
.story .line{font-size:clamp(24px,2.8vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1.12;margin:0 0 8px;color:var(--g8);transition:opacity .6s var(--ease)}
.js .story .line{opacity:.18}
.js .story .line.on{opacity:1}
.story .answer{margin-top:24px;font-size:clamp(26px,3vw,42px);color:var(--g7)}
.does{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.does li{position:relative;padding:22px 20px;border-radius:22px;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-size:14.5px;line-height:1.5}
.does li:nth-child(even){translate:0 44px}
.js .does li.rv.in:nth-child(even){translate:0 44px}
.does b{display:block;color:var(--ink);font-size:19px;letter-spacing:-.02em;margin:14px 0 6px}
.does .blk{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;box-shadow:0 12px 22px rgba(6,66,54,.22),inset 0 2px 0 rgba(255,255,255,.4);animation:float 7s ease-in-out infinite}
.does li:nth-child(2) .blk{animation-delay:-2s}.does li:nth-child(3) .blk{animation-delay:-4s}.does li:nth-child(4) .blk{animation-delay:-5s}
.does .blk svg{width:22px;height:22px;color:#fff}
.blk.o{background:linear-gradient(145deg,#ffa51f,#ff6f00)}.blk.g{background:linear-gradient(145deg,#1f9f79,#0a5a44)}.blk.l{background:linear-gradient(145deg,#52dca8,#17936c)}




/* Moldura de navegador para as telas reais */
.frame{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 40px 70px -30px rgba(4,38,31,.45),0 8px 20px rgba(4,38,31,.08)}
.frame-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:#eef2ee;border-bottom:1px solid var(--line)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:#cdd6d1}
.frame-bar i:nth-child(1){background:#ff8a00}.frame-bar i:nth-child(2){background:#3ec18f}
.frame-bar span{margin-left:12px;font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 14px}
.frame img{width:100%;height:auto;aspect-ratio:var(--ar,1758/1200);background:#f4f6f3}

/* Painel principal: sobe da introdução, inclinado, e se endireita ao rolar */
.show{position:relative;padding:8px 0 40px}
.stage{position:relative;max-width:1040px;margin-inline:auto}
.stage .frame img{--ar:1800/1125}
.demo-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:22px}

/* Cartões flutuantes: pedaços da interface por cima das telas */
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;max-width:280px;padding:13px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 40px -16px rgba(4,38,31,.45);font-size:13px;line-height:1.35;color:var(--ink);animation:float 8s ease-in-out infinite}
.chip b{display:block;font-size:13.5px;letter-spacing:-.01em}
.chip small{display:block;color:var(--muted);font-size:12px}
.chip.tl{left:-48px;top:12%}.chip.tr{right:-44px;top:8%;animation-delay:-2s}
.chip.bl{left:-36px;bottom:10%;animation-delay:-4s}.chip.br{right:-40px;bottom:14%;animation-delay:-6s}
.dot{flex:none;width:10px;height:10px;border-radius:50%}
.dot.or{background:var(--or);box-shadow:0 0 0 5px rgba(255,138,0,.16)}
.dot.gr{background:var(--g4);box-shadow:0 0 0 5px rgba(62,193,143,.18)}
.chip-msg{flex-direction:column;align-items:flex-start;gap:4px;background:#e3f7ec;border-color:#c9ecd9;max-width:240px}
.chip-msg b{color:var(--g7);font-size:12px}
.chip-kpi{flex-direction:column;align-items:flex-start;gap:2px;background:var(--g8);border-color:var(--g8);color:#cfe4d9;min-width:190px}
.chip-kpi small{color:#9cc9b6}
.chip-kpi b{font-size:30px;color:#fff;letter-spacing:-.03em;line-height:1.1}
.chip-kpi span{font-size:12px}
.chip-kpi .proj{font-style:normal;font-size:9.5px;color:#8fb8a6;margin-top:4px}
.ava{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e3f6ee;color:var(--g7);font-style:normal;font-weight:800;font-size:12px}
.chip-deal em{display:inline-block;margin-top:6px;font-style:normal;font-size:11.5px;font-weight:700;color:#a95300;background:#fff1df;border-radius:999px;padding:2px 9px}
.chip.prog{flex-wrap:wrap}
.bar{display:block;width:100%;height:6px;border-radius:6px;background:#e3e9e4;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#17936c,#3ec18f)}

@media (prefers-reduced-motion:no-preference){
  .tilt{transform:perspective(1600px) rotateX(calc((1 - var(--q,1)) * 14deg)) rotateY(calc(var(--dir,0) * (1 - var(--q,1)) * 10deg)) scale(calc(.94 + var(--q,1) * .06));transform-origin:50% 0;will-change:transform}
  .stage .chip,.prod-art .chip{transform:translate3d(0,calc((.5 - var(--p,.5)) * var(--s,40) * 1.6px),0)}
}
@media (prefers-reduced-motion:reduce){.chip,.does .blk,.mq-track{animation:none}}

/* Faixa em movimento com as capacidades */
.marquee{overflow:hidden;background:var(--g8);color:#fff;padding:18px 0;margin-top:40px}
.mq-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.mq-track span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font-size:clamp(18px,2vw,24px);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.mq-track span::after{content:"";width:14px;height:14px;border-radius:30%;background:linear-gradient(145deg,#ffa51f,#ff6f00)}
.mq-track span:nth-child(even)::after{background:linear-gradient(145deg,#52dca8,#17936c)}
@keyframes mq{to{transform:translateX(-50%)}}

main{overflow-x:clip}

/* Produtos */
.prods{display:grid;gap:120px;margin-top:24px}
.prod{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.prod:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.prod:nth-child(even) .prod-copy{order:2}
.prod-copy h3{font-size:clamp(26px,2.8vw,36px);margin-bottom:16px;text-wrap:balance}
.prod-copy>p{color:var(--muted);max-width:480px}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:999px;background:#e3f6ee;color:var(--g7);margin-bottom:16px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g4)}
.niche{display:inline-flex;margin:0 0 16px 8px;font-size:12px;font-weight:600;color:var(--muted);border:1px dashed #c9d6cf;border-radius:999px;padding:4px 11px}
.status.meta{background:#fff1df;color:#a95300}.status.meta::before{background:var(--or)}
.ticks{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:30px;font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--g4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat}
.prod-art{position:relative}
.prod-art::before{content:"";position:absolute;z-index:-1;width:120px;height:120px;border-radius:28%;background:linear-gradient(145deg,#52dca8,#17936c);opacity:.22;right:-36px;top:-40px}
.prod:nth-child(even) .prod-art::before{right:auto;left:-36px;background:linear-gradient(145deg,#ffa51f,#ff6f00);opacity:.2}
.prod-art .frame.small{position:absolute;width:52%;right:-6%;bottom:-12%;z-index:2;box-shadow:0 30px 50px -20px rgba(4,38,31,.55)}

.brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 36px;margin-top:8px}
.brands img{height:40px;width:auto}
.brands p{width:100%;text-align:center;color:var(--muted);font-size:14px;margin-bottom:6px}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 18px 40px -28px rgba(6,66,54,.3)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#ffa51f,#ff6f00);color:#fff;font-weight:800;margin-bottom:18px}
.steps h3{font-size:20px;margin-bottom:8px;letter-spacing:-.02em}
.steps p{color:var(--muted);font-size:15px}

@media (max-width:1180px){.chip.tl,.chip.bl{left:-12px}.chip.tr,.chip.br{right:-12px}}
@media (max-width:960px){
  .header-login{display:none}
  .intro{margin-top:-40px;padding-bottom:56px}
  .intro-in{padding:32px 24px;gap:36px}
  .intro-in{grid-template-columns:1fr;gap:44px}

  .prods{gap:80px}
  .prod,.prod:nth-child(even){grid-template-columns:1fr;gap:28px}
  .prod:nth-child(even) .prod-copy{order:0}
  .prod-art .frame.small{display:none}
  .steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-card.login{display:flex;position:relative;right:auto;bottom:auto;width:auto;margin:32px 24px 0;flex-direction:row;align-items:center;flex-wrap:wrap}
  .hero-card.login span:not(.hc-ico){flex:1;font-size:16px}
  .hero-card.login .hc-blk{display:none}
}
@media (max-width:560px){
  .frame-bar{height:30px;padding:0 12px}.frame-bar span{display:none}
  .does{grid-template-columns:1fr}
  .does li:nth-child(even),.js .does li.rv.in:nth-child(even){translate:0 0}
  .chip{max-width:200px;padding:9px 12px;font-size:12px}
  .chip.tl,.chip.bl{left:-6px}.chip.tr,.chip.br{right:-6px}
  .chip.tl{top:-22px}.chip.tr{top:-26px}.chip.bl{bottom:-26px}.chip.br{bottom:-22px}
  .chip-kpi b{font-size:22px}.chip-kpi{min-width:0}
  .stage .chip.bl,.stage .chip.tr{display:none}
  .brands img{height:32px}
}

/* Política de privacidade */
.priv-hero{background:linear-gradient(115deg,#03201a,#0a5a46);color:#fff;padding:150px 0 96px}
.priv-hero h1{font-size:clamp(34px,4.4vw,56px);margin-bottom:14px}
.priv-hero p{color:#cfe4d9;max-width:620px}
.priv{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;margin-top:-56px;padding-bottom:96px;position:relative}
.priv-toc{position:sticky;top:96px;margin-top:80px;font-size:14px}
.priv-toc summary{font-weight:700;color:var(--g8);cursor:pointer;list-style:none;margin-bottom:10px}
.priv-toc summary::-webkit-details-marker{display:none}
.priv-toc ol{margin:0;padding-left:28px;display:grid;gap:8px;color:var(--muted)}
.priv-toc a:hover{color:var(--or)}
.priv-card{background:#fff;border:1px solid rgba(255,138,0,.28);border-top:3px solid var(--or);border-radius:28px;padding:48px 56px;box-shadow:0 40px 70px -40px rgba(4,38,31,.45);max-width:780px}
.priv-card section+section{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.priv-card section{scroll-margin-top:100px}
.priv-card h2{font-size:24px;color:var(--g8);margin-bottom:14px;letter-spacing:-.025em}
.priv-card p,.priv-card li{color:#33433e;font-size:16px;line-height:1.65}
.priv-card p+p{margin-top:12px}
.priv-card ul{margin:0;padding-left:20px;display:grid;gap:8px}
.priv-card a{color:var(--g7);text-decoration:underline;text-underline-offset:3px}
.priv-card table{width:100%;border-collapse:collapse;font-size:15px}
.priv-card th{text-align:left;color:var(--g8);border-bottom:2px solid var(--line);padding:10px 12px 10px 0}
.priv-card td{border-bottom:1px solid var(--line);padding:12px 12px 12px 0;vertical-align:top;color:#33433e}
@media (max-width:960px){
  .priv{grid-template-columns:1fr;gap:20px;margin-top:-40px}
  .priv-toc{position:static;margin-top:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;order:0;z-index:1}
  .priv-card{padding:32px 22px;max-width:none}
  .priv-card table,.priv-card tbody,.priv-card tr,.priv-card td{display:block}
  .priv-card thead{display:none}
  .priv-card tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .priv-card td{border:0;padding:2px 0}
  .priv-card td+td{color:var(--g7);font-weight:600;font-size:14px}
}