/* ── BRANDS ── */
.brands-sec{
  width:100%;
  padding:0;
  overflow:hidden;
  /* border-top:1px solid rgba(255,255,255,.1); */
  /* border-bottom:1px solid rgba(255,255,255,.1); */
  background:#0a0a0a;
}

.brands-wrap{
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  width:100%;
}

.brands-header{
  text-align:center;
  width:100%;
}

.brands-title{
  font-size:24px;
  font-weight:700;
  /* letter-spacing:-.02em; */
  color:#fff;
  margin:0;
  padding-top: 84px;
  font-family:Montserrat;
  /* padding-bottom:32px; */
}

.brands-grid{
  display:flex;
  gap:24px;
  width:100%;
  margin:0 auto;
  padding:0 70.5px;
  padding-bottom: 76px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  flex-wrap:nowrap;
}

.brands-grid::-webkit-scrollbar{
  display:none;
}

.brand-card{
  flex:0 0 calc(25% - 6px);
  height:524px;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,filter .3s ease;
  background:#111;
}

.brand-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  filter:brightness(1.08);
}

.brand-card-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

.brand-card:hover .brand-card-image{
  transform:scale(1.05);
}

.brand-card-placeholder{
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#2a2a2a 0%,#1a1a1a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#666;
}

.brand-placeholder-text{
  font-size:18px;
  font-weight:600;
  color:#666;
  text-align:center;
}

.brand-card-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  /* background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.56) 90%); */
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:12px;
  height:100%;
  justify-content:flex-end;
  transition:background .3s ease;
}

.brand-card:hover .brand-card-overlay{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 90%);
}

.brand-name{
  font-size:16px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  margin:0;
  text-shadow:0 0 12px rgba(219,255,0,.2),0 2px 8px rgba(0,0,0,.3);
}

.brand-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.brand-stat{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:rgba(255,255,255,.85);
  transition:color .3s ease,text-shadow .3s ease;
}

.brand-card:hover .brand-stat{
  color:rgba(255,255,255,.95);
  text-shadow:0 0 8px rgba(219,255,0,.15);
}

.brand-stat-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e91e63;
}

/* Carousel controls - hidden on desktop */
.brands-carousel-controls{
  display:none;
}

@media(max-width:980px){
  .brands-sec{padding:20px 0px}
  .brands-title{font-size:28px; padding-top: 20px;}
  .brands-grid{padding: 0 20px;}
  .brand-card{flex:0 0 calc(33.333% - 10px);}
}

@media(max-width:1024px){
  .brands-grid{
    padding:0 20px;
    gap:16px;
  }
  .brand-card{
    flex:0 0 calc(33.333% - 10px);
  }
}

@media(max-width:768px){
  .brand-card{
    flex:0 0 calc(50% - 10px);
  }
}

@media(max-width:640px){
  .brands-sec {
    padding: 20px 0;
  }

  .brands-title {
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 24px;
  }

  .brands-grid {
    padding: 0 16px;
    gap: 16px;
  }

  .brand-card {
    flex:0 0 calc(100% - 10px);
    border-radius: 16px;
  }

  .brand-card-image {
    object-fit: cover;
    object-position: center;
  }
}