/* ===========================================================
   DIONIZIO MACIEL — Portfólio
   Vanilla CSS. Sem framework. Tema escuro / acento vermelho.
   =========================================================== */

@font-face{
  font-family:"Agency";
  src:url("../fonts/agency.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --bg:#0a0a0c;
  --bg-2:#0f0f12;
  --bg-3:#141418;
  --surface:#16161b;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --ink:#f5f5f7;
  --ink-2:#b6b6c0;
  --ink-3:#7c7c87;
  --accent:#ED1D32;
  --accent-2:#9E1126;
  --accent-soft:rgba(237,29,50,.12);
  --maxw:1180px;
  --r:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- LOADING SCREEN (logo + glow vermelho + barra; fade-out no load) ---------- */
.loader{position:fixed;inset:0;z-index:9999;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:var(--bg);transform-origin:center;
  transition:opacity .8s var(--ease),transform .9s cubic-bezier(.7,0,.3,1),visibility .9s}
/* saída estilo Netflix: dá zoom (cresce) + dissolve, revelando a página por trás */
.loader.done{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.8)}
.loader::before{content:"";position:absolute;top:50%;left:50%;
  width:min(72vw,640px);aspect-ratio:1;transform:translate(-50%,-58%);pointer-events:none;
  background:radial-gradient(circle,rgba(237,29,50,.4),rgba(237,29,50,.1) 38%,transparent 70%);
  filter:blur(50px);animation:loaderGlow 2.4s ease-in-out infinite}
.loader-logo{position:relative;z-index:1;width:clamp(180px,26vw,340px);height:auto;
  opacity:0;transform:translateY(8px) scale(.97);animation:loaderLogo .9s var(--ease) forwards}
.loader-bar{position:relative;z-index:1;width:clamp(130px,17vw,210px);height:2px;border-radius:2px;
  background:rgba(255,255,255,.12);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--accent);
  box-shadow:0 0 14px var(--accent);animation:loaderBar 1.2s var(--ease) forwards}
@keyframes loaderLogo{to{opacity:1;transform:none}}
@keyframes loaderBar{to{width:100%}}
@keyframes loaderGlow{0%,100%{opacity:.6}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .loader::before,.loader-logo,.loader-bar i{animation:none}
  .loader-logo{opacity:1;transform:none}.loader-bar i{width:100%}}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}

.display{font-family:"Agency",sans-serif;font-weight:400;line-height:.92;letter-spacing:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.accent{color:var(--accent)}

/* section heading block */
.sec-head{text-align:center;margin-bottom:0}
/* ESPAÇAMENTO título→conteúdo padronizado em todas as dobras (respiro generoso,
   no espírito do Portfólio). Controlado via margin-top do conteúdo p/ evitar as
   inconsistências de margin-collapse entre estruturas diferentes. */
#servicos .bento,
#portfolio .work-grid,
#processo .timeline,
#sobre .about-grid{margin-top:clamp(52px,7vw,90px)}
.kicker{display:inline-block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;font-weight:600}
.sec-title{font-family:"Agency";font-size:clamp(44px,7vw,92px);line-height:1.02}
.sec-sub{color:var(--ink-2);max-width:66ch;margin:clamp(24px,2.4vw,34px) auto 0;font-size:18px;line-height:1.6;text-wrap:balance}

section{padding:clamp(96px,13vw,160px) 0 clamp(72px,10vw,120px);position:relative;z-index:0}
/* glow sutil por seção (evita preto chapado); alterna o lado */
section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 55% at 18% 12%,rgba(237,29,50,.06),transparent 60%)}
section:nth-of-type(even)::before{
  background:radial-gradient(70% 55% at 82% 12%,rgba(237,29,50,.055),transparent 60%)}
section>.wrap{position:relative;z-index:1}

/* LIGHT RAYS bem suaves no CTA — feixes vindo do topo, leve sweep (versão CSS leve) */
.fx-rays{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.5;
  -webkit-mask:radial-gradient(125% 100% at 50% 0%,#000 6%,transparent 66%);
  mask:radial-gradient(125% 100% at 50% 0%,#000 6%,transparent 66%)}
.fx-rays::before,.fx-rays::after{content:"";position:absolute;left:50%;top:-45%;
  width:180%;height:185%;transform:translateX(-50%);transform-origin:50% 0;
  background:repeating-conic-gradient(from 90deg at 50% 0%,
    transparent 0deg,rgba(237,29,50,.06) 1.4deg,transparent 4deg,transparent 9deg);
  filter:blur(16px)}
.fx-rays::after{opacity:.6;filter:blur(28px);
  background:repeating-conic-gradient(from 90deg at 50% 0%,
    transparent 0deg,rgba(255,70,90,.05) 2deg,transparent 6deg,transparent 14deg)}
.fx-rays::before{animation:fxRaysA 24s ease-in-out infinite}
.fx-rays::after{animation:fxRaysB 34s ease-in-out infinite}
@keyframes fxRaysA{0%,100%{transform:translateX(-50%) rotate(-3.5deg)}50%{transform:translateX(-50%) rotate(3.5deg)}}
@keyframes fxRaysB{0%,100%{transform:translateX(-50%) rotate(2.5deg)}50%{transform:translateX(-50%) rotate(-2.5deg)}}
@media(prefers-reduced-motion:reduce){.fx-rays::before,.fx-rays::after{animation:none}}

/* GRID de pontos interativo (mesmo efeito do site Bernard): base sutil + realce no cursor
   Seções: Serviços / Processo / Sobre. --dot-gap define o espaçamento (= passo da deriva). */
.fx-grid{position:absolute;inset:0;z-index:0;pointer-events:none;--dot-gap:34px;
  transform-origin:center;animation:grid-zoom 20s ease-in-out infinite}
/* camada base: grade de pontos (nas interseções) + linhas; deriva lenta + respiro de opacidade */
.fx-grid::before{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 0 0,rgba(255,255,255,.24) 1.5px,transparent 2px),
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:var(--dot-gap) var(--dot-gap);background-position:0 0;
  -webkit-mask-image:radial-gradient(ellipse 74% 68% at 50% 50%,#000 12%,transparent 82%);
  mask-image:radial-gradient(ellipse 74% 68% at 50% 50%,#000 12%,transparent 82%);
  animation:grid-drift 38s linear infinite,grid-breathe 10s ease-in-out infinite}
/* camada de realce: mesma grade, brilhante, revelada só num círculo no cursor */
.fx-grid::after{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 0 0,rgba(255,255,255,.6) 1.5px,transparent 2px),
    linear-gradient(to right,rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:var(--dot-gap) var(--dot-gap);background-position:0 0;
  -webkit-mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
  mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
  animation:grid-drift 38s linear infinite}
@keyframes grid-drift{from{background-position:0 0}to{background-position:0 var(--dot-gap)}}
@keyframes grid-breathe{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes grid-zoom{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){.fx-grid,.fx-grid::before,.fx-grid::after{animation:none}}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s,backdrop-filter .3s,border-color .3s,padding .3s;
  border-bottom:1px solid transparent;padding:18px 0}
.nav.scrolled{background:rgba(10,10,12,.72);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);padding:12px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center}
.brand img{height:30px;width:auto;display:block}
.brand .mark{color:var(--accent)}
.nav-links{display:flex;gap:30px;list-style:none;font-size:14px}
.nav-links a{color:var(--ink-2);transition:color .2s;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;
  background:var(--accent);transition:width .25s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{border:1px solid var(--line-2);padding:9px 20px;border-radius:8px;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;transition:.25s;color:var(--ink)}
.nav-cta:hover{border-color:var(--accent);background:var(--accent-soft)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:22px;position:relative}
.nav-toggle span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);transition:.3s}
.nav-toggle span:nth-child(1){top:0}
.nav-toggle span:nth-child(2){top:10px}
.nav-toggle span:nth-child(3){top:20px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;padding:17px 32px;border-radius:10px;cursor:pointer;border:0;
  font-family:inherit;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s}
.btn svg{width:20px;height:20px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.btn-wa{background:var(--accent);color:#fff;box-shadow:0 8px 30px rgba(237,29,50,.32)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(237,29,50,.55)}

/* ---------- HERO ----------
   Geometria fiel ao Figma (viewBox 1920×756, foto 714×886 em x=836..1550).
   Halo + toolbars vivem DENTRO de .photo-wrap → acompanham a foto em qualquer
   largura. Play+keyframes ancorado ao .wrap (não à viewport).
   Layout: a hero do Figma é 1920×756 (proporção 2.54:1), NÃO 100vh.
   Usar 100svh estoura em monitores altos/verticais (vira mar de preto).
   Por isso a altura é controlada com TETO (clamp) — fiel ao Figma e sem
   espaço morto em qualquer tela. Conteúdo centralizado como bloco. */
/* HERO PINADA: gruda no topo (sticky) enquanto o conteúdo rola por cima (efeito Nexyo) */
.hero{min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:96px 0 0;overflow:hidden;
  position:sticky;top:0;z-index:0}
/* camada que rola POR CIMA da hero pinada — fundo opaco + z-index acima */
.site-content{position:relative;z-index:1;background:var(--bg)}

/* fumaça MUITO sutil derivando atrás da foto, dentro do glow (inspirado na Nexyo) */
.hero-smoke{position:absolute;inset:-15%;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  background-size:cover;filter:blur(20px) contrast(1.05);opacity:.8;
  mix-blend-mode:multiply;
  -webkit-mask:radial-gradient(64% 60% at 50% 70%,#000 0%,#000 34%,transparent 82%);
  mask:radial-gradient(64% 60% at 50% 70%,#000 0%,#000 34%,transparent 82%);
  animation:heroSmoke 30s ease-in-out infinite alternate}
@keyframes heroSmoke{
  0%{transform:translate3d(-4%,3%,0) scale(1.06) rotate(-2deg)}
  100%{transform:translate3d(5%,-4%,0) scale(1.22) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.hero-smoke{animation:none}}
/* hero usa o MESMO wrap das outras seções (1180px) → texto alinhado com menu;
   a foto extrapola usando margin-right negativo na .photo-wrap (sem afetar o texto) */
.hero .wrap{position:relative;z-index:2;width:100%;max-width:var(--maxw)}
/* proporção das colunas fiel ao Figma: texto 466 : foto 714 ≈ .78fr 1fr */
.hero-grid{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,4vw,72px);position:relative}
.copy{align-self:center;flex:0 1 clamp(440px,40vw,640px);padding-bottom:clamp(16px,4vh,56px)}

/* fundo base + vignette: funde a luz vermelha ao preto, sem virar bola no canto */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.vignette{position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(0,0,0,.5), transparent 60%)}

/* play+keyframes ancorado ao container (Figma: x≈-5%..18% do canvas) */
.hero-play{position:absolute;top:50%;
  left:clamp(-440px, -14vw, -40px);
  width:clamp(280px, 32vw, 640px);height:auto;
  z-index:0;opacity:.78;pointer-events:none;
  transform:translateY(-50%);
  filter:blur(.8px) drop-shadow(0 0 36px rgba(237,29,50,.22));
  animation:heroFloat 9s ease-in-out infinite}
/* gêmeo espelhado no canto inferior direito (filter7 do Figma — opacity 0.4) */
.hero-play-2{
  left:auto; top:auto;
  right:clamp(-380px, -11vw, -20px);
  bottom:clamp(-60px, -2vw, 20px);
  width:clamp(260px, 28vw, 580px);
  opacity:.45;
  transform:scaleX(-1);
  animation-duration:11s;
  animation-direction:reverse}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:22px}
.eyebrow .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px var(--accent)}
.hero h1{font-size:clamp(46px,6.2vw,96px);margin-bottom:26px;white-space:nowrap}
.hero .lede{font-size:clamp(17px,1.7vw,23px);color:var(--ink-2);max-width:38ch;margin-bottom:40px}
.hero .lede b{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:16px;flex-wrap:wrap}
/* botões um pouco maiores só na hero (proporção com a foto grande) */
.hero .btn{font-size:16px;padding:20px 40px}
.hero .btn svg{width:22px;height:22px}

/* foto e tudo que orbita ela
   isolation: cria stacking context para as mix-blend-modes (halos + depth)
   blendarem APENAS dentro de .photo-wrap, não vazando pro fundo da hero.
   justify-self:end + max-width 720px → borda direita da foto encosta na borda
   direita do container (igual Figma: photo right edge = container right edge). */
/* foto escala com a ALTURA da viewport (svh) — assim o sangramento sobre a
   base da hero fica constante em qualquer monitor, com teto de 700px. */
/* foto HEIGHT-DRIVEN: escala pela altura e preenche o hero (ultrawide friendly).
   width:auto segue a proporção; max-width:54vw evita sobrepor o texto em telas estreitas-altas. */
.photo-wrap{position:relative;align-self:flex-end;flex:0 0 auto;
  height:min(calc(100svh - 96px), 1400px);width:auto;max-width:54vw;
  margin-bottom:clamp(-60px, -3svh, -24px);  /* sangra+clipa a base */
  isolation:isolate}
.photo-wrap > picture{position:relative;z-index:2;display:block;height:100%}
.photo-wrap > picture > img{height:100%;width:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.65));
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 98%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 98%)}

/* HALO — três discos derivados do Figma. Blur proporcional ao stdDeviation
   do Figma escalado para a foto (480/714 ≈ 0.67):
     big  : circle r=281.659  @ 40.7%/44.7% — stdDev 260.85 → blur ~175px
     mid  : ellipse 257×250   @ 61.5%/46.3% — stdDev 85.65  → blur ~57px
     core : ellipse 101.9×99.2@ 61.5%/37.4% — stdDev 85.65  → blur ~57px */
.halo{position:absolute;border-radius:50%;pointer-events:none;
  will-change:transform}
.halo-bg{
  left:40.7%; top:44.7%;
  width:82%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(1.55);
  background:radial-gradient(circle, rgba(190,20,45,1) 0%, rgba(168,18,40,.8) 30%, rgba(140,14,33,.35) 55%, transparent 76%);
  filter:blur(115px);
  z-index:0}
.halo-mid{
  left:61.5%; top:46.3%;
  width:76%; aspect-ratio:257/250;
  transform:translate(-50%,-50%) scale(1.35);
  background:radial-gradient(circle, rgba(200,22,48,.95) 0%, rgba(180,20,44,.6) 35%, transparent 70%);
  filter:blur(55px);
  mix-blend-mode:plus-lighter;
  z-index:0}
.halo-core{
  left:61.5%; top:38.5%;
  width:34%; aspect-ratio:101.9/99.2;
  transform:translate(-50%,-50%) scale(1.7);
  background:radial-gradient(circle, rgba(255,45,72,1) 0%, rgba(237,29,50,.85) 28%, rgba(233,29,58,.3) 55%, transparent 76%);
  filter:blur(50px);
  mix-blend-mode:plus-lighter;
  z-index:3}

/* DEPTH — duas elipses pretas que integram a base da foto ao fundo (Ellipse 7
   color-burn + Ellipse 5 soft-light do Figma). São ELAS que fundem a foto ao
   preto de forma orgânica — NADA de gradient linear. Blur amplíssimo (stdDev
   185 no Figma) = transição suave e "sutil" como pediu o cliente.
   A foto sangra+clipa embaixo; estas elipses escurecem a transição. */
.depth{position:absolute;border-radius:50%;pointer-events:none;
  background:#000;will-change:transform}
.depth-burn{
  /* Ellipse 7: rx=281.9 ry=145.9 @ (1194.93, 590.965) → 50.3%/71.4% */
  left:50.3%; bottom:-6%;
  width:84%; aspect-ratio:564/292;
  transform:translateX(-50%);
  opacity:.85;
  filter:blur(150px);
  mix-blend-mode:color-burn;
  z-index:4}
.depth-soft{
  /* Ellipse 5: rx=318 ry=139.5 @ (1195, 591.5) → 50.3%/71.5% */
  left:50.3%; bottom:-8%;
  width:94%; aspect-ratio:636/279;
  transform:translateX(-50%);
  opacity:.9;
  filter:blur(150px);
  mix-blend-mode:soft-light;
  z-index:5}
/* sombra de contato extra na base — funde o recorte do PNG ao fundo sem
   linha dura, usando radial (elíptico) em vez de gradient linear */
.photo-wrap::after{content:"";position:absolute;z-index:6;pointer-events:none;
  left:-10%;right:-10%;bottom:-4%;height:34%;
  background:radial-gradient(60% 120% at 50% 100%,
    rgba(10,10,12,.9) 0%, rgba(10,10,12,.5) 45%, transparent 72%)}

@keyframes heroFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}

/* ângulo animável do rotating light border */
@property --lg{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ROTATING LIGHT BORDER (LumaButton): luz branca fina (1px) que percorre a
   borda continuamente. Classe .btn-luma — usada na hero, portfólio e CTA. */
.btn-luma{position:relative}
.btn-luma::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(255,255,255,.15)}
.btn-luma::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--lg),
    transparent 0deg, transparent 238deg,
    rgba(255,255,255,.35) 300deg, #fff 336deg, rgba(255,255,255,.35) 356deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.6));
  animation:lumaSpin 3.5s linear infinite}
@keyframes lumaSpin{to{--lg:360deg}}
/* no ghost, a luz substitui a borda padrão (evita contorno duplo) */
.btn-ghost.btn-luma{border-color:transparent}

/* stats — FAIXA sólida #0A0A0F, COLADA na hero (sem espaço), com DROP SHADOW
   vermelho do Figma (shadow 0 0 50.1px -24px #ED1D32) que cria o glow vazando
   pra cima (base da hero) e pra baixo. A .stats vem depois da hero no DOM →
   a sombra é pintada por cima dela. */
.stats{margin-top:0;position:relative;background:#0A0A0F;
  /* esmaece as laterais (fade horizontal nas pontas) */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding-top:41px;padding-bottom:41px;position:relative;z-index:1}
.stat{text-align:center;padding:2px 16px;position:relative;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* separador vertical sutil entre os stats */
.stat:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);height:56px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}
.stat .n{font-family:"Agency";font-size:clamp(34px,4.4vw,50px);color:var(--accent);
  line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.stat .l{font-family:"Agency",sans-serif;font-size:13.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);margin-top:10px}
/* reveal com stagger ao entrar na tela (classe .show via JS) */
.stats.show .stat{opacity:1;transform:none}
.stats.show .stat:nth-child(1){transition-delay:.05s}
.stats.show .stat:nth-child(2){transition-delay:.13s}
.stats.show .stat:nth-child(3){transition-delay:.21s}
.stats.show .stat:nth-child(4){transition-delay:.29s}
/* Cores de seção: Serviços, Sobre e Rodapé num tom levemente mais claro (#0E0E16);
   as demais seções ficam no preto base (#0a0a0c). */
#servicos,#sobre{background:#0E0E16}
/* remove o glow vermelho de fundo (section::before) em serviços e portfólio */
#servicos::before,#portfolio::before{display:none}

/* ---------- SERVICES (bento grid — mesma DNA dos cards do Portfólio) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;grid-auto-rows:300px}
.svc-card{position:relative;overflow:hidden;grid-column:span 4;z-index:1;
  border-radius:clamp(16px,1.6vw,22px);border:1px solid var(--line);background:var(--bg-3);
  display:flex;flex-direction:column;justify-content:flex-end}
.bento .svc-card{transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .35s var(--ease),box-shadow .5s var(--ease)}
.svc-card.svc-lg{grid-column:span 8}
.bento .svc-card:hover{transform:scale(1.035);z-index:5;border-color:var(--line-2);box-shadow:0 34px 80px rgba(0,0,0,.6)}
/* imagem de fundo com zoom no hover (mesmo gesto do portfólio) */
.svc-card-media{position:absolute;inset:0;z-index:0;background-image:var(--img);
  background-size:cover;background-position:center;
  transition:transform .6s var(--ease)}
.svc-card:hover .svc-card-media{transform:scale(1.06)}
.svc-card-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(6,6,9,.94) 6%,rgba(6,6,9,.5) 46%,transparent 74%)}
.svc-card .pill{position:absolute;top:18px;left:18px;z-index:2}
.svc-card-body{position:relative;z-index:2;padding:24px;max-width:480px}
.svc-card-body h3{font-family:"Agency";color:#fff;font-size:clamp(26px,2.4vw,38px);line-height:1;margin-bottom:8px}
.svc-card-body p{color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.5}
.svc-card-body p b{color:#fff;font-weight:600}

/* PILL canônica — UM só estilo de pill no site todo (Serviços, Portfólio, Sobre) */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  letter-spacing:.01em;color:#fff;padding:8px 15px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04)),rgba(12,12,16,.18);
  -webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 20px rgba(0,0,0,.22)}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:260px}
  .svc-card{grid-column:span 1}
  .svc-card.svc-lg{grid-column:span 2}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr;grid-auto-rows:320px}
  .svc-card,.svc-card.svc-lg{grid-column:span 1}
  /* efeito PILHA: cada card gruda no topo e o próximo desliza por cima ao rolar,
     com um pequeno degrau (peek) por card + sombra no topo pra dar profundidade */
  .bento .svc-card{position:sticky;box-shadow:0 -8px 30px rgba(0,0,0,.55)}
  .bento .svc-card:nth-child(1){top:78px}
  .bento .svc-card:nth-child(2){top:98px}
  .bento .svc-card:nth-child(3){top:118px}
  .bento .svc-card:nth-child(4){top:138px}
  .bento .svc-card:nth-child(5){top:158px}
}
.svc:hover .tag:nth-child(1)::before,.svc:focus-visible .tag:nth-child(1)::before{transition-delay:.42s}
.svc:hover .tag:nth-child(2)::before,.svc:focus-visible .tag:nth-child(2)::before{transition-delay:.56s}
.svc:hover .tag:nth-child(3)::before,.svc:focus-visible .tag:nth-child(3)::before{transition-delay:.70s}

/* ---------- PORTFOLIO (grid full-width, estilo Nexyo) ---------- */
/* header CENTRALIZADO (mesmo padrão das outras dobras); cards full-width */
.work-head{text-align:center}
.work-title{font-family:"Agency";font-size:clamp(44px,7vw,92px);line-height:1.02;margin:0;white-space:nowrap}
.work-title .accent{color:var(--accent)}
@media(max-width:640px){.work-title{white-space:normal;text-wrap:balance}}
.work-head-row{display:flex;flex-direction:column;align-items:center;
  gap:16px;margin-top:clamp(24px,2.4vw,34px)}
.work-sub{color:var(--ink-2);font-size:18px;line-height:1.6;max-width:84ch;margin:0;text-wrap:pretty}
.work-all{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  color:var(--ink);font-size:15px;transition:color .25s,gap .25s}
.work-all svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.work-all:hover{color:var(--accent);gap:12px}
.work-all:hover svg{transform:translate(2px,-2px)}

/* grid full-bleed: 2 colunas, gap 24, margens laterais finas */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;
  padding:0 clamp(16px,2.2vw,32px)}
.work-grid .wcard{position:relative;display:block;aspect-ratio:1.18/1;overflow:hidden;
  border-radius:clamp(18px,2vw,28px);background:var(--bg-3);border:1px solid var(--line);
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .35s var(--ease),box-shadow .5s var(--ease)}
.wcard:hover{border-color:var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.wcard-media{position:absolute;inset:0;overflow:hidden}
.wcard-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);filter:saturate(.98)}
.wcard:hover .wcard-media img{transform:scale(1.06)}
.wcard-ph{background:
    radial-gradient(80% 60% at 70% 20%,rgba(237,29,50,.12),transparent 60%),
    repeating-linear-gradient(45deg,#15151a 0 14px,#121217 14px 28px)}
.wcard-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,10,.82) 0%,rgba(8,8,10,.15) 42%,transparent 66%)}
.wcard-tag{position:absolute;top:18px;right:18px;z-index:2}
.wcard-name{position:absolute;left:26px;bottom:24px;z-index:2;
  font-family:"Agency";font-size:clamp(22px,2.3vw,30px);line-height:1;color:#fff}

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

/* ---------- PROCESS (timeline horizontal) ----------
   4 nós numerados em linha; trilho que se preenche no scroll (var --p de 0→1),
   com ponto-cabeça que lidera o preenchimento. Paleta vermelha do site. */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* trilho na altura do centro dos nós (23px = metade do nó de 46px).
   right calc(25% - 56px) → a linha termina ~logo após o nó 4 (o ponto-cabeça
   chega pouco depois do último nó, como na referência) */
.tl-track{position:absolute;top:23px;left:23px;right:calc(25% - 56px);height:2px;
  background:var(--line-2);z-index:0;border-radius:2px}
.tl-fill{position:absolute;left:0;top:0;height:100%;width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  box-shadow:0 0 10px rgba(237,29,50,.55);border-radius:2px}
/* ponto branco que lidera o preenchimento */
.tl-head{position:absolute;top:50%;left:calc(var(--p,0) * 100%);
  width:13px;height:13px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);opacity:0;
  box-shadow:0 0 10px rgba(255,255,255,.85),0 0 22px rgba(237,29,50,.7)}
.timeline.lit .tl-head{opacity:1}

.tl-step{position:relative;z-index:1;display:flex;flex-direction:column}
/* nó circular numerado (estilo da referência, na cor do site) */
.tl-node{position:relative;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--bg-2);border:2px solid var(--line-2);
  font-family:"Agency";font-size:19px;color:var(--ink-3);
  transition:border-color .5s,color .5s,box-shadow .5s,background .5s}
.tl-node b{font-weight:400;position:relative;z-index:1}
/* PULSE: anel vermelho que expande de cada nó, com timing diferente por nó
   (parece aleatório / dessincronizado entre eles) */
.tl-node::after{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  animation:tlPulse 2.6s ease-in-out infinite}
@keyframes tlPulse{
  0%{box-shadow:0 0 0 0 rgba(237,29,50,.45)}
  70%,100%{box-shadow:0 0 0 13px rgba(237,29,50,0)}
}
/* nth-child desloca por causa do .tl-track (1º filho) → usa nth-of-type 2..5 */
.tl-step[data-step="1"] .tl-node::after{animation-duration:2.6s;animation-delay:0s}
.tl-step[data-step="2"] .tl-node::after{animation-duration:3.3s;animation-delay:1.1s}
.tl-step[data-step="3"] .tl-node::after{animation-duration:2.2s;animation-delay:.5s}
.tl-step[data-step="4"] .tl-node::after{animation-duration:3s;animation-delay:1.7s}
/* CARD que envolve título + descrição — começa invisível e revela ao ativar */
.tl-body{margin-top:24px;flex:1;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 24px;
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
    border-color .5s,background .5s,box-shadow .5s}
.tl-body h3{font-family:"Agency";font-size:21px;letter-spacing:.01em;margin-bottom:12px;color:var(--ink)}
.tl-body p{color:var(--ink-3);font-size:14px;line-height:1.6;transition:color .5s}
/* ativo: nó acende + bounce, card aparece (fade+sobe) e destaca, texto clareia */
.tl-step.on .tl-node{border-color:var(--accent);background:var(--accent);color:#fff;
  box-shadow:0 0 0 6px var(--accent-soft),0 0 20px rgba(237,29,50,.5);
  animation:tlBounce .6s var(--ease)}
.tl-step.on .tl-body{opacity:1;transform:translateY(0) scale(1);
  border-color:var(--line-2);background:var(--bg-3);
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.tl-step.on .tl-body p{color:var(--ink-2)}
@keyframes tlBounce{0%{transform:scale(.82)}55%{transform:scale(1.12)}100%{transform:scale(1)}}

/* SCROLL-REVEAL por palavra: cada palavra sai de blur+transparente para nítida,
   em sequência (stagger via --i), quando o card ativa no scroll */
.srw{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(9px);
  transition:opacity .55s var(--ease),filter .55s var(--ease),transform .55s var(--ease);
  will-change:opacity,filter,transform}
.tl-body h3 .srw{transition-delay:calc(var(--i) * 0.05s)}
.tl-body p .srw{transition-delay:calc(.18s + var(--i) * 0.028s)}
.tl-step.on .srw{opacity:1;filter:blur(0);transform:none}

/* ---------- ABOUT (layout Figma: título centralizado no topo + foto/texto) ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:56px;align-items:start}
.about-photo{position:relative;justify-self:start;align-self:start;width:100%;max-width:520px}
.about-photo img{position:relative;z-index:1;width:100%;height:auto;display:block;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.6))}
.about-copy p{color:var(--ink-2);margin-bottom:18px;font-size:18px;line-height:1.65;text-wrap:pretty}
.about-copy p b{color:var(--ink);font-weight:600}
.about-copy p b.accent{color:var(--accent)}
/* ferramentas: tags/pills com stroke vermelho (Figma) */
.about-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tool-tag{font-size:12px;letter-spacing:.02em;color:#fff;padding:8px 15px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04)),rgba(12,12,16,.18);
  -webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 20px rgba(0,0,0,.22);
  transition:border-color .25s,background .25s,color .25s}
.tool-tag:hover{border-color:var(--accent);background:rgba(237,29,50,.16);color:#fff}

/* ---------- CTA ---------- */
.cta-final{text-align:center;background:
  radial-gradient(60% 80% at 50% 0%,rgba(237,29,50,.12),transparent 60%)}
.cta-final h2{font-family:"Agency";font-size:clamp(44px,7vw,92px);line-height:.98;margin-bottom:18px}
.cta-final p{color:var(--ink-2);max-width:48ch;margin:0 auto 34px;font-size:17px}


/* ---------- BOTÃO WHATSAPP FLUTUANTE (fixo bottom-right, com pulse) ---------- */
.floating-whatsapp{position:fixed;bottom:clamp(16px,3vw,24px);right:clamp(16px,3vw,24px);
  z-index:80;display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;
  box-shadow:0 10px 30px -10px rgba(237,29,50,.6),0 4px 12px rgba(0,0,0,.35);
  transition:transform .22s var(--ease),background-color .22s var(--ease)}
.floating-whatsapp::before{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--accent);opacity:.6;animation:wa-pulse 2.4s ease-out infinite}
.floating-whatsapp:hover,.floating-whatsapp:focus-visible{background:var(--accent-2);transform:translateY(-2px)}
.floating-whatsapp:focus-visible{outline:2px solid #fff;outline-offset:4px}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.floating-whatsapp::before{display:none}}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);padding:clamp(64px,6vw,92px) 0;background:#0E0E16}
.footer .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
/* esquerda: links dentro de uma pill com borda vermelha (Figma) */
.footer-nav{justify-self:start;display:flex;align-items:center;gap:26px;
  border:1px solid rgba(237,29,50,.45);border-radius:999px;padding:13px 28px}
.footer-nav a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);transition:color .25s}
.footer-nav a:hover{color:#fff}
/* centro: logo da marca (DM) */
.footer-logo{justify-self:center;display:block;transition:transform .3s var(--ease)}
.footer-logo:hover{transform:scale(1.04)}
.footer-logo img{height:54px;width:auto;display:block}
/* direita: copyright */
.footer-copy{justify-self:end;text-align:right;color:var(--ink-3);font-size:13px;white-space:nowrap}

/* ---------- scrollbar (vermelho da marca) ---------- */
html{scrollbar-color:#ED1E3C var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#ED1E3C;border-radius:7px;
  border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#ff3a52;background-clip:padding-box;border:3px solid var(--bg)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.22s}.reveal.d4{transition-delay:.3s}

/* palavra por palavra (títulos + subtítulos) — stagger via --wi, disparado por .words-in */
.word{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.words-in .word{opacity:1;transform:none;transition-delay:calc(var(--wi)*.03s)}

/* ---------- hero load anim — dispara quando o loader sai (classe .hero-in via JS);
   h1 e lede entram palavra por palavra (.word), o resto sobe em bloco ---------- */
.hero .eyebrow,.hero .cta-row,.hero .photo-wrap{opacity:0;transform:translateY(24px)}
.hero-in .eyebrow,.hero-in .cta-row,.hero-in .photo-wrap{animation:rise .7s var(--ease) forwards}
.hero-in .cta-row{animation-delay:.5s}.hero-in .photo-wrap{animation-delay:.15s}
/* lede espera o título terminar de escrever */
.hero .lede.words-in .word{transition-delay:calc(.28s + var(--wi)*.03s)}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .about-grid{grid-template-columns:1fr;gap:36px}
  .about-photo{order:-1}
  /* holofote vira LISTA vertical já no tablet: cards abertos (sem hover) */
  .spotlight{flex-direction:column;height:auto;gap:16px}
  .svc{flex:none!important;min-height:380px;border-color:var(--line-2)}
  .svc-media{transform:scale(1)!important}
  .svc .svc-bar{flex-direction:row!important;align-items:center!important;gap:12px!important;
    height:auto!important;padding:24px 24px 0!important;justify-content:flex-start!important}
  .svc h3{writing-mode:horizontal-tb!important;transform:none!important;
    font-size:26px!important;white-space:normal;text-shadow:0 2px 14px rgba(0,0,0,.6)}
  .svc .svc-body{opacity:1!important;max-height:none!important;padding:14px 24px 26px!important}
  .svc .svc-body .srw{opacity:1!important;filter:none!important;transform:none!important}
  .svc .tags{opacity:1!important;transform:none!important}
  /* stroke neon já completo no mobile (sem hover) */
  .svc .tag::before{--tg-ang:360deg!important}
  /* timeline vira VERTICAL: nós à esquerda, texto à direita, trilho vertical */
  .timeline{grid-template-columns:1fr;gap:0;max-width:600px;margin:0 auto}
  .tl-track{top:23px;bottom:23px;left:23px;right:auto;width:2px;height:auto}
  .tl-fill{width:100%;height:calc(var(--p,0) * 100%);top:0;left:0}
  .tl-head{left:50%;top:calc(var(--p,0) * 100%)}
  .tl-step{display:grid;grid-template-columns:46px 1fr;gap:18px;
    align-items:start;padding-bottom:40px}
  .tl-step:last-child{padding-bottom:0}
  .tl-body{margin-top:0;padding-top:3px;max-width:none}
}
/* HERO empilha (foto em cima, texto embaixo) já no tablet — reseta os
   valores de desktop (margin negativo da foto, transform da copy). */
@media(max-width:900px){
  /* hero empilhada rola normalmente (sem pinned) — senão os botões, abaixo da
     dobra numa tela alta, ficariam presos atrás do conteúdo no mobile */
  .hero{min-height:auto;padding:96px 0 40px;position:static}
  .hero .wrap{flex:none;padding-top:8px}
  .hero-grid{display:flex;flex-direction:column;gap:24px;align-items:stretch}
  .copy{align-self:auto;transform:none;order:2}
  /* mobile: textos alinhados à ESQUERDA (como a hero), não centralizados */
  .sec-head,.work-head,.cta-final{text-align:left}
  .work-head-row{align-items:flex-start}
  .sec-sub,.cta-final p{margin-left:0}
  .photo-wrap{order:1;justify-self:center;align-self:auto;
    height:auto;width:100%;margin:0 auto;max-width:360px}
  .photo-wrap > picture,.photo-wrap > picture > img{height:auto;width:100%}
  /* esconde elementos flutuantes (poluem tela menor); mantém só o halo */
  .hero-play{display:none}
}
@media(max-width:760px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:10px 0}
  .nav.open .nav-links a{padding:14px clamp(20px,5vw,40px)}
  .photo-wrap{max-width:320px}
  /* halo simplificado: discos mais amplos atrás da foto */
  .halo-mid,.halo-core{opacity:.6}
  .halo-bg{transform:translate(-50%,-50%) scale(1.8)}
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:30px 0}
  /* no 2×2, separador só entre colunas (stats 2 e 4); some no 3 (col esquerda) */
  .stat:nth-child(3)::before{display:none}
  /* serviços já viram lista vertical no @media 980; aqui só afina o card */
  .svc{min-height:340px}
  /* footer empilha e centraliza */
  .footer .wrap{grid-template-columns:1fr;justify-items:center;gap:26px}
  .footer-logo{order:-1}
  .footer-copy{justify-self:center;text-align:center;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal,.word,.hero .eyebrow,.hero .cta-row,.hero .photo-wrap{opacity:1;transform:none;transition:none;animation:none}
  .srw{opacity:1!important;filter:none!important;transform:none!important}
  .tl-body{opacity:1!important;transform:none!important}
  .stat{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}