@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  display: flex;
  animation: marquee 40s linear infinite;
}

/* GRID مثل Shopify (3 أعمدة في الديسكتوب) */
.bento-grid{
  display:grid;
  gap:22px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px){
  .bento-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:24px;
  }
}

/* الكارت العام */
.card-shopify{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 520px;          /* مهم: نفس الارتفاع مثل Shopify */
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  transform: translateZ(0);
}

/* كروت غامقة */
.card-dark{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(88,28,135,.35), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(3,7,18,.92), rgba(5,8,22,.98));
}

/* كارت فاتح (مثل checkout card في Shopify) */
.card-light{
  background: linear-gradient(180deg, #ffffff, #f7f7fb);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

/* لمسة Shopify: لمعان خفيف فوق */
.card-shopify::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(800px 300px at 50% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* hover مثل Shopify */
.card-shopify:hover{
  transform: translateY(-6px);
  transition: transform .35s ease;
}

/* Gradient text on hover (Shopify-like) */
.hover-grad{
  background: linear-gradient(90deg,#4aa8ff,#7C3AED,#EC4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(255,255,255,.55);
  transition: color .25s ease, background-position .45s ease, opacity .25s ease;
  background-size: 200% 200%;
  background-position: 0% 50%;
}
.hover-grad:hover{
  color: transparent;
  background-position: 100% 50%;
  opacity: 1;
}

/* Base muted paragraph like Shopify */
.muted-p{
  color: rgba(255,255,255,.45);
}

/* Accent word appears white by default */
.accent{
  color: rgba(255,255,255,.92);
}

/* Optional: on hover give a subtle gradient glow */
.hover-grad{
  transition: color .2s ease, opacity .2s ease;
}

.hover-grad:hover{
  background: linear-gradient(90deg,#61DAFB,#7C3AED,#EC4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.card-shopify {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  
  /* 👇 الأسطر الجديدة لحل مشكلة الزوايا البيضاء 👇 */
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  isolation: isolate;
  backface-visibility: hidden;
}