:root{
  --bg:#03080f; --surface:#060f1c; --navy:#07182D; --line:#16457e; --red:#ED1C24;
  --ink:#f2f4f7; --ink-2:#b4bcc8; --muted:#8a93a3; --dim:#ffffff24;
  --pad:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:Montserrat,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.acc{color:var(--red)}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
section{position:relative}

/* ---------- carregamento ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
.loader svg{width:64px;fill:var(--ink);opacity:.9}
.loader .track{position:absolute;left:50%;bottom:18%;width:min(240px,50vw);height:2px;transform:translateX(-50%);background:#ffffff14;overflow:hidden}
.loader .track i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.loaded .loader{opacity:0;visibility:hidden}

/* ---------- topo ---------- */
.top{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:20;width:min(1180px,calc(100% - 2 * var(--pad)));height:62px;display:flex;align-items:center;gap:28px;
  padding:0 8px 0 22px;border-radius:999px;border:1px solid #ffffff1c;background:linear-gradient(180deg,#0b1d36b3,#07182D99);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 20px 50px #0007,inset 0 1px 0 #ffffff14}
.lock{display:flex;align-items:center;gap:12px}
.lock svg{width:44px;height:auto;fill:var(--ink)}
.lock i{width:1px;height:26px;background:#ffffff33}
.lock b{display:block;font-weight:800;letter-spacing:3px;font-size:15px;line-height:1}
.lock small{display:block;font-weight:600;letter-spacing:6.5px;font-size:8px;color:var(--ink-2);margin-top:4px}
.top nav{display:flex;gap:32px;margin:0 auto;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-2)}
.top nav a{transition:color .25s}
.top nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  padding:15px 24px;border:1px solid #ffffff40;border-radius:999px;transition:border-color .25s,background .25s,transform .15s var(--ease)}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:scale(.98)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:#d0161d;border-color:#d0161d}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translate(3px,-3px)}

/* ---------- hero: palco fixo enquanto a rolagem conta a história ---------- */
.hero{height:300vh}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;isolation:isolate}
.glow{position:absolute;inset:0;z-index:-3;
  background:radial-gradient(55% 65% at 70% 48%,#0b2748 0%,#061528 38%,transparent 72%),
             radial-gradient(35% 35% at 88% 88%,#ed1c2414,transparent 70%)}
.streak{position:absolute;z-index:-2;left:-20%;right:-20%;top:58%;height:60px;margin-top:-30px;transform:rotate(-17deg)}
.streak::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent 30%,#ed1c24aa 60%,#ff8a8f 65%,transparent 80%)}
.streak svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.spark-glow{fill:none;stroke:#ed1c24;stroke-width:6;opacity:.35;filter:blur(4px)}
.spark-core{fill:none;stroke:#ffd9db;stroke-width:1.4}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.fallback{display:none;position:absolute;right:6%;top:50%;width:40%;transform:translateY(-50%);z-index:-1;opacity:.85}
.no-webgl .fallback{display:block}

.layer{position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);max-width:720px;will-change:transform,opacity}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--ink-2);margin-bottom:24px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--red)}
h1,h2,h3{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.92}
h1{font-size:clamp(46px,7vw,104px)}
.b h2{font-size:clamp(34px,4.6vw,68px)}
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.loaded .a .ln>span,.b.in .ln>span{transform:none}
.ln:nth-child(2)>span{transition-delay:.08s}
.lead{max-width:44ch;margin-top:26px;font-size:clamp(15px,1.25vw,17px);line-height:1.6;color:var(--ink-2)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.fade{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .45s,transform 1s var(--ease) .45s}
.loaded .fade{opacity:1;transform:none}
.b{opacity:0;pointer-events:none;left:auto;right:var(--pad);max-width:560px;text-align:right}
.chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:28px}
.chips span{font-size:11px;font-weight:700;letter-spacing:2px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#07182Dcc;backdrop-filter:blur(8px)}
.chips span:first-child{border-color:var(--red)}
.calm .b{left:var(--pad);right:auto;text-align:left} .calm .chips{justify-content:flex-start}

/* ---------- manifesto: palavra por palavra ---------- */
.manifesto{padding:22vh var(--pad) 18vh}
.manifesto p{font-size:clamp(28px,4.2vw,64px);font-weight:800;line-height:1.08;letter-spacing:-.02em;max-width:22ch}
.manifesto .w{color:var(--dim);transition:color .25s}
.manifesto .w.on{color:var(--ink)}
.manifesto .w.on.acc{color:var(--red)}

/* ---------- integrações ---------- */
.integra{padding:40px 0 120px;text-align:center}
.integra h2,.faq h2{font-size:clamp(26px,3vw,44px);font-weight:800;text-transform:none;letter-spacing:-.01em;line-height:1.1}
.decrypt .x{color:var(--muted)}
.loop{margin-top:56px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.loop-track{display:flex;align-items:center;gap:72px;width:max-content;animation:loop 32s linear infinite}
.loop:hover .loop-track{animation-play-state:paused}
.lg{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink);opacity:.62;transition:opacity .3s;white-space:nowrap}
.lg:hover{opacity:1}
.lg img{height:30px;width:auto}
@keyframes loop{to{transform:translateX(-50%)}}

/* ---------- números ---------- */
.numbers{padding:120px var(--pad);border-top:1px solid #ffffff12}
.numbers h2{font-size:clamp(28px,3.4vw,48px);max-width:16ch}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:64px;background:#16457e44;border:1px solid #16457e44}
.num-grid div{background:var(--bg);padding:48px 36px 40px}
.num-grid b{display:block;font-size:clamp(56px,7vw,112px);font-weight:900;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.num-grid span{display:block;margin-top:18px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600}
.num-grid div:first-child b{color:var(--red)}

/* ---------- método ---------- */
.method{height:220vh}
.method .pin{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.method h2{font-size:clamp(30px,4vw,60px);max-width:14ch}
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:72px;padding-top:34px}
.steps::before,.steps .fill{content:"";position:absolute;left:0;top:0;height:1px;background:#ffffff1f;width:100%}
.steps .fill{background:var(--red);transform-origin:left;transform:scaleX(var(--p,0))}
.step small{display:block;font-size:13px;font-weight:700;letter-spacing:2px;color:var(--muted);transition:color .3s}
.step b{display:block;font-size:clamp(17px,1.5vw,22px);font-weight:800;text-transform:uppercase;margin:16px 0 12px;color:var(--muted);transition:color .3s}
.step p{font-size:15px;line-height:1.6;color:#8a93a399;transition:color .3s}
.step.on small{color:var(--red)} .step.on b{color:var(--ink)} .step.on p{color:var(--ink-2)}

/* ---------- soluções: seção presa, título gigante troca, tela real inclinada ---------- */
.services{height:calc(var(--n) * 100vh)}
.services .pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-columns:1fr 1.15fr 170px;align-items:center;gap:48px;padding:0 var(--pad)}
.services .pin::before{content:"";position:absolute;right:10%;top:20%;width:55%;height:60%;z-index:-1;
  background:radial-gradient(closest-side,#ed1c2440,transparent);filter:blur(40px)}
.svc-titles{position:relative;height:60vh}
.svc-t{position:absolute;inset:auto 0 0 0;opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.svc-t.on{opacity:1;transform:none}
.svc-t h3{font-size:clamp(40px,5vw,86px);line-height:.88;letter-spacing:-.03em}
.svc-t p{margin-top:24px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:36ch}
.svc-screen{position:relative;perspective:1600px;align-self:center}
.svc-frame{position:relative;aspect-ratio:16/10;border:10px solid #0c1018;border-radius:10px;background:#0c1018;
  box-shadow:0 60px 120px #000c,0 0 0 1px #ffffff14;transform:rotateY(-18deg) rotateX(6deg);transform-origin:left center;transition:transform 1s var(--ease)}
.svc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .7s var(--ease)}
.svc-frame img.on{opacity:1}
.svc-index{list-style:none;padding:0;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);display:grid;gap:14px}
.svc-index li{display:flex;gap:10px;align-items:center;transition:color .3s}
.svc-index li::before{content:"";width:0;height:2px;background:var(--red);transition:width .4s var(--ease)}
.svc-index li.on{color:var(--ink)} .svc-index li.on::before{width:18px}


/* ---------- perguntas ---------- */
.faq{padding:140px var(--pad);display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.faq h2{position:sticky;top:120px}
.faq details{border-top:1px solid #ffffff1a}
.faq details:last-child{border-bottom:1px solid #ffffff1a}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:26px 0;font-size:clamp(16px,1.4vw,19px);font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;line-height:1;color:var(--red);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 28px;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:60ch}

/* ---------- chamada final + nome gigante ---------- */
.final{padding:120px var(--pad) 0;overflow:hidden;border-top:1px solid #ffffff12}
.final h2{font-size:clamp(34px,5vw,80px);max-width:16ch}
.final .ctas{margin-top:40px}
.giant{margin-top:10vh;padding-bottom:40px;line-height:.9;font-weight:900;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;user-select:none;
  font-size:clamp(72px,17vw,300px);display:block;text-align:center;letter-spacing:-.02em;
  background:linear-gradient(100deg,#5d6573 0%,#f2f4f7 calc(var(--sheen,30%) - 12%),#ffffff var(--sheen,30%),#8c95a3 calc(var(--sheen,30%) + 10%),#2a303a 70%,#9aa3b0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.giant small{display:block;font-size:.14em;letter-spacing:.55em;margin:.35em 0 0 .55em;line-height:1;font-weight:600;color:#6b7482;-webkit-text-fill-color:#6b7482}

footer{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:40px var(--pad);
  border-top:1px solid #ffffff12;font-size:12px;letter-spacing:1px;color:var(--muted)}

/* ---------- luz que segue o mouse (spotlight card): brilho interno + borda fina acesa perto do ponteiro ---------- */
.spot{position:relative;isolation:isolate}
.spot::before,.spot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s var(--ease);z-index:3}
.spot::before{background:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),#ffffff12,transparent 45%)}
.spot::after{padding:1px;background:radial-gradient(300px circle at var(--mx,-999px) var(--my,-999px),#ed1c24b0,#16457e80 38%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (hover:hover) and (pointer:fine){
  .spots:hover .spot::before,.spots:hover .spot::after,.spot:hover::before,.spot:hover::after{opacity:1}
}


/* ---------- torre de controle ---------- */
.torre{padding:140px var(--pad) 120px}
.torre h2{font-size:clamp(32px,4.2vw,62px);max-width:20ch}
.torre .sub{margin-top:22px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.painel{margin-top:56px;border:1px solid #16457e66;background:linear-gradient(#07182D,#050d19);box-shadow:0 60px 140px #000a;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto 1fr auto;overflow:hidden}
.painel-top{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:28px;padding:16px 22px;border-bottom:1px solid #16457e55}
.painel-top b{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.ao-vivo{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:2px;color:#4ade80;text-transform:uppercase}
.ao-vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.kpis{display:flex;gap:28px;margin-left:auto;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpis span b{font-size:18px;letter-spacing:0;color:var(--ink);margin-right:6px;font-variant-numeric:tabular-nums}
#torre-mapa{height:600px}
.leaflet-container#torre-mapa{background:#03080f}
.ruas{filter:invert(1) grayscale(1) brightness(.6) sepia(1) hue-rotate(180deg) saturate(1.7) contrast(1.1)}
.geral{all:unset;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink);padding:7px 12px;border:1px solid var(--line)}
.geral:hover{border-color:var(--ink)}
.geral:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.uf,.cid{background:none;border:0;box-shadow:none;padding:0;font-weight:700;letter-spacing:2px}
.uf{color:#16457e;font-size:13px}.cid{color:#b4bcc8;font-size:10px;letter-spacing:1px}
.uf::before,.cid::before{display:none}
.leaflet-container{font-family:Montserrat,sans-serif}
.leaflet-control-attribution{background:#03080fcc!important;color:#8a93a3!important;font-size:9px!important}
.leaflet-control-attribution a{color:#b4bcc8!important}
.tt{background:#03080f;border:1px solid #ED1C24;color:#f2f4f7;font-size:10px;font-weight:700;letter-spacing:1px;box-shadow:none;border-radius:0}
.tt::before{display:none}
.truck{position:relative}
.truck i{position:absolute;inset:0;border-radius:50%;background:#ffffff10;border:1px solid #ffffff40}
.truck svg{position:absolute;inset:5px;fill:#f2f4f7;transition:fill .3s}
.truck.on i{background:#ed1c2433;border-color:#ED1C24;box-shadow:0 0 0 6px #ed1c241a}
.truck.on svg{fill:#fff}
.frota{border-left:1px solid #16457e55;display:flex;flex-direction:column}
.frota h4,.docs h4{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:16px 18px 10px}
#torre-lista{display:flex;flex-direction:column}
#torre-lista button{all:unset;display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:13px 18px;border-top:1px solid #ffffff0d;cursor:pointer;transition:background .25s}
#torre-lista button:hover{background:#ffffff08}
#torre-lista button.on{background:#ed1c2412;box-shadow:inset 2px 0 0 var(--red)}
#torre-lista b{font-size:14px;font-weight:800;letter-spacing:1px}
#torre-lista .rt{font-size:11px;font-weight:700;color:var(--ink-2);text-align:right}
#torre-lista .rt em{font-style:normal;color:var(--red)}
#torre-lista .cg{font-size:12px;color:var(--muted)}
#torre-lista .st{font-size:11px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px;justify-content:flex-end}
.dot{width:6px;height:6px;border-radius:50%;background:#4ade80;display:inline-block}
.dot.amb{background:#fbbf24}
.docs{grid-column:1/-1;border-top:1px solid #16457e55;padding-bottom:10px}
#torre-feed{list-style:none;padding:0 18px}
#torre-feed li{display:grid;grid-template-columns:72px 90px 150px 1fr;align-items:center;gap:14px;padding:9px 0;border-top:1px solid #ffffff0a;font-size:13px;animation:entra .6s var(--ease)}
#torre-feed .tp{font-size:10px;font-weight:800;letter-spacing:1.5px;padding:4px 0;text-align:center;border:1px solid var(--line);color:var(--ink)}
#torre-feed b{font-variant-numeric:tabular-nums}
#torre-feed .ok{color:#4ade80;font-weight:700;font-size:12px}
#torre-feed .ob{color:var(--muted);font-size:12px}
@keyframes entra{from{opacity:0;transform:translateY(-8px)}}
.demo{margin-top:14px;font-size:12px;color:var(--muted)}

/* ---------- mesas: cardápio QR no celular por cima da tela do garçom ---------- */
.svc-phone{position:absolute;right:-4%;bottom:-12%;width:23%;aspect-ratio:585/1266;border:7px solid #0c1018;border-radius:26px;overflow:hidden;
  box-shadow:0 40px 80px #000d,0 0 0 1px #ffffff1a;opacity:0;transform:translateY(40px) rotate(4deg);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.svc-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.svc-screen.mesas .svc-phone{opacity:1;transform:rotate(4deg)}

/* ---------- carregamento: águia se desenha ---------- */
.loader svg path{fill:transparent;stroke:var(--ink);stroke-width:6;stroke-dasharray:var(--len,4000);stroke-dashoffset:var(--len,4000);
  animation:traca 1.1s var(--ease) forwards,enche .5s .9s forwards}
@keyframes traca{to{stroke-dashoffset:0}}
@keyframes enche{to{fill:var(--ink)}}

@media (max-width:860px){
  .top nav,.hide-m{display:none}
  .top{gap:16px;height:56px;top:10px;padding-left:16px}
  .top .btn{margin-left:auto;padding:12px 16px;font-size:10px}
  .layer{top:auto;bottom:40px;transform:none}
  .b{text-align:left;left:var(--pad)} .chips{justify-content:flex-start}
  .streak{top:34%}
  .eyebrow{font-size:10px;letter-spacing:2px}
  .num-grid{grid-template-columns:1fr}
  .method{height:auto} .method .pin{position:static;height:auto;padding:100px var(--pad)}
  .steps{grid-template-columns:1fr;gap:32px;padding-top:0}
  .steps::before,.steps .fill{display:none}
  .step small,.step b,.step p{color:inherit} .step small{color:var(--red)} .step p{color:var(--ink-2)}
  .services .pin{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:32px}
  .svc-titles{height:34vh} .svc-index{display:none}
  .svc-t h3{font-size:clamp(38px,11vw,60px)}
  .painel{grid-template-columns:minmax(0,1fr)} .frota{border-left:0;border-top:1px solid #16457e55}
  #torre-mapa{height:380px} .kpis{margin-left:0;gap:16px}
  #torre-feed li{grid-template-columns:60px 1fr;gap:4px 12px} #torre-feed .ob{grid-column:2}
  .svc-phone{right:2%;width:28%}
  .faq{grid-template-columns:1fr;gap:32px;padding:100px var(--pad)} .faq h2{position:static}
}
@media (prefers-reduced-motion:reduce){
  .ln>span,.fade,.btn,.btn .arr,.svc-t,.svc-frame,.svc-frame img,.svc-phone,.spot::before,.spot::after{transition:none}
  .loader svg path{animation:none;fill:var(--ink)}
  .loop-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:32px}
  .loop-track [aria-hidden]{display:none}
}

/* ---------- refinamento "vídeo": títulos de seção mais leves, entrada saindo do desfoque, granulação ---------- */
.numbers h2,.method h2,.svc-t h3,.cases h2,.torre h2,.final h2{font-weight:600;letter-spacing:-.035em;line-height:.95}
.final h2,.torre h2{font-weight:600}
.blur-ok [data-blur] .bw{display:inline-block;filter:blur(12px);opacity:.12;transform:translateY(.25em);
  transition:filter .9s var(--ease),opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.blur-ok [data-blur].in .bw{filter:none;opacity:1;transform:none}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grao 1.2s steps(6) infinite}
@keyframes grao{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){
  .blur-ok [data-blur] .bw{filter:none;opacity:1;transform:none;transition:none}
  .grain{animation:none}
}

/* ---------- forma: clicável = pílula; blocos = 16 px ---------- */
.top .btn{background:var(--red);border-color:var(--red);color:#fff;padding:13px 20px}
.top .btn:hover{background:#d0161d;border-color:#d0161d}
.num-grid{border-radius:16px;overflow:hidden}
.svc-frame{border-radius:16px}
.painel{border-radius:18px}
.svc-phone{border-radius:30px}
#torre-feed .tp{border-radius:999px}
.geral{border-radius:999px}

/* ---------- cartões de vidro no pé do hero ---------- */
.hero-cards{position:absolute;left:var(--pad);right:var(--pad);bottom:30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  max-width:1180px;margin:0 auto;opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease) .7s,transform 1s var(--ease) .7s}
.loaded .hero-cards{opacity:1;transform:none}
.hc{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 18px;border-radius:16px;border:1px solid #ffffff1c;
  background:linear-gradient(135deg,#ffffff12,#ffffff05);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 #ffffff14;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.hc:hover{border-color:#ffffff40;background:linear-gradient(135deg,#ffffff1c,#ffffff08);transform:translateY(-2px)}
.hc .ic{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;background:#ed1c241f;color:#ff6b70}
.hc span{flex:1;min-width:0}
.hc b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
.hc small{display:block;margin-top:3px;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .go{flex:none;width:18px;height:18px;color:var(--ink-2);transition:transform .3s var(--ease),color .3s}
.hc:hover .go{transform:translate(2px,-2px);color:var(--ink)}
@media (max-height:760px),(max-width:860px){.hero-cards{display:none}}
@media (prefers-reduced-transparency:reduce){.top,.hc,.chips span{backdrop-filter:none;background:#07182D}}
@media (prefers-reduced-motion:reduce){.hero-cards{transition:none}}

/* ---------- projetos: bento 2+1+1 / 1+1+1 ---------- */
.projetos{padding:140px var(--pad) 120px}
.projetos h2{font-size:clamp(32px,4.2vw,62px);max-width:20ch}
.projetos .sub{margin-top:22px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.proj-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:56px}
.proj{position:relative;display:flex;flex-direction:column;border-radius:16px;border:1px solid #16457e66;background:var(--surface);overflow:hidden;min-height:300px;transition:border-color .3s}
.proj:hover{border-color:var(--line)}
.proj.wide{grid-column:span 2}
.proj .shot{position:relative;overflow:hidden;background:#0b1424}
.proj.wide .shot{aspect-ratio:16/9}
.proj .shot:not(.phone):not(.trio){aspect-ratio:16/10}
.proj .shot.cam{aspect-ratio:16/10;flex:none}

.proj .shot>img{width:100%;height:100%;object-fit:cover;object-position:top}
.proj .shot.phone{flex:1;min-height:0;display:grid;place-items:end center;padding:24px 24px 0;background:radial-gradient(70% 60% at 50% 100%,#0f3566,transparent 70%),#0b1424}
.proj .shot.phone img{width:min(200px,70%);max-height:100%;object-fit:cover;object-position:top;border:6px solid #0c1018;border-radius:24px 24px 0 0;border-bottom:0;box-shadow:0 30px 60px #000c}
.proj .txt{padding:24px 26px 28px}
.proj small{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-weight:700}
.proj b{display:block;margin:12px 0 10px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.proj p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.proj svg.pi{width:44px;height:44px;margin:26px 26px 0;padding:10px;border-radius:12px;background:#ed1c241f;color:#ff6b70}
.proj svg.pi{position:absolute;left:0;top:0;z-index:2}
@media (max-width:1100px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .proj .shot.phone{min-height:260px}}
@media (max-width:860px){.proj-grid{grid-template-columns:1fr} .proj.wide{grid-column:auto} .num-grid{grid-template-columns:1fr 1fr}}

/* ---------- ASC Pesagem: câmera ao vivo ---------- */
.cam{--g:#4ade80}
.cam-film{position:absolute;inset:0;animation:mao 9s ease-in-out infinite alternate;transform-origin:55% 60%}
.cam-film>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
@keyframes mao{0%{transform:scale(1.04) translate(0,0)}50%{transform:scale(1.09) translate(-1.5%,1%)}100%{transform:scale(1.05) translate(1.2%,-.8%)}}
.vf{position:absolute;width:14px;height:14px;border:2px solid #ffffff99;pointer-events:none}
.vf1{left:8px;top:8px;border-right:0;border-bottom:0}.vf2{right:8px;top:8px;border-left:0;border-bottom:0}.vf3{left:8px;bottom:8px;border-right:0;border-top:0}.vf4{right:8px;bottom:8px;border-left:0;border-top:0}
.cam::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(#ffffff0a 1px,transparent 1px) 0 0/ 10% 10%,linear-gradient(90deg,#ffffff0a 1px,transparent 1px) 0 0/ 10% 10%}
.cam-hud{position:absolute;left:24px;top:7px;display:flex;font-size:7px;font-weight:700;letter-spacing:1px;color:var(--ink);white-space:nowrap}
.cam-lote{position:absolute;left:24px;bottom:7px;font-size:7px;font-weight:700;letter-spacing:1px;color:var(--ink);background:#03080fd9;border:1px solid #16457e;padding:3px 6px;border-radius:4px}
.cam-hud span{background:#03080fd9;border:1px solid #16457e;padding:3px 6px;border-radius:4px;display:flex;align-items:center;gap:4px}
.rec i{width:5px;height:5px;border-radius:50%;background:var(--red);animation:rec 1s steps(2) infinite}
.rec b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2)}
@keyframes rec{50%{opacity:.15}}
.cam-linha{position:absolute;left:0;right:0;top:78%;height:2px;background:var(--g);opacity:.85}
.cam-linha span{position:absolute;left:10px;bottom:5px;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--g);font-weight:700}
.cam-scan{position:absolute;left:0;right:0;top:0;height:18%;pointer-events:none;background:linear-gradient(#4ade8000,#4ade8033 70%,#4ade80aa);animation:scan 3.2s linear infinite}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(560%)}}
.cam-boxes b{position:absolute;border:1.5px solid #4ade80b3;border-radius:3px;transition:border-color .3s;box-shadow:inset 0 0 0 0 #ed1c2400}
.cam-boxes b::before{content:attr(data-n);position:absolute;left:-1.5px;top:-15px;font-size:8px;font-weight:700;padding:1px 4px;background:#03080fd9;color:var(--ink);border:1px solid #4ade80b3;border-radius:3px;white-space:nowrap}
.cam-boxes b.on{border-color:var(--red);box-shadow:inset 0 0 0 200px #ed1c2426}
.cam-boxes b.on::before{border-color:var(--red);content:attr(data-n) " · pesando"}
.cam-read{position:absolute;right:24px;bottom:7px;background:#03080fe6;border:1px solid var(--red);border-radius:5px;padding:5px 8px;line-height:1;display:grid;grid-template-columns:auto auto;gap:2px 10px;align-items:baseline}
.cam-read small{font-size:7px;letter-spacing:1.5px;color:var(--red);font-weight:800}
.cam-read em{font-style:normal;font-size:8px;color:var(--ink-2);font-weight:700;text-align:right}
.cam-read b{grid-column:1/-1;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){.rec i,.cam-scan,.cam-film,.servs-row{animation:none}}

/* ---------- procrewUSA: faixa de serviços correndo ---------- */
.servs{overflow:hidden;padding:12px 0 2px;display:grid;gap:8px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.servs-row{display:flex;gap:8px;width:max-content;animation:loop 38s linear infinite}
.servs-row.rev{animation-direction:reverse;animation-duration:46s}
.servs span{font-size:11px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;color:var(--ink);
  background:hsl(calc(var(--c) * 55 + 190) 45% 18% / .9);border:1px solid hsl(calc(var(--c) * 55 + 190) 55% 40% / .6)}
.lnk{color:var(--ink);font-weight:700;border-bottom:1px solid var(--red);white-space:nowrap}

/* ---------- três celulares em leque ---------- */
.shot.trio{flex:1;min-height:260px;position:relative;overflow:hidden;background:radial-gradient(70% 60% at 50% 100%,#0f3566,transparent 70%),#0b1424}
.shot.trio img{position:absolute;top:14%;width:36%;border:4px solid #0c1018;border-radius:18px;box-shadow:0 26px 50px #000c;transition:transform .6s var(--ease)}
.shot.trio img:nth-child(1){left:3%;transform:rotate(-8deg) translateY(9%);z-index:1}
.shot.trio img:nth-child(2){left:32%;top:8%;z-index:3}
.shot.trio img:nth-child(3){right:3%;transform:rotate(8deg) translateY(9%);z-index:2}
.proj:hover .shot.trio img:nth-child(1){transform:rotate(-11deg) translate(-4%,7%)}
.proj:hover .shot.trio img:nth-child(3){transform:rotate(11deg) translate(4%,7%)}
.proj:hover .shot.trio img:nth-child(2){transform:translateY(-4%)}

/* ---------- cenas dos cards sem tela ---------- */
.scene{position:relative;overflow:hidden;aspect-ratio:16/10;padding:70px 22px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;font-size:12px;
  background:#0b1424;border-bottom:1px solid #16457e44}
.scene .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.scene::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#0b142400 0%,#0b142455 45%,#0b1424e6 100%)}
.scene>*:not(.bg){position:relative;z-index:1}
.scene .msg{backdrop-filter:blur(6px)}
.scene.feed .msg:nth-child(3),.scene.feed .msg:nth-child(4){display:none}
.scene.obra .ob:nth-child(3){display:none}
.scene.pdv{padding-top:60px}
.scene.pdv .row,.scene.obra .ob{backdrop-filter:blur(4px)}
.scene .msg{background:#0d1a2e;border:1px solid #16457e55;border-radius:10px 10px 10px 2px;padding:8px 10px;color:var(--ink-2);line-height:1.35;position:relative}
.scene .msg b{display:block;font-size:10px;color:#7fb3ff;margin-bottom:2px}
.scene .msg.hit{border-color:#4ade8088;background:#0d2a22}
.scene .msg.hit i{position:absolute;right:8px;top:-9px;font-style:normal;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#052a15;background:#4ade80;padding:2px 7px;border-radius:999px}
.scene.pdv .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #ffffff10;color:var(--ink-2)}
.scene.pdv .row b{color:var(--ink);font-variant-numeric:tabular-nums}
.scene.pdv .row.tot{border:0;font-size:14px}.scene.pdv .row.tot b{color:#4ade80}
.scene.pdv .lock{margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.5px;color:#ffb4b7;display:flex;align-items:center;gap:6px}
.scene.pdv .lock i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px #ed1c2433}
.scene.obra .ob{display:grid;grid-template-columns:1fr 84px 34px;align-items:center;gap:10px;color:var(--ink-2)}
.scene.obra .ob em{height:5px;border-radius:3px;background:#ffffff14;overflow:hidden}
.scene.obra .ob em i{display:block;height:100%;width:var(--p);background:linear-gradient(90deg,#16457e,#4ade80);border-radius:3px}
.scene.obra .ob b{font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.scene.obra .falta{margin-top:6px;font-size:10px;color:#ffb4b7;font-weight:700}
.scene.pay .pos{display:grid;gap:2px;padding:10px 12px;border:1px solid #16457e;border-radius:10px;background:#07182D}
.scene.pay .pos small{font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:700}
.scene.pay .pos b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.scene.pay .pos span{font-size:10px;color:var(--ink-2)}
.scene.pay .steps{display:grid;grid-template-columns:1fr;gap:5px;font-size:10.5px;color:var(--muted)}
.scene.pay .steps span::before{content:"○";margin-right:6px;color:#ffffff40}
.scene.pay .steps .ok{color:var(--ink-2)}.scene.pay .steps .ok::before{content:"●";color:#4ade80}
.scene.pay .steps .on{color:var(--ink);font-weight:700}.scene.pay .steps .on::before{content:"●";color:#fbbf24;animation:rec 1s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.scene.pay .steps .on::before{animation:none}}

/* ---------- Loja do Agro: foto + tela + celular ---------- */
.loja-comp{position:relative;overflow:hidden;background:#0b1424}
.proj .shot.loja-comp>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loja-comp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b142400,#0b142499 70%,#0b1424e6)}
.proj .shot.loja-comp>img.tela{position:absolute;left:5%;top:9%;width:66%;height:auto;border:3px solid #0c1018;border-radius:8px;box-shadow:0 30px 60px #000c;z-index:1;transform:perspective(900px) rotateY(6deg);transform-origin:left center}
.proj .shot.loja-comp>img.cel{position:absolute;right:4%;bottom:-10%;width:30%;height:auto;border:4px solid #0c1018;border-radius:18px;box-shadow:0 30px 60px #000d;z-index:2;transform:rotate(5deg);transition:transform .6s var(--ease)}
.proj:hover .loja-comp .cel{transform:rotate(3deg) translateY(-4%)}

/* ---------- depoimentos ---------- */
.depo{padding:120px var(--pad) 40px}
.depo h2{font-size:clamp(32px,4.2vw,62px)}
.depo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:48px}
.dp figcaption span::before{content:"· ";}
@media (max-width:860px){.depo-grid{grid-template-columns:1fr}}

/* ---------- selos de status ---------- */
.st{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.op{color:#4ade80;border-color:#4ade8055;background:#4ade8012}
.st.pi{color:#fbbf24;border-color:#fbbf2455;background:#fbbf2412}
.st.dev{color:#93a4bd;border-color:#93a4bd55;background:#93a4bd12}
.svc-t .st{margin-bottom:14px}
.proj .txt{position:relative;z-index:2}

.painel-top .st{margin-left:-10px}

/* ---------- integrações em duas linhas ---------- */
.integra-nota{margin:14px auto 0;max-width:56ch;font-size:14px;line-height:1.6;color:var(--ink-2)}
.integra .loop{margin-top:14px}
.integra .cat{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-top:44px}
.loop-track.rev{animation-direction:reverse;animation-duration:40s}
.lg.tx{gap:10px}
.lg.tx i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.lg small{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-left:2px}
.lg.wl img{filter:brightness(0) invert(1)}
.lg img[src*='antt']{height:26px}
.lg img[src*='sicoob']{height:24px}
.lg img[src*='receita']{height:34px}

/* ---------- cards de projeto: mesma altura, rótulo + selo numa linha, sem ícone solto ---------- */
.proj-grid{grid-auto-rows:1fr;align-items:stretch}
.proj{height:100%}
.proj .shot,.proj .scene{flex:none}
.proj .txt{display:flex;flex-direction:column;flex:1}
.proj .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.proj .meta small{margin:0}
.proj .txt .st{margin:0}
.proj .txt b{margin-top:0}
.proj svg.pi{display:none}
.scene{padding-top:26px}

/* ---------- cases: carrossel de cards (estilo Apple) ---------- */
.cases{padding:120px 0 100px}
.ac-head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:0 var(--pad);margin-bottom:36px}
.ac-head h2{font-size:clamp(30px,4vw,60px)}
.ac-nav{display:flex;gap:10px;flex:none}
.ac-btn{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff30;background:#ffffff0a;color:var(--ink);font-size:18px;cursor:pointer;transition:background .25s,border-color .25s}
.ac-btn:hover{background:#ffffff18;border-color:#ffffff60}
.ac-btn:disabled{opacity:.3;cursor:default}
.ac-strip{display:flex;gap:20px;padding:0 var(--pad) 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ac-strip::-webkit-scrollbar{display:none}
.ac{position:relative;flex:none;width:clamp(280px,26vw,380px);aspect-ratio:2/3;border-radius:20px;overflow:hidden;scroll-snap-align:start;background:var(--surface);
  border:1px solid #16457e55;display:flex;flex-direction:column;justify-content:space-between;padding:26px 24px;transition:transform .35s var(--ease)}
.ac:hover,.ac:focus-visible{transform:scale(1.02)}
.ac>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:0;transition:transform .8s var(--ease)}
.ac:hover>img{transform:scale(1.05)}
.ac::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#03080fe6 0%,#03080f88 42%,#03080f00 70%,#03080f66 100%)}
.ac-top,.ac-go{position:relative;z-index:2}
.ac-top small{display:block;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--ink-2);margin-bottom:10px}
.ac-top h3{font-size:22px;font-weight:800;letter-spacing:-.01em;text-transform:none;line-height:1.1}
.ac-top p{margin-top:10px;font-size:15px;line-height:1.45;color:var(--ink);font-weight:500;text-wrap:pretty}
.ac-go{align-self:flex-end;width:42px;height:42px;border-radius:50%;background:#fff;color:#0a0a0a;display:grid;place-items:center}
.ac-go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.ac:hover .ac-go svg{transform:rotate(45deg)}
@media (max-width:860px){.cases{padding:90px 0 70px}.ac{width:min(78vw,320px)}.ac-head{flex-direction:column;align-items:start}}
@media (prefers-reduced-motion:reduce){.ac,.ac>img,.ac-go svg{transition:none}}

/* ---------- depoimentos: card estilo tweet ---------- */
.depo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tw{display:flex;flex-direction:column;gap:16px;padding:22px 22px 20px;border-radius:16px;border:1px solid #16457e66;background:var(--surface)}
.tw header{display:flex;align-items:center;gap:12px}
.tw .av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800;letter-spacing:1px;color:#fff;
  background:linear-gradient(135deg,#16457e,#07182D);border:1px solid #ffffff22}
.tw header div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tw header b{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:700;white-space:nowrap}
.tw .ver{width:16px;height:16px;color:#3b9cff;flex:none}
.tw header small{font-size:13px;color:var(--muted)}
.tw .org{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--muted);text-align:right;max-width:40%}
.tw p{font-size:15px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.tw>img{width:100%;aspect-ratio:16/9;object-fit:contain;object-position:center;background:#0b1424;padding:10px;border-radius:12px;border:1px solid #ffffff14}
@media (max-width:860px){.depo-grid{grid-template-columns:1fr}.tw .org{display:none}}

/* ================= CELULAR: passada geral ================= */
@media (max-width:860px){
  /* hero: águia maior e mais clara; texto no rodapé do palco */
  .layer{bottom:28px}
  .hero{height:220vh}
  h1{font-size:clamp(40px,12vw,54px)}
  .lead{font-size:15px;margin-top:16px}
  .ctas{margin-top:22px}
  .eyebrow{margin-bottom:14px}
  .b{bottom:40px} .b h2{font-size:clamp(30px,9vw,40px)}
  .chips span{font-size:10px;padding:8px 12px}
  /* integrações: faixa só com logos, sem os subtítulos */
  .integra{padding:10px 0 70px} .integra-nota{padding:0 var(--pad);font-size:13px}
  .integra .cat{margin-top:28px}
  .lg small{display:none}
  .loop-track{gap:36px} .lg{font-size:15px} .lg img{height:22px}
  /* números: 2 colunas, sem a coluna vazia */
  .numbers{padding:70px var(--pad)}
  .num-grid{grid-template-columns:1fr 1fr;margin-top:36px}
  .num-grid div{padding:28px 18px 22px}
  .num-grid b{font-size:44px}
  .num-grid span{font-size:10px;letter-spacing:1.5px;margin-top:10px}
  /* método: compacto */
  .method .pin{padding:70px var(--pad)}
  .steps{gap:22px;margin-top:36px}
  .step small{font-size:11px} .step b{margin:6px 0 4px;font-size:16px} .step p{font-size:14px}
  /* soluções: palco menor */
  .services{height:calc(var(--n) * 80vh)}
  .services .pin{gap:18px;padding-top:70px;align-content:start}
  .svc-titles{height:auto;min-height:150px}
  .svc-t{position:static;display:none} .svc-t.on{display:block}
  .svc-t h3{font-size:clamp(34px,10vw,48px)} .svc-t p{font-size:14px;margin-top:12px}
  .svc-frame{transform:none!important}
  /* torre: mapa menor, feed enxuto */
  .torre{padding:80px var(--pad) 70px}
  .torre h2{font-size:clamp(28px,8.5vw,36px)} .torre .sub{font-size:15px}
  #torre-mapa{height:300px}
  .painel-top{gap:10px;padding:12px 14px}
  .kpis{gap:12px;font-size:9px} .kpis span b{font-size:15px}
  #torre-lista button{padding:10px 14px} #torre-lista b{font-size:12px} #torre-lista .cg{font-size:11px} #torre-lista .st{font-size:10px}
  #torre-lista button:nth-child(n+5){display:none}
  #torre-feed li:nth-child(n+4){display:none}
  /* cases: um card por vez, mais baixo */
  .cases{padding:70px 0 50px}
  .ac-head{margin-bottom:22px} .ac-head h2{font-size:clamp(28px,8.5vw,36px)}
  .ac{width:calc(100vw - 2 * var(--pad) - 24px);aspect-ratio:4/5}
  .ac-top h3{font-size:20px} .ac-top p{font-size:14px}
  /* projetos: cards mais curtos */
  .projetos{padding:80px var(--pad) 60px}
  .projetos h2{font-size:clamp(28px,8.5vw,36px)} .projetos .sub{font-size:15px}
  .proj-grid{gap:12px;margin-top:32px;grid-auto-rows:auto}
  .proj{min-height:0}
  .proj .shot:not(.phone):not(.trio),.proj .scene,.loja-comp{aspect-ratio:16/9}
  .shot.trio{min-height:200px} .shot.trio img{width:34%}
  .scene{padding:20px 16px 14px;font-size:11px;gap:6px}
  .proj .txt{padding:18px 18px 20px} .proj b{font-size:18px;margin:8px 0 6px} .proj p{font-size:13px}
  .servs{padding:8px 0 0} .servs span{font-size:10px;padding:5px 10px}
  /* depoimentos */
  .depo{padding:80px var(--pad) 20px} .depo h2{font-size:clamp(28px,8.5vw,36px)}
  .depo-grid{gap:12px;margin-top:28px}
  .tw{padding:18px 16px 16px} .tw p{font-size:14px} .tw>img{aspect-ratio:16/10}
  /* perguntas e final */
  .faq{padding:70px var(--pad)} .faq h2{font-size:clamp(26px,8vw,34px)} .faq summary{font-size:15px;padding:18px 0}
  .final{padding:70px var(--pad) 0} .final h2{font-size:clamp(28px,8.5vw,36px)}
  .giant{margin-top:40px;padding-bottom:26px;font-size:clamp(64px,22vw,110px)}
  .giant small{font-size:.16em;letter-spacing:.4em;margin-left:.4em}
  footer{padding:26px var(--pad);font-size:11px;gap:10px}
  .hero-cards{display:none}
}

/* ---------- cases: telas de sistema entram como monitor num estúdio escuro ---------- */
.ac.studio{background:radial-gradient(80% 55% at 50% 100%,#ed1c2426,transparent 70%),radial-gradient(90% 70% at 50% 0%,#0f3566,transparent 70%),var(--navy)}
.ac.studio>img{top:auto;bottom:11%;left:7%;width:86%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border:5px solid #0c1018;border-radius:8px;
  box-shadow:0 40px 80px #000c;transform:perspective(900px) rotateX(6deg);transform-origin:center bottom}
.ac.studio:hover>img{transform:perspective(900px) rotateX(3deg) scale(1.02)}
.ac.studio::after{background:linear-gradient(180deg,#03080f99 0%,#03080f00 40%)}

/* ---------- transições entre seções ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-ok .reveal{opacity:0}
.reveal-ok .reveal.in{opacity:1}
html:not(.reveal-ok) .reveal{opacity:1;transform:none}
.row-in{display:contents}
.integra .loop{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.loop-track{animation-duration:60s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- celular: passada 2 ---------- */
@media (max-width:860px){
  /* hero: sem buraco no meio; a águia sobe, o texto fica logo abaixo */
  .hero{height:190vh}
  .layer.a{bottom:auto;top:52%}
  .layer.b{top:auto;bottom:36px}
  h1{font-size:clamp(38px,11.5vw,50px)}
  .lead{font-size:14.5px;margin-top:12px;max-width:34ch}
  .ctas{margin-top:18px;gap:8px} .ctas .btn{padding:13px 18px;font-size:10px}
  /* marcas: uma faixa só, mais rápida */
  .integra{padding:0 0 60px} .integra .cat{display:none} .integra .loop{margin-top:22px}
  .loop-track{animation-duration:34s;gap:30px}
  /* cards de projeto: mídia menor e texto compacto */
  .proj .shot:not(.phone):not(.trio),.proj .scene,.loja-comp{aspect-ratio:16/8}
  .proj .txt{padding:16px 16px 18px} .proj b{font-size:17px} .proj p{font-size:13px;line-height:1.5}
  .proj .meta{margin-bottom:8px}
  .shot.trio{min-height:180px}
  /* cases: card 3:4, cabe na tela com o título */
  .ac{aspect-ratio:3/4} .ac-top{gap:0} .ac-top small{font-size:11px;margin-bottom:6px} .ac-top h3{font-size:19px} .ac-top p{font-size:13.5px;margin-top:6px}
  .ac.studio>img{width:88%;left:6%;bottom:12%}
  /* depoimentos: imagem menor */
  .tw>img{aspect-ratio:16/9;padding:6px}
  /* torre: KPIs em linha própria */
  .painel-top{flex-direction:column;align-items:flex-start;gap:8px} .kpis{margin-left:0;gap:14px}
  /* seções: menos respiro entre elas */
  .manifesto{padding:16vh var(--pad) 10vh} .manifesto p{font-size:clamp(24px,7vw,30px)}
  .numbers{padding:56px var(--pad)} .method .pin{padding:56px var(--pad)}
  .projetos{padding:64px var(--pad) 48px} .depo{padding:64px var(--pad) 16px} .faq{padding:56px var(--pad)} .final{padding:56px var(--pad) 0}
}