/* ============================================================
   HUBIMOBI — sistema visual v5
   Paleta unica: laranja #F0901C (hover #FFA83E) · preto #0B0B0C
   (superficies #131316/#1C1C20/#333338) · branco #FFFFFF
   (apoios #F5F5F6/#E3E3E6) · textos #101013/#45454C/#5F5F66
   Regra: o laranja nunca muda de tom. Onde nao passa contraste
   como texto sobre branco, o texto e preto e o laranja entra
   como sublinhado, borda, botao ou fundo.
   Hexagono so no chip numerado dos servicos (simbolo do logo).
   ============================================================ */

:root{--on-laranja:#171004}
section[id]{scroll-margin-top:var(--nav-h)}
.js .reveal{opacity:0;transform:translateY(28px)}
.js .ln>span{display:block;transform:translateY(105%)}

/* logo: clara por padrão (fundo claro); escura no menu aberto e rodapé */
.brand .brand__logo--dark{display:none}
.brand .brand__logo--light{display:block}
body.menu-open .brand__logo--light{display:none !important}
body.menu-open .brand__logo--dark{display:block !important}
.brand__mark b{color:var(--signal-ink)}
body.menu-open .brand__mark{color:var(--dk-hi)}
body.menu-open .brand__mark b{color:var(--signal)}


/* ---------- HERO (claro) ---------- */
.hero{position:relative;background:var(--paper-0);overflow:hidden;
  padding:calc(var(--nav-h) + var(--sp-7)) 0 var(--sp-7)}
.hero__grid{display:grid;gap:var(--sp-7);align-items:center}
.hero__kicker{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-5)}
.hero__kicker::before{content:"";width:2.5rem;height:3px;background:var(--signal)}
.hero h1{font-size:clamp(2.8rem,6.8vw,5.8rem);max-width:13ch;padding-bottom:.08em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__lead{margin-top:var(--sp-5);font-size:var(--step-1);line-height:1.5;color:var(--text-mid);max-width:30rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.hero__facts{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:var(--sp-5)}
.hero__facts li{font:500 var(--step--1)/1.5 var(--mono);color:var(--text-lo);display:flex;gap:.6rem}
.hero__facts li::before{content:"/";color:var(--signal);font-weight:700}
.hero__fig{position:relative;justify-self:center;width:min(100%,23rem);margin:1.5rem 1.5rem 1.5rem 0}
.hero__fig::before{content:"";position:absolute;inset:1.4rem -1.4rem -1.4rem 1.4rem;background:var(--signal);border-radius:26px}
@media (min-width:980px){.hero__grid{grid-template-columns:1.15fr 1fr}}

/* telefone / conversa */
.device{position:relative;border:1px solid var(--ink-3);border-radius:24px;background:var(--ink-1);overflow:hidden;
  box-shadow:0 34px 70px -30px rgba(11,11,12,.5)}
.device__bar{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--ink-3);background:var(--ink-2)}
.device__avatar{width:2.1rem;height:2.1rem;border-radius:8px;background:var(--signal);color:var(--on-laranja);display:grid;place-items:center;font:800 .8rem/1 var(--sans)}
.device__who{font:600 .9rem/1.2 var(--sans);color:var(--dk-hi)}
.device__st{display:flex;align-items:center;gap:.4rem;font:400 .72rem/1.2 var(--mono);color:var(--dk-mid);margin-top:.15rem}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);display:inline-block}
.chat{display:flex;flex-direction:column;gap:.6rem;padding:1.1rem}
.msg{max-width:84%;padding:.65rem .85rem;border-radius:14px;font-size:.9rem;line-height:1.4;color:var(--dk-hi)}
.msg small{display:block;font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem;opacity:.75}
.msg--in{align-self:flex-start;background:var(--ink-3);border-bottom-left-radius:4px}
.msg--ai{align-self:flex-end;background:var(--ink-2);border:1px solid var(--signal);border-bottom-right-radius:4px}
.msg--ai small{color:var(--signal)}
.msg--sys{align-self:center;max-width:100%;background:transparent;border:1px dashed var(--ink-3);color:var(--dk-mid);font:400 .74rem/1.4 var(--mono);text-align:center;border-radius:8px}
.crm{margin:0 1.1rem 1.1rem;padding:.85rem 1rem;border:1px solid var(--ink-3);border-radius:12px;background:var(--ink-0)}
.crm__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.crm__name{font:600 .9rem/1.2 var(--sans);color:var(--dk-hi)}
.crm__tag{font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.crm__stages{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;margin-top:.75rem}
.crm__stages i{height:3px;border-radius:2px;background:var(--ink-3)}
.crm__stages i:nth-child(-n+3){background:var(--signal)}
.crm__lbl{display:flex;justify-content:space-between;margin-top:.5rem;font:400 .66rem/1 var(--mono);color:var(--dk-lo)}

/* ---------- FAIXA LARANJA DE NÚMEROS ---------- */
.nums{background:var(--ink-0);color:var(--dk-hi);padding:var(--sp-7) 0}
.nums__grid{display:grid;gap:var(--sp-5) var(--sp-4);grid-template-columns:repeat(2,1fr)}
.nums__grid>div{border-left:3px solid var(--signal);padding-left:var(--sp-3)}
.nums dt{font:800 clamp(1.7rem,3.4vw,2.6rem)/1 var(--sans);letter-spacing:-.035em;color:var(--signal)}
.nums dd{margin-top:.45rem;font:500 var(--step--1)/1.45 var(--mono);color:var(--dk-mid)}
.nums__nota{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--ink-3);
  font:400 .78rem/1.6 var(--mono);color:var(--dk-lo);max-width:46rem}
@media (min-width:980px){.nums__grid{grid-template-columns:repeat(5,1fr)}}

/* ---------- blocos ---------- */
.sec{padding:var(--sp-8) 0}
.sec--alt{background:var(--paper-1)}
.sec__head{max-width:46rem}
.sec__head h2{margin-top:var(--sp-3);font-size:var(--step-3);max-width:18ch}
.dark .sec__head h2 em{color:var(--signal)}
.sec__head p{margin-top:var(--sp-4);color:var(--text-mid);font-size:var(--step-1);line-height:1.55;max-width:38rem}
.dark .sec__head p{color:var(--dk-mid)}
.eyebrow{font:700 .78rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text-lo);margin-bottom:var(--sp-2)}
.dark .eyebrow{color:var(--dk-lo)}
.rule{width:2.5rem;height:3px;background:var(--signal);margin-bottom:var(--sp-3)}

/* ---------- CASES: cartões escuros sobre claro ---------- */
.cases{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.cases>div{position:relative;overflow:hidden;padding:var(--sp-5);border-radius:16px;background:var(--ink-1);color:var(--dk-hi);
  box-shadow:0 20px 44px -26px rgba(11,11,12,.45)}
.cases .de{font:500 var(--step--1)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--dk-lo)}
.cases .num{font:800 clamp(1.9rem,3.2vw,2.5rem)/1.05 var(--sans);letter-spacing:-.035em;margin-top:var(--sp-3)}
.cases .num b{color:var(--signal)}
.cases .autor{margin-top:var(--sp-3);font:700 var(--step-0)/1.3 var(--sans);color:var(--dk-hi)}
.cases p{margin-top:.35rem;color:var(--dk-mid);font-size:var(--step--1);line-height:1.6}
.cases__nota{margin-top:var(--sp-5);font:400 .78rem/1.6 var(--mono);color:var(--text-lo);max-width:46rem}
@media (min-width:860px){.cases{grid-template-columns:repeat(3,1fr)}}

/* ---------- SERVIÇOS: cartões com chip hexagonal ---------- */
.serv{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.serv li{background:#fff;border:1px solid transparent;border-radius:16px;padding:var(--sp-5);
  box-shadow:0 1px 2px rgba(11,11,12,.05),0 10px 28px -18px rgba(11,11,12,.22);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s}
.serv li:hover{transform:translateY(-3px);border-color:var(--signal);box-shadow:0 22px 44px -22px rgba(11,11,12,.3)}
.hx{position:relative;width:3rem;height:3.4rem;margin-bottom:var(--sp-4)}
.hx svg{position:absolute;inset:0;width:100%;height:100%}
.hx b{position:absolute;inset:0;display:grid;place-items:center;font:800 .95rem/1 var(--sans);color:var(--text-hi)}
.serv h3{font-size:var(--step-1);letter-spacing:-.015em}
.serv p{margin-top:var(--sp-2);color:var(--text-mid);font-size:var(--step--1);line-height:1.65}
@media (min-width:760px){.serv{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.serv{grid-template-columns:repeat(3,1fr)}}

/* ---------- IA (preto) ---------- */
.ia{position:relative;overflow:hidden}
.ia__grid{display:grid;gap:var(--sp-5);margin-top:var(--sp-6)}
.ia__card{padding:var(--sp-5);border:1px solid var(--ink-3);border-radius:14px;background:var(--ink-1)}
.ia__card h3{font-size:var(--step-1);color:var(--dk-hi)}
.ia__card ul{margin-top:var(--sp-3)}
.ia__card li{position:relative;padding-left:1.5rem;margin:.6rem 0;color:var(--dk-mid);font-size:var(--step--1);line-height:1.6}
.ia__card li::before{content:"";position:absolute;left:0;top:.42em;width:.6rem;height:.68rem;
  background:var(--signal);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.ia__txt p{color:var(--dk-mid);max-width:36rem}
.ia__txt p+p{margin-top:var(--sp-4)}
@media (min-width:900px){.ia__grid{grid-template-columns:1fr 1fr;column-gap:var(--sp-7);align-items:start}}

/* ---------- PROCESSO ---------- */
.proc{display:grid;gap:var(--sp-5);margin-top:var(--sp-6);counter-reset:p}
.proc li{counter-increment:p;border-top:3px solid var(--signal);padding-top:var(--sp-4);position:relative}
.proc li::before{content:counter(p,decimal-leading-zero);font:800 clamp(1.6rem,2.4vw,2.1rem)/1 var(--sans);
  letter-spacing:-.03em;color:var(--text-hi);display:block}
.proc .et{display:block;font:500 var(--step--1)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text-lo);margin:.7rem 0 .25rem}
.proc h3{font-size:var(--step-1);letter-spacing:-.015em}
.proc p{margin-top:var(--sp-2);color:var(--text-mid);font-size:var(--step--1);line-height:1.6}
@media (min-width:760px){.proc{grid-template-columns:1fr 1fr;column-gap:var(--sp-6)}}
@media (min-width:1080px){.proc{grid-template-columns:repeat(5,1fr);column-gap:var(--sp-4)}}

/* ---------- PARA QUEM ---------- */
.pub{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.pub>div{background:#fff;border:0;border-top:4px solid var(--signal);border-radius:16px;padding:var(--sp-5);
  box-shadow:0 1px 2px rgba(11,11,12,.05),0 10px 28px -18px rgba(11,11,12,.22)}
.pub h3{font-size:var(--step-1)}
.pub h3 span{display:block;font:500 var(--step--1)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text-lo);margin-bottom:var(--sp-2)}
.pub p{margin-top:var(--sp-3);color:var(--text-mid);font-size:var(--step--1);line-height:1.65}
@media (min-width:860px){.pub{grid-template-columns:repeat(3,1fr)}}

/* ---------- ECOSSISTEMA (preto) ---------- */
.duo{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.duo>div{padding:var(--sp-5);border:1px solid var(--ink-3);border-radius:14px;background:var(--ink-1)}
.duo .tag{font:500 var(--step--1)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--signal)}
.duo h3{font-size:var(--step-2);letter-spacing:-.025em;margin-top:var(--sp-2);color:var(--dk-hi)}
.duo p{margin-top:var(--sp-3);color:var(--dk-mid)}
.duo .btn{margin-top:var(--sp-4)}
@media (min-width:860px){.duo{grid-template-columns:1fr 1fr;gap:var(--sp-5)}}

/* ---------- EMPRESA ---------- */
.about{background:var(--paper-1);padding:var(--sp-8) 0}
.about__grid{display:grid;gap:var(--sp-6)}
.about h2{font-size:var(--step-3);max-width:14ch}
.about__lead{margin-top:var(--sp-4);color:var(--text-mid)}
.facts{display:grid;gap:0}
.facts div{display:grid;grid-template-columns:1fr;gap:.25rem;padding:var(--sp-3) 0;border-top:1px solid var(--paper-2)}
.facts div:last-child{border-bottom:1px solid var(--paper-2)}
.facts dt{font:500 var(--step--1)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text-lo)}
.facts dd{font-size:var(--step-0)}
.facts a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.facts a:hover{text-decoration-color:currentColor}
@media (min-width:700px){.facts div{grid-template-columns:11rem 1fr;gap:var(--sp-3)}}
@media (min-width:900px){.about__grid{grid-template-columns:5fr 7fr;column-gap:var(--sp-7)}}

/* ---------- CTA FINAL (laranja) ---------- */
.fim{background:var(--signal);color:var(--on-laranja);padding:var(--sp-8) 0;position:relative;overflow:hidden}
.fim h2{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:14ch;letter-spacing:-.045em;line-height:.98}
.fim__row{display:grid;gap:var(--sp-5);margin-top:var(--sp-6);align-items:end}
.fim__cta{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.fim .btn{--bg:var(--ink-0);--fg:#fff}
.fim .btn:hover{--bg:var(--ink-2)}
.fim .btn--ghost{--bg:transparent;--fg:var(--on-laranja);--bd:color-mix(in srgb,var(--on-laranja) 45%,transparent)}
.fim .btn--ghost:hover{--bg:color-mix(in srgb,var(--on-laranja) 10%,transparent);--bd:var(--on-laranja)}
.fim address{font-style:normal;font-size:var(--step--1);line-height:1.8;color:var(--on-laranja)}
.fim address a{color:var(--on-laranja)}
@media (min-width:900px){.fim__row{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){.js .ln>span{transform:none !important}}

/* v7 — hero central, chips flutuantes, painel largo, feature rows */
.hero--c{min-height:0;padding:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem)) 0 clamp(3rem,6vw,5rem)}
.hero__wrapC{position:relative}
.hero__center{text-align:center;max-width:62rem;margin:0 auto}
.hero--c .hero__kicker{justify-content:center}
.hero--c h1{margin:0 auto;font-size:clamp(2.6rem,6vw,5.2rem);max-width:16ch;padding-bottom:.08em}
.hero--c .hero__lead{margin:var(--sp-4) auto 0;max-width:52ch}
.hero--c .hero__cta{justify-content:center}
.fchip{position:absolute;z-index:2;display:flex;flex-direction:column;gap:.15rem;background:#fff;border:1px solid var(--paper-2);
  border-radius:14px;padding:.85rem 1.1rem;box-shadow:0 14px 34px -18px rgba(11,11,12,.28);
  animation:flut 5.5s ease-in-out infinite alternate}
.fchip b{font:800 1.25rem/1 var(--sans);letter-spacing:-.02em;color:var(--text-hi)}
.fchip b::after{content:"";display:block;width:1.4rem;height:3px;background:var(--signal);margin-top:.35rem}
.fchip span{font:500 .72rem/1.3 var(--mono);color:var(--text-lo)}
.fchip--a{left:0;top:7.5rem;animation-delay:0s}
.fchip--b{right:0;top:4.5rem;animation-delay:-1.8s}
.fchip--c{right:2rem;top:17rem;animation-delay:-3.4s}
@keyframes flut{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){.fchip{animation:none}}
@media (max-width:1180px){.fchip{position:static;animation:none;flex-direction:row;align-items:baseline;gap:.6rem;padding:.6rem .9rem}
  .fchip b::after{display:none}
  .hero__wrapC{display:flex;flex-direction:column}
  .hero__center{order:-1}
  .fchips-row{display:contents}}
.dash{margin:clamp(2.5rem,5vw,4rem) auto 0;max-width:62rem;background:var(--ink-1);border:1px solid var(--ink-3);
  border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(11,11,12,.55)}
.dash__bar{display:flex;align-items:center;gap:.8rem;padding:1rem 1.25rem;background:var(--ink-2);border-bottom:1px solid var(--ink-3)}
.dash__tag{margin-left:auto;font:700 .68rem/1 var(--mono);letter-spacing:.14em;color:var(--signal);
  border:1px solid var(--signal);border-radius:999px;padding:.4rem .7rem}
.dash__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:0}
.dash__grid .chat{padding:1.25rem;border-right:1px solid var(--ink-3)}
.dash__side{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.dash__t{font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dk-lo);margin-bottom:.35rem}
.frow{display:grid;grid-template-columns:7.5rem 1fr;align-items:center;gap:.8rem}
.frow span{font:500 .74rem/1.3 var(--mono);color:var(--dk-mid)}
.frow i{display:block;height:.55rem;border-radius:999px;background:var(--ink-3);position:relative;overflow:hidden}
.frow i::after{content:"";position:absolute;inset:0;width:var(--w,50%);background:var(--signal);border-radius:999px}
.dash__side .crm{margin-top:auto}
@media (max-width:860px){.dash__grid{grid-template-columns:1fr}.dash__grid .chat{border-right:0;border-bottom:1px solid var(--ink-3)}}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:clamp(2rem,4vw,3rem);padding:0;list-style:none}
.pills a{display:flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--paper-2);border-radius:999px;
  padding:.65rem 1.1rem;font:600 .85rem/1 var(--sans);color:var(--text-hi);text-decoration:none;
  transition:border-color .2s,transform .2s;box-shadow:0 1px 2px rgba(11,11,12,.05)}
.pills a::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--signal)}
.pills a:hover{border-color:var(--signal);transform:translateY(-2px)}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
.feat__txt .hx{width:3.2rem;height:3.65rem;margin-bottom:var(--sp-4)}
.sec__head + .feat{margin-top:clamp(2.5rem,5vw,4rem)}
.feat__txt h3{font-size:var(--step-2);letter-spacing:-.02em;line-height:1.12;max-width:18ch}
.feat__txt>p{margin-top:var(--sp-3);color:var(--text-mid);max-width:46ch}
.feat__txt .btn{margin-top:var(--sp-4)}
.checks{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:flex;flex-direction:column;gap:.7rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500;color:var(--text-hi)}
.checks li::before{content:"✓";flex:0 0 auto;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--signal);color:var(--on-signal);font:800 .8rem/1.35rem var(--sans);text-align:center;margin-top:.1rem}
.feat--rev .feat__txt{order:2}
.feat--rev .feat__fig{order:1}
.mock{background:var(--ink-1);border:1px solid var(--ink-3);border-radius:18px;padding:1.4rem;
  box-shadow:0 28px 60px -32px rgba(11,11,12,.5);display:flex;flex-direction:column;gap:.9rem}
.mock .chat{padding:0}
.bars{display:flex;align-items:flex-end;gap:.55rem;height:6.5rem;padding-bottom:.25rem;border-bottom:1px solid var(--ink-3)}
.bars i{flex:1;background:var(--signal);border-radius:4px 4px 0 0;height:var(--h,50%)}
.bars i:nth-child(odd){background:var(--ink-3)}
.kan{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.kan>div{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;padding:.8rem;display:flex;flex-direction:column;gap:.55rem;min-height:9.5rem}
.kan b{font:600 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dk-lo)}
.kan i{display:block;height:1.9rem;border-radius:7px;background:var(--ink-3)}
.kan .kan__hot{background:var(--ink-3);border:1px solid var(--signal);position:relative}
.kan .kan__hot::after{content:"VISITA";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font:700 .55rem/1 var(--mono);letter-spacing:.1em;color:var(--signal)}
@media (max-width:860px){.feat{grid-template-columns:1fr}.feat--rev .feat__txt{order:0}.feat--rev .feat__fig{order:1}}

/* v8 — bloco final centralizado */
.fim__c{text-align:center;max-width:52rem;margin:0 auto}
.fim__kicker{font:700 .78rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--on-signal);opacity:.75;margin-bottom:var(--sp-3)}
.fim h2{margin:0 auto;max-width:14ch}
.fim h2 em{font-style:normal;box-shadow:inset 0 -.14em 0 0 var(--ink-0)}
.fim__sub{margin:var(--sp-4) auto 0;max-width:44ch;color:var(--on-signal);font-size:var(--step-0);font-weight:500}
.fim .fim__cta{justify-content:center;margin-top:var(--sp-5)}
.fim__row{display:block}
.fim address{display:none}
.fim__ig{margin-top:var(--sp-5)}
.fim__ig a{font:600 .9rem/1 var(--mono);color:var(--on-signal);text-decoration:none;border-bottom:2px solid var(--ink-0)}