:root{
  --navy:#0F2440; --navy-2:#1B3A63;
  --paper:#FBFAF8; --ink:#14171C;
  --muted:#5A6472;
  --line:#E2E0DA; --line-2:#D2CFC7;
  --terra:#D9663A; --terra-2:#C04E27;
  --white:#fff;
  --gut: clamp(22px, 4.6vw, 140px);
  --frame: 1.5px solid var(--ink);
  --hair: 1px solid var(--line);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3,h4{ margin:0; }
a{ color:inherit; text-decoration:none; }
.exp{ font-stretch:expanded; }

/* framed document */
.page{
  width:100%;
  margin:0 auto;
  background:var(--paper);
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  display:flex; align-items:center; justify-content:space-between;
  height:78px; padding:0 var(--gut);
  border-bottom:var(--frame);
  transition:box-shadow .18s ease;
}
.nav.is-scrolled{ box-shadow:0 8px 24px -18px rgba(15,36,64,.5); }

.brand{
  display:flex; align-items:center; gap:11px;
  font-weight:800; font-size:19px;
  letter-spacing:-.02em; font-stretch:expanded;
  white-space:nowrap;
}
.brand-mark{
  width:30px; height:30px; background:var(--navy);
  display:grid; place-items:center; flex:0 0 auto;
}
.brand-mark i{ width:12px; height:12px; background:var(--terra); display:block; }

.nav-links{
  display:flex; gap:32px;
  font-size:13.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
}
.nav-links a{ color:var(--muted); transition:color .15s; }
.nav-links a:hover{ color:var(--navy); }

@media (max-width:1120px){ .nav-links{ display:none; } }

/* ---------- generic section frame ---------- */
.sec{ border-bottom:var(--frame); }
.sec-eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--terra-2);
}
.sec-eyebrow .num{
  background:var(--terra); color:#fff;
  padding:3px 9px;
  font-weight:800; letter-spacing:.06em;
}

/* ---------- hero ---------- */
.hero{ display:grid; grid-template-columns:1fr 1fr; }

.hero-l{
  padding:clamp(48px,5vw,96px) clamp(28px,3.6vw,96px) clamp(48px,4vw,80px);
  border-right:var(--hair);
  display:flex; flex-direction:column;
}
.hero-l .eyebrow{
  display:flex; align-items:center; gap:11px;
  margin-bottom:28px;
  font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em;
  color:var(--terra-2);
}
.hero-l .eyebrow b{ background:var(--terra); color:#fff; padding:2px 9px; }

.hero h1{
  font-size:clamp(34px,3.4vw,72px);
  line-height:.97; letter-spacing:-.03em;
  font-weight:800; font-stretch:expanded;
  text-transform:uppercase; color:var(--navy);
  margin-bottom:26px;
  max-width:14ch;
}
.hero h1 .o{ color:var(--terra); }

.hero .lede{
  font-size:clamp(16px,1.15vw,22px);
  line-height:1.6;
  color:var(--muted);
  max-width:46ch;
  margin:0 0 auto;
}

.hero .lede strong{
  color:var(--terra);
  font-weight:700;
}

.hero-r{ position:relative; overflow:hidden; background:#E2DDD0; }
.hero-photo{
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

@media (max-width:960px){
  .hero{ grid-template-columns:1fr; }
  .hero-l{ border-right:none; border-bottom:var(--hair); }
  .hero-r{ min-height:340px; }
  .hero-photo{ min-height:340px; }
}

/* ---------- integration · hub de integrações ---------- */
.integ-hub{ padding:64px var(--gut) 72px; }

.integ-hub-head{ max-width:min(640px, 55%); margin:6px 0 0; }
.integ-hub-head h2{
  font-size:clamp(30px,3.4vw,72px);
  margin-top:22px; line-height:.99; letter-spacing:-.03em;
  font-weight:800; font-stretch:expanded;
  text-transform:uppercase; color:var(--navy);
}
.integ-hub-head h2 .o{ color:var(--terra); }
.integ-hub-head > p{
  color:var(--muted); font-size:clamp(16px,1.1vw,20px);
  margin-top:18px; max-width:54ch;
  text-wrap:pretty;
}

/* --- hub diagram --- */
.hub-stage{
  position:relative; width:100%; max-width:min(760px, 90%);
  margin:54px auto 0; aspect-ratio:1 / 0.82;
  --ease:cubic-bezier(.22,.68,.16,1);
  --rot:0deg;
}
.hub-wheel{
  position:absolute; inset:0;
  transform:rotate(var(--rot));
  transform-origin:50% 50%;
  cursor:grab;
  touch-action:none;
  will-change:transform;
  z-index:1;
}
.hub-stage.dragging .hub-wheel,
.hub-stage.dragging .hub-wheel *{ cursor:grabbing; }
.hub-stage.dragging .hub-node{ transition:none; }
.hub-svg{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.hub-svg line{
  stroke:var(--line-2); vector-effect:non-scaling-stroke; stroke-width:1.5;
  stroke-dasharray:var(--len, 300);
  stroke-dashoffset:var(--len, 300);
  transition:stroke-dashoffset .9s var(--ease);
}
.hub-live .hub-svg line{ stroke-dashoffset:0; }
.hub-live .hub-svg line.navy{ stroke:var(--navy); }

.hub-node{
  position:absolute;
  transform:translate(-50%, calc(-50% + 8px)) rotate(calc(var(--rot) * -1));
  opacity:0;
  transition:opacity .55s var(--ease), transform .55s var(--ease),
             background .2s ease, border-color .2s ease, box-shadow .25s ease;
  background:#fff; border:var(--frame);
  padding:12px 16px;
  display:flex; align-items:center; gap:12px;
  white-space:nowrap;
  box-shadow:0 16px 34px -24px rgba(15,36,64,.5);
  z-index:3;
}
.hub-live .hub-node{
  opacity:1;
  transform:translate(-50%,-50%) rotate(calc(var(--rot) * -1));
}
.hub-live .hub-node:hover{
  background:var(--white);
  border-color:var(--navy);
  box-shadow:0 26px 52px -22px rgba(15,36,64,.55),
             0 0 0 3px rgba(15,36,64,.08);
  z-index:10;
  transform:translate(-50%,-50%) rotate(calc(var(--rot) * -1)) scale(1.06);
}
.hub-node .ic{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line-2);
  color:var(--navy);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.hub-node:hover .ic{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.hub-node .ic svg{ width:19px; height:19px; display:block; }
.hub-node .nlab{
  font-weight:800; font-stretch:expanded;
  font-size:13.5px; text-transform:uppercase;
  letter-spacing:-.005em; color:var(--navy);
  line-height:1.1;
}
.hub-node .nsub{ font-size:12px; color:var(--muted); }

.hub-center{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.86);
  opacity:0;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  width:152px; height:152px;
  background:var(--navy); color:#fff;
  z-index:4;
  display:grid; place-content:center; text-align:center;
  box-shadow:0 26px 60px -26px rgba(15,36,64,.7);
}
.hub-live .hub-center{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  transition-delay:.1s;
}
.hub-center .ring{
  position:absolute; inset:-11px;
  border:1.5px solid var(--terra); opacity:.5;
  pointer-events:none;
}
.hub-center .ring.r2{ inset:-22px; opacity:.22; }
.hub-center .cn{
  font-weight:800; font-stretch:expanded;
  font-size:23px; letter-spacing:-.02em;
  text-transform:uppercase;
}
.hub-center .cs{
  font-size:10.5px; color:var(--terra);
  letter-spacing:.16em; text-transform:uppercase;
  margin-top:5px; font-weight:700;
}

/* --- hub logos --- */
.hub-logos{
  margin-top:56px; padding-top:34px;
  border-top:1px solid var(--line);
}
.hub-logos .lbl{
  font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:18px; font-weight:700;
  text-align:center;
}
.logo-row{
  list-style:none; padding:0; margin:0;
  display:flex; gap:14px;
  justify-content:center; flex-wrap:wrap;
}
.logo-slot{
  width:185px; height:75px;
  background:#fff;
  border:1.5px solid var(--line-2);
  display:grid; place-items:center;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.logo-slot:hover{
  border-color:var(--navy);
  transform:translateY(-2px);
  box-shadow:0 12px 24px -18px rgba(15,36,64,.4);
}
.logo-slot img{
  display:block;
  height:var(--slot-h, 28px);
  width:auto; max-width:78%;
  transform:translateX(var(--slot-x, 0));   /* nudge horizontal por logo (corrige SVGs com viewBox assimétrico) */
  filter:grayscale(1) brightness(.55) contrast(1.1);
  opacity:.75;
  transition:filter .25s ease, opacity .25s ease;
}
.logo-slot:hover img{ filter:none; opacity:1; }

/* ============================================================
   AJUSTE AQUI · tamanho e centralização da logo dentro do slot
   ------------------------------------------------------------
   O slot é 142×58.
   • --slot-h  → altura da logo (px). Mude para balancear o peso visual.
   • --slot-x  → empurra horizontalmente (use % ou px). Útil quando o
                 SVG tem espaço vazio assimétrico no viewBox e a logo
                 fica visualmente fora de centro. Positivo empurra pra
                 direita, negativo pra esquerda.
   ============================================================ */
.hub-logos .mp-amazon { --slot-h: 29px; }
.hub-logos .mp-meli   { --slot-h: 49px; }
.hub-logos .mp-shopee { --slot-h: 60px; }
.hub-logos .mp-magalu { --slot-h: 34px; }
.hub-logos .mp-tiktok { --slot-h: 29px; }   /* SVG já tem viewBox apertado (aspect 4.85:1), só altura precisa */

@media (max-width:720px){
  .integ-hub{ padding:48px var(--gut) 56px; }
  .hub-stage{
    aspect-ratio:auto; height:auto; max-width:420px;
    margin-top:36px;
    display:flex; flex-direction:column; gap:12px;
  }
  .hub-svg{ display:none; }
  .hub-wheel{
    position:static; transform:none;
    display:contents;
    cursor:auto;
  }
  .hub-node, .hub-center{ position:static; transform:none; opacity:1; }
  .hub-live .hub-node{ transform:none; }
  .hub-node{ width:100%; }
  .hub-live .hub-node:hover{ transform:none; }
  .hub-center{
    width:100%; height:auto;
    padding:24px; margin-bottom:12px;
  }
  .hub-center .ring{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hub-node{
    opacity:1 !important;
    transform:translate(-50%,-50%) rotate(calc(var(--rot) * -1)) !important;
  }
  .hub-center{
    opacity:1 !important;
    transform:translate(-50%,-50%) scale(1) !important;
  }
  .hub-svg line{ stroke-dashoffset:0 !important; }
}

/* ---------- services ---------- */
.services{ padding:54px var(--gut) 16px; }
.services .head{ margin:22px 0 30px; max-width:680px; }
.services .head h2{
  font-size:clamp(26px,2.6vw,54px);
  font-weight:800; font-stretch:expanded;
  letter-spacing:-.02em; text-transform:uppercase;
  color:var(--navy); line-height:1.03;
  margin-top:18px;
}
.services .head h2 .o{ color:var(--terra); }

.svc-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);   /* desktop: 3 colunas */
  border-top:var(--frame); border-left:var(--frame);
}

@media (max-width:1100px){
  .svc-grid{ grid-template-columns:repeat(2, 1fr); }  /* tablet: 2 colunas */
}
@media (max-width:640px){
  .svc-grid{ grid-template-columns:1fr; }             /* mobile: 1 coluna */
}


.svc{
  border-right:var(--frame); border-bottom:var(--frame);
  padding:30px 30px 34px;
  background:var(--paper);
  display:flex; flex-direction:column; gap:14px;
  min-height:300px;
  transition:background .18s;
  position:relative;
}

/* card sob o cursor: eleva, borda navy, ícone realçado */
.svc{
  transition:background .2s ease, transform .25s ease,
             box-shadow .25s ease, border-color .2s ease;
}
.svc:hover{
  background:var(--white);
  transform:translateY(-5px);
  box-shadow:0 26px 52px -28px rgba(15,36,64,.5);
  z-index:2;
}
.svc:hover .ic{
  color:#fff;
  box-shadow:0 0 0 4px rgba(15,36,64,.08);
}
.svc:hover h3{ color:var(--terra-2); }

.svc .svc-no{
  position:absolute; right:24px; top:26px;
  font-size:13px; font-weight:800;
  color:var(--line-2); letter-spacing:.05em;
  transition:color .18s;
}
.svc:hover .svc-no{ color:var(--terra); }
.svc .ic{
  width:46px; height:46px; background:var(--navy);
  display:grid; place-items:center; color:var(--terra);
}
.svc h3{
  font-size:21px; font-weight:800; font-stretch:expanded;
  text-transform:uppercase; letter-spacing:-.015em;
  color:var(--navy); line-height:1.06; max-width:220px;
}
.svc p{ font-size:14.5px; color:var(--muted); line-height:1.55; margin:0; }
.svc .more{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--navy);
}
.svc .more svg{ transition:transform .18s; }
.svc:hover .more svg{ transform:translateX(4px); }

/* ---------- analytics · análise de dados cruzados ---------- */
.analytics{ padding:64px var(--gut) 72px; background:var(--paper); }

.analytics-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; margin:6px 0 44px;
  flex-wrap:wrap;
}
.analytics-head h2{
  font-size:clamp(28px,3vw,42px);
  font-weight:800; font-stretch:expanded;
  letter-spacing:-.025em; text-transform:uppercase;
  color:var(--navy); line-height:1.02;
  margin-top:18px; max-width:580px;
}
.analytics-head h2 .o{ color:var(--terra); }
.analytics-head > p{
  font-size:15px; color:var(--muted);
  max-width:340px; text-align:right;
  text-wrap:pretty;
  align-self:flex-end;
}

/* --- crossover: cruzamento de dados (bloco visual) --- */
.crossover{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  border:var(--frame); background:var(--paper);
  box-shadow:0 30px 70px -50px rgba(15,36,64,.35);
  overflow:hidden;
}

.cx-l{
  padding:42px clamp(28px,3vw,46px) 46px;
  border-right:var(--hair);
  display:flex; flex-direction:column; gap:18px;
  justify-content:center;
}
.cx-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--terra-2);
  align-self:flex-start;
}
.cx-eyebrow b{
  width:7px; height:7px; background:var(--terra);
  display:block;
}
.cx-l h3{
  font-size:clamp(22px,2.4vw,32px);
  font-weight:800; font-stretch:expanded;
  text-transform:uppercase; letter-spacing:-.025em;
  color:var(--navy); line-height:1.02;
  max-width:18ch;
}
.cx-l h3 .o{ color:var(--terra); }
.cx-l p{
  font-size:15px; line-height:1.6;
  color:var(--muted); margin:0;
  max-width:42ch; text-wrap:pretty;
}
.cx-sources{
  list-style:none; padding:0; margin:6px 0 0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.cx-sources li{
  border:1.5px solid var(--ink);
  background:#fff;
  padding:7px 12px;
  font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--navy);
}

.cx-r{
  position:relative;
  padding:32px 36px 40px;
  background:
    linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.cx-tag-profit{
  position:absolute; top:24px; right:28px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--terra); color:#fff;
  padding:8px 14px;
  font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em;
  box-shadow:0 12px 26px -16px rgba(217,102,58,.7);
}
.cx-tag-profit b{
  width:7px; height:7px; background:#fff; display:block;
}

.cx-curves{
  width:100%; height:auto; max-height:280px;
  display:block;
  overflow:visible;
}
.cx-grid line{
  stroke:var(--line); stroke-width:1;
  stroke-dasharray:2 4;
}
.cx-line{
  fill:none;
  stroke:var(--navy); stroke-opacity:.32;
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
}
.cx-line:nth-of-type(2){ stroke-opacity:.22; }
.cx-line:nth-of-type(3){ stroke-opacity:.4; }
.cx-line:nth-of-type(4){ stroke-opacity:.18; }
.cx-profit{
  fill:none;
  stroke:var(--terra);
  stroke-width:2.6;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  filter:drop-shadow(0 4px 10px rgba(217,102,58,.35));
}
.cx-dot-end{
  fill:var(--terra);
  stroke:#fff; stroke-width:2;
}

.cx-axis{
  list-style:none; padding:0; margin:18px 0 0;
  display:flex; justify-content:space-between;
  gap:8px;
  font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted);
}
.cx-axis li{ flex:1; text-align:center; }
.cx-axis li:first-child{ text-align:left; }
.cx-axis li:last-child{ text-align:right; }

/* animação sutil: o lucro real se desenha ao entrar em vista */
@media (prefers-reduced-motion: no-preference){
  .cx-profit{
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: cxDraw 1.6s cubic-bezier(.22,.68,.16,1) .25s forwards;
  }
  .cx-line{
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: cxDraw 1.4s ease forwards;
  }
  .cx-line:nth-of-type(1){ animation-delay:.05s; }
  .cx-line:nth-of-type(2){ animation-delay:.12s; }
  .cx-line:nth-of-type(3){ animation-delay:.19s; }
  .cx-line:nth-of-type(4){ animation-delay:.26s; }
  .cx-dot-end{
    opacity:0;
    animation: cxFade .4s ease 1.65s forwards;
  }
  @keyframes cxDraw{ to{ stroke-dashoffset:0; } }
  @keyframes cxFade{ to{ opacity:1; } }
}

/* --- grid de tipos de relatório --- */
.reports-grid{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:var(--frame); border-left:var(--frame);
}
.rcard{
  border-right:var(--frame); border-bottom:var(--frame);
  padding:30px 30px 32px;
  background:var(--paper);
  display:flex; flex-direction:column; gap:14px;
  min-height:230px;
  position:relative;
  transition:background .2s ease, transform .25s ease, box-shadow .25s ease;
}
.rcard:hover{
  background:#fff;
  transform:translateY(-5px);
  box-shadow:0 26px 52px -28px rgba(15,36,64,.5);
  z-index:2;
}
.rcard:hover h3{ color:var(--terra-2); }
.rcard .rcard-no{
  position:absolute; right:24px; top:24px;
  font-size:12px; font-weight:800;
  color:var(--line-2); letter-spacing:.06em;
  transition:color .18s ease;
}
.rcard:hover .rcard-no{ color:var(--terra); }
.rcard .rcard-ic{
  width:40px; height:40px; background:transparent;
  border:1.5px solid var(--navy);
  display:grid; place-items:center; color:var(--navy);
  transition:background .18s, color .18s;
}
.rcard .rcard-ic svg{ width:20px; height:20px; }
.rcard:hover .rcard-ic{ background:var(--navy); color:var(--terra); }
.rcard h3{
  font-size:17.5px; font-weight:800; font-stretch:expanded;
  text-transform:uppercase; letter-spacing:-.01em;
  color:var(--navy); line-height:1.1;
  max-width:18ch;
}
.rcard p{
  font-size:14px; color:var(--muted);
  line-height:1.55; margin:0;
  text-wrap:pretty; max-width:34ch;
}

@media (max-width:1000px){
  .analytics-head{ flex-direction:column; align-items:flex-start; }
  .analytics-head > p{ text-align:left; align-self:flex-start; }
  .crossover{ grid-template-columns:1fr; }
  .cx-l{ border-right:none; border-bottom:var(--hair); }
  .cx-r{ min-height:300px; }
  .reports-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .analytics{ padding:48px var(--gut) 56px; }
  .reports-grid{ grid-template-columns:1fr; }
  .cx-tag-profit{ top:18px; right:18px; padding:6px 11px; font-size:10.5px; }
  .cx-l{ padding:34px 24px 32px; }
  .cx-r{ padding:28px 24px 32px; }
  .cx-axis{ font-size:9.5px; letter-spacing:.08em; }
}

/* ---------- footer ---------- */
.footer{ padding:48px var(--gut) 30px; }
.foot-top{
  display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between;
  padding-bottom:34px; border-bottom:var(--hair);
}
.foot-cols{ display:flex; flex-wrap:wrap; gap:56px; }
.foot-col h4{
  font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--navy); margin-bottom:14px;
}
.foot-col a{
  display:block; font-size:14px; color:var(--muted);
  padding:5px 0; transition:color .15s;
}
.foot-col a:hover{ color:var(--navy); }
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
  padding-top:22px;
  font-size:12.5px; color:var(--muted);
}
.foot-bottom .nekark{ display:flex; align-items:center; gap:8px; font-weight:600; }
.foot-bottom .nekark b{ width:7px; height:7px; background:var(--terra); display:block; }

/* subtle one-time entrance on the hero only */
@media (prefers-reduced-motion: no-preference){
  @keyframes riseIn{
    from{ opacity:0; transform:translateY(14px); }
    to  { opacity:1; transform:none; }
  }
  .hero-l .eyebrow{ animation:riseIn .55s ease both; }
  .hero h1{        animation:riseIn .55s ease .06s both; }
  .hero .lede{     animation:riseIn .55s ease .12s both; }
}