:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 0%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 0%;
  --primary: 225 100% 50%;
  --primary-foreground: 0 0% 100%;
  --primary-dark: 225 100% 31%;
  --primary-light: 225 100% 85%;
  --secondary: 0 0% 0%;
  --secondary-foreground: 0 0% 100%;
  --secondary-light: 0 0% 20%;
  --accent: 151 100% 69%;
  --accent-foreground: 0 0% 0%;
  --accent-dark: 151 100% 45%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 225 100% 50%;
  --gradient-primary: linear-gradient(135deg, hsl(225 100% 50%), hsl(225 100% 31%));
  --gradient-hero: linear-gradient(135deg, hsl(0 0% 0% / 0.95), hsl(225 100% 50% / 0.9));
  --gradient-accent: linear-gradient(90deg, hsl(151 100% 69%), hsl(151 100% 45%));
  --gradient-professional: linear-gradient(45deg, hsl(0 0% 0%), hsl(225 100% 50%), hsl(151 100% 69%));
  --shadow-elegant: 0 25px 60px -10px hsl(225 100% 50% / 0.25);
  --shadow-card: 0 4px 25px -5px hsl(0 0% 0% / 0.15);
  --shadow-glow: 0 0 60px hsl(151 100% 69% / 0.4);
  --radius: 0.5rem;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 0 0% 5%;
  --foreground: 0 0% 95%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 95%;
  --primary: 225 100% 60%;
  --primary-foreground: 0 0% 100%;
  --primary-dark: 225 100% 40%;
  --primary-light: 225 100% 75%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 95%;
  --secondary-light: 0 0% 25%;
  --accent: 151 100% 69%;
  --accent-foreground: 0 0% 5%;
  --accent-dark: 151 100% 50%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 65%;
  --destructive: 0 62.8% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 20%;
  --input: 0 0% 15%;
  --ring: 225 100% 60%;
  --gradient-primary: linear-gradient(135deg, hsl(225 100% 60%), hsl(225 100% 40%));
  --gradient-hero: linear-gradient(135deg, hsl(0 0% 5% / 0.95), hsl(225 100% 60% / 0.9));
  --gradient-accent: linear-gradient(90deg, hsl(151 100% 69%), hsl(151 100% 50%));
  --gradient-professional: linear-gradient(45deg, hsl(0 0% 15%), hsl(225 100% 60%), hsl(151 100% 69%));
  --shadow-elegant: 0 25px 60px -10px hsl(225 100% 60% / 0.3);
  --shadow-card: 0 4px 25px -5px hsl(0 0% 0% / 0.4);
  --shadow-glow: 0 0 60px hsl(151 100% 69% / 0.5);
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

* { border-color: hsl(var(--border)); }

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

[dir="rtl"] { direction: rtl; }
[dir="rtl"] .text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[dir="rtl"] i[data-lucide="arrow-right"],
[dir="rtl"] i[data-lucide="arrow-left"],
[dir="rtl"] i[data-lucide="chevron-right"],
[dir="rtl"] i[data-lucide="chevron-left"],
[dir="rtl"] svg.lucide-arrow-right,
[dir="rtl"] svg.lucide-arrow-left,
[dir="rtl"] svg.lucide-chevron-right,
[dir="rtl"] svg.lucide-chevron-left {
  transform: scaleX(-1);
}

[dir="rtl"] .-right-4 {
  right: auto;
  left: -1rem;
}

.hero-gradient         { background: var(--gradient-hero); }
.professional-gradient { background: var(--gradient-professional); }
.card-shadow           { box-shadow: var(--shadow-card); }
.elegant-shadow        { box-shadow: var(--shadow-elegant); }
.glow-effect           { box-shadow: var(--shadow-glow); }

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-accent-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-padding   { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .section-padding { padding-top: 7rem; padding-bottom: 7rem; } }

.page-container { min-height: 100vh; padding-top: 4rem; }

.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  min-width: 16rem;
  max-width: 24rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: hsl(0 0% 100%);
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: 0 10px 25px -5px hsl(0 0% 0% / 0.25);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.toast.toast-visible { opacity: 1; transform: translateY(0); }
.toast-success { background-color: hsl(151 100% 35%); }
.toast-error   { background-color: hsl(0 84% 45%); }
.toast-warning { background-color: hsl(38 92% 45%); }

/* ============================================
   ANIMATIONS
   ============================================ */

/* 1. Base entrance classes — toggled by IntersectionObserver via .is-visible */
.anim-fade-in,
.anim-fade-up,
.anim-fade-down,
.anim-scale-in,
.anim-slide-right,
.anim-slide-left {
  transition-delay: calc(var(--i, 0) * var(--anim-step, 0.05s));
}

.anim-fade-in  { opacity: 0; transition: opacity 0.35s ease; }
.anim-fade-up  { opacity: 0; transform: translateY(20px);  transition: opacity 0.35s ease, transform 0.35s ease; }
.anim-fade-down{ opacity: 0; transform: translateY(-20px); transition: opacity 0.35s ease, transform 0.35s ease; }
.anim-scale-in { opacity: 0; transform: scale(0.95);       transition: opacity 0.25s ease, transform 0.25s ease; }
.anim-slide-right { opacity: 0; transform: translateX(-20px); transition: opacity 0.35s ease, transform 0.35s ease; }
.anim-slide-left  { opacity: 0; transform: translateX(20px);  transition: opacity 0.35s ease, transform 0.35s ease; }

.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* 2. Stagger delay utilities (HTML-only, for ≤5 children) */
.anim-delay-1 { transition-delay: 0.05s; }
.anim-delay-2 { transition-delay: 0.10s; }
.anim-delay-3 { transition-delay: 0.15s; }
.anim-delay-4 { transition-delay: 0.20s; }
.anim-delay-5 { transition-delay: 0.25s; }

/* 3. Hover and interaction utilities */
.anim-hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.anim-hover-lift:hover {
  transform: translateY(-3px);
}
.anim-hover-scale {
  transition: transform 0.2s ease;
}
.anim-hover-scale:hover { transform: scale(1.03); }
.anim-press:active      { transform: scale(0.97); }

/* 4. Persistent / looping keyframes */
@keyframes anim-spin {
  to { transform: rotate(360deg); }
}
@keyframes anim-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes anim-bounce-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes anim-shake {
  0%, 100%  { transform: translateX(0); }
  20%, 60%  { transform: translateX(-6px); }
  40%, 80%  { transform: translateX(6px); }
}
.anim-spin   { animation: anim-spin     0.8s linear infinite; }
.anim-pulse  { animation: anim-pulse    1.5s ease-in-out infinite; }
.anim-bounce { animation: anim-bounce-y 1s   ease-in-out infinite; }
.anim-shake  { animation: anim-shake    0.4s ease; }

/* 5. Modal and overlay transitions */
.anim-modal-backdrop {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.anim-modal-backdrop.is-visible { opacity: 1; }

.anim-modal-panel {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.anim-modal-panel.is-visible {
  opacity: 1;
  transform: none;
}

/* 6. Toast slide-in */
@keyframes anim-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-toast {
  animation: anim-toast-in 0.25s ease forwards;
}

/* 7. Page entrance */
.anim-page {
  opacity: 0;
  animation: anim-fade-page 0.3s ease forwards;
}
@keyframes anim-fade-page {
  to { opacity: 1; }
}

/* 8. Reduced motion — wrap ALL animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}