/* =========================================
   TREVO — CSS PRINCIPAL
========================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f8fbfc;
  color: #0c1114;
  overflow-x: hidden;
}

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


/* =========================================
   TOPO
========================================= */

.topo {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 82px;

  padding: 0 5%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 1000;

  background: rgba(248, 251, 252, 0.88);
  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-simbolo {
  width: 22px;
  height: 22px;
  position: relative;
}

.logo-simbolo::before,
.logo-simbolo::after {
  content: "";

  position: absolute;

  width: 12px;
  height: 12px;

  border: 1.5px solid #29dbe8;

  border-radius: 50% 50% 50% 3px;
}

.logo-simbolo::before {
  left: 0;
  top: 0;

  transform: rotate(-45deg);
}

.logo-simbolo::after {
  right: 0;
  bottom: 0;

  transform: rotate(135deg);

  opacity: 0.6;
}

.logo-nome {
  font-size: 0.95rem;
  font-weight: 700;

  letter-spacing: 5px;
}

.topo nav {
  display: flex;
  gap: 30px;
}

.topo nav a {
  font-size: 0.84rem;

  color: #4f5b5f;

  transition: color 0.3s ease;
}

.topo nav a:hover {
  color: #00bfcf;
}

.btn-topo {
  padding: 13px 20px;

  border-radius: 999px;

  background: #0d1316;

  color: white;

  font-size: 0.82rem;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.btn-topo:hover {
  transform: translateY(-2px);

  background: #00bfcf;
}


/* =========================================
   HERO
========================================= */

.hero {
  width: 100%;
  min-height: 100vh;

  padding: 130px 5% 60px;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap: 75px;

  align-items: center;

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 82% 28%,
      rgba(41, 219, 232, 0.16),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #fbfeff 0%,
      #f5fbfc 46%,
      #eff9fa 100%
    );
}

.hero-glow {
  position: absolute;

  border-radius: 50%;

  filter: blur(120px);

  pointer-events: none;
}

.hero-glow-1 {
  width: 500px;
  height: 500px;

  background: rgba(40, 218, 231, 0.14);

  right: 0;
  top: 3%;
}

.hero-glow-2 {
  width: 340px;
  height: 340px;

  background: rgba(112, 232, 239, 0.14);

  left: 8%;
  bottom: -120px;
}

.hero-conteudo {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 760px;
}

.hero-badge {
  display: inline-block;

  padding: 9px 13px;

  margin-bottom: 28px;

  border: 1px solid rgba(0, 191, 207, 0.18);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.65);

  font-size: 0.66rem;

  letter-spacing: 2.2px;

  color: #00aebd;
}

.hero h1 {
  max-width: 900px;

  font-size: clamp(4rem, 7vw, 8rem);

  line-height: 0.88;

  letter-spacing: -5px;

  font-weight: 500;
}

.hero h1 span {
  display: block;

  color: #00bdd0;
}

.hero-conteudo > p {
  max-width: 580px;

  margin-top: 30px;

  color: #647176;

  line-height: 1.7;

  font-size: 1rem;
}

.hero-acoes {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 34px;
}

.btn-principal,
.btn-secundario {
  padding: 15px 22px;

  border-radius: 999px;

  font-size: 0.86rem;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.btn-principal {
  background:
    linear-gradient(
      135deg,
      #22d8e6,
      #6eeaf1
    );

  color: #052326;

  box-shadow:
    0 14px 35px
    rgba(34, 216, 230, 0.16);
}

.btn-principal:hover {
  transform: translateY(-3px);

  box-shadow:
    0 20px 50px
    rgba(34, 216, 230, 0.22);
}

.btn-secundario {
  border:
    1px solid
    rgba(0, 0, 0, 0.10);

  background:
    rgba(255, 255, 255, 0.60);
}

.btn-secundario:hover {
  border-color:
    rgba(0, 191, 207, 0.30);
}

.hero-metricas {
  display: flex;

  gap: 42px;

  margin-top: 50px;

  padding-top: 27px;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.07);
}

.hero-metricas strong {
  display: block;

  font-size: 0.92rem;

  font-weight: 600;
}

.hero-metricas span {
  display: block;

  margin-top: 5px;

  color: #7c878b;

  font-size: 0.72rem;
}


/* =========================================
   HERO — MOCKUP
========================================= */

.hero-visual {
  width: 100%;

  min-height: 650px;

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;
}

.browser-card {
  width: min(92%, 650px);

  min-height: 520px;

  background: #0c1215;

  border-radius: 28px;

  overflow: hidden;

  border:
    1px solid
    rgba(0, 0, 0, 0.09);

  box-shadow:
    0 40px 100px
    rgba(10, 35, 39, 0.18),
    0 0 80px
    rgba(38, 216, 230, 0.06);
}

.browser-topo {
  height: 52px;

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 0 18px;

  background: #121a1e;

  border-bottom:
    1px solid
    rgba(255,255,255,0.06);
}

.browser-pontos {
  display: flex;

  gap: 7px;
}

.browser-pontos span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #334046;
}

.browser-url {
  flex: 1;

  padding: 8px 13px;

  border-radius: 999px;

  background: #0c1215;

  color: #6e7b80;

  font-size: 0.66rem;
}

.browser-conteudo {
  min-height: 468px;

  padding: 26px;

  background:
    radial-gradient(
      circle at 80% 25%,
      rgba(39, 218, 231, 0.14),
      transparent 28%
    ),
    #081012;
}

.mockup-header {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.mockup-logo {
  color: white;

  font-weight: 700;

  letter-spacing: 4px;

  font-size: 0.8rem;
}

.mockup-menu {
  display: flex;

  gap: 7px;
}

.mockup-menu span {
  width: 26px;
  height: 3px;

  border-radius: 999px;

  background:
    rgba(255,255,255,0.16);
}

.mockup-hero {
  min-height: 380px;

  display: grid;

  grid-template-columns:
    1fr 0.85fr;

  gap: 28px;

  align-items: center;
}

.mockup-texto > span {
  font-size: 0.56rem;

  letter-spacing: 1.7px;

  color: #64e4ec;
}

.mockup-texto h2 {
  margin-top: 15px;

  font-size: 2.6rem;

  line-height: 0.92;

  color: white;

  font-weight: 500;

  letter-spacing: -1.5px;
}

.mockup-botao {
  width: 110px;
  height: 34px;

  margin-top: 24px;

  border-radius: 999px;

  background: #62e4ec;
}

.mockup-imagem {
  height: 300px;

  border-radius: 18px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.15),
      transparent
    ),
    url("https://images.unsplash.com/photo-1559839734-2b71ea197ec2?auto=format&fit=crop&w=800&q=90");

  background-size: cover;

  background-position: center;
}

.floating-card {
  position: absolute;

  padding: 16px 18px;

  background:
    rgba(255,255,255,0.88);

  backdrop-filter: blur(14px);

  border:
    1px solid
    rgba(0,0,0,0.06);

  border-radius: 18px;

  box-shadow:
    0 18px 50px
    rgba(0,0,0,0.09);
}

.floating-card span {
  display: block;

  color: #00bfcf;

  font-size: 0.62rem;

  margin-bottom: 7px;
}

.floating-card p {
  color: #263236;

  font-size: 0.76rem;
}

.card-1 {
  left: -10px;

  bottom: 120px;
}

.card-2 {
  right: -10px;

  top: 120px;
}


/* =========================================
   MANIFESTO
========================================= */

.manifesto {
  min-height: 82vh;

  padding: 120px 8%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  background: #0d1316;

  color: white;
}

.manifesto > span {
  margin-bottom: 40px;

  color: #29dbe8;

  font-size: 0.68rem;
}

.manifesto h2 {
  max-width: 1250px;

  font-size:
    clamp(3.5rem, 7vw, 7.5rem);

  line-height: 0.92;

  letter-spacing: -4px;

  font-weight: 400;
}

.manifesto h2 strong {
  display: block;

  color: #39deea;

  font-weight: 400;
}


/* =========================================
   PORTFÓLIO
========================================= */

.portfolio-video {
  padding: 130px 6%;

  background: #f8fbfc;
}

.portfolio-cabecalho {
  display: grid;

  grid-template-columns:
    1.2fr 0.8fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 55px;
}

.portfolio-cabecalho span {
  color: #00aebe;

  font-size: 0.67rem;

  letter-spacing: 2.2px;
}

.portfolio-cabecalho h2 {
  margin-top: 18px;

  font-size:
    clamp(3rem, 6vw, 6.2rem);

  line-height: 0.93;

  letter-spacing: -3.5px;

  font-weight: 400;
}

.portfolio-cabecalho h2 strong {
  display: block;

  color: #00bfcf;

  font-weight: 400;
}

.portfolio-cabecalho > p {
  max-width: 470px;

  color: #6e7a7e;

  line-height: 1.7;
}


/* =========================================
   VÍDEO + CAPA
========================================= */

.video-frame {
  width: 100%;

  aspect-ratio: 16 / 9;

  position: relative;

  overflow: hidden;

  border-radius: 28px;

  background: #091013;

  border:
    1px solid
    rgba(0,0,0,0.06);

  box-shadow:
    0 35px 90px
    rgba(10,35,39,0.16);
}

.video-frame video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  background: #091013;
}

.video-capa {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 40px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(38,220,232,0.18),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(5,12,15,0.93),
      rgba(11,25,29,0.90)
    );

  backdrop-filter: blur(6px);

  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.video-capa.esconder {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}

.video-mini {
  display: block;

  margin-bottom: 22px;

  color: #54e3ed;

  font-size: 0.65rem;

  letter-spacing: 2.4px;
}

.video-capa h3 {
  max-width: 820px;

  margin: 0;

  color: white;

  font-size:
    clamp(2.8rem, 5vw, 5.7rem);

  line-height: 0.93;

  letter-spacing: -3px;

  font-weight: 400;
}

.video-capa h3 strong {
  display: block;

  color: #4ce0eb;

  font-weight: 400;
}

.video-capa p {
  margin-top: 22px;

  color: #92a2a6;

  font-size: 0.86rem;
}

.video-play-premium {
  margin-top: 32px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding:
    12px 20px
    12px 12px;

  border:
    1px solid
    rgba(255,255,255,0.14);

  border-radius: 999px;

  background:
    rgba(255,255,255,0.08);

  backdrop-filter: blur(14px);

  color: white;

  font-size: 0.84rem;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.video-play-premium:hover {
  transform: translateY(-3px);

  background:
    rgba(77,225,235,0.14);

  border-color:
    rgba(77,225,235,0.40);

  box-shadow:
    0 18px 45px
    rgba(76,224,235,0.12);
}

.play-icone {
  width: 46px;
  height: 46px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #4ce0eb;

  color: #061719;

  font-size: 0.9rem;

  padding-left: 2px;

  box-shadow:
    0 0 30px
    rgba(76,224,235,0.22);
}

.video-etiqueta {
  position: absolute;

  left: 22px;
  bottom: 20px;

  z-index: 3;

  padding: 8px 12px;

  border-radius: 999px;

  background:
    rgba(5,14,17,0.72);

  backdrop-filter: blur(12px);

  color: #8cebf0;

  font-size: 0.6rem;

  letter-spacing: 1.6px;

  pointer-events: none;
}


/* =========================================
   SERVIÇOS — PREMIUM
========================================= */

.servicos {
  padding: 140px 6%;

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(41,219,232,0.11),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #f9fcfd,
      #edf8f9
    );
}

.servicos::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(0,0,0,0.023) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,0.023) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  pointer-events: none;
}

.secao-topo {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 60px;

  position: relative;

  z-index: 2;
}

.secao-topo span {
  color: #00bfcf;

  font-size: 0.68rem;
}

.secao-topo p {
  color: #8a9497;

  font-size: 0.68rem;

  letter-spacing: 2px;
}

.servicos-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 22px;

  position: relative;

  z-index: 2;
}

.servicos article {
  min-height: 380px;

  padding: 34px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  position: relative;

  overflow: hidden;

  border-radius: 26px;

  border:
    1px solid
    rgba(0,191,207,0.12);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(244,251,252,0.94)
    );

  box-shadow:
    0 18px 50px
    rgba(19,75,84,0.06);

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.servicos article::before {
  content: "";

  width: 190px;
  height: 190px;

  position: absolute;

  top: -80px;
  right: -80px;

  border-radius: 50%;

  background:
    rgba(41,219,232,0.11);

  filter: blur(55px);
}

.servicos article:hover {
  transform: translateY(-9px);

  border-color:
    rgba(0,191,207,0.28);

  box-shadow:
    0 30px 75px
    rgba(19,75,84,0.11);
}

.servicos article > span {
  color: #00bfcf;

  font-size: 0.66rem;

  letter-spacing: 2px;

  position: relative;

  z-index: 2;
}

.servicos h3 {
  max-width: 280px;

  margin-top: auto;

  position: relative;

  z-index: 2;

  font-size: 2.2rem;

  line-height: 1;

  letter-spacing: -1.4px;

  font-weight: 500;
}

.servicos p {
  max-width: 310px;

  margin-top: 16px;

  position: relative;

  z-index: 2;

  color: #69777b;

  line-height: 1.6;

  font-size: 0.88rem;
}


/* =========================================
   PROCESSO
========================================= */

.processo {
  padding: 130px 6%;

  background: #eef9fa;
}

.processo-conteudo {
  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap: 80px;
}

.processo-conteudo > h2 {
  font-size:
    clamp(3rem, 5vw, 5.8rem);

  line-height: 0.93;

  letter-spacing: -3px;

  font-weight: 400;
}

.processo-conteudo > h2 strong {
  display: block;

  color: #00bfcf;

  font-weight: 400;
}

.processo-lista {
  border-top:
    1px solid
    rgba(0,0,0,0.09);
}

.processo-lista div {
  min-height: 120px;

  display: grid;

  grid-template-columns:
    50px 1fr;

  align-items: center;

  border-bottom:
    1px solid
    rgba(0,0,0,0.09);
}

.processo-lista span {
  color: #00bfcf;

  font-size: 0.68rem;
}

.processo-lista h3 {
  font-size: 1.5rem;

  font-weight: 400;
}


/* =========================================
   CTA FINAL
========================================= */

.cta-final {
  min-height: 82vh;

  padding: 120px 8%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(54,220,232,0.14),
      transparent 35%
    ),
    #0d1316;

  color: white;
}

.cta-final > span {
  margin-bottom: 30px;

  color: #4fe0ea;

  font-size: 0.68rem;

  letter-spacing: 2px;
}

.cta-final h2 {
  max-width: 1000px;

  font-size:
    clamp(3.5rem, 7vw, 7rem);

  line-height: 0.92;

  letter-spacing: -4px;

  font-weight: 400;
}

.cta-final h2 strong {
  display: block;

  color: #49e1eb;

  font-weight: 400;
}

.cta-final p {
  max-width: 520px;

  margin-top: 25px;

  color: #92a0a3;

  line-height: 1.7;
}

.btn-final {
  margin-top: 35px;

  padding: 16px 25px;

  border-radius: 999px;

  background: #46e0ea;

  color: #071d20;

  font-size: 0.86rem;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.btn-final:hover {
  transform: translateY(-3px);

  box-shadow:
    0 18px 45px
    rgba(70,224,234,0.20);
}


/* =========================================
   FOOTER
========================================= */

footer {
  padding:
    55px 6%
    30px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  grid-template-areas:
    "marca contacto"
    "copyright copyright";

  gap:
    40px 60px;

  background: #080d10;

  color: white;
}

footer > div:first-child {
  grid-area: marca;
}

.footer-contacto {
  grid-area: contacto;
}

.logo-footer {
  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 5px;
}

footer > div:first-child > p {
  margin-top: 10px;

  color: #6c777b;

  font-size: 0.8rem;
}

.footer-contacto p {
  margin-bottom: 7px;

  color: #7b878b;

  font-size: 0.8rem;
}

.footer-contacto a {
  transition: color 0.25s ease;
}

.footer-contacto a:hover {
  color: #42dfe9;
}

.copyright {
  grid-area: copyright;

  padding-top: 30px;

  border-top:
    1px solid
    rgba(255,255,255,0.07);

  color: #4d575b;

  font-size: 0.72rem;
}


/* =========================================
   ANIMAÇÕES
========================================= */

.animar {
  opacity: 0;

  transform:
    translateY(42px);

  transition:
    opacity 0.9s
    cubic-bezier(.2,.7,.2,1),

    transform 0.9s
    cubic-bezier(.2,.7,.2,1);
}

.animar.ativo {
  opacity: 1;

  transform:
    translateY(0);
}

.hero-conteudo.animar {
  transform:
    translateX(-45px);
}

.hero-conteudo.animar.ativo {
  transform:
    translateX(0);
}

.hero-visual.animar {
  transform:
    translateX(45px)
    scale(0.98);
}

.hero-visual.animar.ativo {
  transform:
    translateX(0)
    scale(1);
}


/* MOCKUP FLUTUANDO */

.browser-card {
  animation:
    flutuar
    5s
    ease-in-out
    infinite;
}

@keyframes flutuar {

  0% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-10px);
  }

  100% {
    transform:
      translateY(0);
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

  .topo nav {
    display: none;
  }

  .hero {
    grid-template-columns:
      1fr;

    gap: 45px;
  }

  .hero-conteudo {
    max-width: 900px;
  }

  .hero-visual {
    min-height: 580px;
  }

  .portfolio-cabecalho {
    grid-template-columns:
      1fr;
  }

  .servicos-grid {
    grid-template-columns:
      1fr;
  }

  .processo-conteudo {
    grid-template-columns:
      1fr;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .topo {
    height: 72px;

    padding:
      0 20px;
  }

  .btn-topo {
    padding:
      10px 13px;

    font-size:
      0.70rem;
  }

  .hero {
    padding:
      110px
      20px
      35px;
  }

  .hero h1 {
    font-size:
      4rem;

    letter-spacing:
      -3px;
  }

  .hero-acoes {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .hero-metricas {
    flex-wrap:
      wrap;

    gap:
      22px;
  }

  .browser-card {
    width:
      100%;

    min-height:
      450px;
  }

  .mockup-hero {
    grid-template-columns:
      1fr;
  }

  .mockup-imagem {
    height:
      200px;
  }

  .card-1,
  .card-2 {
    display:
      none;
  }

  .manifesto,
  .portfolio-video,
  .servicos,
  .processo,
  .cta-final {
    padding-left:
      20px;

    padding-right:
      20px;
  }

  .video-capa {
    padding:
      24px;
  }

  .video-capa h3 {
    font-size:
      2.4rem;

    letter-spacing:
      -2px;
  }

  .video-capa p {
    font-size:
      0.78rem;
  }

  .video-play-premium {
    margin-top:
      24px;
  }

  .video-etiqueta {
    left:
      14px;

    bottom:
      14px;

    font-size:
      0.52rem;
  }

  footer {
    grid-template-columns:
      1fr;

    grid-template-areas:
      "marca"
      "contacto"
      "copyright";

    padding-left:
      20px;

    padding-right:
      20px;
  }

}


/* REDUZ MOVIMENTO SE O SISTEMA PEDIR */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

}


/* CORREÇÃO FINAL DO RODAPÉ */

footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "marca contacto"
    "copyright copyright";
}

footer > div:first-child {
  grid-area: marca;
}

.footer-contacto {
  grid-area: contacto;
}

.copyright {
  grid-area: copyright;
  order: 3;

  width: 100%;
  margin-top: 20px;
  padding-top: 30px;

  border-top: 1px solid rgba(255,255,255,0.07);

  color: #4d575b;
  font-size: 0.72rem;
}

@media (max-width: 600px) {

  footer {
    grid-template-columns: 1fr;

    grid-template-areas:
      "marca"
      "contacto"
      "copyright";
  }

}

/* =========================================
   CORREÇÃO DO HERO — POSIÇÃO TEXTO + IMAGEM
========================================= */

.hero {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  grid-template-areas:
    "conteudo visual";

  align-items: center !important;

  gap: 70px;

  min-height: 100vh;
}


/* TEXTO SEMPRE À ESQUERDA */

.hero-conteudo {
  grid-area: conteudo !important;

  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 100%;

  align-self: center;
}


/* MOCKUP / IMAGEM SEMPRE À DIREITA */

.hero-visual {
  grid-area: visual !important;

  grid-column: 2 !important;
  grid-row: 1 !important;

  width: 100%;

  min-height: 620px;

  display: flex;

  align-items: center;
  justify-content: center;

  align-self: center;
}


/* GARANTE QUE O MOCKUP NÃO DESÇA */

.browser-card {
  width: min(100%, 650px);

  margin: 0 auto;
}


/* TABLET E MOBILE */

@media (max-width: 950px) {

  .hero {
    grid-template-columns: 1fr !important;

    grid-template-areas:
      "conteudo"
      "visual";

    gap: 45px;
  }

  .hero-conteudo {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .hero-visual {
    grid-column: 1 !important;
    grid-row: 2 !important;

    min-height: 520px;
  }

}


/* =========================================
   O QUE ENTREGAMOS — UPGRADE PREMIUM
========================================= */

.servicos {
  position: relative;
  overflow: hidden;

  padding: 150px 6%;

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(41, 219, 232, 0.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(0, 191, 207, 0.08),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #f8fcfd 0%,
      #edf8f9 100%
    );
}


/* GRID SUAVE DE FUNDO */

.servicos::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(6, 27, 31, 0.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(6, 27, 31, 0.028) 1px,
      transparent 1px
    );

  background-size: 54px 54px;

  pointer-events: none;
}


/* TOPO DA SECÇÃO */

.servicos .secao-topo {
  position: relative;
  z-index: 2;

  margin-bottom: 65px;
}

.servicos .secao-topo span {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #0d1518;

  color: #4ce0eb;

  font-size: 0.68rem;
}

.servicos .secao-topo p {
  color: #536267;

  font-size: 0.72rem;

  letter-spacing: 2.5px;

  font-weight: 600;
}


/* GRID DOS CARDS */

.servicos-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;
}


/* CARD */

.servicos article {
  min-height: 430px;

  position: relative;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;

  padding: 38px;

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(244, 251, 252, 0.90)
    );

  border:
    1px solid
    rgba(0, 191, 207, 0.14);

  box-shadow:
    0 20px 60px
    rgba(17, 63, 70, 0.07);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease;
}


/* NÚMERO GIGANTE NO FUNDO */

.servicos article::after {
  content: attr(data-numero);

  position: absolute;

  top: 18px;
  right: 24px;

  font-size: 7rem;

  line-height: 1;

  font-weight: 700;

  color: rgba(0, 191, 207, 0.055);

  letter-spacing: -6px;

  pointer-events: none;
}


/* GLOW INTERNO */

.servicos article::before {
  content: "";

  position: absolute;

  width: 230px;
  height: 230px;

  top: -90px;
  right: -80px;

  border-radius: 50%;

  background:
    rgba(41, 219, 232, 0.14);

  filter: blur(55px);

  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}


/* NÚMERO PEQUENO */

.servicos article > span {
  position: absolute;

  top: 30px;
  left: 34px;

  z-index: 2;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(0, 191, 207, 0.18);

  background:
    rgba(255, 255, 255, 0.72);

  color: #00b8c8;

  font-size: 0.68rem;

  backdrop-filter: blur(10px);
}


/* TÍTULO */

.servicos h3 {
  position: relative;

  z-index: 2;

  max-width: 290px;

  margin-bottom: 18px;

  font-size: 2.45rem;

  line-height: 0.98;

  letter-spacing: -1.8px;

  font-weight: 500;
}


/* TEXTO */

.servicos p {
  position: relative;

  z-index: 2;

  max-width: 320px;

  color: #68767a;

  font-size: 0.9rem;

  line-height: 1.65;
}


/* LINHA PREMIUM NO FUNDO */

.servicos article h3::after {
  content: "";

  display: block;

  width: 44px;
  height: 2px;

  margin-top: 20px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #00bfd0,
      #6ce7ef
    );

  transition:
    width 0.4s ease;
}


/* HOVER */

.servicos article:hover {
  transform:
    translateY(-12px);

  border-color:
    rgba(0, 191, 207, 0.30);

  box-shadow:
    0 35px 90px
    rgba(17, 63, 70, 0.13);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f1fbfc
    );
}

.servicos article:hover::before {
  transform:
    scale(1.15);

  opacity: 1;
}

.servicos article:hover h3::after {
  width: 85px;
}


/* DIFERENCIAÇÃO SUTIL ENTRE OS 3 */

.servicos article:nth-child(1) {
  transform:
    translateY(0);
}

.servicos article:nth-child(2) {
  transform:
    translateY(22px);
}

.servicos article:nth-child(3) {
  transform:
    translateY(44px);
}

.servicos article:nth-child(1):hover {
  transform:
    translateY(-12px);
}

.servicos article:nth-child(2):hover {
  transform:
    translateY(10px);
}

.servicos article:nth-child(3):hover {
  transform:
    translateY(32px);
}


/* MOBILE */

@media (max-width: 950px) {

  .servicos-grid {
    grid-template-columns:
      1fr;
  }

  .servicos article,
  .servicos article:nth-child(1),
  .servicos article:nth-child(2),
  .servicos article:nth-child(3) {
    transform:
      none;
  }

  .servicos article:hover {
    transform:
      translateY(-8px);
  }

}


/* =========================================
   AJUSTE DE CONTRASTE — O QUE ENTREGAMOS
========================================= */

.servicos {
  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(41, 219, 232, 0.18),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      #eaf6f7 0%,
      #dceff1 100%
    );
}


/* CARDS MAIS CONTRASTADOS */

.servicos article {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.95),
      rgba(230,244,246,0.96)
    );

  border:
    1px solid
    rgba(0, 162, 177, 0.18);

  box-shadow:
    0 20px 55px
    rgba(15, 71, 80, 0.09);
}


/* NÚMERO GRANDE MAIS VISÍVEL */

.servicos article::after {
  color:
    rgba(0, 174, 190, 0.15);
}


/* BOLINHA DO NÚMERO */

.servicos article > span {
  background:
    rgba(8, 24, 28, 0.94);

  color:
    #4ce0eb;

  border:
    1px solid
    rgba(76, 224, 235, 0.28);
}


/* TÍTULOS */

.servicos h3 {
  color:
    #0b171b;
}


/* TEXTOS */

.servicos p {
  color:
    #526469;
}


/* HOVER MAIS FORTE */

.servicos article:hover {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #e7f6f8
    );

  border-color:
    rgba(0, 174, 190, 0.36);

  box-shadow:
    0 35px 85px
    rgba(12, 70, 80, 0.16);
}


/* NÚMERO GRANDE AINDA MAIS FORTE NO HOVER */

.servicos article:hover::after {
  color:
    rgba(0, 174, 190, 0.24);
}


/* ==================================================
   O QUE ENTREGAMOS — TREVO PREMIUM V2
================================================== */

.servicos {
  padding: 150px 6% 175px;

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(36, 214, 227, 0.22),
      transparent 25%
    ),
    radial-gradient(
      circle at 5% 85%,
      rgba(0, 177, 193, 0.09),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #eaf6f7 0%,
      #dceff1 100%
    );
}


/* GRID SUAVE */

.servicos::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(7, 31, 35, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7, 31, 35, 0.035) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  pointer-events: none;
}


/* INTRO */

.servicos-intro {
  position: relative;
  z-index: 3;

  max-width: 1150px;

  margin-bottom: 75px;
}


.servicos .secao-topo {
  margin-bottom: 30px;
}


.servicos .secao-topo span {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #0b171a;

  color: #54e3ed;
}


.servicos-intro h2 {
  max-width: 1000px;

  font-size:
    clamp(3rem, 5.8vw, 6.4rem);

  line-height: 0.92;

  letter-spacing: -4px;

  font-weight: 400;

  color: #0a171b;
}


.servicos-intro h2 strong {
  display: block;

  color: #00aebe;

  font-weight: 400;
}


.servicos-intro-texto {
  max-width: 560px;

  margin-top: 28px;

  color: #53676c;

  font-size: 0.95rem;

  line-height: 1.7;
}


/* GRID */

.servicos-grid {
  position: relative;
  z-index: 3;

  display: grid;

  grid-template-columns:
    1.15fr 1fr 1fr;

  gap: 24px;

  align-items: stretch;
}


/* CARDS */

.servicos article {
  min-height: 470px;

  padding: 34px;

  position: relative;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-radius: 30px;

  border:
    1px solid
    rgba(0, 155, 170, 0.17);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.96),
      rgba(228,243,245,0.95)
    );

  box-shadow:
    0 25px 70px
    rgba(13, 62, 70, 0.09);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}


/* PRIMEIRO CARD ESCURO */

.servicos article.servico-destaque {
  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(52, 220, 232, 0.20),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #101b1f,
      #071013
    );

  border-color:
    rgba(69, 222, 232, 0.18);

  color: white;

  box-shadow:
    0 35px 90px
    rgba(7, 36, 41, 0.22);
}


/* NÚMERO GRANDE */

.servicos article::after {
  content: attr(data-numero);

  position: absolute;

  top: 8px;
  right: 20px;

  font-size: 8.5rem;

  line-height: 1;

  font-weight: 700;

  letter-spacing: -8px;

  color:
    rgba(0, 160, 175, 0.14);

  pointer-events: none;
}


.servicos article.servico-destaque::after {
  color:
    rgba(78, 225, 235, 0.10);
}


/* NÚMERO PEQUENO */

.servicos article > span {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  z-index: 3;

  border-radius: 50%;

  background: #0b181b;

  color: #51e0ea;

  font-size: 0.68rem;
}


.servicos article.servico-destaque > span {
  background:
    rgba(255,255,255,0.08);

  border:
    1px solid
    rgba(255,255,255,0.12);
}


/* CONTEÚDO INFERIOR */

.servico-conteudo {
  margin-top: auto;

  position: relative;
  z-index: 3;
}


.servico-label {
  margin-bottom: 17px !important;

  color: #00aebe !important;

  font-size: 0.61rem !important;

  letter-spacing: 2px;

  font-weight: 600;
}


.servico-destaque .servico-label {
  color: #57e4ed !important;
}


/* TÍTULO */

.servicos h3 {
  max-width: 320px;

  margin: 0;

  font-size: 2.55rem;

  line-height: 0.98;

  letter-spacing: -1.8px;

  font-weight: 500;

  color: #0a171b;
}


.servico-destaque h3 {
  color: white;
}


/* TEXTO */

.servicos article .servico-conteudo > p:not(.servico-label) {
  max-width: 330px;

  margin-top: 20px;

  color: #53666b;

  line-height: 1.7;

  font-size: 0.88rem;
}


.servico-destaque .servico-conteudo > p:not(.servico-label) {
  color: #91a3a7;
}


/* TAGS */

.servico-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 28px;
}


.servico-tags small {
  padding: 8px 11px;

  border-radius: 999px;

  border:
    1px solid
    rgba(0, 153, 168, 0.15);

  background:
    rgba(255,255,255,0.55);

  color: #52686d;

  font-size: 0.62rem;

  backdrop-filter: blur(8px);
}


.servico-destaque .servico-tags small {
  background:
    rgba(255,255,255,0.055);

  border-color:
    rgba(255,255,255,0.10);

  color: #a2b4b8;
}


/* DETALHE CIANO NO CARD ESCURO */

.servico-destaque::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #39dce8,
      transparent
    );
}


/* HOVER */

.servicos article:hover {
  transform: translateY(-12px);

  border-color:
    rgba(0, 168, 184, 0.35);

  box-shadow:
    0 38px 90px
    rgba(11, 58, 66, 0.16);
}


.servicos article.servico-destaque:hover {
  box-shadow:
    0 45px 110px
    rgba(5, 42, 48, 0.30);
}


/* POSIÇÃO DIFERENTE DOS CARDS */

.servicos article:nth-child(2) {
  transform: translateY(28px);
}

.servicos article:nth-child(3) {
  transform: translateY(56px);
}


.servicos article:nth-child(2):hover {
  transform: translateY(16px);
}

.servicos article:nth-child(3):hover {
  transform: translateY(44px);
}


/* MOBILE */

@media (max-width: 950px) {

  .servicos-grid {
    grid-template-columns: 1fr;
  }

  .servicos article,
  .servicos article:nth-child(2),
  .servicos article:nth-child(3),
  .servicos article:nth-child(2):hover,
  .servicos article:nth-child(3):hover {
    transform: none;
  }

  .servicos article:hover {
    transform: translateY(-8px);
  }

}


@media (max-width: 600px) {

  .servicos {
    padding-top: 110px;
    padding-bottom: 110px;
  }

  .servicos-intro h2 {
    font-size: 3.1rem;

    letter-spacing: -2.5px;
  }

  .servicos article {
    min-height: 420px;

    padding: 28px;
  }

  .servicos h3 {
    font-size: 2.2rem;
  }

}


/* =========================================
   ANIMAÇÕES PREMIUM TREVO
========================================= */

.reveal {
  opacity: 0;

  transform:
    translateY(45px);

  transition:
    opacity 0.95s
    cubic-bezier(.16,.8,.24,1),

    transform 0.95s
    cubic-bezier(.16,.8,.24,1);
}


.reveal.ativo {
  opacity: 1;

  transform:
    translateY(0);
}



/* HERO */

.hero-conteudo.reveal {
  transform:
    translateX(-55px);
}


.hero-conteudo.reveal.ativo {
  transform:
    translateX(0);
}


.hero-visual.reveal {
  transform:
    translateX(55px)
    scale(0.97);

  transition-duration:
    1.15s;
}


.hero-visual.reveal.ativo {
  transform:
    translateX(0)
    scale(1);
}



/* MANIFESTO */

.manifesto h2.reveal {
  transform:
    translateY(70px);

  opacity: 0;
}


.manifesto h2.reveal.ativo {
  transform:
    translateY(0);

  opacity: 1;
}



/* VÍDEO */

.video-frame.reveal {
  transform:
    translateY(55px)
    scale(0.97);

  opacity: 0;
}


.video-frame.reveal.ativo {
  transform:
    translateY(0)
    scale(1);

  opacity: 1;
}



/* SERVIÇOS */

.servicos article.reveal {
  opacity: 0;

  transform:
    translateY(70px)
    scale(0.97);
}


.servicos article.reveal.ativo {
  opacity: 1;
}


/* MANTÉM A ESCADINHA */

.servicos article:nth-child(1).reveal.ativo {
  transform:
    translateY(0)
    scale(1);
}


.servicos article:nth-child(2).reveal.ativo {
  transform:
    translateY(28px)
    scale(1);
}


.servicos article:nth-child(3).reveal.ativo {
  transform:
    translateY(56px)
    scale(1);
}



/* PROCESSO */

.processo-lista > div.reveal {
  opacity: 0;

  transform:
    translateX(35px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}


.processo-lista > div.reveal.ativo {
  opacity: 1;

  transform:
    translateX(0);
}



/* CTA FINAL */

.cta-final h2.reveal {
  transform:
    translateY(55px);

  opacity: 0;
}


.cta-final h2.reveal.ativo {
  transform:
    translateY(0);

  opacity: 1;
}



/* MOCKUP FLUTUANDO */

.browser-card {
  animation:
    flutuarPremium
    6s
    ease-in-out
    infinite;
}


@keyframes flutuarPremium {

  0% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-10px);
  }

  100% {
    transform:
      translateY(0);
  }

}



/* HOVER MAIS SUAVE NOS CARDS */

.servicos article {
  will-change:
    transform;
}



/* MOBILE */

@media (max-width: 950px) {

  .hero-conteudo.reveal,
  .hero-visual.reveal,
  .processo-lista > div.reveal {

    transform:
      translateY(35px);

  }


  .hero-conteudo.reveal.ativo,
  .hero-visual.reveal.ativo,
  .processo-lista > div.reveal.ativo {

    transform:
      translateY(0);

  }


  .servicos article:nth-child(1).reveal.ativo,
  .servicos article:nth-child(2).reveal.ativo,
  .servicos article:nth-child(3).reveal.ativo {

    transform:
      translateY(0)
      scale(1);

  }

}


/* =========================================
   CTA INTERMÉDIO PREMIUM
========================================= */

.cta-intermedio {
  padding: 80px 6%;

  background:
    linear-gradient(
      135deg,
      #d9ecef 0%,
      #eef8f9 100%
    );
}


.cta-intermedio-conteudo {
  min-height: 420px;

  position: relative;

  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  padding: 65px 70px;

  border-radius: 34px;

  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(57, 220, 232, 0.22),
      transparent 28%
    ),
    radial-gradient(
      circle at 15% 100%,
      rgba(0, 183, 199, 0.10),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #0d171b 0%,
      #071013 100%
    );

  border:
    1px solid
    rgba(75, 224, 235, 0.12);

  box-shadow:
    0 40px 100px
    rgba(5, 40, 47, 0.20);
}


/* DETALHE LUMINOSO */

.cta-intermedio-conteudo::before {
  content: "";

  position: absolute;

  width: 380px;
  height: 380px;

  right: -80px;
  top: -130px;

  border-radius: 50%;

  border:
    1px solid
    rgba(76, 224, 235, 0.16);

  box-shadow:
    0 0 100px
    rgba(76, 224, 235, 0.08);
}


.cta-intermedio-conteudo::after {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  right: 40px;
  bottom: -120px;

  border-radius: 50%;

  background:
    rgba(76, 224, 235, 0.07);

  filter: blur(10px);
}


/* LABEL */

.cta-intermedio-conteudo > span {
  position: relative;
  z-index: 2;

  margin-bottom: 22px;

  color: #4ce0eb;

  font-size: 0.66rem;

  letter-spacing: 2.4px;

  font-weight: 600;
}


/* TÍTULO */

.cta-intermedio h2 {
  position: relative;
  z-index: 2;

  max-width: 900px;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(3.2rem, 5.8vw, 6.4rem);

  line-height: 0.92;

  letter-spacing: -4px;

  font-weight: 400;
}


.cta-intermedio h2 strong {
  display: block;

  color: #4ce0eb;

  font-weight: 400;
}


/* TEXTO */

.cta-intermedio p {
  position: relative;
  z-index: 2;

  max-width: 520px;

  margin-top: 24px;

  color: #93a5a9;

  font-size: 0.95rem;

  line-height: 1.7;
}


/* BOTÃO CTA */

.cta-intermedio-botao {
  position: relative;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-top: 34px;

  padding: 15px 22px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #42dfe9,
      #6de8ef
    );

  color: #061719;

  font-size: 0.86rem;

  font-weight: 600;

  box-shadow:
    0 16px 40px
    rgba(66, 223, 233, 0.18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


.cta-intermedio-botao span {
  font-size: 1.15rem;

  transition:
    transform 0.3s ease;
}


.cta-intermedio-botao:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 24px 55px
    rgba(66, 223, 233, 0.28);
}


.cta-intermedio-botao:hover span {
  transform:
    translateX(5px);
}


/* MOBILE */

@media (max-width: 600px) {

  .cta-intermedio {
    padding:
      50px 20px;
  }

  .cta-intermedio-conteudo {
    min-height: 420px;

    padding:
      45px 28px;

    border-radius:
      28px;
  }

  .cta-intermedio h2 {
    font-size:
      3rem;

    letter-spacing:
      -2.5px;
  }

  .cta-intermedio p {
    font-size:
      0.88rem;
  }

}

/* =========================================
   AJUSTE MOBILE — VÍDEO PORTFÓLIO
========================================= */

@media (max-width: 600px) {

  .video-frame {
    aspect-ratio: auto;
    height: 360px;
    border-radius: 24px;
  }

  .video-capa {
    padding: 28px 20px;
    justify-content: center;
  }

  .video-mini {
    margin-bottom: 14px;
    font-size: 0.56rem;
  }

  .video-capa h3 {
    max-width: 300px;
    font-size: 2rem;
    line-height: 0.95;
    letter-spacing: -1.5px;
  }

  .video-capa p {
    margin-top: 16px;
    font-size: 0.72rem;
  }

  .video-play-premium {
    margin-top: 18px;
    padding: 9px 16px 9px 9px;
    font-size: 0.76rem;
  }

  .play-icone {
    width: 40px;
    height: 40px;
  }

  .video-etiqueta {
    display: none;
  }
}

@media (max-width: 600px) {
  .hero-visual {
    display: none;
  }
}