/* Subtle animated gradient background */
.page-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(40% 35% at 80% 10%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(35% 35% at 20% 85%, rgba(16,185,129,0.18), transparent 60%),
    radial-gradient(25% 25% at 50% 40%, rgba(236,72,153,0.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  filter: saturate(105%);
}

/* Decorative grid dots */
.bg-dots {
  --dot: rgba(0,0,0,0.06);
  position: fixed; inset: 0; z-index: -2;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9), rgba(0,0,0,0.2));
}

/* Glass + gradient border */
.glass { backdrop-filter: blur(10px); background: rgba(255,255,255,0.65); }
.gradient-border { position: relative; }
.gradient-border::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 1.25rem;
  background: conic-gradient(from 180deg at 50% 50%, #93c5fd, #86efac, #fbcfe8, #93c5fd);
  filter: blur(6px); opacity: .65;
}

/* Soft shadow */
.shadow-soft { box-shadow: 0 10px 30px rgba(2,6,23,0.08), 0 4px 12px rgba(2,6,23,0.06); }

/* Buttons (uses your brand CSS variables if present) */
.btn-primary {
  background: linear-gradient(135deg, var(--brand600,#2563eb), var(--brand500,#3b82f6));
  color: #fff;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost:hover { background-color: rgba(2,6,23,0.04); }

/* Gentle animations (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .float { animation: float 6s ease-in-out infinite; }
  .fade-up { animation: fadeUp .9s ease-out both; }
  .fade-delay { animation-delay: .15s; }
  .fade-delay-2 { animation-delay: .3s; }
}
@keyframes float {
  0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px) }
  to { opacity: 1; transform: translateY(0) }
}

/* RTL niceties */
.rtl-li li { padding-inline-start: .25rem; }