/* ===================================================================
   NEXYO · Projetos — stylesheet
   =================================================================== */

:root{
  --ease: cubic-bezier(.2,.7,.3,1);
  --anim-ease: cubic-bezier(.22,1,.36,1);
  --anim-duration: 1100ms;
  --text-mute: rgba(255,255,255,.6);
  --text-soft: rgba(255,255,255,.4);
  --lime: #CBFF00;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }
/* Exceção: modal da LP precisa de scrollbar pra navegar */
.lp-modal__viewport { scrollbar-width: thin !important; -ms-overflow-style: auto !important; }
.lp-modal__viewport::-webkit-scrollbar { display: block !important; width: 8px !important; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
body {
  margin: 0;
  background: #050507;
  color: #f3f3f6;
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em, .serif-italic {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ===================================================================
   Anim system
   =================================================================== */
[data-anim]{
  opacity:0;will-change:transform,opacity,filter;
  transition:opacity var(--anim-duration) var(--anim-ease),
             transform var(--anim-duration) var(--anim-ease),
             filter var(--anim-duration) var(--anim-ease);
}
[data-anim="up"]    { transform: translateY(32px); filter: blur(2px); }
[data-anim="up-sm"] { transform: translateY(16px); filter: blur(1px); }
[data-anim].is-in   { opacity: 1; transform: translateY(0); filter: blur(0); }

[data-anim="letters"]{ opacity:1; transform:none; filter:none; }
[data-anim="letters"] .word{ display:inline-block; white-space:nowrap; }
[data-anim="letters"] .l{
  display:inline-block;opacity:0;
  transform:translateY(0.42em);filter:blur(2px);
  transition:opacity 750ms var(--anim-ease),
             transform 750ms var(--anim-ease),
             filter 750ms var(--anim-ease);
  will-change:transform,opacity,filter;
}
[data-anim="letters"].is-in .l{ opacity:1; transform:translateY(0); filter:blur(0); }

/* ===================================================================
   Topbar (idêntico à home)
   =================================================================== */
.topbar-fixed{
  position:fixed;top:0;left:0;right:0;z-index:90;
  padding:22px max(28px,calc(50vw - 590px));
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  pointer-events:none;
}
.topbar-fixed > *{ pointer-events:auto; }
.topbar-fixed .topbar-right{ display:inline-flex;align-items:center;gap:10px; }
.brand-mark{
  display:inline-flex;align-items:center;height:40px;text-decoration:none;
  transition:opacity .25s var(--ease);
}
.brand-mark:hover{ opacity:.75; }
.brand-mark img{
  display:block;height:22px;width:auto;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.5));
}

/* Lang switcher */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;padding:5px;border-radius:15px;
  background:rgba(18,18,18,.45);
  backdrop-filter:blur(24px) saturate(115%);
  -webkit-backdrop-filter:blur(24px) saturate(115%);
  border:0;
  box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
}
.lang-opt{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px 7px 11px;border-radius:999px;
  background:transparent;border:1px solid transparent;
  color:rgba(255,255,255,.55);
  font-family:"DM Sans",sans-serif;font-size:13px;font-weight:500;letter-spacing:.01em;
  cursor:pointer;
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.lang-opt:hover{ color:rgba(255,255,255,.85); }
.lang-opt .lang-flag{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:14px;border-radius:3px;overflow:hidden;flex-shrink:0;
  filter:saturate(.85);transition:filter .25s var(--ease);
}
.lang-opt .lang-flag svg{ display:block;width:100%;height:100%; }
.lang-opt.is-active{
  color:var(--lime);background:rgba(203,255,0,.08);border-color:rgba(203,255,0,.42);
  box-shadow:inset 0 0 0 1px rgba(203,255,0,.18),0 0 22px rgba(203,255,0,.18);
}
.lang-opt.is-active .lang-flag{ filter:saturate(1.1); }
.lang-opt:active{ transform:scale(.96); }

/* Menu shell (squircle estilo midu — idêntico à home) */
.menu-shell-backdrop{
  position:fixed;inset:0;z-index:90;background:rgba(5,5,5,.55);
  backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);
  opacity:0;visibility:hidden;
  transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility .45s;pointer-events:none;
}
body.menu-shell-open .menu-shell-backdrop{ opacity:1;visibility:visible;pointer-events:auto; }
.menu-shell{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:92;
  background:rgba(21,21,21,.78);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:0;border-radius:15px;
  box-shadow:0 14px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  width:fit-content;max-width:calc(100vw - 32px);
  transition:width .85s cubic-bezier(.19,1,.22,1),border-radius .7s cubic-bezier(.19,1,.22,1),box-shadow .6s cubic-bezier(.19,1,.22,1),background .5s var(--ease);
}
.menu-shell.is-open{
  border-radius:20px;
  width:min(420px,calc(100vw - 32px));
  box-shadow:0 32px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
}
.menu-shell__trigger{
  position:relative;display:flex;align-items:center;gap:12px;
  width:auto;height:40px;padding:0 18px;
  background:transparent;border:0;color:#fff;font-family:inherit;
  font-size:14.5px;font-weight:400;letter-spacing:-0.01em;line-height:1;
  cursor:pointer;text-align:left;border-radius:15px;
  transition:background .35s var(--ease),border-radius .7s cubic-bezier(.19,1,.22,1);
}
.menu-shell.is-open .menu-shell__trigger{ border-radius:18px;width:100%; }
.menu-shell__trigger:hover{ background:rgba(255,255,255,.03); }
.menu-shell__trigger:active{ transform:scale(.99); }
.menu-shell__icon{
  position:relative;display:inline-grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:2.5px;width:14px;height:14px;flex-shrink:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.menu-shell__icon i{
  display:block;width:100%;height:100%;background:#fff;border-radius:1.5px;
  transition:transform .45s cubic-bezier(.22,1,.36,1),background .35s var(--ease);
}
.menu-shell.is-open .menu-shell__icon{ transform:rotate(90deg); }
.menu-shell__label{
  position:relative;display:inline-block;overflow:hidden;height:1em;min-width:46px;line-height:1;
}
.menu-shell__txt{
  display:inline-block;line-height:1;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s var(--ease);
}
.menu-shell__txt--open{ transform:translateY(0);opacity:1; }
.menu-shell__txt--close{ position:absolute;top:0;left:0;transform:translateY(110%);opacity:0; }
.menu-shell.is-open .menu-shell__txt--open{ transform:translateY(-110%);opacity:0; }
.menu-shell.is-open .menu-shell__txt--close{ transform:translateY(0);opacity:1; }
.menu-shell__slots{
  display:inline-flex;align-items:center;color:rgba(255,255,255,.55);
  font-size:13.5px;font-weight:400;letter-spacing:-0.01em;line-height:1;
  padding-left:14px;margin-left:14px;white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.08);transition:opacity .35s var(--ease);
}
.menu-shell.is-open .menu-shell__slots{ opacity:0;pointer-events:none; }
.menu-shell__expand{
  display:grid;grid-template-rows:0fr;overflow:hidden;height:0;
  transition:grid-template-rows .85s cubic-bezier(.19,1,.22,1),height 0s linear .85s;
}
.menu-shell.is-open .menu-shell__expand{
  grid-template-rows:1fr;height:auto;
  transition:grid-template-rows .85s cubic-bezier(.19,1,.22,1),height 0s linear 0s;
}
.menu-shell__expand-inner{ overflow:hidden;min-height:0;padding:0 8px 14px; }
.menu-shell__list{ display:flex;flex-direction:column;padding:2px 0 8px; }
.menu-shell__item{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px;border-radius:14px;color:#fff;text-decoration:none;
  opacity:0;transform:translateY(10px);
  transition-property:background,padding,opacity,transform;
  transition-duration:.25s,.35s,.45s,.55s;
  transition-timing-function:var(--ease),var(--ease),var(--ease),cubic-bezier(.22,1,.36,1);
}
.menu-shell__item + .menu-shell__item{ border-top:1px solid rgba(255,255,255,.05); }
.menu-shell.is-open .menu-shell__item{
  opacity:1;transform:none;transition-delay:calc(var(--i,0) * 50ms + 220ms);
}
.menu-shell__item:hover{
  background:linear-gradient(270deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.04) 100%);
  padding-left:18px;
}
.menu-shell__item-label{ font-size:22px;font-weight:500;letter-spacing:-0.025em;line-height:1; }
.menu-shell__item-thumb{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.65);flex-shrink:0;
  transition:transform .4s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.menu-shell__item-thumb svg{ width:22px;height:22px;display:block; }
.menu-shell__item:hover .menu-shell__item-thumb{
  transform:scale(1.06);border-color:rgba(255,255,255,.18);color:#fff;
}
.menu-shell__socials{
  padding:14px 6px 14px;margin:4px 6px 8px;
  border-top:1px solid rgba(255,255,255,.05);
  display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .55s cubic-bezier(.22,1,.36,1);
}
.menu-shell.is-open .menu-shell__socials{
  opacity:1;transform:none;transition-delay:calc(var(--i,6) * 50ms + 240ms);
}
.menu-shell__socials-label{ font-size:12px;letter-spacing:-0.02em;color:rgba(255,255,255,.4); }
.menu-shell__socials-list{ display:flex;flex-wrap:wrap;gap:14px; }
.menu-shell__socials-list a{
  font-size:16px;letter-spacing:-0.02em;color:rgba(255,255,255,.85);
  text-decoration:none;transition:color .2s var(--ease);
}
.menu-shell__socials-list a:hover{ color:var(--lime); }

body.menu-shell-open .topbar-fixed .lang-switch,
body.menu-shell-open .topbar-fixed .topbar-wa,
body.menu-shell-open .topbar-fixed .topbar-social,
body.menu-shell-open .proj-back{
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
}

/* MOBILE: header só com logo + menu. PT/EN + WA migram pra dentro do menu */
.menu-shell__actions{display:none}
@media (max-width:768px){
  .topbar-fixed{padding:14px 28px}
  .topbar-fixed .topbar-right{display:none !important}
  .menu-shell{
    position:fixed !important;top:14px !important;left:auto !important;
    right:28px !important;transform:none !important;
    width:102px !important;max-width:none !important;min-width:0 !important;
  }
  .menu-shell.is-open{
    width:calc(100vw - 56px) !important;left:auto !important;right:28px !important;transform:none !important;
  }
  .menu-shell__slots{ display:none !important; }
  .menu-shell__trigger{
    height:40px !important;padding:0 14px !important;font-size:13.5px !important;
    gap:10px !important;width:100% !important;white-space:nowrap;justify-content:center !important;
  }
  .menu-shell.is-open .menu-shell__trigger{ justify-content:flex-start !important;padding:0 18px !important; }
  .menu-shell__label{ min-width:0 !important; }
  /* Actions (PT/EN + WA) dentro do menu mobile */
  .menu-shell__actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 6px 16px;border-top:1px solid rgba(255,255,255,.06);margin-top:12px;line-height:1}
  .menu-shell__actions .lang-switch--menu{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 4px;border-radius:999px;background:rgba(18,18,18,.6);border:1px solid rgba(255,255,255,.1);backdrop-filter:none;-webkit-backdrop-filter:none;box-sizing:border-box}
  .menu-shell__actions .lang-opt{position:relative;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:transparent;border:1px solid transparent;color:rgba(255,255,255,.55);font-family:"DM Sans",sans-serif;font-size:13px;font-weight:500;letter-spacing:.01em;line-height:1;cursor:pointer;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);box-sizing:border-box}
  .menu-shell__actions .lang-opt:hover{color:rgba(255,255,255,.85)}
  .menu-shell__actions .lang-opt.is-active{color:var(--lime,#CBFF00);background:rgba(203,255,0,.08);border-color:rgba(203,255,0,.42);box-shadow:inset 0 0 0 1px rgba(203,255,0,.18),0 0 22px rgba(203,255,0,.18)}
  .menu-shell__actions .lang-flag{display:inline-flex;align-items:center;justify-content:center;width:20px;height:14px;border-radius:3px;overflow:hidden;flex-shrink:0}
  .menu-shell__actions .lang-flag svg{display:block;width:100%;height:100%}
  .menu-shell__actions .topbar-wa--menu{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;text-decoration:none;transition:transform .25s var(--ease),filter .25s var(--ease);box-sizing:border-box;padding:0}
  .menu-shell__actions .topbar-wa--menu svg{display:block;width:40px;height:40px}
  .menu-shell__actions .topbar-wa--menu:hover{transform:translateY(-2px) scale(1.05);filter:drop-shadow(0 6px 18px rgba(5,255,98,.35))}
}
/* Stagger reveal */
.menu-shell__actions{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .55s cubic-bezier(.22,1,.36,1)}
.menu-shell.is-open .menu-shell__actions{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 50ms + 220ms)}
@media (max-width:640px){
  .menu-shell__item{ padding:12px 12px; }
  .menu-shell__item-label{ font-size:19px; }
  .menu-shell__item-thumb{ width:38px;height:38px;border-radius:10px; }
  .menu-shell{ right:20px !important; }
  .menu-shell.is-open{ width:calc(100vw - 40px) !important;right:20px !important; }
  .topbar-fixed{ padding:14px 20px !important;column-gap:8px; }
  .brand-mark img{ height:18px; }
}

/* Social icons (IG / LI) */
.topbar-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;text-decoration:none;flex-shrink:0;
  background:rgba(18,18,18,.45);
  backdrop-filter:blur(24px) saturate(115%);
  -webkit-backdrop-filter:blur(24px) saturate(115%);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.78);
  box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.topbar-social svg{ width:18px;height:18px;display:block; }
.topbar-social:hover{
  color:#fff;border-color:rgba(255,255,255,.2);
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 12px 36px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12),0 0 22px rgba(140,107,255,.3);
}

/* WhatsApp btn */
.topbar-wa{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;text-decoration:none;flex-shrink:0;
  transition:transform .25s var(--ease),filter .25s var(--ease);
}
.topbar-wa svg{ display:block;width:40px;height:40px; }
.topbar-wa:hover{ transform:translateY(-2px) scale(1.05);filter:drop-shadow(0 6px 18px rgba(5,255,98,.35)); }

@media (max-width:560px){
  .topbar-social{ display:none; }
}

@media (max-width:980px){
  .topbar-fixed{ padding:14px 28px; }
}
@media (max-width:640px){
  .lang-switch{ padding:4px;gap:1px; }
  .lang-opt{ padding:5px 9px 5px 8px;font-size:11.5px;gap:5px; }
  .lang-opt .lang-flag{ width:16px;height:11px; }
  .topbar-fixed{ padding:14px 20px;column-gap:8px; }
  .brand-mark img{ height:18px; }
}
@media (max-width:380px){
  .lang-switch .lang-code{ display:none; }
  .lang-opt{ padding:5px 7px; }
}

/* ===================================================================
   Back link — link minimal "← Voltar" no topo da página de projeto
   =================================================================== */
.proj-back{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px 10px;
  color: rgba(255,255,255,.75);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: color .3s var(--ease), gap .35s var(--ease);
  z-index: 5;
  flex-shrink: 0;
}
.proj-back__arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .4s var(--ease);
}
.proj-back__arrow svg{
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.proj-back__label{
  position: relative;
  display: inline-block;
  line-height: 1.2;
}
.proj-back__label::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  opacity: .28;
  transition: opacity .35s var(--ease), background .35s var(--ease);
}
.proj-back:hover{
  color: #fff;
  gap: 14px;
}
.proj-back:hover .proj-back__arrow{
  transform: translateX(-4px);
}
.proj-back:hover .proj-back__label::after{
  opacity: 1;
  background: #8c6bff;
}
@media (max-width: 640px){
  .proj-back{ font-size: 13px; }
  .proj-hero__top{ gap: 12px; }
}

/* ===================================================================
   Hero
   =================================================================== */
.proj-hero {
  position: relative;
  padding: 140px 0 120px;
  overflow: hidden;
}
.proj-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.proj-hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 70%;
  background:
    radial-gradient(60% 70% at 30% 20%, rgba(124, 92, 255, .22), transparent 60%),
    radial-gradient(50% 60% at 80% 40%, rgba(89, 67, 220, .14), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.proj-hero .container { position: relative; z-index: 1; }

.proj-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #cfcfdc;
}
.proj-tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8c6bff;
  box-shadow: 0 0 12px rgba(140,107,255,.65);
  animation: proj-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes proj-dot-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .55; transform: scale(.78); }
}

.proj-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(40px, 8.4vw, 124px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0 0 56px;
  color: #fafafd;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
@media (max-width: 640px){
  .proj-title{ font-size: clamp(34px, 11vw, 56px); line-height: 1.02; margin-bottom: 36px; letter-spacing: -.02em; }
}
@media (max-width: 380px){
  .proj-title{ font-size: 30px; }
}
.proj-title em,
.proj-title em .l {
  color: #b9a3ff;
  background: linear-gradient(110deg, #c8b3ff 0%, #8c6bff 60%, #6a4dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proj-title .stroke { color: #fafafd; }
.proj-title .stroke .l { color: #fafafd; }

/* Overview grid — meta empilhada à esquerda, desc + capa à direita */
.proj-overview {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 72px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.08);
  align-items: start;
}
.proj-overview__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.proj-overview__meta .meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.proj-overview__meta .meta-item:first-child { padding-top: 6px; }
.proj-overview__meta .label {
  font-size: 13px;
  letter-spacing: -.005em;
  color: #8a8a9a;
  font-weight: 400;
}
.proj-overview__meta .value {
  font-size: 17px;
  color: #fafafd;
  font-weight: 500;
  letter-spacing: -.01em;
}
.proj-overview__meta .meta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fafafd;
  text-decoration: none;
  position: relative;
  transition: color .3s var(--ease), gap .35s var(--ease);
}
.proj-overview__meta .meta-link::after {
  content: "";
  position: absolute;
  left: 0; right: 20px;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: .25;
  transition: opacity .35s var(--ease), background .35s var(--ease);
}
.proj-overview__meta .meta-link svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
  transition: transform .4s var(--ease);
}
.proj-overview__meta .meta-link:hover {
  color: #c8b3ff;
  gap: 11px;
}
.proj-overview__meta .meta-link:hover::after {
  opacity: 1;
  background: #8c6bff;
}
.proj-overview__meta .meta-link:hover svg {
  transform: translate(3px, -3px);
}
.proj-overview__cta {
  margin-top: 32px;
}
.proj-overview__right {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 720px;
}
.proj-overview__desc p {
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.55;
  color: #d6d6df;
  margin: 0;
  max-width: 100%;
  letter-spacing: -.005em;
}
.proj-overview__cover {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0d0d13;
  width: 100%;
  align-self: stretch;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.05);
}
.proj-overview__cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===================================================================
   Cover image (same as home thumbnail)
   =================================================================== */
.proj-cover {
  padding: 60px 0 100px;
}
.proj-cover__wrap {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
.proj-cover__inner {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #0d0d13;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.05);
}
.proj-cover__inner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===================================================================
   Desafio / Solução sections
   =================================================================== */
.proj-sect {
  padding: 80px 0;
  border-top: 1px solid rgba(255,255,255,.05);
}
.proj-sect__grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 56px;
  align-items: start;
}
.proj-sect__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(140,107,255,.1);
  border: 1px solid rgba(140,107,255,.25);
  color: #b9a3ff;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}
.proj-sect__head::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #8c6bff;
  box-shadow: 0 0 10px rgba(140,107,255,.7);
}
.proj-sect__title {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.025em;
  margin: 0;
  color: #fafafd;
}
.proj-sect__title em,
.proj-sect__title em .l {
  color: #b9a3ff;
  background: linear-gradient(110deg, #c8b3ff 0%, #8c6bff 60%, #6a4dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proj-sect__text {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: #c2c2d0;
  margin: 0;
  max-width: 60ch;
}

/* ===================================================================
   LP frame — hover scroll, click to open
   =================================================================== */
.proj-fullshot {
  padding: 60px 0 120px;
}
.proj-fullshot__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  color: #8a8a9a;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.proj-fullshot__label .hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b9a3ff;
}
.proj-fullshot__label .hint svg { width: 14px; height: 14px; }

.proj-lp-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background: #0d0d13;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.05);
  isolation: isolate;
}
.proj-lp-frame__img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.proj-lp-frame:hover .proj-lp-frame__img {
  transition: transform var(--scroll-duration, 6s) linear;
  transform: translateY(var(--scroll-target, 0px));
}
.proj-lp-frame__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,7,0) 70%, rgba(5,5,7,.5) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s ease;
  z-index: 2;
}
.proj-lp-frame:hover .proj-lp-frame__overlay { opacity: 0; }

.proj-lp-frame__cta {
  position: absolute;
  bottom: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(5,5,7,.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  color: #fafafd;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  z-index: 3;
  transition: transform .45s ease, background .45s ease;
}
.proj-lp-frame__cta svg { width: 14px; height: 14px; transition: transform .45s ease; }
.proj-lp-frame:hover .proj-lp-frame__cta {
  background: rgba(140,107,255,.95);
  border-color: transparent;
}
.proj-lp-frame:hover .proj-lp-frame__cta svg { transform: translate(3px,-3px); }

/* ===================================================================
   LP Modal (lightbox)
   =================================================================== */
.lp-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(5,5,7,.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.lp-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.lp-modal__backdrop {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
}
.lp-modal__shell {
  position: relative;
  width: min(1100px, 100%);
  height: min(92vh, 1200px);
  background: #0d0d13;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.98);
  transition: transform .45s var(--ease);
}
.lp-modal.is-open .lp-modal__shell {
  transform: translateY(0) scale(1);
}
.lp-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  flex-shrink: 0;
}
.lp-modal__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cfcfdc;
  font-weight: 500;
}
.lp-modal__title .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8c6bff;
  box-shadow: 0 0 12px rgba(140,107,255,.7);
}
.lp-modal__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #f3f3f6;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.lp-modal__btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.lp-modal__btn svg { width: 14px; height: 14px; }
.lp-modal__close {
  width: 38px; height: 38px;
  padding: 0;
}
/* Tabs bar (multi-page LP) */
.lp-modal__tabs {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.lp-modal__tabs::-webkit-scrollbar { display: none; }
.lp-modal.has-tabs .lp-modal__tabs { display: flex; }
.lp-modal__tab {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,.6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.lp-modal__tab:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.04); }
.lp-modal__tab.is-active {
  color: #fff;
  background: rgba(140,107,255,.15);
  border-color: rgba(140,107,255,.4);
  box-shadow: 0 0 18px rgba(140,107,255,.18);
}

.lp-modal__viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(140,107,255,.5) transparent;
  background: #0a0a0e;
}
.lp-modal__viewport::-webkit-scrollbar { width: 8px; }
.lp-modal__viewport::-webkit-scrollbar-track { background: transparent; }
.lp-modal__viewport::-webkit-scrollbar-thumb {
  background: rgba(140,107,255,.4);
  border-radius: 4px;
}
.lp-modal__viewport::-webkit-scrollbar-thumb:hover { background: rgba(140,107,255,.6); }
.lp-modal__viewport img {
  width: 100%;
  height: auto;
  display: block;
}
.lp-modal__loading {
  position: absolute;
  inset: 60px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a8a9a;
  font-size: 13px;
  letter-spacing: .04em;
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s ease;
}
.lp-modal.is-loaded .lp-modal__loading { opacity: 0; }
.lp-modal__loading::before {
  content: "";
  width: 18px; height: 18px;
  margin-right: 10px;
  border-radius: 50%;
  border: 2px solid rgba(140,107,255,.25);
  border-top-color: #8c6bff;
  animation: lp-spin .8s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

body.lp-modal-open { overflow: hidden; }

@media (max-width: 700px) {
  .lp-modal { padding: 16px; }
  .lp-modal__shell { height: min(94vh, 100%); border-radius: 16px; }
  .lp-modal__bar { padding: 10px 12px 10px 16px; }
  .lp-modal__title { font-size: 11px; }
  .lp-modal__btn { height: 34px; padding: 0 12px; font-size: 12px; }
  .lp-modal__close { width: 34px; height: 34px; padding: 0; }
}

/* ===================================================================
   Related projects
   =================================================================== */
.proj-related {
  padding: 100px 0 60px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.proj-related__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 56px;
  flex-wrap: wrap;
}
.proj-related h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -.025em;
  margin: 0;
  line-height: 1.05;
}
/* Botão "Ver todos os projetos" — minimal link com underline + seta diagonal */
.proj-related__see-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px 8px;
  color: rgba(255,255,255,.75);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: color .3s var(--ease), gap .35s var(--ease);
  background: none;
  border: 0;
  box-shadow: none;
}
.proj-related__see-all__label {
  position: relative;
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  box-shadow: none;
  font: inherit;
  color: inherit;
  line-height: 1.2;
}
.proj-related__see-all__label::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: .22;
  transform-origin: left;
  transition: opacity .35s var(--ease), background .35s var(--ease);
}
.proj-related__see-all__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: none;
  border: 0;
  box-shadow: none;
  flex-shrink: 0;
  overflow: visible;
  transition: transform .4s var(--ease);
}
.proj-related__see-all__arrow svg {
  position: relative;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.proj-related__see-all:hover {
  color: #fff;
  gap: 14px;
}
.proj-related__see-all:hover .proj-related__see-all__label::after {
  opacity: 1;
  background: #8c6bff;
}
.proj-related__see-all:hover .proj-related__see-all__arrow {
  transform: translate(4px, -4px);
}
@media (max-width: 600px) {
  .proj-related__head { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.proj-related h2 em,
.proj-related h2 em .l {
  color: #b9a3ff;
  background: linear-gradient(110deg, #c8b3ff 0%, #8c6bff 60%, #6a4dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proj-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.related-card {
  position: relative;
  display: block;
  background: #0f0f0f;
  border: 1px solid #1e1e1e;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 1.5;
  isolation: isolate;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), border-color .45s var(--ease), box-shadow .5s var(--ease);
}
.related-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 26px 56px rgba(0,0,0,.55);
}
.related-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0c0c0d;
}
.related-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1), filter .55s var(--ease);
}
.related-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.85));
  pointer-events: none;
  z-index: 1;
}
.related-card:hover .related-card__media img {
  transform: scale(1.05);
  filter: saturate(.85) brightness(.9);
}
.related-card__marquee {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  background: rgba(20,20,20,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
  width: 24px;
  overflow: hidden;
  opacity: 0;
  transform: translate(-6px, -4px);
  transition:
    width .65s cubic-bezier(.22,.61,.36,1),
    padding .55s cubic-bezier(.22,.61,.36,1),
    opacity .35s var(--ease),
    transform .45s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.related-card:hover .related-card__marquee {
  opacity: 1;
  transform: translate(0, 0);
  width: 138px;
  padding: 0 5px 0 15px;
}
.related-card__marquee-track {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .35s var(--ease) .25s, transform .5s var(--ease) .22s;
  padding-right: 8px;
  animation: none;
  display: inline-flex;
}
.related-card__marquee-track span { display: none; }
.related-card__marquee-track::before {
  content: "Ver projeto";
  display: inline-block;
}
.related-card:hover .related-card__marquee-track {
  opacity: 1;
  transform: translateX(0);
}
.related-card__marquee::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--lime, #CBFF00);
  color: #0a0a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0;
  line-height: 1;
  box-shadow: 0 0 0 0 rgba(203,255,0,0);
  transition:
    left .65s cubic-bezier(.22,.61,.36,1),
    width .65s cubic-bezier(.22,.61,.36,1),
    height .65s cubic-bezier(.22,.61,.36,1),
    font-size .25s var(--ease) .3s,
    box-shadow .45s var(--ease) .2s;
}
.related-card:hover .related-card__marquee::after {
  left: calc(100% - 28px);
  width: 24px;
  height: 24px;
  font-size: 11px;
  box-shadow: 0 0 12px rgba(203,255,0,.28);
}
.related-card__meta { display: contents; }
.related-card__cat {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px 9px;
  border-radius: 999px;
  background: rgba(20,20,20,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  transition: transform .45s var(--ease), background .45s var(--ease);
}
.related-card:hover .related-card__cat {
  background: rgba(30,30,30,.65);
  border-color: rgba(255,255,255,.22);
}
.related-card__name {
  position: absolute;
  bottom: 26px;
  left: 28px;
  right: 28px;
  z-index: 4;
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.015em;
  text-transform: none;
  color: #fff;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.related-card:hover .related-card__name {
  color: #fff;
}
@media (max-width: 900px) {
  .related-card__name { bottom: 22px; left: 22px; right: 22px; font-size: 20px; }
  .related-card__cat { top: 16px; right: 16px; font-size: 11px; padding: 6px 12px 7px; }
}

/* ===================================================================
   CTA + Footer
   =================================================================== */
.proj-cta {
  padding: 100px 0 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.proj-cta::before {
  content: "";
  position: absolute;
  inset: auto -20% -50% -20%;
  height: 100%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(140,107,255,.18), transparent 70%);
  pointer-events: none;
}
.proj-cta .container { position: relative; z-index: 1; }
.proj-cta h2 {
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 500;
  letter-spacing: -.025em;
  margin: 0 0 18px;
  line-height: 1.05;
  color: #fafafd;
}
.proj-cta h2 em,
.proj-cta h2 em .l {
  background: linear-gradient(110deg, #c8b3ff 0%, #8c6bff 60%, #6a4dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proj-cta p {
  font-size: 18px;
  color: #c2c2d0;
  margin: 0 0 36px;
}
/* CTA pill (cópia exata do hero da home) */
.cta-pill{
  display:inline-flex;
  align-items:stretch;
  flex-direction:row-reverse;
  gap:0;padding:0;
  font-size:14px;letter-spacing:0;color:#fff;
  transition:filter .35s var(--ease),transform .35s var(--ease);
  cursor:pointer;text-decoration:none;position:relative;isolation:isolate;
}
.cta-pill__label{
  position:relative;display:inline-flex;align-items:center;
  background:linear-gradient(180deg,#7256FF 0%,#5535D9 100%);
  color:#fff;padding:0 28px;height:48px;border-radius:999px;
  font-family:"DM Sans",sans-serif;font-style:normal;font-weight:500;
  font-size:15px;line-height:1;letter-spacing:-0.005em;
  transition:padding .35s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.04);
}
.cta-pill__arrow{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:0 999px 999px 999px;
  background:linear-gradient(180deg,#7256FF 0%,#5535D9 100%);
  border:0;color:#fff;overflow:hidden;flex-shrink:0;
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18);
}
.cta-pill__arrow svg{
  position:absolute;width:16px;height:16px;stroke:#fff;stroke-width:2.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
/* GLOW "LAMP" — purple light embaixo do botão */
.cta-pill::after{
  content:"";position:absolute;inset:-22px -18px -42px;border-radius:999px;
  background:radial-gradient(ellipse 70% 95% at 50% 70%,rgba(122,92,255,.65) 0%,rgba(122,92,255,.32) 30%,rgba(122,92,255,.08) 55%,transparent 75%);
  opacity:.85;z-index:-1;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
  filter:blur(24px);pointer-events:none;
}
.cta-pill:hover::after{opacity:1;transform:scale(1.05)}
.cta-pill:hover .cta-pill__label{padding-left:34px;background:linear-gradient(180deg,#8870FF 0%,#6248E0 100%)}
.cta-pill:hover .cta-pill__arrow{background:linear-gradient(180deg,#8870FF 0%,#6248E0 100%)}
.cta-pill:hover .cta-pill__arrow svg{animation:cta-send-right .6s var(--anim-ease)}
@keyframes cta-send-right{
  0%  {transform:translate(0,0);opacity:1}
  45% {transform:translate(20px,-20px);opacity:0}
  46% {transform:translate(-20px,20px);opacity:0}
  100%{transform:translate(0,0);opacity:1}
}
.cta-pill--lg .cta-pill__label{padding:0 32px;height:56px;font-size:17px}
.cta-pill--lg .cta-pill__arrow{width:56px;height:56px}
.cta-pill--lg .cta-pill__arrow svg{width:18px;height:18px}
@media (max-width:640px){
  .cta-pill__label{padding:0 22px;height:44px;font-size:14px}
  .cta-pill__arrow{width:44px;height:44px}
  .cta-pill--lg .cta-pill__label{padding:0 26px;height:50px;font-size:15.5px}
  .cta-pill--lg .cta-pill__arrow{width:50px;height:50px}
  .cta-pill--lg .cta-pill__arrow svg{width:16px;height:16px}
}

/* ===================================================================
   Project Strip — assinatura estilo duties.xyz
   =================================================================== */
.proj-strip{
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 26px max(28px, calc(50vw - 590px));
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1fr;
  gap: 32px;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: -.005em;
  text-transform: none;
  color: rgba(255,255,255,.75);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.proj-strip__col{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.proj-strip__col--right{ text-align: right; align-items: flex-end; }
.proj-strip__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.01em;
}
.proj-strip__brand-dot{
  color: var(--lime, #CBFF00);
  font-size: 10px;
  line-height: 1;
}
.proj-strip__brand-suffix{
  color: rgba(255,255,255,.55);
  font-weight: 400;
  font-size: 13px;
}
.proj-strip__sub{
  color: rgba(255,255,255,.5);
  font-size: 12.5px;
}
.proj-strip__label{
  color: rgba(255,255,255,.4);
  margin-right: 8px;
  font-weight: 500;
}
.proj-strip__list-item{
  color: rgba(255,255,255,.82);
  display: inline-flex;
  gap: 10px;
}
.proj-strip__list-item::before{
  content: "—";
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
}
.proj-strip__live{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 500;
}
.proj-strip__live::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime, #CBFF00);
  box-shadow: 0 0 8px rgba(203,255,0,.55);
  animation: proj-strip-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes proj-strip-pulse{
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.78); }
}
.proj-strip__time{
  color: #fff;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 980px){
  .proj-strip{ padding: 22px 28px; }
}
@media (max-width: 780px){
  .proj-strip{
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 56px;
  }
  .proj-strip__col--right{ text-align: left; align-items: flex-start; }
}

/* ===================================================================
   Site Footer (idêntico à home)
   =================================================================== */
.site-footer{
  position:relative;z-index:1;background:#050505;
  border-top:1px solid rgba(255,255,255,.06);
  padding:80px 0 32px;overflow:hidden;
}
/* Aurora orbs flutuando atrás */
.site-footer::before,
.site-footer::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
.site-footer::before{
  width:640px;height:640px;
  top:8%;left:-14%;
  background:radial-gradient(circle,rgba(122,92,255,.22),transparent 70%);
  animation:footer-orb-1 26s ease-in-out infinite alternate;
}
.site-footer::after{
  width:740px;height:740px;
  bottom:-18%;right:-12%;
  background:radial-gradient(circle,rgba(89,67,220,.16),transparent 70%);
  animation:footer-orb-2 34s ease-in-out infinite alternate;
}
@keyframes footer-orb-1{
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(140px,-60px) scale(1.15); }
}
@keyframes footer-orb-2{
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(-120px,80px) scale(.92); }
}
.site-footer > .container{ position:relative;z-index:1; }
.site-footer__top{
  display:grid;grid-template-columns:1.2fr 2fr;gap:64px;align-items:start;
}
.site-footer__brand{
  display:flex;flex-direction:column;gap:20px;max-width:340px;
}
.site-footer__logo img{
  height:26px;width:auto;display:block;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.site-footer__tagline{
  font-size:15px;color:var(--text-mute);line-height:1.55;margin:0;
}
.site-footer__social{ display:flex;gap:10px;margin-top:4px; }
.site-footer__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.7);text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.site-footer__social a:hover{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);
  color:#fff;transform:translateY(-1px);
}
.site-footer__social svg{ width:18px;height:18px; }
.site-footer__cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
.site-footer__col{ display:flex;flex-direction:column;gap:12px; }
.site-footer__col h4{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-soft);margin:0 0 6px;
  font-family:"DM Mono",ui-monospace,monospace;
}
.site-footer__col a{
  font-size:14.5px;color:rgba(255,255,255,.78);text-decoration:none;
  transition:color .2s var(--ease),padding-left .3s var(--ease);
}
.site-footer__col a:hover{ color:var(--lime);padding-left:4px; }
.site-footer__big{
  display:block;
  width:min(86%,960px);
  aspect-ratio:1745 / 460;
  margin:72px auto 36px;
  background:linear-gradient(0deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.12) 35%,
    rgba(255,255,255,.04) 70%,
    rgba(255,255,255,.01) 100%);
  -webkit-mask:url(/img/nexyo-wordmark.svg) center / contain no-repeat;
          mask:url(/img/nexyo-wordmark.svg) center / contain no-repeat;
  user-select:none;pointer-events:none;
  opacity:.92;
  font-size:0;
  animation:footer-big-shimmer 8s ease-in-out infinite alternate;
}
@keyframes footer-big-shimmer{
  0%   { opacity:.78; }
  100% { opacity:1; }
}
.site-footer__bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);
  font-size:13px;color:var(--text-soft);
}
.site-footer__legal{ opacity:.7; }
@media (max-width:780px){ .site-footer__top{ grid-template-columns:1fr;gap:48px; } }
@media (max-width:560px){
  .site-footer__cols{ grid-template-columns:repeat(2,1fr);gap:28px; }
  .site-footer__big{ margin:48px 0 24px; }
  .site-footer__bottom{ justify-content:center;text-align:center; }
}

/* ===================================================================
   Listing — /projetos/ index
   =================================================================== */
.list-hero {
  padding: 170px 0 60px;
  position: relative;
  overflow: hidden;
}
.list-hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 80%;
  background:
    radial-gradient(60% 70% at 30% 20%, rgba(124, 92, 255, .22), transparent 60%),
    radial-gradient(50% 60% at 80% 40%, rgba(89, 67, 220, .14), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.list-hero .container { position: relative; z-index: 1; }
.list-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #cfcfdc;
  margin-bottom: 28px;
}
.list-hero__tag .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8c6bff;
  box-shadow: 0 0 12px rgba(140,107,255,.65);
  animation: proj-dot-pulse 2.4s ease-in-out infinite;
}
.list-hero h1 {
  font-size: clamp(38px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0 0 24px;
  color: #fafafd;
  max-width: 18ch;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
@media (max-width: 640px){
  .list-hero h1{ font-size: clamp(32px, 10vw, 52px); line-height: 1.05; max-width: none; letter-spacing: -.02em; }
  .list-hero h1 br{ display: none; }
}
@media (max-width: 380px){
  .list-hero h1{ font-size: 28px; }
}
.list-hero h1 em,
.list-hero h1 em .l {
  background: linear-gradient(110deg, #c8b3ff 0%, #8c6bff 60%, #6a4dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.list-hero h1 .stroke,
.list-hero h1 .stroke .l { color: #fafafd; }
.list-hero p {
  font-size: 18px;
  color: #c2c2d0;
  margin: 0;
  max-width: 60ch;
}

.list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1320px;
  margin: 40px auto 0;
  padding: 0 28px 100px;
}
/* Card estilo home (.work) — imagem fill + cat pill canto sup. dir + nome canto inf. esq. */
.list-card {
  position: relative;
  display: block;
  background: #0f0f0f;
  border: 1px solid #1e1e1e;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 1.18;
  isolation: isolate;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), border-color .45s var(--ease), box-shadow .5s var(--ease);
}
.list-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 28px 60px rgba(0,0,0,.55);
}
.list-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0c0c0d;
}
.list-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1), filter .55s var(--ease);
}
.list-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.85));
  pointer-events: none;
  z-index: 1;
}

/* HOVER LIMPO: zoom suave + dessaturação leve + arrow flutuando no topo-direito */
.list-card:hover .list-card__media img {
  transform: scale(1.05);
  filter: saturate(.85) brightness(.9);
}

/* Marquee removido — usar elemento como overlay arrow (canto sup-direito embaixo da cat pill) */
.list-card__marquee {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: rgba(20,20,20,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
  width: 26px;
  overflow: hidden;
  opacity: 0;
  transform: translate(-6px, -4px);
  transition:
    width .65s cubic-bezier(.22,.61,.36,1),
    padding .55s cubic-bezier(.22,.61,.36,1),
    opacity .35s var(--ease),
    transform .45s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.list-card:hover .list-card__marquee {
  opacity: 1;
  transform: translate(0, 0);
  width: 142px;
  padding: 0 5px 0 16px;
}
/* Track antigo do marquee transforma em label estático "Ver projeto" */
.list-card__marquee-track {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .35s var(--ease) .25s, transform .5s var(--ease) .22s;
  padding-right: 8px;
  animation: none;
  display: inline-flex;
}
.list-card__marquee-track span { display: none; }
.list-card__marquee-track::before {
  content: "Ver projeto";
  display: inline-block;
}
.list-card:hover .list-card__marquee-track {
  opacity: 1;
  transform: translateX(0);
}
/* Bolinha lime que cresce indo pra direita */
.list-card__marquee::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--lime, #CBFF00);
  color: #0a0a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0;
  line-height: 1;
  box-shadow: 0 0 0 0 rgba(203,255,0,0);
  transition:
    left .65s cubic-bezier(.22,.61,.36,1),
    width .65s cubic-bezier(.22,.61,.36,1),
    height .65s cubic-bezier(.22,.61,.36,1),
    font-size .25s var(--ease) .3s,
    box-shadow .45s var(--ease) .2s;
}
.list-card:hover .list-card__marquee::after {
  left: calc(100% - 30px);
  width: 26px;
  height: 26px;
  font-size: 12px;
  box-shadow: 0 0 14px rgba(203,255,0,.32);
}
.list-card__meta { display: contents; }
.list-card__cat {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px 8px;
  border-radius: 999px;
  background: rgba(20,20,20,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  transition: transform .45s var(--ease), background .45s var(--ease);
}
.list-card:hover .list-card__cat {
  background: rgba(30,30,30,.65);
  border-color: rgba(255,255,255,.22);
}
.list-card__name {
  position: absolute;
  bottom: 22px;
  left: 24px;
  right: 24px;
  z-index: 4;
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.015em;
  text-transform: none;
  color: #fff;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.list-card:hover .list-card__name {
  color: #fff;
}
@media (max-width: 900px) {
  .list-card__name { bottom: 22px; left: 24px; right: 24px; font-size: 22px; }
  .list-card__cat { top: 18px; right: 18px; font-size: 11.5px; padding: 7px 13px 8px; }
}
@media (max-width: 560px) {
  .list-card__name { font-size: 19px; }
}

/* Placeholder card "Novos projetos em breve" — span 2 colunas pra fechar o grid */
.list-card--coming {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  aspect-ratio: 1.18 / 0.5;
  min-height: 280px;
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(140,107,255,.08), transparent 70%),
    linear-gradient(180deg, #0d0d13 0%, #0a0a0e 100%);
  border: 1px dashed rgba(140,107,255,.22);
  padding: 36px 28px;
  gap: 14px;
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  pointer-events: none;
  transition: border-color .5s ease, transform .5s ease;
}
.list-card--coming::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(140,107,255,.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(140,107,255,.10) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  animation: lp-coming-grid 8s ease-in-out infinite;
}
@keyframes lp-coming-grid {
  0%, 100% { opacity: .25; }
  50%      { opacity: .55; }
}
.list-card--coming__icon {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(140,107,255,.10);
  border: 1px solid rgba(140,107,255,.30);
  color: #c8b3ff;
  animation: lp-coming-pulse 2.6s ease-in-out infinite;
}
@keyframes lp-coming-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(140,107,255,.25); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(140,107,255,0); }
}
.list-card--coming__icon svg { width: 22px; height: 22px; }
.list-card--coming__label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200,179,255,.65);
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
}
.list-card--coming__title {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 500;
  color: #fafafd;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0;
  max-width: 26ch;
}
.list-card--coming__title em {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  color: #c8b3ff;
}
.list-card--coming__hint {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin: 0;
  font-family: "DM Sans", sans-serif;
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 900px) {
  .topbar-fixed { padding: 10px 16px; inset: 12px 12px auto 12px; }
  .topbar-back { padding: 8px 14px; font-size: 12px; }

  .proj-hero { padding: 140px 0 60px; }
  .proj-title { margin-bottom: 40px; }

  .proj-overview {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 28px;
  }
  .proj-overview__meta { flex-direction: column; gap: 0; }
  .proj-overview__meta .meta-item { padding: 18px 0; }
  .proj-overview__cta { margin-top: 24px; }
  .proj-overview__right { gap: 28px; }
  .proj-overview__cover { border-radius: 10px; max-width: 100%; }

  .proj-sect { padding: 60px 0; }
  .proj-sect__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .proj-fullshot { padding: 40px 0 90px; }
  .proj-lp-frame { aspect-ratio: 4 / 3; border-radius: 18px; }
  .proj-lp-frame__cta { bottom: 14px; right: 14px; padding: 10px 14px; font-size: 12px; }

  .proj-related { padding: 70px 0 40px; }
  .proj-related h2 { margin-bottom: 36px; }
  .proj-related__grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 50px;
    padding-bottom: 40px;
  }
  /* Sticky stacked cards (related projects) */
  .proj-related__grid > .related-card {
    position: sticky;
    margin-bottom: 0;
    will-change: transform;
    box-shadow: 0 -12px 36px rgba(0,0,0,.55);
    border-color: rgba(255,255,255,.10);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .proj-related__grid > .related-card:nth-child(1) { top: 86px; }
  .proj-related__grid > .related-card:nth-child(2) { top: 96px; }
  .proj-related__grid > .related-card:nth-child(3) { top: 106px; }
  .proj-related__grid > .related-card:nth-child(n+4) { top: 110px; }
  .proj-related__grid > [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }

  .proj-cta { padding: 70px 0 90px; }

  .list-hero { padding: 130px 0 40px; }
  .list-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
    padding: 0 18px 70px;
  }
  .list-card--coming { grid-column: span 1; aspect-ratio: 1.4; min-height: 240px; }
  /* Sticky stacked cards animation (mobile) */
  .list-grid.stack-mobile {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding-bottom: 80px;
  }
  .list-grid.stack-mobile > .list-card {
    position: sticky;
    margin-bottom: 0;
    will-change: transform;
    box-shadow: 0 -12px 36px rgba(0,0,0,.55);
    border-color: rgba(255,255,255,.10);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .list-grid.stack-mobile > .list-card:nth-child(1)  { top: 86px;  }
  .list-grid.stack-mobile > .list-card:nth-child(2)  { top: 96px;  }
  .list-grid.stack-mobile > .list-card:nth-child(3)  { top: 106px; }
  .list-grid.stack-mobile > .list-card:nth-child(4)  { top: 116px; }
  .list-grid.stack-mobile > .list-card:nth-child(5)  { top: 126px; }
  .list-grid.stack-mobile > .list-card:nth-child(6)  { top: 132px; }
  .list-grid.stack-mobile > .list-card:nth-child(7)  { top: 138px; }
  .list-grid.stack-mobile > .list-card:nth-child(8)  { top: 144px; }
  .list-grid.stack-mobile > .list-card:nth-child(9)  { top: 150px; }
  .list-grid.stack-mobile > .list-card:nth-child(10) { top: 156px; }
  .list-grid.stack-mobile > .list-card:nth-child(n+11) { top: 160px; }
  /* Reset stagger fade-in so cards are immediately solid in sticky mode */
  .list-grid.stack-mobile > [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .list-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .list-card--coming { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  [data-anim="letters"] .l { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .proj-lp-frame:hover .proj-lp-frame__img { transform: none !important; transition: none !important; }
  /* Disable sticky stack when user prefers reduced motion */
  .list-grid.stack-mobile > .list-card,
  .proj-related__grid > .related-card { position: relative !important; top: auto !important; }
}

/* ===================================================================
   TFS opening-animation cover — usado em /projetos/the-future-studios
   Especificidade elevada via .proj-overview__cover--anim para vencer
   o .proj-overview__cover img global que está logo acima.
   =================================================================== */
.proj-overview__cover--anim { padding: 0; background: #000; overflow: hidden; }
.proj-overview__cover--anim .tfs-stage {
  position: relative; width: 100%; aspect-ratio: 16/10;
  border-radius: inherit; overflow: hidden; background: #000; display: block;
}
.proj-overview__cover--anim .tfs-stage__base {
  position: absolute !important; inset: 0;
  width: 100% !important; height: 100% !important;
  max-width: none; max-height: none;
  object-fit: cover !important; display: block;
}
.proj-overview__cover--anim .tfs-loader {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3;
}
.proj-overview__cover--anim .tfs-loader__blinds {
  position: absolute; inset: 0; display: flex; z-index: 1;
}
.proj-overview__cover--anim .tfs-loader__blinds > span {
  flex: 1; height: 100%; background: #000; transform-origin: right center; display: block;
}
.proj-overview__cover--anim .tfs-loader__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; z-index: 2;
}
.proj-overview__cover--anim .tfs-loader__icons {
  position: relative; width: 72px; height: 72px; flex: 0 0 auto;
}
.proj-overview__cover--anim .tfs-icon {
  position: absolute !important; inset: 0;
  display: none; align-items: center; justify-content: center;
  width: 72px !important; height: 72px !important;
  color: #fff;
}
.proj-overview__cover--anim .tfs-icon img {
  width: 100% !important; height: 100% !important;
  max-width: 72px !important; max-height: 72px !important;
  object-fit: contain !important; display: block;
}
.proj-overview__cover--anim .tfs-loader__logo {
  display: none; width: 172px; flex: 0 0 auto; color: #fff;
}
.proj-overview__cover--anim .tfs-loader__logo img {
  width: 100% !important; height: auto !important;
  max-width: 172px !important; max-height: none !important;
  display: block; object-fit: contain;
}
.proj-overview__cover--anim .tfs-loader__progress {
  position: relative; width: 140px; height: 1px;
  background: rgba(255,255,255,.22); overflow: hidden; flex: 0 0 auto;
}
.proj-overview__cover--anim .tfs-loader__progress-fill {
  width: 0; height: 100%; background: #fff;
}
@media (max-width: 560px) {
  .proj-overview__cover--anim .tfs-loader__icons,
  .proj-overview__cover--anim .tfs-icon {
    width: 56px !important; height: 56px !important;
  }
  .proj-overview__cover--anim .tfs-icon img {
    max-width: 56px !important; max-height: 56px !important;
  }
  .proj-overview__cover--anim .tfs-loader__logo { width: 128px; }
  .proj-overview__cover--anim .tfs-loader__logo img { max-width: 128px !important; }
  .proj-overview__cover--anim .tfs-loader__progress { width: 120px; }
  .proj-overview__cover--anim .tfs-loader__center { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .proj-overview__cover--anim .tfs-loader { display: none; }
}

/* TFS animation cover — iframe-based (isolates all CSS/JS from this page) */
.proj-overview__cover--anim .tfs-anim-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  margin: 0;
  background: #000;
  border-radius: inherit;
}