body {
   margin: 0;
   font-family: 'Poppins', sans-serif;
   background-size: cover;
   background-attachment: fixed;
   color: white;
   text-align: center;
 }
 body > main {
   flex: 1;
 }
 html, body {
   height: 100%;
   margin: 0;
   display: flex;
   flex-direction: column;
 }
 .nav-container {
   position: absolute;
   top: 1rem;
   right: 1.5rem;
   z-index: 1000;
 }
 .hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
 }
 .hamburger span {
   width: 25px;
   height: 3px;
   background: white;
   display: block;
 }
 nav {
   display: flex;
   gap: 1rem;
   justify-content: flex-end;
   padding: 1rem 2rem;
   background: transparent;
   justify-content: flex-end;
   font-weight: 500;
 }
 nav a {
   color: white;
   text-decoration: none;
 }
 .mobile-nav {
   display: none;
   flex-direction: column;
   background-color: rgba(0, 0, 0, 0.85);
   padding: 1rem;
   border-radius: 8px;
   position: absolute;
   right: 1rem;
   top: 60px;
 }
 .mobile-nav a {
   color: white;
   text-decoration: none;
   margin: 6px 0;
 }
 .logo-container {
   margin-top: 1rem;
 }
 @media (max-width: 768px) {
   nav {
     display: none;
   }
   .hamburger {
     display: flex;
   }
   .mobile-nav.show {
     display: flex;
   }
 }
 .section p {
   font-size: 0.9rem; /* sau chiar 0.85rem */
   line-height: 1.5;
 }
 .section h4, .section h5 {
   font-size: 1.2rem;
   font-weight: 600;
 }
 .styled {
   text-decoration: none;
   color: #ffffff;
   font-size: 0.8rem;
   font-weight: 400;
 }
 .styled-link {
   text-decoration: none;
   color: #ffffff;
   background: rgba(135, 35, 254, 0.4);
   padding: 12px 18px;
   border-radius: 8px;
   font-size: 0.8rem;
   font-weight: 400;
   display: inline-block;
   transition: background 0.3s, transform 0.2s;
   box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
   text-align: center;
 }
 .styled-link:hover {
   background: rgba(107, 196, 202, 1);
   transform: translateY(-3px);
   box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
 }
 .about-section {
   margin-top: 120px; /* dacă e nevoie de mai mult spațiu față de player */
 }
 .player-container {
   background-color: rgba(0, 0, 0, 0.75);
   border-radius: 10px;
   padding: 1rem;
   width: 90%;
   max-width: 640px;
   margin: 2rem auto;
 }
 .styled-button {
   background-color: #6f42c1;
   color: white;
   border: none;
   border-radius: 8px;
   padding: 8px 18px;
   margin: 6px;
   font-weight: 500;
   font-size: 0.8rem;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: all 0.3s ease;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
 }
 .styled-button:hover {
   background: rgba(107, 196, 202, 1);
   box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
   transform: none;
 }
 .section {
   background-color: rgba(0, 0, 0, 0.6);
   margin: 2rem auto;
   padding: 1.5rem;
   border-radius: 0.5rem;
   max-width: 960px;
 }
 .d-flex.flex-wrap.justify-content-center {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
 }
 .genre-box {
   align-items: center;
   justify-content: center;
   display: flex;
   min-width: 200px;
   max-width: 250px;
   height: 60px;
   flex: 1 1 200px;
   background-color: rgba(255, 255, 255, 0.08);
   color: white;
   padding: 1rem;
   border-radius: 0.5rem;
   margin: 0.5rem;
   min-width: 200px;
   transition: background-color 0.3s ease, transform 0.2s ease;
   text-shadow: 0 0 4px #8c52ff;
   text-decoration: none;
   text-align: center;
 }
 .genre-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
 }
 .genre-box:hover {
   background-color: rgba(255, 255, 255, 0.15);
   box-shadow: 0 0 8px rgba(140, 82, 255, 0.6);
   transform: scale(1.02);
 }
 @media (max-width: 576px) {
   .genre-list {
     flex-direction: column;
     align-items: stretch;
     gap: 0.75rem;
     padding: 0 1rem;
   }
   .genre-box {
     width: 100%; /* Take almost full screen width */
     max-width: 100%; /* Prevent overflow */
     flex: none;
     padding: 0.75rem 1rem;
     height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     min-height: 48px; /* Optional: constrain min height */
   }
 }
 .genre-card {
   background-color: rgba(0, 0, 0, 0.7);
   padding: 2rem;
   margin: 2rem auto;
   max-width: 800px;
   border-radius: 10px;
   color: white;
   text-align: center;
   font-family: 'Poppins', sans-serif;
 }
 .genre-card h2 {
   font-size: 1.4rem;
   margin-bottom: 1rem;
   font-weight: 500;
 }
 .genre-card p {
   font-size: 0.95rem;
   line-height: 1.6;
 }
 @media (max-width: 576px) {
   .genre-card {
     padding: 1rem;
     font-size: 0.9rem;
   }
 }
 .genre-detailed {
   background-color: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   padding: 1.2rem 1.5rem;
   border-radius: 12px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   color: #fff;
   font-family: 'Poppins', sans-serif;
   text-align: left;
   transition: all 0.3s ease;
   margin-bottom: 1.5rem;
 }
 .genre-detailed:hover {
   box-shadow: 0 0 16px rgba(138, 43, 226, 0.6);
   background-color: rgba(255, 255, 255, 0.06);
 }
 .genre-detailed .genre-title {
   font-weight: 600;
   font-size: 1.1rem;
   margin-bottom: 0.3rem;
 }
 .genre-detailed .genre-description {
   font-size: 0.95rem;
   color: #ccc;
 }
 .genre-detailed .genre-link {
   display: inline-block;
   margin-top: 0.5rem;
   color: #46aaff;
   text-decoration: none;
   font-weight: 500;
 }
 .genre-detailed .genre-link:hover {
   text-decoration: underline;
   color: #67c3ff;
 }
 .album-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1.5rem;
   margin: 2rem auto;
   max-width: 1000px;
 }
 .album-card {
   background: rgba(0, 0, 0, 0.5);
   padding: 1rem;
   border-radius: 8px;
   text-align: center;
   color: white;
   width: 160px;
 }
 .album-card img {
   width: 100%;
   border-radius: 4px;
 }
 .album-title {
   margin-top: 0.5rem;
   font-weight: 500;
 }
 .container {
   max-width: 900px;
   margin: 0 auto;
   padding: 2rem;
   background-color: rgba(0, 0, 0, 0.5); /* opțional */
   border-radius: 8px;
 }
 footer {
   opacity: 0.8;
   color: #fff;
   margin-top: 3rem;
   text-align: center;
   padding: 10px;
   font-size: 0.7rem;
 }