:root {
   --bg: #0B0D14;
   --bg-elevated: #11131D;
   --surface: #171A26;
   --text: #F4F2EC;
   --muted: rgba(244, 242, 236, .56);
   --faint: rgba(244, 242, 236, .32);
   --accent: #FCBD1E;
   --accent-soft: rgba(252, 189, 30, .12);
   --rec: #FF4747;
   --hairline: rgba(244, 242, 236, .09);
   --hairline-strong: rgba(244, 242, 236, .16);
   --ease: cubic-bezier(.22, 1, .36, 1);
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   -webkit-text-size-adjust: 100%
}

body {
   background: var(--bg);
   color: var(--text);
   font-family: 'Bricolage Grotesque', sans-serif;
   font-weight: 400;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden
}

::selection {
   background: var(--accent);
   color: #0B0D14
}

img,
video {
   display: block;
   max-width: 100%
}

a {
   color: inherit;
   text-decoration: none
}

.media-fallback {
   background: linear-gradient(135deg, var(--surface), var(--bg-elevated))
}

.wrap {
   width: min(1280px, 92vw);
   margin-inline: auto;
   position: relative;
   z-index: 2
}

section {
   padding-block: 60px;
   position: relative
}

@media(min-width:768px) {
   section {
      padding-block: 96px
   }
}

@media(min-width:1024px) {
   section {
      padding-block: 140px
   }
}

h1,
h2,
h3 {
   font-family: 'Bricolage Grotesque';
   font-weight: 300;
   line-height: 1.02;
   letter-spacing: -.025em
}

h1 {
   font-size: clamp(2.5rem, 6.6vw, 5.4rem);
   font-weight: 300
}

h2 {
   font-size: clamp(1.9rem, 4.3vw, 3.6rem)
}

h3 {
   font-size: clamp(1.15rem, 2vw, 1.5rem);
   font-weight: 600;
   letter-spacing: -.01em
}

.em {
   color: var(--accent);
   font-weight: 600
}

.mono {
   font-family: 'JetBrains Mono', monospace
}

.caption {
   font-family: 'JetBrains Mono', monospace;
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .18em;
   color: var(--accent);
   font-weight: 500
}

.caption::before {
   content: "// "
}

.lead {
   font-size: clamp(1.02rem, 1.5vw, 1.18rem);
   color: var(--muted);
   max-width: 60ch
}

.btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: 'JetBrains Mono', monospace;
   font-weight: 500;
   font-size: .82rem;
   letter-spacing: .02em;
   padding: 15px 24px;
   border-radius: 2px;
   border: 1px solid transparent;
   cursor: pointer;
   transition: transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
   will-change: transform
}

.btn-primary {
   background: var(--accent);
   color: #0B0D14
}

.btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 0 28px rgba(252, 189, 30, .35)
}

.btn-ghost {
   border-color: var(--hairline-strong);
   color: var(--text)
}

.btn-ghost:hover {
   transform: translateY(-3px);
   border-color: var(--accent);
   color: var(--accent)
}

.btn svg {
   width: 16px;
   height: 16px
}

/* grid de fundo tech */
.grid-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
   background-size: 72px 72px;
   opacity: .6;
   pointer-events: none;
   -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
   mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%)
}

/* ===== Nav ===== */
header {
   position: fixed;
   inset: 0 0 auto 0;
   z-index: 90;
   transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s
}

header.scrolled {
   background: rgba(11, 13, 20, .78);
   backdrop-filter: blur(14px);
   border-bottom: 1px solid var(--hairline)
}

.nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 72px
}

.logo {
   font-family: 'Bricolage Grotesque';
   font-weight: 800;
   font-size: 1.15rem;
   letter-spacing: -.02em;
   display: flex;
   align-items: center;
   gap: 3px
}

.logo .dot {
   color: var(--accent)
}

.nav-links {
   display: none;
   gap: 32px;
   align-items: center
}

@media(min-width:900px) {
   .nav-links {
      display: flex
   }
}

.nav-links a {
   font-family: 'JetBrains Mono', monospace;
   font-size: .78rem;
   color: var(--muted);
   position: relative;
   padding-bottom: 3px;
   transition: color .3s var(--ease)
}

.nav-links a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 1px;
   background: var(--accent);
   transition: width .35s var(--ease)
}

.nav-links a:hover {
   color: var(--text)
}

.nav-links a:hover::after {
   width: 100%
}

.nav-cta {
   display: none
}

@media(min-width:900px) {
   .nav-cta {
      display: inline-flex
   }
}

.burger {
   display: flex;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   padding: 8px;
   background: none;
   border: none
}

@media(min-width:900px) {
   .burger {
      display: none
   }
}

.burger span {
   width: 24px;
   height: 1.5px;
   background: var(--text);
   transition: transform .4s var(--ease), opacity .3s
}

.burger.open span:nth-child(1) {
   transform: translateY(6.5px) rotate(45deg)
}

.burger.open span:nth-child(2) {
   opacity: 0
}

.burger.open span:nth-child(3) {
   transform: translateY(-6.5px) rotate(-45deg)
}

.mobile-menu {
   position: fixed;
   inset: 0;
   z-index: 80;
   background: var(--bg);
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 6px;
   padding: 0 8vw;
   transform: translateX(100%);
   transition: transform .55s var(--ease)
}

.mobile-menu.open {
   transform: translateX(0)
}

.mobile-menu a {
   font-family: 'Bricolage Grotesque';
   font-weight: 300;
   font-size: 2.2rem;
   padding: 10px 0;
   border-bottom: 1px solid var(--hairline)
}

.mobile-menu .btn {
   margin-top: 28px;
   align-self: flex-start
}

/* ===== Hero (Three.js full-bleed) ===== */
.hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   overflow: hidden
}

#hero-canvas {
   position: absolute;
   inset: 0;
   z-index: 0;
   display: block;
   width: 100%;
   height: 100%
}

.hero::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: radial-gradient(ellipse 70% 60% at 30% 50%, transparent, rgba(11, 13, 20, .55) 80%), linear-gradient(180deg, rgba(11, 13, 20, .4), transparent 30%, rgba(11, 13, 20, .7))
}

.hero .wrap {
   padding-top: 90px;
   padding-bottom: 120px
}

.hero-text {
   max-width: 760px
}

.hero-text .caption {
   margin-bottom: 24px;
   display: inline-block
}

.hero-text h1 {
   margin-bottom: 26px
}

.hero-text h1 .line {
   display: block;
   overflow: hidden
}

.hero-text .lead {
   margin-bottom: 38px
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px
}

/* HUD overlay */
.hud {
   position: absolute;
   inset: 0;
   z-index: 2;
   pointer-events: none;
   font-family: 'JetBrains Mono', monospace;
   font-size: .7rem;
   letter-spacing: .08em;
   color: var(--muted)
}

.hud .corner {
   position: absolute;
   width: 26px;
   height: 26px;
   border: 1.5px solid var(--hairline-strong)
}

.hud .tl {
   top: 88px;
   left: 24px;
   border-right: none;
   border-bottom: none
}

.hud .tr {
   top: 88px;
   right: 24px;
   border-left: none;
   border-bottom: none
}

.hud .bl {
   bottom: 24px;
   left: 24px;
   border-right: none;
   border-top: none
}

.hud .br {
   bottom: 24px;
   right: 24px;
   border-left: none;
   border-top: none
}

.hud-rec {
   position: absolute;
   top: 90px;
   left: 60px;
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--text)
}

.rec-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--rec);
   box-shadow: 0 0 0 0 rgba(255, 71, 71, .6);
   animation: pulse 1.6s infinite
}

.hud-tc {
   position: absolute;
   top: 90px;
   right: 60px;
   color: var(--text)
}

.hud-meta {
   position: absolute;
   bottom: 30px;
   left: 60px;
   display: flex;
   gap: 22px;
   flex-wrap: wrap
}

.hud-meta span {
   opacity: .8
}

.hud-cross {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 26px;
   height: 26px;
   opacity: .4
}

.hud-cross::before,
.hud-cross::after {
   content: "";
   position: absolute;
   background: var(--hairline-strong)
}

.hud-cross::before {
   left: 50%;
   top: 0;
   width: 1px;
   height: 100%;
   transform: translateX(-50%)
}

.hud-cross::after {
   top: 50%;
   left: 0;
   height: 1px;
   width: 100%;
   transform: translateY(-50%)
}

@media(max-width:768px) {
   .hud-rec {
      left: 50px
   }

   .hud-tc,
   .hud-meta {
      display: none
   }

   .hud .corner {
      width: 20px;
      height: 20px
   }
}

@keyframes pulse {
   0% {
      box-shadow: 0 0 0 0 rgba(255, 71, 71, .55)
   }

   70% {
      box-shadow: 0 0 0 9px rgba(255, 71, 71, 0)
   }

   100% {
      box-shadow: 0 0 0 0 rgba(255, 71, 71, 0)
   }
}

.scroll-hint {
   position: absolute;
   bottom: 26px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   font-family: 'JetBrains Mono';
   font-size: .66rem;
   letter-spacing: .2em;
   color: var(--faint);
   text-transform: uppercase;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px
}

.scroll-hint .bar {
   width: 1px;
   height: 34px;
   background: linear-gradient(var(--accent), transparent);
   animation: drop 1.8s var(--ease) infinite
}

@keyframes drop {
   0% {
      transform: scaleY(0);
      transform-origin: top
   }

   50% {
      transform: scaleY(1);
      transform-origin: top
   }

   50.1% {
      transform-origin: bottom
   }

   100% {
      transform: scaleY(0);
      transform-origin: bottom
   }
}

@media(max-width:768px) {
   .scroll-hint {
      display: none
   }
}

/* ===== Manifesto ===== */
.manifesto {
   background: var(--bg-elevated)
}

.manifesto-head {
   margin-bottom: 60px
}

.pain-list {
   display: grid;
   grid-template-columns: 1fr;
   border-top: 1px solid var(--hairline)
}

@media(min-width:768px) {
   .pain-list {
      grid-template-columns: repeat(3, 1fr);
      border-top: none
   }
}

.pain {
   padding: 34px 0;
   border-bottom: 1px solid var(--hairline);
   position: relative
}

@media(min-width:768px) {
   .pain {
      padding: 0 36px;
      border-bottom: none;
      border-left: 1px solid var(--hairline)
   }

   .pain:first-child {
      padding-left: 0;
      border-left: none
   }
}

.pain .num {
   font-family: 'JetBrains Mono';
   font-size: .78rem;
   color: var(--accent);
   display: block;
   margin-bottom: 18px;
   letter-spacing: .1em
}

.pain h3 {
   margin-bottom: 12px
}

.pain p {
   font-size: .95rem;
   color: var(--muted)
}

.manifesto-turn {
   margin-top: 60px;
   padding-top: 46px;
   border-top: 1px solid var(--hairline);
   max-width: 800px
}

.manifesto-turn p {
   font-family: 'Bricolage Grotesque';
   font-weight: 300;
   font-size: clamp(1.45rem, 3vw, 2.3rem);
   line-height: 1.28
}

/* ===== Reels ===== */
.reels {
   overflow: hidden
}

.reels-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 52px
}

.reels-head .lead {
   margin-top: 18px
}

.reel-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px
}

@media(min-width:640px) {
   .reel-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px
   }
}

@media(min-width:1024px) {
   .reel-grid {
      grid-template-columns: repeat(6, 1fr);
      gap: 16px
   }
}

.reel {
   position: relative;
   aspect-ratio: 9/16;
   border-radius: 3px;
   overflow: hidden;
   background: var(--surface);
   border: 1px solid var(--hairline);
   cursor: pointer;
   transition: border-color .4s var(--ease), box-shadow .4s var(--ease)
}

.reel:hover {
   border-color: var(--accent);
   box-shadow: 0 0 24px rgba(252, 189, 30, .12)
}

.reel video,
.reel img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* o toque/clique deve sempre cair no .reel (que abre o lightbox), nunca
      ser capturado pelo próprio <video> — evita que o navegador (comum em
      mobile) intercepte o toque como gesto nativo de play/pause */
   pointer-events: none
}

.reel .vid {
   animation: kenburns 20s ease-in-out infinite alternate
}

.reel:nth-child(2) .vid {
   animation-duration: 26s;
   animation-delay: -4s
}

.reel:nth-child(3) .vid {
   animation-duration: 23s;
   animation-delay: -9s
}

.reel:nth-child(4) .vid {
   animation-duration: 28s;
   animation-delay: -2s
}

.reel:nth-child(5) .vid {
   animation-duration: 21s;
   animation-delay: -12s
}

.reel:nth-child(6) .vid {
   animation-duration: 25s;
   animation-delay: -6s
}

.reel::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 50%, rgba(11, 13, 20, .78) 100%)
}

.reel-label {
   position: absolute;
   left: 12px;
   bottom: 11px;
   z-index: 2;
   font-family: 'JetBrains Mono';
   font-size: .66rem;
   color: var(--text);
   opacity: .92;
   transform: translateY(4px);
   transition: transform .4s var(--ease)
}

.reel:hover .reel-label {
   transform: translateY(0)
}

@keyframes kenburns {
   0% {
      transform: scale(1.04) translate(0, 0)
   }

   100% {
      transform: scale(1.16) translate(-2%, -2.5%)
   }
}

/* ===== Institucionais ===== */
.inst {
   background: var(--bg-elevated)
}

.inst-head {
   margin-bottom: 52px
}

.inst-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 22px
}

@media(min-width:900px) {
   .inst-grid {
      grid-template-columns: 1fr 1fr;
      gap: 26px
   }
}

.inst-card:first-child {
   grid-column: 1/-1
}

.inst-card {
   position: relative;
   aspect-ratio: 16/9;
   border-radius: 4px;
   overflow: hidden;
   border: 1px solid var(--hairline);
   background: var(--surface);
   cursor: pointer;
   transition: border-color .4s var(--ease)
}

.inst-card:hover {
   border-color: var(--hairline-strong)
}

.inst-card video,
.inst-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .8s var(--ease);
   pointer-events: none
}

.inst-card .vid {
   animation: kenburns 26s ease-in-out infinite alternate
}

.inst-card:hover img,
.inst-card:hover video {
   transform: scale(1.04)
}

.inst-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 40%, rgba(11, 13, 20, .82) 100%)
}

.inst-info {
   position: absolute;
   left: 24px;
   bottom: 22px;
   z-index: 2
}

.inst-info .caption {
   margin-bottom: 8px;
   display: block
}

.inst-corner {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 2;
   font-family: 'JetBrains Mono';
   font-size: .62rem;
   letter-spacing: .12em;
   color: var(--text);
   opacity: .7;
   display: flex;
   align-items: center;
   gap: 6px
}

.inst-corner .d {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent)
}

/* ===== Processo ===== */
.proc-head {
   margin-bottom: 58px
}

.steps {
   display: grid;
   grid-template-columns: 1fr;
   margin-bottom: 96px
}

@media(min-width:768px) {
   .steps {
      grid-template-columns: repeat(4, 1fr)
   }
}

.step {
   padding: 30px 0;
   border-top: 1px solid var(--hairline)
}

@media(min-width:768px) {
   .step {
      padding: 0 28px;
      border-top: none
   }

   .step:not(:first-child) {
      border-left: 1px solid var(--hairline)
   }

   .step:first-child {
      padding-left: 0
   }
}

.step-ico {
   margin-bottom: 20px;
   color: var(--muted)
}

.step-ico svg {
   width: 22px;
   height: 22px
}

.step .num {
   font-family: 'JetBrains Mono';
   font-size: .7rem;
   color: var(--faint);
   letter-spacing: .12em;
   display: block;
   margin-bottom: 12px
}

.step h3 {
   margin-bottom: 10px
}

.step p {
   font-size: .92rem;
   color: var(--muted)
}

/* ===== CTA ===== */
.cta-final {
   text-align: center
}

.cta-final .inner {
   background: var(--bg-elevated);
   border: 1px solid var(--hairline);
   border-radius: 6px;
   padding: 64px 28px;
   position: relative;
   overflow: hidden
}

@media(min-width:768px) {
   .cta-final .inner {
      padding: 100px 40px
   }
}

.cta-final h2 {
   margin: 0 auto 22px
}

.cta-final .lead {
   margin: 0 auto 38px
}

.cta-final .hero-actions {
   justify-content: center
}

.glow {
   position: absolute;
   width: 440px;
   height: 440px;
   border-radius: 50%;
   background: radial-gradient(circle, var(--accent-soft), transparent 70%);
   top: -170px;
   left: 50%;
   transform: translateX(-50%);
   pointer-events: none
}

/* ===== Contato premium (2 colunas) ===== */
#contato .inner {
   text-align: left
}

.contact-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr;
   gap: 44px
}

@media(min-width:900px) {
   .contact-grid {
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center
   }
}

.contact-intro .caption {
   display: inline-block;
   margin-bottom: 20px
}

.contact-intro h2 {
   margin: 0 0 20px
}

.contact-intro .lead {
   margin: 0 0 34px
}

.btn-lg {
   padding: 18px 30px;
   font-size: .9rem
}

/* formulário CRM */
.contact-form {
   display: flex;
   flex-direction: column;
   gap: 18px;
   text-align: left
}

.field {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.field label {
   font-family: 'JetBrains Mono', monospace;
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--muted)
}

.field input,
.field textarea {
   width: 100%;
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 1rem;
   color: var(--text);
   background: rgba(244, 242, 236, .04);
   border: 1px solid var(--hairline);
   border-bottom-color: var(--hairline-strong);
   border-radius: 3px;
   padding: 13px 14px;
   transition: border-color .3s var(--ease), background .3s var(--ease)
}

.field textarea {
   resize: vertical;
   min-height: 120px;
   line-height: 1.5
}

.field input::placeholder,
.field textarea::placeholder {
   color: var(--faint)
}

.field input:focus,
.field textarea:focus {
   outline: none;
   border-color: var(--accent);
   background: rgba(252, 189, 30, .05)
}

.contact-form .btn {
   margin-top: 6px;
   justify-content: center
}

.contact-form .btn:disabled {
   cursor: not-allowed;
   opacity: .75
}

.contact-form .btn.is-loading {
   opacity: .7
}

.contact-form .btn.is-success {
   background: #33C481;
   color: #06140C;
   box-shadow: none
}

/* ===== Footer ===== */
footer {
   border-top: 1px solid var(--hairline);
   padding-block: 56px 40px
}

.foot-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 40px
}

@media(min-width:768px) {
   .foot-grid {
      grid-template-columns: 1.4fr 1fr 1fr
   }
}

.foot-brand .logo {
   font-size: 1.4rem;
   margin-bottom: 16px
}

.foot-brand p {
   font-size: .9rem;
   color: var(--muted);
   max-width: 34ch
}

.foot-col h4 {
   font-family: 'JetBrains Mono';
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .14em;
   color: var(--faint);
   margin-bottom: 18px;
   font-weight: 500
}

.foot-col a {
   display: block;
   font-family: 'JetBrains Mono';
   font-size: .82rem;
   color: var(--muted);
   margin-bottom: 12px;
   transition: color .3s var(--ease)
}

.foot-col a:hover {
   color: var(--accent)
}

.foot-bottom {
   margin-top: 52px;
   padding-top: 26px;
   border-top: 1px solid var(--hairline);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   font-family: 'JetBrains Mono';
   font-size: .74rem;
   color: var(--faint)
}

/* cursor */
.cursor,
.cursor-f {
   position: fixed;
   top: 0;
   left: 0;
   border-radius: 50%;
   pointer-events: none;
   z-index: 9999;
   mix-blend-mode: difference
}

.cursor {
   width: 6px;
   height: 6px;
   background: var(--text);
   transform: translate(-50%, -50%)
}

.cursor-f {
   width: 32px;
   height: 32px;
   border: 1px solid rgba(244, 242, 236, .4);
   transform: translate(-50%, -50%);
   transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease)
}

.cursor-f.hover {
   width: 52px;
   height: 52px;
   background: rgba(252, 189, 30, .08)
}

@media(max-width:1024px) {

   .cursor,
   .cursor-f {
      display: none
   }
}

.reveal-block {
   will-change: transform, opacity
}

/* ════════════════════════════════════════════════════════════════
   TARJA DE LOGOS — marquee infinito
═════════════════════════════════════════════════════════════════ */
.marquee-section {
   padding-block: 0;
   /* sem bordas/sombra e fundo transparente: as logos flutuam fundidas ao site */
   background: transparent
}

/* container flex com 2 tracks idênticos lado a lado */
.marquee {
   display: flex;
   overflow: hidden;
   width: 100vw;
   padding-block: 30px;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)
}

/* track único com 12 itens (6 + 6 cópias). gap == padding-right.
   Ao animar até -50%, a 1ª cópia cai exatamente na posição inicial → loop invisível */
/* sem gap/padding: o espaçamento vem do margin-right de cada .marquee-logo */
.marquee-track {
   display: flex;
   flex-shrink: 0;
   animation: scrollMarquee 20s linear infinite
}

.marquee:hover .marquee-track {
   animation-play-state: paused
}

/* largura dinâmica (a imagem dita) + altura uniforme = densidade premium */
.marquee-logo {
   width: auto;
   height: 40px;
   margin-right: 50px;
   display: block;
   object-fit: contain;
   filter: grayscale(100%) opacity(0.5);
   transition: filter .35s var(--ease)
}

.marquee-logo:hover {
   filter: grayscale(0%) opacity(1)
}

/* cada track desliza 100% da própria largura; as 2 idênticas dão o loop contínuo */
@keyframes scrollMarquee {
   from {
      transform: translateX(0)
   }

   to {
      transform: translateX(-100%)
   }
}

@media(prefers-reduced-motion:reduce) {
   .marquee-track {
      animation: none
   }
}

/* ════════════════════════════════════════════════════════════════
   LIGHTBOX DE VÍDEO — modal que abre ao clicar em .reel / .inst-card
═════════════════════════════════════════════════════════════════ */
.lightbox {
   position: fixed;
   inset: 0;
   z-index: 999;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   background: rgba(11, 13, 20, .94);
   backdrop-filter: blur(6px);
   opacity: 0;
   visibility: hidden;
   transition: opacity .35s var(--ease), visibility 0s linear .35s
}

.lightbox.open {
   opacity: 1;
   visibility: visible;
   transition: opacity .35s var(--ease), visibility 0s linear 0s
}

.lightbox-video {
   max-width: min(92vw, 520px);
   max-height: 90vh;
   width: auto;
   height: auto;
   border-radius: 6px;
   background: #000;
   box-shadow: 0 24px 70px rgba(0, 0, 0, .6)
}

.lightbox-close {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   border: 1px solid var(--hairline);
   color: var(--text);
   cursor: pointer;
   transition: background .3s var(--ease), transform .3s var(--ease)
}

.lightbox-close:hover {
   background: rgba(255, 255, 255, .16);
   transform: scale(1.06)
}

.lightbox-close svg {
   width: 20px;
   height: 20px
}

@media(prefers-reduced-motion:reduce) {
   .lightbox, .lightbox.open {
      transition: none
   }
}