/* =====================================================================
   AMENITY — anim.css
   Identidade visual correta + estilos dos efeitos (preloader, menu,
   cursor-image, showreel, cards 3D, reveal por palavra).
   Carregado DEPOIS de styles.css — sobrescreve tokens quando preciso.
   ===================================================================== */

/* ── Identidade: azul oficial #0000FF ──────────────────────────────── */
:root {
  --blue:   #0000FF;
  --blue-d: #3B39FF;
}
/* Lenis controla o scroll — desliga o smooth nativo pra não brigar */
html.lenis, html.lenis body { height:auto; }
html { scroll-behavior:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }

/* Barra de rolagem na cor da marca */
html { scrollbar-color:var(--blue) #e9e9f6; scrollbar-width:thin; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:#e9e9f6; }
::-webkit-scrollbar-thumb { background:var(--blue); border:3px solid #e9e9f6; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--blue-d); }

/* Remove TODOS os contadores/rótulos numerados de seção */
.sn { display:none !important; }

/* Glow do hero na cor certa */
header.hero::before {
  background:
    radial-gradient(ellipse 55% 55% at 15% 65%, rgba(0,0,255,.20) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 25%, rgba(0,0,255,.12) 0%, transparent 50%) !important;
}

/* ── Ícones da marca (helpers) ─────────────────────────────────────── */
.bicon { display:inline-block; width:1em; height:1em; vertical-align:-.12em;
         background-position:center; background-repeat:no-repeat; background-size:contain; }
.bicon-dia-blue  { background-image:url(../img/brand/diafragma-blue.png); }
.bicon-dia-white { background-image:url(../img/brand/diafragma-white.png); }
.bicon-rec-white { background-image:url(../img/brand/rec-white.png); }
.bicon-chama-blue{ background-image:url(../img/brand/chama-blue.png); }

/* =====================================================================
   1) PRELOADER (efeito de entrada — estilo sohub)
   ===================================================================== */
.preloader {
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px;
}
.preloader.done { pointer-events:none; }
html.is-loading { overflow:hidden; }
.pl-symbol {
  width:64px; height:64px;
  background:url(../img/brand/symbol-blue.png) center/contain no-repeat;
}
.pl-count {
  font-family:var(--disp); font-weight:800;
  font-size:clamp(48px,12vw,120px); line-height:1;
  color:#fff; letter-spacing:-.04em;
}
.pl-count .pct { color:var(--blue); }
.pl-bar { width:min(260px,60vw); height:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.pl-bar i { display:block; height:100%; width:0; background:var(--blue); }
.pl-label {
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
/* painéis que sobem revelando o site */
.pl-panels { position:fixed; inset:0; z-index:9998; display:flex; pointer-events:none; }
.pl-panels span { flex:1; background:var(--ink); }

/* =====================================================================
   2) MENU FULLSCREEN ANIMADO (estilo letsplayfight)
   ===================================================================== */
.mob {
  inset:0 !important;
  background:rgba(5,5,10,.98) !important;
  backdrop-filter:blur(20px) !important;
  gap:6px !important;
  border-top:0 !important;
}
.mob::after {
  content:""; position:absolute; right:-40px; bottom:-40px;
  width:340px; height:340px; opacity:.06;
  background:url(../img/brand/symbol-white.png) center/contain no-repeat;
  pointer-events:none;
}
.mob a {
  color:#fff !important; font-size:clamp(34px,7vw,64px) !important;
  font-weight:800 !important; letter-spacing:-.03em;
  line-height:1.05; position:relative;
  opacity:0; transform:translateY(40px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), color .2s;
}
.mob a .idx {
  font-size:14px; font-weight:600; color:var(--blue);
  vertical-align:super; margin-right:10px; letter-spacing:0;
}
.mob.open a { opacity:1; transform:none; }
.mob.open a:nth-child(1){ transition-delay:.10s; }
.mob.open a:nth-child(2){ transition-delay:.17s; }
.mob.open a:nth-child(3){ transition-delay:.24s; }
.mob.open a:nth-child(4){ transition-delay:.31s; }
.mob.open a:nth-child(5){ transition-delay:.38s; }
.mob a:hover { color:var(--blue) !important; }
.mob .mob-cta {
  font-size:13px !important; font-weight:700 !important;
  letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid rgba(255,255,255,.4) !important; padding:16px 34px !important;
  margin-top:22px;
}
.mob .mob-cta:hover { background:var(--blue) !important; border-color:var(--blue) !important; }
.mob a.mob-sub {
  font-size:9px !important;
  line-height:1.2 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--blue) !important;
  font-weight:700 !important;
  margin-top:0 !important;
  opacity:1 !important;
  transform:none !important;
}
.mob a.mob-sub:hover { color:var(--ink) !important; text-decoration:underline; }
/* Mostra o hambúrguer também no desktop (pra abrir o menu fullscreen) */
@media (min-width:861px){
  .hbg { display:flex; margin-left:22px; }
}

/* =====================================================================
   3) IMAGEM QUE SEGUE O MOUSE (estilo christoph-gey)
   ===================================================================== */
.cursor-follow {
  position:fixed; top:0; left:0; z-index:60;
  width:230px; height:290px; object-fit:cover;
  border-radius:10px; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.7);
  will-change:transform,opacity; box-shadow:0 30px 60px rgba(0,0,0,.4);
}
@media (hover:none){ .cursor-follow{ display:none; } }

/* =====================================================================
   4) SHOWREEL — vídeo com reveal (estilo daima)
   ===================================================================== */
.showreel { padding:80px 24px; background:var(--bg); }
.showreel-inner {
  max-width:1400px; margin:0 auto; position:relative;
  border-radius:28px; overflow:hidden;
  transform:scale(.86); will-change:transform,border-radius;
}
.showreel-mask{
  position:absolute; inset:-10% -10%; z-index:1;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(29,26,255,.45) 0%, rgba(29,26,255,0) 55%),
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.85) 100%);
  transform:translateX(-18%);
  opacity:.95;
  pointer-events:none;
}
.showreel video { width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; position:relative; z-index:0; }
/* vídeo vertical exibido nítido no centro + fundo desfocado do próprio vídeo */
.showreel-inner { background:#08080d; }
.showreel video.showreel-bg {
  position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;
  object-fit:cover; filter:blur(30px) brightness(.5) saturate(1.15);
  transform:scale(1.18); z-index:0; pointer-events:none;
}
.showreel video#showreelVid { object-fit:contain; position:relative; z-index:0; background:transparent; }
@media (max-width:760px){ .showreel video.showreel-bg { display:none; } }
.showreel-badge {
  position:absolute; left:24px; top:24px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:100px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(8px);
  color:#fff; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.showreel-badge .bicon { width:18px; height:14px; }
.showreel-play {
  position:absolute; inset:0; z-index:2; margin:auto;
  width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.5); cursor:pointer; transition:.25s;
}
.showreel-play:hover { background:var(--blue); border-color:var(--blue); transform:scale(1.08); }
.showreel-play svg { width:28px; height:28px; fill:#fff; margin-left:4px; }
.showreel-play.hide { opacity:0; pointer-events:none; }


/* =====================================================================
   5) CARDS 3D + reveal (estilo iper / majd)
   ===================================================================== */
.tilt { transform-style:preserve-3d; transition:box-shadow .3s; will-change:transform; }
.tilt > * { transform:translateZ(0); }
#servicos .svc > div,
.testi-card,
.pill > div { transition:box-shadow .3s, border-color .3s, transform .5s cubic-bezier(.16,1,.3,1); }
#servicos .svc > div:hover,
.testi-card:hover { box-shadow:0 24px 50px rgba(0,0,0,.10); }

/* =====================================================================
   6) REVEAL POR PALAVRA (estilo tomcardermedia)
   ===================================================================== */
.split-word { display:inline-block; }
.split-mask { display:inline-block; overflow:hidden; vertical-align:top; }

/* =====================================================================
   8) LOGO ORIGINAL (bússola SVG) — recolorível + animável
   ===================================================================== */
.compass { width:26px; height:26px; flex:none; overflow:visible; display:inline-block; }
.brand .compass { transition:transform .7s cubic-bezier(.16,1,.3,1); }
.brand:hover .compass { transform:rotate(90deg); }
.compass-hero { width:clamp(98px,11vw,134px); height:clamp(98px,11vw,134px); }
/* wordmark do nav = mesma da hero (corrige a inconsistência de logo) */
.brand-wordmark { height:19px; width:auto; display:block; }
nav.dark-nav .brand-wordmark, .brand-wordmark { filter:none; }

/* =====================================================================
   9) SPINE — linha/compasso que percorre o site inteiro
   ===================================================================== */
.spine { position:fixed; left:20px; top:15vh; height:70vh; width:24px; z-index:40; pointer-events:none; }
.spine-line { position:absolute; left:9px; top:0; width:2px; height:100%; background:rgba(130,130,150,.30); }
.spine-fill { position:absolute; top:0; left:0; width:100%; height:0; background:var(--blue); }
.spine-mark { position:absolute; top:0; left:1px; width:22px; height:22px; transform:translateY(-50%); }
.spine-mark .compass { width:100%; height:100%; }
.spine-pct { position:absolute; left:0; bottom:-26px; font-size:10px; font-weight:700;
             letter-spacing:.08em; color:var(--blue); font-family:var(--disp); }
@media (max-width:960px){ .spine { display:none; } }

/* =====================================================================
   10) HERO — nova disposição em 2 colunas
   ===================================================================== */
.hero-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:center; }
.hero-main { min-width:0; }
.hero-aside { display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.hero-logo { display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:0 !important; }
.hero-wordmark-img { width:min(250px,70%); height:auto; }
.hero-tag .ln:last-child { display:none; }
/* categorias como lista vertical */
ul.hero-cats { display:flex; flex-direction:column; align-items:flex-start; gap:13px;
               list-style:none; margin-top:0; }
ul.hero-cats li { position:relative; padding-left:22px; font-size:14px; font-weight:500;
                  color:rgba(255,255,255,.62); }
ul.hero-cats li::before { content:""; position:absolute; left:0; top:50%; width:9px; height:9px;
                          transform:translateY(-50%) rotate(45deg); background:var(--blue); }
@media (max-width:860px){
  .hero-grid { grid-template-columns:1fr; gap:34px; }
  .hero-aside { order:-1; }
  .compass-hero { width:84px; height:84px; }
}

/* =====================================================================
   11) PORTFÓLIO — carousel (Swiper)
   ===================================================================== */
.portfolio-swiper { padding:6px 0 54px; }
.portfolio-swiper .swiper-slide { width:min(400px,80vw); height:auto; }
.portfolio-swiper .masonry-item,
.portfolio-swiper .masonry-vid { height:500px; width:100%; border-radius:16px; overflow:hidden; display:block; }
.portfolio-swiper .masonry-item img,
.portfolio-swiper .masonry-vid video { width:100%; height:100%; object-fit:cover; }
.portfolio-swiper .swiper-button-next,
.portfolio-swiper .swiper-button-prev {
  color:#fff; background:var(--blue); width:52px; height:52px; border-radius:50%;
  top:auto; bottom:0; transition:.25s;
}
.portfolio-swiper .swiper-button-next:hover,
.portfolio-swiper .swiper-button-prev:hover { background:var(--ink); }
.portfolio-swiper .swiper-button-next::after,
.portfolio-swiper .swiper-button-prev::after { font-size:18px; font-weight:700; }
.portfolio-swiper .swiper-button-prev { left:auto; right:70px; }
.portfolio-swiper .swiper-button-next { right:8px; }
.portfolio-swiper .swiper-pagination { text-align:left; bottom:18px; }
.portfolio-swiper .swiper-pagination-bullet-active { background:var(--blue); }

/* =====================================================================
   12) SERVIÇOS — cards animados lado a lado (com ícones da marca)
   ===================================================================== */
#servicos .svc { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border:0; }
#servicos .svc > div { border:0; }                 /* limpa bordas de grid antigas */
#servicos .svc > div::after { display:none; }
#servicos .svc > div:not(.more) {
  position:relative; z-index:0;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:34px 30px 30px; min-height:236px;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-radius .5s, border-color .3s;
}
#servicos .svc > div:not(.more):hover {
  transform:translateY(-10px); border-radius:30px; border-color:transparent;
  box-shadow:0 34px 64px rgba(10,10,25,.16);
}
/* badge do ícone (único por card) */
#servicos .si {
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; margin-bottom:26px; border-radius:16px;
  background:#fff; border:1px solid var(--line); font-size:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1), background .35s, border-color .35s;
}
#servicos .svc-ic { width:30px; height:30px; color:var(--blue); transition:color .35s; }
#servicos .svc > div:not(.more):hover .si { transform:translateY(-4px) rotate(-6deg); background:var(--blue); border-color:transparent; }
#servicos .svc > div:not(.more):hover .svc-ic { color:#fff; }
/* título estilo iper: grande, bold, caixa alta */
#servicos .svc h3 {
  text-transform:uppercase; font-weight:800; letter-spacing:-.01em; line-height:1.03;
  font-size:clamp(20px,2.4vw,30px); margin-bottom:14px;
}
#servicos .svc p  { font-size:14px; line-height:1.6; color:var(--muted); max-width:34ch; }
#servicos .svc .more {
  grid-column:1/-1; margin-top:6px; display:flex; align-items:center; gap:12px;
  font-size:15px; font-weight:600; color:var(--muted);
  padding:22px 26px; background:var(--surface); border-radius:14px;
}
@media (max-width:900px){ #servicos .svc { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #servicos .svc { grid-template-columns:1fr; } }

/* =====================================================================
   13) SOBRE NÓS — cards mais distintos (barra azul + ícones da marca)
   ===================================================================== */
.mvv-card { position:relative; padding:22px 22px 22px 26px; background:var(--surface);
            border-radius:14px; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.mvv-card::before { content:""; position:absolute; left:0; top:16px; bottom:16px; width:4px;
                    border-radius:4px; background:var(--blue); }
.mvv-card:hover { transform:translateX(6px); box-shadow:0 20px 40px rgba(0,0,0,.08); }
.mvv-card h4 { display:flex; align-items:center; gap:10px; }
.mvv-card h4::before { content:""; width:20px; height:20px; flex:none;
                       background-position:center; background-repeat:no-repeat; background-size:contain; }
.mvv-list .mvv-card:nth-of-type(1) h4::before { background-image:url(../img/brand/diafragma-blue.png); }
.mvv-list .mvv-card:nth-of-type(2) h4::before { background-image:url(../img/brand/chama-blue.png); }
.about-founders .founder-card {
  position:relative; padding:18px 20px; border:1px solid var(--line); border-radius:12px;
  transition:border-color .3s, transform .3s;
}
.about-founders .founder-card:hover { border-color:var(--blue); transform:translateY(-4px); }
.val-tag { transition:background .25s, color .25s, border-color .25s; }
.val-tag:hover { background:var(--blue); color:#fff; border-color:var(--blue); }

/* =====================================================================
   14) HERO mais LIMPO + CÂMERA 3D (objeto que se modifica com a rolagem)
   ===================================================================== */
/* menos ruído no fundo do hero */
header.hero::after {
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) !important;
}
.hero-aside { align-items:center; }
.hero-brand { display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero-wordmark-img { margin-top:2px; }

/* --- Câmera 3D (CSS 3D puro) --- */
.camera3d { perspective:820px; width:100%; height:210px; margin-top:30px;
            display:flex; align-items:center; justify-content:center; }
.cam { position:relative; width:150px; height:94px; transform-style:preserve-3d;
       transform:rotateX(-12deg) rotateY(-26deg); }
.cam-face { position:absolute; top:50%; left:50%; box-sizing:border-box; }
.cam-front, .cam-back  { width:150px; height:94px; margin:-47px 0 0 -75px; }
.cam-front  { background:linear-gradient(135deg,#3B39FF,#0000FF); border:1px solid rgba(255,255,255,.18); transform:translateZ(47px); }
.cam-back   { background:#08082a; transform:rotateY(180deg) translateZ(47px); }
.cam-right, .cam-left { width:94px; height:94px; margin:-47px 0 0 -47px; }
.cam-right  { background:#1512c4; transform:rotateY(90deg)  translateZ(75px); }
.cam-left   { background:#0000cc; transform:rotateY(-90deg) translateZ(75px); }
.cam-top, .cam-bottom { width:150px; height:94px; margin:-47px 0 0 -75px; }
.cam-top    { background:#2a28e6; transform:rotateX(90deg)  translateZ(47px); }
.cam-bottom { background:#07071f; transform:rotateX(-90deg) translateZ(47px); }
/* lente */
.cam-lens-ring { position:absolute; top:50%; left:50%; width:72px; height:72px; margin:-36px 0 0 -36px;
                 border-radius:50%; background:#0000FF; transform:translateZ(56px); }
.cam-lens { position:absolute; top:50%; left:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
            border-radius:50%; border:3px solid #0a0a1f;
            background:radial-gradient(circle at 38% 35%,#6b69ff,#05051a 72%); transform:translateZ(66px); }
/* alça superior */
.cam-handle { position:absolute; top:50%; left:50%; width:78px; height:14px; margin:-7px 0 0 -39px;
              border-radius:8px; background:#0a0a1f; transform:translateY(-56px) rotateX(90deg); }
/* carretéis de filme */
.cam-reel { position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
            border-radius:50%; background:radial-gradient(circle,#0000FF 30%,#08082a 33%,#0000FF 55%,#08082a 58%);
            border:4px solid #0a0a1f; }
.cam-reel-a { transform:translate(-26px,-64px) translateZ(-6px); }
.cam-reel-b { transform:translate( 26px,-64px) translateZ(-6px); }
/* luz REC piscando */
.cam-rec { position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-6px 0 0 -6px;
           border-radius:50%; background:#ff2d2d; box-shadow:0 0 12px #ff2d2d;
           transform:translate(48px,-28px) translateZ(48px); animation:recBlink 1.4s steps(1) infinite; }
@keyframes recBlink { 0%,50% { opacity:1; } 50.01%,100% { opacity:.15; } }
@media (max-width:860px){ .camera3d { height:180px; margin-top:22px; } }

/* --- Vídeo do hero (anima assim que abre) --- */
.hero-video {
  position:relative; width:100%; max-width:440px; margin-top:30px;
  aspect-ratio:4/5; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 70px rgba(0,0,0,.5), 0 0 60px rgba(0,0,255,.16);
  animation:heroVidFloat 6.5s ease-in-out infinite;
}
@keyframes heroVidFloat {
  0%,100% { transform:rotate(-2.5deg) translateY(0); }
  50%     { transform:rotate(-1.6deg) translateY(-12px); }
}
.hero-video video { width:100%; height:100%; object-fit:cover; object-position:center 23%; display:block; }
/* overlay cinematográfico: scanlines + vinheta */
.hero-video::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    radial-gradient(120% 120% at 50% 45%, transparent 52%, rgba(0,0,0,.5) 100%);
  mix-blend-mode:multiply;
}
.hero-video-badge {
  position:absolute; left:14px; top:14px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:100px; background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
  color:#fff; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.rec-pulse { width:8px; height:8px; border-radius:50%; background:#ff2d2d;
             box-shadow:0 0 8px #ff2d2d; animation:recPulse 1.3s ease infinite; }
@keyframes recPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.7); } }
@media (max-width:860px){ .hero-video { max-width:100%; transform:none; animation:none; margin-top:20px; } }

/* =====================================================================
   15) STATS — números com efeito LED
   ===================================================================== */
.stat-number { font-variant-numeric:tabular-nums; }
/* números ficam SEMPRE pretos */
.stat-number span[data-target], .stat-plus { color:var(--ink); }
/* ao terminar, o LED pisca UMA vez e some (volta ao preto) */
.stat-number.done span[data-target] { animation:numFlash .9s ease forwards; }
@keyframes numFlash {
  0%   { color:var(--ink);  text-shadow:none; }
  35%  { color:var(--blue); text-shadow:0 0 26px rgba(0,0,255,.9), 0 0 6px rgba(0,0,255,.7); }
  100% { color:var(--ink);  text-shadow:none; }
}

/* =====================================================================
   16) FOTO DOS FOUNDERS
   ===================================================================== */
.about-founders { display:flex; gap:26px; flex-wrap:wrap; margin-top:32px; }
.about-founders .founder-card {
  display:flex; align-items:flex-start; gap:18px;
  border-left:3px solid var(--blue); padding:18px 20px 18px 16px;
  border-radius:22px; background:rgba(255,255,255,.03);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.about-founders .founder-card:hover { transform:translateY(-3px); }
.fphoto {
  width:120px; height:120px; border-radius:20px; flex:none; position:relative;
  overflow:hidden; background:var(--surface); border:1.5px solid var(--line);
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .4s;
}

.about-founders .founder-card:nth-child(1) .fphoto { transform:rotate(-4deg); }
.about-founders .founder-card:nth-child(2) .fphoto { transform:rotate(4deg); }
.founder-card:hover .fphoto { transform:rotate(0); border-color:var(--blue); box-shadow:0 16px 30px rgba(0,0,255,.18); }
.fphoto img { width:100%; height:100%; object-fit:cover;
  object-position:center 42%; transform:none; transform-origin:center 42%; }

.fphoto::after {
  content:attr(data-initials); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:800; font-size:24px; color:var(--blue);
}
.fphoto:has(img)::after { display:none; }

/* =====================================================================
   17) CURSOR customizado (efeito no mouse)
   ===================================================================== */
.cursor-dot, .cursor-ring {
  position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9000;
  opacity:0; transition:opacity .25s;
}
.cursor-dot  { width:7px; height:7px; background:var(--blue); }
.cursor-ring {
  width:34px; height:34px; border:1.5px solid var(--blue);
  transition:width .25s, height .25s, background .25s, border-color .25s, opacity .25s;
}
.cursor-ring.grow { width:58px; height:58px; background:rgba(0,0,255,.10); border-color:transparent; }
/* aparece só nas seções marcadas (body.cursor-active) */
body.cursor-active .cursor-dot,
body.cursor-active .cursor-ring { opacity:1; }
body.cursor-active, body.cursor-active a, body.cursor-active button,
body.cursor-active .masonry-item, body.cursor-active .masonry-vid { cursor:none; }
@media (hover:none){ .cursor-dot, .cursor-ring { display:none !important; } }

/* =====================================================================
   18) NAV — some quando o menu abre
   ===================================================================== */
body.menu-open nav { background:transparent !important; border-color:transparent !important; backdrop-filter:none !important; }
body.menu-open .nl,
body.menu-open .ncta { opacity:0 !important; pointer-events:none !important; transition:opacity .25s; }
body.menu-open .brand { color:#fff !important; }
body.menu-open .brand .compass { stroke:#fff; }
body.menu-open .hbg span { background:#fff !important; }

/* (19) Serviços — ver seção 12 (cards animados lado a lado) */

/* =====================================================================
   21) QUEM SOMOS — disposição mais harmônica e interativa
   ===================================================================== */
#sobre .about-grid { align-items:center; gap:clamp(44px,6vw,72px); }
.about-lead { font-size:clamp(19px,2.3vw,26px); line-height:1.45; letter-spacing:-.01em; }
.mvv-list { gap:16px; }
.mvv-card { will-change:transform; }
.mvv-card p { transition:color .3s; }
.mvv-card:hover p { color:var(--ink); }
.about-founders { gap:22px; margin-top:38px; padding-top:28px; border-top:1px solid var(--line); }
/* realce interativo do bloco inteiro ao passar o mouse */
.about-grid > div { transition:opacity .4s; }
.about-grid:hover > div:not(:hover) { opacity:.55; }
/* badge circular girando (inspiração tomcarder) — na faixa da tagline (fundo escuro) */
.tagline-strip .wrap { position:relative; }
.spin-badge { position:absolute; top:26px; left:28px; width:94px; height:94px; z-index:2; pointer-events:none; opacity:.9; }
.spin-badge svg { width:100%; height:100%; animation:badgeSpin 18s linear infinite; }
.spin-badge-text { font-family:var(--disp); font-size:8.4px; font-weight:700;
                   letter-spacing:.14em; fill:#fff; }
.spin-badge-core { position:absolute; top:50%; left:50%; width:42px; height:42px;
                   transform:translate(-50%,-50%);
                   background:url(../img/brand/symbol-white.png) center/contain no-repeat; }
@keyframes badgeSpin { to { transform:rotate(360deg); } }
@media (max-width:1100px){ .spin-badge { display:none; } }

/* =====================================================================
   20) CAROUSEL — mostrar pelo menos 2 trabalhos
   ===================================================================== */
.portfolio-swiper .swiper-slide { width:auto; }   /* Swiper controla via slidesPerView */
.portfolio-swiper .masonry-item,
.portfolio-swiper .masonry-vid { height:clamp(300px,44vw,460px); }

/* =====================================================================
   22) MÉTODO/DIFERENCIAL — frase com fotos + fluxo conectado
   ===================================================================== */
/* frase impactante mesclada com fotos (tomcarder) */
.phrase-photos {
  font-weight:800; letter-spacing:-.03em; line-height:1.3;
  font-size:clamp(28px,5vw,60px); color:var(--ink);
  margin:8px 0 72px; max-width:1000px;
}
.phrase-photos--center { text-align:center; margin:56px auto 96px; }
/* espaçamento maior entre a frase central e "Como trabalhamos"
   (vence o #metodo do styles.css pela mesma especificidade + ordem) */
#metodo .phrase-photos--center { margin-bottom:170px; }
#metodo .metodo-sep { margin-top:24px; }

.phrase-photos .pp-img { display:inline-block; vertical-align:middle; margin:0 6px; }
.phrase-photos .pp-img img {
  height:clamp(42px,6vw,72px); width:clamp(88px,12vw,150px);
  object-fit:cover; object-position:center 38%; border-radius:12px; display:block;
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}
/* enquadramento individual por foto — centraliza o foco de cada imagem */
.phrase-photos .pp-img img[src*="conf3d-02"]  { object-position:center 40%; }
.phrase-photos .pp-img img[src*="cadu03"]     { object-position:center 47%; }
.phrase-photos .pp-img img[src*="cecilia-03"] { object-position:center 36%; }
.phrase-photos .pp-img img[src*="andrept-02"] { object-position:center 32%; }

/* fluxo do método conectado por linha */
.method-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; position:relative; }
.method-flow::before {
  content:""; position:absolute; top:19px; left:14%; right:14%; height:2px;
  background:var(--line); z-index:0;
}
.mflow-step { position:relative; z-index:1; padding-top:58px; }
.mflow-n {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  box-shadow:0 0 0 6px var(--bg);
}
.mflow-photo {
  width:100%; height:200px; border-radius:18px; overflow:hidden; margin-bottom:20px;
}
.mflow-photo img {
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
/* enquadramento individual por foto */
.mflow-photo img[src*="conf3d-04"] { object-position:center 30%; }
.mflow-photo img[src*="cecilia-05"]{ object-position:center 36%; }
.mflow-photo img[src*="andrept-01"]{ object-position:center 48%; }
.mflow-step:hover .mflow-photo img { transform:scale(1.06); }
.mflow-step h3 { font-size:clamp(19px,2.2vw,24px); margin-bottom:8px; }
.mflow-step p  { font-size:14px; color:var(--muted); line-height:1.6; }
@media (max-width:760px){
  .method-flow { grid-template-columns:1fr; gap:44px; }
  .method-flow::before { display:none; }
  .mflow-step { padding-top:52px; }
}

/* =====================================================================
   23) TEXTURA QUE PERCORRE TODO O SITE (grão de filme + aura que deriva)
   ===================================================================== */
/* grão de filme visível (sem blend neutralizante) */
.site-fx {
  position:fixed; inset:-60px; z-index:44; pointer-events:none; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grainMove .5s steps(4) infinite;
}
@keyframes grainMove {
  0%   { transform:translate(0,0); }
  25%  { transform:translate(-12px,8px); }
  50%  { transform:translate(10px,-10px); }
  75%  { transform:translate(-8px,-6px); }
  100% { transform:translate(6px,10px); }
}
/* holofote azul que segue o mouse (estilo Linear/Vercel) */
.site-spot {
  position:fixed; top:0; left:0; width:640px; height:640px; margin:-320px 0 0 -320px;
  z-index:43; pointer-events:none; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(45,40,255,.30) 0%, rgba(0,0,255,.12) 38%, transparent 70%);
  mix-blend-mode:screen; transition:opacity .5s; will-change:transform;
}
@media (hover:none){ .site-spot { display:none; } }

/* =====================================================================
   24) CAROUSEL — mais interativo
   ===================================================================== */
.portfolio-swiper .swiper-slide { transition:transform .45s cubic-bezier(.16,1,.3,1); }
.portfolio-swiper .swiper-slide:hover { transform:translateY(-8px) scale(1.02); z-index:2; }
.portfolio-swiper .masonry-item, .portfolio-swiper .masonry-vid { transition:box-shadow .4s; }
.portfolio-swiper .swiper-slide:hover .masonry-item,
.portfolio-swiper .swiper-slide:hover .masonry-vid { box-shadow:0 30px 60px rgba(0,0,0,.30); }
/* trabalhos mais atrativos: zoom na imagem, seta azul, overlay rico */
.portfolio-swiper .masonry-item img,
.portfolio-swiper .masonry-vid video { transition:transform .7s cubic-bezier(.16,1,.3,1); }
.portfolio-swiper .swiper-slide:hover .masonry-item img,
.portfolio-swiper .swiper-slide:hover .masonry-vid video { transform:scale(1.08); }
.portfolio-swiper .masonry-overlay {
  background:linear-gradient(180deg, rgba(0,0,255,.06) 0%, transparent 34%, rgba(5,5,15,.9) 100%) !important;
}
.portfolio-swiper .masonry-arrow { background:var(--blue); border-color:transparent; }
.portfolio-swiper .masonry-arrow svg { stroke:#fff; }
.portfolio-swiper .mi-name { font-size:17px; }

/* =====================================================================
   25) DEPOIMENTOS — VERSÃO PREMIUM
   ===================================================================== */
.testimonials {
  background: #f4f5f7;
  padding: 120px 0 100px;
}

.testimonials .sh {
  margin-bottom: 70px;
}

.testimonials .testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.testimonials .testi-card {
  background: #fff;
  border-radius: 28px;
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(29, 26, 255, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonials .testi-card:hover {
  transform: translateY(-16px);
  box-shadow: 0 35px 80px rgba(29, 26, 255, 0.14);
  border-color: var(--blue);
}

.testimonials .testi-card::before {
  content: "\201C";
  font-size: 140px;
  line-height: 1;
  color: var(--blue);
  opacity: 0.06;
  position: absolute;
  top: 20px;
  left: 35px;
  font-family: Georgia, serif;
}

.testi-rating {
  color: #FFC400;
  font-size: 24px;
  margin-bottom: 24px;
  letter-spacing: 2px;
}

.testi-text {
  font-size: 16px;
  line-height: 1.78;
  color: #1f1f2e;
  flex-grow: 1;
  position: relative;
  z-index: 1;
  font-style: italic;
}

.testi-person {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}

.testi-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(29, 26, 255, 0.15);
}

.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testi-name {
  font-weight: 700;
  font-size: 16.5px;
  margin-bottom: 2px;
}

.testi-co {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.3;
}

/* Mobile */
@media (max-width: 960px) {
  .testimonials .testi-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .testimonials .testi-card {
    padding: 42px 36px;
  }
}
/* =====================================================================
   26) MOBILE — números e cards enxutos
   ===================================================================== */
@media (max-width:600px){
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat-item { padding:26px 12px; text-align:center; }
  .stat-number { justify-content:center; }
  .stat-label { font-size:11px; margin-top:6px; }
  .spine { display:none; }
}
@media (max-width:560px){
  /* serviços: prioriza ícone + título, esconde descrição e nota extra */
  #servicos .svc > div:not(.more) { padding:22px 20px; min-height:auto; }
  #servicos .svc p { display:none; }
  #servicos .svc .more { display:none; }
  #servicos .si { width:46px; height:46px; margin-bottom:14px; }
  #servicos .si .svc-ic { width:24px; height:24px; }
  #servicos .svc h3 { font-size:19px; }
  /* frase com fotos e método um pouco menores */
  .phrase-photos { font-size:clamp(24px,8vw,34px); }
  .method-flow { gap:32px; }
}

/* =====================================================================
   27) FAQ — perguntas frequentes (acordeão)
   ===================================================================== */
#faq .faq-list { max-width:840px; margin:12px auto 0; }
.faq-item { border-top:1px solid var(--line); }
.faq-item:last-child { border-bottom:1px solid var(--line); }
.faq-q {
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 4px; font-family:var(--disp); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(17px,2.2vw,23px); color:var(--ink); transition:color .3s;
}
.faq-q:hover { color:var(--blue); }
.faq-ic { position:relative; width:18px; height:18px; flex:none; }
.faq-ic::before, .faq-ic::after { content:""; position:absolute; background:var(--blue); border-radius:2px; }
.faq-ic::before { top:8px; left:0; width:18px; height:2px; }
.faq-ic::after  { left:8px; top:0; width:2px; height:18px; transition:transform .3s, opacity .3s; }
.faq-item.open .faq-ic::after { transform:rotate(90deg); opacity:0; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq-item.open .faq-a { max-height:240px; }
.faq-a p { padding:0 4px 26px; color:var(--muted); font-size:15px; line-height:1.65; max-width:700px; }

/* =====================================================================
   29) BOTÃO DE IDIOMA (PT / EN)
   ===================================================================== */
.lang-toggle {
  background:none; border:1.5px solid var(--line); color:var(--ink); cursor:pointer;
  font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.08em;
  padding:8px 12px; border-radius:8px; transition:.25s; margin-left:6px; flex:none;
}
.lang-toggle:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
nav.dark-nav .lang-toggle { border-color:rgba(255,255,255,.3); color:#fff; }
nav.dark-nav .lang-toggle:hover { background:var(--blue); border-color:var(--blue); }
body.menu-open .lang-toggle { opacity:0; pointer-events:none; }
/* bandeira como imagem (emoji de bandeira não renderiza no Windows) */
.lang-toggle .lang-flag { width:22px; height:16px; border-radius:2px; object-fit:cover;
                          display:block; box-shadow:0 0 0 1px rgba(0,0,0,.10); }

/* =====================================================================
   30) REFINO — contraste da logo (4) + tipografia (6)
   (item 3 revertido: hero permanece como estava)
   ===================================================================== */
/* (4) Wordmark do hero em BRANCO (era azul sobre fundo escuro = baixo contraste);
       bússola continua azul como acento da marca. */
.hero-brand .hero-wordmark-img { filter:brightness(0) invert(1); }

/* (6) Tipografia maior e mais ousada */
header.hero h1 { font-size:clamp(50px,8.2vw,122px); line-height:.92; letter-spacing:-.045em; }
.sh h2, .cta h2 { font-size:clamp(40px,6vw,86px); line-height:1; letter-spacing:-.035em; }
.sh { margin-bottom:52px; }

/* =====================================================================
   31) NAV — sem links: agrupa as caixinhas à direita, espaçamento igual
   ===================================================================== */
nav .wrap .ncta       { margin-left:auto; }        /* empurra o grupo p/ a direita (desktop) */
nav .wrap .lang-toggle{ margin-left:12px; margin-right:0; }
nav .wrap .hbg        { margin-left:12px; }
@media (max-width:860px){
  nav .wrap .lang-toggle { margin-left:auto; }     /* mobile: .ncta some, o grupo é lang + menu */
}

/* =====================================================================
   32) CURSOR — só a bolinha (removido o arco), um pouco maior
   ===================================================================== */
.cursor-ring { display:none !important; }
.cursor-dot  { width:12px; height:12px; }

/* =====================================================================
   33) FORMULÁRIO DE ORÇAMENTO (no CTA escuro)
   ===================================================================== */
.quote-form { max-width:660px; margin:10px auto 44px; text-align:left; }
.qf-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.quote-form label { display:flex; flex-direction:column; gap:7px; margin-bottom:16px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.quote-form .qf-full { display:flex; }
.quote-form input, .quote-form select, .quote-form textarea {
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:11px; padding:14px 15px; color:#fff; font-family:var(--body);
  font-size:15px; font-weight:400; letter-spacing:normal; text-transform:none; transition:.25s; }
.quote-form input::placeholder, .quote-form textarea::placeholder { color:rgba(255,255,255,.35); }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline:none; border-color:var(--blue); background:rgba(255,255,255,.10); }
.quote-form option { color:#111; }
.quote-form button { margin-top:4px; }
@media (max-width:560px){ .qf-grid { grid-template-columns:1fr; } }

/* =====================================================================
   34) MOBILE — mais interativo
   ===================================================================== */
.mobile-bar { display:none; }
@media (max-width:760px){
  .mobile-bar {
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:120;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(10,10,15,.85); backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.1);
  }
  .mbar-btn { flex:1; text-align:center; padding:15px 10px; border-radius:12px;
    font-family:var(--disp); font-size:13px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; transition:transform .15s; }
  .mbar-btn:active { transform:scale(.96); }
  .mbar-quote { background:var(--blue); color:#fff; }
  .mbar-wa    { background:#fff; color:var(--ink); }
  .wabtn { display:none; }            /* já há WhatsApp na barra */
  .btt   { bottom:84px; }             /* sobe o "voltar ao topo" acima da barra */
  body   { padding-bottom:72px; }     /* barra não cobre o rodapé */
}
/* microfeedback de toque nos cards + setas maiores no lightbox */
@media (hover:none){
  .masonry-item:active, .masonry-vid:active, .testi-card:active,
  #servicos .svc > div:not(.more):active, .mflow-step:active,
  .faq-q:active, .cta-ch:active { transform:scale(.98); transition:transform .12s; }
  .lb-prev, .lb-next { width:54px !important; height:54px !important; font-size:24px !important; }
}

/* =====================================================================
   35) CLIENTES — grid estático (marcas atendidas)
   ===================================================================== */
.clients-band { padding:64px 0; border-top:1px solid var(--line); overflow:hidden; }
.clients-band-label { text-align:center; font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:36px; }

/* Marcas — esteira infinita animada */
.brands-marquee {
  position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.brands-track {
  display:flex; width:max-content; align-items:stretch;
  animation:brandsScroll 40s linear infinite; will-change:transform;
}
.brands-set { display:flex; align-items:center; gap:18px; padding-right:18px; flex:none; }
.brands-marquee:hover .brands-track { animation-play-state:paused; }
.brands-track span {
  flex:none; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--disp); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(16px,1.9vw,24px); color:var(--ink); white-space:nowrap;
  padding:11px 24px; border:1.5px solid var(--line); border-radius:100px;
  background:var(--surface); transition:color .3s, border-color .3s, background .3s;
}
.brands-track span::before {
  content:""; width:7px; height:7px; flex:none;
  background:var(--blue); transform:rotate(45deg);
}
.brands-track span:hover { color:var(--blue); border-color:var(--blue); background:rgba(0,0,255,.05); }
@keyframes brandsScroll { to { transform:translateX(-50%); } }
@media (max-width:760px){ .brands-set { gap:14px; padding-right:14px; } .brands-track { animation-duration:30s; } }
@media (prefers-reduced-motion:reduce){ .brands-track { animation:none; } }

/* Depoimentos: carousel deslizável no mobile (scroll-snap, sem lib) */
@media (max-width:760px){
  .testimonials .testi-grid {
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; padding-bottom:14px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .testimonials .testi-grid::-webkit-scrollbar { display:none; }
  .testimonials .testi-card { scroll-snap-align:start; flex:0 0 88%; }
}

/* =====================================================================
   36) SHOWREEL — cabeçalho de destaque (item 2)
   ===================================================================== */
.showreel-head { text-align:center; max-width:1240px; margin:0 auto 40px; padding:0 24px; }
.showreel-kicker { display:block; font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:12px; }
.showreel-title { font-size:clamp(40px,6vw,80px); font-weight:800; letter-spacing:-.03em; line-height:1; }

/* =====================================================================
   38) SHOWREEL + NÚMEROS — vídeo vertical (celular) ao lado dos stats
   ===================================================================== */
.showreel { padding:90px 0; }
.showreel-split { display:grid; grid-template-columns:320px 1fr; gap:60px; align-items:center; }
/* frame vertical (o vídeo 9:16 encaixa exato, sem corte nem desfoque) */
.showreel .showreel-inner {
  max-width:320px; width:100%; margin:0; aspect-ratio:9/16;
  border-radius:30px; overflow:hidden; position:relative; background:#08080d;
}
.showreel video#showreelVid { width:100%; height:100%; object-fit:cover; }
/* coluna dos números */
.showreel-stats { text-align:left; }
.showreel-stats .showreel-kicker { text-align:left; margin-bottom:10px; }
.showreel-stats .showreel-title { text-align:left; font-size:clamp(30px,4vw,50px); line-height:1.02; margin-bottom:30px; }
.showreel-stats .stats-grid { grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.showreel-stats .stat-item { padding:28px 24px; border:0;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.showreel-stats .stat-item:nth-child(2n) { border-right:0; }
.showreel-stats .stat-item:nth-child(n+3) { border-bottom:0; }
.showreel-stats .stat-number { font-size:clamp(34px,4vw,56px); }
@media (max-width:860px){
  .showreel-split { grid-template-columns:1fr; gap:34px; justify-items:center; }
  .showreel .showreel-inner { max-width:270px; }
  .showreel-stats { text-align:center; width:100%; max-width:440px; }
  .showreel-stats .showreel-kicker, .showreel-stats .showreel-title { text-align:center; }
}

/* =====================================================================
   37) FAIXA — velocidade de entrega (diferencial em destaque)
   ===================================================================== */
.speed-band { background:var(--blue); color:#fff; padding:42px 0; text-align:center; position:relative; overflow:hidden; }
.speed-band::before { content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,255,255,.12), transparent 70%); pointer-events:none; }
.speed-kicker { display:block; position:relative; font-family:var(--disp);
  font-size:clamp(22px,3vw,38px); font-weight:800; letter-spacing:-.02em; text-transform:uppercase;
  color:#fff; margin-bottom:30px; line-height:1; }
.speed-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:820px; margin:0 auto; }
.speed-item { padding:0 24px; }
.speed-item + .speed-item { border-left:1px solid rgba(255,255,255,.28); }
.speed-big { font-family:var(--disp); font-weight:800; font-size:clamp(28px,4vw,46px);
  line-height:1; letter-spacing:-.03em; margin-bottom:8px; }
.speed-item p { font-size:14px; color:rgba(255,255,255,.85); line-height:1.45; max-width:320px; margin:0 auto; }
@media (max-width:640px){
  .speed-band { padding:24px 0; }
  .speed-kicker { margin-bottom:16px; font-size:20px; letter-spacing:-.01em; }
  .speed-grid { grid-template-columns:1fr; gap:0; max-width:340px; }
  .speed-item { padding:13px 16px; }
  .speed-big { font-size:23px; margin-bottom:3px; }
  .speed-item p { font-size:12.5px; line-height:1.35; }
  .speed-item + .speed-item { border-left:0; border-top:1px solid rgba(255,255,255,.28); }
}

/* =====================================================================
   28) CLIENTES — marquee de marcas atendidas
   ===================================================================== */
.clients { padding:56px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.clients-label { text-align:center; font-size:11px; letter-spacing:.26em; text-transform:uppercase;
                 color:var(--muted); font-weight:600; margin-bottom:34px; }
.clients-marquee { overflow:hidden; }
.clients-track { display:flex; width:max-content; animation:clientsScroll 34s linear infinite; }
.clients-track:hover { animation-play-state:paused; }
.clients-set { display:flex; align-items:center; }
.clients-set .name {
  font-family:var(--disp); font-weight:800; font-size:clamp(24px,3.4vw,44px);
  letter-spacing:-.02em; color:var(--ink); opacity:.32; white-space:nowrap;
  padding:0 30px; transition:opacity .3s, color .3s;
}
.clients-set .name:hover { opacity:1; color:var(--blue); }
.clients-set .cdot { width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none; }
@keyframes clientsScroll { to { transform:translateX(-50%); } }

/* respeita reduce motion: mostra tudo estático */
@media (prefers-reduced-motion:reduce){
  .showreel-inner{ transform:none; border-radius:28px; }
  .cursor-follow, .cursor-dot, .cursor-ring{ display:none; }
  .morph{ animation:none; }
  .site-fx{ animation:none; }
  .site-spot{ display:none; }
  .hero-video{ animation:none; }
  .spine{ display:none; }
}