/* Button Fill Animation - Left to Right */
.btn-fill-animation {
    position: relative;
    overflow: hidden;
}

.btn-fill-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: currentColor;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.btn-fill-animation:hover::before {
    width: 100%;
}

.btn-fill-animation:hover span {
    color: white !important;
    z-index: 2;
    position: relative;
}

/* White buttons on white background - keep blue text on hover */
.btn-fill-animation[style*="border-color: #0066ff"][style*="color: #0066ff"]:hover span {
    color: white !important;
}

/* White buttons on blue background - fill with white, text becomes dark */
.btn-fill-animation[style*="border-color: white"][style*="color: white"]::before {
    background: white !important;
}

.btn-fill-animation[style*="border-color: white"][style*="color: white"]:hover span {
    color: #0f1729 !important;
}

/* Ensure text stays visible on blue background cards - more specific */
div[style*="background: linear-gradient(135deg, #0066ff"] .btn-fill-animation[style*="border-color: white"]::before {
    background: white !important;
}

div[style*="background: linear-gradient(135deg, #0066ff"] .btn-fill-animation[style*="border-color: white"]:hover span,
div[style*="background: #0066ff"] .btn-fill-animation[style*="border-color: white"]:hover span {
    color: #0f1729 !important;
}

/* Product Card Clickable */
.product-card-clickable {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card-clickable:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
}

/* Card Hover Animations */

/* Product Cards */
section div[style*="grid-template-columns: repeat(4, 1fr)"] > div {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  position: relative;
}

section div[style*="grid-template-columns: repeat(4, 1fr)"] > div::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 204, 255, 0.1));
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

section div[style*="grid-template-columns: repeat(4, 1fr)"] > div:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 50px rgba(0, 102, 255, 0.25);
}

section div[style*="grid-template-columns: repeat(4, 1fr)"] > div:hover::after {
  opacity: 1;
}

/* Blue card special effect */
section div[style*="background: #0066ff"]:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 25px 60px rgba(0, 102, 255, 0.5);
  filter: brightness(1.1);
}

/* News Cards */
.news-carousel-item {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

.news-carousel-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Technology Grid Cards */
div[style*="background: #f8f9fa"] {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  position: relative;
  overflow: hidden;
}

div[style*="background: #f8f9fa"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.1), transparent);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

div[style*="background: #f8f9fa"]:hover::before {
  left: 100%;
}

div[style*="background: #f8f9fa"]:hover {
  transform: translateX(5px);
  border-left-width: 6px !important;
}

/* FAQ Items */
.faq-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.faq-item:hover {
  transform: translateX(5px);
  background: #f0f0f0 !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Pricing Cards (if any) */
div[style*="border: 2px solid white"] {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

div[style*="border: 2px solid white"]:hover {
  transform: translateY(-8px);
  border-color: #0066ff !important;
  box-shadow: 0 15px 40px rgba(0, 102, 255, 0.2);
}

/* Geometric Content Card */
.geometric-content > div {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.geometric-content > div:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 30px 70px rgba(0, 102, 255, 0.4) !important;
  border-color: rgba(0, 102, 255, 0.5) !important;
}

/* Buttons - enhanced */
.minimal-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.minimal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);
}

/* Stats cards */
.stat-item {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.stat-item:hover {
  transform: translateY(-5px);
}

/* Community social cards */
a[href*="telegram"],
a[href*="discord"],
a[href*="instagram"],
a[href*="tradingview"] {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a[href*="telegram"]:hover,
a[href*="discord"]:hover,
a[href*="instagram"]:hover,
a[href*="tradingview"]:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 102, 255, 0.2);
}