/* ---------- utility ---------- */
.eyebrow{
  display:flex; align-items:center; width:fit-content; margin:0 auto 16px;
  padding:8px 18px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-2);
  font-family:var(--font-switzer); font-size:14px; font-weight:500;
  letter-spacing:-0.01em; color:var(--muted-sm); text-transform:none;
}
.eyebrow--pill{}
.section-title{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.75rem,4.2vw,3rem);
  line-height:1.2; letter-spacing:-.02em; color:var(--text);
}
.section-title--gradient{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.03em;
  background:linear-gradient(180deg, var(--title-grad-a) 0%, var(--title-grad-b) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* título editorial de duas cores — mesmo peso, só a cor muda (fiel ao padrão auditado) */
.section-title__muted, .section-title__strong{
  display:block; font-weight:500; letter-spacing:-.03em; line-height:1.0;
  font-size:clamp(1.8rem, 4vw, 3rem);
}
.section-title__muted{ color:var(--text-faint); }
.section-title__strong{ color:var(--text); }
.section-title--inline .section-title__muted, .section-title--inline .section-title__strong{ display:inline; }
#sites .section-title__muted, #sites .section-title__strong,
#automacoes .section-title__muted, #automacoes .section-title__strong,
#faq .section-title__muted, #faq .section-title__strong,
#sobre .section-title__muted, #sobre .section-title__strong,
#contato .section-title__muted, #contato .section-title__strong{
  font-weight:600; letter-spacing:-.04em; line-height:1.1; font-size:clamp(1.6rem,3.6vw,2.6rem);
}
.section-sub{
  font-size:clamp(.92rem,1.6vw,1.05rem); color:var(--text-dim); margin-top:16px;
  font-weight:500; line-height:1.4; letter-spacing:-.02em;
  max-width:60ch;
}
.section-head{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter) 56px; }
#sites .section-head{ padding-bottom:24px; }
.section-head--center{ text-align:center; }
.section-head--center .section-sub{ margin-left:auto; margin-right:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:1rem; letter-spacing:-.01em;
  padding:12px 16px; border-radius:var(--r-btn); cursor:pointer; transition:all .3s var(--ease);
  white-space:nowrap;
}
.btn--solid{ background:var(--accent); color:#fff; }
.btn--solid:hover{ background:var(--accent-deep); color:#fff; transform:translateY(-1px); }
.btn--outline{ border:1px solid var(--border-strong); color:var(--text); }
.btn--outline:hover{ border-color:var(--text-dim); transform:translateY(-1px); }
.btn--ghost{ border:1px solid var(--border); color:var(--text-dim); padding:11px 22px; font-size:.82rem; }
.btn--ghost:hover{ color:var(--text); border-color:var(--border-strong); }
.btn--sm{ padding:11px 20px; font-size:.82rem; }
.btn--accent{ border:1px solid var(--accent-line); color:var(--accent); background:transparent; padding:10px 20px; font-size:.82rem; }
.btn--dark{ background:#141416; color:#fff; border:1px solid rgba(255,255,255,.1); }
.btn--dark:hover{ background:#1c1c1f; border-color:rgba(255,255,255,.16); transform:translateY(-2px); }
.btn--accent:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; color:var(--accent);
  transition:gap .25s var(--ease);
}
.link-arrow svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.link-arrow:hover{ gap:12px; }

.nav__cta-wrap{ position:relative; }
.nav__cta-menu{
  position:absolute; top:calc(100% + 12px); right:0; min-width:220px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-card); padding:8px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  box-shadow:0 24px 48px -16px var(--shadow-strong);
  z-index:600;
}
.nav__cta-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__cta-option{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:6px;
  font-size:.88rem; font-weight:500; color:var(--text); transition:background .2s;
}
.nav__cta-option:hover{ background:var(--surface-2); }
.nav__cta-icon{ width:18px; height:18px; flex-shrink:0; color:var(--accent); }
.nav__cta-icon--wpp{ color:#25D366; }

.nav__mobile-cta{ display:flex; flex-direction:column; gap:12px; margin:18px var(--gutter); }

/* ---------- scroll reveal ---------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal-delay="1"]{ transition-delay:.1s; }
[data-reveal-delay="2"]{ transition-delay:.2s; }
[data-reveal-delay="3"]{ transition-delay:.32s; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:500;
  background:transparent;
  padding:10px var(--gutter);
  box-sizing:border-box;
  pointer-events:none;
}
.nav__inner{
  pointer-events:auto;
  position:relative;
  width:fit-content; max-width:calc(100% - 2 * var(--gutter)); margin:0 auto; height:46px;
  padding:0 8px 0 18px;
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:flex-start; gap:28px;
  border-radius:999px; border:1px solid rgba(0,0,0,.1);
  background:#F4F1EB;
}
.nav__logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav__mark{ height:32px; width:auto; display:block; flex-shrink:0; object-fit:contain; }
.nav__divider{ width:1px; height:22px; background:var(--border-strong); flex-shrink:0; }
.nav__inner .nav__divider{ background:rgba(0,0,0,.14); }
.nav__logo-img{ height:27px; width:auto; display:block; flex-shrink:0; object-fit:contain; }
.nav__links{
  display:none; gap:2px; font-size:.78rem; color:rgba(0,0,0,.65); font-weight:500; flex-shrink:0;
}
.nav.nav--open .nav__links{ display:flex; animation:navLinksIn .35s var(--ease); }
@keyframes navLinksIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.nav__links a{ position:relative; transition:color .3s, background .3s; padding:8px 12px; border-radius:999px; white-space:nowrap; }
.nav__links a:hover{ color:#000; background:rgba(0,0,0,.05); }
.nav__links a.is-active{ color:#000; background:rgba(0,0,0,.06); }
.nav__cta{ flex-shrink:0; border-radius:999px; height:34px; padding:0 14px; font-size:.78rem; }
.nav__toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:44px; height:44px; margin-right:-10px; cursor:pointer;
}
.nav__toggle span{ display:block; width:22px; height:1px; background:#000; transition:transform .3s, opacity .3s; }
.nav__mobile{
  display:none; flex-direction:column; gap:0; background:var(--bg); border-top:1px solid var(--border);
  overflow:hidden; max-height:0; transition:max-height .4s var(--ease);
  position:fixed; top:var(--nav-h); left:0; width:100%; z-index:499;
  box-shadow:0 24px 40px -20px var(--shadow);
}
.nav__mobile.open{ max-height:calc(100svh - var(--nav-h)); overflow-y:auto; }
.nav__mobile a{ padding:18px var(--gutter); border-bottom:1px solid var(--border); font-size:1rem; color:var(--text-dim); }
.nav__mobile a.is-active{ color:var(--text); font-weight:600; }

@media (max-width:1024px){
  .nav__links, .nav__cta-wrap{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__mobile{ display:flex; }
}

/* ============================================================
   HERO (Início) — capa
   ============================================================ */
.hero{
  position:relative; background:var(--bg); padding-top:var(--nav-h);
}
.hero__inner{
  position:relative; z-index:1; overflow:hidden;
  width:100%; max-width:var(--container); margin:0 auto;
  min-height:clamp(520px, 55vw, 722px);
  padding:64px 24px;
  box-sizing:border-box;
  display:flex; align-items:center;
}
@media (min-width:810px){ .hero__inner{ padding:64px 32px; } }
@media (min-width:1440px){ .hero__inner{ padding:64px; } }
@media (min-width:1698px){ .hero__inner{ padding:64px 104px; } }
.hero__content{ position:relative; z-index:2; text-align:left; max-width:536px; display:flex; flex-direction:column; }
.hero__badge{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px 12px 16px;
  border-radius:999px; border:1px solid var(--border-strong); background:var(--surface);
  font-family:var(--font-switzer); font-weight:500; font-size:14px; color:var(--text);
  transition:background-color .15s;
}
.hero__badge-dot{ width:16px; height:16px; border-radius:50%; background:var(--text); flex-shrink:0; }
.hero__title{
  position:relative; z-index:1; margin-top:0; font-family:var(--font-switzer); font-weight:600;
  font-size:clamp(26px, 3vw + 14px, 44px); line-height:1.05; letter-spacing:-0.05em;
  max-width:536px;
}
.hero__title-muted{ color:var(--muted); }
/* 2ª linha do título: brilho sutil atravessando o texto, em loop (respeita prefers-reduced-motion) */
.hero__title-strong{
  background-color:var(--ink);
  background-image:linear-gradient(105deg, transparent 0, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%, transparent 100%);
  background-size:200% 100%;
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:heroShine 2.2s ease-in-out infinite;
}
@keyframes heroShine{ 0%{ background-position:150% center; } 100%{ background-position:-50% center; } }
@media (prefers-reduced-motion:reduce){ .hero__title-strong{ animation-duration:15s; } }
.hero__tagline{
  position:relative; margin-top:32px; font-family:var(--font-switzer); font-size:18px;
  font-weight:500; line-height:28px; letter-spacing:-0.01em; max-width:536px; color:var(--muted-sm);
}
.hero__tagline strong{ color:var(--ink); font-weight:500; }
.hero__cta{ position:relative; margin-top:32px; display:flex; align-items:center; justify-content:flex-start; gap:16px; flex-wrap:wrap; }
.hero__cta-btn{ background:var(--ink); color:#fff; height:48px; padding:0 22px; border:1px solid var(--cta-ring); }
.hero__cta-btn--secondary{ height:48px; padding:0 22px; background:transparent; }
.hero__cta-btn:hover{ background:#1c1c1c; }
.hero__cta-avatar{
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:#fff;
}
.hero__cta-avatar img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.btn--lg{ padding:9px 18px; }

/* ============================================================
   PAINEL DO HERO (mockup desktop + celular, estilo "hx-") — cores da marca
   escala única (--p) definida no .hx-visual e herdada pelos dois frames,
   posicionado a ~57% do container e cortado pelo overflow:hidden do .hero__inner
   ============================================================ */
.hero__product{
  --hx-title: var(--ink); --hx-dark: var(--ink); --hx-cta: var(--accent); --hx-cta-line: #FF7A33;
  --hx-active-tint: #FFE0C7; --hx-border: #E6E8EC;
  position:absolute; z-index:1; top:7.5%; left:57%;
}
.hx-visual{
  --p: clamp(.32px, .03px + .08vw, .99px);
  width:calc(950*var(--p)); height:calc(600*var(--p));
}
.hx-frame{ position:absolute; bottom:0; border:5px solid #fff; overflow:hidden; }
.hx-frame--desktop{
  left:0; border-radius:16px; box-shadow:0 7px 29px 0 rgba(100,100,111,.2);
}
.hx-frame--phone{
  left:-56px; bottom:-22px; background:#EEEEEE; border-radius:16px; box-shadow:-17px 16px 52px 0 rgba(0,0,0,.13);
}
.hx-i{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ----- Dashboard desktop (950×594 de referência, escalado por --p) ----- */
.hx-dash{ width:calc(950*var(--p)); height:calc(594*var(--p)); display:flex; background:#F6F7F9; font-family:var(--font-inter-tight,var(--font-body)); color:#111827; font-size:calc(13*var(--p)); line-height:1.3; }
.hx-dash__side{ width:calc(196*var(--p)); flex-shrink:0; padding:calc(18*var(--p)) calc(14*var(--p)); }
.hx-dash__brand{ display:flex; align-items:center; justify-content:space-between; height:calc(22*var(--p)); margin-bottom:calc(22*var(--p)); color:#9CA3AF; font-size:calc(16*var(--p)); }
.hx-dash__brand-mark{ display:flex; align-items:center; gap:calc(8*var(--p)); min-width:0; }
.hx-dash__logo{ width:calc(30*var(--p)); height:calc(30*var(--p)); display:grid; place-items:center; font-size:calc(12*var(--p)); flex-shrink:0; }
.hx-dash__logo img{ width:100%; height:100%; object-fit:contain; }
.hx-dash__brand-divider{ width:calc(1*var(--p)); height:calc(18*var(--p)); background:#D9DBE0; flex-shrink:0; }
.hx-dash__brand-name{ font-size:calc(14*var(--p)); font-weight:800; color:var(--hx-title); white-space:nowrap; letter-spacing:calc(-0.2*var(--p)); }
.hx-dash__brand-name b{ font-weight:800; color:var(--hx-cta); }
.hx-dash__search{ height:calc(34*var(--p)); display:flex; align-items:center; gap:calc(8*var(--p)); padding:0 calc(6*var(--p)) 0 calc(10*var(--p)); background:#fff; border:calc(1*var(--p)) solid var(--hx-border); border-radius:calc(8*var(--p)); color:#6B7280; font-size:calc(13*var(--p)); }
.hx-dash__search .hx-i{ font-size:calc(14*var(--p)); color:#9CA3AF; }
.hx-kbd{ margin-left:auto; font-size:calc(11*var(--p)); color:#4B5563; padding:calc(2*var(--p)) calc(6*var(--p)); border:calc(1*var(--p)) solid #E5E7EB; border-radius:calc(5*var(--p)); background:#F9FAFB; }
.hx-dash__nav{ margin-top:calc(16*var(--p)); display:flex; flex-direction:column; gap:calc(2*var(--p)); }
.hx-dash__nav span{ height:calc(34*var(--p)); display:flex; align-items:center; gap:calc(10*var(--p)); padding:0 calc(10*var(--p)); border-radius:calc(8*var(--p)); color:#4B5563; }
.hx-dash__nav span .hx-i{ font-size:calc(15*var(--p)); }
.hx-dash__nav span.is-active{ background:none; color:var(--hx-title); font-weight:600; }
.hx-dash__nav span.is-active .hx-i{ color:var(--hx-cta); }
.hx-dash__main{ flex:1; min-width:0; margin:calc(10*var(--p)) calc(10*var(--p)) 0 0; background:#fff; border:calc(1*var(--p)) solid #ECEDF0; border-bottom:0; border-radius:calc(12*var(--p)) calc(12*var(--p)) 0 0; overflow:hidden; }
.hx-dash__top{ height:calc(50*var(--p)); display:flex; align-items:center; gap:calc(8*var(--p)); padding:0 calc(18*var(--p)); border-bottom:calc(1*var(--p)) solid #F0F1F3; font-weight:500; }
.hx-dash__top .hx-i{ font-size:calc(15*var(--p)); color:#6B7280; }
.hx-dash__body{ padding:calc(18*var(--p)); }
.hx-label{ font-size:calc(12*var(--p)); color:#6B7280; }
.hx-dash__total{ margin-top:calc(6*var(--p)); font-size:calc(30*var(--p)); font-weight:500; letter-spacing:calc(-0.6*var(--p)); }
.hx-dash__filters{ margin-top:calc(22*var(--p)); display:flex; align-items:center; gap:calc(8*var(--p)); }
.hx-seg{ display:flex; gap:calc(2*var(--p)); padding:calc(3*var(--p)); border:calc(1*var(--p)) solid var(--hx-border); border-radius:calc(8*var(--p)); background:#F7F8FA; }
.hx-seg span{ padding:calc(5*var(--p)) calc(9*var(--p)); border-radius:calc(6*var(--p)); font-size:calc(12*var(--p)); color:#374151; }
.hx-seg span.is-active{ background:#fff; box-shadow:0 calc(1*var(--p)) calc(2*var(--p)) rgba(0,0,0,.08); border:calc(1*var(--p)) solid var(--hx-border); padding:calc(4*var(--p)) calc(8*var(--p)); }
.hx-date{ display:flex; align-items:center; gap:calc(6*var(--p)); padding:calc(7*var(--p)) calc(10*var(--p)); border:calc(1*var(--p)) solid var(--hx-border); border-radius:calc(8*var(--p)); font-size:calc(12*var(--p)); color:#374151; }
.hx-date .hx-i{ font-size:calc(13*var(--p)); color:#6B7280; }
.hx-box{ border:calc(1*var(--p)) solid #ECEDF0; border-radius:calc(10*var(--p)); }
.hx-dash__row{ margin-top:calc(14*var(--p)); display:grid; grid-template-columns:calc(520*var(--p)) calc(300*var(--p)); gap:calc(14*var(--p)); }
.hx-dash__chart{ padding:calc(14*var(--p)) calc(16*var(--p)) calc(12*var(--p)); }
.hx-dash__side-card{ padding:calc(14*var(--p)) calc(16*var(--p)); }
.hx-bar{ margin-top:calc(14*var(--p)); }
.hx-bar div{ display:flex; justify-content:space-between; font-size:calc(11*var(--p)); color:#374151; }
.hx-bar span{ display:block; margin-top:calc(6*var(--p)); height:calc(6*var(--p)); border-radius:calc(99*var(--p)); background:#F1F2F4; overflow:hidden; }
.hx-bar span i{ display:block; height:100%; border-radius:calc(99*var(--p)); background:var(--hx-cta); }
.hx-box__title{ display:flex; align-items:center; gap:calc(6*var(--p)); font-size:calc(12*var(--p)); font-weight:500; }
.hx-box__title .hx-i{ font-size:calc(13*var(--p)); color:#6B7280; flex-shrink:0; }
.hx-plot{ margin-top:calc(20*var(--p)); display:grid; grid-template-columns:calc(28*var(--p)) 1fr; column-gap:calc(10*var(--p)); }
.hx-plot__y{ height:calc(150*var(--p)); display:flex; flex-direction:column; justify-content:space-between; text-align:right; font-size:calc(10*var(--p)); color:#6B7280; margin:calc(-6*var(--p)) 0; }
.hx-plot__area{ position:relative; height:calc(150*var(--p)); }
.hx-plot__area .hx-chart{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hx-plot__grid{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.hx-plot__grid i{ display:block; border-top:calc(1*var(--p)) dashed #EEF0F2; }
.hx-plot__x{ grid-column:2; margin-top:calc(8*var(--p)); display:flex; justify-content:space-between; font-size:calc(10*var(--p)); color:#6B7280; }
.hx-dash__stats{ margin-top:calc(14*var(--p)); display:grid; grid-template-columns:repeat(4, calc(196*var(--p))); }
.hx-stat{ padding:calc(14*var(--p)) calc(16*var(--p)); }
.hx-stat + .hx-stat{ border-left:calc(1*var(--p)) solid #F0F1F3; }
.hx-stat__head{ display:flex; align-items:flex-start; justify-content:space-between; }
.hx-stat__title{ font-size:calc(12*var(--p)); font-weight:600; }
.hx-stat__sub{ font-size:calc(11*var(--p)); color:#6B7280; }
.hx-stat__value{ margin-top:calc(8*var(--p)); font-size:calc(20*var(--p)); font-weight:600; }
.hx-pill{ display:inline-flex; align-items:center; gap:calc(4*var(--p)); padding:calc(2*var(--p)) calc(4*var(--p)) calc(2*var(--p)) calc(7*var(--p)); border-radius:calc(999*var(--p)); font-size:calc(11*var(--p)); font-weight:600; background:#E6F9DA; color:#2F7A1F; }
.hx-pill i{ width:calc(12*var(--p)); height:calc(12*var(--p)); border-radius:calc(99*var(--p)); background:#1F3D2B; display:inline-block; }
.hx-dash__more{ margin-top:calc(14*var(--p)); padding:calc(14*var(--p)) calc(16*var(--p)); height:calc(74*var(--p)); }

/* ----- Celular (218×486 de referência) ----- */
.hx-app{ position:relative; width:calc(218*var(--p)); height:calc(486*var(--p)); background:#fff; font-family:var(--font-inter-tight,var(--font-body)); color:#111827; font-size:calc(10*var(--p)); line-height:1.3; overflow:hidden; }
.hx-app__status{ height:calc(34*var(--p)); display:flex; align-items:center; justify-content:space-between; padding:calc(6*var(--p)) calc(18*var(--p)) 0; font-size:calc(10.5*var(--p)); font-weight:600; }
.hx-app__island{ position:absolute; top:calc(8*var(--p)); left:50%; transform:translateX(-50%); width:calc(62*var(--p)); height:calc(18*var(--p)); border-radius:calc(10*var(--p)); background:#0B0B0B; }
.hx-app__sig{ display:flex; align-items:center; gap:calc(3*var(--p)); }
.hx-app__sig b{ display:block; width:calc(3*var(--p)); background:#111; border-radius:calc(1*var(--p)); }
.hx-app__bat{ width:calc(17*var(--p)); height:calc(8*var(--p)); border:calc(1*var(--p)) solid #111; border-radius:calc(2.5*var(--p)); padding:calc(1*var(--p)); margin-left:calc(2*var(--p)); display:block; }
.hx-app__bat::after{ content:""; display:block; height:100%; width:80%; background:#111; border-radius:calc(1*var(--p)); }
.hx-app__head{ height:calc(32*var(--p)); display:flex; align-items:center; gap:calc(6*var(--p)); padding:0 calc(14*var(--p)); border-bottom:calc(1*var(--p)) solid #F1F2F4; font-weight:500; }
.hx-app__head .hx-i{ font-size:calc(11*var(--p)); color:#6B7280; }
.hx-app__icons{ margin-left:auto; display:flex; gap:calc(10*var(--p)); }
.hx-app__icons .hx-i{ font-size:calc(12*var(--p)); }
.hx-app__body{ padding:calc(14*var(--p)) calc(14*var(--p)) 0; }
.hx-app .hx-label{ font-size:calc(9*var(--p)); }
.hx-app__total{ margin-top:calc(4*var(--p)); display:flex; align-items:center; justify-content:space-between; font-size:calc(20*var(--p)); font-weight:500; letter-spacing:calc(-0.4*var(--p)); }
.hx-app__total .hx-i{ font-size:calc(12*var(--p)); color:#6B7280; }
.hx-app__pills{ margin-top:calc(12*var(--p)); display:flex; gap:calc(2*var(--p)); white-space:nowrap; }
.hx-app__pills span{ padding:calc(3*var(--p)) calc(7*var(--p)); border-radius:calc(999*var(--p)); font-size:calc(8.5*var(--p)); color:#374151; }
.hx-app__pills span.is-active{ background:var(--hx-active-tint); color:var(--hx-title); font-weight:500; }
.hx-app__chart{ margin-top:calc(12*var(--p)); }
.hx-app__chart-title{ font-size:calc(9*var(--p)); color:#6B7280; }
.hx-app__plot{ margin-top:calc(8*var(--p)); display:grid; grid-template-columns:calc(20*var(--p)) 1fr; column-gap:calc(6*var(--p)); }
.hx-app__plot-y{ height:calc(74*var(--p)); display:flex; flex-direction:column; justify-content:space-between; text-align:right; font-size:calc(7*var(--p)); color:#6B7280; margin:calc(-3*var(--p)) 0; }
.hx-app__plot-area{ position:relative; height:calc(74*var(--p)); }
.hx-app__plot-area .hx-chart{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hx-app__plot-grid{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.hx-app__plot-grid i{ display:block; border-top:calc(1*var(--p)) dashed #EEF0F2; }
.hx-app__plot-x{ grid-column:2; margin-top:calc(6*var(--p)); display:flex; justify-content:space-between; font-size:calc(7*var(--p)); color:#6B7280; }
.hx-app__list{ margin-top:calc(14*var(--p)); }
.hx-app__item{ padding:calc(10*var(--p)) calc(14*var(--p)); border-top:calc(1*var(--p)) solid #F1F2F4; }
.hx-app__item .hx-stat__title{ font-size:calc(8.5*var(--p)); }
.hx-app__item .hx-stat__sub{ font-size:calc(7.5*var(--p)); }
.hx-app__item .hx-stat__value{ margin-top:calc(6*var(--p)); font-size:calc(14*var(--p)); }
.hx-app__item .hx-pill{ font-size:calc(7.5*var(--p)); padding:calc(1*var(--p)) calc(3*var(--p)) calc(1*var(--p)) calc(5*var(--p)); gap:calc(3*var(--p)); }
.hx-app__item .hx-pill i{ width:calc(8*var(--p)); height:calc(8*var(--p)); }
.hx-app__tabs{ position:absolute; left:0; right:0; bottom:0; height:calc(58*var(--p)); background:#fff; border-top:calc(1*var(--p)) solid #F1F2F4; display:flex; justify-content:space-around; padding-top:calc(8*var(--p)); }
.hx-app__tabs span{ display:flex; flex-direction:column; align-items:center; gap:calc(3*var(--p)); font-size:calc(6.5*var(--p)); color:#6B7280; }
.hx-app__tabs span .hx-i{ font-size:calc(13*var(--p)); }
.hx-app__tabs span.is-active{ color:var(--hx-cta); font-weight:600; }
.hx-app__home{ position:absolute; bottom:calc(6*var(--p)); left:50%; transform:translateX(-50%); width:calc(62*var(--p)); height:calc(4*var(--p)); border-radius:calc(4*var(--p)); background:#111; }

@media (min-width:810px){
  .hx-frame{ border-width:8px; }
  .hx-frame--phone{ border-radius:26px; }
}

.dash-card{
  position:relative; z-index:1; background:#fff; border-radius:20px; padding:20px 22px 22px;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.3), 0 10px 24px -14px rgba(0,0,0,.15);
  text-align:left; color:#111;
}
.dash-card__top{ display:flex; align-items:center; gap:10px; }
.dash-card__dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.dash-card__label{ font-size:.78rem; font-weight:600; color:#111; }
.dash-card__icons{ margin-left:auto; display:flex; align-items:center; gap:12px; color:#9a9a9a; }
.dash-card__icons svg{ width:16px; height:16px; }
.dash-card__plus{
  width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
}
.dash-card__stat{ display:flex; flex-direction:column; gap:4px; margin-top:18px; }
.dash-card__stat-label{ font-size:.7rem; color:#8a8a8a; }
.dash-card__stat-value{ font-family:var(--font-switzer); font-size:1.9rem; font-weight:600; letter-spacing:-0.02em; }
.dash-card__filters{ display:flex; align-items:center; gap:6px; margin-top:16px; font-size:.68rem; color:#8a8a8a; }
.dash-card__filters span{ padding:5px 10px; border-radius:999px; }
.dash-card__filters .is-active{ background:#111; color:#fff; font-weight:600; }
.dash-card__filters-spacer{ flex:1; }
.dash-card__filters-select{ border:1px solid #eee; }
.dash-card__body{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-top:16px; }
.dash-card__chart-title{ font-size:.68rem; color:#8a8a8a; }
.dash-card__chart svg{ width:100%; height:64px; display:block; margin-top:6px; }
.dash-card__area{ fill:var(--accent-soft); stroke:none; }
.dash-card__line{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.dash-card__side-title{ font-size:.68rem; color:#8a8a8a; }
.dash-card__bar{ display:flex; height:6px; border-radius:999px; overflow:hidden; margin-top:8px; background:#f0f0f0; }
.dash-card__bar .is-a{ background:var(--accent); }
.dash-card__bar .is-b{ background:#111; }
.dash-card__bar .is-c{ background:#dedede; }
.dash-card__legend{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.7rem; color:#555; }
.dash-card__legend li{ display:flex; align-items:center; gap:6px; }
.dash-card__legend b{ margin-left:auto; color:#111; font-weight:600; }
.dash-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dash-dot--a{ background:var(--accent); }
.dash-dot--b{ background:#111; }
.dash-dot--c{ background:#dedede; }
.dash-card__metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid #f0f0f0; }
.dash-card__metrics div{ display:flex; flex-direction:column; gap:3px; }
.dash-card__metrics span{ font-size:.62rem; color:#9a9a9a; }
.dash-card__metrics b{ font-family:var(--font-switzer); font-size:1rem; font-weight:600; }
.dash-card__metrics em{ font-style:normal; font-size:.62rem; font-weight:600; color:#1a9c5c; }

.dash-phone{
  position:absolute; z-index:2; left:-40px; bottom:-40px; width:170px;
  background:#fff; border-radius:20px; padding:14px 14px 16px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.35), 0 0 0 6px #fff, 0 0 0 7px #ececec;
  text-align:left; color:#111;
}
.dash-phone__notch{ width:44px; height:5px; border-radius:4px; background:#e4e4e4; margin:0 auto 10px; }
.dash-phone__top{ display:flex; align-items:center; gap:6px; font-size:.62rem; font-weight:600; color:#111; }
.dash-phone__icon{
  width:16px; height:16px; border-radius:5px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.5rem; font-weight:700;
}
.dash-phone__stat{ display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.dash-phone__stat span{ font-size:.56rem; color:#9a9a9a; }
.dash-phone__stat b{ font-family:var(--font-switzer); font-size:1.15rem; font-weight:600; letter-spacing:-.02em; }
.dash-phone__filters{ display:flex; gap:4px; margin-top:8px; font-size:.54rem; color:#9a9a9a; }
.dash-phone__filters span{ padding:3px 7px; border-radius:999px; }
.dash-phone__filters .is-active{ background:#111; color:#fff; font-weight:600; }
.dash-phone__chart{ margin-top:8px; }
.dash-phone__chart-title{ font-size:.56rem; color:#9a9a9a; }
.dash-phone__chart svg{ width:100%; height:38px; display:block; margin-top:4px; }
.dash-phone__row{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:.58rem; color:#8a8a8a; }
.dash-phone__row b{ color:#111; font-size:.66rem; }
.dash-phone__row em{ font-style:normal; margin-left:auto; color:#1a9c5c; font-weight:600; }
.dash-phone__tabs{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
.dash-phone__tabs span{ width:5px; height:5px; border-radius:50%; background:#e4e4e4; }
.dash-phone__tabs .is-active{ background:var(--accent); }
.dash-phone__tabs--icons{
  justify-content:space-between; gap:0; margin-top:14px; padding-top:10px; border-top:1px solid #f0f0f0;
}
.dash-phone__tabs--icons span{
  width:auto; height:auto; border-radius:0; background:none; color:#c2c2c2;
  display:flex; align-items:center; justify-content:center;
}
.dash-phone__tabs--icons span svg{ width:16px; height:16px; }
.dash-phone__tabs--icons .is-active{ background:none; color:var(--accent); }

/* ============================================================
   VITRINE DE PRODUTO — painel de automação em destaque (Automações)
   ============================================================ */
.showcase{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); box-sizing:border-box; }
.showcase__card{
  position:relative; overflow:hidden; border-radius:28px;
  padding:64px clamp(24px,6vw,64px) 110px;
  background:linear-gradient(135deg, #FFB07A 0%, var(--accent) 48%, var(--accent-deep) 100%);
}
.showcase__card::before{
  content:''; position:absolute; top:-25%; left:-12%; width:65%; height:85%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.4) 0%, transparent 70%);
}
.showcase__peek{
  position:absolute; z-index:0; top:36px; left:clamp(24px,6vw,64px); width:190px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-radius:16px; padding:12px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.3);
}
.showcase__peek-top{ display:flex; align-items:center; justify-content:space-between; color:#111; }
.showcase__peek-dot{ width:16px; height:16px; border-radius:50%; background:var(--accent); }
.showcase__peek-top svg{ width:16px; height:16px; color:#9a9a9a; }
.showcase__peek-search{
  margin-top:10px; display:flex; align-items:center; gap:6px; font-size:.68rem; color:#8a8a8a;
  background:#fff; border-radius:8px; padding:7px 9px;
}
.showcase__peek-search svg{ width:13px; height:13px; flex-shrink:0; }
.showcase__peek-search b{ margin-left:auto; font-weight:600; color:#b5b5b5; font-size:.6rem; }
.showcase__dashboard{ position:relative; z-index:1; max-width:520px; margin-left:auto; }
.showcase__phone{ position:absolute; z-index:2; left:clamp(24px,6vw,64px); bottom:-30px; }

@media (max-width:900px){
  .showcase__card{ padding:56px 20px 200px; }
  .showcase__dashboard{ margin-left:0; max-width:100%; }
  .showcase__peek{ display:none; }
  .showcase__phone{ left:50%; transform:translateX(-50%); bottom:-30px; }
}
@media (max-width:480px){
  .showcase__card{ border-radius:20px; padding:44px 16px 190px; }
  .dash-card{ padding:16px 16px 18px; }
  .dash-card__body{ grid-template-columns:1fr; }
  .dash-card__metrics{ grid-template-columns:repeat(2,1fr); row-gap:14px; }
}

@media (max-width:1439px){
  .hero__inner{ flex-direction:column; align-items:stretch; min-height:0; padding-top:48px; }
  .hero__content{ max-width:none; margin:0 auto; align-items:center; text-align:center; }
  .hero__title, .hero__tagline{ margin-left:auto; margin-right:auto; }
  .hero__cta{ justify-content:center; }
  .hero__product{ position:static; margin:36px auto 0; }
  .hx-visual{ margin:0 auto; }
}
@media (max-width:640px){
  .hero__title{ max-width:none; }
}

/* ============================================================
   TEASER SPLIT — bloco Serviços (índice para Sites / Automações)
   ============================================================ */
.teaser-split{
  padding:clamp(64px,10vw,120px) 0; max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.teaser-split--stack{
  grid-template-columns:1fr; max-width:720px; padding-top:0; padding-bottom:0;
}
.teaser{
  position:relative; padding:44px 40px; border-radius:20px;
  background:rgba(255,255,255,.03); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.75);
  display:flex; flex-direction:column; align-items:center; gap:16px; overflow:hidden; text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.teaser::before{
  content:''; position:absolute; top:-40%; right:-25%; width:70%; height:150%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, var(--teaser-glow, rgba(255,90,31,.14)) 0%, transparent 70%);
}
.teaser--orange{ --teaser-glow: rgba(255,90,31,.16); }
.teaser--blue{ --teaser-glow: rgba(59,130,246,.16); }
.teaser:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.14); box-shadow:0 36px 70px -30px rgba(0,0,0,.8); }
.teaser__n{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:13px; border:1px solid;
}
.teaser__n svg{ width:21px; height:21px; }
.teaser--orange .teaser__n{ background:rgba(255,90,31,.14); border-color:rgba(255,90,31,.4); color:#FF5A1F; }
.teaser--blue .teaser__n{ background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.4); color:#3B82F6; }
.teaser__title{ position:relative; z-index:1; font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.02em; color:var(--text); }
.teaser__text{ position:relative; z-index:1; color:var(--text-dim); font-size:1rem; line-height:1.7; max-width:44ch; }
.teaser .link-arrow{ position:relative; z-index:1; }

.teaser__hooks{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.teaser__hook{
  font-family:var(--font-body); font-weight:500; font-size:.74rem; color:var(--text-dim);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:6px 13px;
}
.teaser--orange .teaser__hook{ color:#FF9E70; border-color:rgba(255,90,31,.3); background:rgba(255,90,31,.08); }
.teaser--blue .teaser__hook{ color:#7CAEFA; border-color:rgba(59,130,246,.3); background:rgba(59,130,246,.08); }

@media (max-width:760px){
  .teaser-split{ grid-template-columns:1fr; }
}

/* ============================================================
   SERVIÇOS — eyebrow centralizado (o conteúdo vem do bloco Portfólio + IA)
   ============================================================ */
.servicos{
  padding:clamp(100px,14vw,168px) 0 clamp(64px,10vw,128px);
  background:var(--bg); color:var(--ink);
}
.servicos__eyebrow{
  display:flex; align-items:center; width:fit-content; margin:0 auto 24px;
  padding:8px 18px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-2);
  font-family:var(--font-switzer); font-size:14px; font-weight:500;
  letter-spacing:-0.01em; color:var(--muted-sm);
}
.servicos__titulo{
  text-align:center; max-width:620px; margin:0 auto 16px;
  font-family:var(--font-switzer); font-weight:600; letter-spacing:-.04em; line-height:1.1;
  font-size:clamp(1.6rem, 3.6vw, 2.6rem);
}
.servicos__titulo-muted{ color:var(--muted); }
.servicos__titulo-strong{ color:var(--ink); }
.servicos__sub{
  text-align:center; max-width:560px; margin:10px auto 40px;
  font-family:var(--font-switzer); font-size:15px; font-weight:500; line-height:24px;
  letter-spacing:-0.01em; color:var(--ink);
}

/* ============================================================
   PORTFÓLIO + IA — cartão de portfólio e cartão "pergunte pra IA"
   (cores/fontes adaptadas pra usar os tokens da marca)
   ============================================================ */
.ia-grid{
  --destaque: var(--accent);
  --botao-claro: #FFC898;
  --botao-escuro: var(--accent);
  --brilho-1: #FFCB9B;
  --brilho-2: #FFE9C9;
  --titulo: var(--ink);
  --texto: var(--muted-sm);
  --linha: rgba(20,20,15,.1);
  --fundo-claro: #F4F1EB;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--linha); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
  max-width:var(--container); margin:clamp(64px,10vw,120px) auto 0;
}
.ia-col{ display:flex; flex-direction:column; gap:1px; }
.ia-bloco{ background:#fff; overflow:hidden; }
.ia-visual{ height:450px; position:relative; background:#F7F8FA; }
.ia-visual::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1.2px); background-size:8px 8px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 75%);
  mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 75%);
}
.ia-texto{ padding:28px 24px 24px; min-height:210px; flex:1; display:flex; flex-direction:column; }
.ia-texto h3{
  font-family:var(--font-switzer); font-size:20px; font-weight:600;
  letter-spacing:-.02em; line-height:1; color:var(--titulo); margin-bottom:10px;
}
.ia-texto p{ font-size:14px; font-weight:500; line-height:1.8; color:var(--texto); margin-bottom:24px; }
.ia-link{
  font-family:var(--font-switzer); font-weight:600; color:var(--destaque);
  text-decoration:none; margin-top:auto; display:inline-block; transition:transform .3s var(--ease);
}
.ia-link:hover{ transform:translateX(4px); }

/* visual esquerdo: página de documentação inclinada */
.doc{
  position:absolute; left:13%; top:20%; width:92%; height:115%;
  background:#fff; border-radius:14px; border:1px solid var(--linha);
  box-shadow:-18px 20px 40px rgba(0,0,0,.07);
  transform:perspective(1400px) rotateY(16deg) rotateX(6deg) rotateZ(-2deg); transform-origin:left center;
  -webkit-mask-image:linear-gradient(to right,#000 45%,transparent 92%);
  mask-image:linear-gradient(to right,#000 45%,transparent 92%);
  font-size:11px; color:var(--texto);
}
.doc::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:55%; background:linear-gradient(transparent,#F7F8FA 80%); }
.doc-abas{ display:flex; align-items:center; padding:16px 22px; border-bottom:1px solid var(--linha); }
.doc-logo{ display:flex; align-items:center; gap:8px; }
.doc-logo__mark{ height:20px; width:auto; display:block; }
.doc-logo__img{ height:17px; width:auto; display:block; }
.doc-corpo{ display:flex; padding:18px 22px; }
.doc-menu{ width:38%; display:flex; flex-direction:column; gap:4px; }
.doc-menu b{ font-weight:600; color:var(--titulo); margin:4px 0 6px; }
.doc-menu .it{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; }
.doc-menu .it svg{ width:12px; height:12px; flex:none; }
.doc-menu .it.ativo{ background:rgba(255,90,0,.12); color:var(--accent-deep); font-weight:600; }
.doc-menu .grupo{ margin-top:16px; }
.metodo{ font-size:7px; font-weight:700; padding:1px 4px; border-radius:3px; background:#E8F0FF; color:#4a6fd8; }
.metodo.get{ background:#E6F6E6; color:#3c9a3c; }
.doc-conteudo{ flex:1; padding-left:26px; }
.doc-conteudo .tag{ color:var(--destaque); font-weight:600; font-size:10px; }
.doc-conteudo h4{ font-family:var(--font-switzer); font-size:20px; color:var(--titulo); margin:6px 0 4px; }
.doc-conteudo .sub{ color:#6a7085; margin-bottom:18px; }
.doc-conteudo p{ line-height:1.8; color:#8a8fa0; margin-bottom:16px; }
.doc-conteudo h5{ font-family:var(--font-switzer); font-size:14px; color:var(--titulo); display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.doc-conteudo li{ margin-left:14px; color:#9aa0b0; line-height:1.9; }

.mao{ position:absolute; width:24px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)); z-index:3; }

/* visual direito: caixa de prompt */
.brilho{
  position:absolute; left:18%; top:22%; width:70%; height:60%; filter:blur(38px); opacity:.75;
  background:radial-gradient(ellipse at 70% 60%, var(--brilho-1), transparent 60%),
             radial-gradient(ellipse at 20% 30%, var(--brilho-2), transparent 55%);
}
.prompt{
  position:absolute; left:4%; right:12%; top:34%; height:180px;
  background:rgba(255,255,255,.96); border-radius:22px; border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(226,231,241,.6), 0 18px 50px rgba(255,90,0,.12);
}
.prompt-texto{
  position:absolute; left:0; right:22%; top:34px; overflow:hidden; white-space:nowrap; text-align:right;
  font-family:var(--font-switzer); font-size:24px; font-weight:500; letter-spacing:.2px; color:#3A4257;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 25%);
  mask-image:linear-gradient(to right,transparent 0,#000 25%);
}
.prompt-texto .claro{ color:#9aa0b0; }
.prompt-texto .cursor{ color:var(--destaque); animation:iaPisca 1s steps(1) infinite; font-weight:400; }
.mic{ position:absolute; right:112px; bottom:34px; width:26px; color:#4a5268; }
.enviar{
  position:absolute; right:28px; bottom:18px; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; color:var(--titulo);
  background:radial-gradient(circle at 40% 35%, var(--botao-claro), var(--botao-escuro));
  box-shadow:0 0 0 1px rgba(255,255,255,.8) inset, 0 8px 24px rgba(255,90,0,.45);
  animation:iaPulse 2.4s infinite;
}
.enviar svg{ width:28px; }
.prompt .mao{ right:26px; bottom:16px; width:30px; }

@keyframes iaPisca{ 50%{ opacity:0; } }
@keyframes iaPulse{
  50%{ box-shadow:0 0 0 1px rgba(255,255,255,.8) inset, 0 0 0 10px rgba(255,90,0,.12), 0 8px 24px rgba(255,90,0,.45); }
}
@media (prefers-reduced-motion:reduce){
  .prompt-texto .cursor{ animation:none; }
  .enviar{ animation:none; }
}


@media (max-width:900px){
  .ia-grid{ grid-template-columns:1fr; }
  .ia-visual{ height:320px; }
  .prompt{ left:5%; right:5%; height:140px; top:28%; }
  .prompt-texto{ font-size:18px; top:26px; }
  .enviar{ width:48px; height:48px; right:18px; bottom:14px; }
  .mic{ right:84px; bottom:26px; width:22px; }
}

/* ============================================================
   STEPS — lista numerada editorial (Como fazemos)
   ============================================================ */
.steps{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); position:relative; }
.steps::before{
  content:''; position:absolute; top:0; bottom:0; left:calc(var(--gutter) + 27px);
  width:1px; background:var(--border);
}
.step{ position:relative; display:grid; grid-template-columns:56px 1fr; gap:28px; padding:32px 0; border-bottom:1px solid var(--border); }
.step:first-child{ padding-top:0; }
.step__n{
  position:relative; font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--accent);
  background:var(--bg); width:56px; text-align:center;
}
.step__title{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; letter-spacing:-.01em; color:var(--text); }
.step__text{ margin-top:8px; color:var(--text-dim); font-size:.96rem; line-height:1.6; max-width:56ch; }

@media (max-width:640px){
  .steps::before{ left:calc(var(--gutter) + 22px); }
  .step{ grid-template-columns:44px 1fr; gap:18px; }
  .step__n{ font-size:1.1rem; width:44px; }
}

/* ============================================================
   SOBRE 2 — clientes rolando (usado dentro do svc-feature__left)
   ============================================================ */
.sobre2__clientes{ background:var(--ink); border-radius:var(--r-card); height:340px; width:100%; max-width:370px; overflow:hidden; position:relative; }
.sobre2__clientes::before, .sobre2__clientes::after{ content:""; position:absolute; left:0; right:0; height:50px; z-index:2; }
.sobre2__clientes::before{ top:0; background:linear-gradient(var(--ink),transparent); }
.sobre2__clientes::after{ bottom:0; background:linear-gradient(transparent,var(--ink)); }
.sobre2__lista{ display:flex; flex-direction:column; animation:sobre2Scroll 14s linear infinite; }
.sobre2__lista span{
  font-family:var(--font-display); font-weight:500; font-size:32px; letter-spacing:-.03em;
  line-height:1.15; color:rgba(255,255,255,.35); white-space:nowrap; padding:12px 24px;
}
.sobre2__lista span.b{ color:#fff; }
.sobre2__lista span.dir{ text-align:right; }
@keyframes sobre2Scroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
.sobre2__clientes:hover .sobre2__lista{ animation-play-state:paused; }

@media (max-width:800px){
  .sobre2__clientes{ height:280px; }
  .sobre2__lista span{ font-size:24px; }
}

/* ============================================================
   STAT INLINE — prova / resultado (número grande discreto)
   ============================================================ */
.stat-block{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.stat-block__figure{ font-family:var(--font-display); font-weight:700; font-size:clamp(3rem,7vw,5rem); letter-spacing:-.03em; color:var(--accent); line-height:1; }
.stat-block__label{ margin-top:12px; color:var(--text-dim); font-size:1rem; }
.stat-block__text{ color:var(--text-dim); font-size:1.02rem; line-height:1.75; }
.stat-block__text strong{ color:var(--text); font-weight:600; }
.stat-block__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.stat-block__tags li{ font-size:.82rem; color:var(--text-dim); padding:8px 14px; border:1px solid var(--border-strong); border-radius:20px; }

@media (max-width:800px){
  .stat-block{ grid-template-columns:1fr; gap:24px; }
}

/* ============================================================
   SERVICE EXAMPLES (Sites / Automações — o que entregamos / pode ser automatizado)
   ============================================================ */
.svc-examples{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px 32px; }
.svc-examples--steps{ grid-template-columns:repeat(3,1fr); }
.svc-example{
  padding-top:24px; border-top:1px solid var(--border);
  transition:border-color .3s var(--ease);
}
.svc-example:hover{ border-color:var(--accent-line); }
.svc-example__n{ display:block; font-family:var(--font-display); font-size:1.6rem; font-weight:600; letter-spacing:-.02em; color:var(--text-faint); margin-bottom:14px; }
.svc-example h4{ font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--text); }
.svc-example p{ color:var(--text-dim); font-size:14px; line-height:24px; margin-top:8px; }

@media (max-width:900px){ .svc-examples{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svc-examples{ grid-template-columns:1fr; } }

.svc-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.svc-split .svc-examples{ grid-template-columns:1fr; }
.svc-split .svc-examples--steps{ grid-template-columns:repeat(2,1fr); }
@media (max-width:760px){
  .svc-split{ grid-template-columns:1fr; gap:64px; }
}

.svc-feature{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.svc-feature--reverse{ grid-template-columns:1.1fr .9fr; }
.svc-feature.container{ max-width:1040px; margin-left:auto; margin-right:auto; }
.svc-feature__title{
  font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); line-height:1.05;
}
.svc-feature__title .section-title__muted{ display:block; font-weight:500; letter-spacing:-.03em; }
.svc-feature__title .section-title__strong{ display:block; font-weight:600; letter-spacing:-.03em; }
.svc-feature__list{ display:flex; flex-direction:column; gap:36px; }
.svc-feature__item{ display:flex; align-items:flex-start; gap:18px; }
.about-text p{ font-family:var(--font-switzer); font-size:16px; line-height:1.7; letter-spacing:-.01em; color:var(--muted-sm); }
.about-text p strong{ color:var(--ink); font-weight:600; }
.svc-feature__icon{
  flex:none; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.svc-feature__icon svg{ width:20px; height:20px; }
.svc-feature__item h4{ font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--text); }
.svc-feature__item p{ color:var(--text-dim); font-size:14px; line-height:22px; margin-top:4px; }

@media (max-width:860px){
  .svc-feature{ grid-template-columns:1fr; gap:32px; align-items:start; }
  .svc-feature--reverse .svc-feature__left{ order:-1; }
}

/* ============================================================
   PORTFOLIO CAROUSEL
   ============================================================ */
.port-carousel{ position:relative; }
.port-viewport{ overflow:hidden; }
.port-track{ display:flex; gap:28px; transition:transform .6s var(--ease); will-change:transform; cursor:grab; touch-action:pan-y; }
.port-track.is-dragging{ transition:none; cursor:grabbing; }
.port-slide{
  flex:0 0 auto; width:min(880px, 74vw); display:flex; flex-direction:column;
  opacity:.35; transition:opacity .5s var(--ease);
}
.port-slide.is-active{ opacity:1; }
.port-slide .port-card__frame{ pointer-events:none; }
.port-slide.is-active .port-card__frame{ pointer-events:auto; }
.port-slide .port-card__row{ opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.port-slide.is-active .port-card__row{ opacity:1; visibility:visible; }
.port-slide .port-card__desc{ opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.port-slide.is-active .port-card__desc{ opacity:1; visibility:visible; }
.port-card__frame{
  position:relative; display:block; overflow:hidden; border-radius:var(--r-card); border:1px solid var(--border);
  background:var(--bg-alt); aspect-ratio:16/10;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
  transform:translateZ(0); will-change:transform;
}
.port-card__frame:hover{ border-color:var(--accent-line); box-shadow:0 30px 60px -24px var(--shadow-strong); }
.port-card__frame > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .7s var(--ease); user-select:none;
  backface-visibility:hidden; transform:translateZ(0);
}
.port-card__frame:hover > img{ transform:scale(1.03); }
.port-card__frame--browser{ display:flex; flex-direction:column; background:#0A0A0A; }
.port-card__browser-bar{
  display:flex; align-items:center; gap:5px; padding:9px 10px;
  background:#161616; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
}
.port-card__browser-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.port-card__browser-tab{
  margin-left:6px; display:flex; align-items:center; gap:5px; height:18px; padding:0 9px; max-width:100%;
  border-radius:5px 5px 0 0; background:#0A0A0A; border:1px solid rgba(255,255,255,.08); border-bottom:none;
  font-family:var(--font-switzer); font-size:8px; font-weight:500; color:rgba(255,255,255,.6);
  overflow:hidden; white-space:nowrap;
}
.port-card__browser-favicon{ width:10px; height:10px; flex-shrink:0; object-fit:contain; }
.port-card__browser-tab span{ overflow:hidden; text-overflow:ellipsis; }
.port-card__browser-body{
  flex:1; display:flex; flex-direction:row; align-items:stretch; justify-content:flex-start;
  background:#0A0A0A; color:#fff; text-align:left; overflow:hidden;
}
.port-mock__sidebar{
  flex-shrink:0; width:44px; background:#141414; border-right:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 0;
}
.port-mock__sidebar-logo{ width:16px; height:16px; object-fit:contain; }
.port-mock__sidebar-nav{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.port-mock__sidebar-nav span{
  width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.35); flex-shrink:0;
}
.port-mock__sidebar-nav span.is-active{ background:#fff; color:#0A0A0A; }
.port-mock__sidebar-nav svg{ width:12px; height:12px; }
.port-mock__main{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:10px; padding:14px;
}
.port-mock__head{ display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.5); }
.port-mock__head svg{ width:13px; height:13px; flex-shrink:0; }
.port-mock__head span{ font-family:var(--font-display); font-weight:600; font-size:11px; color:#fff; }
.port-mock__label{ font-size:9px; color:rgba(255,255,255,.4); }
.port-mock__value{ font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.02em; color:#fff; margin-top:2px; }
.port-mock__chart{ margin-top:8px; }
.port-mock__why{ margin-top:auto; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); }
.port-mock__why b{ display:block; font-family:var(--font-display); font-weight:600; font-size:8.5px; color:#fff; margin-bottom:3px; }
.port-mock__why p{ font-size:8.5px; line-height:1.5; color:rgba(255,255,255,.5); }
.port-mock__chart-row{ display:flex; gap:5px; height:52px; }
.port-mock__chart-y{
  flex-shrink:0; display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--font-mono); font-size:6.5px; color:rgba(255,255,255,.35); text-align:right; padding:1px 0;
}
.port-mock__chart-area{ position:relative; flex:1; min-width:0; }
.port-mock__chart-grid{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.port-mock__chart-grid i{ display:block; border-top:1px dashed rgba(255,255,255,.14); }
.port-mock__chart-area svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.port-mock__chart-x{
  display:flex; justify-content:space-between; margin-top:4px; padding-left:20px;
  font-family:var(--font-mono); font-size:6.5px; color:rgba(255,255,255,.35);
}
.port-mock__stats{ display:flex; gap:7px; }
.port-mock__stat{ flex:1; background:rgba(255,255,255,.06); border-radius:8px; padding:7px 9px; min-width:0; }
.port-mock__stat span{ display:block; font-size:7.5px; color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.port-mock__stat b{ display:block; font-family:var(--font-display); font-weight:600; font-size:12px; color:#fff; margin-top:2px; }
.port-card__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-top:16px; }
.port-card__title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; color:var(--text); }
.port-card__tag{ display:block; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:var(--text-faint); margin-top:4px; }
.port-card__desc{ color:var(--text-dim); font-size:.92rem; line-height:1.6; margin-top:10px; max-width:56ch; }
.port-card__link{
  display:flex; align-items:center; gap:4px; font-family:var(--font-switzer); font-weight:600; font-size:.85rem;
  color:var(--text); white-space:nowrap; flex-shrink:0; margin-top:2px; transition:color .3s var(--ease);
}
.port-card__link:hover{ color:var(--accent); }


.port-carousel__controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:40px; position:relative; z-index:5; }
.port-carousel__btn{
  width:40px; height:40px; border:none; background:none; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--text-faint); cursor:pointer;
  transition:color .3s var(--ease), transform .3s var(--ease);
  position:relative; z-index:5; pointer-events:auto;
}
.port-carousel__btn svg{ width:13px; height:13px; stroke-width:1.6; pointer-events:none; }
.port-carousel__btn:hover{ color:var(--text); transform:scale(1.15); }
.port-carousel__btn:active{ transform:scale(.92); }

@media (max-width:900px){
  .port-slide{ width:82vw; }
}

.port-carousel--compact .port-slide{ width:min(360px, 58vw); opacity:1; }
.port-carousel--compact .port-card__frame{ aspect-ratio:1/1.05; filter:brightness(.6); transition:filter .4s var(--ease); }
.port-carousel--compact .port-slide.is-active .port-card__frame{ filter:brightness(1); }
.port-carousel--compact .port-card__row{ justify-content:center; text-align:center; }
.port-carousel--compact .port-card__desc{ text-align:center; margin-left:auto; margin-right:auto; }
@media (max-width:560px){
  .port-carousel--compact .port-slide{ width:74vw; }
}

/* ============================================================
   FAQ — split 2 colunas (título à esquerda, acordeão à direita), 518px + 518px
   ============================================================ */
.faq-split{
  display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
}
.faq-split__head{ max-width:518px; }
.faq-split__head .section-title{ margin-top:16px; }
.faq-split--center{ display:block; }
.faq-split--center .faq__list{ max-width:640px; margin:40px auto 0; }
.faq__list{ max-width:518px; margin:0; padding:0; border-top:1px solid var(--border); }
.faq__item{ border-bottom:1px solid var(--border); }
.faq__question{
  width:100%; display:flex; align-items:center; gap:20px;
  padding:26px 0; text-align:left; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--text);
  transition:color .3s;
}
.faq__question:hover{ color:var(--accent); }
.faq__n{
  flex-shrink:0; width:28px; font-family:var(--font-mono); font-weight:500; font-size:.85rem;
  color:var(--text-faint);
}
.faq__question span:not(.faq__n){ flex:1; }
.faq__icon{ width:20px; height:20px; color:var(--accent); flex-shrink:0; transition:transform .3s var(--ease); }
.faq__item.is-open .faq__icon{ transform:rotate(180deg); }
.faq__answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.faq__item.is-open .faq__answer{ grid-template-rows:1fr; }
.faq__answer-inner{ overflow:hidden; }
.faq__answer-inner p{ padding-bottom:24px; color:var(--text-dim); font-size:.95rem; line-height:1.65; max-width:68ch; }

@media (max-width:900px){
  .faq-split{ grid-template-columns:1fr; gap:24px; }
  .faq-split__head, .faq__list{ max-width:none; }
}

/* ============================================================
   CTA FINAL / BANDS
   ============================================================ */
.cta-final{
  padding:clamp(64px,10vw,120px) 0; background:var(--bg); border-top:1px solid var(--border); text-align:center;
}
.cta-final__inner{ max-width:640px; margin:0 auto; padding:0 var(--gutter); }
.cta-final__inner h2{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem,4vw,2.4rem);
  letter-spacing:-.02em; line-height:1.15; color:var(--text);
}
.cta-final__inner p{ margin-top:16px; color:var(--text-dim); font-size:1.02rem; line-height:1.6; }
.cta-final__inner .btn--solid{ margin-top:32px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  padding:clamp(64px,10vw,120px) 0; min-height:100svh; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
}
.contact__inner{
  position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start;
}
.contact__inner--solo{ display:block; max-width:640px; }
.contact__side{ display:flex; flex-direction:column; gap:32px; }
.contact__side--row{
  flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:48px;
  margin-top:64px; padding-top:40px; border-top:1px solid var(--border);
}
.contact__box{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.contact__box > span:last-child{ display:flex; flex-direction:column; gap:4px; }
.contact__box:hover{ opacity:.7; transform:translateY(-2px); }
.contact__side--row .svc-feature__icon{ width:36px; height:36px; flex-shrink:0; }
.contact__side--row .svc-feature__icon svg{ width:16px; height:16px; }
.contact__side--row .contact__label{ font-size:.65rem; }
.contact__side--row .contact__value{ font-size:.92rem; white-space:nowrap; font-weight:600; }
@media (max-width:640px){
  .contact__side--row{ flex-wrap:wrap; justify-content:center; gap:32px; }
}
.contact__block{ display:flex; align-items:flex-start; gap:16px; }
.contact__block > div{ display:flex; flex-direction:column; gap:6px; }
.contact__label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.contact__value{ font-family:var(--font-switzer); font-size:1.05rem; font-weight:500; color:var(--text); transition:color .3s; }
.contact__value:hover{ color:var(--accent); }
.contact__block .btn{ align-self:flex-start; margin-top:2px; }

.contact__form{ display:grid; grid-template-columns:1fr 1fr; gap:20px 20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field--hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.field label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.field input, .field textarea{
  border:1px solid var(--border-strong); border-radius:11px; padding:13px 15px; font-size:.95rem;
  background:var(--glass-1); color:var(--text); transition:border-color .3s, box-shadow .3s, background .3s;
}
.field input:focus, .field textarea:focus{
  border-color:rgba(255,90,31,.5); background:var(--glass-2);
  box-shadow:0 0 0 4px rgba(255,90,31,.12); outline:none;
}
.field textarea{ resize:vertical; font-family:inherit; }
.field input::placeholder, .field textarea::placeholder{ color:var(--text-faint); opacity:1; }
.field input.is-invalid, .field textarea.is-invalid{ border-color:#DC2626; }
.field__error{ font-size:.8rem; color:#DC2626; min-height:0; display:none; }
.field__error:not(:empty){ display:block; }
.form-status{ font-family:var(--font-mono); font-size:.8rem; color:var(--accent); min-height:1.2em; }
.form-status.is-error{ color:#DC2626; }

@media (max-width:900px){
  .contact__inner{ grid-template-columns:1fr; gap:20px; }
  .contact__form{ grid-template-columns:1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; overflow:hidden; border-top:1px solid var(--border); padding:clamp(64px,10vw,120px) 0 0; background:var(--bg-alt); }
/* assinatura final: wordmark gigante sangrando no rodapé, igual referência de estúdio premium */
.footer__giant{
  margin-top:40px; text-align:center; font-family:var(--font-logo); font-weight:800;
  font-size:clamp(3.5rem, 14vw, 11rem); line-height:.85; letter-spacing:-.03em;
  color:var(--text); opacity:.08; white-space:nowrap; pointer-events:none; user-select:none;
  transform:translateY(28%);
}
.footer__giant span{ color:var(--accent); }
.footer__inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:64px; padding-bottom:64px; }
.footer__links{ display:flex; flex-wrap:wrap; gap:26px; font-size:.9rem; color:var(--text-dim); }
.footer__links a:hover{ color:var(--text); }
.footer__contact{ display:flex; flex-direction:column; gap:10px; font-size:.9rem; color:var(--text-dim); align-items:flex-end; }
.footer__contact a:hover{ color:var(--text); }
.footer__bottom{
  padding:24px 0; display:flex; align-items:center; gap:32px; min-height:92px; box-sizing:border-box;
  border-top:1px solid var(--border); font-family:var(--font-mono); font-size:.76rem; color:var(--text-faint);
}

@media (max-width:640px){
  .footer__top{ flex-direction:column; gap:28px; }
  .footer__contact{ align-items:flex-start; }
}

/* ============================================================
   BARRA DE CONTATO FLUTUANTE — pílula com texto + 2 atalhos, some perto do footer
   ============================================================ */
.contact-bar{
  position:fixed; z-index:800; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:6px 6px 6px 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(10,10,12,.7); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.contact-bar.is-hidden{ opacity:0; visibility:hidden; transform:translateX(-50%) translateY(16px); }
.contact-bar__text{ display:flex; flex-direction:column; font-size:.68rem; color:rgba(255,255,255,.65); white-space:nowrap; }
.contact-bar__text strong{ color:#fff; font-weight:600; font-size:.74rem; }
.contact-bar__btn{
  display:flex; align-items:center; gap:0; height:32px; width:32px; padding:0;
  border-radius:999px; flex-shrink:0; overflow:hidden;
  transition:background .3s var(--ease), padding .3s var(--ease), width .3s var(--ease), gap .3s var(--ease);
}
.contact-bar__btn svg{ width:32px; height:32px; padding:9px; box-sizing:border-box; flex-shrink:0; }
.contact-bar__btn span{
  max-width:0; overflow:hidden; white-space:nowrap; font-size:.72rem; font-weight:600;
  transition:max-width .3s var(--ease);
}
.contact-bar:hover .contact-bar__btn{ width:auto; padding:0 12px 0 0; gap:6px; }
.contact-bar:hover .contact-bar__btn span{ max-width:100px; }
.contact-bar__btn--wpp{ background:#25D366; color:#fff; }
.contact-bar__btn--form{ background:rgba(255,255,255,.1); color:#fff; }

@media (max-width:640px){
  .contact-bar{ left:16px; right:16px; bottom:16px; transform:none; padding:6px; justify-content:space-between; }
  .contact-bar.is-hidden{ transform:translateY(16px); }
  .contact-bar__text{ display:none; }
  .contact-bar__btn{ width:auto; padding:0 12px 0 0; gap:6px; }
  .contact-bar__btn span{ max-width:100px; }
}

/* ============================================================
   SECTION WRAPPERS (paddings/borders comuns entre páginas)
   ============================================================ */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); box-sizing:border-box; }
.section{
  padding:clamp(64px,10vw,120px) 0; min-height:100svh; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
}
.section--alt{ background:var(--bg-alt); }
.section--border-top{ border-top:none; }

/* ============================================================
   TEMA CLARO — alterna com as seções escuras ao rolar a página
   ============================================================ */
.section--light{
  --bg: #F4F1EB;
  --bg-alt: #F4F1EB;
  --surface: #FFFFFF;
  --surface-2: #F4F1EB;
  --border: rgba(20,20,15,.08);
  --border-strong: rgba(20,20,15,.15);
  --text: #16160F;
  --text-dim: #5B5C52;
  --text-faint: #8C8D80;
  --shadow: rgba(20,20,15,.1);
  --shadow-strong: rgba(20,20,15,.16);

  --glass-1: rgba(20,20,15,.025);
  --glass-2: rgba(20,20,15,.035);
  --glass-3: rgba(20,20,15,.045);
  --glass-border: rgba(20,20,15,.08);
  --glass-border-2: rgba(20,20,15,.1);
  --glass-border-strong: rgba(20,20,15,.15);
  --glass-border-strong-2: rgba(20,20,15,.2);

  --title-grad-a: #16160F;
  --title-grad-b: #55564C;

  background:var(--bg); color:var(--text);
}
.section--light.section--alt{ background:var(--bg-alt); }

/* ============================================================
   SHOWREEL (Sobre) — sites + automações, animado
   ============================================================ */
.sr{
  width:100%; max-width:370px; aspect-ratio:370/410;
  background:#0A0A0A; color:#fff; border-radius:var(--r-card); overflow:hidden; position:relative;
  font-family:var(--font-display); container-type:size;
}
.sr *{ box-sizing:border-box; margin:0; padding:0; }
.sr .sr-c{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.sr .sr-c.on{ opacity:1; }
.sr .sr-topo{
  position:absolute; top:7cqw; left:7cqw; right:7cqw; font-size:2.9cqw; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:#777;
  display:flex; align-items:center; gap:3cqw;
}
.sr .sr-topo::before{ content:""; width:6cqw; height:1px; background:#555; }
.sr .on .sr-topo{ animation:srFadeUp .8s .1s both; }

/* 1. frase */
.sr .s1{ display:grid; place-items:center; }
.sr .sr-frase{ text-align:center; font-weight:600; letter-spacing:-.04em; text-transform:uppercase; font-size:15cqw; line-height:1.02; }
.sr .sr-frase div{ overflow:hidden; padding:0 2cqw; }
.sr .sr-frase span{ display:inline-block; transform:translateY(105%); color:#fff; }
.sr .s1.on .sr-frase span{ animation:srLinhaSobe .9s cubic-bezier(.2,.8,.1,1) both, srEsmaece 3.6s linear both; }
.sr .s1.on .sr-frase div:nth-child(2) span{ animation-delay:.12s, 0s; }
.sr .s1.on .sr-frase div:nth-child(3) span{ animation-delay:.24s, 0s; }
.sr .s1.on .sr-frase div:nth-child(4) span{ animation-delay:.36s, 0s; }
.sr .s1.on .sr-frase{ animation:srRespira 3.6s ease-out both; }
@keyframes srLinhaSobe{ to{ transform:none; } }
@keyframes srEsmaece{ 0%,55%{ color:#fff; } 100%{ color:#4a4a4a; } }
@keyframes srRespira{ from{ transform:scale(1); } to{ transform:scale(1.06); } }

/* 2. mosaico */
.sr .sr-mosaico{
  position:absolute; left:-45%; top:-35%; width:190%;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2cqw; transform:rotate(-8deg);
}
.sr .sr-mosaico img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:1.2cqw; display:block; }
.sr .s2.on .sr-mosaico{ animation:srPanorama 3.8s cubic-bezier(.3,.6,.2,1) both; }
@keyframes srPanorama{ from{ transform:rotate(-8deg) translate(6%,4%) scale(1.25); } to{ transform:rotate(-8deg) translate(-8%,-6%) scale(1); } }

/* 3. projetos */
.sr .sr-proj{ position:absolute; left:7cqw; right:7cqw; top:20cqw; opacity:0; }
.sr .sr-proj img{ width:100%; aspect-ratio:1900/938; object-fit:cover; border-radius:2cqw; display:block; box-shadow:0 0 0 1px #222; }
.sr .sr-proj h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; font-size:8cqw; line-height:1; margin-top:7cqw; }
.sr .sr-proj p{ font-size:3.4cqw; color:#8a8a8a; font-weight:500; margin-top:2cqw; letter-spacing:-.01em; }
.sr .s3.on .sr-proj{ animation:srProj 1.8s cubic-bezier(.2,.8,.2,1) both; }
.sr .s3.on .sr-proj:nth-child(3){ animation-delay:1.8s; }
.sr .s3.on .sr-proj:nth-child(4){ animation-delay:3.6s; animation-name:srProjFim; }
.sr .s3.on .sr-proj img{ animation:srKenburns 1.8s ease-out both; }
.sr .s3.on .sr-proj:nth-child(3) img{ animation-delay:1.8s; }
.sr .s3.on .sr-proj:nth-child(4) img{ animation-delay:3.6s; }
@keyframes srProj{ 0%{ opacity:0; transform:translateY(5cqw); } 18%{ opacity:1; transform:none; } 82%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translateY(-4cqw); } }
@keyframes srProjFim{ 0%{ opacity:0; transform:translateY(5cqw); } 18%{ opacity:1; transform:none; } 100%{ opacity:1; } }
@keyframes srKenburns{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

/* 4. automações */
.sr .sr-auto-tit{ position:absolute; left:7cqw; right:7cqw; top:17cqw; font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; font-size:8cqw; line-height:1.05; }
.sr .sr-auto-tit em{ font-style:normal; color:#8a8a8a; }
.sr .s4.on .sr-auto-tit{ animation:srFadeUp .9s .2s both; }
.sr .sr-auto-lista{ position:absolute; left:7cqw; right:7cqw; top:47cqw; list-style:none; }
.sr .sr-auto-lista li{
  display:flex; align-items:center; gap:3cqw; padding:2.6cqw 0; border-top:1px solid #222;
  font-size:3.9cqw; font-weight:500; letter-spacing:-.01em; color:#555; opacity:0;
}
.sr .sr-auto-lista li::before{ content:"✓"; font-size:3.2cqw; color:#333; width:4cqw; }
.sr .s4.on .sr-auto-lista li{ animation:srItemOn .5s both, srItemAtiva .4s both; }
.sr .s4.on .sr-auto-lista li:nth-child(1){ animation-delay:.7s, 1.3s; }
.sr .s4.on .sr-auto-lista li:nth-child(2){ animation-delay:.85s, 1.9s; }
.sr .s4.on .sr-auto-lista li:nth-child(3){ animation-delay:1s, 2.5s; }
.sr .s4.on .sr-auto-lista li:nth-child(4){ animation-delay:1.15s, 3.1s; }
.sr .s4.on .sr-auto-lista li::before{ animation:srCheckOn .4s both; }
.sr .s4.on .sr-auto-lista li:nth-child(1)::before{ animation-delay:1.3s; }
.sr .s4.on .sr-auto-lista li:nth-child(2)::before{ animation-delay:1.9s; }
.sr .s4.on .sr-auto-lista li:nth-child(3)::before{ animation-delay:2.5s; }
.sr .s4.on .sr-auto-lista li:nth-child(4)::before{ animation-delay:3.1s; }
@keyframes srItemOn{ from{ opacity:0; transform:translateY(2cqw); } to{ opacity:1; transform:none; } }
@keyframes srItemAtiva{ to{ color:#fff; } }
@keyframes srCheckOn{ to{ color:#fff; } }
.sr .sr-barra{ position:absolute; left:7cqw; right:7cqw; bottom:13cqw; height:1px; background:#222; }
.sr .sr-barra i{ display:block; height:100%; width:0; background:#fff; }
.sr .s4.on .sr-barra i{ animation:srEnche 2.6s .9s cubic-bezier(.4,0,.2,1) both; }
@keyframes srEnche{ to{ width:100%; } }
.sr .sr-barra-txt{
  position:absolute; left:7cqw; right:7cqw; bottom:7cqw; display:flex; justify-content:space-between;
  font-size:2.8cqw; color:#666; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
}
.sr .sr-barra-txt span:last-child{ opacity:0; }
.sr .s4.on .sr-barra-txt span:last-child{ animation:srFadeUp .5s 3.5s both; color:#fff; }

/* 5. fechamento */
.sr .s5{ display:grid; place-items:center; text-align:center; }
.sr .sr-fim h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.04em; font-size:13cqw; line-height:1; }
.sr .sr-fim p{ font-size:4.4cqw; font-weight:500; letter-spacing:-.01em; margin-top:3cqw; color:#bbb; }
.sr .sr-fim .sr-linha{ display:block; width:0; height:1px; background:#555; margin:6cqw auto; }
.sr .sr-fim small{ display:block; font-size:3cqw; letter-spacing:.18em; text-transform:uppercase; color:#777; font-weight:500; }
.sr .s5.on .sr-fim h2{ animation:srBlurIn 1s .1s both; }
.sr .s5.on .sr-fim p{ animation:srFadeUp .8s .6s both; }
.sr .s5.on .sr-fim .sr-linha{ animation:srLinhaCresce .8s 1s cubic-bezier(.4,0,.2,1) both; }
.sr .s5.on .sr-fim small{ animation:srFadeUp .8s 1.3s both; }
@keyframes srLinhaCresce{ to{ width:14cqw; } }

@keyframes srFadeUp{ from{ opacity:0; transform:translateY(3cqw); } to{ opacity:1; transform:none; } }
@keyframes srBlurIn{ from{ opacity:0; filter:blur(3cqw); transform:scale(1.08); } to{ opacity:1; filter:none; transform:none; } }

@media (prefers-reduced-motion:reduce){ .sr *{ animation-duration:.01s!important; } }