:root {
  --color-bg: #f5f7ff;
  --color-surface: #ffffff;
  --color-surface-alt: #eef3ff;
  --color-primary: #1368ec;
  --color-primary-strong: #0a4eb5;
  --color-secondary: #13b8a6;
  --color-accent: #ff9f43;
  --color-text: #1f2937;
  --color-muted: #5f6b7a;
  --color-border: #dbe3f0;
  --color-success: #0e9f6e;
  --shadow-sm: 0 4px 14px rgba(19, 104, 236, 0.08);
  --shadow-md: 0 14px 38px rgba(16, 55, 123, 0.12);
  --shadow-lg: 0 20px 60px rgba(9, 35, 89, 0.2);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --font-ar: "Cairo", "Tajawal", sans-serif;
  --font-en: "Inter", "Segoe UI", sans-serif;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 180ms;
  --dur-med: 360ms;
  --dur-slow: 700ms;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ar);
  color: var(--color-text);
  background:
    radial-gradient(circle at 15% 15%, rgba(19, 184, 166, 0.16), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(255, 159, 67, 0.18), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(19, 104, 236, 0.14), transparent 36%),
    var(--color-bg);
  background-attachment: fixed;
}

body.theme-dark {
  color: #e5edf7;
  background:
    radial-gradient(circle at 15% 15%, rgba(19, 184, 166, 0.2), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(255, 159, 67, 0.18), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(19, 104, 236, 0.2), transparent 36%),
    #071225;
  color-scheme: dark;
}

body.lang-en-active {
  font-family: var(--font-en);
}

.lang-en {
  display: none;
}

.lang-en-active .lang-ar {
  display: none !important;
}

.lang-en-active .lang-en {
  display: inline !important;
}

.lang-en-active .lang-en.block {
  display: block !important;
}

.lang-en-active .lang-en.flex {
  display: flex !important;
}

.lang-en-active .lang-en.inline-flex {
  display: inline-flex !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: var(--shadow-md);
}

body.theme-dark .glass-card {
  background: rgba(10, 22, 44, 0.78);
  border-color: rgba(92, 121, 165, 0.35);
}

body.theme-dark .bg-white,
body.theme-dark .bg-white\/70,
body.theme-dark .bg-white\/80,
body.theme-dark .bg-white\/90 {
  background-color: #0f1d38 !important;
}

body.theme-dark .bg-slate-50 {
  background-color: #122747 !important;
}

body.theme-dark .text-slate-900,
body.theme-dark .text-slate-800,
body.theme-dark .text-slate-700 {
  color: #e8eefb !important;
}

body.theme-dark .text-slate-600,
body.theme-dark .text-slate-500 {
  color: #b8c8e4 !important;
}

body.theme-dark .border-slate-200,
body.theme-dark .border-slate-300,
body.theme-dark .border-slate-200\/70 {
  border-color: #274165 !important;
}

body.theme-dark header,
body.theme-dark footer {
  background: rgba(9, 19, 37, 0.85) !important;
}

.section-divider {
  position: relative;
  overflow: hidden;
}

.section-divider::after {
  content: "";
  position: absolute;
  inset-inline: -10%;
  bottom: -45px;
  height: 90px;
  background: linear-gradient(90deg, rgba(19, 104, 236, 0.18), rgba(19, 184, 166, 0.2), rgba(255, 159, 67, 0.18));
  border-radius: 999px;
  filter: blur(26px);
  pointer-events: none;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(19, 104, 236, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 104, 236, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: transform var(--dur-med) var(--ease-standard), opacity var(--dur-med) var(--ease-standard);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger > * {
  opacity: 0;
  transform: translateY(20px);
}

.stagger.is-visible > * {
  animation: staggerIn var(--dur-med) var(--ease-standard) forwards;
}

.stagger.is-visible > *:nth-child(2) { animation-delay: 80ms; }
.stagger.is-visible > *:nth-child(3) { animation-delay: 160ms; }
.stagger.is-visible > *:nth-child(4) { animation-delay: 240ms; }

@keyframes staggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: pageFade var(--dur-slow) var(--ease-standard) both;
}

@keyframes pageFade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.55;
}

.faq-item summary {
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.nav-link {
  position: relative;
  padding-block: 0.35rem;
}

.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.2rem;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.focus-ring:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(19, 104, 236, 0.45);
  outline-offset: 2px;
  border-radius: 8px;
}

.counter-value {
  font-feature-settings: "tnum";
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}