/* Extra minimal styles for Beats & Cart */

/* -------------------------------------------------- */
/* Base animation utilities (fade, stagger, hover)    */
/* -------------------------------------------------- */
.u-fade-in{ opacity:0; transform: translateY(10px) scale(.98); transition: opacity .5s ease, transform .5s ease; will-change: opacity, transform; }
.u-fade-in.is-in{ opacity:1; transform: none; }

/* Stagger utilities: add .is-in to parent to reveal its children */
.u-stagger{ --stagger-step: .06s; }
.u-stagger > *{ opacity:0; transform: translateY(6px) scale(.98); transition: opacity .4s ease, transform .4s ease; will-change: opacity, transform; }
.u-stagger.is-in > *{ opacity:1; transform:none; }
.u-stagger.is-in > *:nth-child(1){ transition-delay: calc(var(--stagger-step) * 0); }
.u-stagger.is-in > *:nth-child(2){ transition-delay: calc(var(--stagger-step) * 1); }
.u-stagger.is-in > *:nth-child(3){ transition-delay: calc(var(--stagger-step) * 2); }
.u-stagger.is-in > *:nth-child(4){ transition-delay: calc(var(--stagger-step) * 3); }
.u-stagger.is-in > *:nth-child(5){ transition-delay: calc(var(--stagger-step) * 4); }
.u-stagger.is-in > *:nth-child(6){ transition-delay: calc(var(--stagger-step) * 5); }
.u-stagger.is-in > *:nth-child(7){ transition-delay: calc(var(--stagger-step) * 6); }
.u-stagger.is-in > *:nth-child(8){ transition-delay: calc(var(--stagger-step) * 7); }
.u-stagger.is-in > *:nth-child(9){ transition-delay: calc(var(--stagger-step) * 8); }
.u-stagger.is-in > *:nth-child(10){ transition-delay: calc(var(--stagger-step) * 9); }
.u-stagger.is-in > *:nth-child(11){ transition-delay: calc(var(--stagger-step) * 10); }
.u-stagger.is-in > *:nth-child(12){ transition-delay: calc(var(--stagger-step) * 11); }
/* Extend stagger support for larger grids/lists */
.u-stagger.is-in > *:nth-child(13){ transition-delay: calc(var(--stagger-step) * 12); }
.u-stagger.is-in > *:nth-child(14){ transition-delay: calc(var(--stagger-step) * 13); }
.u-stagger.is-in > *:nth-child(15){ transition-delay: calc(var(--stagger-step) * 14); }
.u-stagger.is-in > *:nth-child(16){ transition-delay: calc(var(--stagger-step) * 15); }
.u-stagger.is-in > *:nth-child(17){ transition-delay: calc(var(--stagger-step) * 16); }
.u-stagger.is-in > *:nth-child(18){ transition-delay: calc(var(--stagger-step) * 17); }
.u-stagger.is-in > *:nth-child(19){ transition-delay: calc(var(--stagger-step) * 18); }
.u-stagger.is-in > *:nth-child(20){ transition-delay: calc(var(--stagger-step) * 19); }
.u-stagger.is-in > *:nth-child(21){ transition-delay: calc(var(--stagger-step) * 20); }
.u-stagger.is-in > *:nth-child(22){ transition-delay: calc(var(--stagger-step) * 21); }
.u-stagger.is-in > *:nth-child(23){ transition-delay: calc(var(--stagger-step) * 22); }
.u-stagger.is-in > *:nth-child(24){ transition-delay: calc(var(--stagger-step) * 23); }

/* Hover helpers */
.u-hover-raise{ transition: transform .2s ease, box-shadow .2s ease; will-change: transform, box-shadow; }
.u-hover-raise:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,212,255,0.18); }
.u-hover-glow{ transition: box-shadow .2s ease, filter .2s ease; }
.u-hover-glow:hover{ box-shadow: 0 12px 32px rgba(0,212,255,0.22); filter: saturate(1.03); }

/* Reduced-motion compliance for utilities */
@media (prefers-reduced-motion: reduce){
  .u-fade-in, .u-stagger > *{ transition: none !important; }
  .u-fade-in{ opacity:1 !important; transform:none !important; }
  .u-stagger > *{ opacity:1 !important; transform:none !important; }
  .u-hover-raise:hover{ transform: none !important; }
}

/* Service cards icon wobble/rotate on hover */
.service-card .icon, .service-card .service-icon{
  transition: transform .25s ease, filter .25s ease;
  will-change: transform;
}
.service-card:hover .icon, .service-card:hover .service-icon{
  transform: translateY(-1px) rotate(6deg) scale(1.06);
  filter: drop-shadow(0 6px 16px rgba(0,229,255,0.25));
}
@media (prefers-reduced-motion: reduce){
  .service-card:hover .icon, .service-card:hover .service-icon{ transform: none; }
}

/* Button ripple effect */
.btn{ position: relative; overflow: hidden; }
.btn .ripple{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(0,229,255,0.55) 60%, rgba(0,229,255,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events:none; opacity:.85;
  animation: ripple-burst .6s ease-out forwards;
}
@keyframes ripple-burst{
  0%{ transform: translate(-50%, -50%) scale(0); opacity:.85; }
  70%{ opacity:.35; }
  100%{ transform: translate(-50%, -50%) scale(16); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .btn .ripple{ display:none; animation:none; }
}

/* Reveal animations (used by script.js IntersectionObserver) */
.reveal{ opacity:0; transform: translateY(14px) scale(0.98); transition: opacity .6s ease, transform .6s ease, filter .6s ease; will-change: opacity, transform; }
.reveal:focus{ box-shadow: 0 0 0 2px #00e5ff; }
.reveal.in-view{ opacity:1; transform: translateY(0) scale(1); filter: none; }

/* Clip inner list to avoid glow bleed */
.beats-playlist .bp-list{ overflow: hidden; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

/* HERO BADGES MARQUEE removed */

/* FAQ icon rotate + smooth body */
.faq-q .icon{ display:inline-block; transition: transform .25s ease; }
.faq-item.open .faq-q .icon{ transform: rotate(180deg); }
.faq-a{ transition: max-height .28s ease; overflow:hidden; }
@media (prefers-reduced-motion: reduce){ .faq-q .icon{ transition:none; } .faq-a{ transition:none; } }

/* Performance hints */
.covers-lightbox{ will-change: opacity; }
.covers-lightbox .lb-inner{ will-change: transform; }
.hero .hero-title, .hero .decorative-waves{ will-change: transform; }
.hero .hero-subtitle, .hero .hero-ctas{ will-change: opacity; }

/* Typography: word reveal utility (use with data-split="words" or .typo-words) */
.typo-words{ display:inline; }
.typo-words > span{ display:inline-block; opacity:0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.typo-words.is-in > span, .typo-words.in-view > span{ opacity:1; transform:none; }

/* Typography: letter reveal utility (use with data-split="letters" or .typo-letters) */
.typo-letters{ display:inline; }
.typo-letters > span{ display:inline-block; opacity:0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.typo-letters.is-in > span, .typo-letters.in-view > span{ opacity:1; transform:none; }

/* Audio play/pause icon morph (subtle rotation/scale) */
.audio-player .ap-play i{ transition: transform .18s ease; transform-origin:center; }
.audio-player.playing .ap-play i, .audio-player.is-playing .ap-play i{ transform: rotate(90deg) scale(1.05); }

/* ===== NEW MOBILE BEATS PAGE STYLES ===== */
@media (max-width: 768px) {
  .page-beats .portfolio-subgrid {
    display: block;
  }

  .page-beats .portfolio-item {
    background: linear-gradient(180deg, rgba(10,18,28,0.74), rgba(10,18,28,0.52));
    border: 1px solid rgba(159,231,255,0.14);
    border-radius: 16px;
    padding: 12px;
    margin: 0 0 16px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .page-beats .portfolio-item:last-child {
    margin-bottom: 0;
  }
  
  .page-beats .portfolio-item, 
  .page-beats .portfolio-item:hover {
    transform: none !important;
  }

  .page-beats .portfolio-media {
    padding: 0 !important;
    height: auto !important;
    background: none !important;
  }

  .page-beats .beat-player-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .page-beats .main-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .page-beats .cover {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(159,231,255,0.1);
  }

  .page-beats .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .page-beats .right-side {
    flex-grow: 1;
    min-width: 0; /* Allow flex shrinking */
  }

  .page-beats .title {
    font-size: 16px;
    font-weight: 600;
    color: #eaf8ff;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-beats .timeline {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .page-beats .time {
    font-size: 12px;
    color: #9ec5d6;
  }

  .page-beats .progress {
    flex-grow: 1;
  }

  .page-beats .controls-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .page-beats .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .page-beats .tags .badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0,229,255,0.1);
    border: 1px solid rgba(159,231,255,0.2);
    color: #9fe7ff;
  }

  .page-beats .buy {
    display: flex;
    gap: 8px;
  }

  .page-beats .license {
    flex-grow: 1;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(159,231,255,0.2);
    color: #eaf8ff;
    border-radius: 8px;
    padding: 8px;
    font-size: 14px;
  }

  .page-beats .add-to-cart {
    flex-shrink: 0;
    background: #00e5ff;
    color: #081018;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    font-weight: 600;
    font-size: 14px;
  }
}

/* ===== COVER LIGHTBOX NAVIGATION ===== */
.cover-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cover-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.cover-lightbox .clb-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.cover-lightbox .clb-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cover-lightbox .clb-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
}

.cover-lightbox .clb-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.cover-lightbox .clb-prev,
.cover-lightbox .clb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: rgba(0, 229, 255, 0.8);
  border: 2px solid rgba(159, 231, 255, 0.3);
  border-radius: 50%;
  color: #081018;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cover-lightbox .clb-prev {
  left: 20px;
}

.cover-lightbox .clb-next {
  right: 20px;
}

.cover-lightbox .clb-prev:hover,
.cover-lightbox .clb-next:hover {
  background: rgba(0, 229, 255, 1);
  border-color: rgba(159, 231, 255, 0.6);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 229, 255, 0.4);
}

.cover-lightbox .clb-prev:active,
.cover-lightbox .clb-next:active {
  transform: translateY(-50%) scale(0.95);
}

/* Mobile adjustments for lightbox navigation */
@media (max-width: 768px) {
  .cover-lightbox .clb-prev,
  .cover-lightbox .clb-next {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .cover-lightbox .clb-prev {
    left: 15px;
  }
  
  .cover-lightbox .clb-next {
    right: 15px;
  }
  
  .cover-lightbox .clb-close {
    width: 45px;
    height: 45px;
    top: 15px;
    right: 15px;
    font-size: 20px;
  }
  
  .cover-lightbox .clb-img {
    max-width: 95%;
    max-height: 85%;
  }
}

/* ===== MOBILE BEATS PLAYLIST - REDESIGNED LAYOUT ===== */

/* Hide mobile elements on desktop by default */
.bp-mobile-title,
.bp-nav-controls,
.bp-timeline {
  display: none;
}

/* Hide beats frame on desktop, but show strip directly */
.bp-beats-frame {
  display: none;
}

.bp-strip {
  display: flex;
}

@media (max-width: 768px) {
  .beats-playlist {
    padding: 20px 16px;
    background: linear-gradient(180deg, rgba(8, 16, 24, 0.95) 0%, rgba(10, 18, 28, 0.98) 100%);
    border-radius: 20px;
    margin: 16px 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(159, 231, 255, 0.1);
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.4),
      0 8px 32px rgba(0, 229, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    max-width: 100vw;
  }

  .beats-playlist::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 30%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(97, 242, 255, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  /* Mobile Player - New Layout */
  .bp-player {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, rgba(10, 18, 28, 0.8) 0%, rgba(8, 16, 24, 0.9) 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(159, 231, 255, 0.15);
    box-shadow: 
      0 12px 24px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  /* Hide desktop controls on mobile */
  .bp-controls {
    display: none;
  }
  
  /* Show mobile elements */
  .bp-mobile-title,
  .bp-nav-controls,
  .bp-timeline,
  .bp-beats-frame {
    display: block;
  }
  
  .bp-nav-controls,
  .bp-timeline {
    display: flex;
  }
  
  /* Ensure timeline is visible on mobile */
  .bp-timeline {
    display: flex !important;
  }

  /* 1. Mobile title styling */
  .bp-mobile-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 20px 0;
    text-shadow: 0 2px 8px rgba(0, 229, 255, 0.3);
    letter-spacing: 0.5px;
    padding: 0 10px;
    line-height: 1.3;
  }

  /* 2. Navigation buttons (horizontal) */
  .bp-nav-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
  }

  /* 3. Timeline */
  .bp-timeline {
    margin-bottom: 24px;
  }

  .bp-time {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 8px;
  }

  .bp-current,
  .bp-duration {
    font-size: 14px;
    font-weight: 600;
    color: #b8e6f0;
    min-width: 40px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .bp-bar {
    flex-grow: 1;
    height: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(159, 231, 255, 0.12) 100%);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .bp-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00e5ff 0%, #61f2ff 50%, #00ffc6 100%);
    border-radius: 4px;
    transition: width 0.1s ease;
    box-shadow: 
      0 0 12px rgba(0, 229, 255, 0.6),
      0 2px 8px rgba(0, 229, 255, 0.4);
  }

  /* Hide volume controls on mobile */
  .bp-volume {
    display: none;
  }

  .bp-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(0, 229, 255, 0.4);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.08) 100%);
    color: #00e5ff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
      0 4px 12px rgba(0, 229, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .bp-btn:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25) 0%, rgba(0, 229, 255, 0.15) 100%);
    border-color: rgba(0, 229, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 
      0 8px 20px rgba(0, 229, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .bp-btn:active {
    transform: translateY(0);
  }

  .bp-btn.play {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #00e5ff 0%, #61f2ff 100%);
    color: #081018;
    border-color: #00e5ff;
    box-shadow: 
      0 8px 24px rgba(0, 229, 255, 0.4),
      0 4px 12px rgba(0, 229, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .bp-btn.play:hover {
    background: linear-gradient(135deg, #00d4e6 0%, #4de8ff 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
      0 12px 32px rgba(0, 229, 255, 0.5),
      0 6px 16px rgba(0, 229, 255, 0.4);
  }

  /* 4. Beats list in beautiful frame */
  .bp-beats-frame {
    background: linear-gradient(145deg, rgba(10, 18, 28, 0.9) 0%, rgba(8, 16, 24, 0.95) 100%);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(159, 231, 255, 0.2);
    box-shadow: 
      0 12px 24px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
  }

  .bp-beats-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 30% 20%, rgba(0, 229, 255, 0.06) 0%, transparent 50%),
      radial-gradient(circle at 70% 80%, rgba(97, 242, 255, 0.04) 0%, transparent 50%);
    border-radius: 16px;
    pointer-events: none;
    z-index: -1;
  }

  /* Mobile: vertical layout for beats inside frame */
  .bp-beats-frame .bp-strip {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    overflow: visible;
  }

  .bp-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(10, 18, 28, 0.7) 0%, rgba(8, 16, 24, 0.8) 100%);
    border: 1px solid rgba(159, 231, 255, 0.15);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    min-height: auto;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .bp-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.03) 0%, rgba(97, 242, 255, 0.02) 100%);
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .bp-tile:hover::before {
    opacity: 1;
  }

  .bp-tile:hover,
  .bp-tile.active {
    background: linear-gradient(135deg, rgba(10, 18, 28, 0.9) 0%, rgba(8, 16, 24, 0.95) 100%);
    border-color: rgba(0, 229, 255, 0.4);
    transform: translateY(-1px);
    box-shadow: 
      0 6px 16px rgba(0, 0, 0, 0.3),
      0 3px 12px rgba(0, 229, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .bp-tile.playing {
    border-color: #00e5ff;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, rgba(8, 16, 24, 0.95) 100%);
    box-shadow: 
      0 0 16px rgba(0, 229, 255, 0.4),
      0 6px 16px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(0, 229, 255, 0.2);
  }

  .bp-tile.playing::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.06) 0%, rgba(97, 242, 255, 0.03) 100%);
  }

  .bp-thumb {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 0%, rgba(97, 242, 255, 0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(159, 231, 255, 0.2);
    box-shadow: 
      0 3px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
  }

  .bp-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.1) 0%, transparent 100%);
    border-radius: 12px;
  }

  .bp-thumb i {
    color: #00e5ff;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
    z-index: 1;
    position: relative;
  }

  .bp-info {
    flex-grow: 1;
    text-align: left;
    min-width: 0;
  }

  .bp-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.2px;
  }

  .bp-tags {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #9ec5d6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .bp-buy-wrap {
    text-align: center;
    margin-top: 24px;
    position: relative;
    z-index: 1;
  }

  .bp-buy-btn {
    display: inline-block;
    padding: 14px 28px;
    background: linear-gradient(135deg, #00e5ff 0%, #61f2ff 100%);
    color: #081018;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
      0 6px 16px rgba(0, 229, 255, 0.3),
      0 3px 8px rgba(0, 229, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
  }

  .bp-buy-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
  }

  .bp-buy-btn:hover::before {
    left: 100%;
  }

  .bp-buy-btn:hover {
    background: linear-gradient(135deg, #00d4e6 0%, #4de8ff 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
      0 8px 20px rgba(0, 229, 255, 0.4),
      0 4px 12px rgba(0, 229, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  .bp-buy-btn:active {
    transform: translateY(-1px) scale(0.98);
  }
}

/* ===== DESKTOP BEATS PLAYLIST POLISH ===== */
@media (min-width: 769px) {
  /* Overall frosted block */
  .beats-playlist.beats-theme-frosted {
    padding: 18px 18px 12px;
    background: linear-gradient(180deg, rgba(8,16,24,0.82) 0%, rgba(10,18,28,0.88) 100%);
    border: 1px solid rgba(159,231,255,0.12);
    border-radius: 18px;
    box-shadow:
      0 18px 42px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }

  /* Desktop controls row stays visible; refine spacing */
  .beats-playlist .bp-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
  }
  .beats-playlist .bp-title {
    font-weight: 700;
    color: #eaf8ff;
    text-shadow: 0 1px 8px rgba(0,229,255,0.16);
  }
  .beats-playlist .bp-time .bp-current,
  .beats-playlist .bp-time .bp-duration { color:#b8e6f0; }
  .beats-playlist .bp-bar {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(159,231,255,0.10));
  }
  .beats-playlist .bp-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #00e5ff 0%, #61f2ff 100%);
    box-shadow: 0 0 12px rgba(0,229,255,0.35);
  }

  /* Horizontal strip with graceful scroll */
  .beats-playlist .bp-strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 6px 4px 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .beats-playlist .bp-strip::-webkit-scrollbar { height: 8px; }
  .beats-playlist .bp-strip::-webkit-scrollbar-track { background: transparent; }
  .beats-playlist .bp-strip::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0,229,255,0.35), rgba(97,242,255,0.25));
    border-radius: 999px;
  }

  /* Tiles: compact, elegant cards */
  .beats-playlist .bp-tile {
    scroll-snap-align: start;
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 360px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(10,18,28,0.66), rgba(8,16,24,0.76));
    border: 1px solid rgba(159,231,255,0.14);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  }
  .beats-playlist .bp-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(0,229,255,0.38);
    box-shadow: 0 14px 36px rgba(0,0,0,0.32), 0 6px 22px rgba(0,229,255,0.10);
    background: linear-gradient(135deg, rgba(10,18,28,0.76), rgba(8,16,24,0.86));
  }
  .beats-playlist .bp-tile.active {
    border-color: rgba(0,229,255,0.45);
    box-shadow: 0 0 0 1px rgba(0,229,255,0.16) inset, 0 10px 28px rgba(0,0,0,0.28);
  }
  .beats-playlist .bp-tile.playing {
    box-shadow: 0 0 0 1px rgba(0,229,255,0.25) inset, 0 0 22px rgba(0,229,255,0.18), 0 12px 32px rgba(0,0,0,0.3);
  }

  /* Slightly smaller covers on desktop */
  .beats-playlist .bp-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(159,231,255,0.2);
    position: relative;
    overflow: hidden;
  }
  .beats-playlist .bp-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,229,255,0.12), transparent 70%);
    pointer-events: none;
  }

  .beats-playlist .bp-info { min-width: 0; }
  .beats-playlist .bp-info .bp-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .beats-playlist .bp-info .bp-tags { font-size: 12px; color:#9ec5d6; }
}

/* ===== PORTFOLIO CARD TILT ===== */
.portfolio-item{ transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.portfolio-item:hover{ box-shadow: 0 16px 36px rgba(0,0,0,0.35), 0 8px 22px rgba(0,229,255,0.10); }


/* ===== MIX/MASTERING PLAYER POLISH ===== */
/* Spectrum glow on progress fill when playing */
.portfolio-item .audio-player .ap-bar{ position: relative; overflow: hidden; }
.portfolio-item .audio-player .ap-bar-fill{ background: linear-gradient(90deg, #00e5ff 0%, #61f2ff 40%, #ff2d92 100%); filter: saturate(125%); box-shadow: 0 0 16px rgba(124,77,255,0.35), 0 0 10px rgba(0,229,255,0.35); }
.portfolio-item .audio-player.playing{ box-shadow: 0 0 0 1px rgba(0,229,255,0.14) inset; }

/* Skeleton loading before metadata */
.portfolio-item .audio-player.loading .ap-title{ position: relative; color: transparent; }
.portfolio-item .audio-player.loading .ap-title::after{
  content:""; position:absolute; inset:0; border-radius:4px; background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.16), rgba(255,255,255,0.08));
  background-size:200% 100%; animation: skeleton 1.1s linear infinite;
}
@keyframes skeleton{ from{ background-position-x: 200%; } to{ background-position-x: -200%; } }
.reveal.in-view{ opacity:1; transform: translateY(0) scale(1); filter: none; }

/* Reveal variants */
.reveal-up{ opacity:0; transform: translateY(18px); }
.reveal-fade{ opacity:0; transform: none; }
.reveal-scale{ opacity:0; transform: scale(0.96); }
.reveal-up.in-view{ opacity:1; transform: translateY(0); }
.reveal-fade.in-view{ opacity:1; }
.reveal-scale.in-view{ opacity:1; transform: scale(1); }

/* Hero breathing glow and slight parallax support */
.hero{ position: relative; overflow: hidden; isolation: isolate; }
.hero::after{
  content: "";
  position: absolute; inset: -10% -10% -30% -10%; z-index:-1;
  background: radial-gradient(60% 60% at 50% 40%, rgba(0,229,255,0.14), rgba(0,229,255,0) 70%),
              radial-gradient(40% 40% at 20% 80%, rgba(0,140,255,0.10), rgba(0,140,255,0) 70%);
  filter: blur(28px) saturate(1.1);
  animation: heroBreath 12s ease-in-out infinite;
}
@keyframes heroBreath{ 0%,100%{ transform: scale(1); opacity:.85; } 50%{ transform: scale(1.04); opacity:1; } }

/* Mobile clarity: remove hero overlay and tone down glass effects */
@media (max-width: 768px) {
  .hero::after { display: none !important; }
  /* Reduce glassiness where it might read as haze on small screens */
  .portfolio-item { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .preview-item { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Neon microinteractions for primary/outline buttons and links */
.btn{ transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary, .btn.btn-light{
  box-shadow: 0 8px 24px rgba(0,229,255,0.18);
}
.btn-primary:hover, .btn.btn-light:hover{
  box-shadow: 0 12px 32px rgba(0,229,255,0.28), 0 0 0 4px rgba(0,229,255,0.12) inset;
}
.btn-outline{
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-outline:hover{
  color:#bdf4ff; border-color: rgba(159,231,255,0.5);
  box-shadow: 0 8px 24px rgba(0,212,255,0.18);
}

/* Navigation/links microinteractions */
.nav-link, a{
  transition: color .15s ease, text-shadow .15s ease;
}
.nav-link:hover, a:hover{
  color:#bdf4ff;
  text-shadow: 0 0 12px rgba(0,229,255,0.25);
}

/* Cart counter bubble */
.cart-counter{
  position:absolute; right:-8px; top:-6px;
  background:#00e5ff; color:#0b1620; font-weight:700; font-size:12px;
  line-height:18px; width:18px; height:18px; text-align:center; border-radius:50%;
}

/* Filters */
.filters{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; align-items:flex-end; }
.filter-group{ display:flex; flex-direction:column; gap:6px; }
.filter-group label{ color:#b0c7d1; font-size:14px; }
.range-wrap{ display:flex; align-items:center; gap:10px; }
#filter-bpm{ width:200px; }
#bpm-value{ color:#9fe7ff; }

/* Badges & status */
.badge{ display:inline-block; padding:3px 8px; margin:2px 6px 2px 0; border-radius:999px; font-size:12px; color:#cfe7f1; background:rgba(159,231,255,0.12); border:1px solid rgba(159,231,255,0.2); }
.badge.status.available{ background:rgba(0,229,255,0.12); border-color:rgba(0,229,255,0.35); color:#7ff5ff; }
.badge.status.leased{ background:rgba(255,199,0,0.12); border-color:rgba(255,199,0,0.35); color:#ffe47a; }
.badge.status.sold{ background:rgba(255,77,77,0.12); border-color:rgba(255,77,77,0.35); color:#ff9c9c; }

/* Buy row */
.buy-row{ display:flex; gap:10px; align-items:center; margin-top:8px; }
.buy-row select{ background:#0f1b28; color:#cfe7f1; border:1px solid rgba(159,231,255,0.2); border-radius:8px; padding:8px 10px; }

/* Mini audio */
.audio-player.mini{ padding:10px; background:rgba(9,24,36,0.6); border:1px solid rgba(159,231,255,0.12); border-radius:12px; }
.audio-player.mini .ap-top{ display:flex; align-items:center; gap:10px; }
.audio-player.mini .ap-play{ background:#0f2533; border:1px solid rgba(159,231,255,0.2); color:#9fe7ff; border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.audio-player.mini .ap-progress{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.audio-player.mini .ap-bar{ flex:1; height:6px; background:#0a1a24; border-radius:999px; position:relative; cursor:pointer; }
.audio-player.mini .ap-bar-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#00e5ff,#61f2ff); border-radius:999px; }
.audio-player.mini .ap-volume input{ width:90px; }

/* -------------------------------------------------- */
/* Upgraded Portfolio Audio Player                    */
/* -------------------------------------------------- */
.portfolio-item{ position:relative; overflow:hidden; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(10,18,28,0.74), rgba(10,18,28,0.52)); border:1px solid rgba(159,231,255,0.14); box-shadow: 0 22px 60px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(0,229,255,0.06); border-radius:24px; }

.portfolio-item::before{
  content:""; position:absolute; inset:-20% -40% auto -40%; height:80%; pointer-events:none; z-index:0;
  background: radial-gradient(60% 60% at 30% 40%, rgba(0,229,255,0.18), rgba(0,229,255,0) 70%),
              radial-gradient(50% 50% at 80% 10%, rgba(124,77,255,0.14), rgba(124,77,255,0) 70%);
  filter: blur(26px);
  animation: apAmbient 10s ease-in-out infinite;
}
@keyframes apAmbient{ 0%,100%{ transform: translateY(0) scale(1); opacity:.75; } 50%{ transform: translateY(-4px) scale(1.03); opacity:1; } }

.audio-player{ position:relative; z-index:1; padding:24px 22px 20px; display:flex; flex-direction:column; gap:18px; width:100%; margin:0; border-radius:24px; min-height:230px; }
/* Ensure audio card container allows full player height (title + wave + progress + controls) */
.portfolio-item.type-audio .portfolio-media{
  height: auto !important;
  overflow: visible !important;
  padding: 12px !important;
  display: block;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(124, 77, 255, 0.06));
}
/* Keep audio element hidden but do not collapse layout */
.portfolio-item.type-audio .portfolio-media audio{ display:none; }
.portfolio-item .audio-player::before{ content:""; position:absolute; inset:-1px; border-radius:22px; pointer-events:none; z-index:0; background: linear-gradient(120deg, rgba(0,229,255,0.15), rgba(124,77,255,0.12)); filter: blur(12px); opacity:.75; }
.audio-player .ap-top{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.audio-player .ap-title{ font-size:26px; font-weight:800; color:#eaf8ff; letter-spacing:.2px; text-shadow:0 0 22px rgba(0,229,255,0.16); }
.audio-player .ap-subtitle{ font-size:14px; color:#9ec5d6; opacity:.9; margin-top:-2px; }

/* Play button with ring progress */
.ap-play{
  position:relative; width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center; 
  background: radial-gradient(120% 120% at 30% 30%, rgba(0,229,255,0.28), rgba(124,77,255,0.28)), rgba(12,26,36,0.65);
  box-shadow: 0 14px 38px rgba(0,0,0,0.38), 0 0 24px rgba(0,229,255,0.18), 0 0 26px rgba(124,77,255,0.18);
  color:#eaf8ff; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, filter .2s ease;
}
.ap-play:hover{ transform: translateY(-2px); box-shadow: 0 22px 54px rgba(0,0,0,0.6), 0 0 0 12px rgba(124,77,255,0.14) inset, 0 0 40px rgba(0,229,255,0.28); filter:saturate(1.06); }
.ap-play i{ font-size:28px; z-index:2; }
.ap-ring{ position:absolute; inset:0; }
.ap-ring svg{ width:100%; height:100%; transform: rotate(-90deg); }
.ap-ring .ring-bg{ stroke: rgba(159,231,255,0.18); }
.ap-ring .ring-val{ stroke: url(#apGrad) #00e5ff; filter: drop-shadow(0 0 8px rgba(0,229,255,.45)) drop-shadow(0 0 10px rgba(124,77,255,.25)); }
.ap-controls{ display:flex; align-items:center; justify-content:center; gap:16px; }
.ap-icon{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#cfefff; background: rgba(12,26,36,0.45); border:1px solid rgba(159,231,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.26); }
.ap-icon i{ font-size:16px; opacity:.92; }

.mix-selector-container{
  display:flex; justify-content:center; align-items:center; gap:15px; margin-top:16px;
  padding:10px 12px; border-radius:16px;
  background: rgba(12,26,36,0.25);
  border: 1px solid rgba(159,231,255,0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.25);
}
.mix-btn{
  background-color: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color:#fff; padding:10px 20px; border-radius:10px; cursor:pointer;
  transition: background-color .3s, transform .2s, border-color .3s;
  font-weight:600; letter-spacing:.2px;
}
.mix-btn.active{ background-color: rgba(255,255,255,0.30); border-color:#00f0ff; transform: scale(1.05); }
.mix-btn:hover{ background-color: rgba(255,255,255,0.20); }
@media (max-width: 768px){ .mix-selector-container{ flex-wrap:wrap; gap:10px; } }

.ap-title{ font-weight:700; color:#eaf8ff; letter-spacing:.2px; text-shadow:0 0 14px rgba(0,229,255,0.18); }

/* Add a bit more breathing room between player and selector (scoped) */
.portfolio-item.type-audio > .portfolio-media{ padding-bottom: 18px; }
.mix-selector-container{ margin-top: 30px; }

/* Unified card layout: stack neatly with balanced gaps */
.unified-card .audio-player{ display:flex; flex-direction:column; gap:14px; }
.unified-card .ap-top{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; }
.unified-card .ap-wave-wrap{ display:none; }

/* Full-width canvas visualizer */
.unified-card .ap-visualizer{ width:100%; height:120px; margin:0; padding:0; position:relative; }
.unified-card .ap-visualizer .bar{ display:none !important; }
.unified-card .ap-visualizer .ap-canvas{ width:100%; height:100%; display:block; border-radius:12px; mix-blend-mode:screen; }

/* Progress spacing tune */
.unified-card .ap-progress{ margin-top: 0; }

/* Softer selector styling within unified card */
.unified-card .mix-selector-container{ margin-top:20px; background: rgba(12,26,36,0.20); border-color: rgba(159,231,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 22px rgba(0,0,0,0.22); }
.unified-card .mix-btn{ padding:9px 18px; }

/* Visualizer bars */
.ap-visualizer{ display:flex; gap:6px; align-items:flex-end; justify-content:center; height:84px; margin-top:8px; padding:0 6px; }
.ap-visualizer .bar{ 
  width:7px; 
  height: var(--h, 10px); 
  border-radius:6px; 
  background: linear-gradient(180deg, #61f2ff 0%, #7c4dff 70%, #ff2d92 100%);
  box-shadow: 0 0 10px rgba(0,229,255,0.45), 0 6px 14px rgba(124,77,255,0.28);
  transition: height .06s linear, box-shadow .2s ease;
}
.audio-player.is-playing .ap-visualizer .bar{ box-shadow:0 0 10px rgba(124,77,255,0.5), 0 0 20px rgba(0,229,255,0.3); }
.audio-player.playing .ap-visualizer .bar{ box-shadow:0 0 10px rgba(124,77,255,0.5), 0 0 20px rgba(0,229,255,0.3); }
/* Decorative gradient wave */
.ap-wave-wrap{ width:100%; max-width: 520px; }
.ap-wave{ display:block; width:100%; height:72px; }

/* Waveform canvas overlay */
.ap-wave-wrap{ position:relative; overflow:hidden; border-radius:12px; background: linear-gradient(180deg, rgba(0,229,255,0.04), rgba(124,77,255,0.04)); border:1px solid rgba(159,231,255,0.10); }
.ap-wave{ display:block; width:100%; height:64px; filter: drop-shadow(0 8px 18px rgba(0,229,255,0.18)); }
.audio-player.playing .ap-wave{ animation: waveLoop 3.2s linear infinite; opacity: .95; }
@keyframes waveLoop{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-8%); } }

/* Progress + time + volume */
.ap-progress{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:16px; margin-top:2px; }
.ap-time{ grid-column: 1 / 2; justify-self:start; color:#a9d9ea; font-weight:700; font-size:14px; letter-spacing:.3px; opacity:.95; }
.ap-bar{ grid-column: 2 / 3; min-width: 60%; position:relative; height:18px; background: rgba(9,24,36,0.6); border:1px solid rgba(159,231,255,0.22); border-radius:999px; cursor:pointer; overflow:hidden; }
.ap-progress .ap-duration{ grid-column: 3 / 4; justify-self:end; color:#a9d9ea; font-weight:700; font-size:14px; letter-spacing:.3px; opacity:.95; }
.ap-bar:hover{ box-shadow: 0 0 0 3px rgba(0,229,255,0.08) inset; }
.ap-bar-fill{ position:absolute; inset:0 auto 0 0; width:0%; background: linear-gradient(90deg, #00e5ff 0%, #61f2ff 45%, #ff2d92 100%); box-shadow: 0 0 18px rgba(0,229,255,0.4), 0 0 22px rgba(124,77,255,0.35); border-radius:999px; transition: width .22s ease; }
.ap-bar-fill::after{ content:""; position:absolute; right:-7px; top:50%; transform: translateY(-50%); width:16px; height:16px; border-radius:50%; background: radial-gradient(circle at 40% 40%, #ffe8ff, #ff2d92); box-shadow: 0 0 12px rgba(255,45,146,0.65), 0 0 10px rgba(0,229,255,0.5); }
.ap-volume{ display:flex; align-items:center; gap:8px; min-width:120px; }
.ap-volume input{ accent-color:#00e5ff; width:120px; }
.ap-volume i{ color:#9fe7ff; }

/* Ambient glow intensity mapping */
.audio-player[data-amp="low"]{ box-shadow: 0 12px 36px rgba(0,212,255,0.10); }
.audio-player[data-amp="mid"]{ box-shadow: 0 14px 40px rgba(124,77,255,0.12); }
.audio-player[data-amp="high"]{ box-shadow: 0 16px 50px rgba(124,77,255,0.18), 0 0 0 1px rgba(124,77,255,0.12) inset; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ap-play:hover{ transform:none; }
  .audio-player.is-playing .ap-play::after{ animation: none; opacity:.8; }
}

/* Beats grid fallback */
#beats-grid.portfolio-subgrid{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }

/* Force 3-column grid for mixing/mastering section on desktop */
.portfolio-subgrid.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1024px){ .portfolio-subgrid.grid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .portfolio-subgrid.grid-3{ grid-template-columns: 1fr; } }

/* Center the portfolio sections inside the main grid */
.portfolio-grid > .portfolio-subtitle,
.portfolio-grid > .portfolio-subgrid,
.portfolio-grid > .beats-playlist{ grid-column: 1 / -1; }

/* Centered subtitles and constrained widths */
.portfolio-grid .portfolio-subtitle{ text-align:center; width:100%; max-width:1100px; margin: 0 auto 1rem; }
.portfolio-grid .portfolio-subgrid{ width:100%; max-width:1100px; margin: 0 auto 2rem; }
.portfolio-grid > .covers-carousel{ grid-column: 1 / -1; margin: 0 auto 2rem; width:100%; }

/* Ensure dots (indicators) are perfectly centered within the carousel */
.covers-carousel{ position: relative; }
.covers-carousel .covers-indicators{ position:absolute; left:0; right:0; bottom:10px; transform:none; display:flex; justify-content:center; gap:6px; z-index:2; }

/* Center and constrain the Beats playlist */
.beats-playlist{ max-width: 900px; margin: 0 auto; }
.beats-playlist > .portfolio-subtitle{ text-align:center; margin: 1rem auto 0.75rem; }

/* Give more space to the main time bar in beats header */
.beats-playlist .bp-controls{ grid-template-columns: auto auto auto 1fr minmax(320px, 1fr) auto; }
.beats-playlist .bp-time .bp-bar{ height:14px; border:1px solid rgba(159,231,255,0.18); background: rgba(9,24,36,0.6); border-radius:999px; }
.beats-playlist .bp-time .bp-bar:hover{ box-shadow: 0 0 0 3px rgba(0,229,255,0.08) inset; }
.beats-playlist .bp-time .bp-fill{ background: linear-gradient(90deg, #00e5ff 0%, #61f2ff 45%, #ff2d92 100%); box-shadow: 0 0 18px rgba(0,229,255,0.35), 0 0 22px rgba(124,77,255,0.30); }
.beats-playlist .bp-time .bp-fill::after{ content:""; position:absolute; right:-7px; top:50%; transform: translateY(-50%); width:16px; height:16px; border-radius:50%; background: radial-gradient(circle at 40% 40%, #eaffff, #00e5ff); box-shadow: 0 0 10px rgba(0,229,255,0.6); }

/* Make the beats header player visually consistent with the mixing/mastering card player */
.beats-playlist .bp-player{
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.12);
}
.beats-playlist .bp-btn.play{
  background: radial-gradient(circle at 30% 30%, #00e5ff, #7c4dff);
  box-shadow: 0 10px 25px rgba(0, 212, 255, 0.35);
}

/* Animated enhancements for beats playlist */
@keyframes bpShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes bpPulse {
  0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 10px rgba(0,229,255,0.6); }
  50% { transform: translateY(-50%) scale(1.15); box-shadow: 0 0 18px rgba(0,229,255,0.9); }
}
@keyframes glowFloat {
  0% { box-shadow: 0 10px 30px rgba(0, 212, 255, 0.12), 0 0 0 rgba(124,77,255,0); }
  50% { box-shadow: 0 14px 40px rgba(0, 212, 255, 0.22), 0 0 24px rgba(124,77,255,0.25); }
  100% { box-shadow: 0 10px 30px rgba(0, 212, 255, 0.12), 0 0 0 rgba(124,77,255,0); }
}
@keyframes textSheen {
  0% { background-position: -100% 50%; }
  100% { background-position: 200% 50%; }
}

/* Progress fill shimmer while playing */
.beats-playlist.playing .bp-time .bp-fill{
  background: linear-gradient(90deg, #00e5ff, #61f2ff, #7c4dff, #61f2ff, #00e5ff);
  background-size: 200% 100%;
  animation: bpShimmer 2.4s linear infinite;
}
.beats-playlist.playing .bp-time .bp-fill::after{ animation: bpPulse 1.6s ease-in-out infinite; }

/* Header player subtle breathing glow when playing */
.beats-playlist .bp-player.playing{ animation: glowFloat 3.2s ease-in-out infinite; }

/* Title sheen while playing */
.beats-playlist.playing .bp-title{
  background: linear-gradient(120deg, #e0faff 0%, #fff 20%, #a8f3ff 40%, #b9a6ff 60%, #e0faff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 300% 100%;
  animation: textSheen 3s linear infinite;
}

/* Active/playing row highlight */
.beats-playlist .bp-item.playing{
  background: linear-gradient(180deg, rgba(0,229,255,0.06), rgba(124,77,255,0.05));
  border: 1px solid rgba(159,231,255,0.22);
  box-shadow: 0 8px 24px rgba(0,212,255,0.18);
}
.beats-playlist .bp-item.playing .bp-name{ color: #eaffff; text-shadow: 0 0 10px rgba(0,229,255,0.35); }

/* Buttons micro-interactions */
.beats-playlist .bp-btn{ transition: transform .15s ease, box-shadow .2s ease, background .3s ease; }
.beats-playlist .bp-btn:hover{ transform: translateY(-1px) scale(1.04); box-shadow: 0 8px 18px rgba(0,212,255,0.25); }
.beats-playlist .bp-btn:active{ transform: translateY(0) scale(0.98); }
.beats-playlist .bp-btn.play i{ filter: drop-shadow(0 0 6px rgba(0,229,255,0.5)); }

/* Volume slider glow on focus */
.beats-playlist .bp-volume-slider{ outline: none; transition: box-shadow .2s ease; }
.beats-playlist .bp-volume-slider:focus{ box-shadow: 0 0 0 3px rgba(0,229,255,0.15); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .beats-playlist.playing .bp-time .bp-fill,
  .beats-playlist .bp-player.playing,
  .beats-playlist.playing .bp-title{ animation: none !important; }
}

/* Hero preview — center and improve look */
.portfolio-preview{ display:flex; justify-content:center; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap; }
.preview-item{ position:relative; background: radial-gradient(120% 120% at 0% 0%, rgba(0,229,255,0.12), rgba(0,229,255,0.04) 40%, rgba(0,0,0,0.15) 100%); border:1px solid rgba(159,231,255,0.15); box-shadow: 0 10px 30px rgba(0,212,255,0.15); backdrop-filter: blur(8px); }
.preview-item img{ border-radius:12px; display:block; }

/* About section centering */
.about .section-title{ text-align:center; }
.about .about-content{ align-items:center; justify-content:center; gap:32px; }
.about .about-info{ text-align:center; }

/* ===== FAQ POLISH ===== */
.faq{ --faq-border: rgba(159,231,255,0.14); --faq-border-open: rgba(0,229,255,0.35); }
.faq-item{ border-radius: 12px; border:1px solid var(--faq-border); background: rgba(8,20,30,0.55); transition: box-shadow .25s ease, border-color .25s ease, background .25s ease; }
.faq-item:hover{ box-shadow: 0 10px 30px rgba(0,212,255,0.12); }
.faq-item.open{ border-color: var(--faq-border-open); box-shadow: 0 16px 42px rgba(0,212,255,0.18); background: linear-gradient(180deg, rgba(9,24,36,0.75), rgba(9,24,36,0.55)); }

.faq-q{ position: relative; padding-right: 2.25rem; border-radius: 10px; }
.faq-q:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(0,229,255,0.25); }
.faq-q::after{ content: '\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform .24s ease; color: #aeeaff; opacity: .9; }
.faq-item.open .faq-q::after{ transform: translateY(-50%) rotate(180deg); }

/* Animated answer */
.faq-a{
  transition: max-height .46s cubic-bezier(.16,.84,.22,1),
              opacity .3s ease,
              padding .3s ease,
              clip-path .46s cubic-bezier(.16,.84,.22,1),
              transform .46s cubic-bezier(.16,.84,.22,1),
              filter .34s ease;
  opacity: 0;
  max-height: 0;
  padding: 0 1rem;
  clip-path: inset(0 0 100% 0 round 10px); /* hidden from bottom -> top */
  transform-origin: top;
  transform: translateY(-10px) scaleY(0.96) skewY(1.2deg);
  filter: blur(2px);
  position: relative;
  overflow: hidden; /* keep the liquid front clipped */
}
.faq-a::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: linear-gradient(180deg, rgba(0,229,255,0.35), rgba(0,229,255,0));
  opacity: 0; transform: translateY(-6px);
  transition: transform .34s cubic-bezier(.2,.65,.2,1), opacity .26s ease;
  pointer-events: none; border-radius: 10px 10px 0 0;
}
.faq-a::after{
  /* Liquid curved front */
  content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 42px;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255,255,255,0.6) 0%, rgba(0,229,255,0.45) 38%, rgba(0,229,255,0.0) 78%),
    radial-gradient(30% 60% at 30% 0%, rgba(255,255,255,0.35), rgba(0,229,255,0));
  filter: blur(12px) saturate(130%);
  opacity: 0; transform: translateY(-18px) scaleY(0.92) skewY(1deg);
  transition: transform .6s cubic-bezier(.16,.84,.22,1.02), opacity .34s ease;
  border-bottom-left-radius: 50% 18px; border-bottom-right-radius: 50% 18px;
  pointer-events: none;
}

@keyframes faqRipple {
  0% { background-position: 50% 0%; opacity: .45; }
  50% { background-position: 48% 35%; opacity: .7; }
  100% { background-position: 50% 70%; opacity: .45; }
}
.faq-item.open .faq-a{
  opacity: 1;
  padding: 0 1rem 0.9rem;
  clip-path: inset(0 0 0 0 round 10px); /* revealed fully */
  max-height: 600px; /* safety cap; JS sets exact height */
  transform: translateY(0) scaleY(1) skewY(0);
  filter: blur(0);
}
.faq-item.open .faq-a::before{ opacity: 1; transform: translateY(0); }
.faq-item.open .faq-a::after{
  opacity: 1; transform: translateY(110%) scaleY(1) skewY(0);
  animation: faqRipple .9s ease-out;
}

/* Staggered inner content, comes after the liquid front */
.faq-a > * { opacity: 0; transform: translateY(-6px); transition: transform .36s ease, opacity .28s ease; }
.faq-item.open .faq-a > * { opacity: 1; transform: translateY(0); transition-delay: .1s; }

/* ===== HERO VIBRANCE UPGRADE ===== */
@keyframes heroGradientFlow {
  0% { transform: translate3d(-10%, -10%, 0) scale(1); filter: hue-rotate(0deg); }
  50% { transform: translate3d(5%, 8%, 0) scale(1.05); filter: hue-rotate(20deg); }
  100% { transform: translate3d(-10%, -10%, 0) scale(1); filter: hue-rotate(0deg); }
}
@keyframes heroSoftPulse {
  0%,100% { opacity: .55; }
  50% { opacity: .8; }
}

/* ===== BUTTON SYSTEM POLISH ===== */
.btn{ position: relative; border-radius: var(--radius-md); overflow: hidden; isolation: isolate; font-weight: 600; }
.btn::before{ content:''; position:absolute; inset: -1px; border-radius: inherit; background: linear-gradient(120deg, rgba(0,229,255,0.18), rgba(124,77,255,0.14)); filter: blur(10px); opacity: 0; transition: opacity .25s ease; z-index: 0; }
.btn:hover::before{ opacity: .75; }
.btn-primary{ box-shadow: 0 12px 28px rgba(0,212,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.1); color: #06242c; text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.08); }
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active{ color: #06242c !important; text-shadow: 0 1px 0 rgba(255,255,255,0.45), 0 0 2px rgba(0,0,0,0.18); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,212,255,0.36), inset 0 0 0 1px rgba(255,255,255,0.14); }
.btn-primary:active{ transform: translateY(0); filter: brightness(0.98); box-shadow: 0 10px 24px rgba(0,212,255,0.28); }

.btn-outline{ border: 1px solid rgba(159,231,255,0.38) !important; background: rgba(10,25,35,0.52); color:#eaf8ff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.btn-outline:hover{ background: rgba(10,25,35,0.6); box-shadow: 0 10px 26px rgba(0,212,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.08); }
.btn-outline:active{ filter: brightness(0.98); }

.btn-ghost{ background: rgba(9,18,26,0.2); color: #d8eef6; border: 1px dashed rgba(159,231,255,0.28); }
.btn-ghost:hover{ background: rgba(159,231,255,0.06); }

.btn-light{ backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); color: #0a1e28; text-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 -1px 0 rgba(0,0,0,0.06); }
.btn-light:hover,
.btn-light:focus-visible,
.btn-light:active{ color: #0a1e28 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 0 2px rgba(0,0,0,0.14); }

.btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(0,229,255,0.32), 0 8px 28px rgba(0,212,255,0.24); }

/* ensure button content sits above glow */
.btn > * { position: relative; z-index: 1; }

/* Global focus-visible for a11y */
:where(a, button, [role="button"], input, select, textarea, .btn):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.45), 0 6px 18px rgba(0,229,255,0.20);
  border-radius: 10px;
}

/* Ripple for CTA clicks */
.btn .ripple{
  position:absolute; width:10px; height:10px; border-radius:50%; pointer-events:none; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.0) 60%);
  animation: rippleExpand .6s ease-out forwards;
}
@keyframes rippleExpand{ to{ transform: translate(-50%, -50%) scale(16); opacity: 0; } }

@media (prefers-reduced-motion: reduce){
  .btn, .btn::before{ transition: none !important; }
}

/* ===== HERO PARTICLES (LIGHT) ===== */
@keyframes heroDust {
  0% { transform: translate3d(0,0,0) scale(1); opacity:.35; }
  50% { transform: translate3d(2px,-6px,0) scale(1.02); opacity:.55; }
  100% { transform: translate3d(0,0,0) scale(1); opacity:.35; }
}
.hero .hero-content::before{
  content:''; position:absolute; inset:-20px; z-index:0; pointer-events:none;
  background:
    radial-gradient(3px 3px at 10% 20%, rgba(159,231,255,0.55), rgba(159,231,255,0) 60%),
    radial-gradient(2px 2px at 30% 60%, rgba(197,181,255,0.6), rgba(197,181,255,0) 60%),
    radial-gradient(2.5px 2.5px at 70% 30%, rgba(155,242,255,0.55), rgba(155,242,255,0) 60%),
    radial-gradient(3px 3px at 85% 70%, rgba(0,229,255,0.7), rgba(0,229,255,0) 60%);
  animation: heroDust 6s ease-in-out infinite;
  filter: blur(0.2px) saturate(120%);
}
.hero .hero-content{ position: relative; }

@media (prefers-reduced-motion: reduce){
  .hero .hero-content::before{ animation: none; opacity: 0.25; }
}

/* ===== BEATS PLAYLIST UPGRADE ===== */
.beats-playlist { perspective: 900px; }
.bp-item{ position: relative; will-change: transform, box-shadow; transition: transform .25s ease, box-shadow .25s ease, background .2s ease; transform-style: preserve-3d; }
.bp-item:hover{ transform: translateY(-2px) scale(1.01); box-shadow: inset 0 0 0 1px rgba(0,229,255,0.10); }
.bp-item.playing{ background: rgba(0,229,255,0.06); box-shadow: inset 0 0 0 1px rgba(0,229,255,0.18), inset 0 -12px 30px rgba(0,229,255,0.10); }

/* Active row subtle top accent (attach to .playing) */
.bp-item.playing::before{
  content:""; position:absolute; left:10px; right:10px; top:0; height:2px; border-radius:2px; pointer-events:none;
  background: linear-gradient(90deg, rgba(128,233,255,.0), rgba(128,233,255,.85), rgba(151,162,255,.85), rgba(128,255,214,.85), rgba(128,233,255,.0));
  filter: saturate(115%);
}

/* Keyboard focus ring */
.bp-item:focus-within{ outline: none; box-shadow: inset 0 0 0 2px rgba(0,229,255,0.35), 0 6px 18px rgba(0,229,255,0.15); }
.bp-mini-play:focus-visible,
.ap-play:focus-visible,
.ap-mute:focus-visible,
.ap-seek:focus-visible,
.ap-volume:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(0,229,255,0.45); border-radius: 10px; }

/* Neon border loop using outline shim */
@keyframes bpNeonLoop{ 0%,100%{ box-shadow: inset 0 0 24px rgba(0,229,255,0.20); } 50%{ box-shadow: inset 0 0 34px rgba(124,77,255,0.18); } }
.bp-item.playing{ animation: bpNeonLoop 2.4s ease-in-out infinite; }

/* Mini visualizer next to play button */
.bp-actions{ display: flex; align-items: center; gap: 10px; }
.bp-viz{ display: inline-flex; align-items: flex-end; gap: 3px; width: 14px; height: 12px; opacity: .0; transform: translateY(2px); transition: opacity .2s ease, transform .2s ease; }
.bp-viz span{ display:block; width: 3px; background: linear-gradient(180deg, #9feaff, #40e0ff); height: 20%; border-radius: 2px; opacity: .8; }
.bp-viz.playing{ opacity: 1; transform: translateY(0); }
@keyframes vizBeat1{ 0%,100%{ height: 25%; } 50%{ height: 90%; } }
@keyframes vizBeat2{ 0%,100%{ height: 35%; } 50%{ height: 70%; } }
@keyframes vizBeat3{ 0%,100%{ height: 45%; } 50%{ height: 80%; } }

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 640px){
  .hero .hero-ctas .btn{ padding: 10px 14px; font-size: .95rem; }
  .beats-playlist .bp-item{ padding: 10px 12px; }
  .beats-playlist .bp-actions{ gap: 8px; }
  .bp-viz{ width: 12px; gap: 2px; }
}
.bp-viz.playing span:nth-child(1){ animation: vizBeat1 0.9s ease-in-out infinite; }
.bp-viz.playing span:nth-child(2){ animation: vizBeat2 0.8s ease-in-out infinite .05s; }
.bp-viz.playing span:nth-child(3){ animation: vizBeat3 1s ease-in-out infinite .1s; }

@media (prefers-reduced-motion: reduce){
  .bp-item, .bp-item.playing{ transition: background .2s ease; animation: none !important; box-shadow: none; }
  .bp-viz.playing span{ animation: none; height: 55%; }
}

/* Reduced effects mode (set via JS on low-power) */
.reduce-effects .bp-item,
.reduce-effects .bp-item.playing,
.reduce-effects .portfolio-item:hover{ box-shadow: none !important; filter: none !important; }

/* Responsive portfolio grid */
.portfolio-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
@media (max-width: 900px){ .portfolio-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .portfolio-grid{ grid-template-columns: 1fr; gap: 12px; } }

/* Layered animated gradient glow behind hero */
.hero{ position: relative; overflow: hidden; }
.hero::before,
.hero::after{
  content: "";
  position: absolute; inset: -20% -20% -10% -20%;
  pointer-events: none; z-index: -1; /* keep glow layers behind content */
  background: radial-gradient(60% 60% at 20% 20%, rgba(0,229,255,0.35) 0%, rgba(0,229,255,0.08) 35%, rgba(0,0,0,0) 60%),
              radial-gradient(50% 50% at 85% 30%, rgba(124,77,255,0.35) 0%, rgba(124,77,255,0.08) 40%, rgba(0,0,0,0) 65%),
              radial-gradient(40% 40% at 50% 80%, rgba(0,255,170,0.22) 0%, rgba(0,255,170,0.06) 35%, rgba(0,0,0,0) 60%);
  filter: blur(24px) saturate(120%);
  transform: translateZ(0);
}
.hero::before{ animation: heroGradientFlow 16s ease-in-out infinite; }
.hero::after{ animation: heroSoftPulse 8s ease-in-out infinite; }

/* Elevate text layer above glow */
.hero .hero-title, .hero .hero-subtitle, .hero .hero-ctas{ position: relative; z-index: 1; }
.hero .hero-ctas { z-index: 2; }

/* Ensure CTAs are always above any decorative layers */
.hero .hero-ctas,
.hero .hero-ctas .btn{
  position: relative;
  z-index: 100; /* above ::before/::after */
  pointer-events: auto;
  mix-blend-mode: normal;
  opacity: 1 !important;
  filter: none !important;
  transform: translateZ(0);
}
/* In case parent containers set blending on children */
.hero .hero-ctas .btn * { mix-blend-mode: normal; }

/* Create isolated stacking for CTAs to prevent any ancestor blend/filters */
.hero .hero-ctas{ isolation: isolate; }

/* Gradient text for main headline */
.hero .hero-title{
  background: linear-gradient(120deg, #e8fcff 0%, #ffffff 35%, #9bf2ff 60%, #c5b5ff 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 8px 40px rgba(0,212,255,0.18);
}

/* Brighter subtitle with subtle glow */
.hero .hero-subtitle{
  color: rgba(226, 244, 255, 0.9);
  text-shadow: 0 2px 18px rgba(0,212,255,0.18);
}

/* CTA buttons — neon styles */
.hero .hero-ctas .btn{
  position: relative; z-index: 1;
  border-radius: 12px;
  padding: 14px 20px;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  box-shadow: 0 12px 30px rgba(0,212,255,0.12);
}
.hero .hero-ctas .btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,212,255,0.22); }
.hero .hero-ctas .btn:active{ transform: translateY(0); }

/* Primary CTA */
.hero .hero-ctas .btn.primary{
  background: linear-gradient(135deg, #00bcd4 0%, #00e5ff 40%, #7c4dff 100%);
  color: #051015;
}
.hero .hero-ctas .btn.primary:hover{
  background: linear-gradient(135deg, #00d7ee 0%, #2af3ff 40%, #8e63ff 100%);
}

/* Ghost/secondary CTA */
.hero .hero-ctas .btn.ghost{
  background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(124,77,255,0.10));
  border: 1px solid rgba(159,231,255,0.25);
  color: #dffbff;
}
.hero .hero-ctas .btn.ghost:hover{
  border-color: rgba(159,231,255,0.45);
  box-shadow: 0 12px 34px rgba(124,77,255,0.25);
}

/* Portfolio cards polish */
.portfolio-item{ background: linear-gradient(180deg, rgba(9,24,36,0.75), rgba(9,24,36,0.55)); border:1px solid rgba(159,231,255,0.12); border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.portfolio-item:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,212,255,0.18); }

.portfolio-info h3{ color:#dff7ff; }
.portfolio-info p{ color:#9cc2d3; }

/* Portfolio: tag badges */
.pi-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.pi-tags .tag{ font-size:12px; line-height:1; padding:6px 10px; border-radius:999px; color:#9fe7ff; background: rgba(0,229,255,0.08); border:1px solid rgba(159,231,255,0.28); box-shadow: 0 0 0 2px rgba(0,229,255,0.06) inset, 0 2px 10px rgba(0,229,255,0.12); }
.pi-tags .tag:hover{ background: rgba(0,229,255,0.14); border-color: rgba(159,231,255,0.42); }

/* Portfolio: subtle description reveal on hover */
.portfolio-item .portfolio-info p{ max-height: 48px; overflow:hidden; transition: max-height .35s ease; }
.portfolio-item:hover .portfolio-info p{ max-height: 220px; }

/* Covers carousel beautify and center */
.covers-carousel{ position:relative; max-width:560px; width:100%; margin: 0 auto 2rem; border:1px solid rgba(159,231,255,0.12); border-radius:18px; overflow:hidden; background:rgba(9,24,36,0.45); box-shadow: 0 12px 36px rgba(0,0,0,0.35); }
@media (max-width: 640px){
  .covers-carousel{ max-width: 92vw; }
}
.covers-carousel::before{ content:""; display:block; padding-top:100%; }
.covers-track{ position:absolute; inset:0; display:flex; transition: transform .5s ease; height:100%; }
.covers-carousel .cover-slide{ position:relative; width:100%; min-width:100%; height: 100% !important; }
.covers-carousel .cover-slide img{ width:100%; height:100%; object-fit:cover; }
/* Mobile still square by wrapper */
.cover-slide img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); }
.covers-controls{ display:flex; justify-content:space-between; position:absolute; width:100%; top:50%; transform:translateY(-50%); padding:0 10px; pointer-events:none; z-index: 5; }
.covers-carousel .covers-btn{ pointer-events:auto; background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.22); color:#e8f6fb; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.35); backdrop-filter: blur(3px); }
.covers-carousel .covers-btn:hover{ background:rgba(0,0,0,0.6); transform: translateY(-1px); }
.covers-controls{ left:0; right:0; }
.covers-indicators{ display:flex; gap:8px; justify-content:center; padding:10px; position:absolute; left:0; right:0; bottom:8px; z-index:6; pointer-events:auto; }
.covers-indicators .dot{ cursor:pointer; }
.covers-indicators .dot{ width:8px; height:8px; border-radius:50%; background:rgba(159,231,255,0.3); }
.covers-indicators .dot.active{ background:#00e5ff; box-shadow:0 0 0 4px rgba(0,229,255,0.15); }

/* Lightbox for covers */
.covers-lightbox{ position: fixed; inset:0; background: rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; z-index: 10000; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .25s ease, visibility .25s step-end; }
.covers-lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity .25s ease, visibility .25s step-start; }
.covers-lightbox .lb-inner{ position: relative; max-width: 95vw; max-height: 90vh; transform: scale(.96); transition: transform .25s ease; }
.covers-lightbox.open .lb-inner{ transform: scale(1); }
.covers-lightbox img{ width:auto; height:auto; max-width: 95vw; max-height: 90vh; display:block; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.covers-lightbox .lb-close{ position:absolute; top:-16px; right:-16px; width:40px; height:40px; border-radius:50%; background: rgba(0,0,0,0.6); color:#fff; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.covers-lightbox .lb-nav{ position:absolute; top:50%; left:0; right:0; transform: translateY(-50%); display:flex; justify-content:space-between; pointer-events:none; }
.covers-lightbox .lb-btn{ pointer-events:auto; width:48px; height:48px; border-radius:50%; background: rgba(0,0,0,0.6); color:#fff; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* About upgrades */
.about .about-content{ display:grid; grid-template-columns: 1fr; gap:24px; align-items:center; justify-items:center; max-width: 820px; margin: 0 auto; }
.about .section-title{ text-align:center; margin-bottom: 1rem; }
.about .about-image{ position:relative; }
.about .about-image::before{ content:""; position:absolute; inset:-8%; border-radius:24px; background: radial-gradient(60% 60% at 50% 40%, rgba(0,229,255,0.18), rgba(0,229,255,0) 70%), radial-gradient(40% 40% at 20% 80%, rgba(0,140,255,0.12), rgba(0,140,255,0) 70%); filter: blur(24px); z-index:0; }
.about .about-image img{ position:relative; z-index:1; border-radius:16px; box-shadow: 0 16px 44px rgba(0,0,0,0.45); animation: floatY 8s ease-in-out infinite; }
.about .about-info{ text-align:center; }
.about .about-lead{ font-size:22px; font-weight:700; color:#e8f6fb; margin-bottom:10px; }
.about .about-text{ color:#9cc2d3; line-height:1.7; margin-bottom:12px; }
.about .about-bullets{ list-style:none; padding:0; margin:0 0 14px; display:grid; gap:8px; }
.about .about-bullets li{ color:#bfe3ef; }
.about .about-bullets i{ color:#00e5ff; margin-right:8px; }
.about .about-cta{ display:flex; gap:12px; margin-top:10px; justify-content:center; flex-wrap:wrap; }
.btn.btn-outline{ background:transparent; border:1px solid rgba(159,231,255,0.35); color:#9fe7ff; }
.about .about-cta .btn{ transition: transform .2s ease, box-shadow .2s ease; }
.about .about-cta .btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,229,255,0.18); }

@keyframes floatY { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }

/* Quicknav: show only on mobile */
@media (min-width: 900px){
  .section-quicknav{ display:none; }
}

/* Services grid balance */
.services-grid{ grid-auto-rows: 1fr; }
.service-card{ display:flex; flex-direction:column; }
.service-card ul{ margin-top:auto; }

/* Services: hover reveal and clickable cards */
.services-grid{ display:grid; grid-template-columns: repeat(3, minmax(280px,1fr)); gap:16px; }
@media (max-width: 1024px){ .services-grid{ grid-template-columns: repeat(2, minmax(280px,1fr)); } }
@media (max-width: 640px){ .services-grid{ grid-template-columns: 1fr; } }
.service-card{ position:relative; overflow:hidden; background: rgba(9,24,36,0.55); border:1px solid rgba(159,231,255,0.12); border-radius:16px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform, box-shadow; }
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,212,255,0.20), 0 0 0 1px rgba(159,231,255,0.18) inset; border-color: rgba(159,231,255,0.2); }
/* Diagonal shimmer sweep */
.service-card::after{
  content:""; position:absolute; inset:-20% -120% -20% -120%; pointer-events:none;
  background: linear-gradient(75deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 55%);
  transform: translateX(-60%);
  transition: transform .6s ease;
}
.service-card:hover::after{ transform: translateX(60%); }
.service-card.has-cta{ cursor:default; }
.service-card[data-go]{ cursor:pointer; }
.service-card .service-hover{
  position:absolute;
  left:0; right:0; bottom:0; top:auto;
  height: 42%;
  display:flex; align-items:center; justify-content:center; gap:12px; padding:12px;
  background: linear-gradient(180deg, rgba(0,229,255,0.0), rgba(0,229,255,0.10) 35%, rgba(0,229,255,0.16) 100%);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(159,231,255,0.18);
  opacity:0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.service-card:hover .service-hover,
.service-card:focus-within .service-hover{ opacity:1; transform: translateY(0); }
/* Staggered button entrance */
.service-card .service-hover .btn{ opacity:0; transform: translateY(6px) scale(.98); transition: transform .25s ease, opacity .25s ease, box-shadow .2s ease; }
.service-card:hover .service-hover .btn,
.service-card:focus-within .service-hover .btn{ opacity:1; transform: translateY(0) scale(1); }
.service-card .service-hover .btn:nth-child(1){ transition-delay: .02s; }
.service-card .service-hover .btn:nth-child(2){ transition-delay: .08s; }
.service-card .service-hover .btn:nth-child(3){ transition-delay: .14s; }
.service-card .service-hover .btn:nth-child(4){ transition-delay: .2s; }
.btn.btn-light{ background:linear-gradient(180deg,#f5fbff,#e3f3fb); color:#0a1824; border:1px solid rgba(9,24,36,0.12); box-shadow: 0 6px 20px rgba(159,231,255,0.35); border-radius:12px; padding:10px 14px; font-weight:600; }
.btn.btn-light:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(159,231,255,0.5); }
.service-card .service-hover .btn{ pointer-events:auto; }

/* Ensure hover layer does not block interactions when hidden */
.service-card .service-hover *{ pointer-events:auto; }

/* Touch/no-hover devices: keep actions visible at bottom to ensure discoverability */
@media (hover: none) {
  .service-card .service-hover{ opacity:1; transform:none; height: auto; min-height: 56px; position: static; backdrop-filter: none; border-top: 1px solid rgba(159,231,255,0.16); background: linear-gradient(180deg, rgba(0,229,255,0.06), rgba(0,229,255,0.10)); pointer-events:auto; }
}

/* Cases visual improvements */
.cases-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:16px; }
.case-card{ background: linear-gradient(180deg, rgba(9,24,36,0.72), rgba(9,24,36,0.58)); border:1px solid rgba(159,231,255,0.12); border-radius:16px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: transform .25s ease, box-shadow .25s ease; }
.case-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,212,255,0.18); }
.case-image img{ display:block; width:100%; height:200px; object-fit:cover; filter: saturate(1.05) contrast(1.03); }
.case-content h3{ color:#dff7ff; }
.case-content p{ color:#9cc2d3; }
.case-stats span{ background: rgba(159,231,255,0.08); color:#aee9fb; padding:4px 8px; border-radius:8px; border:1px solid rgba(159,231,255,0.16); }

/* Cart */
.cart-list{ display:flex; flex-direction:column; gap:12px; }
.cart-item{ display:flex; justify-content:space-between; align-items:center; padding:12px; background:rgba(9,24,36,0.55); border:1px solid rgba(159,231,255,0.12); border-radius:12px; }
.ci-info{ max-width:60%; }
.ci-title{ font-weight:600; color:#e8f6fb; }
.ci-meta{ color:#8fb3c2; font-size:14px; margin-top:4px; }
.ci-actions{ display:flex; align-items:center; gap:10px; }
.ci-actions select{ background:#0f1b28; color:#cfe7f1; border:1px solid rgba(159,231,255,0.2); border-radius:8px; padding:6px 8px; }
.ci-price{ color:#9fe7ff; font-weight:700; }
.ci-remove{ background:transparent; border:1px solid rgba(255,90,90,0.35); color:#ff9c9c; border-radius:8px; padding:6px 10px; }
.cart-empty{ color:#8fb3c2; }
.cart-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:12px; border-top:1px dashed rgba(159,231,255,0.25); }
.cart-total{ color:#e8f6fb; font-size:18px; }
@media (max-width:768px){ .ci-info{ max-width:100%; } .cart-item{ flex-direction:column; align-items:flex-start; gap:12px; } .cart-footer{ flex-direction:column; gap:10px; align-items:flex-start; } }

/* -------------------------------------------------- */
/* Pricing & Calculator visual polish (scoped)        */
/* -------------------------------------------------- */

/* Center hero CTAs (ensure override if base misses) */
.hero-ctas{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* Pricing cards */
.pricing .pricing-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.pricing .price-card{
  background: linear-gradient(180deg, rgba(9,24,36,0.72), rgba(9,24,36,0.58));
  border:1px solid rgba(159,231,255,0.12);
  border-radius:20px;
  padding:20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,229,255,0.12) inset;
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pricing .price-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,212,255,0.18); border-color: rgba(159,231,255,0.2); }
.pricing .price-card .badge{ position: absolute; transform: translateY(-8px); }
.pricing .price-card .price{ color:#e8f6fb; font-size:24px; font-weight:800; margin: 8px 0 10px; }
.pricing .price-card .features{ color:#9cc2d3; }
.pricing .price-card .actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Calculator container */
.pricing .calculator{ background: linear-gradient(180deg, rgba(9,24,36,0.72), rgba(9,24,36,0.58)); border:1px solid rgba(159,231,255,0.12); border-radius:18px; padding:16px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.pricing .calculator:hover{ border-color: rgba(159,231,255,0.22); box-shadow: 0 14px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,229,255,0.12) inset; }
.pricing .calc-title{ margin:0 0 10px; font-size:22px; color:#dff7ff; }
.pricing .calc-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:16px; }
@media (max-width: 900px){ .pricing .calc-grid{ grid-template-columns: 1fr; } }

.pricing .calc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed rgba(159,231,255,0.12); }
.pricing .calc-row:last-child{ border-bottom:none; }
.pricing .calc-row label{ color:#cfe7f1; }
.pricing .calc-row .price-inline{ color:#9fe7ff; font-weight:600; margin-left:8px; }
.pricing .calc-cover select{ background:#0f1b28; color:#cfe7f1; border:1px solid rgba(159,231,255,0.2); border-radius:10px; padding:8px 10px; }
.pricing .calc-cover select.disabled{ opacity:.6; cursor:not-allowed; }

/* Fulltrack informational row */
.pricing .calc-fulltrack{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; background:rgba(0,229,255,0.06); border:1px dashed rgba(0,229,255,0.25); border-radius:12px; }
.pricing .calc-fulltrack .small-note{ color:#9cc2d3; }

/* Summary side */
.pricing .calc-summary{ display:flex; flex-direction:column; gap:10px; }
.pricing .calc-total{ background: linear-gradient(180deg, rgba(0,229,255,0.08), rgba(0,229,255,0.02)); border:1px solid rgba(0,229,255,0.18); border-radius:14px; padding:12px; font-size:18px; font-weight:800; color:#e8f6fb; box-shadow: 0 6px 22px rgba(0, 212, 255, 0.12); }
.pricing .calc-amount{ color:#9fe7ff; }

.pricing .calc-promo{ display:flex; gap:8px; }
.pricing #calc-promo{ flex:1; background:#0f1b28; color:#cfe7f1; border:1px solid rgba(159,231,255,0.25); border-radius:10px; padding:10px 12px; }
.pricing #calc-apply{ background:linear-gradient(180deg,#f5fbff,#e3f3fb); color:#0a1824; border:1px solid rgba(9,24,36,0.12); box-shadow: 0 6px 20px rgba(159,231,255,0.35); border-radius:10px; padding:10px 14px; font-weight:700; }
.pricing .calc-promo-msg{ min-height:20px; font-size:14px; }
.pricing .calc-promo-msg.ok{ color:#9fe7ff; }
.pricing .calc-promo-msg.err{ color:#ff9c9c; }

.pricing #calc-breakdown{ display:flex; flex-direction:column; gap:6px; padding:6px 0; }
.pricing #calc-breakdown .calc-line{ color:#bfe3ef; font-size:14px; display:flex; justify-content:space-between; gap:10px; }
.pricing #calc-breakdown .calc-line strong{ color:#e8f6fb; }

.pricing .calc-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pricing .calc-actions .btn{ padding:10px 14px; border-radius:12px; font-weight:700; position:relative; overflow:hidden; }
/* Button shimmer on hover */
.pricing .calc-actions .btn::before{
  content:""; position:absolute; inset:-40% -100% -40% -100%; pointer-events:none;
  background: linear-gradient(75deg, rgba(255,255,255,0) 46%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 54%);
  transform: translateX(-60%);
  transition: transform .45s ease;
}
.pricing .calc-actions .btn:hover::before{ transform: translateX(60%); }
/* Soft ripple feedback */
.pricing .calc-actions .btn::after{
  content:""; position:absolute; left:50%; top:50%; width:160%; height:160%; border-radius:50%; transform: translate(-50%, -50%) scale(0.8); opacity:0;
  background: radial-gradient(closest-side, rgba(255,255,255,0.18), rgba(255,255,255,0));
  transition: opacity .25s ease, transform .25s ease;
}
.pricing .calc-actions .btn:active::after{ opacity:.18; transform: translate(-50%, -50%) scale(1); }

/* Global primary button subtle animated gradient on hover */
.btn-primary{ background: linear-gradient(45deg, #00e5ff, #61f2ff); }
.btn-primary:hover{ background: linear-gradient(45deg, #61f2ff, #00e5ff); }

/* Mobile spacing tweaks */
@media (max-width: 600px){
  .pricing .calculator{ padding:12px; }
  .pricing .calc-row{ padding:6px 0; }
  .pricing .calc-total{ padding:10px; font-size:17px; }
  .pricing .calc-actions .btn{ flex:1 1 auto; justify-content:center; text-align:center; }
}

/* Keyboard accessibility focus */
button:focus-visible, a.btn:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid #00e5ff;
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .service-card:hover,
  .portfolio-item:hover{ transform: none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* FAQ buttons focus clarity */
.faq-q:focus-visible{ outline: 2px solid #00e5ff; outline-offset: 2px; border-radius: 10px; }

/* -------------------------------------------------- */
/* Beats Playlist Theme: Glass Frosted                */
/* -------------------------------------------------- */
.beats-playlist.beats-theme-frosted{
  --frost-bg: rgba(10,22,32,0.55);
  --frost-panel: rgba(10,22,32,0.45);
  --frost-border: rgba(159,231,255,0.14);
  --frost-border-strong: rgba(159,231,255,0.20);
  --frost-highlight: rgba(255,255,255,0.06);
  --text-strong: #eaf8ff;
  --text-dim: #a9cfe0;
}
.beats-playlist.beats-theme-frosted .bp-player{
  background: var(--frost-bg);
  border: 1px solid var(--frost-border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.03);
}
.beats-playlist.beats-theme-frosted .bp-controls{ gap: 10px; padding: 10px; }
.beats-playlist.beats-theme-frosted .bp-btn{
  background: var(--frost-panel);
  border: 1px solid var(--frost-border);
  border-radius: 10px;
  color: var(--text-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.beats-playlist.beats-theme-frosted .bp-btn:hover{
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
  border-color: var(--frost-border-strong);
}
.beats-playlist.beats-theme-frosted .bp-btn:active{ transform: translateY(0); }

.beats-playlist.beats-theme-frosted .bp-title{
  color: var(--text-strong);
  text-shadow: 0 0 14px rgba(255,255,255,0.06);
}

.beats-playlist.beats-theme-frosted .bp-time{
  gap: 10px;
  color: var(--text-dim);
}
.beats-playlist.beats-theme-frosted .bp-time .bp-bar{
  height: 12px;
  background: rgba(9,24,36,0.55);
  border: 1px solid var(--frost-border);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.beats-playlist.beats-theme-frosted .bp-time .bp-bar:hover{
  box-shadow: inset 0 0 0 2px var(--frost-highlight);
}
.beats-playlist.beats-theme-frosted .bp-time .bp-fill{
  background: linear-gradient(90deg, rgba(0,229,255,0.55), rgba(97,242,255,0.5), rgba(124,77,255,0.45));
  box-shadow: 0 0 12px rgba(0,229,255,0.22);
}
.beats-playlist.beats-theme-frosted .bp-time .bp-fill::after{
  width: 14px; height: 14px;
  box-shadow: 0 0 8px rgba(0,229,255,0.45);
}

/* Tiles */
.beats-playlist.beats-theme-frosted .bp-strip{ gap: 10px; }
.beats-playlist.beats-theme-frosted .bp-tile{
  background: var(--frost-panel);
  border: 1px solid var(--frost-border);
  border-radius: 12px;
  color: var(--text-strong);
  padding: 8px 10px;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.beats-playlist.beats-theme-frosted .bp-tile:hover{
  background: rgba(255,255,255,0.05);
  border-color: var(--frost-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}
.beats-playlist.beats-theme-frosted .bp-tile.active{
  border-color: rgba(255,255,255,0.18);
}
.beats-playlist.beats-theme-frosted .bp-tile.playing{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.beats-playlist.beats-theme-frosted .bp-thumb{
  border-radius: 10px;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid var(--frost-border);
}
.beats-playlist.beats-theme-frosted .bp-info .bp-name{ color: var(--text-strong); }
.beats-playlist.beats-theme-frosted .bp-info .bp-tags{ color: var(--text-dim); }

.beats-playlist.beats-theme-frosted .bp-volume{
  background: rgba(10,22,32,0.35);
  border: 1px solid var(--frost-border);
  border-radius: 10px;
  padding: 4px 8px;
}
.beats-playlist.beats-theme-frosted .bp-vol{ accent-color: #99f0ff; }

/* Tone down animations for frosted theme */
.beats-playlist.beats-theme-frosted.playing .bp-time .bp-fill{ animation: none; background-size: 100% 100%; }
.beats-playlist.beats-theme-frosted .bp-player.playing{ animation: none; }
.beats-playlist.beats-theme-frosted.playing .bp-title{ animation: none; background: none; color: var(--text-strong); }

  /* -------------------------------------------------- */
  /* FAQ buttons focus clarity */
  .faq-q:focus-visible{ outline: 2px solid #00e5ff; outline-offset: 2px; border-radius: 10px; }

  /* -------------------------------------------------- */
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .service-card:hover,
    .portfolio-item:hover{ transform: none !important; }
    .reveal{ opacity:1 !important; transform:none !important; }
  }

  /* -------------------------------------------------- */
  /* Global primary button subtle animated gradient on hover */
  .btn-primary{ background: linear-gradient(45deg, #00e5ff, #61f2ff); }
  .btn-primary:hover{ background: linear-gradient(45deg, #61f2ff, #00e5ff); }

  /* -------------------------------------------------- */
  /* Mobile spacing tweaks */
  @media (max-width: 600px){
    .pricing .calculator{ padding:12px; }
    .pricing .calc-row{ padding:6px 0; }
    .pricing .calc-total{ padding:10px; font-size:17px; }
    .pricing .calc-actions .btn{ flex:1 1 auto; justify-content:center; text-align:center; }
  }

  /* -------------------------------------------------- */
  /* Keyboard accessibility focus */
  button:focus-visible, a.btn:focus-visible, input:focus-visible, select:focus-visible{
    outline: 2px solid #00e5ff;
    outline-offset: 2px;
  }

  /* -------------------------------------------------- */
  /* Pricing styles */
  .pricing .price-card{
    border:1px solid rgba(159,231,255,0.12);
    border-radius:20px;
    padding:20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,229,255,0.12) inset;
    border-radius:16px;
    padding:16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .pricing .price-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,212,255,0.18); border-color: rgba(159,231,255,0.2); }
  .pricing .price-card .badge{ position: absolute; transform: translateY(-8px); }
  .pricing .price-card .price{ color:#e8f6fb; font-size:24px; font-weight:800; margin: 8px 0 10px; }
  .pricing .price-card .features{ color:#9cc2d3; }
  .pricing .price-card .actions{ display:flex; gap:10px; flex-wrap:wrap; }

  /* Calculator container */
  .pricing .calculator{ background: linear-gradient(180deg, rgba(9,24,36,0.72), rgba(9,24,36,0.58)); border:1px solid rgba(159,231,255,0.12); border-radius:18px; padding:16px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
  .pricing .calculator:hover{ border-color: rgba(159,231,255,0.22); box-shadow: 0 14px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,229,255,0.12) inset; }
  .pricing .calc-title{ margin:0 0 10px; font-size:22px; color:#dff7ff; }
  .pricing .calc-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:16px; }
  @media (max-width: 900px){ .pricing .calc-grid{ grid-template-columns: 1fr; } }

  .pricing .calc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed rgba(159,231,255,0.12); }
  .pricing .calc-row:last-child{ border-bottom:none; }
  .pricing .calc-row label{ color:#cfe7f1; }
  .pricing .calc-row .price-inline{ color:#9fe7ff; font-weight:600; margin-left:8px; }
  .pricing .calc-cover select{ background:#0f1b28; color:#cfe7f1; border:1px solid rgba(159,231,255,0.2); border-radius:10px; padding:8px 10px; }
  .pricing .calc-cover select.disabled{ opacity:.6; cursor:not-allowed; }

  /* Fulltrack informational row */
  .pricing .calc-fulltrack{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; background:rgba(0,229,255,0.06); border:1px dashed rgba(0,229,255,0.25); border-radius:12px; }
  .pricing .calc-fulltrack .small-note{ color:#9cc2d3; }

  /* Summary side */
  .pricing .calc-summary{ display:flex; flex-direction:column; gap:10px; }
  .pricing .calc-total{ background: linear-gradient(180deg, rgba(0,229,255,0.08), rgba(0,229,255,0.02)); border:1px solid rgba(0,229,255,0.18); border-radius:14px; padding:12px; font-size:18px; font-weight:800; color:#e8f6fb; box-shadow: 0 6px 22px rgba(0, 212, 255, 0.12); }
  .pricing .calc-amount{ color:#9fe7ff; }

  .pricing .calc-promo{ display:flex; gap:8px; }
  .pricing #calc-promo{ flex:1; background:#0f1b28; color:#cfe7f1; border:1px solid rgba(159,231,255,0.25); border-radius:10px; padding:10px 12px; }
  .pricing #calc-apply{ background:linear-gradient(180deg,#f5fbff,#e3f3fb); color:#0a1824; border:1px solid rgba(9,24,36,0.12); box-shadow: 0 6px 20px rgba(159,231,255,0.35); border-radius:10px; padding:10px 14px; font-weight:700; }
  .pricing .calc-promo-msg{ min-height:20px; font-size:14px; }
  .pricing .calc-promo-msg.ok{ color:#9fe7ff; }
  .pricing .calc-promo-msg.err{ color:#ff9c9c; }

  .pricing #calc-breakdown{ display:flex; flex-direction:column; gap:6px; padding:6px 0; }
  .pricing #calc-breakdown .calc-line{ color:#bfe3ef; font-size:14px; display:flex; justify-content:space-between; gap:10px; }
  .pricing #calc-breakdown .calc-line strong{ color:#e8f6fb; }

  .pricing .calc-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .pricing .calc-actions .btn{ padding:10px 14px; border-radius:12px; font-weight:700; position:relative; overflow:hidden; }
  /* Button shimmer on hover */
  .pricing .calc-actions .btn::before{
    content:""; position:absolute; inset:-40% -100% -40% -100%; pointer-events:none;
    background: linear-gradient(75deg, rgba(255,255,255,0) 46%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 54%);
    transform: translateX(-60%);
    transition: transform .45s ease;
  }
  .pricing .calc-actions .btn:hover::before{ transform: translateX(60%); }
  /* Soft ripple feedback */
  .pricing .calc-actions .btn::after{
    content:""; position:absolute; left:50%; top:50%; width:160%; height:160%; border-radius:50%; transform: translate(-50%, -50%) scale(0.8); opacity:0;
    background: radial-gradient(closest-side, rgba(255,255,255,0.18), rgba(255,255,255,0));
    transition: opacity .25s ease, transform .25s ease;
  }
  .pricing .calc-actions .btn:active::after{ opacity:.18; transform: translate(-50%, -50%) scale(1); }

  /* --------------------------------------------- */
  /* Compact mini-player inside catalog card       */
  /* --------------------------------------------- */
  .portfolio-item .audio-player.mini.compact{ padding:8px; border-radius:12px; background: rgba(12,26,36,0.35); border:1px solid rgba(159,231,255,0.12); backdrop-filter: blur(6px); }
  .portfolio-item .audio-player.mini.compact .ap-top{ display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:8px; }
  .portfolio-item .audio-player.mini.compact .ap-play{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background: rgba(10,25,35,0.55); color:#bff5ff; border:1px solid rgba(159,231,255,0.18); }
  .portfolio-item .audio-player.mini.compact .ap-thumb{ width:32px; height:32px; border-radius:50%; background-size:cover; background-position:center; background-color:#0f1b28; border:1px solid rgba(159,231,255,0.18); }
  .portfolio-item .audio-player.mini.compact .ap-title{ font-weight:700; color:#eaf8ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .portfolio-item .audio-player.mini.compact .ap-visualizer{ display:flex; gap:2px; align-items:flex-end; height:12px; }
  .portfolio-item .audio-player.mini.compact .ap-visualizer .bar{ width:2px; height:4px; background: rgba(159,231,255,0.35); border-radius:2px; }
  .portfolio-item .audio-player.mini.compact .ap-progress{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:6px; margin-top:6px; }
  .portfolio-item .audio-player.mini.compact .ap-bar{ width:100%; height:6px; background: rgba(9,24,36,0.6); border:1px solid rgba(159,231,255,0.18); border-radius:999px; overflow:hidden; cursor:pointer; }
  .portfolio-item .audio-player.mini.compact .ap-bar .ap-bar-fill{ height:100%; width:0%; background: linear-gradient(90deg,#00e5ff,#61f2ff); box-shadow: 0 0 8px rgba(0,229,255,0.2); }
  .portfolio-item .audio-player.mini.compact .ap-time{ color:#a9d9ea; font-weight:700; font-size:11px; }
  .portfolio-item .audio-player.mini.compact .ap-volume input{ width:80px; accent-color:#99f0ff; }

  /* Beats page: make the cover thumb larger and clickable as play/pause */
  /* Use grid at player level to position cover at left and controls at right */
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button{
    display: grid !important;
    grid-template-columns: 68px 1fr !important; /* 60x60 cover + padding */
    align-items: center !important;
    gap: 6px !important;
    padding: 8px !important;
    margin: 0 !important;
    height: 120px !important;
    box-sizing: border-box !important;
  }
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-top{
    grid-column: 1 / 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 !important; padding: 0 !important;
  }
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-thumb{
    width: 60px !important; height: 60px !important; border-radius: 50% !important; cursor: pointer !important;
    box-shadow: 0 8px 22px rgba(0,229,255,0.15) !important;
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease !important;
  }
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-thumb:active{
    transform: scale(0.97);
  }
  /* Emphasize hover for mouse users */
  @media (hover:hover){
    body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-thumb:hover{
      box-shadow: 0 10px 28px rgba(0,229,255,0.24);
      filter: saturate(1.12);
    }
  }
  /* Hide the small play button when using big thumbnail as the control */
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-play{
    display: none;
  }

  /* Hide duplicate title inside mini player on beats page to reduce clutter */
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-title{ display:none !important; }
  /* Visible compact title row */
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-name{
    grid-column: 1 / 3 !important;
    margin: 0 0 4px 0 !important;
    font-weight: 800 !important;
    color: #eaf8ff !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  /* Hide visualizer on beats compact layout */
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-visualizer{ display:none; }
  
  /* Place progress (time bar, duration, volume) to the right of cover */
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-progress{
    grid-column: 2 / 3 !important;
    margin-top: 0 !important;
  }
  /* Slightly tighter elements in progress row */
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-progress{
    gap: 6px !important;
  }
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-bar{ height: 5px !important; }
  body.page-beats .portfolio-item .audio-player.mini.compact.thumb-button .ap-time{ font-size: 11px !important; }
  body.page-beats .portfolio-item .audio-player.mini.compact .ap-volume input{ width:72px !important; }

  /* Remove extra gaps between player and info block; hide the big title below */
  body.page-beats .portfolio-item .portfolio-media{ margin-bottom:2px !important; }
  body.page-beats .portfolio-item .portfolio-info{ margin-top:0 !important; padding-top:0 !important; }
  body.page-beats .portfolio-item .portfolio-info > h3{ display:none; }
  /* Compact badges spacing and keep buy-row immediately after */
  body.page-beats .portfolio-item .portfolio-info > p{ margin:0 0 4px 0; }

  /* --------------------------------------------- */
  /* Compact Beat Player Container (new structure) */
  /* --------------------------------------------- */
  body.page-beats .beat-player-container{
    height:auto !important; /* allow growth to fit content */
    min-height:164px !important; /* ensure everything fits */
    padding:10px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    background:linear-gradient(180deg, rgba(4,18,28,.88), rgba(3,14,22,.74)) !important; /* darker */
    border:1px solid rgba(159,231,255,0.22) !important; /* neon rim */
    border-radius:12px !important;
    box-shadow: inset 0 0 0 .5px rgba(0,229,255,.35), 0 2px 10px rgba(0,0,0,.35) !important; /* subtle neon */
    font-family:inherit !important;
  }
  body.page-beats .beat-player-container .main-player-row{
    display:flex !important; align-items:flex-start !important; gap:8px !important; min-height:0 !important; flex-wrap:wrap !important;
  }
  body.page-beats .beat-player-container .cover{
    width:58px !important; height:58px !important; border-radius:50% !important; overflow:hidden !important;
    margin:0 !important; padding:0 !important; border:0 !important; background:none !important; cursor:pointer !important;
    box-shadow:0 8px 22px rgba(0,229,255,0.15) !important;
  }
  body.page-beats .beat-player-container .cover img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
  body.page-beats .beat-player-container .right-side{
    display:flex !important; flex-direction:column !important; gap:6px !important; min-width:0 !important; flex:1 1 220px !important;
  }
  body.page-beats .beat-player-container .title{
    font-weight:900 !important; font-size:15px !important; line-height:1.18 !important; color:#EAF8FF !important;
    display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; line-clamp:2 !important;
    overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; margin:0 !important; padding:0 !important;
  }
  body.page-beats .beat-player-container .timeline{
    display:flex !important; align-items:center !important; gap:5px !important; margin:0 !important; padding:0 !important; min-width:0 !important; flex:1 1 100% !important;
  }
  body.page-beats .beat-player-container .timeline .time{ color:#a9d9ea !important; font-weight:700 !important; font-size:11px !important; }
  body.page-beats .beat-player-container .progress{
    position:relative !important; flex:1 1 auto !important; height:5px !important; border-radius:999px !important;
    background:rgba(9,24,36,0.6) !important; border:1px solid rgba(159,231,255,0.18) !important; overflow:hidden !important; cursor:pointer !important;
  }
  body.page-beats .beat-player-container .progress .progress-fill{
    position:absolute !important; left:0 !important; top:0 !important; height:100% !important; width:0% !important;
    background:linear-gradient(90deg,#00e5ff,#61f2ff) !important; box-shadow:0 0 8px rgba(0,229,255,0.2) !important;
  }
  body.page-beats .beat-player-container .volume{ display:flex !important; align-items:center !important; gap:6px !important; margin-left:auto !important; }
  body.page-beats .beat-player-container .volume .vol-ico{ width:14px !important; height:14px !important; background:rgba(159,231,255,.7) !important; border-radius:3px !important; display:inline-block !important; }
  body.page-beats .beat-player-container .volume .vol-range{ width:64px !important; margin:0 !important; }
  body.page-beats .beat-player-container .controls-row{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:6px !important; margin:0 !important; padding:6px 0 0 0 !important; border-top:1px solid rgba(159,231,255,0.14) !important; }
  body.page-beats .beat-player-container .controls-row{ flex-wrap: wrap !important; }
  body.page-beats .beat-player-container .tags{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin:0 !important; flex:1 1 auto !important; min-width:0 !important; }
  body.page-beats .beat-player-container .tags .badge{ margin:0 !important; }
  body.page-beats .beat-player-container .tags .badge:empty{ display:none !important; }
  body.page-beats .beat-player-container .buy{ display:flex !important; align-items:center !important; gap:6px !important; flex:0 0 auto !important; flex-wrap:wrap !important; }
  body.page-beats .beat-player-container .buy .license{
    height:34px !important; line-height:34px !important; margin:0 !important; max-width: 240px !important; width: auto !important;
    -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
    border:1px solid rgba(0,229,255,.35) !important;
    color:#dff7ff !important; background-color: rgba(12,26,36,.9) !important;
    border-radius:10px !important;
    padding:0 34px 0 10px !important;
    box-shadow: inset 0 0 0 .5px rgba(0,229,255,.25), 0 0 12px rgba(0,229,255,.06) !important;
    position:relative !important;
    background-image:
      linear-gradient(180deg, rgba(12,26,36,.9), rgba(10,22,32,.8)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 0 0, right 10px center !important;
    background-size: auto, 14px 14px !important;
    cursor:pointer !important;
  }
  body.page-beats .beat-player-container .buy .license option{ color:#e9faff !important; background:#0b1c28 !important; }
  @media (hover:hover){
    body.page-beats .beat-player-container .buy .license:hover{ box-shadow: 0 0 0 2px rgba(0,229,255,.2) inset !important; }
  }
  body.page-beats .beat-player-container .buy .license:focus{ outline:none !important; box-shadow: 0 0 0 2px rgba(0,229,255,.35) inset !important; }
  body.page-beats .beat-player-container .buy .license:disabled{ opacity:.6 !important; cursor:not-allowed !important; }
  body.page-beats .beat-player-container .buy .cart{
    height:34px !important; line-height:34px !important; padding:0 14px !important; margin:0 !important; border-radius:10px !important; border:0 !important; cursor:pointer !important;
    background: linear-gradient(180deg, #19e6ff, #10c9e0) !important; color:#00131d !important; font-weight:900 !important; letter-spacing:.2px !important;
    display:flex !important; align-items:center !important; gap:8px !important; white-space:nowrap !important; min-width:140px !important;
    box-shadow: 0 6px 18px rgba(25,230,255,.35), inset 0 -2px 0 rgba(0,0,0,.12) !important;
  }
  /* Neon cart icon using mask */
  body.page-beats .beat-player-container .buy .cart-ico{
    width:16px !important; height:16px !important; display:inline-block !important; flex:0 0 16px !important;
    background-color:#00131d !important; border-radius:0 !important; background-image:none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.75'/%3E%3Ccircle cx='19' cy='21' r='1.75'/%3E%3Cpath d='M2 3h3l2.4 12.3a2 2 0 0 0 2 1.7h7.6a2 2 0 0 0 2-1.6l1.3-6.9H6.1'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.75'/%3E%3Ccircle cx='19' cy='21' r='1.75'/%3E%3Cpath d='M2 3h3l2.4 12.3a2 2 0 0 0 2 1.7h7.6a2 2 0 0 0 2-1.6l1.3-6.9H6.1'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  @media (hover:hover){
    body.page-beats .beat-player-container .buy .cart:hover{ transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(25,230,255,.42), inset 0 -2px 0 rgba(0,0,0,.14) !important; }
    body.page-beats .beat-player-container .buy .cart:hover .cart-ico{ background-color:#001017 !important; }
  }
  body.page-beats .beat-player-container .buy .cart:active{ transform: translateY(0) scale(.995) !important; }
  body.page-beats .beat-player-container .buy .cart:focus-visible{ outline:none !important; box-shadow: 0 0 0 3px rgba(0,229,255,.35), 0 6px 18px rgba(25,230,255,.35) !important; }

  /* Disabled cart (sold) */
  body.page-beats .beat-player-container .buy .cart:disabled{
    background: linear-gradient(180deg, #5f6f75, #46565d) !important; color:#0b151b !important; cursor:not-allowed !important; opacity:.85 !important;
    box-shadow: none !important;
  }

  /* Responsive tweaks */
  @media (max-width: 860px){
    body.page-beats .beat-player-container{ height:auto !important; padding:8px !important; }
    body.page-beats .beat-player-container .cover{ width:56px !important; height:56px !important; }
    body.page-beats .beat-player-container .volume .vol-range{ width:56px !important; }
    body.page-beats .beat-player-container .controls-row{ gap:10px !important; }
  }

  /* --------------------------------------------- */
  /* Visual polish & states                        */
  /* --------------------------------------------- */
  /* Brighter background for beats page (scroll-attached to avoid iOS/desktop glitches) */
  body.page-beats{
    background:
      radial-gradient(1200px 600px at 20% 40%, rgba(0,229,255,.08), transparent 60%),
      radial-gradient(900px 500px at 80% 30%, rgba(97,242,255,.06), transparent 60%),
      linear-gradient(180deg, #081820 0%, #05131a 100%) !important;
    background-attachment: scroll, scroll, scroll !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    overflow-y: auto !important;
  }
  body.page-beats .beat-player-container{
    transition: box-shadow .25s ease, transform .12s ease, border-color .2s ease !important;
    box-shadow: 0 8px 26px rgba(0, 229, 255, 0.12) inset, 0 2px 10px rgba(0,0,0,.35) !important;
  }
  @media (hover:hover){
    body.page-beats .beat-player-container:hover{ box-shadow: 0 10px 30px rgba(0,229,255,.16) inset, 0 6px 20px rgba(0,0,0,.38) !important; }
  }
  body.page-beats .beat-player-container.is-playing{
    border-color: rgba(0,229,255,0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(0,229,255,.45), 0 12px 34px rgba(0,229,255,.22) !important;
  }

  /* --------------------------------------------- */
  /* Global background (same brightness everywhere) */
  /* --------------------------------------------- */
  body{
    background:
      radial-gradient(1200px 600px at 20% 40%, rgba(0,229,255,.08), transparent 60%),
      radial-gradient(900px 500px at 80% 30%, rgba(97,242,255,.06), transparent 60%),
      linear-gradient(180deg, #081820 0%, #05131a 100%) !important;
    background-attachment: scroll, scroll, scroll !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }

  /* Cover pulse when playing */
  @keyframes beatPulse { 0% { box-shadow: 0 0 0 0 rgba(0,229,255,.35);} 100% { box-shadow: 0 0 0 10px rgba(0,229,255,0); } }
  body.page-beats .beat-player-container.is-playing .cover{ animation: beatPulse 1.4s ease-out infinite !important; }

  /* Progress fill sheen */
  @keyframes progressSheen{ 0%{ background-position: 0% 0; } 100%{ background-position: 200% 0; } }
  body.page-beats .beat-player-container .progress .progress-fill{
    background-image: linear-gradient(90deg, rgba(0,229,255,.0) 0%, rgba(255,255,255,.22) 12%, rgba(0,229,255,.0) 24%), linear-gradient(90deg,#00e5ff,#61f2ff) !important;
    background-size: 120px 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
  }
  body.page-beats .beat-player-container.is-playing .progress .progress-fill{ animation: progressSheen 1.6s linear infinite !important; }

  /* Custom volume slider */
  body.page-beats .beat-player-container .volume .vol-range{
    -webkit-appearance: none !important; appearance:none !important; height:6px !important; border-radius:999px !important;
    background: linear-gradient(90deg, rgba(0,229,255,.35), rgba(0,229,255,.15)) !important; outline:none !important;
  }
  body.page-beats .beat-player-container .volume .vol-range::-webkit-slider-runnable-track{
    height:6px; border-radius:999px; background: transparent;
  }
  body.page-beats .beat-player-container .volume .vol-range::-webkit-slider-thumb{
    -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#19e6ff; box-shadow:0 0 0 3px rgba(25,230,255,.25);
    margin-top:-4px; border:none;
  }
  body.page-beats .beat-player-container .volume .vol-range::-moz-range-track{ height:6px; border-radius:999px; background: transparent; }
  body.page-beats .beat-player-container .volume .vol-range::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:#19e6ff; box-shadow:0 0 0 3px rgba(25,230,255,.25); border:none; }
  body.page-beats .beat-player-container .volume .vol-range:focus{ box-shadow:0 0 0 2px rgba(0,229,255,.25) !important; }

  /* Badges subtle glass effect */
  body.page-beats .beat-player-container .tags .badge{
    background: linear-gradient(180deg, rgba(159,231,255,.18), rgba(159,231,255,.08)) !important;
    border: 1px solid rgba(159,231,255,.25) !important;
    border-radius: 10px !important;
    padding: 3px 6px !important;
    color: #dff7ff !important; font-size:11px !important;
  }
  /* Status-specific colors */
  body.page-beats .beat-player-container .tags .badge.status.available{
    background: linear-gradient(180deg, rgba(0,229,255,.32), rgba(0,229,255,.18)) !important;
    border-color: rgba(0,229,255,.60) !important;
    color:#eaffff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.6) !important;
    font-weight:800 !important;
  }
  body.page-beats .beat-player-container .tags .badge.status.leased{ background: linear-gradient(180deg, rgba(255,179,0,.22), rgba(255,179,0,.10)) !important; border-color: rgba(255,179,0,.45) !important; color:#1a1200 !important; }
  body.page-beats .beat-player-container .tags .badge.status.sold{ background: linear-gradient(180deg, rgba(255,102,102,.22), rgba(255,102,102,.10)) !important; border-color: rgba(255,102,102,.45) !important; color:#1a0000 !important; }

  /* Cart micro-hover: tilt + shimmer */
  body.page-beats .beat-player-container .buy .cart{ position:relative !important; transition: transform .12s ease, box-shadow .2s ease !important; overflow:hidden !important; }
  body.page-beats .beat-player-container .buy .cart::before{
    content:""; position:absolute; inset:-120% -40% -120% -40%; background: linear-gradient(75deg, rgba(255,255,255,0) 46%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 54%);
    transform: translateX(-60%); transition: transform .45s ease; pointer-events:none;
  }
  @media (hover:hover){
    body.page-beats .beat-player-container .buy .cart:hover{ transform: rotate(-0.6deg) translateY(-1px); box-shadow: 0 6px 18px rgba(25,230,255,.35) !important; }
    body.page-beats .beat-player-container .buy .cart:hover::before{ transform: translateX(60%); }
  }
  body.page-beats .beat-player-container .buy .cart:active{ transform: rotate(0) translateY(0); }