@font-face {
  font-family: 'theyearofhandicrafts';
  src: url('https://cdn.jsdelivr.net/gh/mokhtarbsaid/rare-arabic-fonts/theyearofhandicrafts/theyearofhandicrafts-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'theyearofhandicrafts';
  src: url('https://cdn.jsdelivr.net/gh/mokhtarbsaid/rare-arabic-fonts/theyearofhandicrafts/theyearofhandicrafts-semibold.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'theyearofhandicrafts';
  src: url('https://cdn.jsdelivr.net/gh/mokhtarbsaid/rare-arabic-fonts/theyearofhandicrafts/theyearofhandicrafts-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
  --bg-primary: #FAFAFA;
  --bg-secondary: #F5F5F5;
  --bg-tertiary: #EAEAEA;
  --bg-light: #FAFAFA;
  --bg-card: #FFFFFF;
  --border-subtle: #E5E5E5;
  --border-strong: #D4D4D4;
  --text-primary: #0A0A0A;
  --text-secondary: #525252;
  --text-muted: #A3A3A3;
  --accent: #895AE0;
  --accent-dark: #5530A0;
  --accent-hover: #7546D1;
  --accent-pressed: #5E36B3;
  --accent-soft: rgba(137,90,224,0.15);
  --accent-soft-border: rgba(137,90,224,0.30);
  --accent-glow: rgba(137,90,224,0.20);
  --accent-light: rgba(137,90,224,0.08);
  --on-accent: #FFFFFF;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --nav-bg: rgba(250,250,250,0.85);
  
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-accent: 0 4px 20px rgba(137,90,224,0.25);
  --shadow-accent-lg: 0 8px 32px rgba(137,90,224,0.30);
  
  --gradient-hero: linear-gradient(135deg, #895AE0 0%, #6B3FC4 50%, #5530A0 100%);
  --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #FAF8FF 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(137,90,224,0.12) 0%, rgba(107,63,196,0.08) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
}

[data-theme="dark"] {
  --bg-primary: #0A0A0A;
  --bg-secondary: #141414;
  --bg-tertiary: #1F1F1F;
  --bg-card: #1A1A1A;
  --bg-light: #FAFAFA;
  --border-subtle: #262626;
  --border-strong: #3A3A3A;
  --text-primary: #FFFFFF;
  --text-secondary: #A3A3A3;
  --text-muted: #6B6B6B;
  --accent: #895AE0;
  --accent-dark: #5530A0;
  --accent-hover: #7546D1;
  --accent-pressed: #5E36B3;
  --accent-soft: rgba(137,90,224,0.15);
  --accent-soft-border: rgba(137,90,224,0.30);
  --accent-glow: rgba(137,90,224,0.20);
  --accent-light: rgba(137,90,224,0.08);
  --on-accent: #FFFFFF;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --nav-bg: rgba(10,10,10,0.85);
  
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.40);
  --shadow-accent: 0 4px 20px rgba(137,90,224,0.30);
  --shadow-accent-lg: 0 8px 32px rgba(137,90,224,0.35);
  
  --gradient-hero: linear-gradient(135deg, #895AE0 0%, #6B3FC4 50%, #5530A0 100%);
  --gradient-card: linear-gradient(135deg, #1A1A1A 0%, #141414 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(137,90,224,0.15) 0%, rgba(107,63,196,0.10) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(26,26,26,0.90) 0%, rgba(20,20,20,0.70) 100%);
}

@font-face {
  font-family: 'afeesh-aadi';
  src: url('https://cdn.jsdelivr.net/gh/mokhtarbsaid/rare-arabic-fonts/afeesh/afeesh-aadi.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'afeesh-aadi', var(--font-ibm-plex), var(--font-tajawal), 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 300ms ease, color 300ms ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'theyearofhandicrafts', 'Tajawal', serif !important;
}

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

.animate-fade-up {
  opacity: 0;
  animation: fadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-scale {
  opacity: 0;
  animation: fadeInScale 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.animate-slide-up {
  opacity: 0;
  animation: slideUp 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@keyframes pulse-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}

.animate-pulse-breathe {
  animation: pulse-breathe 2s ease-in-out infinite;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.animate-slide-in-right {
  animation: slideInRight 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(137,90,224,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(137,90,224,0); }
}

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes shimmer-light {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.animate-shimmer-light {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  background-size: 1000px 100%;
  animation: shimmer-light 2s infinite linear;
}

.honeypot-field {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}

::selection {
  background-color: var(--accent);
  color: var(--on-accent);
}

.custom-scrollbar::-webkit-scrollbar {
  height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.card-lift {
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-press {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.card-press:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-xs);
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, #6B3FC4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
}

[data-theme="dark"] .glass-card {
  border: 1px solid rgba(255,255,255,0.08);
}

[data-site-header] {
  height: 72px;
  background: transparent;
  border-color: transparent;
}
[data-site-header].is-scrolled {
  height: 60px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  border-color: var(--border-subtle);
}