:root {
  --color-primary: #502c88;
  --color-secondary: #6c6c6c;
  --color-accent: #f06420;
  --color-light: #f7f7fa;
  --neo-bg: #e9ecf3;
  --neo-surface: #eef1f7;
  --neo-text: #1f2937;
  --neo-shadow-dark: #c9cdd5;
  --neo-shadow-light: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  background: radial-gradient(circle at top left, #f4f6fb 0%, var(--neo-bg) 55%, #e4e7ef 100%);
  color: var(--neo-text);
}

.neo-body {
  min-height: 100vh;
}

.font-ar {
  font-family: "Readex Pro", "Tajawal", "Noto Kufi Arabic", sans-serif;
}

.font-en {
  font-family: "Inter", "Segoe UI", "Roboto", sans-serif;
}

.text-primary-theme {
  color: var(--color-primary);
}

.bg-primary-theme {
  background-color: var(--color-primary);
}

.bg-accent-theme {
  background-color: var(--color-accent);
}

#siteHeader {
  background: rgba(238, 241, 247, 0.9);
  backdrop-filter: blur(8px);
  box-shadow:
    8px 8px 18px var(--neo-shadow-dark),
    -8px -8px 18px var(--neo-shadow-light);
}

.hero-overlay {
  background:
    linear-gradient(120deg, rgba(80, 44, 136, 0.84), rgba(80, 44, 136, 0.58)),
    center/cover no-repeat;
  border-radius: 0 0 2rem 2rem;
  box-shadow:
    inset 6px 6px 16px rgba(41, 28, 67, 0.28),
    inset -8px -8px 16px rgba(255, 255, 255, 0.1),
    8px 8px 22px var(--neo-shadow-dark),
    -8px -8px 22px var(--neo-shadow-light);
}

.section-card {
  background: var(--neo-surface);
  border: 0;
  box-shadow:
    8px 8px 18px var(--neo-shadow-dark),
    -8px -8px 18px var(--neo-shadow-light);
}

.lang-pill {
  color: var(--color-primary);
  background: var(--neo-surface);
  border: 0;
  box-shadow:
    5px 5px 10px var(--neo-shadow-dark),
    -5px -5px 10px var(--neo-shadow-light);
}

.lang-pill.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow:
    inset 4px 4px 8px rgba(56, 31, 96, 0.8),
    inset -4px -4px 8px rgba(116, 72, 181, 0.35);
}

.neo-panel {
  border: 0;
  border-radius: 1rem;
  background: var(--neo-surface);
  box-shadow:
    8px 8px 18px var(--neo-shadow-dark),
    -8px -8px 18px var(--neo-shadow-light);
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.hero-image {
  min-height: 440px;
}

.product-image {
  aspect-ratio: 16/10;
  object-fit: cover;
}

.neo-btn {
  border: 0;
  border-radius: 0.9rem;
  background: var(--neo-surface);
  color: var(--color-primary);
  box-shadow:
    7px 7px 14px var(--neo-shadow-dark),
    -7px -7px 14px var(--neo-shadow-light);
  transition: all 0.18s ease;
}

.neo-btn:hover {
  transform: translateY(-1px);
}

.neo-btn:active {
  box-shadow:
    inset 6px 6px 12px var(--neo-shadow-dark),
    inset -6px -6px 12px var(--neo-shadow-light);
  transform: translateY(0);
}

.neo-btn-accent {
  background: var(--color-accent);
  color: #fff;
  box-shadow:
    8px 8px 14px rgba(157, 90, 52, 0.32),
    -6px -6px 14px rgba(255, 255, 255, 0.18);
}

.neo-btn-glass {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow:
    8px 8px 16px rgba(44, 30, 74, 0.32),
    -6px -6px 16px rgba(255, 255, 255, 0.1);
}

.neo-btn-row {
  width: 100%;
  background: var(--neo-surface);
  color: #334155;
}

.neo-badge {
  background: var(--color-primary);
  color: #fff;
  box-shadow:
    inset 4px 4px 8px rgba(49, 27, 84, 0.85),
    inset -4px -4px 8px rgba(120, 88, 168, 0.28);
}

.neo-link {
  color: var(--color-primary);
  text-decoration: none;
}

.neo-link:hover {
  text-decoration: underline;
}