/*
 * single-al-ain.css
 * مطابق بصرياً لمشروع Lovable: Royal Oasis Articles
 * القيم مأخوذة حرفياً من styles.css + index.tsx
 * لا تغيير في الألوان / الخطوط / المسافات
 */

/* ═══════════════════════════════════════════
   CSS TOKENS — من styles.css في Lovable
═══════════════════════════════════════════ */
.ain-page {
  /* Colors — oklch كما هي في Lovable */
  --violet-ink:   oklch(0.13 0.05 305);
  --violet-deep:  oklch(0.18 0.07 305);
  --plum:         oklch(0.30 0.12 320);
  --gold:         oklch(0.83 0.14 85);
  --gold-soft:    oklch(0.90 0.09 88);
  --gold-deep:    oklch(0.68 0.16 70);
  --beige:        oklch(0.93 0.03 80);
  --background:   oklch(0.13 0.05 305);
  --foreground:   oklch(0.97 0.015 80);
  --radius:       1rem;

  /* Font families — مطابق من Lovable @theme inline */
  --font-display: "Cairo", "Tajawal", system-ui, sans-serif;
  --font-serif:   "Markazi Text", "Amiri", serif;
  --font-kufi:    "Reem Kufi", "Cairo", sans-serif;
}

/* ═══════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════ */
.ain-page *, .ain-page *::before, .ain-page *::after {
  box-sizing: border-box;
  border-color: oklch(0.50 0.08 310 / 0.30);
}

body.ain-page {
  /* !important يتغلب على main.css: body { font-family: 'Kufam','Poppins' !important } */
  font-family: "Cairo", "Tajawal", system-ui, sans-serif !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden !important;
  /* background-image مطابق من Lovable styles.css */
  background-image:
    radial-gradient(ellipse at 20% 0%, oklch(0.40 0.18 320 / 0.35), transparent 50%),
    radial-gradient(ellipse at 80% 100%, oklch(0.45 0.16 290 / 0.30), transparent 55%),
    radial-gradient(circle at 50% 50%, oklch(0.83 0.14 85 / 0.04), transparent 70%) !important;
  background-attachment: fixed !important;
  direction: rtl !important;
  text-align: right;
  width: 100% !important;
  max-width: 100% !important;
}

.ain-page ::selection {
  background: var(--gold);
  color: var(--violet-ink);
}

/* h1,h2,h3 — Lovable: font-serif = "Markazi Text", "Amiri"
   !important يتغلب على كل main.css */
.ain-page h1,
.ain-page h2,
.ain-page h3 {
  font-family: "Markazi Text", "Amiri", serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ═══════════════════════════════════════════
   UTILITIES — مطابقة @utility من Lovable
═══════════════════════════════════════════ */

/* text-gradient-gold */
.ain-gradient-gold {
  background: linear-gradient(135deg,
    oklch(0.96 0.07 90)  0%,
    oklch(0.83 0.14 85) 45%,
    oklch(0.68 0.16 70) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* glow-gold */
.ain-glow-gold {
  box-shadow:
    0 0 80px -20px oklch(0.83 0.14 85 / 0.45),
    0 30px 80px -30px oklch(0 0 0 / 0.6),
    inset 0 0 0 1px oklch(0.83 0.14 85 / 0.15);
}

/* glass-card */
.ain-glass {
  background: linear-gradient(135deg,
    oklch(0.28 0.08 310 / 0.65),
    oklch(0.18 0.08 320 / 0.45)
  );
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid oklch(0.83 0.14 85 / 0.18);
}

/* hairline-gold */
.ain-hairline {
  background: linear-gradient(90deg,
    transparent,
    oklch(0.83 0.14 85 / 0.7) 50%,
    transparent
  );
}

/* grain — noise texture */
.ain-grain {
  position: relative;
}
.ain-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
}

/* text-readable */
.ain-text-readable {
  text-shadow:
    0 1px 2px oklch(0 0 0 / 0.55),
    0 2px 18px oklch(0.13 0.05 305 / 0.65);
}

/* text-readable-strong */
.ain-text-readable-strong {
  text-shadow:
    0 2px 4px oklch(0 0 0 / 0.7),
    0 6px 30px oklch(0.13 0.05 305 / 0.8);
}

/* shimmer-line */
@keyframes shimmer-line {
  0%, 100% { transform: scaleX(0.3); opacity: 0.3; }
  50%       { transform: scaleX(1);   opacity: 1;   }
}
.ain-shimmer-line {
  animation: shimmer-line 3s ease-in-out infinite;
  transform-origin: center;
}

/* focus-visible */
.ain-page :where(a, button):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════
   PROGRESS BAR — scaleX from right (RTL)
═══════════════════════════════════════════ */
#ain-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 2px;
  transform-origin: right;  /* origin-right مثل Lovable */
  transform: scaleX(0);
  background: linear-gradient(to left,
    var(--gold-deep),
    var(--gold) 60%,
    var(--gold-soft)
  );
  box-shadow: 0 0 10px oklch(0.83 0.14 85 / 0.5);
  will-change: transform;
}

/* ═══════════════════════════════════════════
   WATERMARK LOGOS — LogoWatermarks()
   pointer-events:none, fixed, z-0
═══════════════════════════════════════════ */
.ain-watermarks {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ain-watermarks__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 75vw;
  max-width: 850px;
  transform: translate(-50%, -50%);
  opacity: 0.02;
  filter: blur(1px);
}
.ain-watermarks__grad1 {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top,
    oklch(0.30 0.14 310 / 0.25),
    transparent 60%
  );
}

/* ═══════════════════════════════════════════
   HERO — Hero()
═══════════════════════════════════════════ */
/* relative isolate flex w-full items-center overflow-hidden pt-28 sm:pt-32 min-h-[88svh] lg:min-h-[92svh] */
.ain-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  align-items: center;
  overflow: hidden;
  padding-top: 7rem; /* pt-28 */
  min-height: 88svh;
}
@media (min-width: 640px) {
  .ain-hero { padding-top: 8rem; /* sm:pt-32 */ }
}
@media (min-width: 1024px) {
  .ain-hero { min-height: 92svh; /* lg:min-h-[92svh] */ }
}

/* absolute inset-0 -z-10 */
.ain-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ain-hero__bg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* bg-violet-ink/75 */
.ain-hero__ov1 {
  position: absolute;
  inset: 0;
  background: oklch(0.13 0.05 305 / 0.75);
}
/* bg-gradient-to-b from-violet-ink/55 via-violet-ink/65 to-background */
.ain-hero__ov2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    oklch(0.13 0.05 305 / 0.55),
    oklch(0.13 0.05 305 / 0.65),
    oklch(0.13 0.05 305)
  );
}
/* inset-y-0 right-0 hidden w-px gradient lg:block */
.ain-hero__gold-line {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    oklch(0.83 0.14 85 / 0.30),
    transparent
  );
  display: none;
}
@media (min-width: 1024px) { .ain-hero__gold-line { display: block; } }

/* relative z-10 mx-auto w-full max-w-7xl px-6 sm:px-10 pb-16 sm:pb-24 */
.ain-hero__inner {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  width: 100%;
  max-width: 80rem; /* max-w-7xl */
  padding: 0 1.5rem 4rem; /* px-6 pb-16 */
}
@media (min-width: 640px) {
  .ain-hero__inner { padding: 0 2.5rem 6rem; } /* sm:px-10 sm:pb-24 */
}

/* max-w-3xl text-right */
.ain-hero__text {
  max-width: 48rem;
  text-align: right;
}

/* mb-5 text-xs uppercase tracking-[0.4em] text-gold/80 sm:text-sm */
.ain-hero__eyebrow {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: oklch(0.83 0.14 85 / 0.80);
}
@media (min-width: 640px) { .ain-hero__eyebrow { font-size: 0.875rem; } }

/* text-readable-strong font-serif font-bold leading-[1.1] text-white text-5xl sm:text-6xl lg:text-7xl */
.ain-hero__h1 {
  font-family: "Markazi Text", "Amiri", serif;
  font-weight: 700;
  line-height: 1.1;
  color: white;
  font-size: 3rem; /* text-5xl */
  margin: 0;
  text-shadow:
    0 2px 4px oklch(0 0 0 / 0.7),
    0 6px 30px oklch(0.13 0.05 305 / 0.8);
}
@media (min-width: 640px) { .ain-hero__h1 { font-size: 3.75rem; } } /* sm:text-6xl */
@media (min-width: 1024px) { .ain-hero__h1 { font-size: 4.5rem; } } /* lg:text-7xl */

/* mt-5 font-serif italic text-gradient-gold text-lg sm:text-2xl */
.ain-hero__sub {
  margin-top: 1.25rem;
  font-family: "Markazi Text", "Amiri", serif;
  font-style: italic;
  font-size: 1.125rem;
  background: linear-gradient(135deg, oklch(0.96 0.07 90) 0%, oklch(0.83 0.14 85) 45%, oklch(0.68 0.16 70) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 640px) { .ain-hero__sub { font-size: 1.5rem; } }

/* hairline-gold mt-6 h-px w-32 origin-right sm:w-44 */
.ain-hero__line {
  margin-top: 1.5rem;
  height: 1px;
  width: 8rem;
  transform-origin: right;
  background: linear-gradient(90deg, transparent, oklch(0.83 0.14 85 / 0.7) 50%, transparent);
}
@media (min-width: 640px) { .ain-hero__line { width: 11rem; } }

/* text-readable mt-6 max-w-xl text-sm leading-loose text-white/90 sm:text-base */
.ain-hero__desc {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.625; /* leading-loose */
  color: oklch(1 0 0 / 0.9);
  text-shadow:
    0 1px 2px oklch(0 0 0 / 0.55),
    0 2px 18px oklch(0.13 0.05 305 / 0.65);
}
@media (min-width: 640px) { .ain-hero__desc { font-size: 1rem; } }

/* ═══════════════════════════════════════════
   STATS BAND — StatsBand()
   relative z-10 mx-auto w-full max-w-7xl px-6 sm:px-10 -mt-12 sm:-mt-20
═══════════════════════════════════════════ */
.ain-stats {
  position: relative;
  z-index: 10;
  margin: -3rem auto 0;
  width: 100%;
  max-width: 80rem;
  padding: 0 1.5rem;
}
@media (min-width: 640px) {
  .ain-stats { margin-top: -5rem; padding: 0 2.5rem; }
}

/* grid gap-3 sm:gap-4 grid-cols-2 lg:grid-cols-4 */
.ain-stats__grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .ain-stats__grid { gap: 1rem; } }
@media (min-width: 1024px) { .ain-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* group relative overflow-hidden rounded-2xl border border-gold/20 bg-gradient-to-br from-violet-deep/85 to-violet-ink/90 px-4 py-5 text-center backdrop-blur-md transition hover:border-gold/50 sm:px-5 sm:py-6 */
.ain-stat {
  position: relative;
  overflow: hidden;
  border-radius: 1rem; /* rounded-2xl */
  border: 1px solid oklch(0.83 0.14 85 / 0.20);
  background: linear-gradient(to bottom right,
    oklch(0.18 0.07 305 / 0.85),
    oklch(0.13 0.05 305 / 0.90)
  );
  padding: 1.25rem 1rem;
  text-align: center;
  backdrop-filter: blur(12px);
  transition: border-color 0.2s;
}
@media (min-width: 640px) { .ain-stat { padding: 1.5rem 1.25rem; } }
.ain-stat:hover { border-color: oklch(0.83 0.14 85 / 0.50); }

/* pointer-events-none absolute -top-8 left-1/2 h-20 w-20 -translate-x-1/2 rounded-full bg-gold/10 blur-2xl group-hover:bg-gold/25 */
.ain-stat__glow {
  pointer-events: none;
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  background: oklch(0.83 0.14 85 / 0.10);
  filter: blur(2rem);
  transition: background 0.3s;
}
.ain-stat:hover .ain-stat__glow { background: oklch(0.83 0.14 85 / 0.25); }

/* mx-auto mb-2 grid h-9 w-9 place-items-center rounded-full border border-gold/30 bg-violet-ink/60 text-gold */
.ain-stat__icon {
  margin: 0 auto 0.5rem;
  display: grid;
  height: 2.25rem;
  width: 2.25rem;
  place-items: center;
  border-radius: 50%;
  border: 1px solid oklch(0.83 0.14 85 / 0.30);
  background: oklch(0.13 0.05 305 / 0.60);
  color: var(--gold);
}
.ain-stat__icon svg { width: 1rem; height: 1rem; }

/* font-serif text-2xl font-bold text-gradient-gold sm:text-3xl */
.ain-stat__val {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, oklch(0.96 0.07 90) 0%, oklch(0.83 0.14 85) 45%, oklch(0.68 0.16 70) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 640px) { .ain-stat__val { font-size: 1.875rem; } }

/* mt-1 text-xs font-bold text-white sm:text-sm */
.ain-stat__label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}
@media (min-width: 640px) { .ain-stat__label { font-size: 0.875rem; } }

/* mt-1 text-[11px] leading-relaxed text-white/75 sm:text-xs */
.ain-stat__sub {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: oklch(1 0 0 / 0.75);
}
@media (min-width: 640px) { .ain-stat__sub { font-size: 0.75rem; } }

/* ═══════════════════════════════════════════
   SECTION BASE
═══════════════════════════════════════════ */
/* relative z-10 mx-auto w-full max-w-7xl px-6 py-6 sm:px-10 sm:py-12 md:py-24 */
.ain-section {
  position: relative;
  z-index: 10;
}
.ain-container {
  margin: 0 auto;
  width: 100%;
  max-width: 80rem;
  padding: 1.5rem 1.5rem;
}
@media (min-width: 640px) { .ain-container { padding: 3rem 2.5rem; } }
@media (min-width: 768px) { .ain-container { padding: 6rem 2.5rem; } }

/* ═══════════════════════════════════════════
   SECTION HEADER — SectionHeader()
═══════════════════════════════════════════ */
.ain-sh { position: relative; z-index: 10; text-align: right; }

/* mb-6 inline-flex items-center gap-2.5 rounded-full border border-gold/25 bg-violet-ink/40 px-3.5 py-1 text-[11px] font-bold uppercase tracking-[0.35em] text-gold backdrop-blur */
.ain-sh__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  border: 1px solid oklch(0.83 0.14 85 / 0.25);
  background: oklch(0.13 0.05 305 / 0.40);
  padding: 0.25rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--gold);
  backdrop-filter: blur(8px);
  margin-bottom: 1.5rem;
}
/* h-1.5 w-1.5 rounded-full bg-gold shadow-[0_0_8px_oklch(0.83_0.14_85)] */
.ain-sh__dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px oklch(0.83 0.14 85);
  flex-shrink: 0;
}

/* font-serif text-4xl font-bold leading-[1.4] text-white sm:text-5xl lg:text-6xl */
.ain-sh__title {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: white;
  margin: 0;
}
@media (min-width: 640px) { .ain-sh__title { font-size: 3rem; } }
@media (min-width: 1024px) { .ain-sh__title { font-size: 3.75rem; } }

/* hairline-gold mt-6 h-px w-32 origin-right */
.ain-sh__line {
  margin-top: 1.5rem;
  height: 1px;
  width: 8rem;
  transform-origin: right;
  background: linear-gradient(90deg, transparent, oklch(0.83 0.14 85 / 0.7) 50%, transparent);
}

/* ═══════════════════════════════════════════
   ABOUT CITY — AboutCity()
   relative z-10 mx-auto w-full max-w-7xl px-6 py-6 sm:px-10 sm:py-12 md:py-24
═══════════════════════════════════════════ */
/* mt-14 grid gap-6 lg:grid-cols-2 */
.ain-about__grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .ain-about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* group relative overflow-hidden rounded-[2rem] glass-card grain p-8 sm:p-10 */
.ain-about__card {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background: linear-gradient(135deg,
    oklch(0.28 0.08 310 / 0.65),
    oklch(0.18 0.08 320 / 0.45)
  );
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid oklch(0.83 0.14 85 / 0.18);
  padding: 2rem;
}
@media (min-width: 640px) { .ain-about__card { padding: 2.5rem; } }
.ain-about__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
}

/* pointer-events-none absolute -left-10 -top-10 h-48 w-48 rounded-full bg-gold/10 blur-3xl transition group-hover:bg-gold/20 */
.ain-about__card-glow {
  pointer-events: none;
  position: absolute;
  left: -2.5rem;
  top: -2.5rem;
  height: 12rem;
  width: 12rem;
  border-radius: 50%;
  background: oklch(0.83 0.14 85 / 0.10);
  filter: blur(3rem);
  transition: background 0.3s;
}
.ain-about__card:hover .ain-about__card-glow { background: oklch(0.83 0.14 85 / 0.20); }

/* relative z-10 flex flex-col items-center text-center */
.ain-about__card-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* grid h-16 w-16 shrink-0 place-items-center rounded-2xl border border-gold/40 bg-violet-deep/60 text-gold */
.ain-about__icon {
  display: grid;
  height: 4rem;
  width: 4rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 1rem;
  border: 1px solid oklch(0.83 0.14 85 / 0.40);
  background: oklch(0.18 0.07 305 / 0.60);
  color: var(--gold);
}
.ain-about__icon svg { width: 1.75rem; height: 1.75rem; }

/* mt-5 font-serif text-2xl font-bold text-white sm:text-3xl */
.ain-about__card h3 {
  margin-top: 1.25rem;
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}
@media (min-width: 640px) { .ain-about__card h3 { font-size: 1.875rem; } }

/* hairline-gold mt-3 h-px w-16 */
.ain-about__hr {
  margin-top: 0.75rem;
  height: 1px;
  width: 4rem;
  background: linear-gradient(90deg, transparent, oklch(0.83 0.14 85 / 0.7) 50%, transparent);
}

/* mt-5 text-center text-base leading-[2] text-white/90 */
.ain-about__card p {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 1rem;
  line-height: 2;
  color: oklch(1 0 0 / 0.90);
}

/* ═══════════════════════════════════════════
   OASES — Oases()
   relative w-full overflow-hidden py-6 sm:py-12 md:py-24
═══════════════════════════════════════════ */
.ain-oases {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* absolute inset-0 -z-[1] bg-gradient-to-b from-transparent via-violet-deep/40 to-transparent */
.ain-oases__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    transparent,
    oklch(0.18 0.07 305 / 0.40),
    transparent
  );
}

/* mx-auto grid w-full max-w-7xl gap-12 px-6 sm:px-10 lg:grid-cols-[1.1fr_1fr] lg:items-center lg:gap-20 */
.ain-oases__grid {
  margin: 0 auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  gap: 3rem;
  padding: 1.5rem 1.5rem;
}
@media (min-width: 640px) { .ain-oases__grid { padding: 3rem 2.5rem; } }
@media (min-width: 768px) { .ain-oases__grid { padding: 6rem 2.5rem; } }
@media (min-width: 1024px) {
  .ain-oases__grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 5rem;
  }
}

/* mt-8 text-right text-base leading-[2.1] text-white/95 sm:text-lg */
.ain-oases__text {
  margin-top: 2rem;
  text-align: right;
  font-size: 1rem;
  line-height: 2.1;
  color: oklch(1 0 0 / 0.95);
}
@media (min-width: 640px) { .ain-oases__text { font-size: 1.125rem; } }
.ain-oases__text + .ain-oases__text { margin-top: 1.25rem; }

/* grid gap-4 sm:grid-cols-2 */
.ain-oases__stats {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .ain-oases__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* rounded-2xl border border-gold/20 bg-gradient-to-br from-violet-deep/70 to-violet-ink/80 p-6 text-center backdrop-blur-sm transition hover:border-gold/50 */
.ain-oasis-card {
  border-radius: 1rem;
  border: 1px solid oklch(0.83 0.14 85 / 0.20);
  background: linear-gradient(to bottom right,
    oklch(0.18 0.07 305 / 0.70),
    oklch(0.13 0.05 305 / 0.80)
  );
  padding: 1.5rem;
  text-align: center;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s;
}
.ain-oasis-card:hover { border-color: oklch(0.83 0.14 85 / 0.50); }

/* mb-2 font-serif text-4xl font-bold text-gradient-gold */
.ain-oasis-card__val {
  margin-bottom: 0.5rem;
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 2.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, oklch(0.96 0.07 90) 0%, oklch(0.83 0.14 85) 45%, oklch(0.68 0.16 70) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* font-serif text-lg font-bold text-white */
.ain-oasis-card__title {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
}

/* mt-2 text-sm leading-relaxed text-white/85 */
.ain-oasis-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: oklch(1 0 0 / 0.85);
}

/* ═══════════════════════════════════════════
   FALAJ DIAGRAM — FalajDiagram() + FalajPath()
═══════════════════════════════════════════ */
.ain-falaj {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* mx-auto grid w-full max-w-7xl gap-14 px-6 sm:px-10 lg:grid-cols-[1fr_1.2fr] lg:items-center */
.ain-falaj__grid {
  margin: 0 auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  gap: 3.5rem;
  padding: 1.5rem 1.5rem;
}
@media (min-width: 640px) { .ain-falaj__grid { padding: 3rem 2.5rem; } }
@media (min-width: 768px) { .ain-falaj__grid { padding: 6rem 2.5rem; } }
@media (min-width: 1024px) {
  .ain-falaj__grid {
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
  }
}

/* relative overflow-hidden rounded-[2rem] glow-gold */
.ain-falaj__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  box-shadow:
    0 0 80px -20px oklch(0.83 0.14 85 / 0.45),
    0 30px 80px -30px oklch(0 0 0 / 0.6),
    inset 0 0 0 1px oklch(0.83 0.14 85 / 0.15);
}
/* aspect-[4/5] */
.ain-falaj__img-wrap > div {
  aspect-ratio: 4/5;
}
.ain-falaj__img-wrap img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* absolute inset-0 bg-gradient-to-t from-violet-ink/60 via-transparent to-transparent */
.ain-falaj__img-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.13 0.05 305 / 0.60), transparent);
}
/* absolute bottom-5 right-5 inline-flex items-center gap-2 rounded-full bg-gold/95 px-4 py-1.5 text-xs font-bold text-violet-ink shadow-lg */
.ain-falaj__badge {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: oklch(0.83 0.14 85 / 0.95);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--violet-ink);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.ain-falaj__badge svg { width: 0.875rem; height: 0.875rem; }

/* mt-8 text-justify text-base leading-[2.1] text-white/95 sm:text-lg */
.ain-falaj__text {
  margin-top: 2rem;
  text-align: justify;
  font-size: 1rem;
  line-height: 2.1;
  color: oklch(1 0 0 / 0.95);
}
@media (min-width: 640px) { .ain-falaj__text { font-size: 1.125rem; } }

/* FalajPath: mt-12 */
.ain-falaj-path { margin-top: 3rem; }
.ain-falaj-path svg { width: 100%; }
/* The animated dashed path — strokeDashoffset animates via JS */
.ain-falaj-anim {
  stroke-dasharray: 6 8;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 2.4s ease-in-out;
}
.ain-falaj-anim.animated { stroke-dashoffset: 0; }

/* mt-8 grid grid-cols-3 gap-4 sm:gap-8 */
.ain-falaj-stops {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) { .ain-falaj-stops { gap: 2rem; } }

/* flex flex-col items-center text-center */
.ain-falaj-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* grid h-14 w-14 place-items-center rounded-full bg-gradient-to-br from-gold to-gold-deep text-violet-ink shadow-[0_10px_30px_-5px_oklch(0.83_0.14_85/0.6)] sm:h-16 sm:w-16 */
.ain-falaj-stop__icon {
  display: grid;
  height: 3.5rem;
  width: 3.5rem;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(to bottom right, var(--gold), var(--gold-deep));
  color: var(--violet-ink);
  box-shadow: 0 10px 30px -5px oklch(0.83 0.14 85 / 0.60);
}
@media (min-width: 640px) { .ain-falaj-stop__icon { height: 4rem; width: 4rem; } }
.ain-falaj-stop__icon svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 640px) { .ain-falaj-stop__icon svg { width: 1.75rem; height: 1.75rem; } }

/* mt-4 font-serif text-sm font-bold text-white sm:text-base */
.ain-falaj-stop__title {
  margin-top: 1rem;
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: white;
}
@media (min-width: 640px) { .ain-falaj-stop__title { font-size: 1rem; } }

/* mt-1.5 text-[11px] leading-relaxed text-white/80 sm:text-xs */
.ain-falaj-stop__desc {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.625;
  color: oklch(1 0 0 / 0.80);
}
@media (min-width: 640px) { .ain-falaj-stop__desc { font-size: 0.75rem; } }

/* mt-10 text-center text-sm leading-relaxed text-white/85 sm:text-base */
.ain-falaj-note {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.625;
  color: oklch(1 0 0 / 0.85);
}
@media (min-width: 640px) { .ain-falaj-note { font-size: 1rem; } }

/* ═══════════════════════════════════════════
   FORTS — Forts()
   relative w-full overflow-hidden py-6 sm:py-12 md:py-24
═══════════════════════════════════════════ */
.ain-forts {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* absolute inset-0 -z-[1] bg-gradient-to-b from-transparent via-plum/10 to-transparent */
.ain-forts__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, oklch(0.30 0.12 320 / 0.10), transparent);
}

/* mx-auto w-full max-w-7xl px-6 sm:px-10 */
.ain-forts__inner {
  margin: 0 auto;
  width: 100%;
  max-width: 80rem;
  padding: 1.5rem 1.5rem;
}
@media (min-width: 640px) { .ain-forts__inner { padding: 3rem 2.5rem; } }
@media (min-width: 768px) { .ain-forts__inner { padding: 6rem 2.5rem; } }

/* max-w-3xl */
.ain-forts__header { max-width: 48rem; }

/* mt-8 text-justify text-base leading-[2.1] text-white/95 sm:text-lg */
.ain-forts__intro {
  margin-top: 2rem;
  text-align: justify;
  font-size: 1rem;
  line-height: 2.1;
  color: oklch(1 0 0 / 0.95);
}
@media (min-width: 640px) { .ain-forts__intro { font-size: 1.125rem; } }

/* mt-14 grid gap-6 md:grid-cols-3 */
.ain-forts__grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .ain-forts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* group relative overflow-hidden rounded-[2rem] glass-card */
.ain-fort {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background: linear-gradient(135deg, oklch(0.28 0.08 310 / 0.65), oklch(0.18 0.08 320 / 0.45));
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid oklch(0.83 0.14 85 / 0.18);
  transition: transform 0.3s;
}
.ain-fort:hover { transform: translateY(-10px); }

/* relative aspect-[4/5] overflow-hidden */
.ain-fort__img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
/* h-full w-full object-cover transition-transform duration-[1200ms] group-hover:scale-110 */
.ain-fort__img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 1200ms;
}
.ain-fort:hover .ain-fort__img img { transform: scale(1.10); }

/* absolute inset-0 bg-gradient-to-t from-violet-ink via-violet-ink/40 to-transparent */
.ain-fort__ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    oklch(0.13 0.05 305),
    oklch(0.13 0.05 305 / 0.40),
    transparent
  );
}

/* absolute right-4 top-4 grid h-12 w-12 place-items-center rounded-xl border border-gold/40 bg-violet-ink/70 text-gold backdrop-blur-md */
.ain-fort__icon {
  position: absolute;
  right: 1rem;
  top: 1rem;
  display: grid;
  height: 3rem;
  width: 3rem;
  place-items: center;
  border-radius: 0.75rem;
  border: 1px solid oklch(0.83 0.14 85 / 0.40);
  background: oklch(0.13 0.05 305 / 0.70);
  color: var(--gold);
  backdrop-filter: blur(12px);
}
.ain-fort__icon svg { width: 1.25rem; height: 1.25rem; }

/* absolute inset-x-0 bottom-0 p-6 */
.ain-fort__info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem;
}

/* font-serif text-2xl font-bold leading-tight text-white sm:text-3xl */
.ain-fort__info h3 {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: white;
}
@media (min-width: 640px) { .ain-fort__info h3 { font-size: 1.875rem; } }

/* hairline-gold mt-3 h-px w-12 transition-all duration-500 group-hover:w-24 */
.ain-fort__line {
  margin-top: 0.75rem;
  height: 1px;
  width: 3rem;
  background: linear-gradient(90deg, transparent, oklch(0.83 0.14 85 / 0.7) 50%, transparent);
  transition: width 500ms;
}
.ain-fort:hover .ain-fort__line { width: 6rem; }

/* mt-4 text-sm leading-[1.9] text-white/95 */
.ain-fort__info p {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: oklch(1 0 0 / 0.95);
}

/* ═══════════════════════════════════════════
   HERITAGE — Heritage()
   relative w-full overflow-hidden py-6 sm:py-12 md:py-24
═══════════════════════════════════════════ */
.ain-heritage {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* mx-auto grid w-full max-w-7xl gap-14 px-6 sm:px-10 lg:grid-cols-[1.1fr_1fr] lg:items-start lg:gap-20 */
.ain-heritage__grid {
  margin: 0 auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  gap: 3.5rem;
  padding: 1.5rem 1.5rem;
}
@media (min-width: 640px) { .ain-heritage__grid { padding: 3rem 2.5rem; } }
@media (min-width: 768px) { .ain-heritage__grid { padding: 6rem 2.5rem; } }
@media (min-width: 1024px) {
  .ain-heritage__grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
    gap: 5rem;
  }
}

/* mt-8 text-justify text-base leading-[2.1] text-white/95 sm:text-lg */
.ain-heritage__text {
  margin-top: 2rem;
  text-align: justify;
  font-size: 1rem;
  line-height: 2.1;
  color: oklch(1 0 0 / 0.95);
}
@media (min-width: 640px) { .ain-heritage__text { font-size: 1.125rem; } }

/* font-bold text-gold — span inside heritage text */
.ain-heritage__text .ain-gold {
  font-weight: 700;
  color: var(--gold);
}

/* grid gap-4 */
.ain-heritage__list { display: grid; gap: 1rem; }

/* group relative overflow-hidden rounded-2xl border border-gold/20 bg-gradient-to-l from-violet-deep/80 to-violet-ink/70 p-6 backdrop-blur-sm transition hover:border-gold/50 */
.ain-heritage-item {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid oklch(0.83 0.14 85 / 0.20);
  background: linear-gradient(to left,
    oklch(0.18 0.07 305 / 0.80),
    oklch(0.13 0.05 305 / 0.70)
  );
  padding: 1.5rem;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s;
}
.ain-heritage-item:hover { border-color: oklch(0.83 0.14 85 / 0.50); }

/* flex items-start gap-4 */
.ain-heritage-item__inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-gold to-gold-deep text-violet-ink */
.ain-heritage-item__num {
  display: grid;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 0.75rem;
  background: linear-gradient(to bottom right, var(--gold), var(--gold-deep));
  color: var(--violet-ink);
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.125rem;
  font-weight: 700;
}

/* font-serif text-xl font-bold text-white */
.ain-heritage-item h3 {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin: 0;
}

/* mt-2 text-sm leading-[1.9] text-white/90 */
.ain-heritage-item p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: oklch(1 0 0 / 0.90);
}

/* ═══════════════════════════════════════════
   UNESCO — Unesco()
   relative w-full py-6 sm:py-12 md:py-24
═══════════════════════════════════════════ */
.ain-unesco {
  position: relative;
  width: 100%;
}
/* w-full px-6 sm:px-10 */
.ain-unesco__wrap {
  width: 100%;
  padding: 1.5rem 1.5rem;
}
@media (min-width: 640px) { .ain-unesco__wrap { padding: 3rem 2.5rem; } }
@media (min-width: 768px) { .ain-unesco__wrap { padding: 6rem 2.5rem; } }

/* relative overflow-hidden rounded-[2.5rem] border border-gold/25 bg-gradient-to-br from-plum/50 via-violet-deep/70 to-violet-ink/85 p-8 grain sm:p-16 */
.ain-unesco__card {
  position: relative;
  overflow: hidden;
  border-radius: 2.5rem;
  border: 1px solid oklch(0.83 0.14 85 / 0.25);
  background: linear-gradient(to bottom right,
    oklch(0.30 0.12 320 / 0.50),
    oklch(0.18 0.07 305 / 0.70),
    oklch(0.13 0.05 305 / 0.85)
  );
  padding: 2rem;
}
@media (min-width: 640px) { .ain-unesco__card { padding: 4rem; } }
/* grain */
.ain-unesco__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
}

/* pointer-events-none absolute -right-10 -top-16 font-serif text-[16rem] leading-none text-gold/10 sm:text-[22rem] */
.ain-unesco__quote-mark {
  pointer-events: none;
  position: absolute;
  right: -2.5rem;
  top: -4rem;
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 16rem;
  line-height: 1;
  color: oklch(0.83 0.14 85 / 0.10);
  user-select: none;
}
@media (min-width: 640px) { .ain-unesco__quote-mark { font-size: 22rem; } }

/* relative z-10 */
.ain-unesco__content { position: relative; z-index: 10; }

/* mb-8 inline-flex items-center gap-3 text-[11px] font-bold uppercase tracking-[0.35em] text-gold sm:mb-10 */
.ain-unesco__label {
  margin-bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--gold);
}
@media (min-width: 640px) { .ain-unesco__label { margin-bottom: 2.5rem; } }
.ain-unesco__label svg { width: 1rem; height: 1rem; }

/* font-serif text-3xl font-bold leading-[1.4] text-white sm:text-5xl */
.ain-unesco__card h2 {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: white;
}
@media (min-width: 640px) { .ain-unesco__card h2 { font-size: 3rem; } }

/* hairline-gold mt-6 h-px w-24 */
.ain-unesco__line {
  margin-top: 1.5rem;
  height: 1px;
  width: 6rem;
  background: linear-gradient(90deg, transparent, oklch(0.83 0.14 85 / 0.7) 50%, transparent);
}

/* mt-7 text-justify text-base leading-[2.1] text-white/95 sm:text-lg */
.ain-unesco__text {
  margin-top: 1.75rem;
  text-align: justify;
  font-size: 1rem;
  line-height: 2.1;
  color: oklch(1 0 0 / 0.95);
}
@media (min-width: 640px) { .ain-unesco__text { font-size: 1.125rem; } }

/* relative mt-8 border-r-2 border-gold/60 pr-10 pl-4 */
.ain-blockquote {
  position: relative;
  margin-top: 2rem;
  border-right: 2px solid oklch(0.83 0.14 85 / 0.60);
  padding-right: 2.5rem;
  padding-left: 1rem;
}

/* absolute right-2 top-1 h-5 w-5 text-gold */
.ain-blockquote__icon {
  position: absolute;
  right: 0.5rem;
  top: 0.25rem;
  color: var(--gold);
}
.ain-blockquote__icon svg { width: 1.25rem; height: 1.25rem; }

/* font-serif text-lg italic leading-[1.8] text-white/95 sm:text-xl */
.ain-blockquote p {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.8;
  color: oklch(1 0 0 / 0.95);
}
@media (min-width: 640px) { .ain-blockquote p { font-size: 1.25rem; } }

/* ═══════════════════════════════════════════
   CLOSING HERO — ClosingHero()
   relative w-full overflow-hidden py-6 sm:py-12 md:py-24
═══════════════════════════════════════════ */
.ain-closing {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ain-closing__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ain-closing__bg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* absolute inset-0 bg-violet-ink/85 */
.ain-closing__ov {
  position: absolute;
  inset: 0;
  background: oklch(0.13 0.05 305 / 0.85);
}

/* mx-auto max-w-4xl px-6 text-center sm:px-10 */
.ain-closing__inner {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  max-width: 56rem;
  padding: 1.5rem 1.5rem;
  text-align: center;
}
@media (min-width: 640px) { .ain-closing__inner { padding: 3rem 2.5rem; } }
@media (min-width: 768px) { .ain-closing__inner { padding: 6rem 2.5rem; } }

/* text-readable-strong font-serif text-4xl font-bold leading-[1.2] text-white sm:text-6xl */
.ain-closing__h2 {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: white;
  text-shadow: 0 2px 4px oklch(0 0 0 / 0.7), 0 6px 30px oklch(0.13 0.05 305 / 0.8);
}
@media (min-width: 640px) { .ain-closing__h2 { font-size: 3.75rem; } }

/* text-readable mx-auto mt-6 max-w-2xl text-base leading-loose text-white/95 sm:text-lg */
.ain-closing__desc {
  margin: 1.5rem auto 0;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.625;
  color: oklch(1 0 0 / 0.95);
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.55), 0 2px 18px oklch(0.13 0.05 305 / 0.65);
}
@media (min-width: 640px) { .ain-closing__desc { font-size: 1.125rem; } }

/* mt-10 flex flex-wrap items-center justify-center gap-3 */
.ain-closing__btns {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* inline-flex items-center gap-2 rounded-full bg-gradient-to-l from-gold-deep to-gold px-7 py-3.5 text-sm font-bold text-violet-ink shadow-[0_20px_60px_-15px_oklch(0.83_0.14_85/0.6)] */
.ain-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(to left, var(--gold-deep), var(--gold));
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--violet-ink);
  text-decoration: none;
  box-shadow: 0 20px 60px -15px oklch(0.83 0.14 85 / 0.60);
  transition: box-shadow 0.2s;
}
.ain-btn-primary:hover { box-shadow: 0 25px 80px -15px oklch(0.83 0.14 85 / 0.90); }
.ain-btn-primary svg { width: 1rem; height: 1rem; }

/* inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/5 px-6 py-3.5 text-sm font-medium text-white */
.ain-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid oklch(1 0 0 / 0.30);
  background: oklch(1 0 0 / 0.05);
  padding: 0.875rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  text-decoration: none;
  transition: background 0.2s;
}
.ain-btn-secondary:hover { background: oklch(1 0 0 / 0.10); }
.ain-btn-secondary svg { width: 1rem; height: 1rem; }

/* ═══════════════════════════════════════════
   RELATED — Related()
   relative z-10 mx-auto w-full max-w-7xl px-6 py-6 sm:py-12 md:py-20 sm:px-10
═══════════════════════════════════════════ */
.ain-related {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  width: 100%;
  max-width: 80rem;
  padding: 1.5rem 1.5rem;
}
@media (min-width: 640px) { .ain-related { padding: 3rem 2.5rem; } }
@media (min-width: 768px) { .ain-related { padding: 5rem 2.5rem; } }

/* mb-12 grid grid-cols-[minmax(0,1fr)_auto] items-end gap-4 sm:flex sm:flex-wrap sm:justify-between */
.ain-related__header {
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: flex-end;
  gap: 1rem;
}
@media (min-width: 640px) {
  .ain-related__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/* text-xs font-bold text-gold hover:text-gold-soft sm:text-sm */
.ain-related__all {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
@media (min-width: 640px) { .ain-related__all { font-size: 0.875rem; } }
.ain-related__all:hover { color: var(--gold-soft); }

/* grid gap-6 md:grid-cols-3 */
.ain-related__grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .ain-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* group relative block aspect-[4/5] overflow-hidden rounded-3xl glass-card */
.ain-related-card {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, oklch(0.28 0.08 310 / 0.65), oklch(0.18 0.08 320 / 0.45));
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid oklch(0.83 0.14 85 / 0.18);
  text-decoration: none;
  transition: transform 0.3s;
}
.ain-related-card:hover { transform: translateY(-8px); }

/* absolute inset-0 h-full w-full object-cover opacity-55 transition-all duration-1000 group-hover:scale-110 group-hover:opacity-80 */
.ain-related-card img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: transform 1000ms, opacity 500ms;
}
.ain-related-card:hover img { transform: scale(1.10); opacity: 0.80; }

/* absolute inset-0 bg-gradient-to-t from-violet-ink via-violet-ink/70 to-violet-ink/30 */
.ain-related-card__ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    oklch(0.13 0.05 305),
    oklch(0.13 0.05 305 / 0.70),
    oklch(0.13 0.05 305 / 0.30)
  );
}

/* absolute inset-x-0 bottom-0 p-6 */
.ain-related-card__info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem;
}

/* text-readable font-serif text-2xl font-bold leading-tight text-white sm:text-3xl */
.ain-related-card h3 {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: white;
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.55), 0 2px 18px oklch(0.13 0.05 305 / 0.65);
}
@media (min-width: 640px) { .ain-related-card h3 { font-size: 1.875rem; } }

/* hairline-gold mt-4 h-px w-12 transition-all duration-500 group-hover:w-24 */
.ain-related-card__line {
  margin-top: 1rem;
  height: 1px;
  width: 3rem;
  background: linear-gradient(90deg, transparent, oklch(0.83 0.14 85 / 0.7) 50%, transparent);
  transition: width 500ms;
}
.ain-related-card:hover .ain-related-card__line { width: 6rem; }

/* mt-3 inline-flex items-center gap-2 text-xs font-bold text-gold */
.ain-related-card__cta {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
}
.ain-related-card__cta svg { width: 1rem; height: 1rem; }

/* ═══════════════════════════════════════════
   ARTICLES — Articles() with CircularArticles
   relative z-10 mx-auto w-full max-w-7xl px-4 py-6 sm:px-10 sm:py-12 md:py-20
═══════════════════════════════════════════ */
.ain-articles {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  width: 100%;
  max-width: 80rem;
  padding: 1.5rem 1rem;
}
@media (min-width: 640px) { .ain-articles { padding: 3rem 2.5rem; } }
@media (min-width: 768px) { .ain-articles { padding: 5rem 2.5rem; } }

/* mb-10 text-center sm:mb-14 */
.ain-articles__header {
  margin-bottom: 2.5rem;
  text-align: center;
}
.ain-articles__header .ain-sh { text-align: center; }
.ain-articles__header .ain-sh__line { margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .ain-articles__header { margin-bottom: 3.5rem; } }

/* relative overflow-hidden rounded-[2.5rem] sm:rounded-[3rem] border border-gold/25 bg-gradient-to-br from-violet-deep/30 via-plum/20 to-violet-ink/40 p-3 sm:p-8 md:p-14 shadow-[...] backdrop-blur-xl */
.ain-articles__box {
  position: relative;
  overflow: hidden;
  border-radius: 2.5rem;
  border: 1px solid oklch(0.83 0.14 85 / 0.25);
  background: linear-gradient(to bottom right,
    oklch(0.18 0.07 305 / 0.30),
    oklch(0.30 0.12 320 / 0.20),
    oklch(0.13 0.05 305 / 0.40)
  );
  padding: 0.75rem;
  box-shadow: 0 30px 80px -30px oklch(0.18 0.05 305 / 0.60);
  backdrop-filter: blur(24px);
}
@media (min-width: 640px) {
  .ain-articles__box { border-radius: 3rem; padding: 2rem; }
}
@media (min-width: 768px) { .ain-articles__box { padding: 3.5rem; } }

/* pointer-events-none absolute -top-24 -right-24 h-72 w-72 rounded-full bg-gold/10 blur-[100px] */
.ain-articles__glow1 {
  pointer-events: none;
  position: absolute;
  top: -6rem; right: -6rem;
  height: 18rem; width: 18rem;
  border-radius: 50%;
  background: oklch(0.83 0.14 85 / 0.10);
  filter: blur(100px);
}
.ain-articles__glow2 {
  pointer-events: none;
  position: absolute;
  bottom: -6rem; left: -6rem;
  height: 18rem; width: 18rem;
  border-radius: 50%;
  background: oklch(0.30 0.12 320 / 0.20);
  filter: blur(100px);
}

/* ═══════════════════════════════════════════
   CIRCULAR ARTICLES WIDGET (vanilla JS version)
═══════════════════════════════════════════ */
.ain-ca { width: 100%; margin: 0 auto; direction: ltr; }

/* grid gap-12 md:gap-16 items-center md:grid-cols-2 */
.ain-ca__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) {
  .ain-ca__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
}

/* relative w-full aspect-square sm:aspect-auto sm:h-[320px] md:h-[360px] */
.ain-ca__images {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  perspective: 1000px;
}
@media (min-width: 640px) { .ain-ca__images { aspect-ratio: unset; height: 320px; } }
@media (min-width: 768px) { .ain-ca__images { height: 360px; } }

/* absolute left-1/2 top-1/2 block h-[75%] w-[75%] sm:h-[280px] sm:w-[280px] md:h-[320px] md:w-[320px] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-3xl shadow-2xl */
.ain-ca__img-item {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  height: 75%;
  width: 75%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  text-decoration: none;
  transition: all 0.8s cubic-bezier(.4,2,.3,1);
}
@media (min-width: 640px) {
  .ain-ca__img-item { height: 280px; width: 280px; }
}
@media (min-width: 768px) {
  .ain-ca__img-item { height: 320px; width: 320px; }
}
.ain-ca__img-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 700ms;
}
.ain-ca__img-item:hover img { transform: scale(1.05); }

/* Content side */
.ain-ca__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  direction: rtl;
}

.ain-ca__text { text-align: center; }
/* font-bold tracking-wide text-[#c9a84c] text-[0.9rem] */
.ain-ca__category {
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--gold);
  font-size: 0.9rem;
}

/* font-serif font-bold mt-2 leading-snug text-[1.6rem] */
.ain-ca__title {
  font-family: "Markazi Text", "Amiri", serif;
  font-weight: 700;
  margin-top: 0.5rem;
  line-height: 1.375;
  font-size: 1.6rem;
  color: white;
  text-decoration: none;
  display: block;
}

/* mt-5 leading-loose text-[1.05rem] text-white/85 */
.ain-ca__excerpt {
  margin-top: 1.25rem;
  line-height: 1.625;
  font-size: 1.05rem;
  color: oklch(1 0 0 / 0.85);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* mt-6 inline-flex items-center gap-2 rounded-full border border-gold/40 bg-gold/10 px-6 py-2.5 text-sm font-bold text-gold hover:bg-gold hover:text-violet-ink */
.ain-ca__read-btn {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid oklch(0.83 0.14 85 / 0.40);
  background: oklch(0.83 0.14 85 / 0.10);
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.ain-ca__read-btn:hover {
  background: var(--gold);
  color: var(--violet-ink);
}
.ain-ca__read-btn svg { width: 1rem; height: 1rem; }

/* Navigation arrows: mt-10 flex items-center justify-center gap-4 */
.ain-ca__arrows {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
/* flex h-11 w-11 items-center justify-center rounded-full transition-all duration-300 */
.ain-ca__arrow {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #f5f0e0;
  transition: background 0.3s, color 0.3s;
}
.ain-ca__arrow:hover { background: var(--gold); color: #1a1033; }
.ain-ca__arrow svg { width: 1.25rem; height: 1.25rem; }

/* Text fade animation */
@keyframes ain-fade-up {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ain-fade-down {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-1.25rem); }
}
.ain-ca__text.animating { animation: ain-fade-up 0.4s ease forwards; }

/* ═══════════════════════════════════════════
   FOOTER — Footer()
   relative z-10 mt-20 overflow-hidden
═══════════════════════════════════════════ */
.ain-footer {
  position: relative;
  z-index: 10;
  margin-top: 5rem;
  overflow: hidden;
}

/* h-px w-full bg-gradient-to-l from-transparent via-gold/60 to-transparent */
.ain-footer__topline {
  height: 1px;
  width: 100%;
  background: linear-gradient(to left, transparent, oklch(0.83 0.14 85 / 0.60), transparent);
}

/* relative bg-gradient-to-b from-violet-ink via-violet-deep/90 to-violet-ink */
.ain-footer__body {
  position: relative;
  background: linear-gradient(to bottom,
    oklch(0.13 0.05 305),
    oklch(0.18 0.07 305 / 0.90),
    oklch(0.13 0.05 305)
  );
}

.ain-footer__glow1 {
  pointer-events: none;
  position: absolute;
  top: -8rem; right: 25%;
  height: 16rem; width: 16rem;
  border-radius: 50%;
  background: oklch(0.83 0.14 85 / 0.10);
  filter: blur(120px);
}
.ain-footer__glow2 {
  pointer-events: none;
  position: absolute;
  bottom: -8rem; left: 25%;
  height: 16rem; width: 16rem;
  border-radius: 50%;
  background: oklch(0.30 0.12 320 / 0.30);
  filter: blur(120px);
}

/* relative mx-auto grid w-full max-w-7xl gap-10 px-6 py-16 sm:px-10 lg:grid-cols-[1.4fr_1fr_1fr_1fr] */
.ain-footer__grid {
  position: relative;
  margin: 0 auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  gap: 2.5rem;
  padding: 1.5rem 1.5rem 4rem;
}
@media (min-width: 640px) { .ain-footer__grid { padding: 1.5rem 2.5rem 4rem; } }
@media (min-width: 1024px) {
  .ain-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    padding: 4rem 2.5rem;
  }
}

/* flex items-center gap-3 */
.ain-footer__brand-logo { display: flex; align-items: center; gap: 0.75rem; }
.ain-footer__brand-logo img { height: 3.5rem; width: 3.5rem; object-fit: contain; }
/* font-serif text-xl font-bold text-white */
.ain-footer__brand-name {
  font-family: "Markazi Text", "Amiri", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
}

/* mt-6 max-w-sm text-sm leading-loose text-white/80 */
.ain-footer__brand-desc {
  margin-top: 1.5rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: oklch(1 0 0 / 0.80);
}

/* mt-6 hairline-gold h-px w-24 */
.ain-footer__brand-line {
  margin-top: 1.5rem;
  height: 1px;
  width: 6rem;
  background: linear-gradient(90deg, transparent, oklch(0.83 0.14 85 / 0.7) 50%, transparent);
}

/* mb-5 text-xs font-bold uppercase tracking-[0.3em] text-gold */
.ain-footer__col-title {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}

/* space-y-3 text-sm text-white/85 */
.ain-footer__col-links { list-style: none; padding: 0; margin: 0; }
.ain-footer__col-links li + li { margin-top: 0.75rem; }
.ain-footer__col-links a {
  font-size: 0.875rem;
  color: oklch(1 0 0 / 0.85);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}
.ain-footer__col-links a:hover { color: var(--gold); }

/* WhatsApp / contact button */
.ain-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(to left, var(--gold-deep), var(--gold));
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--violet-ink);
  text-decoration: none;
  box-shadow: 0 15px 40px -10px oklch(0.83 0.14 85 / 0.70);
  transition: box-shadow 0.2s;
}
.ain-footer__wa:hover { box-shadow: 0 20px 50px -10px oklch(0.83 0.14 85 / 0.90); }
.ain-footer__wa svg { width: 1rem; height: 1rem; }

/* mt-5 text-xs leading-relaxed text-white/70 */
.ain-footer__note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.625;
  color: oklch(1 0 0 / 0.70);
}

/* border-t border-gold/15 */
.ain-footer__copy-bar {
  border-top: 1px solid oklch(0.83 0.14 85 / 0.15);
}

/* mx-auto flex max-w-7xl items-center justify-center px-6 py-6 text-center text-xs text-white/70 sm:px-10 */
.ain-footer__copy-inner {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80rem;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: oklch(1 0 0 / 0.70);
}

/* ═══════════════════════════════════════════
   REVEAL ANIMATIONS (scroll-triggered)
═══════════════════════════════════════════ */
.ain-reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ain-reveal.ain-in {
  opacity: 1;
  transform: translateY(0);
}
/* stagger delays */
.ain-reveal:nth-child(2) { transition-delay: 0.12s; }
.ain-reveal:nth-child(3) { transition-delay: 0.24s; }
.ain-reveal:nth-child(4) { transition-delay: 0.36s; }

/* hero animations */
@keyframes ain-hero-eyebrow {
  from { opacity: 0; transform: translateY(0.625rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ain-hero-title {
  from { opacity: 0; transform: translateY(1.875rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ain-hero-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.ain-hero__eyebrow { animation: ain-hero-eyebrow 0.7s 0.4s both; }
.ain-hero__h1      { animation: ain-hero-title   1s   0.5s cubic-bezier(0.16,1,0.3,1) both; }
.ain-hero__sub     { animation: ain-hero-eyebrow 0.8s 0.8s both; }
.ain-hero__line    { animation: ain-hero-line    0.9s 1.0s both; }
.ain-hero__desc    { animation: ain-hero-eyebrow 0.8s 1.1s both; }