/* ===========================================================
   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;-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:hidden;
}
a{color:inherit;text-decoration:none}
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 .spotlight,
#portfolio .work-carousel,
#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(34px,5vw,56px);line-height:1}
.sec-sub{color:var(--ink-2);max-width:52ch;margin:16px auto 0;font-size:16px}

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}

/* ---------- 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:10px;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;padding:15px 28px;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:18px;height:18px}
.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{min-height:clamp(620px, 84svh, 860px);
  display:flex;flex-direction:column;justify-content:center;
  padding:96px 0 0;overflow:hidden;position:relative}
.hero .wrap{position:relative;z-index:2;width:100%}
/* proporção das colunas fiel ao Figma: texto 466 : foto 714 ≈ .78fr 1fr */
.hero-grid{display:grid;grid-template-columns:.78fr 1fr;gap:36px;
  align-items:end;position:relative}
.copy{align-self:center;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(-160px, -6vw, -20px);
  width:clamp(220px, 24vw, 360px);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(-120px, -3vw, 0px);
  bottom:clamp(-60px, -2vw, 20px);
  width:clamp(200px, 20vw, 320px);
  opacity:.45;
  transform:scaleX(-1);
  animation-duration:11s;
  animation-direction:reverse}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.26em;
  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(40px,5.4vw,74px);margin-bottom:22px}
.hero .lede{font-size:clamp(15px,1.4vw,18px);color:var(--ink-2);max-width:34ch;margin-bottom:36px}
.hero .lede b{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* 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. */
.photo-wrap{position:relative;justify-self:end;align-self:end;
  width:100%;max-width:clamp(560px, 64svh, 740px);
  margin-bottom:clamp(-74px, -5svh, -40px);  /* sangra+clipa a base (Figma) */
  isolation:isolate}
.photo-wrap > picture{position:relative;z-index:2;display:block}
.photo-wrap > picture > img{width:100%;height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.65))}

/* 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%)}

/* TOOLBAR Figma (358×39 → ~50% da largura da foto)
   Apenas tb-2: na frente da foto, sem rotação em (61.6%, 64.9%) */
.figma-tb{position:absolute;width:50%;height:auto;border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  filter:blur(.7px);
  will-change:transform}
.tb-2{left:61.6%; top:64.9%; z-index:4; opacity:.95;
  animation:heroFloat 10.5s ease-in-out infinite reverse}

@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}
/* fundo levemente mais claro no topo: cria contraste que destaca a barra
   escura como um recesso entre a hero e os serviços (padding-top vem da
   regra section: clamp(96px,13vw,160px)) */
#servicos{background:linear-gradient(180deg, #15151d 0%, rgba(21,21,29,0) 44%)}
/* projetos: gradiente INVERSO — começa no preto (onde serviços terminou) e
   clareia até #15151d na base (onde serviços começou). Cria um ritmo de luz
   ondulado e contínuo entre as seções. */
#portfolio{background:linear-gradient(180deg, rgba(21,21,29,0) 56%, #15151d 100%)}
/* remove o glow vermelho de fundo (section::before) em serviços e portfólio */
#servicos::before,#portfolio::before{display:none}

/* ---------- SERVICES (holofote com imagem de fundo — estilo slider) ---------- */
.spotlight{display:flex;gap:14px;height:460px}
.svc{flex:1;position:relative;overflow:hidden;cursor:pointer;outline:none;
  border-radius:22px;border:2px solid transparent;
  display:flex;flex-direction:column;justify-content:flex-end;
  /* expansão SUTIL e suave (era .45s rápido) */
  transition:flex .8s cubic-bezier(.22,1,.36,1),border-color .5s var(--ease),box-shadow .5s}
/* imagem de fundo (placeholder via --svc-img); leve zoom-out ao abrir */
.svc-media{position:absolute;inset:0;z-index:0;
  background-image:var(--svc-img);background-size:cover;background-position:center;
  transform:scale(1.06);transition:transform 1.1s var(--ease)}
.svc:hover .svc-media,.svc:focus-visible .svc-media{transform:scale(1)}
/* scrim escuro para legibilidade (mais forte na base) */
.svc-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.28) 42%,rgba(6,6,9,.92) 100%)}
/* ATIVO: expande + borda vermelha + sombra */
.svc:hover,.svc:focus-visible{flex:3.4;border-color:var(--accent);
  box-shadow:0 22px 55px rgba(0,0,0,.55),0 0 26px rgba(237,29,50,.25)}

/* título */
.svc-bar{display:flex;align-items:center;gap:12px;padding:24px;position:relative;z-index:2}
/* ícone temático como SELO GLASS no canto superior direito do card */
.svc .ico{display:flex;align-items:center;justify-content:center;
  position:absolute;top:16px;right:16px;z-index:3;flex:none;
  width:44px;height:44px;padding:11px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  transition:border-color .5s,background .5s}
.svc:hover .ico,.svc:focus-visible .ico{border-color:var(--accent);background:rgba(237,29,50,.18)}
.svc h3{font-family:"Agency";color:#fff;line-height:1;letter-spacing:.01em;white-space:nowrap}
/* FECHADO: nome vertical grande, centralizado na base */
.svc:not(:hover):not(:focus-visible) .svc-bar{flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;padding-bottom:30px}
.svc:not(:hover):not(:focus-visible) h3{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(24px,2.3vw,32px);text-shadow:0 2px 14px rgba(0,0,0,.5)}
/* ABERTO: nome horizontal grande */
.svc:hover h3,.svc:focus-visible h3{font-size:clamp(28px,2.6vw,36px);
  text-shadow:0 2px 16px rgba(0,0,0,.6)}

/* corpo: escondido até expandir */
.svc .svc-body{position:relative;z-index:2;padding:0 24px;max-width:440px;
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .45s var(--ease) .1s,max-height .7s var(--ease)}
.svc:hover .svc-body,.svc:focus-visible .svc-body{opacity:1;max-height:300px;padding:0 24px 26px}
.svc p{color:rgba(255,255,255,.86);font-size:14.5px;line-height:1.55;margin-bottom:14px}
.svc p b{color:#fff;font-weight:600}
/* ângulo animável do stroke neon das tags */
@property --tg-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

.tags{display:flex;gap:9px;flex-wrap:wrap}
/* TAG: fundo glass (iPhone), sem preenchimento. O STROKE neon se DESENHA
   ao redor da pill quando o card abre (sabre de luz Sith). */
.tag{position:relative;z-index:0;
  font-size:11.5px;color:#fff;letter-spacing:.03em;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(9px) saturate(1.3);backdrop-filter:blur(9px) saturate(1.3)}
/* contorno base sutil, sempre presente */
.tag::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1.4px solid rgba(255,255,255,.16)}
/* stroke neon (conic mascarado só na borda); --tg-ang anima de 0→360 ao abrir */
.tag::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from -90deg, #ff2d42 0deg, #ff2d42 var(--tg-ang,0deg), transparent var(--tg-ang,0deg));
  -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;
  transition:--tg-ang .8s var(--ease)}

/* REVEAL do texto ao abrir (blur→nítido por palavra, como na timeline) */
.svc .svc-body .srw{opacity:0;filter:blur(6px);transform:translateY(7px)}
.svc:hover .svc-body .srw,.svc:focus-visible .svc-body .srw{opacity:1;filter:blur(0);transform:none;
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(.12s + var(--i) * .028s)}
/* tags entram (fade) logo após o texto */
.svc .tags{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.svc:hover .tags,.svc:focus-visible .tags{opacity:1;transform:none;transition-delay:.3s}
/* o stroke neon completa a volta (0→360) ao abrir, com stagger entre as tags */
.svc:hover .tag::before,.svc:focus-visible .tag::before{--tg-ang:360deg}
.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 (carrossel arrastável — coverflow 3D) ---------- */
.work-carousel{position:relative;overflow:hidden;perspective:1700px;padding:0 0 30px}
.work-track{display:flex;gap:24px;cursor:grab;
  transform-style:preserve-3d;will-change:transform;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.work-track.dragging{transition:none;cursor:grabbing}
/* card mantém a proporção/tamanho atuais (paisagem 808/632) */
.work{flex:0 0 clamp(280px,44vw,520px);position:relative;
  border-radius:var(--r);overflow:hidden;aspect-ratio:808/632;
  border:1px solid var(--line);background:var(--bg-3);display:block;
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s,border-color .3s,box-shadow .6s}
.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),filter .4s;filter:saturate(.97)}
.work .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(8,8,10,.92) 0%,rgba(8,8,10,.25) 45%,transparent 70%)}
.work .meta{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.work .cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.work .name{font-family:"Agency";font-size:24px;line-height:1;color:#fff}
/* card ATIVO (central) ganha destaque e dá zoom leve no hover */
.work.is-active{border-color:var(--line-2);box-shadow:0 26px 64px rgba(0,0,0,.5);cursor:pointer}
.work.is-active:hover img{transform:scale(1.06)}
/* placeholder (projeto sem imagem) */
.work.ph-card{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)}
.work.ph-card .name{color:var(--ink-2)}

/* setas de navegação (glass) */
.work-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;
  transition:background .25s,transform .25s,opacity .25s}
.work-arrow:hover{background:rgba(237,29,50,.9);transform:translateY(-50%) scale(1.06)}
.work-arrow svg{width:22px;height:22px}
.work-prev{left:8px}
.work-next{right:8px}
.work-arrow:disabled{opacity:0;pointer-events:none}

/* dots */
.work-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.work-dot{width:8px;height:8px;border-radius:50%;cursor:pointer;border:0;padding:0;
  background:rgba(255,255,255,.25);transition:background .3s,width .3s}
.work-dot.on{background:var(--accent);width:22px;border-radius:5px}

.work-foot{text-align:center;margin-top:34px}

/* ---------- 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 h4{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 h4 .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:center}
.about-photo{position:relative;justify-self:start;align-self:end;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:16px;font-size:16px;line-height:1.6}
.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:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding:8px 15px;border-radius:8px;
  border:1px solid rgba(237,29,50,.45);background:rgba(237,29,50,.07);
  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(36px,6vw,72px);line-height:.98;margin-bottom:18px}
.cta-final p{color:var(--ink-2);max-width:48ch;margin:0 auto 34px;font-size:17px}


/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);padding:54px 0}
.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(22px);
  transition:opacity .8s var(--ease),transform .8s 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}

/* ---------- hero load anim ---------- */
.hero .eyebrow,.hero h1,.hero .lede,.hero .cta-row,.hero .photo-wrap{
  opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
.hero h1{animation-delay:.12s}.hero .lede{animation-delay:.24s}
.hero .cta-row{animation-delay:.36s}.hero .photo-wrap{animation-delay:.2s}
@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{min-height:auto;padding:96px 0 40px}
  .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}
  .photo-wrap{order:1;justify-self:center;align-self:auto;
    margin:0 auto;max-width:360px}
  /* esconde elementos flutuantes (poluem tela menor); mantém só o halo */
  .hero-play,.figma-tb{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{opacity:1;transform:none;transition: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}
}