:root {
  --radius: 0.875rem;
  --background: oklch(0.995 0.003 120);
  --foreground: oklch(0.22 0.06 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.06 250);
  --secondary: oklch(0.96 0.01 145);
  --secondary-foreground: oklch(0.32 0.13 260);
  --muted: oklch(0.965 0.008 240);
  --muted-foreground: oklch(0.46 0.03 250);
  --border: oklch(0.92 0.01 240);
  --input: oklch(0.93 0.01 240);
  --primary-glow: #00b558;
  --accent-glow: #ffb04d;
  --gradient-hero: linear-gradient(135deg, #013b82 0%, #024a6e 50%, #008c44 100%);
  --gradient-primary: linear-gradient(135deg, #008c44, #00b558);
  --gradient-accent: linear-gradient(135deg, #f7941d, #ffb04d);
  --gradient-brand: linear-gradient(120deg, #008c44, #f7941d);
  --gradient-surface: linear-gradient(180deg, oklch(1 0 0), oklch(0.97 0.01 145));
  --shadow-elegant: 0 20px 50px -20px color-mix(in oklab, #013b82 25%, transparent);
  --shadow-glow: 0 0 60px color-mix(in oklab, #008c44 35%, transparent);
  --shadow-card: 0 8px 30px -12px color-mix(in oklab, #013b82 18%, transparent);
  --shadow-3d: 0 30px 60px -30px color-mix(in oklab, #013b82 40%, transparent),
    0 18px 36px -18px color-mix(in oklab, #008c44 20%, transparent);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", "Noto Sans Arabic", system-ui, sans-serif; letter-spacing: -0.02em; }

.text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-accent { background: var(--gradient-accent); }
.bg-gradient-surface { background: var(--gradient-surface); }
.bg-gradient-brand { background: var(--gradient-brand); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-3d { box-shadow: var(--shadow-3d); }

.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s var(--transition-smooth), box-shadow 0.6s var(--transition-smooth);
}
.card-3d:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-6px);
  box-shadow: var(--shadow-3d);
}
.hover-lift {
  transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s var(--transition-smooth);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-fade-up { animation: fade-up 0.7s var(--transition-smooth) both; }
.grain-bg {
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in oklab, #008c44 12%, transparent), transparent 40%),
    radial-gradient(circle at 80% 70%, color-mix(in oklab, #f7941d 12%, transparent), transparent 40%);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

#site-header {
  overflow: visible;
}

/* Home hero: clear fixed header + oversized logo on small desktop */
.hero-home {
  padding-top: clamp(6.5rem, 10vw + 3rem, 11rem);
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-home {
    padding-top: clamp(7.5rem, 8vw + 4rem, 9.5rem);
  }
  .header-logo-home {
    height: 6.5rem;
    margin-bottom: -2rem;
    max-width: 180px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .header-logo-home {
    height: 7.5rem;
    margin-bottom: -2.5rem;
    max-width: 200px;
  }
}
@media (min-width: 1280px) {
  .header-logo-home {
    height: 9rem;
    margin-bottom: -4rem;
    max-width: 220px;
  }
}
@media (min-width: 1536px) {
  .header-logo-home {
    height: 10rem;
    margin-bottom: -5rem;
    max-width: none;
  }
}
#site-header.scrolled .header-logo-home,
.header-logo-home.is-scrolled {
  height: 3rem;
  margin-bottom: 0;
  max-width: none;
}
@media (min-width: 768px) {
  #site-header.scrolled .header-logo-home,
  .header-logo-home.is-scrolled {
    height: 3.5rem;
  }
}

/* Default home logo (mobile) */
.header-logo-home {
  height: 5.5rem;
  margin-bottom: -1.75rem;
}
#site-header.scrolled {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px -8px rgba(1, 59, 130, 0.18), inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
#site-header.scrolled .nav-link { color: color-mix(in oklab, var(--foreground) 80%, transparent); }
#site-header.scrolled .nav-link:hover { color: #008c44; }
#site-header.scrolled .nav-link.nav-active { color: #008c44; }
#site-header:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.9); }
#site-header:not(.scrolled) .nav-link:hover { color: #fff; }
#site-header:not(.scrolled) .nav-link.nav-active { color: #fff; }

.filter-btn.active { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-elegant); }
.tab-btn.active { border-bottom-color: #008c44 !important; color: #008c44; }
[data-filter-item].hidden { display: none; }