/* NOÉ VFX — sistema visual: papel, azul, CRT, janelas de Unix, pixel */
:root {
  --paper: #e8e8f0; --paper2: #f4f4fa; --ink: #15153f; --ink2: #4b4b7a; --hair: rgb(21 21 63 / .22);
  --blue: #013fff; --blue2: #416fff; --lime: #7bca1a; --lime2: #bde58d; --yellow: #ffff01; --purple: #792187; --cobalt: #016a9e; --orange: #f6931c; --red: #ff0000; --green: #019933;
  --bezel: #c7c7d4;
  --gx: clamp(16px, 2.4vw, 36px);
  --serif: "Fraunces", Georgia, serif; --sans: "Inter Tight", "Inter", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.19, 1, .22, 1);
  color-scheme: light;
}
html[data-theme="dark"] {
  --paper: #0b0b10; --paper2: #16161d; --ink: #f2f2f8; --ink2: #a4a4bd; --hair: rgb(242 242 248 / .2); --bezel: #15151c; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 400 16px/1.55 "Inter", system-ui, sans-serif; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; min-height: 100svh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 900; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { top: 12px; }
.mono { font: 500 10.5px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.sq { display: inline-block; width: 7px; height: 7px; background: var(--blue); margin-right: 8px; vertical-align: 1px; }
.px { display: block; width: 100%; height: auto; fill: currentColor; }

/* ---------- CRT ---------- */
/* linhas presas ao documento (rolam com o conteúdo); vinheta e faixa clara ficam fixas na tela */
:root { --scan: repeating-linear-gradient(0deg, rgb(10 10 70 / .158) 0 1px, transparent 1px 4px); }
html[data-theme="dark"] { --scan: repeating-linear-gradient(0deg, rgb(255 255 255 / .047) 0 1px, transparent 1px 4px); }
body { position: relative; }
.scan { position: absolute; inset: 0; z-index: 500; pointer-events: none; background: var(--scan); mix-blend-mode: multiply; }
html[data-theme="dark"] .scan { mix-blend-mode: normal; }
.crt { position: fixed; inset: 0; z-index: 500; pointer-events: none; background: radial-gradient(130% 120% at 50% 45%, transparent 58%, rgb(10 10 70 / .22) 100%); mix-blend-mode: multiply; }
.crt::after { content: ""; position: absolute; left: 0; right: 0; top: -22vh; height: 22vh; background: linear-gradient(transparent, rgb(255 255 255 / .09), transparent); animation: roll 8s linear infinite; mix-blend-mode: screen; }
html[data-theme="dark"] .crt { mix-blend-mode: normal; background: radial-gradient(130% 120% at 50% 45%, transparent 58%, rgb(0 0 0 / .4) 100%); }
@keyframes roll { to { transform: translateY(140vh); } }
.bezel { position: fixed; inset: 8px; z-index: 490; pointer-events: none; border-radius: 12px; box-shadow: 0 0 0 100vmax var(--bezel), inset 0 0 30px rgb(10 10 70 / .22); }
.fx-rgb { text-shadow: 1.2px 0 rgb(255 30 90 / .38), -1.2px 0 rgb(0 160 255 / .42); }
.pixelize { filter: url(#pixelate); }

/* ---------- Cursor, rastro, miniatura ---------- */
.cpx { position: fixed; left: 0; top: 0; z-index: 540; pointer-events: none; display: none; will-change: transform; }
html.cursor, html.cursor a, html.cursor button, html.cursor summary { cursor: none; }
html.cursor .cpx { display: block; }
.cpx svg { display: block; shape-rendering: crispEdges; }
.peek { position: fixed; left: 0; top: 0; z-index: 460; width: 240px; aspect-ratio: 16 / 9; pointer-events: none; opacity: 0; background-size: cover; background-position: center; border: 2px solid var(--ink); box-shadow: 0 14px 34px rgb(10 10 70 / .3); transform-origin: 0 0; }
.peek::after { content: ""; position: absolute; inset: 0; background: var(--scan); }

/* ---------- Menu superior e janela de menu ---------- */
.tabbar { position: fixed; z-index: 450; top: 20px; left: 50%; transform: translateX(-50%); width: clamp(230px, 22vw, 320px); height: 46px; padding: 0 14px 0 16px; display: flex; align-items: center; justify-content: space-between; background: rgb(246 246 252 / .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 4px; box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgb(10 10 70 / .14); }
html[data-theme="dark"] .tabbar { background: rgb(22 22 29 / .82); box-shadow: 0 10px 28px rgb(0 0 0 / .4); }
.tabbar .brand { display: block; line-height: 0; }
.tabbar .brand img { height: 26px; width: auto; transition: transform .5s var(--ease); }
.tabbar .brand:hover img { transform: translateY(-2px) rotate(-3deg); }
.burger { width: 34px; height: 34px; display: grid; place-content: center; gap: 5px; }
.burger i { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .4s var(--ease), width .3s; }
.burger:hover i:last-child { width: 12px; }
html.menu-open .burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
html.menu-open .burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); width: 18px; }
.menu-win { position: fixed; z-index: 449; top: 20px; left: 50%; transform: translateX(-50%); width: clamp(310px, 29vw, 400px); background: var(--paper2); border-radius: 4px; box-shadow: inset 0 1px 0 #fff, 0 22px 50px rgb(10 10 70 / .22); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s steps(10), visibility 0s .7s; padding-top: 46px; }
html.menu-open .menu-win { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.menu-win .in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 14px 12px; }
.menu-win .links { display: grid; align-content: start; gap: 2px; padding-top: 6px; }
.menu-win .links a { font: 400 21px/1.15 var(--mono); letter-spacing: .01em; text-transform: uppercase; position: relative; padding-left: 0; transition: padding .35s var(--ease), color .2s; }
.menu-win .links a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--blue); transition: width .35s var(--ease); }
.menu-win .links a:hover, .menu-win .links a[aria-current="page"] { color: var(--blue); padding-left: 16px; }
.menu-win .links a:hover::before, .menu-win .links a[aria-current="page"]::before { width: 10px; }
.menu-win .tile { background: var(--lime); aspect-ratio: 1 / 1.02; display: grid; place-items: center; padding: 14px; position: relative; overflow: hidden; }
.menu-win .tile .brandmark { width: 72%; color: var(--ink); }
.menu-win .soc { grid-column: 1 / -1; display: flex; gap: 16px; padding-top: 4px; flex-wrap: wrap; }
.menu-win .tools { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--hair); padding-top: 10px; }
.chip { font: 500 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; border: 1px solid var(--hair); padding: 5px 9px 4px; border-radius: 3px; transition: background .2s, color .2s; }
.chip:hover { background: var(--ink); color: var(--paper); }
.chip b { color: var(--blue); font-weight: 500; } .chip:hover b { color: var(--lime); }
.menu-win .x { position: absolute; top: 0; right: 0; width: 46px; height: 46px; display: grid; place-items: center; }
.menu-win .x::before { content: ""; width: 14px; height: 14px; background: linear-gradient(45deg, transparent 46%, var(--ink) 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--ink) 46% 54%, transparent 54%); }
.menu-win .top { position: absolute; top: 0; left: 0; right: 46px; height: 46px; display: flex; align-items: center; padding-left: 16px; }
.menu-win .top img { height: 26px; width: auto; }

/* ---------- Texto-link CRT com ícone pixel ---------- */
.tl2 { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 0; background: linear-gradient(var(--blue), var(--blue)) left bottom / 0 2px no-repeat; transition: background-size .5s steps(8), color .2s; }
.tl2 .px { width: 14px; flex: none; }
.tl2 .ar { width: 9px; transition: transform .35s var(--ease); }
.tl2:hover { background-size: 100% 2px; color: var(--blue); }
.tl2:hover .ar { transform: translate(2px, -2px); }
.on-blue .tl2:hover, .blue .tl2:hover { color: var(--lime); background-image: linear-gradient(var(--lime), var(--lime)); }

/* ---------- Tags e botão de ação ---------- */
.tags { display: inline-flex; flex-wrap: wrap; gap: 0; }
.tg { font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px 4px; background: var(--blue); color: #fff; border-radius: 3px; }
.tg.lime { background: var(--lime); color: var(--ink); margin-left: -2px; }
.cta { display: inline-flex; align-items: center; gap: 6px; }
.cta .bar { position: relative; overflow: hidden; display: inline-flex; align-items: center; height: 42px; padding: 0 20px; background: var(--blue); color: #fff; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; isolation: isolate; }
.cta .bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateX(-101%); transition: transform .5s steps(8); }
.cta .chip2 { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); transition: transform .5s var(--ease), background .3s; }
.cta .chip2 .px { width: 14px; transition: transform .4s var(--ease); }
.cta:hover .bar::before { transform: translateX(0); }
.cta:hover .chip2 { transform: rotate(-45deg); background: var(--lime2); }

/* ---------- Janelinhas de Unix ---------- */
.pwin { position: relative; background: var(--paper2); color: var(--ink); border-radius: 3px; box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgb(10 10 70 / .2); }
.pwin .ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px 7px 20px; border-bottom: 1px solid var(--hair); font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; position: relative; }
.pwin .ph::before { content: "::"; position: absolute; left: 8px; top: 7px; color: #9a9ab8; font-weight: 400; letter-spacing: -.1em; }
.pwin .ph .pl { font-weight: 500; opacity: .75; }
.pwin .pb { padding: 12px 14px 14px; font: 500 12px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.pwin .pb a { display: block; padding: 1px 0; }
.pwin .pb a:hover { color: var(--blue); }
.pwin .hd i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid var(--blue); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease); }
.pwin .hd i:nth-child(1) { left: -4px; top: -4px; } .pwin .hd i:nth-child(2) { right: -4px; top: -4px; } .pwin .hd i:nth-child(3) { left: -4px; bottom: -4px; } .pwin .hd i:nth-child(4) { right: -4px; bottom: -4px; }
.pwin:hover .hd i, .pwin.sel .hd i { opacity: 1; transform: none; }
.pwin.sel::after, .pwin:hover::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--blue); pointer-events: none; }
[data-drag] .ph { cursor: grab; } [data-drag].grab .ph { cursor: grabbing; }

/* ---------- Estrutura de páginas ---------- */
main { position: relative; z-index: 1; }
.paper { background: var(--paper); }
.blue { background: var(--blue); color: #fff; position: relative; }
.wrap { padding-inline: calc(var(--gx) + 10px); }
.hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 140px var(--gx) 110px; }
.hero .stack { display: grid; justify-items: center; gap: 18px; }
.brandmark { width: clamp(130px, 14vw, 190px); }
.brandmark svg, svg.brandmark { shape-rendering: crispEdges; }
.hero h1, .big { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; font-variation-settings: "SOFT" 100, "WONK" 1; line-height: .98; text-wrap: balance; }
.hero h1 { font-size: clamp(42px, 7.2vw, 118px); max-width: 14ch; margin-block: 6px 4px; }
.inl { display: inline-block; height: .78em; width: 1.7em; border-radius: 4px; overflow: hidden; vertical-align: -.06em; margin-inline: .05em; background: var(--ink); }
.inl video { width: 100%; height: 100%; object-fit: cover; }
.inl.fb { position: relative; }
.inl.fb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: fb .96s step-end infinite; animation-delay: calc(var(--i) * .16s); }
html.reduce .inl.fb img { animation: none; } html.reduce .inl.fb img:first-child { opacity: 1; }
@keyframes fb { 0% { opacity: 1; } 16.6% { opacity: 0; } 100% { opacity: 0; } }
.inl.ico { width: .8em; background: none; border-radius: 0; color: var(--blue); } .inl.ico .px { width: 100%; height: 100%; }
.hero .mono { color: var(--ink2); }

.statement { padding: clamp(90px, 11vw, 160px) calc(var(--gx) + 10px) clamp(40px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.statement .big { font-size: clamp(34px, 5.4vw, 88px); max-width: 16ch; }
.statement .p { max-width: 46ch; margin-top: 28px; color: rgb(255 255 255 / .86); font-family: "Inter", system-ui, sans-serif; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; }
.tiles { display: flex; gap: 10px; justify-content: flex-end; align-items: end; }
.tile { width: clamp(140px, 17vw, 260px); aspect-ratio: 1 / 1.18; position: relative; overflow: hidden; border-radius: 3px; }
.tile.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(1.22) contrast(.98); }
.tile.photo::after { content: ""; position: absolute; inset: 0; background: var(--blue2); mix-blend-mode: screen; opacity: .42; }
.caps { display: flex; justify-content: space-between; align-items: end; padding: 18px 0 22px; color: rgb(255 255 255 / .8); }
.caps .mono:last-child { text-align: right; }

.sec { padding: clamp(70px, 9vw, 140px) calc(var(--gx) + 10px); }
.sec-h { display: grid; gap: 14px; margin-bottom: clamp(26px, 3.4vw, 50px); }
.sec-h h2 { font: 500 clamp(30px, 4.4vw, 68px)/1.02 var(--sans); letter-spacing: -.04em; max-width: 20ch; text-wrap: balance; }

/* tabela de trabalhos */
.tbl { border-top: 1px solid var(--ink); }
.tbl .th, .tbl .row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 100px 220px 200px 34px; align-items: center; gap: 0 14px; }
.tbl .th { padding: 12px 0 10px; color: var(--ink2); }
.tbl .row { position: relative; width: 100%; min-height: 88px; padding: 8px 0; text-align: left; border-top: 1px solid var(--hair); transition: background .25s, color .25s, padding .5s var(--ease); }
.tbl .row .n { font: 500 10.5px var(--mono); color: var(--ink2); }
.tbl .row .nm { font: 500 clamp(24px, 3vw, 42px)/1.05 var(--sans); letter-spacing: -.04em; transition: transform .5s var(--ease); }
.tbl .row .m { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); transition: color .25s; }
.tbl .row .go { width: 14px; justify-self: end; opacity: 0; transform: translate(-8px, 8px); transition: opacity .25s, transform .4s var(--ease); color: #fff; }
.tbl .row:hover, .tbl .row:focus-visible { background: var(--blue); color: #fff; padding-inline: 14px; outline-offset: -2px; }
.tbl .row:hover .m, .tbl .row:hover .n { color: rgb(255 255 255 / .8); }
.tbl .row:hover .nm { transform: translateX(8px); }
.tbl .row:hover .go { opacity: 1; transform: none; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--ink); }
.pager .nums { display: flex; gap: 6px; }
.pager .nums button { font: 500 10.5px var(--mono); padding: 7px 9px 6px; border: 1px solid var(--hair); border-radius: 3px; transition: background .2s, color .2s; }
.pager .nums button:hover { background: var(--ink); color: var(--paper); }
.pager .nums button[aria-current="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.pager .tl2[disabled] { opacity: .3; pointer-events: none; }

/* herói com foto e dissolver em pixels */
.dissolve { position: relative; margin: 8px; }
.dissolve .shot { position: relative; height: calc(100svh - 16px); min-height: 560px; overflow: hidden; border-radius: 12px; background: #111; color: #fff; }
.dissolve .shot > video, .dissolve .shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dissolve .shot::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgb(8 8 40 / .78), rgb(8 8 40 / .12) 55%, transparent); }
.dissolve .shot .cv { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }
.dissolve .ov { position: absolute; z-index: 2; inset: auto 0 0 0; padding: clamp(20px, 3vw, 44px); display: grid; grid-template-columns: 1fr minmax(240px, 360px); gap: 30px; align-items: end; }
.dissolve h1 { font: 400 clamp(46px, 8.4vw, 142px)/.92 var(--serif); letter-spacing: -.035em; font-variation-settings: "SOFT" 100, "WONK" 1; margin-top: 16px; }
.dissolve .d { display: grid; gap: 18px; justify-items: start; font-size: 13.5px; line-height: 1.5; color: rgb(255 255 255 / .92); }
.dissolve .tags { margin-bottom: 4px; }

.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 14px; }
.about-grid .lead { grid-column: 1 / span 7; font: 500 clamp(28px, 3.8vw, 60px)/1.04 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.about-grid .txt { grid-column: 8 / span 5; color: var(--ink2); }
.about-grid .txt p + p { margin-top: 14px; }
.facts { border-top: 1px solid var(--ink); margin-top: clamp(40px, 6vw, 90px); }
.facts .f { display: grid; grid-template-columns: 44px 1fr 220px 1fr; gap: 14px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.facts .f b { font: 500 clamp(26px, 3vw, 44px)/1 var(--sans); letter-spacing: -.04em; }
.facts .f .mono:first-child { color: var(--ink2); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pill { font: 500 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; border: 1px solid var(--ink); padding: 6px 10px 5px; border-radius: 3px; }

.srv-list { border-top: 1px solid var(--ink); }
.srv { display: grid; grid-template-columns: 150px minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 clamp(14px, 2vw, 30px); align-items: center; padding: 34px 0; border-bottom: 1px solid var(--hair); position: relative; }
.srv::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.srv:hover::after { transform: scaleX(1); }
.srv .tags { align-self: center; flex-wrap: nowrap; white-space: nowrap; transition: transform .5s var(--ease); }
.srv:hover .tags { transform: translateX(6px); }
.srv h2 { font: 500 clamp(30px, 4.4vw, 70px)/1 var(--sans); letter-spacing: -.045em; transition: color .3s; }
.srv:hover h2 { color: var(--blue); }
.srv p { color: var(--ink2); max-width: 36ch; font-family: "Inter", system-ui, sans-serif; }
.faq { margin-top: clamp(60px, 8vw, 120px); display: grid; grid-template-columns: 1fr 2fr; gap: 30px; }
details { border-bottom: 1px solid var(--hair); }
details:first-of-type { border-top: 1px solid var(--ink); }
summary { list-style: none; cursor: pointer; padding: 20px 0; font: 500 clamp(18px, 1.8vw, 26px) var(--sans); letter-spacing: -.03em; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 22px var(--mono); line-height: 1; color: var(--blue); transition: transform .4s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--ink2); padding-bottom: 20px; max-width: 58ch; }

.contact { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 150px var(--gx) 130px; position: relative; overflow: hidden; }
.contact h1 { font: 400 clamp(40px, 7.4vw, 124px)/.96 var(--serif); letter-spacing: -.03em; font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 12ch; margin-inline: auto; }
.contact .sub { margin-top: 22px; color: rgb(255 255 255 / .86); max-width: 44ch; margin-inline: auto; font-size: 15px; }
.contact .pwin { position: absolute; width: clamp(210px, 21vw, 290px); text-align: left; }
.contact .w1 { left: 14%; top: 24%; } .contact .w2 { right: 12%; top: 58%; } .contact .w3 { left: 22%; bottom: 14%; }
.contact .pwin .pb b { font-weight: 500; font-size: 13px; }

/* rodapé azul */
.foot { background: var(--blue); color: #fff; position: relative; overflow: hidden; }
.mq { overflow: hidden; white-space: nowrap; border-bottom: 1px solid rgb(255 255 255 / .28); padding-block: 14px; }
.mq div { display: inline-flex; gap: 34px; animation: run 70s linear infinite; padding-left: 34px; }
.mq span { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #dbe3ff; }
.mq b { color: #7f9bff; font-weight: 400; font-size: 12px; align-self: center; }
@keyframes run { to { transform: translateX(-50%); } }
.foot .meta { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 28px calc(var(--gx) + 10px) 96px; flex-wrap: wrap; position: relative; color: #cfdaff; }
.foot .meta a:hover { color: #fff; }

/* barra do tempo fixa */
.dock-tl { position: fixed; z-index: 440; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(500px, calc(100vw - 48px)); height: 40px; display: flex; align-items: stretch; background: rgb(246 246 252 / .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 4px; box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgb(10 10 70 / .16); }
html[data-theme="dark"] .dock-tl { background: rgb(22 22 29 / .84); box-shadow: 0 10px 28px rgb(0 0 0 / .4); }
.dock-tl .tcv { display: grid; place-items: center; width: 56px; font: 500 10px var(--mono); letter-spacing: .08em; color: var(--ink2); border-right: 1px solid var(--hair); font-variant-numeric: tabular-nums; }
.tl { position: relative; flex: 1; display: flex; }
.seg { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); border-left: 1px solid var(--hair); transition: color .2s, background .3s; overflow: hidden; }
.seg:first-child { border-left: 0; }
.seg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .5s steps(6); }
.seg .k { color: var(--blue); }
.seg:hover { color: var(--ink); background: rgb(1 63 255 / .07); }
.seg[aria-current="page"] { color: var(--ink); } .seg[aria-current="page"]::after, .seg:hover::after { transform: scaleX(1); }
.playhead { position: absolute; top: -7px; bottom: 0; left: 0; width: 2px; background: var(--blue); pointer-events: none; z-index: 3; }
.playhead .head { position: absolute; left: 50%; top: -3px; width: 12px; transform: translateX(-50%); color: var(--blue); }

/* player em janela */
.pl { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: 24px; background: var(--scan), rgb(1 20 140 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.pl.open { visibility: visible; opacity: 1; transition-delay: 0s; }
.pl .pwin { width: min(1120px, 94vw); clip-path: inset(50% 0 50% 0); transition: clip-path .7s steps(12); }
.pl.open .pwin { clip-path: inset(0 0 0 0); }
.pl .ph .ttl { flex: 1; font-weight: 500; opacity: .8; }
.pl .ph .x { font: 700 9.5px var(--mono); letter-spacing: .1em; }
.pl .ph .x:hover { color: var(--blue); }
.pl .f16 { aspect-ratio: 16 / 9; background: #000; position: relative; }
.pl .f16 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pl .pf { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 14px 12px 20px; border-top: 1px solid var(--hair); }
.pl .pf .nv, .pl .pf .ex { display: flex; gap: 22px; flex-wrap: wrap; }
.pl .pf .meta { color: var(--ink2); }
/* o player fica acima do scanline: só a moldura da janela mantém as linhas, o vídeo não */
.pl .ph, .pl .pf { position: relative; }
.pl .ph::after, .pl .pf::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--scan); mix-blend-mode: multiply; }
html[data-theme="dark"] .pl .ph::after, html[data-theme="dark"] .pl .pf::after { mix-blend-mode: normal; }

.stg { position: relative; }
html[data-lang="pt"] [lang="en"], html:not([data-lang]) [lang="en"] { display: none !important; }
html[data-lang="en"] [lang="pt"] { display: none !important; }
html.js [data-reveal] { opacity: 0; }
.mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .16em; margin: -.08em -.02em -.16em; }
.mask > span { display: inline-block; will-change: transform; }
html.js [data-split]:not([data-s]) { visibility: hidden; }

/* ---------- abertura ---------- */
.loader { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
html:not(.js) .loader { display: none; }
.loader .half { position: absolute; left: 0; right: 0; height: 50.15%; background: var(--paper); will-change: transform; overflow: hidden; }
.loader .top { top: 0; } .loader .bot { bottom: 0; }
.loader .ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; justify-content: space-between; align-items: end; padding-inline: var(--gx); }
.loader .ruler b { width: 1px; height: 7px; background: var(--ink2); } .loader .ruler b:nth-child(5n+1) { height: 15px; background: var(--ink); }
.loader .kf { position: absolute; bottom: 0; width: 14px; transform: translate(-50%, 7px); color: var(--c); opacity: 0; }
.loader .lab { position: absolute; top: 14px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); transform: translateX(-50%); opacity: 0; }
.loader .lab b { color: var(--blue); font-weight: 500; }
.loader .tcv2 { position: absolute; left: var(--gx); top: 14px; font: 500 11px var(--mono); letter-spacing: .1em; color: var(--ink); }
.loader .cut { position: absolute; left: 0; top: calc(50% - 1px); height: 2px; width: 0; background: var(--blue); z-index: 3; }
.loader .needle { position: absolute; left: 0; top: 50%; width: 0; height: 0; z-index: 4; }
.loader .needle .stem { position: absolute; left: -1px; top: -56px; width: 2px; height: 112px; background: var(--ink); }
.loader .needle .head { position: absolute; left: -9px; top: -66px; width: 18px; color: var(--blue); }
.loader .needle .razor { position: absolute; left: 10px; top: -48px; width: 22px; color: var(--ink); }

@media (max-width: 960px) {
  .tbl .th { display: none; }
  .tbl .th, .tbl .row { grid-template-columns: 34px minmax(0, 1fr) 24px; }
  .tbl .row .dur, .tbl .row .ty { display: none; } .tbl .row .cl { grid-column: 2; grid-row: 2; }
  .tbl .row { min-height: 78px; }
  .statement { min-height: 0; } .tiles { justify-content: flex-start; }
  .dissolve .ov { grid-template-columns: 1fr; }
  .about-grid .lead, .about-grid .txt { grid-column: 1 / -1; } .about-grid .txt { margin-top: 24px; }
  .facts .f { grid-template-columns: 34px 1fr; } .facts .f > :nth-child(n+3) { grid-column: 2; }
  .srv { grid-template-columns: 34px 1fr; } .srv p, .srv .mono:last-child { grid-column: 2; margin-top: 8px; }
  .faq { grid-template-columns: 1fr; }
  .contact .pwin { position: relative; inset: auto; width: min(320px, 100%); margin: 20px auto 0; }
  .contact { display: block; text-align: center; padding-top: 130px; }
  .bars > div { padding: 12px; }
  .menu-win .in { grid-template-columns: 1fr; } .menu-win .tile { display: none; }
  .peek { display: none; }
}
@media (max-width: 560px) { .seg .nm { display: none; } .dock-tl .tcv { width: 46px; } }
html.reduce .crt::after, html.reduce .mq div { animation: none; }
html.reduce * { transition: none !important; }
html.reduce [data-reveal] { opacity: 1 !important; }
html.reduce [data-split]:not([data-s]) { visibility: visible !important; }
html.reduce .loader { display: none; }

/* ---------- ajustes finais ---------- */
.tbl .row[hidden] { display: none; }
.tbl.scr .th, .tbl.scr .row { grid-template-columns: 44px minmax(0, 1.1fr) 150px minmax(0, 1.4fr) 190px; }
.tbl .row.static { cursor: default; min-height: 76px; }
.tbl .row.static:hover { background: transparent; color: inherit; padding-inline: 0; }
.tbl .row.static:hover .nm { transform: none; }
.tbl .row.static .m { color: var(--ink2); }
.tbl .row.static:hover .m, .tbl .row.static:hover .n { color: var(--ink2); }
.h1s { font: 400 clamp(36px, 6.4vw, 104px)/.98 var(--serif); letter-spacing: -.03em; font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 14ch; }
.intro2 { max-width: 54ch; color: var(--ink2); margin: 0 0 clamp(30px, 4vw, 56px); font-size: clamp(15px, 1.25vw, 18px); }
.sec.pt { padding-top: 160px; }
.sec-h .mono { color: var(--ink2); }
.pl .ph .lbl2 { font-weight: 700; }
.pager .tl2 { padding: 4px 0; }
.srv-list { border-top: 1px solid var(--ink); }
.contact .w1, .contact .w2, .contact .w3 { z-index: 2; }
.statement .big, .big { color: #fff; }
.dissolve .ov .tags { margin-bottom: 2px; }
.mq { color: #fff; }
@media (max-width: 960px) { .tbl.scr .th, .tbl.scr .row { grid-template-columns: 34px minmax(0, 1fr); } .tbl.scr .row .m { grid-column: 2; } .tbl.scr .row .go { grid-column: 2; justify-self: start; } }
.dissolve .shot .cv { pointer-events: none; }
.dock-tl { width: min(780px, calc(100vw - 48px)); }
.seg { white-space: nowrap; padding-inline: 4px; }
.tbl .row.static .go { color: var(--ink); opacity: 1; }
.tbl .row.static .go .tl2 { white-space: nowrap; }

/* ---------- marca monocromática ---------- */
.lgm { display: block; height: auto; }
.tabbar .brand { color: var(--ink); }
.tabbar .brand .lgm { height: 30px; width: auto; }
.tile.mark { display: flex; align-items: flex-end; color: #fff; }
.tile.mark .lgm { width: 100%; }

/* ---------- rodapé editorial ---------- */
.fbrand { display: flex; justify-content: center; color: #fff; padding: clamp(40px, 5.5vw, 80px) calc(var(--gx) + 10px) clamp(30px, 3.4vw, 50px); }
.fbrand .lgm { width: clamp(220px, 32vw, 500px); }
.fruler { position: relative; margin: 0 calc(var(--gx) + 10px); height: 26px; border-bottom: 1px solid rgb(255 255 255 / .55);
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .45) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, rgb(255 255 255 / .8) 0 1px, transparent 1px 120px) left bottom / 100% 14px no-repeat; }
.fruler .fph { position: absolute; bottom: -1px; left: var(--p, 0%); width: 2px; height: 26px; background: var(--lime); }
.fruler .fph::before { content: ""; position: absolute; top: -6px; left: -5px; width: 12px; height: 8px; background: var(--lime); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.foot .meta { padding: 16px calc(var(--gx) + 10px) 96px; }

/* ---------- menu: barra que cresce e vira janela ---------- */
.tabbar { justify-content: center; }
.tabbar .burger { position: absolute; right: 12px; top: 6px; }
html.menu-open .tabbar { opacity: 0; pointer-events: none; }
.menu-win { width: clamp(340px, 46vw, 660px); border-radius: 12px; transition: none; }
html.menu-open .menu-win { clip-path: inset(0 round 12px); }
.menu-win .top { right: 0; padding-left: 0; justify-content: center; color: var(--ink); }
.menu-win .top .lgm { height: 30px; width: auto; }
.menu-win .in { grid-template-columns: .9fr 1.2fr; align-items: stretch; gap: 16px; padding: 12px 18px 16px; }
.menu-win .links { gap: 2px; padding-top: 4px; }
.menu-win .links a { font-size: 24px; line-height: 1.15; }
.menu-win .tile { width: auto; aspect-ratio: auto; min-height: 0; background: var(--blue); color: #9cd753; border-radius: 8px; }
.menu-win .tile .brandmark { width: 64%; color: #9cd753; }
.menu-win .tile::before, .menu-win .tile::after { content: "+"; position: absolute; top: 50%; transform: translateY(-54%); font: 400 40px/1 var(--mono); color: #9cd753; }
.menu-win .tile::before { left: 7%; } .menu-win .tile::after { right: 7%; }
.menu-win .x { z-index: 2; top: 6px; right: 12px; width: 34px; height: 34px; }
.menu-win .x:focus:not(:focus-visible), .burger:focus:not(:focus-visible) { outline: none; }
.chip { border-radius: 6px; }

/* ---------- tabelas: sem deslocamento de texto no hover ---------- */
.tbl .row { width: calc(100% + 28px); margin-inline: -14px; padding-inline: 14px; }
.tbl .row:hover, .tbl .row:focus-visible, .tbl .row.static:hover { padding-inline: 14px; }
.tbl .row:hover .nm { transform: none; }
.tbl .th { margin-inline: -14px; padding-inline: 14px; }

/* ---------- serviços / grid ---------- */
.srv { grid-template-columns: minmax(190px, 250px) minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 960px) { .srv { grid-template-columns: 1fr; gap: 12px; } .statement { grid-template-columns: 1fr; } .tiles { justify-content: flex-start; } }

/* ---------- bordas que se formam em pixels ao rolar ---------- */
.pxe { position: absolute; left: 0; right: 0; top: 0; z-index: 3; width: 100%; pointer-events: none; }
.pxt { pointer-events: none; }

/* ---------- Trabalhos: título acima da barra do tempo ---------- */
.dissolve .ov { padding-bottom: calc(clamp(20px, 3vw, 44px) + 92px); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- rodapé: logo no canto, ~1/5 da tela, base alinhada à base da régua ---------- */
.foot { --lw: clamp(150px, 20vw, 420px); }
.fbase { display: flex; align-items: flex-end; gap: clamp(16px, 2.4vw, 36px); padding: clamp(30px, 3.4vw, 52px) calc(var(--gx) + 10px) 0; }
.fbrand { display: block; flex: none; width: var(--lw); padding: 0; margin-bottom: calc(var(--lw) * -.0911); color: #fff; }
.fbrand .lgm { width: 100%; }
.fruler { flex: 1; margin: 0; height: 22px; }
.foot .meta { padding: calc(var(--lw) * .0911 + 26px) calc(var(--gx) + 10px) 92px; }

/* ---------- topo e barra do tempo só aparecem depois da abertura ---------- */
.tabbar, .dock-tl { transition: opacity .7s ease; }
html.intro .tabbar, html.intro .dock-tl { opacity: 0; pointer-events: none; }
html.menu-open .tabbar { transition: none; }
.tabbar .brand img { height: 34px; width: auto; }
.menu-win .top img { height: 34px; width: auto; }

/* ---------- Serviços: tópico nas barras de duas cores, maiores ---------- */
.srv.one { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.srv .tags .tg { font-size: 15px; padding: 13px 16px 11px; letter-spacing: .08em; }
.srv .tags .tg:first-child { min-width: 52px; text-align: center; }
.srv.one p { font-size: clamp(18px, 1.7vw, 26px); line-height: 1.35; max-width: 40ch; color: var(--ink); }
@media (max-width: 960px) { .srv.one { grid-template-columns: 1fr; } }

/* ---------- Contato: janelas mais próximas do texto central ---------- */
.contact .w1 { left: 15%; top: 21%; } .contact .w2 { right: 12%; top: 58%; } .contact .w3 { left: 17%; bottom: 17%; }

/* ---------- Scripts: o link do GitHub não vaza mais para a direita ---------- */
.tbl.scr .row .go { width: auto; justify-self: end; white-space: nowrap; min-width: 0; }
.tbl.scr .row { align-items: center; }
@media (max-width: 960px) {
  .tbl.scr .row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 4px; padding-block: 16px; height: auto; min-height: 0; }
  .tbl.scr .row .n { grid-row: 1; } .tbl.scr .row .nm { grid-column: 2; }
  .tbl.scr .row .m, .tbl.scr .row .ty { display: block; grid-column: 2; }
  .tbl.scr .row .go { grid-column: 2; justify-self: start; margin-top: 6px; }
}
@media (max-width: 960px) { .tbl.scr .row .go { justify-self: start !important; } }

/* ---------- abertura: metades azuis; a agulha corta e elas se abrem revelando a página ---------- */
.loader .half { background: var(--blue); }
.loader .tcv2 { color: #fff; }
.loader .ruler b { background: rgb(255 255 255 / .55); } .loader .ruler b:nth-child(5n+1) { background: #fff; }
.loader .kf { color: #fff !important; }
.loader .lab { color: #dbe3ff; } .loader .lab b { color: var(--lime); }
.loader .cut { background: var(--lime); }
.loader .needle .stem { background: #fff; } .loader .needle .head { color: var(--lime); } .loader .needle .razor { color: #fff; }

/* ---------- Serviços: layout original (número, título grande, descrição, rótulo), hover calmo ---------- */
.srv { grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 1fr) 190px; gap: 0 14px; align-items: baseline; padding: 30px 0; }
.srv .mono { color: var(--ink2); }
@media (max-width: 960px) { .srv { grid-template-columns: 34px 1fr; } .srv p, .srv .mono:last-child { grid-column: 2; margin-top: 8px; } }

/* a linha de corte viaja com a metade de cima; nada some por fade, tudo sai junto com seu bloco */
.loader .top .cut { top: auto; bottom: 0; }

/* ---------- flipbook do título: pilha de quadros ---------- */
.inl.fb { overflow: visible; background: none; border-radius: 0; position: relative; z-index: 2; }
.inl.fb img { animation: none; opacity: 1; }
.inl.fb .ff { position: absolute; background-size: cover; background-position: center; background-color: var(--ink); }

/* timeline da abertura: traços mais grossos e linha de corte branca, que fica até o fim e sai junto com o bloco de cima */
.loader .top .cut { top: auto; bottom: 0; height: 4px; background: #fff; z-index: 5; }
.loader .ruler { height: 34px; }
.loader .ruler b { width: 2px; height: 10px; }
.loader .ruler b:nth-child(5n+1) { height: 22px; width: 2px; }
.loader .kf { width: 22px; transform: translate(-50%, 10px); }
.loader .lab { font-size: 12px; top: 18px; }
.loader .tcv2 { font-size: 13px; }
.loader .needle .stem { width: 3px; left: -1.5px; }
.loader .needle .head { width: 22px; left: -11px; }
.loader .needle .razor { width: 26px; }

/* abertura: a metade de cima fica acima da de baixo (a linha de corte não é coberta); keyframes inteiros, pendurados sob as réguas altas */
.loader .top { z-index: 2; } .loader .bot { z-index: 1; }
.loader .kf { top: 8px; bottom: auto; width: 22px; margin-left: -11px; transform: none; }
.loader .lab { top: 40px; font-size: 12px; }
.loader .needle .razor { display: none; }

/* ---------- seção azul da Home: mais baixa, logo menor, tudo alinhado pela direita ---------- */
.statement { padding-top: clamp(40px, 6.7vw, 94px); padding-bottom: clamp(34px, 4.4vw, 62px); }
.tile.mark { aspect-ratio: auto; width: clamp(110px, 10.5vw, 165px); overflow: visible; align-self: flex-end; }
.tile.mark .lgm { width: 100%; }
.caps { flex-direction: column-reverse; align-items: flex-end; gap: 12px; padding: 18px 0 0; }
.caps .mono, .caps .mono:last-child { text-align: right; }

/* abertura: linha de corte na espessura da agulha; triângulos (setinhas) mais abaixo, com a ponta alinhada à régua alta */
.loader .top .cut { height: 3px; }
.loader .kf { top: 20px; width: 20px; margin-left: -10px; }
.loader .lab { top: 50px; }

/* durante a abertura, o topo e a barra do tempo ficam ATRÁS do azul: aparecem quando o azul sai */
html.intro .tabbar, html.intro .dock-tl { opacity: 1; z-index: 300; pointer-events: none; transition: none; }

/* pixel dos títulos aplicado desde o início, em CSS (antes entrava por JS ~1 s depois do texto) */
@media (min-width: 961px) { h1[data-split] .mask > span { filter: url(#pixelate); } }

/* Serviços: cada tópico com a sua cor da paleta no hover (título e linha) */
.srv::after { background: var(--c, var(--blue)); }
.srv:hover h2 { color: var(--c, var(--blue)); }

/* título da Home se forma: letras em fontes variadas, cortes secos de stop motion */
.hero h1 .ch { display: inline-block; line-height: 1; }
.hero h1.forming .mask { overflow: visible; position: relative; }
.hero h1 .ch.f1 { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.08em; }
.hero h1 .ch.f2 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: .8em; letter-spacing: 0; }
.hero h1 .ch.f3 { font-family: var(--mono); font-weight: 500; font-size: .86em; }
.hero h1 .ch.f4 { font-family: "Instrument Serif", "Times New Roman", serif; font-style: italic; font-weight: 400; }
.hero h1 .ch.f5 { font-family: "Pinyon Script", cursive; font-weight: 400; font-size: 1.05em; }
.hero h1 .ch.f6 { font-style: italic; font-weight: 700; }
.hero h1 .ch.f7 { font-family: "Instrument Serif", "Times New Roman", serif; font-weight: 400; }
.hero h1 .scr { position: absolute; pointer-events: none; overflow: visible; fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; }
.hero h1 .scr path { vector-effect: non-scaling-stroke; }
.hero h1 .scr.ul { left: -3%; width: 106%; top: 88%; height: .2em; }
.hero h1 .scr.ci { left: -22%; width: 144%; top: -6%; height: 112%; }
.hero h1 .mask > .fx { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; }
/* Scripts: bloco CompCAM com prévia da interface */
.blue.sec.ccs { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-block: clamp(70px, 9vw, 140px); }
.ccmock { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.ccmock .phone { width: clamp(150px, 15vw, 220px); aspect-ratio: 9 / 19; border: 3px solid #fff; border-radius: 26px; padding: 10px; background: rgb(0 0 0 / .22); }
.ccmock .vf { position: relative; height: 100%; border-radius: 16px; background: linear-gradient(rgb(255 255 255 / .18) 1px, transparent 1px) 0 0 / 100% 33.33%, linear-gradient(90deg, rgb(255 255 255 / .18) 1px, transparent 1px) 0 0 / 33.33% 100%, rgb(255 255 255 / .06); overflow: hidden; }
.ccmock .ch { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px; border: 2px solid var(--lime); }
.ccmock .ch::before, .ccmock .ch::after { content: ""; position: absolute; background: var(--lime); }
.ccmock .ch::before { left: 50%; top: -10px; bottom: -10px; width: 2px; margin-left: -1px; } .ccmock .ch::after { top: 50%; left: -10px; right: -10px; height: 2px; margin-top: -1px; }
.ccmock .rec { position: absolute; left: 10px; top: 10px; font-size: 10px; color: #fff; } .ccmock .lv { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 9px; color: var(--lime); }
.ccmock .pwin.ae { position: relative; inset: auto; width: min(330px, 100%); margin-left: -34px; transform: none; align-self: flex-end; margin-bottom: 8%; color: var(--ink); }
.ccmock .pb p { display: flex; justify-content: space-between; gap: 18px; margin: 0; padding: 7px 0; border-bottom: 1px solid rgb(0 0 0 / .12); font-size: 11px; } .ccmock .pb p:last-child { border: 0; }
.ccmock .pb b { font-weight: 500; } .ccmock .ok { color: var(--green); }
.ccmock .note { flex-basis: 100%; text-align: center; margin-top: 22px; font-size: 11px; opacity: .8; }
@media (max-width: 960px) { .blue.sec.ccs { grid-template-columns: 1fr; gap: 44px; } }

@media (min-width:961px){.contact .w1{left:16%;top:32%} .contact .w2{right:11%;top:61%} .contact .w3{left:15%;bottom:auto;top:69%}}

.menu-win .top .lgm { height: 34px; width: auto; color: var(--ink); }

/* menu: barra e janela são um objeto só (mesma cor, mesma sombra sutil, sombra fora do recorte) */
.tabbar { background: rgb(246 246 252 / .92); box-shadow: inset 0 1px 0 #fff; }
.tabbar::before { content: none; }
.menu-sh { position: fixed; inset: 0; z-index: 449; pointer-events: none; filter: drop-shadow(0 6px 14px rgb(10 10 70 / .10)); }
.menu-sh .menu-win { pointer-events: auto; background: rgb(246 246 252 / .92); box-shadow: inset 0 1px 0 #fff; z-index: auto; }
html:not(.menu-open) .menu-sh .menu-win { pointer-events: none; }
.tabbar-sh { }
/* escuro: cinza bem escuro com scanlines, sem faixa descendo */
html[data-theme="dark"] { --paper: #1b1b21; --paper2: #26262e; --bezel: #26262e; --scan: repeating-linear-gradient(0deg, rgb(0 0 0 / .34) 0 1px, transparent 1px 4px); }
html[data-theme="dark"] .crt::after { display: none; }
html[data-theme="dark"] .tabbar, html[data-theme="dark"] .menu-sh .menu-win { background: rgb(38 38 46 / .92); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
html[data-theme="dark"] .menu-sh { filter: drop-shadow(0 6px 14px rgb(0 0 0 / .35)); }

.tabbar { box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgb(10 10 70 / .10); }
html[data-theme="dark"] .tabbar { box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 6px 14px rgb(0 0 0 / .35); }
.menu-win .top .lgm { height: 34px; width: auto; color: var(--ink); }

.tabbar { box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgb(10 10 70 / .10); }
html[data-theme="dark"] .tabbar { box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 6px 14px rgb(0 0 0 / .35); }
.menu-win .top .lgm { height: 34px; width: auto; color: var(--ink); }

/* menu: sem o quadro azul, links em duas colunas, redes e ajustes centralizados, janela mais estreita */
.menu-win { width: clamp(320px, 34vw, 480px); }
.menu-win .tile { display: none; }
.menu-win .in { grid-template-columns: 1fr; }
.menu-win .links { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 24px; justify-items: start; }
.menu-win .soc, .menu-win .tools { justify-content: center; }

/* barra superior: logo preta */
.tabbar .brand .lgm { height: 26px; width: auto; color: var(--ink); }
/* foto do bloco azul: dissolve de blocos no alto, mais denso no canto esquerdo */
.tile.photo .pxd { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tile.photo .pxd i { position: absolute; width: calc(100% / 13 + .5px); height: calc(100% / 16 + .5px); background: var(--blue); }

.hero h1 .ch { line-height: .5; } /* letras de fontes diferentes não mexem na linha */

/* topo: só NOÉ, um pouco maior (barra e menu iguais) */
.tabbar .brand .lgm, .menu-win .top .lgm { height: 28px; width: auto; color: var(--ink); }

/* as letras da animação são <i>, que o navegador deixa em itálico por padrão: só f4/f6 são itálicas */
.hero h1 .ch { font-style: normal; }
/* títulos pixelizados também no celular */
h1[data-split] .mask > span { filter: url(#pixelate); }

/* todos os títulos animados (h1 e h2) pixelizados, em qualquer tela */
[data-split] .mask > span { filter: url(#pixelate); }

/* celular: títulos menores pedem pixel menor (2 px em vez de 4) */
@media (max-width: 960px) { [data-split] .mask > span { filter: url(#pixelate-s); } }

/* foto do bloco azul: limpa, só com cantos arredondados */
.tile.photo { border-radius: 10px; }

/* celular: pixel de 2 px exato (sem engrossar a letra), também no h1 */
@media (max-width: 960px) { h1[data-split] .mask > span, [data-split] .mask > span { filter: url(#pixelate-s); } }

/* bloco azul da Home: texto à esquerda, foto sangrada à direita de cima a baixo */
.statement.st2 { padding: 0; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.st2 .st-t { padding: clamp(70px, 8vw, 130px) clamp(30px, 5vw, 80px) clamp(50px, 6vw, 90px) calc(var(--gx) + 10px); display: flex; flex-direction: column; justify-content: center; }
.st2 .st-ph { position: relative; overflow: hidden; min-height: 100%; }
.st2 .st-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) brightness(1.22) contrast(.98); }
.st2 .st-ph::after { content: ""; position: absolute; inset: 0; background: var(--blue2); mix-blend-mode: screen; opacity: .42; }
.st2 .caps { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 8px 28px; padding: clamp(28px, 3vw, 44px) 0 0; }
.st2 .caps .mono, .st2 .caps .mono:last-child { text-align: left; }
@media (max-width: 960px) {
  .statement.st2 { grid-template-columns: 1fr; }
  .st2 .st-t { padding: 64px var(--gx) 44px; }
  .st2 .st-ph { min-height: 0; aspect-ratio: 4 / 4.4; }
  .st2 .caps { flex-direction: column; gap: 6px; }
}

/* foto do bloco azul (opção A): sombras no azul da faixa, luzes puxando para o branco */
.st2 .st-ph { background: var(--blue); }
.st2 .st-ph img { filter: grayscale(1) contrast(1.1) brightness(1.05); mix-blend-mode: screen; }
.st2 .st-ph::after { content: none; }

/* foto do bloco azul: meio-termo entre a original (azul acinzentado) e a opção A (azul da faixa) */
.st2 .st-ph { background: #2149d0; }
.st2 .st-ph img { filter: grayscale(1) contrast(1.22) brightness(.96); mix-blend-mode: screen; }

/* foto do bloco azul: meio-termo entre a original (azul acinzentado) e a opção A (azul da faixa) */
.st2 .st-ph { background: #2149d0; }
.st2 .st-ph img { filter: grayscale(1) contrast(1.22) brightness(.96); mix-blend-mode: screen; }
/* agulha: linha branca que separa texto e foto, com cabeça pixelizada no topo; entra da esquerda e para na divisa */
.st2 { position: relative; }
.st2 .st-ndl { position: absolute; top: 0; bottom: 0; left: 62.264%; width: 2px; margin-left: -1px; background: #fff; z-index: 4; pointer-events: none; }
.st2 .st-ndl .hd { position: absolute; left: 50%; bottom: 100%; width: 22px; transform: translateX(-50%); color: var(--blue); line-height: 0; }
.st2 .st-ndl .hd svg { width: 100%; height: auto; display: block; }
@media (max-width: 960px) { .st2 .st-ndl { display: none; } }

/* a linha da agulha é um corte (cor do fundo da página), por baixo dos bloquinhos da borda: só existe onde há faixa/foto */
.st2 .st-ndl { background: var(--paper); z-index: 2; }

/* janela do filme abre fluida, no mesmo ritmo da barra/menu (sem degraus) */
.pl .pwin { transition: clip-path .62s cubic-bezier(.16, 1, .3, 1); }

/* desempenho: scanlines só do tamanho da tela (antes cobriam a página inteira e o navegador refazia a mistura numa área enorme a cada quadro) */
.scan { position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: calc(100vh + 8px); will-change: transform; }
/* tela da transição em resolução de bloco, ampliada sem suavizar */
.pxt { right: auto !important; bottom: auto !important; image-rendering: pixelated; image-rendering: crisp-edges; }

/* CompCAM: prévia da interface também no topo da página do CompCAM */
.contact .ccmock { margin-top: clamp(40px, 5vw, 70px); }

/* menu: as duas colunas de links formam um bloco centralizado na janela */
.menu-win .links { grid-template-columns: auto auto; justify-content: center; column-gap: clamp(40px, 5vw, 72px); padding-top: 10px; }

/* CompCAM (computador): celular + janela do After Effects flutuando no alto à direita, como no rascunho; as janelinhas voltam ao lugar original */
@media (min-width: 961px) {
  .cc-hero .ccmock { position: absolute; left: 60%; top: 20%; margin: 0; width: 24vw; display: block; }
  .cc-hero .ccmock .phone { width: 14.6vw; max-width: 230px; }
  .cc-hero .ccmock .pwin.ae { position: absolute; left: 8vw; top: 3.5vw; width: 15vw; min-width: 230px; margin: 0; }
  .cc-hero .ccmock .pb p { flex-direction: column; gap: 2px; }
  .cc-hero .ccmock .note { display: none; }
}

/* ===== celular: diagramação e leveza de rolagem ===== */
html, body { overflow-x: clip; } /* nada que se mexa (letras da abertura, janelas) empurra a página para o lado */
@media (max-width: 960px) {
  /* scanlines e vinheta sem mistura de cor (no celular a mistura em tela cheia pesa na rolagem); visual quase igual */
  .scan { mix-blend-mode: normal; background: repeating-linear-gradient(0deg, rgb(10 10 70 / .075) 0 1px, transparent 1px 4px); }
  html[data-theme="dark"] .scan { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .3) 0 1px, transparent 1px 4px); }
  .crt { mix-blend-mode: normal; background: radial-gradient(130% 120% at 50% 45%, transparent 62%, rgb(10 10 70 / .12) 100%); }
  .crt::after { display: none; }
  .tabbar, .dock-tl { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(246 246 252 / .97); }
  html[data-theme="dark"] .tabbar, html[data-theme="dark"] .dock-tl { background: rgb(38 38 46 / .97); }
  /* topo e menu menores */
  .hero h1 { font-size: clamp(30px, 9.6vw, 44px); }
  .menu-win { width: calc(100vw - 32px); }
  .menu-win .links { column-gap: 22px; }
  .menu-win .links a { font-size: 17px; }
  .menu-win .soc { gap: 12px; }
}

/* desempenho: cada palavra com pixel vira camada própria; o filtro é desenhado uma vez e a subida da palavra só move a camada (antes o filtro era refeito a cada quadro da animação de entrada) */
[data-split] .mask > span { will-change: transform; }

/* celular: abertura 25% menor (régua, marcas, rótulos, timecode e agulha) */
@media (max-width: 960px) {
  .loader .ruler { height: 26px; }
  .loader .ruler b { width: 1.5px; height: 7.5px; }
  .loader .ruler b:nth-child(5n+1) { width: 1.5px; height: 16.5px; }
  .loader .kf { top: 15px; width: 15px; margin-left: -7.5px; }
  .loader .lab { top: 37px; font-size: 9px; }
  .loader .tcv2 { font-size: 10px; }
  .loader .top .cut { height: 2px; }
  .loader .needle .stem { width: 2px; left: -1px; top: -42px; height: 84px; }
  .loader .needle .head { width: 16px; left: -8px; top: -50px; }
}

/* celular: prévia do CompCAM na mesma composição do PC (celular menor + janela do After Effects sobreposta à direita) */
@media (max-width: 960px) {
  .ccmock { display: block; position: relative; width: 100%; max-width: 440px; margin: 40px auto 0; }
  .ccmock .phone { width: 42vw; max-width: 180px; margin-left: 8%; border-width: 2px; border-radius: 20px; padding: 7px; }
  .ccmock .vf { border-radius: 13px; }
  .ccmock .ch { width: 26px; height: 26px; margin: -13px; }
  .ccmock .rec { font-size: 8px; left: 8px; top: 8px; } .ccmock .lv { font-size: 7px; left: 8px; right: 8px; bottom: 8px; }
  .ccmock .pwin.ae { position: absolute; right: 0; top: 30%; width: 58vw; max-width: 250px; min-width: 0; margin: 0; }
  .ccmock .pwin.ae .ph { font-size: 8.5px; }
  .ccmock .pb p { font-size: 9px; padding: 5px 0; gap: 8px; }
  .ccmock .note { margin-top: 20px; font-size: 8.5px; line-height: 1.5; }
}

/* celular: janelinhas do Contato/CompCAM empilhadas e centralizadas, sem o deslocamento do PC (antes saíam da tela) */
@media (max-width: 960px) { .contact .pwin[data-drag] { left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: min(320px, 100%); margin: 14px auto 0; } .contact .pwin.w1 { margin-top: 40px; } }

/* celular: agulha deitada entre texto e foto (cabeça pixelizada na ponta esquerda, apontando para dentro) */
@media (max-width: 960px) {
  .st2 .st-ndl { display: block; left: 0 !important; right: 0; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .st2 .st-ndl .hd { left: 0; bottom: auto; top: 50%; width: 16px; transform: translate(-3px, -50%) rotate(-90deg); color: var(--paper); }
}

@media (max-width: 960px) { .st2 .st-ndl .hd { left: 12px; width: 22px; transform: translate(0, -50%) rotate(-90deg); } }

/* celular: janelinhas flutuando como no PC (uma mais à esquerda, outra mais à direita, encostando de leve) */
@media (max-width: 960px) {
  .contact .pwin[data-drag] { width: 64% !important; margin: -6px 0 0 !important; font-size: 90%; }
  .contact .pwin.w1 { margin: 36px 0 0 4% !important; }
  .contact .pwin.w2 { margin-left: auto !important; margin-right: 2% !important; z-index: 3; }
  .contact .pwin.w3 { margin-left: 12% !important; }
  /* desempenho: no celular as palavras não viram camadas separadas (muitas camadas em tela de alta densidade pesam na rolagem) */
  [data-split] .mask > span { will-change: auto; }
}

/* celular: cabeça da agulha deitada encostada na borda do azul */
@media (max-width: 960px) { .st2 .st-ndl .hd { left: -5.5px; } }

@media (max-width: 960px) { .contact .pwin.w1, .contact .pwin.w3 { justify-self: start; } .contact .pwin.w2 { justify-self: end; } }

/* celular: informações do topo (Sobre, Trabalhos) mais para baixo, logo acima da timeline */
@media (max-width: 960px) { .dissolve .ov { padding-bottom: 76px; gap: 18px; } }

/* celular: janelinhas separadas (sem sobrepor), ainda alternando esquerda/direita */
@media (max-width: 960px) { .contact .pwin[data-drag] { margin-top: 18px !important; } .contact .pwin.w1 { margin-top: 36px !important; } }

/* janela do filme: cabe na área útil e fica no centro exato (antes 94vw + margem estourava para a direita no celular) */
.pl .pwin { width: min(1120px, 100%); margin: auto; }

/* botão de tela cheia ao lado do Fechar */
.pl .ph .x.fs { margin-left: auto; margin-right: 14px; }
.pl .ph .x.fs + .x { margin-left: 0; }
.pl .f16:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; }
.pl .f16:fullscreen iframe { width: 100%; height: 100%; }

/* fechar do filme: só o xizinho, como no menu */
.pl .ph .xi { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; }
.pl .ph .xi::before { content: ""; width: 13px; height: 13px; background: linear-gradient(45deg, transparent 45%, var(--ink) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--ink) 45% 55%, transparent 55%); }

/* celular: linha de áreas da Home em uma linha só (letra menor, espaçamento menor, sem quebra) */
@media (max-width: 960px) { .hero .stack > .mono:last-child { white-space: nowrap; font-size: clamp(7.5px, 2.35vw, 10px); letter-spacing: .04em; max-width: 100%; } }

/* Run Scripts: lista de tudo o que faz, em texto corrido e pequeno */
.tbl.scr .row .sl { display: block; font: 400 10.5px/1.55 var(--mono); letter-spacing: .02em; text-transform: none; color: var(--ink2); }
.tbl.scr .row .sl b { color: var(--ink); font-weight: 500; }

/* nada se mexe quando a página cresce: a barra de rolagem tem lugar reservado (antes ela aparecia ao abrir um texto, a janela perdia ~15 px e o cabeçalho e as colunas deslizavam) */
html { scrollbar-gutter: stable; overflow-y: scroll; }
.faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 960px) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* linhas estáticas (Scripts): o cursor pixelizado também vale aqui, sem o cursor do Windows aparecendo */
html.cursor .row.static, html.cursor .row.static * { cursor: none; }

/* estado final do título da Home: rabisco do "em" fica, em azul */
.hero h1.formed .mask { overflow: visible; position: relative; }
.hero h1.formed .scr.ci { stroke: var(--blue); }
html[data-theme="dark"] .hero h1.formed .scr.ci { stroke: var(--lime); }

.hero h1 .scr.ci { stroke-width: 3.6; left: -22%; width: 144%; top: -8%; height: 116%; }

/* rabisco do "em": mesma forma, tamanho e pixel do banner (oval largo, irregular, pixelado) */
.hero h1 .scr.ci { left: -.16em; top: .1em; width: 1.36em; height: .84em; stroke-width: 3.2; filter: url(#pixelate); }
@media (max-width: 960px) { .hero h1 .scr.ci { filter: url(#pixelate-s); stroke-width: 2.4; } }

/* rabisco do "em" = exatamente o do banner: mesma caixa relativa à palavra (-22% / -8% / 144% / 116%) e traço de 4 px */
.hero h1 .scr.ci { left: -22%; top: -8%; width: 144%; height: 116%; stroke-width: 4; }
@media (max-width: 960px) { .hero h1 .scr.ci { stroke-width: 3; } }

.hero h1 .scr { max-width: none; max-height: none; }