:root{
  --bg:#060609; --bg2:#09090D; --bg3:#0C0913;
  --card:#111017; --card2:#15121E; --border:rgba(255,255,255,.08);
  --white:#F7F7FA; --gray-light:#C2BECE;
  --purple:#7C3CFF; --purple2:#8B4CFF; --purple-light:#A86DFF; --lav:#C1A0FF;
  --glow:rgba(124,60,255,.35); --max:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{position:relative;margin:0;background:var(--bg);color:var(--white);font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.no-scroll{overflow:hidden}
.page-hero-bg{position:absolute;top:0;left:0;width:100%;aspect-ratio:1672/941;object-fit:cover;object-position:center;pointer-events:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max),calc(100% - 48px));margin:auto;position:relative}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.eyebrow{font-size:11px;letter-spacing:.24em;font-weight:600;color:var(--purple-light);margin:0 0 16px;text-transform:uppercase}
h1,h2{font-weight:800;letter-spacing:-.03em;margin:0}
h1 span,h2 span{color:var(--purple-light)}
.section-head-center{max-width:640px;margin:0 auto 40px;text-align:center}
h2{font-size:clamp(32px,4vw,52px);line-height:1.08}
/* Bloco 2 (Serviços): headline em duas linhas de verdade, como no Bloco 3 —
   sem isso "Tudo que seu social precisa." quebra sozinha em cima da quebra
   forçada da segunda linha, virando 3 linhas em vez de 2. */
#servicos .section-head-center{max-width:820px}
.section-lead{color:#fff;font-size:16px;margin:16px 0 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 26px;font-weight:600;font-size:14px;transition:.25s ease;border:1px solid transparent;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(3px)}
.btn-primary{background:linear-gradient(135deg,#fff,var(--purple-light) 45%,var(--purple2) 95%);box-shadow:0 14px 40px rgba(124,60,255,.35);color:#14101c}
.btn-primary:hover{box-shadow:0 18px 54px rgba(124,60,255,.55)}
.btn-small{padding:11px 20px;font-size:13px}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}}

/* HEADER */
.site-header{position:sticky;top:0;z-index:50;background:transparent;transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.site-header.is-scrolled{background:rgba(6,6,9,.8);backdrop-filter:blur(18px);border-bottom-color:var(--border)}
.nav-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:76px}
.brand{grid-column:1}
.brand img{width:126px}
.nav-links{grid-column:2;justify-self:center;display:flex;align-items:center;gap:30px;font-size:14px;color:#fff}
.nav-links a:hover{color:#fff}
.faq-trigger{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0}
.faq-trigger:hover{color:#fff}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:0}
.menu-toggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:.25s}
.mobile-nav{display:none;flex-direction:column;gap:4px;padding:12px 24px 24px;background:rgba(6,6,9,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.mobile-nav a,.mobile-nav .faq-trigger{padding:12px 0;font-size:15px;color:#fff;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.mobile-nav .btn{margin-top:14px;width:100%;border-bottom:none}
.mobile-nav.is-open{display:flex}

/* HERO */
.hero{position:relative;overflow:hidden;padding:56px 0 40px;text-align:center}
.hero-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,6,9,.1),rgba(6,6,9,.55) 82%,var(--bg));pointer-events:none}
.hero-plant{position:absolute;bottom:0;width:clamp(110px,13vw,220px);height:auto;z-index:1;pointer-events:none}
.hero-plant-l{left:0}
.hero-plant-r{right:0}
.hero-inner{position:relative;z-index:2;max-width:900px}
.hero-main{position:relative}
.hero-devices{position:relative;height:420px;margin-bottom:-40px}
.left-device-cluster,.right-device-cluster{display:contents}
.device-lg{position:absolute;top:0;width:290px;height:auto;z-index:2}
.device-lg-l{left:0}
.device-lg-r{right:0}
.device-sm{position:absolute;top:150px;width:180px;height:auto;z-index:1}
.device-sm-l{left:-80px}
.device-sm-r{right:-80px;top:200px}
.hero-copy{position:relative;z-index:2;max-width:780px;margin:0 auto}
.hero h1{font-size:clamp(36px,5vw,64px);line-height:1.1;margin:14px 0}
.hero-lead{color:#fff;font-size:17px;max-width:580px;margin:0 auto 28px}
.benefits-row{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:32px;margin-top:36px;font-size:13px;text-align:left}
.benefits-row>div{display:flex;align-items:center;gap:10px}
.benefits-row .ico{color:var(--purple-light);width:26px;height:26px;flex:none}
.benefits-row span:last-child{color:#fff}
@media(min-width:961px){
  /* Mapa de posições do PROMPT_PIXEL_PERFECT_HERO_NEXO.md, medido sobre o artboard 1672x941.
     O header (logo/nav/CTA) é um componente sticky à parte no site (altura real: 76px), então
     o restante do artboard (76-941 = 865px) é reescalado para a caixa .hero, que fica logo
     abaixo do header. Header(76) + hero(865) = 941 no viewport de QA (1672x941). */
  .hero{aspect-ratio:1672/865;padding:0}
  .hero-plant-l{top:22.89%;bottom:auto;width:27.36%;z-index:1}
  .hero-plant-r{top:22.77%;bottom:auto;width:28.13%;z-index:1}
  .hero-inner,.hero-main,.hero-devices,.hero-copy{position:static;max-width:none;height:auto;width:auto;margin:0}
  /* Celular + cartão formam um único cluster: o cartão é posicionado em % relativas
     ao próprio celular (não ao hero), então os dois escalam sempre juntos e mantêm
     a mesma relação visual (base alinhada, ligeiramente atrás/para fora) em qualquer
     largura, em vez de dois elementos com offsets independentes que se descolam. */
  .left-device-cluster,.right-device-cluster{display:block;position:absolute;top:20%;width:25%;z-index:4}
  .left-device-cluster{left:7.92%}
  .right-device-cluster{right:8.38%}
  .left-device-cluster .device-lg,.right-device-cluster .device-lg{position:relative;width:100%;left:auto;right:auto;top:auto;height:auto;z-index:3}
  .left-device-cluster .device-sm,.right-device-cluster .device-sm{position:absolute;top:auto;height:auto;z-index:2}
  .device-sm-l{width:73%;left:-30%;bottom:1%;transform:rotate(4deg);transform-origin:bottom center}
  .device-sm-r{width:56%;left:80%;right:auto;bottom:0;transform:rotate(-6deg);transform-origin:bottom center}
  .hero .eyebrow{position:absolute;left:50%;top:20%;transform:translateX(-50%);width:max-content;z-index:6;font-size:clamp(11px,.93vw,15.5px);color:#f2f2f5;margin:0;white-space:nowrap}
  .hero h1{position:absolute;left:50%;top:29%;transform:translateX(-50%);width:max-content;max-width:none;z-index:6;margin:0;font-size:clamp(26px,3.59vw,60px);line-height:1;letter-spacing:-.04em;white-space:nowrap;text-align:center}
  .hero-lead{position:absolute;left:31.7%;top:52%;width:36.6%;max-width:none;z-index:6;margin:0;font-size:clamp(14px,1.23vw,20.5px);line-height:1.42;color:#fff;white-space:nowrap}
  .hero .btn-primary{position:absolute;left:38.7%;top:67%;width:21.23%;height:clamp(40px,4.13vw,69px);z-index:6;font-size:clamp(14px,1.17vw,19.5px)}
  .benefits-row{position:absolute;left:14%;top:85.43%;width:72.13%;z-index:8;justify-content:space-between;flex-wrap:nowrap;gap:0;font-size:clamp(12px,1.05vw,17.5px)}
  .benefits-row>div{position:relative;padding-left:24px}
  .benefits-row>div:first-child{padding-left:0}
  .benefits-row>div:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:60%;background:rgba(255,255,255,.15)}
  .benefits-row .ico{width:clamp(24px,2.63vw,44px);height:clamp(24px,2.63vw,44px)}
  /* Header: mesma lógica de escala pelo artboard master (1672px de largura) */
  .brand img{width:clamp(110px,10.47vw,175px)}
  .nav-links{gap:clamp(32px,3.6vw,60px);font-size:clamp(14px,1.02vw,17px)}
  .site-header .btn-small{padding:clamp(8px,1vw,14px) clamp(20px,1.8vw,32px);font-size:clamp(14px,1.14vw,18px)}
}

/* HERO MOBILE — componente exclusivo para <=767px, independente do Hero Desktop acima.
   Duas composições diferentes (arte, copy-position e estrutura), alternadas só por
   display via media query — nunca "espremer" o Hero Desktop para caber no mobile. */
.nexo-hero-mobile{display:none}
@media(min-width:768px){
  .nexo-hero-mobile{display:none!important}
  .nexo-hero-desktop{display:block}
}
@media(max-width:767px){
  .nexo-hero-desktop{display:none!important}
  .page-hero-bg{display:none}
  .nexo-hero-mobile{
    display:block;position:relative;overflow:hidden;width:100%;min-height:100svh;
    color:var(--nexo-mobile-white,#f7f7fa);
    background:
      radial-gradient(circle at 50% 31%,rgba(116,41,220,.22),transparent 34%),
      radial-gradient(circle at 50% 69%,rgba(86,25,157,.14),transparent 34%),
      linear-gradient(180deg,#07050c 0%,#06050a 58%,#050408 100%);
    isolation:isolate;
  }
  .nhm-visual{position:relative;z-index:3;width:100%;margin-top:-4px}
  .nhm-visual::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:13%;background:linear-gradient(180deg,rgba(5,4,8,0),#050408 91%);pointer-events:none}
  .nhm-scene{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
  .nhm-copy{position:relative;z-index:8;width:min(91%,720px);margin:-9px auto 0;text-align:center}
  .nhm-eyebrow{margin:0 0 17px;color:#c7c2d2;font-size:clamp(10px,2.75vw,13px);line-height:1.4;font-weight:500;letter-spacing:.30em;text-transform:uppercase}
  .nhm-headline{margin:0;color:#faf9fb;font-size:clamp(26px,8.8vw,60px);line-height:1.05;letter-spacing:-.052em;font-weight:800;text-wrap:balance}
  .nhm-headline .line{display:block;color:#faf9fb}
  .nhm-headline .accent{color:#9950ff}
  .nhm-body{width:min(92%,650px);margin:23px auto 0;color:#fff;font-size:clamp(16px,4.25vw,21px);line-height:1.42;font-weight:400;text-wrap:balance}
  .nhm-primary-cta{display:flex;align-items:center;justify-content:center;gap:12px;width:min(84%,480px);min-height:70px;margin:34px auto 60px;padding:0 22px;color:#fff;text-decoration:none;border-radius:999px;font-size:clamp(16px,4.6vw,24px);font-weight:500;white-space:nowrap;background:linear-gradient(100deg,#7030ff 0%,#8b36ff 45%,#6b20fb 100%);box-shadow:0 0 0 1px rgba(190,132,255,.48) inset,0 0 28px rgba(116,35,255,.42),0 10px 36px rgba(78,13,165,.24)}
  .nhm-primary-cta .arrow{font-size:1.38em;line-height:1}
}
@media(max-width:370px){
  .nhm-eyebrow{letter-spacing:.22em}
  .nhm-primary-cta{width:86%}
}

/* COMO FUNCIONA MOBILE — bloco "Do seu briefing ao resultado" exclusivo para <=767px:
   timeline neon sinuosa (SVG próprio) com 5 passos em zigue-zague, fiel à arte aprovada
   referencia-bloco-3-mobile-aprovada.png. O bloco desktop (.process-desktop) não é alterado. */
.cfm-section{display:none}
@media(min-width:768px){
  .cfm-section{display:none!important}
  .process-desktop{display:block}
}
@media(max-width:767px){
  .process-desktop{display:none!important}
  .cfm-section{
    display:block;position:relative;overflow:hidden;
    background:
      radial-gradient(circle at 50% 8%,rgba(122,43,255,.22),transparent 34%),
      radial-gradient(circle at 12% 96%,rgba(122,43,255,.18),transparent 20%),
      radial-gradient(circle at 88% 96%,rgba(122,43,255,.18),transparent 20%),
      linear-gradient(180deg,#05040a 0%,#0a0714 18%,#0d0819 48%,#07050e 100%);
  }
  .cfm-inner{max-width:430px;margin:0 auto;padding:64px 24px 80px;position:relative}
  .cfm-header{text-align:center;margin-bottom:0;position:relative;z-index:2}
  .cfm-header .eyebrow{color:#9950ff;letter-spacing:.30em;margin:0 0 20px}
  .cfm-headline{margin:0 auto;max-width:352px;color:#faf9fb;font-size:clamp(39px,10.5vw,44px);line-height:.98;font-weight:800;letter-spacing:-.035em}
  .cfm-headline span{color:#9950ff}
  .cfm-header .section-lead{max-width:310px;margin:20px auto 58px;font-size:14.5px;line-height:1.45}
  .cfm-timeline{position:relative;height:900px}
  .cfm-timeline::before{content:"";position:absolute;left:50%;top:50%;width:120%;height:70%;transform:translate(-50%,-50%);background:radial-gradient(circle at center,rgba(98,35,180,.14),transparent 60%);pointer-events:none;z-index:0}
  .cfm-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
  .cfm-path-glow{fill:none;stroke:rgba(133,54,255,.24);stroke-width:14;vector-effect:non-scaling-stroke;filter:blur(8px)}
  .cfm-path-main{fill:none;stroke:#8f48ff;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .cfm-step{position:absolute;left:0;right:0;z-index:2}
  .cfm-step--1{top:0}
  .cfm-step--2{top:185px}
  .cfm-step--3{top:370px}
  .cfm-step--4{top:570px}
  .cfm-step--5{top:760px}
  .cfm-node{position:absolute;top:0;width:66px;height:66px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 30%,#bb85ff 0%,#a45cff 50%,#7d35ff 100%);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;color:#fff;box-shadow:0 0 0 8px rgba(154,72,255,.10),0 0 24px rgba(137,57,255,.42)}
  .cfm-step--1 .cfm-node,.cfm-step--3 .cfm-node,.cfm-step--5 .cfm-node{left:21%}
  .cfm-step--2 .cfm-node,.cfm-step--4 .cfm-node{left:57%}
  .cfm-text{position:absolute;top:6px;right:8px;text-align:left}
  .cfm-step--1 .cfm-text,.cfm-step--3 .cfm-text,.cfm-step--5 .cfm-text{left:calc(21% + 47px)}
  .cfm-step--2 .cfm-text,.cfm-step--4 .cfm-text{left:calc(57% + 47px)}
  .cfm-step-title{font-size:17px;font-weight:700;line-height:1.15;margin:0 0 6px;color:#fff}
  .cfm-step-desc{margin:0;font-size:13.5px;line-height:1.35;color:#fff}
}

/* LOGO STRIP */
.logo-strip{padding:26px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2)}
.strip-label{text-align:center;color:#fff;font-size:13px;letter-spacing:.22em;font-weight:700;margin:0 0 24px}
/* Logos são normalizados por altura/peso óptico, nunca por largura fixa.
   Faixa sempre em rolagem automática infinita (nunca "quebra linha" e some
   um logo embaixo) — em qualquer largura, desktop incluído: os 7 logos
   nunca cabem todos numa linha só a partir de um certo ponto, então a
   única forma de mostrar todos sem cortar é rolando, nunca com flex-wrap. */
.logos-marquee{width:100%;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.logos-marquee::-webkit-scrollbar{display:none}
.logos{display:flex;align-items:center;flex-wrap:nowrap;justify-content:flex-start;gap:48px;width:max-content}
.logo-item{width:176px;height:76px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.logo-item img{display:block;width:auto;height:auto;max-width:156px;max-height:48px;object-fit:contain;opacity:.72;transition:opacity .25s ease}
.logo-item img:hover{opacity:1}
.logo-item--amavidda img{transform:scale(1.05)}
.logo-item--ama-flow img{transform:scale(1)}
.logo-item--everton img{transform:scale(1.15)}
.logo-item--bruna img{transform:scale(1.1)}
.logo-item--mj img{transform:scale(1.1)}
.logo-item.dup{display:flex}

/* SERVICES */
.services-section{position:relative;overflow:hidden;padding:130px 0 90px}
.services-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.services-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,6,9,.25),rgba(6,6,9,.55) 70%,var(--bg));pointer-events:none}
.services-section .container{position:relative;z-index:2}
.services-marquee{position:relative;z-index:2;margin:56px auto 0}
.services-cards{width:min(1680px,calc(100% - 48px));margin:0 auto;display:flex;justify-content:center;align-items:flex-end;gap:16px}
.services-cards img{width:calc((100% - 80px)/6);height:auto;aspect-ratio:852/1345;flex:0 0 auto;border-radius:22px;transform:rotate(var(--r));transition:transform .35s ease,box-shadow .35s ease}
.services-cards img.dup{display:none}
@media(min-width:1600px){.services-cards{width:min(1960px,calc(100% - 48px))}}
.services-cards img:hover{transform:rotate(0) translateY(-8px) scale(1.01);box-shadow:0 24px 60px rgba(124,60,255,.35)}

/* PORTFOLIO — Bloco 3: vídeos verticais em faixa rolável (largura variável, sem artboard fixo) */
.pf-section{position:relative;width:100%;overflow:hidden;isolation:isolate;background:var(--bg);padding:0}
.pf-stage{position:relative;width:100%;min-height:900px;padding:76px 0 64px;margin:0 auto}
.pf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;user-select:none}
.pf-heading{position:relative;z-index:4;width:min(92%,900px);margin:0 auto;text-align:center}
.pf-heading .eyebrow{color:var(--purple-light);font-size:clamp(11px,1.1vw,16px)}
.pf-heading h2{font-size:clamp(30px,4.06vw,52px);line-height:1.05}
.pf-heading .section-lead{margin:20px auto 0;max-width:820px;font-size:clamp(14px,1.2vw,16px)}
.pf-cards-wrap{position:relative;z-index:3;width:100%;max-width:1660px;margin:0 auto}
.pf-cards{width:100%;display:flex;gap:24px;overflow-x:auto;padding:48px 24px 30px;scroll-snap-type:x mandatory;scrollbar-width:none}
.pf-cards::-webkit-scrollbar{display:none}
.pf-card{display:block;width:min(300px,74vw);aspect-ratio:9/16;height:auto;flex:0 0 auto;object-fit:cover;background:#000;border-radius:22px;filter:drop-shadow(0 18px 28px rgba(0,0,0,.28));scroll-snap-align:center;user-select:none}
.pf-nav{position:absolute;z-index:6;top:50%;width:64px;height:64px;padding:0;border:0;background:transparent;transform:translateY(-50%);cursor:pointer;transition:transform .22s ease,filter .22s ease}
.pf-nav:hover{transform:translateY(-50%) scale(1.05);filter:drop-shadow(0 0 14px rgba(151,72,255,.34))}
.pf-nav img{width:100%;height:100%;display:block}
.pf-prev{left:8px}
.pf-next{right:8px}
@media(prefers-reduced-motion:reduce){.pf-nav{transition:none}}
@media(max-width:760px){
  .pf-nav{display:none}
}

/* PROCESS */
.process{position:relative;padding:70px 0;overflow:hidden}
.process-glow{position:absolute;inset:0;background:radial-gradient(700px circle at 50% 55%,var(--glow),transparent 70%);pointer-events:none}
.timeline-wave{position:relative;z-index:1;margin-top:56px;height:190px}
.wave-line{position:absolute;top:10px;left:0;width:100%;height:150px;object-fit:fill}
.step{position:absolute;top:26px;left:var(--pos);transform:translate(-50%,var(--off));text-align:center;width:170px}
.step i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--purple-light),var(--purple2));font-style:normal;font-weight:700;font-size:14px;margin:0 auto 14px;box-shadow:0 0 30px var(--glow)}
.step h3{font-size:15px;margin:0 0 6px;font-weight:700}
.step p{font-size:12px;color:#fff;margin:0}

/* TESTIMONIALS */
.testimonials{padding:70px 0}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.quotes blockquote{margin:0;padding:30px 26px;border-radius:20px;background:rgba(255,255,255,.03);backdrop-filter:blur(14px);border:1px solid var(--border);transition:.3s ease}
.quotes blockquote:hover{box-shadow:0 0 44px var(--glow);border-color:rgba(168,109,255,.3);transform:translateY(-4px)}
.avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px}
.quotes p{color:#fff;font-size:15px;line-height:1.6;margin:0 0 20px}
.quotes footer{font-size:13px;font-weight:700;color:#fff}
.quotes footer span{display:block;font-weight:500;color:#fff;font-size:12px;margin-top:3px}

/* CTA FINAL */
.cta-section{position:relative;padding:0;overflow:hidden;text-align:center;min-height:560px;display:flex;align-items:center}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cta-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,.5),rgba(5,5,7,.25) 40%,rgba(5,5,7,.85))}
.cta-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:90px 0}
.cta-inner .eyebrow{color:#fff}
.cta-lead{color:#fff;margin:18px auto 28px;max-width:520px;font-size:15px}

/* FOOTER */
.footer{padding:36px 0 22px;border-top:1px solid var(--border);background:var(--black,#050507)}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-top img{width:126px}
.footer-faq{display:flex;align-items:center;gap:22px}
.footer-faq .faq-trigger{background:none;border:none;color:#fff;font:inherit;font-size:13px;cursor:pointer;padding:0}
.footer-faq .faq-trigger:hover{color:var(--purple-light)}
.social-icons{display:flex;gap:12px}
.social-icons a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff;transition:.25s}
.social-icons svg{width:15px;height:15px}
.social-icons a:hover{background:var(--purple2);border-color:var(--purple2)}
.footer-bottom{border-top:1px solid var(--border);margin-top:20px;padding-top:16px;display:flex;justify-content:space-between;gap:16px;color:#fff;font-size:11px}

/* FAQ DRAWER */
.faq-drawer{position:fixed;inset:0;z-index:100;visibility:hidden}
.faq-drawer.is-open{visibility:visible}
.faq-drawer-backdrop{position:absolute;inset:0;background:rgba(5,5,7,.7);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease}
.faq-drawer.is-open .faq-drawer-backdrop{opacity:1}
.faq-drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(460px,92vw);background:var(--bg2);border-left:1px solid var(--border);padding:28px 26px;overflow-y:auto;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq-drawer.is-open .faq-drawer-panel{transform:translateX(0)}
.faq-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.faq-drawer-head h3{margin:0;font-size:20px}
.faq-close{background:none;border:1px solid var(--border);color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border);padding:18px 0}
.faq-item summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{color:var(--purple-light);font-size:18px;flex:0 0 auto;transition:transform .25s ease}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
.faq-item p{color:#fff;margin:12px 0 0;font-size:14px;line-height:1.6}

/* RESPONSIVE */
@media(max-width:960px){
  .nav-links{display:none}
  .menu-toggle{display:flex}
  /* Bloco 2 em mobile/tablet: rolagem automática (direita → esquerda) em loop,
     controlada via JS (script.js) sobre um contêiner com overflow-x real, para
     continuar podendo arrastar/rolar com o dedo a qualquer momento — a rolagem
     automática pausa ao tocar/clicar e retoma sozinha pouco depois. Sem
     rotação e com gap menor, para os cards ficarem mais próximos e visíveis. */
  .services-marquee{width:100%;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .services-marquee::-webkit-scrollbar{display:none}
  .services-cards{width:max-content;justify-content:flex-start;gap:10px}
  .services-cards img.dup{display:block}
  .services-cards img{width:34vw;max-width:320px;flex:0 0 auto;transform:none}
  .quotes{grid-template-columns:1fr}
  .quotes blockquote{text-align:center}
}
@media(max-width:760px){
  .device-lg{width:190px}
  .hero-devices{height:300px}
  .device-sm{width:120px;top:40px}
  .device-sm-r{top:70px}
  .hero-plant{width:90px}
}
@media(max-width:640px){
  .nav-wrap{height:66px;gap:10px;grid-template-columns:auto 1fr auto auto}
  .brand{grid-column:1;grid-row:1}
  .nav-links{grid-row:1}
  .site-header .btn-small{grid-column:3;grid-row:1;min-height:44px;padding:0 14px;font-size:12.5px;white-space:nowrap}
  .menu-toggle{grid-column:4;grid-row:1}
  .brand img{width:108px}
  .hero{padding-top:44px}
  .hero h1{font-size:38px}
  .hero-lead{font-size:15px}
  .hero-arc{width:560px}
  .hero-devices{height:210px;margin-bottom:-20px}
  .device-lg{width:105px}
  .device-sm{display:none}
  .hero-plant{display:none}
  .benefits-row{grid-template-columns:1fr 1fr;display:grid;gap:14px;text-align:left}
  /* Logos em telas pequenas: mesma rolagem automática da base, só menores. */
  .logos{gap:34px}
  .logo-item{width:140px;height:60px}
  .logo-item img{max-width:120px;max-height:38px}
  .services-section{padding:80px 0 60px}
  #servicos h2{font-size:clamp(20px,5.5vw,30px)}
  .services-cards img{width:88vw;max-width:340px}
  .timeline-wave{height:auto;display:flex;flex-direction:column;gap:24px;margin-top:40px}
  .wave-line{display:none}
  .step{position:static;transform:none!important;width:auto;text-align:left;display:grid;grid-template-columns:50px 1fr;column-gap:14px;align-items:start}
  .step i{margin:0}
  .cta-inner{padding:64px 0}
  .footer-bottom{flex-direction:column}
}