#myVideo {
      position: fixed;

      top: 0px;

      left: 0px;

      width: 100vw;

      height: 100vh;

      object-fit: cover;
    }

    body {
      margin: 0;

      height: 100vh;

      display: flex;

      flex-direction: column;

      padding: 0px;
    }

    h1 {
      font-family: "VT323", monospace;

      font-weight: 400;

      font-style: normal;

      color: white;

      padding: 0px;

      margin: 0px;
    }

    .container {
      display: flex;

      justify-content: space-around;

      align-items: start;

      flex-direction: column;

      padding: 20px 40px 20px 40px;

      width: 90vw;

      margin: auto;

      height: 90vh;
    }

    @media screen and (max-width: 768px) {

      .container {
        padding: 0px !important;
      }
      h1{
        font-size: 20px !important;
      }

      .blink{    width: 250px;
      }

      .footer{
        display: none;
      }
    }

    .header {
      z-index: 99;
      /*border: 1px solid white;
      border-radius: 50px;
      padding: 10px 70px;
      background-color: rgba(0, 0, 0, 0.21);
      backdrop-filter: blur(5px);*/
      position: fixed;
      top: 20px;
      left: 40px;
    }

    .header h1{
      line-height: 30px;
    }

    .main-content {
      display: flex;

      justify-content: space-between;

      width: 100%;
    }

    .content {
      z-index: 9;

      display: flex;

      justify-content: space-between;
      width: 100%;

      align-items: center;
    }

    .content-images {
      display: flex;

      flex-direction: column;

      gap: 0px;
    }

    .footer {
      background: #cb3c10;

      height: 20px;

      z-index: 99;

      bottom: 0;
    }

    /* Plano de linhas atrás das imagens */
    #connections-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 5;
      /* abaixo das imagens (z-index: 40) e acima do vídeo */
    }

    /* PRELOADER ABAIXO*/
    /* Preloader */
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      /* fundo preto */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 1s ease, visibility 1s ease;
    }

    #preloader.fade-out {
      opacity: 0;
      visibility: hidden;
    }

    #preloader img {
      width: 120px;
      /* ajuste da logo */
      margin-bottom: 20px;
    }

    .progress-bar {
      width: 200px;
      height: 8px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      overflow: hidden;
    }

    .progress {
      width: 0%;
      height: 100%;
      background: #fff;
      transition: width 0.3s ease;
    }

    /* Conteúdo principal */
    .main-content {
      opacity: 0;
      transition: opacity 1s ease;
    }

    .main-content.show {
      opacity: 1;
    }

    .logo-fixa {
      position: fixed;
      top: 20px;
      /* distância do topo */
      right: 20px;
      /* distância da direita */
      z-index: 99;
      /* garante que fica acima de tudo */
    }

    .logo-fixa img {
      width: 80px;
      /* ajuste o tamanho para caber bem em qualquer tela */
      height: auto;
      cursor: pointer;
      /* opcional, se quiser que pareça clicável */
    }

    .blink {
    animation: blinkText 0.5s infinite;
    }

@keyframes blinkText {
  0%, 22% {
    opacity: 1;
  }
  22%, 66% {
    opacity: 0;
  }
  66%, 80% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}

/* MENU LATERAL*/
.panel {
    position: fixed;       /* fixa em relação à viewport */
    top: 120px;             /* distância do topo */
    right: 48px; 
    border-radius: 10px;
    background: #2f2f2ff2;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    z-index: 999;
    display: none;
    transition-duration: 3s;
  }
  
  /* imagem fixa no canto inferior direito */
  .panel::after {
    content: "";
    position: absolute;
    right: 0px;   /* distância da borda direita */
    bottom: 0px;  /* distância da borda inferior */
    width: 100px;   /* tamanho da imagem */
    height: 100px;
    background: url('https://bailinhomara.com.br/assets/mosca-background.png') no-repeat center/contain;
    opacity: 0.6;  /* opcional, deixa mais discreto */
    pointer-events: none; /* evita clique na imagem */
  }

    /* topo: linha fina e logo + MENU */
    .top {
      display:flex;
      align-items:center; 
      gap:14px;
      margin-bottom: 36px;
      justify-content: space-around;
    }
    .top .line2 {
      height:1px;
      max-width: 50px;
      flex:1;
      background: white;
      border-radius:1px;
    }
    .brand {
      display:flex;
      align-items:center;
      gap:10px;
      color:white;
      font-size:18px;
      letter-spacing:6px;
      text-transform:uppercase;
    }
    
     .logo {
      width:22px;
      height:22px;
      border-radius:50%;
      background-image: url('https://bailinhomara.com.br/assets/mosca-menu.png');
      background-size: contain;
      display:inline-block;
    }

    /* nav principal */
    nav {
      display:flex;
      flex-direction:column;
      gap:38px;
      margin-top: 18px;
      padding-right: 40px;
    }

    .pill {
      width: 78%;
      max-width: 620px;
      min-height:45px;
      background: rgba(0,0,0,0.85);
      color: white;
      display:inline-flex;
      align-items:center;
      padding: 0 20px;
      border-radius: 0 15px 15px 0; /* canto esquerdo quadrado, direito arredondado */
      box-shadow: 0 6px 12px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(255,255,255,0.02);
      text-transform:uppercase;
      letter-spacing:6px;
      font-size:12px;
      font-weight:300;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
      border: 1px solid rgba(255,255,255,0.02);
    }

    /* para alinhar verticalmente similar à imagem (um mais acima, outro mais abaixo) */
    .pill.small { width: 65%; min-height:45px; letter-spacing:3px; font-size:12px; font-weight:bold; }
    .pill.large { width: 100%; min-height:45px; letter-spacing:3px; font-size:12px; font-weight:bold; }

    /* responsividade */
    @media (max-width:420px){
      .mockup{ height: 700px }
      .pill { width: 86% }
    }

    /* acessibilidade: foco visível */
    .pill:focus { outline: 3px solid rgba(74,160,255,0.2); outline-offset:3px; }