* {
          margin: 0;
          text-decoration: none;
          padding: 0;
          box-sizing: border-box;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      }

      body {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/novo-fundo.png');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-attachment: fixed;
          color: #333;
      }

      header {
          position: fixed;
          top: 0;
          width: 100%;
          height: 60px;
          background-color: #6d53ff;
          display: flex;
          align-items: center;
          padding: 0 2rem;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          z-index: 1000;
      }

      .header-content {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          max-width: 1200px;
          margin: 0 auto;
      }

      .logo-container {
          display: flex;
          align-items: center;
          text-decoration: none;
      }

      .logo {
          height: 35px;
          margin-right: 12px;
          border-radius: 4px;
      }

      .app-name {
          color: white;
          font-size: 1.4rem;
          font-weight: bold;
          text-shadow: black 3px 1px 2px;
      }


      nav ul {
          display: flex;
          list-style: none;
          gap: 20px;
      }

      nav ul li a {
          color: rgba(255, 255, 255, 0.9);
          text-decoration: none;
          font-size: 0.95rem;
          font-weight: 500;
          transition: color 0.2s;
      }

      nav ul li a:hover {
          color: #ffffff;
          text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
      }

      /* area do Body */
      main {
          flex: 1;
          margin-top: 100px;
          /* Um pouco mais de espaço */
          padding: 2rem;
          max-width: 1200px;
          width: 100%;
          margin-left: auto;
          margin-right: auto;
      }

      .content-card {
          background: white;
          padding: 2.5rem;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          min-height: 400px;
      }

      footer {
          background-color: #0e0f12;
          color: #eee;
          padding: 1.5rem 0;
          text-align: center;
          font-size: 0.9rem;
      }

      /* botao download + como-instalar -------------------------------------------------- */

      .action-buttons {
          display: flex;
          gap: 15px;
          margin-top: 1.5rem;
      }

      .btn-black {
          background-color: #000;
          color: #fff;
          border: none;
          padding: 12px 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 500;
          transition: background-color 0.2s;
      }

      .btn-black:hover {
          background-color: #333;
      }

      .btn-black img {
          height: 20px;
          width: auto;
      }

      .btn-outline {
          background-color: transparent;
          color: #333;
          border: 2px solid #ddd;
          padding: 12px 24px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 500;
          transition: 0.2s;
      }

      .btn-outline:hover {
          border-color: #999;
          background-color: #f5f5f5;
      }

      /* botao pix -------------------------------------------------- */


      .action-buttons {
          display: flex;
          gap: 15px;
          margin-top: 1.5rem;
      }

      .btn-pix {
          background-color: #00b62d;
          color: #fff;
          border: none;
          padding: 12px 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 500;
          transition: background-color 0.2s;
      }

      .btn-pix:hover {
          background-color: #4fff7b;
      }

      .btn-pix img {
          height: 20px;
          width: auto;
      }

      .btn-outline {
          background-color: transparent;
          color: #333;
          border: 2px solid #ddd;
          padding: 12px 24px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 500;
          transition: 0.2s;
      }

      .btn-outline:hover {
          border-color: #999;
          background-color: #f5f5f5;
      }


      /* discord botao-------------------------------------------------- */

      .action-buttons {
          display: flex;
          gap: 15px;
          margin-top: 1.5rem;
      }

      .btn-discord {
          background-color: #3286e6;
          color: #fff;
          border: none;
          padding: 12px 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 500;
          transition: background-color 0.2s;
      }

      .btn-discord:hover {
          background-color: #2fbdff;
      }

      .btn-discord img {
          height: 20px;
          width: auto;
      }

      .btn-outline {
          background-color: transparent;
          color: #333;
          border: 2px solid #ddd;
          padding: 12px 24px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 500;
          transition: 0.2s;
      }

      .btn-outline:hover {
          border-color: #999;
          background-color: #f5f5f5;
      }

      /* botao email -------------------------------------------------- */

      .action-buttons {
          display: flex;
          gap: 15px;
          margin-top: 1.5rem;
      }

      .btn-mail {
          background-color: #a21ce0;
          color: #fff;
          border: none;
          padding: 12px 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 500;
          transition: background-color 0.2s;
      }

      .btn-mail:hover {
          background-color: #dc2fff;
      }

      .btn-mail img {
          height: 20px;
          width: auto;
      }

      .btn-outline {
          background-color: transparent;
          color: #333;
          border: 2px solid #ddd;
          padding: 12px 24px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 500;
          transition: 0.2s;
      }

      .btn-outline:hover {
          border-color: #999;
          background-color: #f5f5f5;
      }

      /* ------------------------------------------------- */


      .social-icons {
          display: flex;
          justify-content: center;
          gap: 20px;
          margin-bottom: 1rem;
          margin-top: 2rem;
      }

      .social-icons img {
          height: 30px;
          width: auto;
          transition: transform 0.2s, filter 0.2s;
          opacity: 1;
      }


      .social-email img {
          height: 24px;
          margin-top: 3px;
      }

      .social-github:hover img {
          filter: brightness(0.5);
      }



      .social-youtube:hover img {
          filter: brightness(0) invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
      }


      .social-email:hover img {
          filter: brightness(0) invert(85%) sepia(28%) saturate(1069%) hue-rotate(170deg) brightness(102%) contrast(102%);
      }


      .split-content {
          display: flex;
          gap: 2rem;
          align-items: center;
      }

      .split-text {
          flex: 1;
      }

      .split-image {
          flex: 1;
          display: flex;
          justify-content: center;
      }

      .split-image img {
          max-width: 100%;
          height: auto;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      @media (max-width: 768px) {
          .split-content {
              flex-direction: column;
          }
      }