:root {
  --radius: 0.75rem;
  --brand-emerald: #0B5D3B;
  --brand-emerald-deep: #07422A;
  --brand-gold: #C9A227;
  --brand-gold-soft: #E6C567;
  --brand-cream: #FAF7F0;
  --brand-charcoal: #1F2A24;
  --brand-muted: #6B7A72;
}

* { border-color: #E7E0CE; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--brand-cream);
  color: var(--brand-charcoal);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5 {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -0.01em;
  margin: 0;
}

.font-serif-display { font-family: "Playfair Display", Georgia, serif; }
.font-arabic { font-family: "Amiri", "Playfair Display", serif; }

/* Islamic geometric background pattern (subtle) */
.bg-geometric {
  background-color: var(--brand-cream);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(11,93,59,0.05) 0, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(201,162,39,0.06) 0, transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%230B5D3B' stroke-width='0.6' opacity='0.08'><path d='M40 4l10 18 20 4-14 14 4 20-20-10-20 10 4-20L10 26l20-4z'/><circle cx='40' cy='40' r='18'/></g></svg>");
  background-size: auto, auto, 160px 160px;
}

.hover-lift { transition: transform 300ms ease, box-shadow 300ms ease; }
.hover-lift:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 40px -20px rgba(11,93,59,0.25); }

.text-gold-gradient {
  background: linear-gradient(90deg, #C9A227 0%, #E6C567 50%, #C9A227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-gold {
  background: linear-gradient(180deg, #D4AF37 0%, #C9A227 100%);
  color: #1F2A24;
  font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(201,162,39,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 32px -14px rgba(201,162,39,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-gold:disabled { opacity: 0.7; }

@keyframes float-slow {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(0,-14px) rotate(2deg); }
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
  70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-soft {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-float-slow { animation: float-slow 9s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; }
.animate-fade-up { animation: fade-up 0.9s cubic-bezier(0.16,1,0.3,1) both; }
.animate-fade-in-soft { animation: fade-in-soft 1.2s ease-out both; }
.animate-spin { animation: spin 1s linear infinite; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(0.16,1,0.3,1), transform 800ms cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* FAQ accordion */
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms ease-out; }
.faq-panel.open { grid-template-rows: 1fr; }
.faq-panel > div { overflow: hidden; }
.faq-chevron { transition: transform 300ms ease; }
.faq-chevron.open { transform: rotate(180deg); }

/* Testimonial slides */
.testimonial-slide { position: absolute; inset: 0; transition: opacity 700ms ease, transform 700ms ease; opacity: 0; transform: translateY(12px); pointer-events: none; }
.testimonial-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Mobile nav */
.mobile-nav { display: none; }
.mobile-nav.open { display: block; }

/* icons sized via lucide default; ensure inline-block */
[data-lucide] { display: inline-block; vertical-align: middle; }

/* Back-to-top floating button: hidden until user scrolls down */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.85);
  transition: opacity 350ms ease, transform 350ms cubic-bezier(0.34,1.56,0.64,1), visibility 350ms;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top i { transition: transform 250ms ease; }
.back-to-top:hover i { transform: translateY(-3px); }

/* Generic hover-pop utility for cards / buttons across the site */
.hover-pop { transition: transform 250ms ease, box-shadow 250ms ease; }
.hover-pop:hover { transform: translateY(-4px); }

/* Social icon buttons: subtle scale + glow on hover */
.social-btn { transition: transform 250ms ease, background-color 250ms ease, box-shadow 250ms ease; }
.social-btn:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 10px 22px -10px rgba(0,0,0,0.35); }

/* Nav links underline animation */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0%; height: 2px;
  background: var(--brand-gold-soft);
  transition: width 300ms ease;
}
.nav-link:hover::after { width: 100%; }

/* Mobile-safe spacing for floating action buttons above iOS home-bar */
@media (max-width: 640px) {
  .back-to-top, a[aria-label="Chat on WhatsApp"] {
    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  }
}

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