/* === World-Class UI Enhancements === */

/* AI Mode Cards hover effect */
#ai-modes > div:nth-child(2) > div {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#ai-modes > div:nth-child(2) > div:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
#ai-modes > div:nth-child(2) > div:first-child:hover {
  border-color: rgba(10,132,255,.3);
  box-shadow: 0 20px 60px rgba(10,132,255,.1);
}
#ai-modes > div:nth-child(2) > div:last-child:hover {
  border-color: rgba(48,209,88,.3);
  box-shadow: 0 20px 60px rgba(48,209,88,.1);
}

/* Feature cards enhanced */
.feat {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.feat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.feat:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  background: var(--bg-1);
}
.feat:hover::before { opacity: 1; }

/* Template cards enhanced */
.tpl {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tpl:hover {
  transform: translateY(-4px) scale(1.02);
}
.tpl .try-btn {
  transition: all 0.3s;
}
.tpl:hover .try-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Pricing cards enhanced */
.pcard {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pcard:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.15);
}

/* Button micro-interactions */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.1), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }

/* Stat numbers count-up animation */
.hero-stats .n, .stats-b .n {
  background: linear-gradient(135deg, var(--t0), var(--t2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section headers enhanced */
.sec-h h2 {
  background: linear-gradient(135deg, var(--t0) 0%, var(--t1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nav blur enhancement */
.nav {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

/* Glow effect for hero */
.hero h1 {
  text-shadow: 0 0 100px rgba(10,132,255,.15);
}

/* Card border glow on hover */
.dash-card {
  transition: box-shadow 0.4s;
}
.dash-card:hover {
  box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}

/* Smooth reveal for AI section */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
#ai-modes > div:nth-child(2) > div {
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
#ai-modes > div:nth-child(2) > div:nth-child(1) { animation-delay: 0.1s; }
#ai-modes > div:nth-child(2) > div:nth-child(2) { animation-delay: 0.2s; }

/* Tech badges pulse */
#ai-modes .sec-tag .dot, .hero-badge .dot {
  animation: pulse 2s infinite;
}

/* RTL support for AI section */
body.rtl #ai-modes > div:nth-child(2) {
  direction: rtl;
}