/* =========================================================================
   Página de Links — Kauan Oliveira
   Implementação dos frames "Desktop" (1:18) 1920x3351 e "Mobile" (5:444) 393x1625.
   As medidas são as coordenadas absolutas do frame; a escala e o
   "sangramento" das camadas de fundo vêm do script.js.
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #020312;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  /* Nunca rola na horizontal. Na vertical, só quando a janela é mais
     estreita que o frame — aí a página rola em vez de encolher. */
  overflow-x: hidden;
}

p {
  margin: 0;
}

img {
  display: block;
}

/* ---------- Palco -------------------------------------------------------
   .viewport = a tela. .stage = a tela medida em px de design.
   .frame    = o frame do Figma, centrado no palco.
   Quando a tela é mais "larga" que o frame sobra espaço nas laterais:
   as camadas full-bleed usam --bleed-x/--bleed-y para preencher.
   ------------------------------------------------------------------------ */

.viewport {
  position: relative;
  width: 100%;
  height: var(--viewport-h, 100vh);
  overflow: hidden;
  background: #020312;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w, 1920px);
  height: var(--stage-h, 1361px);
  overflow: hidden;
  background: #020312;
  transform-origin: top left;
  transform: scale(var(--scale, 1));
}

.frame {
  position: absolute;
  left: var(--bleed-x, 0px);
  top: var(--bleed-y, 0px);
  display: none;
}

/* A altura agora vai até o fim do rodapé. O primeiro "écran" continua sendo
   só o herói (fitH no script.js); o resto fica abaixo da dobra e rola. */
.frame-desktop { width: 1920px; height: 3351px; }
.frame-mobile  { width: 393px;  height: 1625px; }

.is-desktop .frame-desktop,
.is-mobile .frame-mobile { display: block; }

/* Sem JS, ao menos o desktop aparece. */
html:not(.is-desktop):not(.is-mobile) .frame-desktop { display: block; }

/* Camadas que precisam cobrir toda a tela, não só o frame. */
.lower-bg,
.shadow,
.noise,
.pags,
.carousel,
.frase-line,
.m-lower-bg,
.m-shadow,
.m-noise,
.m-pags,
.m-carousel {
  left: calc(-1 * var(--bleed-x, 0px));
  width: calc(100% + 2 * var(--bleed-x, 0px));
}

/* ---------- Logo Veen 3D 2 (5:117) --------------------------------------- */

.veen3d {
  position: absolute;
  left: 1174px;
  top: 65px;
  width: 1079px;
  height: 1069.786px;
}

.veen3d img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flutuação infinita do símbolo 3D. */
@keyframes float-3d-desktop {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -36px, 0) rotate(-2deg); }
}

@keyframes float-3d-mobile {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -12px, 0) rotate(-2deg); }
}

.veen3d.float-3d   { animation: float-3d-desktop 8s ease-in-out infinite; }
.m-veen3d.float-3d { animation: float-3d-mobile 8s ease-in-out infinite; }

/* ---------- Glows / Ellipses --------------------------------------------- */

.glow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow-rot {
  position: relative;
  flex: none;
}

.glow-bleed {
  position: absolute;
}

.glow-bleed img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Ellipse 36 (2:17) */
.glow-a {
  left: 200px;
  top: -59px;
  width: 1665.877px;
  height: 1611.521px;
}

.glow-a .glow-rot {
  width: 1009.146px;
  height: 1325.608px;
  transform: rotate(-128.02deg);
}

.glow-a .glow-bleed {
  top: -45.04%;
  bottom: -45.04%;
  left: -59.16%;
  right: -59.16%;
}

/* Ellipse 37 (2:18) */
.glow-b {
  left: calc(20% + 195.41px);
  top: 308.03px;
  width: 907.048px;
  height: 877.452px;
  mix-blend-mode: plus-lighter;
}

.glow-b .glow-rot {
  width: 549.466px;
  height: 721.776px;
  transform: rotate(-128.02deg);
}

.glow-b .glow-bleed {
  top: -20.68%;
  bottom: -20.68%;
  left: -27.17%;
  right: -27.17%;
}

/* Ellipse 37 (1:51) — brilho em primeiro plano */
.glow-c {
  left: calc(50% + 17px);
  top: 527px;
  width: 581.086px;
  height: 439.66px;
  mix-blend-mode: plus-lighter;
}

.glow-c .glow-rot {
  width: 519.781px;
  height: 264.935px;
  transform: rotate(-158.1deg);
}

.glow-c .glow-bleed {
  top: -113.24%;
  bottom: -113.24%;
  left: -57.72%;
  right: -57.72%;
}

/* ---------- bg (5:118) --------------------------------------------------- */

.lower-bg {
  position: absolute;
  top: 1200px;
  height: calc(931px + var(--bleed-y, 0px));
  background: #020312;
}

/* ---------- Logo veen bg (5:172) ----------------------------------------- */

.veen-bg {
  position: absolute;
  left: 0;
  top: 606px;
  width: 1920px;
  height: 474.417px;
  mix-blend-mode: overlay;
}

.veen-bg img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ---------- NAV (5:135) --------------------------------------------------
   O contorno gradiente em vidro não existe no nó do Figma (a NAV lá é só
   logo + links, sem fill/stroke/efeito). Construído aqui a partir da
   descrição — ajustar depois de bater com o arquivo.
   ------------------------------------------------------------------------ */

.nav {
  position: absolute;
  left: 240px;
  top: 34px;
  width: 1440px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 48px;
  border-radius: 100px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.018) 100%
  );
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* Contorno de 1px em gradiente, recortado com máscara. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    108deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(117, 138, 255, 0.32) 24%,
    rgba(255, 255, 255, 0.04) 47%,
    rgba(117, 138, 255, 0.28) 72%,
    rgba(255, 255, 255, 0.42) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.nav-logo {
  position: relative;
  flex-shrink: 0;
  width: 91px;
  height: 24.339px;
}

.nav-logo img {
  width: 100%;
  height: 100%;
  max-width: none;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 274px;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #c1c5d9;
  white-space: nowrap;
}

.nav-links p {
  flex-shrink: 0;
}

/* ---------- Pags slider (5:151) ------------------------------------------
   Marquee infinito. Cada card recebe rotateY + translateZ pelo script,
   em função da distância até o centro da tela: recuados e virados para
   dentro no meio, maiores e mais frontais nas pontas.
   ------------------------------------------------------------------------ */

.pags {
  position: absolute;
  top: 762px;
  height: 290px;
  perspective: 1600px;
  perspective-origin: 50% 50%;
}

.pags-track {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 10px;
  transform-style: preserve-3d;
  will-change: transform;
}

.pag {
  position: relative;
  flex-shrink: 0;
  width: 480px;
  height: 270px;
  border-radius: 9.017px;
  opacity: 0.78;
  will-change: transform;
}

.pag img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 9.017px;
  pointer-events: none;
}

/* ---------- kauan (1:56) ------------------------------------------------- */

.kauan {
  position: absolute;
  left: 360px;
  top: 29px;
  width: 1174px;
  height: 1117px;
  overflow: hidden;
}

.kauan img {
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

/* ---------- shadow (2:26) ------------------------------------------------ */

.shadow {
  position: absolute;
  top: 409px;
  /* O gradiente fica preso aos 791px do Figma (background-size); abaixo dele
     seguimos com #020312 liso até o fim do palco, senão o multiply termina
     em linha reta e aparece uma emenda no rodapé em telas altas. */
  height: calc(var(--stage-h, 1361px) - var(--bleed-y, 0px) - 409px);
  background:
    linear-gradient(180deg, #ffffff 0%, #020312 91.846%) top left / 100% 791px no-repeat,
    #020312;
  mix-blend-mode: multiply;
}

/* ---------- noise (1:53) ------------------------------------------------- */

.noise {
  position: absolute;
  /* No Figma o ruído é 1920x1200 (só o herói). Sobe até cobrir a sangria,
     mas para em 1200 — abaixo disso começam os cards, que não têm ruído. */
  top: calc(-1 * var(--bleed-y, 0px));
  height: calc(1200px + var(--bleed-y, 0px));
  background-image: url('assets/noise.png');
  background-size: 1024px 1024px;
  background-position: top left;
  background-repeat: repeat;
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- frases slider (5:119) ---------------------------------------- */

.frase-line {
  position: absolute;
  height: 59px;
  overflow: hidden;
}

.frase-line--top {
  top: 1169px;
}

.frase-line--bottom {
  top: 1233.23px;
}

.frase-track {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
}

.frase-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16.434px;
  height: 100%;
}

.frase-group p {
  flex-shrink: 0;
  font-size: 48.921px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -2.446px;
  /* O CSS aplica o letter-spacing também depois do último glifo, o Figma não.
     Compensamos para que o espaçamento até o próximo item bata com o design. */
  margin-right: 2.446px;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  word-break: break-word;
}

.frase-group .sparkle {
  flex-shrink: 0;
  width: 14.523px;
  height: 14.523px;
  max-width: none;
}

/* ---------- Perfis (5:133) ----------------------------------------------- */

.perfis {
  position: absolute;
  left: calc(60% - 34px);
  top: 931px;
  width: 563px;
  display: flex;
  align-items: center;
  gap: 22.353px;
}

.avatars {
  position: relative;
  flex-shrink: 0;
  width: 252px;
  height: 58.676px;
}

.avatar {
  position: absolute;
  top: 0;
  width: 58.676px;
  height: 58.676px;
}

/* O PNG exportado inclui o sangramento do contorno (-3,17% em cada lado). */
.avatar img {
  position: absolute;
  left: -1.8625px;
  top: -1.8625px;
  width: 62.401px;
  height: 62.401px;
  max-width: none;
}

.client-count {
  flex: 1 0 0;
  min-width: 0;
  font-size: 23.138px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.4628px;
  color: #dce7ed;
  opacity: 0.5;
  text-box: trim-both cap alphabetic;
  word-break: break-word;
}

/* ---------- Introduction text (5:147) ------------------------------------ */

.intro {
  position: absolute;
  left: calc(60% - 34px);
  top: 714px;
  width: 563px;
  font-size: 24px;
  font-weight: 400;
  line-height: 0;
  color: #dce7ed;
  word-break: break-word;
}

.intro span {
  line-height: 1.4;
}

.intro-strong {
  font-weight: 700;
  color: #ffffff;
}

/* ---------- Profile summary (5:167) -------------------------------------- */

.profile {
  position: absolute;
  left: 240px;
  top: 341px;
  width: 484px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 62px;
}

.profile-name {
  flex-shrink: 0;
  min-width: 100%;
  width: min-content;
  font-size: 144px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -7.2px;
  color: #ffffff;
  white-space: pre-wrap;
  text-box: trim-both cap alphabetic;
  word-break: break-word;
}

/* O Figma corta a caixa de texto na altura de capitular / linha de base
   ("text-box: trim-both cap alphabetic"). Onde isso não existe (Firefox),
   reproduzimos o mesmo corte com as métricas da Plus Jakarta Sans:
   topo da linha -> topo da capitular = 0.163em; linha de base -> base = 0.092em. */
@supports not (text-box: trim-both cap alphabetic) {
  .profile-name,
  .client-count {
    margin-top: -0.163em;
    margin-bottom: -0.092em;
  }
}

/* ---------- button (5:159) ----------------------------------------------- */

.button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11.292px;
  width: 296.292px;
  height: 88px;
  border: 2px solid #758aff;
  border-radius: 14px;
  background-image: linear-gradient(
    -32.58849911844686deg,
    rgb(49, 77, 247) 6.5443%,
    rgb(116, 72, 247) 103.57%
  );
  filter: drop-shadow(0px 0px 38.25px #4863f7);
}

.button p {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1px;
  margin-right: 1px; /* compensa o letter-spacing final (ver .frase-group p) */
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
  word-break: break-word;
}

.button-icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  overflow: clip;
}

.button-icon-group {
  position: absolute;
  top: 12.5%;
  bottom: 12.5%;
  left: 25%;
  right: 25%;
}

.button-icon-group svg {
  position: absolute;
  top: -4.17%;
  bottom: -4.17%;
  left: -6.25%;
  right: -6.25%;
  width: 13.5px;
  height: 19.5px;
  overflow: visible;
}

/* A rodinha do mouse desce continuamente. */
.mouse-wheel {
  animation: wheel-scroll 1.8s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

@keyframes wheel-scroll {
  0%   { transform: translateY(0);     opacity: 0; }
  18%  { transform: translateY(0.6px); opacity: 1; }
  62%  { transform: translateY(5px);   opacity: 1; }
  100% { transform: translateY(7px);   opacity: 0; }
}

/* =========================================================================
   Entrada
   Sequência: nome -> botão -> texto da direita -> perfis.
   A NAV e o slider entram antes, discretos, para nada aparecer de repente.
   ========================================================================= */

/* Só escondemos se o JS estiver vivo para revelar de novo. */
.js .anim {
  opacity: 0;
  will-change: opacity, transform, filter;
}

.is-ready .anim {
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* .pag já usa opacity 0.78 no design — a entrada não pode passar de 1
   no elemento pai, então animamos só o contêiner do slider. */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* O botão tem drop-shadow próprio: animar "filter" apagaria o brilho. */
@keyframes rise-no-filter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.is-ready .anim-nav   { animation-delay: 0.10s; }
.is-ready .anim-pags  { animation: fade-in 1.4s ease both; animation-delay: 0.25s; }
.is-ready .anim-name  { animation-delay: 0.40s; }
.is-ready .anim-button{
  animation: rise-no-filter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.85s;
}
.is-ready .anim-intro { animation-delay: 1.20s; }
.is-ready .anim-perfis{ animation-delay: 1.50s; }

@media (prefers-reduced-motion: reduce) {
  .js .anim,
  .is-ready .anim {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .mouse-wheel,
  .float-3d {
    animation: none;
  }
}

/* =========================================================================
   Frame "Mobile" (5:444) — 393 x 1076
   ========================================================================= */

/* ---------- Logo Veen 3D 2 1 (21:547) ------------------------------------ */

.m-veen3d {
  position: absolute;
  left: 231px;
  top: 297px;
  width: 323px;
  height: 320.306px;
}

.m-veen3d img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Glows -------------------------------------------------------- */

/* Ellipse 36 (21:534) */
.m-glow-a {
  left: -89px;
  top: 274px;
  width: 637.698px;
  height: 616.89px;
}

.m-glow-a .glow-rot {
  width: 386.301px;
  height: 507.443px;
  transform: rotate(-128.02deg);
}

.m-glow-a .glow-bleed {
  top: -45.04%;
  bottom: -45.04%;
  left: -59.16%;
  right: -59.16%;
}

/* Ellipse 37 (21:535) */
.m-glow-b {
  left: 56.24px;
  top: 414.5px;
  width: 347.218px;
  height: 335.889px;
  mix-blend-mode: plus-lighter;
}

.m-glow-b .glow-rot {
  width: 210.336px;
  height: 276.296px;
  transform: rotate(-128.02deg);
}

.m-glow-b .glow-bleed {
  top: -20.68%;
  bottom: -20.68%;
  left: -27.17%;
  right: -27.17%;
}

/* ---------- Rectangle bg (21:540) / Logo veen bg (5:508) ----------------- */

.m-lower-bg {
  position: absolute;
  top: 802px;
  height: calc(274px + var(--bleed-y, 0px));
  background: #020312;
}

.m-veen-bg {
  position: absolute;
  left: 0;
  top: 504.776px;
  width: 393px;
  height: 97.107px;
  mix-blend-mode: overlay;
}

.m-veen-bg img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ---------- Pags slider (21:548) ----------------------------------------- */

.m-pags {
  position: absolute;
  top: 474px;
  height: 97px;
  perspective: 330px;
  perspective-origin: 50% 50%;
}

.m-pags .pags-track {
  gap: 10.703px;
  padding: 3.345px;
}

.m-pags .pag {
  width: 160.552px;
  height: 90.31px;
  border-radius: 3.016px;
}

.m-pags .pag img {
  border-radius: 3.016px;
}

/* ---------- noise (21:537) ----------------------------------------------- */

.m-noise {
  position: absolute;
  top: calc(-1 * var(--bleed-y, 0px));
  height: calc(836px + var(--bleed-y, 0px));
  background-image: url('assets/noise.png');
  background-size: 1024px 1024px;
  background-position: top left;
  background-repeat: repeat;
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- Frame 1 (21:532) — bloco central ----------------------------- */

.m-hero {
  position: absolute;
  left: 42px;
  top: 72px;
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.m-title {
  flex-shrink: 0;
  min-width: 100%;
  width: min-content;
  font-size: 28px;
  font-weight: 600;
  line-height: 0;
  letter-spacing: -1.4px;
  text-align: center;
  color: #ffffff;
  white-space: pre-wrap;
  text-box: trim-both cap alphabetic;
  word-break: break-word;
}

.m-title span {
  line-height: 1;
}

.m-title-accent {
  background-image: linear-gradient(
    -41.81424279775422deg,
    rgb(49, 77, 247) 6.5443%,
    rgb(116, 72, 247) 103.57%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.m-title-dim {
  color: rgba(220, 231, 237, 0.8);
}

.m-intro {
  flex-shrink: 0;
  min-width: 100%;
  width: min-content;
  /* O Figma reporta 60px para estas 3 linhas (14px x 1,4 = 58,8 arredondado).
     Fixamos a caixa para o botão cair exatamente no y=297 do design. */
  height: 60px;
  font-size: 0;
  font-weight: 400;
  line-height: 0;
  text-align: center;
  color: #dce7ed;
  word-break: break-word;
}

.m-intro span {
  font-size: 14px;
  line-height: 1.4;
}

/* ---------- button (5:512) ----------------------------------------------- */

.m-button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.066px;
  width: 180.719px;
  height: 51.38px;
  border: 1.074px solid #758aff;
  border-radius: 7.521px;
  background-image: linear-gradient(
    -31.463368591490664deg,
    rgb(49, 77, 247) 6.5443%,
    rgb(116, 72, 247) 103.57%
  );
  filter: drop-shadow(0px 0px 20.548px #4863f7);
}

.m-button p {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.7px;
  margin-right: 0.7px; /* compensa o letter-spacing final */
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
}

.m-button-icon {
  position: relative;
  flex-shrink: 0;
  width: 12.893px;
  height: 12.893px;
  overflow: clip;
}

.m-button-icon-group {
  position: absolute;
  top: 12.5%;
  bottom: 12.5%;
  left: 25%;
  right: 25%;
}

.m-button-icon-group svg {
  position: absolute;
  top: -4.17%;
  bottom: -4.17%;
  left: -6.25%;
  right: -6.25%;
  width: 7.252px;
  height: 10.476px;
  overflow: visible;
}

/* ---------- kauan (5:447) / shadow (5:448) ------------------------------- */

.m-kauan {
  position: absolute;
  left: -40.533px;
  top: 331px;
  width: 475.065px;
  height: 452px;
  overflow: hidden;
}

.m-kauan img {
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

.m-shadow {
  position: absolute;
  top: 507px;
  /* Mesmo tratamento do desktop: gradiente preso aos 295px do Figma e
     #020312 liso abaixo, para o multiply não deixar emenda no rodapé. */
  height: calc(var(--stage-h, 1076px) - var(--bleed-y, 0px) - 507px);
  background:
    linear-gradient(180deg, #ffffff 0%, #020312 91.846%) top left / 100% 295px no-repeat,
    #020312;
  mix-blend-mode: multiply;
}

/* ---------- frases slider (5:450) ---------------------------------------- */

.m-frase-line--top    { top: 757px; }
.m-frase-line--bottom { top: 782.659px; }

.m-frases .frase-line { height: 23.57px; }

.m-frases .frase-group {
  gap: 6.565px;
}

.m-frases .frase-group p {
  font-size: 19.543px;
  letter-spacing: -0.9772px;
  margin-right: 0.9772px;
}

.m-frases .frase-group .sparkle {
  width: 5.802px;
  height: 5.802px;
}

/* ---------- Perfis (5:487) ----------------------------------------------- */

.m-perfis {
  position: absolute;
  left: 58px;
  top: 694.903px;
  width: 277px;
  display: flex;
  align-items: center;
  gap: 10.998px;
}

.m-avatars {
  position: relative;
  flex-shrink: 0;
  width: 123.986px;
  height: 28.869px;
}

.m-avatar {
  position: absolute;
  top: 0;
  width: 28.869px;
  height: 28.869px;
}

.m-avatar img {
  position: absolute;
  left: -0.9155px;
  top: -0.9155px;
  width: 30.702px;
  height: 30.702px;
  max-width: none;
}

.m-client-count {
  flex: 1 0 0;
  min-width: 0;
  font-size: 11.384px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.2277px;
  color: #dce7ed;
  opacity: 0.5;
  text-box: trim-both cap alphabetic;
  word-break: break-word;
}

/* ---------- NAV (5:520) -------------------------------------------------- */

.m-nav {
  position: absolute;
  left: 18px;
  top: 13px;
  width: 357px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 26.133px;
  border-radius: 54.444px;
  /* No Figma (5:520) a nav mobile é transparente: medindo o render, o miolo
     fica em rgb(1,2,17) e o pixel mais claro da borda em rgb(7,8,23) — ou
     seja, branco a ~2-4%. Nada de vidro forte aqui. */
  background: rgba(255, 255, 255, 0.012);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.m-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    108deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.03) 30%,
    rgba(255, 255, 255, 0.012) 50%,
    rgba(255, 255, 255, 0.028) 72%,
    rgba(255, 255, 255, 0.045) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.m-nav-logo {
  position: relative;
  flex-shrink: 0;
  width: 49.544px;
  height: 13.251px;
}

.m-nav-logo img {
  width: 100%;
  height: 100%;
  max-width: none;
}

.m-nav-name {
  flex-shrink: 0;
  font-size: 8.711px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8711px;
  color: #c1c5d9;
  white-space: nowrap;
}

@supports not (text-box: trim-both cap alphabetic) {
  .m-title,
  .m-client-count {
    margin-top: -0.163em;
    margin-bottom: -0.092em;
  }
}

/* ---------- hover -------------------------------------------------------
   As camadas decorativas ficam empilhadas por cima do slider. Mesmo sem
   fundo, uma div continua capturando o ponteiro — sem isto o hover nunca
   chegaria nos cards que estão atrás.
   ------------------------------------------------------------------------ */

.veen3d, .m-veen3d,
.glow,
.lower-bg, .m-lower-bg,
.veen-bg, .m-veen-bg,
.kauan, .m-kauan,
.shadow, .m-shadow,
.frases, .m-frases {
  pointer-events: none;
}

/* Os cards do centro recebem translateZ negativo, o que os coloca ATRÁS do
   plano do próprio trilho (z=0). Como o trilho é alvo válido de ponteiro,
   ele interceptava o hover de todos eles — só os das pontas, com z positivo,
   respondiam. Tirando o trilho da conta, o alvo passa a ser sempre o card. */
.pags-track {
  pointer-events: none;
}

.pag {
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  /* Só a opacidade entra em transição: o transform é reescrito a cada
     frame pelo draw(), e uma transição nele engasgaria o movimento. */
  .pag {
    transition: opacity 0.35s ease;
  }

  .pag:hover {
    opacity: 1;
  }

  .avatar,
  .m-avatar {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Os avatares se sobrepõem; o que cresce precisa vir para a frente. */
  .avatar:hover,
  .m-avatar:hover {
    transform: scale(1.16);
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar,
  .m-avatar {
    transition: none;
  }
}

/* =========================================================================
   Seção de links (41:113 / 41:128) e rodapé (39:103 / 41:114)
   Ficam abaixo da dobra: o herói continua ocupando o primeiro écran e estas
   seções aparecem ao rolar. As medidas são as do frame desktop; o mobile
   sobrescreve as suas mais abaixo.
   ========================================================================= */

.links {
  position: absolute;
  left: 480px;              /* calc(10% + 288px) sobre 1920 */
  top: 1409px;
  width: 960px;
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.lcard {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 540px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
}

/* Gradiente radial rotacionado — o CSS não gira radial-gradient, então vai
   o mesmo SVG que o Figma gera, esticado sobre o card. */
.lcard--dark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 540' preserveAspectRatio='none'><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-62.9 21.3 -32.066 -94.692 699 284)'><stop stop-color='rgb(15,16,30)' offset='0'/><stop stop-color='rgb(2,3,18)' offset='1'/></radialGradient></defs><rect x='0' y='0' width='960' height='540' fill='url(%23g)'/></svg>");
  background-size: 100% 100%;
}

.lcard--light {
  background: #f1f3ff;
}

/* marca d'água (35:74 / 35:76) */
.lc-logobg {
  position: absolute;
  left: -21px;
  top: 387px;
  width: 627px;
  height: 154.927px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.lc-logobg img { width: 100%; height: 100%; }

/* prints de sites inclinados (35:38..40) */
.lc-desks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lc-desk {
  position: absolute;
  width: 115.119px;
  height: 721.072px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lc-desk--1 { left: 818.94px; top: -47.86px; }
.lc-desk--2 { left: 698.31px; top: -4.35px; }
.lc-desk--3 { left: 579.3px;  top: 6px; }

.lc-desk-in {
  flex: none;
  width: 132.928px;
  height: 654.608px;
  transform: rotate(-30deg) skewX(-30deg) scaleY(0.87);
}

.lc-desk-in img { width: 100%; height: 100%; object-fit: cover; }

.lc-macbook {
  position: absolute;
  left: 376px;
  top: 42px;
  width: 718px;
  height: 538.5px;
  pointer-events: none;
}

.lc-macbook img { width: 100%; height: 100%; object-fit: cover; }

/* brilhos internos (32:5 / 32:6) — mesma estrutura dos glows do herói */
.lc-glow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lc-glow-rot { flex: none; position: relative; }
.lc-glow-bleed { position: absolute; }
.lc-glow-bleed img { width: 100%; height: 100%; max-width: none; }

.lc-glow--a { left: 606px; top: 132px; width: 708px; height: 684.899px; }
.lc-glow--a .lc-glow-rot {
  width: 428.888px;
  height: 563.385px;
  transform: rotate(-128.02deg);
}
.lc-glow--a .lc-glow-bleed { inset: -45.04% -59.16%; }

.lc-glow--b {
  left: 767.25px;
  top: 287.99px;
  width: 385.497px;
  height: 372.918px;
  mix-blend-mode: plus-lighter;
}
.lc-glow--b .lc-glow-rot {
  width: 233.524px;
  height: 306.756px;
  transform: rotate(-128.02deg);
}
.lc-glow--b .lc-glow-bleed { inset: -20.68% -27.17%; }

.lc-glow--dim .lc-glow-rot { opacity: 0.64; }

.lcard--light .lc-glow--a { left: 463px; top: 156px; }
.lcard--light .lc-glow--b { left: 624.25px; top: 311.99px; }

/* conteúdo (32:9 / 35:85) */
.lc-content {
  position: absolute;
  left: 69px;
  top: 50%;
  transform: translateY(-50%);
  width: 444px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.lcard--light .lc-content { width: 459px; }

.lc-title {
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -3.2px;
  color: #ffffff;
  text-box: trim-both cap alphabetic;
  word-break: break-word;
}

.lcard--light .lc-title { color: #0f101e; }

.lc-desc {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  color: #c1c5d9;
  word-break: break-word;
}

.lcard--light .lc-desc { color: #9093a2; }

.lc-btn {
  width: 362px;
  padding: 30px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11.292px;
  border: 2px solid #758aff;
  border-radius: 14px;
  background-image: linear-gradient(-26.539deg, rgb(49, 77, 247) 6.5443%, rgb(116, 72, 247) 103.57%);
  filter: drop-shadow(0px 0px 38.25px #4863f7);
  text-decoration: none;
}

.lc-btn--flat { filter: none; }

.lc-btn > span {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1px;
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
}

.lc-btn-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lc-btn-icon img {
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

/* aba superior (35:24 / 35:92) */
.lc-tab {
  position: absolute;
  left: 69px;
  top: 0;
  width: 165px;
  height: 18px;
  border-radius: 0 0 8px 8px;
  background-image: linear-gradient(-13.214deg, rgb(49, 77, 247) 6.5443%, rgb(116, 72, 247) 103.57%);
}

/* celulares (41:106 / 41:107 / 39:102) */
.lc-phone {
  position: absolute;
  width: 694.463px;
  height: 696.401px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lc-phone--a { left: 430px; top: 175px; }
.lc-phone--b { left: 570px; top: -299px; }

.lc-phone-rot {
  flex: none;
  transform: rotate(-44.3deg);
  filter: blur(1px);
}

.lc-phone-box {
  position: relative;
  width: 436px;
  height: 547.564px;
  overflow: hidden;
}

.lc-phone-box img {
  position: absolute;
  left: -44.07%;
  top: -6.18%;
  width: 188.15%;
  height: 112.36%;
  max-width: none;
}

.lc-phone-flat {
  position: absolute;
  left: 524px;
  top: -6px;
  width: 436px;
  height: 547.564px;
  pointer-events: none;
}

.lc-phone-flat .lc-phone-box { width: 100%; height: 100%; }

/* ---------- rodapé (39:103 / 41:114) ------------------------------------- */

.footer {
  position: absolute;
  bottom: 1px;
  left: calc(-1 * var(--bleed-x, 0px));
  width: calc(100% + 2 * var(--bleed-x, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;
}

.footer-head {
  width: 649.679px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo { flex-shrink: 0; width: 115.918px; height: 31.004px; }
.footer-logo img { width: 100%; height: 100%; }

.footer-head p {
  flex-shrink: 0;
  font-size: 14.827px;
  font-weight: 400;
  color: #c1c5d9;
  white-space: nowrap;
}

.footer-bar {
  width: 100%;
  height: 150px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f101e;
}

.footer-bar p {
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  text-align: center;
  color: #c1c5d9;
}

@supports not (text-box: trim-both cap alphabetic) {
  .lc-title {
    margin-top: -0.163em;
    margin-bottom: -0.092em;
  }
}

/* ---------- variantes do frame mobile ------------------------------------ */

.frame-mobile .links {
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
  top: 849px;
  width: 366px;
  gap: 16px;
}

.frame-mobile .lcard {
  height: 205.875px;
  border-width: 0.191px;
  border-radius: 6.1px;
}

.frame-mobile .lcard--dark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 366 205.88' preserveAspectRatio='none'><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-23.981 8.1206 -12.225 -36.101 266.49 108.28)'><stop stop-color='rgb(15,16,30)' offset='0'/><stop stop-color='rgb(2,3,18)' offset='1'/></radialGradient></defs><rect x='0' y='0' width='366' height='205.88' fill='url(%23g)'/></svg>");
}

.frame-mobile .lc-logobg {
  left: -8.01px;
  top: 147.54px;
  width: 239.044px;
  height: 59.066px;
}

.frame-mobile .lc-desk { width: 43.889px; height: 274.909px; }
.frame-mobile .lc-desk--1 { left: 312.22px; top: -18.25px; }
.frame-mobile .lc-desk--2 { left: 266.23px; top: -1.66px; }
.frame-mobile .lc-desk--3 { left: 220.86px; top: 2.29px; }
.frame-mobile .lc-desk-in { width: 50.679px; height: 249.569px; }

.frame-mobile .lc-macbook {
  left: 143.35px;
  top: 16.01px;
  width: 273.737px;
  height: 205.303px;
}

.frame-mobile .lc-glow--a { left: 231.04px; top: 50.33px; width: 269.925px; height: 261.118px; }
.frame-mobile .lc-glow--a .lc-glow-rot { width: 163.514px; height: 214.791px; }
.frame-mobile .lc-glow--a .lc-glow-bleed { inset: -46.56% -61.16%; }

.frame-mobile .lc-glow--b { left: 292.51px; top: 109.8px; width: 146.971px; height: 142.175px; }
.frame-mobile .lc-glow--b .lc-glow-rot { width: 89.031px; height: 116.951px; }

.frame-mobile .lcard--light .lc-glow--a { left: 176.52px; top: 59.48px; }
.frame-mobile .lcard--light .lc-glow--b { left: 237.99px; top: 118.95px; }

.frame-mobile .lc-content {
  left: 26px;
  top: calc(50% + 0.06px);
  width: 185px;
  gap: 10.675px;
}

.frame-mobile .lcard--light .lc-content {
  left: 26.31px;
  top: calc(50% + 3.8px);
  width: 174.994px;
}

.frame-mobile .lc-title { font-size: 24.4px; letter-spacing: -1.22px; }
.frame-mobile .lc-desc  { font-size: 10px; }

.frame-mobile .lc-btn {
  width: 138.012px;
  padding: 11.438px 12.2px;
  gap: 4.305px;
  border-width: 0.762px;
  border-radius: 5.338px;
  filter: drop-shadow(0px 0px 14.583px #4863f7);
}

.frame-mobile .lc-btn--flat { filter: none; }
.frame-mobile .lc-btn > span { font-size: 7.625px; letter-spacing: -0.3813px; }
.frame-mobile .lc-btn-icon { width: 7.625px; height: 7.625px; }

.frame-mobile .lc-tab {
  left: 26.31px;
  width: 62.906px;
  height: 6.862px;
  border-radius: 0 0 3.05px 3.05px;
}

.frame-mobile .lc-phone { width: 264.764px; height: 265.503px; }
.frame-mobile .lc-phone--a { left: 163.94px; top: 66.72px; }
.frame-mobile .lc-phone--b { left: 217.31px; top: -113.99px; }
.frame-mobile .lc-phone-rot { filter: blur(0.381px); }
.frame-mobile .lc-phone-box { width: 166.225px; height: 208.759px; }
.frame-mobile .lc-phone-flat {
  left: 199.78px;
  top: -2.29px;
  width: 166.225px;
  height: 208.759px;
}

.frame-mobile .footer { bottom: 0; gap: 18.67px; }
.frame-mobile .footer-head { width: 327.826px; }
.frame-mobile .footer-logo { width: 58.492px; height: 15.644px; }
.frame-mobile .footer-head p { font-size: 7.482px; }
.frame-mobile .footer-bar { height: 75.689px; padding: 5.046px; }
.frame-mobile .footer-bar p { font-size: 7.064px; }

/* =========================================================================
   Animações dos cards de link
   Tudo em transform, para rodar no compositor. As amplitudes são sempre
   negativas (sobem e voltam): descer exporia a borda de corte das imagens
   dentro do card, que hoje fica escondida pelo overflow.
   ========================================================================= */

@keyframes lc-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--arrow-travel, 4px)); }
}

@keyframes lc-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, var(--float-y, -14px), 0); }
}

/* Respiração: usada onde não há folga para transladar sem revelar o corte
   da imagem. Crescer a partir do centro empurra as bordas para fora. */
@keyframes lc-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--breathe, 1.022)); }
}

/* A seta: o translate vai no invólucro, não na imagem — ela já carrega o
   rotate(90deg) que a aponta para a direita, e girar o eixo faria a seta
   deslizar para baixo em vez de para o lado. */
.lc-btn-icon {
  animation: lc-arrow 1.6s ease-in-out infinite;
}

/* Card "Sites e Landing Pages": os prints ao fundo derivam devagar, cada um
   no seu tempo, e o notebook flutua num ritmo próprio à frente deles. */
.lc-desk {
  animation: lc-float 7s ease-in-out infinite;
}

.lc-desk--1 { --float-y: -14px; animation-duration: 7s;  animation-delay: 0s; }
.lc-desk--2 { --float-y: -20px; animation-duration: 9s;  animation-delay: -2.2s; }
.lc-desk--3 { --float-y: -16px; animation-duration: 11s; animation-delay: -4.6s; }

.lc-macbook {
  --float-y: -12px;
  animation: lc-float 6s ease-in-out infinite;
}

/* Card "Design de Posts": os dois celulares inclinados flutuam; o da frente
   respira, porque a base dele encosta na borda do card (sobra 1.5px) e
   qualquer translação revelaria o corte. */
.lc-phone--a { --float-y: -18px; animation: lc-float 8s ease-in-out infinite; }
.lc-phone--b { --float-y: -24px; animation: lc-float 10.5s ease-in-out infinite; animation-delay: -3s; }

.lc-phone-flat {
  --breathe: 1.022;
  animation: lc-breathe 6.5s ease-in-out infinite;
  animation-delay: -1.4s;
}

/* Amplitudes do mobile: o card tem 205.875px contra 540px do desktop, então
   as distâncias acompanham essa proporção (~0.38). */
.frame-mobile .lc-btn-icon   { --arrow-travel: 1.5px; }
.frame-mobile .lc-desk--1    { --float-y: -5px; }
.frame-mobile .lc-desk--2    { --float-y: -7px; }
.frame-mobile .lc-desk--3    { --float-y: -6px; }
.frame-mobile .lc-macbook    { --float-y: -4.5px; }
.frame-mobile .lc-phone--a   { --float-y: -6.5px; }
.frame-mobile .lc-phone--b   { --float-y: -9px; }
.frame-mobile .lc-phone-flat { --breathe: 1.018; }

@media (prefers-reduced-motion: reduce) {
  .lc-btn-icon,
  .lc-desk,
  .lc-macbook,
  .lc-phone,
  .lc-phone-flat {
    animation: none;
  }
}

/* =========================================================================
   Carrossel de imagens (47:29 / 47:37)
   Mesma mecânica de marquee infinito do Pags slider (translate3d tocado pelo
   script.js). Ao passar o mouse, o trilho desacelera até parar e a foto sob
   o ponteiro aumenta — o zoom entra por JS (script.js escreve o scale a
   cada frame, junto com a posição), o overflow:hidden aqui é só o que
   recorta a imagem nas bordas arredondadas do card enquanto ela cresce.
   ========================================================================= */

.carousel {
  position: absolute;
  top: 2619px;
  height: 405px;
}

.carousel-track {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  will-change: transform;
}

.cslide {
  position: relative;
  flex-shrink: 0;
  width: 720px;
  height: 405px;
  border-radius: 13.526px;
  overflow: hidden;
}

.cslide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
}

.m-carousel {
  position: absolute;
  top: 1320px;
  height: 141px;
}

.m-carousel .carousel-track {
  gap: 11.141px;
}

.m-carousel .cslide {
  width: 250.667px;
  height: 141px;
  border-radius: 4.709px;
}