@font-face { font-family: "Anton"; src: url("assets/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/geist.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --bg: #05060a;
  --panel: #0e1016;
  --panel-2: #14161e;
  --line: #262a36;
  --ink: #ffffff;
  --muted: #a4a9b8;
  --blue: #1e4dff;
  --blue-light: #7c98ff;
  --gutter: clamp(16px, 2.8vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Geist", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
sup { font-size: .5em; line-height: 0; vertical-align: .7em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; }
h2 { line-height: 1.08; }
:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.progress { position: fixed; z-index: 30; left: 0; top: 0; width: 100%; height: 2px; background: var(--blue); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; padding: 0 var(--gutter); transition: height .35s, background .35s, backdrop-filter .35s; animation: drop .8s var(--ease) both; }
.nav.scrolled { height: 62px; background: rgba(5, 6, 10, .78); backdrop-filter: blur(14px); }
.logo { display: block; width: 122px; transition: color .25s; }
.logo svg { width: 100%; height: auto; }
.nav-links { display: flex; gap: 40px; }
.nav-links a, .nav-mini { position: relative; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--blue-light); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-right { display: flex; align-items: center; gap: 26px; }
.nav-mini { display: flex; align-items: center; gap: 8px; transition: color .2s; }
.nav-mini:hover { color: var(--blue-light); }
.nav-mini i, .link-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: ping 2s infinite; }
.lang { display: flex; padding: 2px; border: 1px solid #3a3f4e; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.lang a, .lang span { padding: 5px 10px; border-radius: 99px; color: var(--muted); transition: color .2s, background .2s; }
.lang a[href]:hover { color: #fff; }
.lang [aria-current] { background: var(--blue); color: #fff; }
.burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 54px; height: 34px; border: 0; border-radius: 99px; background: var(--blue); cursor: pointer; }
.burger span { width: 18px; height: 2px; background: #fff; transition: transform .25s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* hero */
.hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 170px; gap: 0 clamp(4px, 1vw, 16px); margin-top: -78px; padding: 86px var(--gutter) 0; height: clamp(620px, calc(100vh - 20px), 820px); overflow: hidden; isolation: isolate; }
.hero-text { position: relative; z-index: 3; grid-column: 1; grid-row: 1; align-self: center; padding-bottom: 28px; }
h1 { font-size: clamp(78px, 10.4vw, 190px); line-height: 1.02; letter-spacing: .002em; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-family: var(--body); font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: .1em; animation: lift .8s .1s var(--ease) both; }
.eyebrow::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--blue); }
.ln { display: block; overflow: hidden; padding-top: .06em; white-space: nowrap; }
.ch { display: inline-block; font-style: normal; white-space: pre; animation: rise .95s var(--ease) both; animation-delay: calc(.15s + var(--i) * .035s); }
/* palavras da hero empilhadas: a célula fica com a largura da maior e a foto não pula */
.rotator { display: grid; }
.word { grid-area: 1 / 1; }
.word .ch { animation: none; transform: translateY(110%); }
.word.on .ch, .word.out .ch { transition: transform .75s var(--ease); transition-delay: calc(var(--i) * .035s); }
.word.on .ch { transform: none; }
.word.out .ch { transform: translateY(-110%) rotate(-4deg); }
.hero-text p { max-width: 410px; margin-top: 22px; color: #d7dae3; font-size: 16px; animation: lift .8s .65s var(--ease) both; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 26px; animation: lift .8s .78s var(--ease) both; }

.btn { position: relative; display: inline-flex; align-items: center; gap: 22px; padding: 14px 18px 14px 24px; border-radius: 99px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; overflow: hidden; transition: background .2s, translate .25s var(--ease), box-shadow .3s; translate: var(--tx, 0) var(--ty, 0); }
.btn::before { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: shine 3.6s 1.4s infinite; }
.btn:hover { background: #3d66ff; box-shadow: 0 10px 40px rgba(30, 77, 255, .55); }
.btn svg, .card-go svg, .link-line svg, .hero-side a svg, .join-form svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover svg, .link-line:hover svg, .join-form button:hover svg { transform: translate(3px, -3px); }
.link-dot { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: color .2s, gap .3s; }
.link-dot:hover { color: var(--blue-light); gap: 18px; }

/* foto só à direita dos textos: nasce do preto e ganha um toque de azul nas luzes */
.hero-photo { position: relative; z-index: 1; grid-column: 2 / -1; grid-row: 1; min-width: 0; margin: -86px calc(var(--gutter) * -1) 0 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .25) 14%, rgba(0, 0, 0, .75) 26%, #000 38%); mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .25) 14%, rgba(0, 0, 0, .75) 26%, #000 38%); animation: fade 1.6s .2s both; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%; filter: brightness(1.2) contrast(1.06); animation: zoom 20s ease-in-out infinite alternate; }
.hero-photo::before { content: ""; position: absolute; z-index: 1; inset: -20%; background: radial-gradient(circle at 72% 32%, var(--blue), rgba(30, 77, 255, .5) 45%, transparent 80%); mix-blend-mode: color; opacity: .8; translate: calc(var(--mx, 0) * -30px) calc(var(--my, 0) * -20px); animation: tint 10s ease-in-out infinite alternate; }
.hero-photo::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(transparent 76%, var(--bg)); }
.hero-ghost { position: absolute; z-index: 2; right: -1%; top: 0; height: 100%; overflow: hidden; font-family: var(--display); font-size: clamp(220px, 27vw, 460px); line-height: .95; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .08); writing-mode: vertical-rl; pointer-events: none; }
.hero-ghost div { white-space: nowrap; animation: ghost 42s linear infinite; }
.hero-side { position: relative; z-index: 3; grid-column: 3; grid-row: 1; align-self: end; display: grid; gap: 10px; padding-bottom: 44px; animation: lift .8s .95s var(--ease) both; }
.hero-side strong { font-family: var(--display); font-weight: 400; font-size: 26px; }
.hero-side span { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.hero-side > a { width: max-content; padding: 2px; animation: nudge 1.8s ease-in-out infinite; }
.hero-side > a:hover { color: var(--blue-light); }
.hero-handle { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; }
.hero-handle b { font-weight: 500; }
.hero-handle i { width: 34px; height: 1px; background: #fff; opacity: .6; }
.hero-handle a:hover { color: var(--blue-light); }

/* faixa */
.strip { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px var(--gutter); background: var(--panel-2); }
.strip-item { display: flex; align-items: center; gap: 18px; font-size: 13px; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; }
.strip-item svg { flex: none; width: 40px; height: 40px; fill: none; stroke: var(--blue-light); stroke-width: 1.3; transition: transform .35s var(--ease), stroke .25s; }
.strip-item:hover svg { transform: scale(1.14) rotate(-5deg); stroke: #fff; }
.cross { position: relative; flex: 0 0 38px; height: 38px; animation: spin 9s linear infinite; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--blue); }
.cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }

/* projetos */
.work { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 3.1fr); gap: 32px; padding: clamp(56px, 6vw, 88px) var(--gutter); }
.work-intro h2 { font-size: clamp(46px, 5vw, 76px); }
.work-intro p { max-width: 280px; margin-top: 22px; color: var(--muted); }
.link-line { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.link-line:hover { color: var(--blue-light); border-color: var(--blue); }
.link-line svg { color: var(--blue-light); }
.work-index { display: flex; gap: 22px; margin-top: 30px; font-size: 19px; }
.work-index b { font-weight: 500; color: #4c5162; transition: color .25s, transform .25s; }
.work-index b.on { color: var(--blue-light); transform: translateY(-3px); }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; perspective: 1100px; }

/* projetos em duotone azul; a cor real volta ao passar o mouse */
.card { position: relative; display: block; aspect-ratio: 760 / 966; overflow: hidden; background: var(--blue); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out, box-shadow .4s; }
.card img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; transition: transform .9s var(--ease), filter .45s; }
.card:nth-child(2n):not(:hover):not(:focus-visible):not(.live) img { filter: grayscale(1) contrast(1.05) brightness(2.6); }
.card::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(5, 6, 10, .96) 72%); pointer-events: none; }
.card:hover, .card:focus-visible, .card.live { background: #000; box-shadow: 0 24px 60px rgba(30, 77, 255, .35); }
.card:hover img, .card:focus-visible img, .card.live img { filter: none; mix-blend-mode: normal; transform: scale(1.06); }
.card h3 { position: absolute; z-index: 2; left: 16px; bottom: 16px; font-family: var(--body); font-weight: 500; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.22; letter-spacing: .03em; transition: transform .35s var(--ease); }
.card:hover h3 { transform: translateY(-4px); }
.card-go { position: absolute; z-index: 2; right: 12px; bottom: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); transition: transform .35s var(--ease); }
.card:hover .card-go { transform: scale(1.15) rotate(45deg); }

/* letreiro */
.ticker { overflow: hidden; margin-bottom: clamp(40px, 5vw, 72px); padding: 13px 0; background: var(--blue); transform: rotate(-1deg) scale(1.02); }
.ticker-run { display: flex; align-items: center; width: max-content; font-family: var(--display); font-size: clamp(20px, 2.2vw, 30px); text-transform: uppercase; white-space: nowrap; animation: slide 24s linear infinite; }
.ticker-run span { padding: 0 28px; }
.ticker-run i { position: relative; width: 16px; height: 16px; animation: spin 5s linear infinite; }
.ticker-run i::before, .ticker-run i::after { content: ""; position: absolute; background: #fff; }
.ticker-run i::before { left: 0; right: 0; top: 7px; height: 2px; }
.ticker-run i::after { top: 0; bottom: 0; left: 7px; width: 2px; }

/* banner */
.banner { position: relative; display: grid; grid-template-columns: minmax(280px, 1.35fr) minmax(0, 1.2fr) minmax(0, 1fr); margin: 0 var(--gutter); background: var(--panel); overflow: hidden; isolation: isolate; }
.banner-photo { position: relative; min-height: 440px; background: var(--blue); overflow: hidden; }
.banner-photo img { position: absolute; left: 50%; bottom: 0; width: auto; max-width: none; height: 95%; transform: translateX(-38%); }
.plus { position: absolute; left: 36px; top: 36px; width: 54px; height: 54px; animation: spin 10s linear infinite; }
.plus::before, .plus::after { content: ""; position: absolute; background: #fff; }
.plus::before { left: 0; right: 0; top: 50%; height: 1px; }
.plus::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.banner-code { position: absolute; z-index: 2; left: 36px; bottom: 30px; }
.banner-code small { display: block; font-size: 10px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.banner-code i { display: block; width: 92px; height: 18px; margin-top: 8px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px, #fff 5px 6px, transparent 6px 9px); animation: scan 2.6s linear infinite; }
.banner-body { position: relative; z-index: 2; align-self: center; padding: 44px 0 44px clamp(24px, 3vw, 44px); }
.banner-body h2 { font-size: clamp(50px, 5.3vw, 82px); }
.banner-body p { margin: 20px 0 26px; color: #d7dae3; font-size: 14px; }
.steps { position: relative; z-index: 2; align-self: end; display: grid; gap: 8px; margin: 0; padding: 0 clamp(20px, 2.5vw, 36px) 118px 20px; list-style: none; }
.steps li { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 14px; background: var(--panel-2); font-size: 13px; overflow: hidden; transition: background .3s, translate .3s var(--ease); }
.steps li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--blue); transform: scaleX(var(--fill, 1)); transform-origin: left; transition: transform 1s var(--ease); transition-delay: calc(var(--d) + .3s); }
.steps li:hover { background: #1b1f2c; translate: -6px 0; }
.steps b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--blue-light); }
.globe { position: absolute; z-index: 1; right: 34px; top: 22px; width: 112px; fill: none; stroke: #5b6172; stroke-width: 1; }
.globe ellipse { transform-origin: 100px 100px; animation: turn 6s linear infinite; }
.globe .m2 { animation-delay: -2s; }
.globe .m3 { animation-delay: -4s; }
.banner-tag { position: absolute; z-index: 2; right: 0; bottom: 26px; text-align: right; }
.banner-tag b { display: block; padding: 14px 26px; background: var(--blue); }
.banner-tag b svg { width: 96px; height: auto; }
.banner-tag small { display: block; margin: 8px 18px 0 0; color: var(--muted); font-size: 11px; }

/* contato */
.join { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, 1.05fr); align-items: center; gap: 28px; margin: clamp(24px, 3vw, 40px) var(--gutter) 0; padding: 34px clamp(20px, 2.5vw, 36px); background: var(--panel); }
.join h2 { font-size: clamp(36px, 3.7vw, 56px); white-space: nowrap; }
.join p { font-size: 13px; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; }
.join-form { display: flex; align-items: center; padding: 5px 5px 5px 20px; border: 1px solid #3a3f4e; border-radius: 99px; }
.join-form:focus-within { border-color: var(--blue-light); box-shadow: 0 0 0 4px rgba(30, 77, 255, .25); }
.join-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 500 13px var(--body); letter-spacing: .03em; }
.join-form input::placeholder { color: var(--muted); text-transform: uppercase; }
.join-form button { flex: none; display: grid; place-items: center; width: 54px; height: 38px; border: 0; border-radius: 99px; background: var(--blue); color: #fff; cursor: pointer; transition: background .2s; }
.join-form button:hover { background: #3d66ff; }

/* rodapé */
.foot { padding: clamp(48px, 6vw, 84px) var(--gutter) 22px; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 32px 24px; align-items: start; }
.foot-col { display: grid; align-content: start; justify-items: start; gap: 8px; font-size: 13px; color: var(--muted); }
.foot-col strong { margin-bottom: 6px; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.foot-col a { transition: color .2s, translate .25s var(--ease); }
.foot-col a:hover { color: #fff; translate: 5px 0; }
.foot-badge { position: relative; display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; background: var(--blue); transition: scale .35s var(--ease); }
.foot-badge:hover { scale: 1.08; }
.foot-ring { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.foot-ring text { fill: #fff; font: 600 11px var(--body); letter-spacing: .1em; }
.foot-arrow { width: 30px; height: 30px; }
.foot-word { display: block; margin-top: clamp(32px, 4vw, 56px); margin-bottom: clamp(24px, 3vw, 40px); color: var(--blue); }
/* logo animada: mesma sequência no topo e no rodapé, só muda cor, traço e altura da onda */
.anim-logo { --base: var(--blue); --flash: #fff; --mid: var(--blue-light); --lift: -7px; --drop: 1px; --line: 1; }
.logo.anim-logo { --base: #fff; --flash: var(--blue); --mid: var(--blue-light); --lift: -16px; --drop: 3px; --line: 5; }
.anim-logo svg { overflow: visible; }
.foot-word svg { width: 100%; height: auto; }
.anim-logo .g { fill: currentColor; stroke: currentColor; stroke-width: var(--line); color: var(--base); transition: translate .35s var(--ease), color .25s; }
.anim-logo .g:hover { color: var(--flash); translate: 0 var(--lift); }
.logo.anim-logo.in .g { stroke-width: 0; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }

/* serviços */
.services { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 3.1fr); gap: 32px; padding: clamp(56px, 6vw, 88px) var(--gutter) 0; }
.services-intro h2 { font-size: clamp(40px, 4.2vw, 64px); }
.services-intro p { max-width: 280px; margin-top: 22px; color: var(--muted); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.service { position: relative; display: flex; flex-direction: column; min-height: 290px; padding: 26px 24px; background: var(--panel); overflow: hidden; }
.service::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.service:hover::after { transform: scaleX(1); }
.service b { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--blue-light); }
.service h3 { margin-top: auto; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.12; }
.service p { margin-top: 14px; color: var(--muted); font-size: 14px; }

/* dúvidas */
.faq { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2fr); gap: 32px; margin-top: clamp(56px, 6vw, 88px); padding: 0 var(--gutter); }
.faq h2 { font-size: clamp(40px, 4.2vw, 64px); line-height: 1.18; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 20px 44px 20px 0; font-size: 17px; font-weight: 500; list-style: none; cursor: pointer; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-light); }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; background: var(--blue-light); transition: transform .3s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { max-width: 640px; padding-bottom: 22px; color: var(--muted); animation: lift .45s var(--ease) both; }
@media (max-width: 1100px) {
  .services, .faq { grid-template-columns: 1fr; }
  .services-intro p { max-width: 460px; }
  .service { min-height: 240px; }
}

/* títulos em linhas com máscara */
.mask > span { display: block; overflow: hidden; padding-top: .05em; }
.mask b { display: block; font-weight: 400; transition: transform 1s var(--ease); }
.mask > span:nth-child(2) b { transition-delay: .1s; }

/* entradas ao rolar: só escondem com JS ativo e sem reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .js .mask:not(.in) b { transform: translateY(105%); }
  .js .up:not(.in), .js .foot-col:not(.in), .js .banner-tag:not(.in), .js .foot-badge:not(.in), .js .service:not(.in) { opacity: 0; transform: translateY(26px); }
  .js .up, .js .foot-col, .js .banner-tag, .js .service { transition: opacity .8s var(--d, 0s), transform .9s var(--d, 0s) var(--ease), color .2s, border-color .2s, background .2s, translate .25s var(--ease), box-shadow .3s; }
  .js .foot-badge { transition: opacity .8s var(--d), transform .9s var(--d) var(--ease), scale .35s var(--ease); }
  .js .strip-item:not(.in) { opacity: 0; transform: translateX(-18px); }
  .js .strip-item { transition: opacity .7s var(--d), transform .7s var(--d) var(--ease); }
  .js .strip-item svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .strip-item.in svg > * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s calc(var(--d) + .1s) ease-out; }
  .js .card::before, .js .banner-photo::before { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; }
  .js .card::before { background: var(--bg); transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--d) var(--ease); }
  .js .card:not(.in)::before { transform: scaleY(1); }
  .js .card:not(.in) img { transform: scale(1.3); }
  .js .banner-photo::before { background: var(--panel); transform: scaleX(0); transform-origin: right; transition: transform 1.1s var(--ease); }
  .js .banner-photo:not(.in)::before { transform: scaleX(1); }
  .js .banner-photo:not(.in) img { transform: translate(-38%, 22%); }
  .js .banner-photo img { transition: transform 1.3s .2s var(--ease); }
  .js .steps li:not(.in) { opacity: 0; transform: translateX(34px); --fill: 0; }
  .js .steps li { transition: opacity .7s var(--d), transform .8s var(--d) var(--ease), background .3s, translate .3s var(--ease); }
  .anim-logo .g { stroke-dasharray: 1; transition: stroke-dashoffset 1.5s calc(var(--i) * .1s) ease-in-out, fill-opacity .7s calc(1.1s + var(--i) * .1s), stroke-width .5s calc(1.8s + var(--i) * .1s), translate .35s var(--ease), color .25s; }
  .js .anim-logo:not(.in) .g { stroke-dashoffset: 1; fill-opacity: 0; }
  /* depois de desenhada, uma onda de luz corre pelas letras a cada 7s */
  .anim-logo.in .g { animation: logo-wave 7s calc(3.2s + var(--i) * .13s) ease-in-out infinite; }
  .anim-logo .g:hover { animation-play-state: paused; }
}

@keyframes logo-wave { 0%, 14%, 100% { color: var(--base); transform: none; } 5% { color: var(--flash); transform: translateY(var(--lift)); } 9% { color: var(--mid); transform: translateY(var(--drop)); } }
@keyframes rise { from { transform: translateY(110%) rotate(5deg); } }
@keyframes lift { from { opacity: 0; transform: translateY(22px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-100%); } }
@keyframes zoom { to { transform: scale(1.07); } }
@keyframes tint { from { opacity: .55; transform: translate(4%, 3%); } to { opacity: .9; transform: translate(-5%, -3%); } }
@keyframes ghost { to { transform: translateY(-50%); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(30, 77, 255, .8); } 80%, 100% { box-shadow: 0 0 0 9px rgba(30, 77, 255, 0); } }
@keyframes shine { 0% { left: -40%; } 40%, 100% { left: 120%; } }
@keyframes nudge { 50% { transform: translate(4px, -4px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes scan { 50% { opacity: .55; background-position: 18px 0; } }
@keyframes turn { from { transform: scaleX(1); } to { transform: scaleX(-1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* tablet */
@media (max-width: 1100px) {
  .hero { grid-template-columns: auto minmax(0, 1fr); }
  .hero-side, .cross, .hero-ghost { display: none; }
  .strip-item { gap: 12px; font-size: 12px; }
  .work { grid-template-columns: 1fr; }
  .work-intro p { max-width: 460px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card h3 { font-size: 17px; }
  .banner { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.2fr); }
  .banner-photo { grid-row: span 2; }
  .steps { grid-column: 2; grid-template-columns: repeat(3, 1fr); padding: 0 24px 96px; }
  .steps li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .globe { width: 90px; }
  .join { grid-template-columns: 1fr 1fr; }
  .join h2 { grid-column: 1 / -1; }
}

/* celular */
@media (max-width: 760px) {
  .nav-links { position: absolute; left: var(--gutter); right: var(--gutter); top: 100%; display: none; flex-direction: column; gap: 0; padding: 8px 18px; background: var(--panel-2); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; font-size: 14px; }
  .nav-links a + a { border-top: 1px solid var(--line); }
  .nav-mini { display: none; }
  .nav-right { gap: 10px; }
  .burger { display: flex; }

  .hero { display: flex; flex-direction: column; height: auto; padding-top: 82px; }
  h1 { font-size: 21vw; }
  .hero-text { align-self: stretch; padding: 0 0 24px; }
  .hero-text p { margin-top: 16px; }
  .hero-photo { flex: none; height: 104vw; margin: -6vw calc(var(--gutter) * -1) 0; -webkit-mask-image: linear-gradient(transparent, #000 16%); mask-image: linear-gradient(transparent, #000 16%); }
  .hero-photo img { object-position: 50% 30%; }
  .hero-ghost { display: none; }

  .strip { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; padding: 24px var(--gutter); }
  .strip-item { gap: 10px; font-size: 11.5px; }
  .strip-item svg { width: 32px; height: 32px; }

  .work-grid { display: flex; gap: 10px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .work-grid::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 78vw; scroll-snap-align: start; }

  .banner { display: block; }
  .banner-photo { min-height: 104vw; }
  .banner-body { padding: 34px 20px 24px; }
  .banner-body p br { display: none; }
  .steps { grid-template-columns: 1fr; padding: 0 20px 92px; }
  .steps li { flex-direction: row; align-items: center; gap: 14px; }
  .globe { display: none; }

  .join { display: block; padding: 28px 20px; }
  .join h2 { font-size: 12.2vw; line-height: 1.16; white-space: normal; }
  .join p { margin: 16px 0 20px; }

  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-badge { justify-self: end; align-self: end; width: 104px; height: 104px; }
  .foot-base { flex-direction: column; }
}