/* ═══════════════════════════════════════════════
   SENSE — We create, You Sense
   Brand gradient: #F8A100 → #EB600A → #E60162 → #E41482 → #A5338A → #6E2C8F
   ═══════════════════════════════════════════════ */

/* ── Fonts (brand: Spartan) ── */
/* ── Sistema tipográfico: SOMENTE 3 pesos do Spartan (fonte da marca) ──
   300 Light  → corpo e títulos display finos
   600 SemiBold → rótulos, nav, botões, títulos de UI
   900 Black  → realces em gradiente, números, ênfase                       */
@font-face{font-family:"Spartan";src:url("assets/fonts/SpartanMB-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Spartan";src:url("assets/fonts/SpartanMB-SemiBold.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Spartan";src:url("assets/fonts/SpartanMB-Black.otf") format("opentype");font-weight:900;font-display:swap}

:root{
  --bg:#0A070E;
  --bg-2:#100A16;
  --ink:#F5F1F7;
  --muted:#9C90A8;
  --faint:#5B5266;
  --line:rgba(255,255,255,.10);
  --o:#F8A100; --r:#EB600A; --m1:#E60162; --m2:#E41482; --p1:#A5338A; --p2:#6E2C8F;
  --grad:linear-gradient(100deg,var(--o),var(--r) 26%,var(--m1) 50%,var(--m2) 66%,var(--p1) 84%,var(--p2));
  /* fim do gradiente clareado: o violeta escuro sumia contra a fumaça roxa
     (parecia "cortar" o e/. em telas de menor contraste) */
  --grad-soft:linear-gradient(100deg,#ffb84d,#ff7a3c 28%,#ff3f8b 58%,#e05cd9 78%,#cf8bff);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,90px);
  --maxw:1400px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:none;overflow-x:clip}
html::-webkit-scrollbar{display:none}
body{
  font-family:"Spartan","Helvetica Neue",system-ui,sans-serif;
  font-weight:300;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; width:100%; max-width:100%; line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
section{position:relative;z-index:2}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.08em;font-weight:900}
em{font-style:normal}
.goo-defs{position:absolute;width:0;height:0;overflow:hidden}
.mobile-menu{display:none}

/* ── Fixed background layers ── */
#smoke{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%,transparent 55%,rgba(5,3,8,.55) 100%),
             linear-gradient(180deg,transparent 60%,rgba(5,3,8,.85))}

/* ── Preloader ── */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;transition:opacity .8s var(--ease),visibility .8s}
.loader.done{opacity:0;visibility:hidden}
.loader__mark{display:flex;align-items:baseline;gap:18px}
.loader__count{font-size:clamp(56px,12vw,140px);font-weight:900;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.loader__word{font-size:clamp(13px,2.4vw,18px);font-weight:300;letter-spacing:.6em;color:var(--muted)}
.loader__bar{width:min(280px,55vw);height:1px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--grad)}

/* ── Filament (scroll progress) ── */
.filament{position:fixed;left:0;top:0;bottom:0;width:2px;z-index:90;background:var(--line)}
.filament i{position:absolute;top:0;left:0;width:100%;height:0;background:var(--grad);
  box-shadow:0 0 16px rgba(228,20,130,.6)}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:12px var(--pad);
  transform:translateY(-105%);opacity:0;pointer-events:none;
  transition:transform .55s var(--ease),opacity .45s var(--ease)}
.nav.show{transform:none;opacity:1;pointer-events:auto;
  background:rgba(10,7,14,.62);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav__logo img{height:42px;width:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.nav__links{display:flex;gap:40px}
.nav__links a{font-size:15px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.82);position:relative;transition:color .3s;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--grad);transition:width .4s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
.nav__cta{font-size:14px;font-weight:600;letter-spacing:.02em;padding:12px 24px;border-radius:100px;
  border:1px solid var(--line);position:relative;overflow:hidden;transition:color .4s,border-color .4s}
.nav__cta span{position:relative;z-index:2}
.nav__cta::before{content:"";position:absolute;inset:0;background:var(--grad);transform:translateY(101%);transition:transform .45s var(--ease);z-index:1}
.nav__cta:hover{border-color:transparent;color:#fff}
.nav__cta:hover::before{transform:translateY(0)}
.nav__burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger i{width:26px;height:2px;background:var(--ink);transition:.4s var(--ease)}

/* ── Reusable bits ── */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--m2)}
.eyebrow.center{text-align:center}
.btn{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;letter-spacing:.02em;
  padding:16px 30px;border-radius:100px;background:var(--grad);color:#fff;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s}
.btn i{transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 50px -12px rgba(228,20,130,.6)}
.btn:hover i{transform:translateX(6px)}
.btn--full{width:100%;justify-content:center;margin-top:8px}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ═══════ HERO ═══════ */
.hero{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad)}
.hero__inner{position:relative;z-index:3;width:100%}
.hero__kicker{font-size:clamp(11px,1.4vw,14px);font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:24px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
/* GooeyText morphing title */
.hero__title{position:relative;width:100%;margin:0 auto}
#morphSvg{display:block;width:min(92vw,980px);height:auto;margin:0 auto;overflow:visible}
.mtxt{font-family:"Spartan","Helvetica Neue",sans-serif;font-weight:800;font-size:170px;letter-spacing:2px}
.gooey{position:absolute;inset:0;display:block;overflow:visible}
/* Goo blob (atrás) — efeito líquido. Texto menor agora => sobra espaço, não corta. */
.gooey--goo{z-index:1;filter:url(#goo)}
/* Texto nítido (frente) — sempre completo, garante o "e" e o "." */
.gooey--crisp{z-index:3}
.gooey__text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;
  font-weight:800;font-size:clamp(38px,8.2vw,110px);line-height:1.18;letter-spacing:.012em;
  background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 .14em;will-change:filter,opacity}
#gt2{opacity:0}
.gooey__text .flameS{display:inline-block;height:1.28em;width:auto;vertical-align:-.3em;margin:0 .02em}
.hero__sub{margin-top:30px;font-size:clamp(14px,1.8vw,20px);font-weight:300;color:rgba(255,255,255,.8);
  letter-spacing:.02em;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero__scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:12px;z-index:3}
.hero__scroll span{font-size:10px;font-weight:600;letter-spacing:.4em;color:var(--muted)}
.hero__scroll i{width:1px;height:46px;background:linear-gradient(var(--m2),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--o);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* ═══════ Section frame ═══════ */
.manifesto,.stats,.does,.process,.clients,.contact{max-width:var(--maxw);margin:0 auto;padding:clamp(110px,16vh,200px) var(--pad)}

/* ═══════ MANIFESTO ═══════ */
.manifesto{text-align:center;display:flex;flex-direction:column;align-items:center;gap:38px}
.manifesto__q{font-weight:300;font-size:clamp(30px,6vw,80px);line-height:1.04;letter-spacing:-.02em;max-width:16ch}
.manifesto__q .words{display:block}
.manifesto__q .accent{font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.manifesto__lead{max-width:34ch;font-size:clamp(15px,2vw,21px);font-weight:300;color:var(--muted);line-height:1.6}
.manifesto__lead strong{color:var(--ink);font-weight:600}

/* ═══════ STATS ═══════ */
.stats__head{margin-bottom:clamp(38px,6vh,66px)}
.stats__head .eyebrow{margin-bottom:16px}
.stats__head h2{font-weight:300;font-size:clamp(28px,4.6vw,62px);line-height:1.04;letter-spacing:-.02em}
.stats__layout{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(30px,5vw,90px);align-items:center}
.map{position:relative;width:100%;max-width:680px;margin:0 auto;cursor:crosshair}
.map img{width:100%;height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 30px 70px rgba(228,20,130,.34));transition:transform .35s var(--ease)}
.map__glow{position:absolute;left:50%;top:48%;width:84%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(228,20,130,.5),rgba(248,161,0,.2) 45%,transparent 68%);
  filter:blur(54px);z-index:1;animation:breathe 7s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.55}50%{transform:translate(-50%,-50%) scale(1.14);opacity:1}}
/* mouse-follow spotlight */
.map__spot{position:absolute;left:50%;top:50%;width:240px;height:240px;border-radius:50%;z-index:3;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(248,161,0,.12) 40%,transparent 70%);mix-blend-mode:screen}
.map:hover .map__spot{opacity:1}
.map figcaption{position:absolute;bottom:-40px;left:0;right:0;text-align:center;font-size:14px;font-weight:300;
  color:var(--muted);letter-spacing:.02em;z-index:4}
.map figcaption b{color:var(--ink);font-weight:600;font-size:1.15em}
.stats__list{list-style:none;display:flex;flex-direction:column}
.stats__list li{display:flex;align-items:baseline;gap:clamp(16px,2vw,28px);padding:clamp(13px,2.1vh,22px) 0;
  border-bottom:1px solid var(--line)}
.stats__list li:first-child{border-top:1px solid var(--line)}
.stats__n{font-size:clamp(32px,4.4vw,60px);font-weight:900;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;min-width:2.8ch;text-align:right;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats__l{font-size:clamp(13px,1.5vw,17px);font-weight:300;color:var(--muted);letter-spacing:.01em}

/* ═══════ O QUE FAZEMOS ═══════ */
.does__intro{max-width:48ch}
.does__title{font-weight:300;font-size:clamp(30px,5.4vw,72px);line-height:1.02;letter-spacing:-.02em;margin:18px 0 22px}
.does__lead{font-size:clamp(15px,1.9vw,20px);font-weight:300;color:var(--muted);line-height:1.6;max-width:40ch}
.marquee{margin:clamp(40px,7vh,80px) 0 0;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee--alt{margin-top:14px}
.marquee__track{display:inline-flex;align-items:center;gap:30px;will-change:transform}
.marquee__track span{font-size:clamp(34px,6vw,82px);font-weight:600;letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,.62)}
.marquee--alt .marquee__track span{-webkit-text-stroke:0;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.marquee__track .dot{-webkit-text-stroke:0;color:var(--o)}
.marquee--alt .marquee__track .dot{background:none;-webkit-text-fill-color:var(--o);color:var(--o)}
.does__foot{margin-top:clamp(40px,7vh,76px);font-size:clamp(15px,2vw,22px);font-weight:300;color:var(--muted);max-width:30ch}

/* ═══════ PROCESSO — órbita (ciclo em looping) ═══════ */
@keyframes spin{to{transform:rotate(360deg)}}
.process{--R:clamp(160px,29vw,385px);--node:clamp(84px,12vw,150px);display:flex;justify-content:center}
.orbit{position:relative;width:calc(var(--R)*2 + var(--node) + 14px);height:calc(var(--R)*2 + var(--node) + 14px)}
.orbit::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(228,20,130,.16),rgba(110,44,143,.10) 45%,transparent 68%);
  filter:blur(30px);pointer-events:none;animation:breathe 9s var(--ease) infinite}
.orbit::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--R)*2 + var(--node)*1.35);height:calc(var(--R)*2 + var(--node)*1.35);
  margin:0;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(255,255,255,.12);
  animation:ringSpin 90s linear infinite;pointer-events:none}
@keyframes ringSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.orbit__ring{position:absolute;left:50%;top:50%;width:calc(var(--R)*2);height:calc(var(--R)*2);
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--line)}
/* cometa de luz orbitando — o ciclo que nunca para */
.orbit__comet{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;
  background:#ffd98f;box-shadow:0 0 20px 6px rgba(248,161,0,.9),0 0 64px 20px rgba(228,20,130,.45);
  animation:orbitSpin 13s linear infinite}
@keyframes orbitSpin{from{transform:rotate(0deg) translateY(calc(var(--R)*-1))}to{transform:rotate(360deg) translateY(calc(var(--R)*-1))}}
.orbit__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--node)*1.05);pointer-events:none}
.orbit__center h2{font-weight:300;font-size:clamp(21px,3.4vw,54px);line-height:1.1;letter-spacing:-.02em;margin-top:16px}
.orbit__desc{margin-top:18px;font-size:clamp(13px,1.45vw,19px);font-weight:300;color:var(--muted);line-height:1.55;
  max-width:26ch;min-height:3.2em;transition:opacity .3s var(--ease)}
.orbit__desc b{color:var(--ink);font-weight:600;letter-spacing:.06em}
.orbit__desc .loop{display:inline-block;color:var(--o);font-size:1.2em;vertical-align:-.08em;margin:0 .1em;animation:spin 4.5s linear infinite}
.orbit__node{position:absolute;left:50%;top:50%;width:var(--node);height:var(--node);margin:calc(var(--node)/-2);
  border-radius:50%;border:0;cursor:pointer;background:rgba(12,8,17,.55);backdrop-filter:blur(5px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink);font-family:inherit;
  transform:rotate(var(--a)) translateY(calc(var(--R)*-1)) rotate(calc(var(--a)*-1));
  transition:transform .5s var(--ease),background .4s;opacity:0}
.orbit__node::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.orbit__node.in{animation:nodeIn .9s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes nodeIn{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
.orbit__node i{font-style:normal;font-size:clamp(12px,1.4vw,19px);font-weight:600;letter-spacing:.16em;color:var(--m2)}
.orbit__node b{font-weight:600;font-size:clamp(9px,1.15vw,16px);letter-spacing:.14em;text-transform:uppercase}
.orbit__node:hover,.orbit__node.on{background:rgba(228,20,130,.16);
  transform:rotate(var(--a)) translateY(calc(var(--R)*-1)) rotate(calc(var(--a)*-1)) scale(1.1)}

/* ═══════ CASES (horizontal pin) ═══════ */
.cases{max-width:none;padding:0}
.cases__pin{height:100svh;overflow:hidden;display:flex;align-items:center}
.cases__rail{display:flex;align-items:center;gap:clamp(24px,3.5vw,60px);padding:0 var(--pad);height:100%;will-change:transform}
.case{flex:0 0 auto;height:74svh;display:flex}
.case--intro,.case--outro{flex-direction:column;justify-content:center;gap:26px;width:min(78vw,560px)}
.case--intro .eyebrow{color:var(--m2)}
.case--intro h2,.case--outro h2{font-weight:300;font-size:clamp(32px,5vw,68px);line-height:1.03;letter-spacing:-.02em}
.case--intro__hint{font-size:12px;font-weight:600;letter-spacing:.3em;color:var(--muted)}
.case[data-case]{width:min(86vw,720px);position:relative;border-radius:4px;overflow:hidden;background:var(--bg-2)}
.case__media{position:absolute;inset:0}
.case__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.1s var(--ease);filter:saturate(1.05) contrast(1.03)}
.case[data-case]:hover .case__media img{transform:scale(1)}
.case__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,5,12,.92) 4%,rgba(8,5,12,.25) 42%,transparent 70%)}
.case__info{position:relative;z-index:2;margin-top:auto;padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;gap:8px;width:100%}
.case__idx{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--o)}
.case__tag{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.case__info h3{font-size:clamp(26px,3.6vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1}
.case__loc{font-size:12.5px;font-weight:300;color:var(--muted);letter-spacing:.04em}
.case__info p{font-size:clamp(14px,1.6vw,18px);font-weight:300;color:#d8cfe0;max-width:36ch;margin-top:6px}
.case--outro .btn{align-self:flex-start}

/* ═══════ CLIENTES (carrossel após o hero) ═══════ */
.clients{text-align:center;padding-top:clamp(46px,7vh,84px);padding-bottom:clamp(46px,7vh,84px)}
.clients .eyebrow{margin-bottom:44px}
.clients__marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients__track{display:inline-flex;align-items:center;gap:clamp(54px,6vw,104px);will-change:transform}
.clients__item{display:inline-flex;align-items:center;justify-content:center;height:72px;flex:0 0 auto}
.clients__item img{width:auto;opacity:.74;filter:brightness(0) invert(1);transition:opacity .4s,filter .4s}
.clients__item img:hover{opacity:1;filter:none}

/* ═══════ CONTATO ═══════ */
.contact{position:relative}
.contact::before{content:"";position:absolute;inset:-2% -10% -20%;z-index:-1;
  background:radial-gradient(80% 70% at 50% 50%,rgba(8,5,12,.72),transparent 75%)}
.contact__head h2{font-weight:300;font-size:clamp(30px,5.4vw,76px);line-height:1.12;letter-spacing:-.02em;padding-bottom:.04em}
.contact__head h2.grad{font-weight:900;line-height:1.14}
.contact__grid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(40px,6vw,90px);margin-top:clamp(50px,8vh,90px);align-items:start}
.field{position:relative;margin-bottom:22px}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:18px 0 12px;color:var(--ink);font-family:inherit;font-size:16px;font-weight:300;resize:none;transition:border-color .4s}
.field textarea{min-height:54px}
.field label{position:absolute;left:0;top:18px;color:var(--muted);font-size:16px;font-weight:300;pointer-events:none;
  transition:.35s var(--ease)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--m2)}
.field input:focus+label,.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label{
  top:-8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--m2)}
.contact__note{margin-top:18px;font-size:13px;font-weight:300;color:var(--faint);font-style:italic}
.contact__info{display:flex;flex-direction:column}
.contact__link{display:flex;flex-direction:column;gap:6px;padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}
.contact__link span{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.contact__link strong{font-size:clamp(15px,2vw,20px);font-weight:300;transition:color .4s}
.contact__link:hover{padding-left:14px}
.contact__link:hover strong{color:var(--m2)}

/* ═══════ FOOTER ═══════ */
.footer{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vh,90px) var(--pad) 60px;display:flex;
  justify-content:space-between;align-items:end;gap:20px;border-top:1px solid var(--line)}
.footer__mark{font-size:clamp(20px,3vw,38px);font-weight:300;letter-spacing:-.01em}
.footer__mark .grad{font-weight:900}
.footer__meta{font-size:12px;color:var(--faint);letter-spacing:.04em}

/* ── WhatsApp float ── */
.wa{position:fixed;right:22px;bottom:22px;z-index:120;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#25D366,#128C7E);
  box-shadow:0 12px 34px -8px rgba(37,211,102,.6);transition:transform .4s var(--ease)}
.wa:hover{transform:scale(1.1) rotate(-6deg)}

/* ═══════ Case clicável + Lightbox ═══════ */
.case[data-case]{cursor:pointer}
.case__see{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--o);transition:gap .3s var(--ease)}
.case[data-case]:hover .case__see{gap:14px}
.lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  background:rgba(7,4,10,.96);backdrop-filter:blur(8px);padding:clamp(20px,5vw,72px)}
.lb.open{opacity:1;visibility:visible}
.lb__close{position:fixed;top:24px;right:28px;z-index:310;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(14,9,18,.55);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);cursor:pointer;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.lb__close svg{stroke-width:2}
.lb__close:hover{background:var(--m2);border-color:transparent;transform:rotate(90deg)}
.lb__inner{width:min(1080px,100%);max-height:100%;overflow-y:auto;overflow-x:hidden;
  transform:translateY(26px);transition:transform .55s var(--ease);scrollbar-width:none}
.lb.open .lb__inner{transform:none}
.lb__inner::-webkit-scrollbar{display:none}
.lb__head{text-align:center;margin-bottom:30px}
.lb__tag{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--m2)}
.lb__head h3{font-size:clamp(28px,4vw,52px);font-weight:600;letter-spacing:-.02em;margin-top:8px}
.lb__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lb__grid img{width:100%;height:100%;object-fit:cover;border-radius:5px;aspect-ratio:3/2;background:var(--bg-2);
  opacity:0;transform:translateY(20px) scale(.98);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.lb__grid img.in{opacity:1;transform:none}
body.lb-open{overflow:hidden}

/* ═══════ Responsive ═══════ */
@media (max-width:900px){
  .nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__links{display:none}
  /* overlay de menu mobile (elemento separado, fora do nav) */
  .mobile-menu{display:flex;position:fixed;inset:0;z-index:95;flex-direction:column;align-items:center;
    justify-content:center;gap:22px;background:rgba(9,6,13,.97);
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
  .mobile-menu a{font-size:30px;font-weight:300;color:var(--ink);letter-spacing:.01em}
  .mobile-menu__cta{font-size:15px;font-weight:600;padding:12px 28px;border:1px solid rgba(255,255,255,.25);
    border-radius:100px;margin-top:16px}
  body.menu-open .mobile-menu{opacity:1;visibility:visible}
  /* mantém o nav (e o X do burger) visível e acima do overlay */
  body.menu-open .nav{transform:none!important;opacity:1;pointer-events:auto;background:transparent;
    backdrop-filter:none;border-bottom-color:transparent}
  body.menu-open .nav__burger i:first-child{transform:translateY(4px) rotate(45deg)}
  body.menu-open .nav__burger i:last-child{transform:translateY(-4px) rotate(-45deg)}
  body.menu-open{overflow:hidden}
  .stats__layout{grid-template-columns:1fr;gap:60px}
  .map{order:-1;max-width:420px}
  .process{--R:clamp(140px,30vw,240px);--node:clamp(72px,14vw,104px)}
  .contact__grid{grid-template-columns:1fr}
  .footer{flex-direction:column;align-items:start}
  #morphSvg{width:94vw}
  .lb__grid{grid-template-columns:repeat(2,1fr)}
  /* cases: carrossel horizontal contido (só ele rola na horizontal) */
  .cases__pin{height:auto;display:block;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:36px 0}
  .cases__pin::-webkit-scrollbar{display:none}
  .cases__rail{height:auto;align-items:stretch;gap:16px;padding:0 16px}
  .case{height:auto}
  .case[data-case]{width:82vw;height:62svh;scroll-snap-align:center}
  .case--intro,.case--outro{width:78vw;height:auto;scroll-snap-align:center}
}
@media (max-width:560px){
  .process{--R:37vw;--node:19vw}
  .orbit__desc{display:none}
  .stats__list li{gap:18px}
  .case[data-case]{width:90vw;height:70svh}
  .nav__logo img{height:38px}
  .lb__grid{grid-template-columns:1fr}
  .lb__grid img,.lb__grid img:first-child{aspect-ratio:4/3}
  .clients__row{gap:30px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.1ms!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ═══════ Contato: abas cliente/fornecedor ═══════ */
.contact__tabs{display:flex;gap:12px;margin-top:clamp(34px,5vh,54px);flex-wrap:wrap}
.ctab{font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:.05em;padding:13px 26px;
  border-radius:100px;border:1px solid var(--line);background:transparent;color:var(--muted);
  cursor:pointer;transition:color .3s,border-color .3s,background .35s}
.ctab:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.ctab.on{background:var(--grad);color:#fff;border-color:transparent}
.cpanel{display:none}
.cpanel.on{display:block;animation:panelIn .6s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.forn{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,90px);margin-top:clamp(40px,6vh,64px);align-items:start}
.forn__intro h3{font-weight:300;font-size:clamp(26px,3.6vw,48px);line-height:1.1;letter-spacing:-.02em;margin:14px 0 18px}
.forn__intro p{font-weight:300;font-size:clamp(14px,1.6vw,18px);color:var(--muted);line-height:1.65;max-width:38ch}
.field select{appearance:none;-webkit-appearance:none;width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:18px 0 12px;color:var(--muted);font-family:inherit;
  font-size:16px;font-weight:300;cursor:pointer;transition:border-color .4s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%239C90A8' fill='none' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 4px center}
.field select:focus{outline:0;border-color:var(--m2);color:var(--ink)}
.field select option{background:#140e1c;color:var(--ink)}
.footer__forn{color:var(--muted);transition:color .3s}
.footer__forn:hover{color:var(--m2)}
@media (max-width:900px){.forn{grid-template-columns:1fr;gap:36px}}

.forn__intro h3 .grad{white-space:nowrap}

/* ═══════ HERO: vídeo em duotone da marca ═══════ */
.hero{overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:grayscale(1) contrast(.95) brightness(.50)}
/* duotone: o gradiente da marca colore a luminância do vídeo */
.hero__tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,var(--o),var(--m1) 45%,var(--m2) 62%,var(--p2));
  mix-blend-mode:color;opacity:.95}
/* scrim central p/ contraste do título + vinheta */
.hero__shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 46%,rgba(7,4,10,.58),rgba(7,4,10,.18) 62%,transparent 78%),
             linear-gradient(180deg,rgba(7,4,10,.5),transparent 26%)}
/* transição suave para a dobra seguinte */
.hero__fade{position:absolute;left:0;right:0;bottom:-1px;height:32vh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,7,14,.72) 55%,var(--bg))}

/* costura hero -> dobra seguinte: fumaca surge do escuro, sem risco */
.clients{position:relative}
.clients::before{content:"";position:absolute;left:50%;width:100vw;transform:translateX(-50%);top:0;height:70vh;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,var(--bg) 8%,rgba(10,7,14,.72) 42%,rgba(10,7,14,.28) 70%,transparent)}
.clients>*{position:relative;z-index:1}