body {
        margin: 0;
        font-family: system-ui, sans-serif;
        background: #111;
        color: white;
      }

      .header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        background: #2c2c2c;
        padding: 10px 20px;
        gap: 1rem;
      }

      .player {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .player audio {
        width: 100%;
        max-width: 350px;
        display: block;
        margin: 0 auto;
      }

      .logo {
        font-size: 1.2rem;
        line-height: 1.2;
        text-align: center;
      }

      .logo span {
        font-size: 0.8rem;
        color: #bbb;
      }

      .social {
        display: flex;
        gap: 10px;
      }

      .social a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: white;
        font-size: 18px;
        text-decoration: none;
        transition: all 0.3s ease;
      }

      .fb {
        background: #3b5998;
      }
      .fb:hover {
        background: #4c70ba;
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(59, 89, 152, 0.7);
      }
      
      .x {
        background: #000000;
      }
      .x:hover {
        background: #333333;
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
      }
      
      .ig {
        background: #c13584;
      }
      .ig:hover {
        background: #e1306c;
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(193, 53, 132, 0.7);
      }
      
      .wa {
        background: #25d366;
      }
      .wa:hover {
        background: #34eb78;
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(37, 211, 102, 0.7);
      }

      .hero {
        position: relative;
        text-align: center;
      }

      .bg {
        width: 100%;
        height: auto;
        max-height: 550px;
        object-fit: cover;
      }

      .hero h1 {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        font-size: 35px;
        color: white;
        text-shadow: 0 0 8px black;
      }

      footer {
        background: #2c2c2c;
        text-align: center;
        padding: 10px;
        font-size: 0.9rem;
      }

      @media (max-width: 600px) {
        .header {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 15px;
          padding: 15px 10px;
        }

        .player {
          width: 100%;
          max-width: 100%;
          padding: 0 20px;
          box-sizing: border-box;
        }

        .player audio {
          width: 100%;
          max-width: 280px;
          margin: 0 auto;
        }

        .social {
          justify-content: center;
          flex-wrap: wrap;
        }

        .social a {
          margin: 5px;
        }

        .hero h1 {
          font-size: 1.5rem;
          padding: 0 10px;
        }

        .promo h1 {
            font-size: 27px !important;
        }

        footer {
            padding: 2px;
        }
      }

      .promo {
        background: #000;
        padding: 1rem 1rem;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
      }

      .promo h1 {
        font-size: 36px;
        margin-bottom: 2rem;
      }

      .promo .desktop-only {
        max-width: 1020px;
        margin: 0 auto;
      }

      .promo p {
        margin-bottom: 1.5rem;
        line-height: 1.6;
        font-size: 23px;
        color: white;
      }

      .desktop-only {
        display: block;
      }

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