/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Cairo', sans-serif; margin: 0; background: #0a0f1a; color: #e2e8f0; overflow-x: hidden; }

/* ===== RTL SUPPORT ===== */
[dir="rtl"] body { font-family: 'Cairo', 'Inter', sans-serif; }
[dir="rtl"] .nav-link::after { left: auto; right: 0; }
[dir="rtl"] [dir-auto] { text-align: start; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f1a2e; }
::-webkit-scrollbar-thumb { background: #D6156C; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #E83F8A; }

/* ===== ANIMATIONS ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.2s; }
.stagger-4 { transition-delay: 0.28s; }
.stagger-5 { transition-delay: 0.36s; }
.stagger-6 { transition-delay: 0.44s; }

/* Hero slider */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; pointer-events: none; }
.slide.active { opacity: 1; pointer-events: auto; }

/* Floating particles */
.particle { position: absolute; border-radius: 50%; pointer-events: none; animation: float linear infinite; opacity: 0.15; }
@keyframes float {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.15; }
  90% { opacity: 0.15; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* Glow effect */
.glow-pink { box-shadow: 0 0 40px rgba(214,21,108,0.25); }
.glow-cyan { box-shadow: 0 0 40px rgba(0,184,212,0.25); }
.glow-green { box-shadow: 0 0 40px rgba(124,179,66,0.25); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #D6156C, #00B8D4, #7CB342);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Service card hover */
.service-card { transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease; }
.service-card:hover { transform: translateY(-8px); }

/* Nav link underline */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #D6156C, #00B8D4); transition: width 0.3s ease; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Counter animation */
.counter { font-variant-numeric: tabular-nums; }

/* Pulse ring */
.pulse-ring { animation: pulse-ring 2s ease-out infinite; }
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Stats number */
.stat-number { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Language switcher */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.lang-btn:hover {
  background: rgba(255,255,255,0.1);
  color: white;
  border-color: rgba(255,255,255,0.2);
}
.lang-btn .lang-label { line-height: 1; }

/* Smooth text swap on language change */
[data-i18n] {
  transition: opacity 0.2s ease;
}