/*  Logo cards -- transparent SVG update  */

/* Card: use brand color as border on hover */
.integ-card{
  position:relative;
  width:110px;height:120px;flex-shrink:0;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  cursor:pointer;
  transition:all .35s ease;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding-bottom:6px;
}
.integ-card:hover{
  border-color:var(--brand, rgba(0,229,255,.4));
  background:color-mix(in srgb, var(--brand, #00e5ff) 10%, transparent);
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 16px 40px color-mix(in srgb, var(--brand, #7c3aed) 30%, transparent),
             0 0 0 1px color-mix(in srgb, var(--brand, #7c3aed) 20%, transparent);
}

/* Image area */
.integ-card-inner{
  width:100%;
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:18px 18px 6px;
  position:relative;z-index:1;
}
.integ-card-inner img{
  width:100%;height:100%;
  object-fit:contain;
  /* No filter -- SVGs are already transparent & colored */
  filter:none;
  transition:transform .35s ease, filter .35s ease;
}
.integ-card:hover .integ-card-inner img{
  transform:scale(1.08);
  filter:drop-shadow(0 0 8px var(--brand, rgba(0,229,255,.5)));
}

/* Brand name label */
.integ-card-name{
  font-size:.6rem;
  font-weight:600;
  color:rgba(255,255,255,.45);
  letter-spacing:.04em;
  text-align:center;
  padding:0 6px 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  transition:color .3s ease;
  position:relative;z-index:1;
}
.integ-card:hover .integ-card-name{
  color:var(--brand, rgba(255,255,255,.9));
}

/* Glow */
.integ-card-glow{
  position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(circle at 50% 30%,
    color-mix(in srgb, var(--brand, #00e5ff) 20%, transparent) 0%,
    transparent 70%
  );
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.integ-card:hover .integ-card-glow{opacity:1}

/* Scan line on hover */
.integ-card::after{
  content:'';position:absolute;
  left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand, rgba(0,229,255,.7)),transparent);
  top:-100%;
}
.integ-card:hover::after{animation:scanLine .6s ease forwards}

/* Dark icons that need inversion in dark mode */
.integ-card img[alt="TikTok"],
.integ-card img[alt="X / Twitter"] {
  filter: invert(1);
}

/* Responsive sizes */
@media(max-width:1024px){
  .integ-card{width:96px;height:108px}
}
@media(max-width:768px){
  .integ-card{width:80px;height:92px;border-radius:14px}
  .integ-card-name{font-size:.55rem}
}